From 0490774f53546d8118dff9ce1b691c9037673ebe Mon Sep 17 00:00:00 2001 From: YilunSun Date: Mon, 5 Sep 2022 10:26:51 +0800 Subject: [PATCH 1/4] feat(rate): support rate component --- script/generate-usage/config.js | 10 +++ site/site.config.mjs | 7 ++ src/components.ts | 1 + src/rate/_example/base.vue | 3 + src/rate/_example/custom.vue | 3 + src/rate/_example/icon.vue | 22 +++++ src/rate/_example/size.vue | 8 ++ src/rate/_example/status.vue | 10 +++ src/rate/_example/texts.vue | 3 + src/rate/_usage/index.vue | 24 +++++ src/rate/index.ts | 10 +++ src/rate/rate.tsx | 154 ++++++++++++++++++++++++++++++++ src/rate/style/css.js | 1 + src/rate/style/index.js | 1 + 14 files changed, 257 insertions(+) create mode 100644 src/rate/_example/base.vue create mode 100644 src/rate/_example/custom.vue create mode 100644 src/rate/_example/icon.vue create mode 100644 src/rate/_example/size.vue create mode 100644 src/rate/_example/status.vue create mode 100644 src/rate/_example/texts.vue create mode 100644 src/rate/_usage/index.vue create mode 100644 src/rate/index.ts create mode 100644 src/rate/rate.tsx create mode 100644 src/rate/style/css.js create mode 100644 src/rate/style/index.js diff --git a/script/generate-usage/config.js b/script/generate-usage/config.js index edca0199d..05f0bae2c 100644 --- a/script/generate-usage/config.js +++ b/script/generate-usage/config.js @@ -511,6 +511,16 @@ module.exports = { `, }, }, + rate: { + panelStr: `const panelList = [{label: 'rate', value: 'rate'}];`, + render: { + rate: ` + + `, + }, + }, dialog: { panelStr: `const panelList = [{label: 'dialog', value: 'dialog'}];`, script: ` diff --git a/site/site.config.mjs b/site/site.config.mjs index 5e54ab9fa..da5681f1f 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -522,6 +522,13 @@ const docs = [ component: () => import('tdesign-vue/watermark/watermark.md'), componentEn: () => import('tdesign-vue/watermark/watermark.en-US.md'), }, + { + title: 'Rate 评分', + name: 'rate', + docType: 'data', + path: '/vue/components/rate', + component: () => import('@/examples/rate/rate.md'), + }, ], }, { diff --git a/src/components.ts b/src/components.ts index 203decd8d..710544df0 100644 --- a/src/components.ts +++ b/src/components.ts @@ -59,6 +59,7 @@ export * from './tooltip'; export * from './tree'; export * from './watermark'; export * from './collapse'; +export * from './rate'; // 消息提醒 diff --git a/src/rate/_example/base.vue b/src/rate/_example/base.vue new file mode 100644 index 000000000..56160151b --- /dev/null +++ b/src/rate/_example/base.vue @@ -0,0 +1,3 @@ + diff --git a/src/rate/_example/custom.vue b/src/rate/_example/custom.vue new file mode 100644 index 000000000..2f4027711 --- /dev/null +++ b/src/rate/_example/custom.vue @@ -0,0 +1,3 @@ + diff --git a/src/rate/_example/icon.vue b/src/rate/_example/icon.vue new file mode 100644 index 000000000..cb0ae1f49 --- /dev/null +++ b/src/rate/_example/icon.vue @@ -0,0 +1,22 @@ + + diff --git a/src/rate/_example/size.vue b/src/rate/_example/size.vue new file mode 100644 index 000000000..691125e4b --- /dev/null +++ b/src/rate/_example/size.vue @@ -0,0 +1,8 @@ + diff --git a/src/rate/_example/status.vue b/src/rate/_example/status.vue new file mode 100644 index 000000000..e5a3ed67f --- /dev/null +++ b/src/rate/_example/status.vue @@ -0,0 +1,10 @@ + diff --git a/src/rate/_example/texts.vue b/src/rate/_example/texts.vue new file mode 100644 index 000000000..ecb27a7c4 --- /dev/null +++ b/src/rate/_example/texts.vue @@ -0,0 +1,3 @@ + diff --git a/src/rate/_usage/index.vue b/src/rate/_usage/index.vue new file mode 100644 index 000000000..49a845895 --- /dev/null +++ b/src/rate/_usage/index.vue @@ -0,0 +1,24 @@ + + + + diff --git a/src/rate/index.ts b/src/rate/index.ts new file mode 100644 index 000000000..9e9c855dd --- /dev/null +++ b/src/rate/index.ts @@ -0,0 +1,10 @@ +import _Rate from './rate'; +import withInstall from '../utils/withInstall'; + +import './style'; + +export * from './type'; + +export const Rate = withInstall(_Rate); + +export default Rate; diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx new file mode 100644 index 000000000..fcf4c4b33 --- /dev/null +++ b/src/rate/rate.tsx @@ -0,0 +1,154 @@ +import { + defineComponent, computed, toRefs, ref, +} from '@vue/composition-api'; +import { StarFilledIcon } from 'tdesign-icons-vue'; +import useVModel from '../hooks/useVModel'; +import props from './props'; +import { useConfig } from '../hooks/useConfig'; +import { useTNodeJSX } from '../hooks/tnode'; +import Tooltip from '../tooltip/index'; + +export default defineComponent({ + name: 'TRate', + + props: { ...props }, + + setup(props, { slots }) { + const renderTNodeJSX = useTNodeJSX(); + + const activeColor = Array.isArray(props.color) ? props.color[0] : props.color; + const defaultColor = Array.isArray(props.color) ? props.color[1] : 'var(--td-bg-color-component)'; + + const { value: inputValue } = toRefs(props); + const [starValue, setStarValue] = useVModel(inputValue, props.defaultValue, props.onChange, 'change'); + + const hoverValue = ref(undefined); + const root = ref(); + + const displayValue = computed(() => Number(hoverValue.value || starValue.value)); + const displayText = computed(() => props.texts.length === 0 ? ['极差', '失望', '一般', '满意', '惊喜'] : props.texts); + + // 评分图标 + const RateIcon = (iconProps: any) => { + if (slots.icon !== undefined) { + return renderTNodeJSX('icon', { + params: iconProps, + }); + } + + return ; + }; + + const getStarValue = (event: MouseEvent, index: number) => { + if (props.allowHalf) { + const { left } = root.value.getBoundingClientRect(); + const firstStar = root.value.firstChild.nextSibling as HTMLElement; + const { width } = firstStar.getBoundingClientRect(); + const { clientX } = event; + const starMiddle = width * (index - 0.5) + props.gap * (index - 1); + + if (clientX - left >= starMiddle) return index; + if (clientX - left < starMiddle) return index - 0.5; + } + + return index; + }; + + const mouseEnterHandler = (event: MouseEvent, index: number) => { + if (props.disabled) return; + hoverValue.value = getStarValue(event, index); + }; + + const mouseLeaveHandler = () => { + if (props.disabled) return; + hoverValue.value = undefined; + }; + + const clickHandler = (event: MouseEvent, index: number) => { + if (props.disabled) return; + setStarValue(getStarValue(event, index)); + }; + + const getStarCls = (index: number) => { + if (props.allowHalf && index + 0.5 === displayValue.value) return `${classPrefix.value}-rate__item--half`; + if (index >= displayValue.value) return ''; + if (index < displayValue.value) return `${classPrefix.value}-rate__item--full`; + }; + + const { classPrefix } = useConfig('classPrefix'); + + return { + classPrefix, + mouseLeaveHandler, + getStarCls, + clickHandler, + mouseEnterHandler, + RateIcon, + activeColor, + defaultColor, + displayText, + displayValue, + root, + }; + }, + + render() { + const { + classPrefix, + mouseLeaveHandler, + getStarCls, + clickHandler, + mouseEnterHandler, + RateIcon, + activeColor, + defaultColor, + displayText, + displayValue, + root, + } = this; + + return ( +
+
    + {[...Array(Number(props.count))].map((_, index) => ( +
  • clickHandler(event, index + 1)} + onMousemove={(event: MouseEvent) => mouseEnterHandler(event, index + 1)} + > + +
    + +
    +
    + +
    +     + {/* {props.showText ? ( + +
    + +
    +
    + +
    +     + ) : ( + <> +
    + +
    +
    + +
    + + )} */} +
    • + ))} +
+ {props.showText &&
{displayText[displayValue - 1]}
} +
+ ); + }, +}); diff --git a/src/rate/style/css.js b/src/rate/style/css.js new file mode 100644 index 000000000..6a9a4b132 --- /dev/null +++ b/src/rate/style/css.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/src/rate/style/index.js b/src/rate/style/index.js new file mode 100644 index 000000000..9c1a0fb38 --- /dev/null +++ b/src/rate/style/index.js @@ -0,0 +1 @@ +import '../../_common/style/web/components/rate/_index.less'; From ec1ed75c9cc29f1c6daf9b47a83d00240d083209 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Wed, 21 Sep 2022 12:00:06 +0800 Subject: [PATCH 2/4] feat(rate): translate into vue2 to make Rate works --- site/site.config.mjs | 4 +- src/rate/index.ts | 3 +- src/rate/rate.tsx | 123 ++++++++++++++++---------------- src/time-picker/time-picker.tsx | 1 - 4 files changed, 65 insertions(+), 66 deletions(-) diff --git a/site/site.config.mjs b/site/site.config.mjs index da5681f1f..bebc693f7 100644 --- a/site/site.config.mjs +++ b/site/site.config.mjs @@ -527,7 +527,9 @@ const docs = [ name: 'rate', docType: 'data', path: '/vue/components/rate', - component: () => import('@/examples/rate/rate.md'), + component: () => import('tdesign-vue/rate/rate.md'), + componentEn: () => import('tdesign-vue/rate/rate.en-US.md'), + }, ], }, diff --git a/src/rate/index.ts b/src/rate/index.ts index 9e9c855dd..023afe604 100644 --- a/src/rate/index.ts +++ b/src/rate/index.ts @@ -1,3 +1,4 @@ +import VueCompositionAPI from '@vue/composition-api'; import _Rate from './rate'; import withInstall from '../utils/withInstall'; @@ -5,6 +6,6 @@ import './style'; export * from './type'; -export const Rate = withInstall(_Rate); +export const Rate = withInstall(_Rate, VueCompositionAPI); export default Rate; diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx index fcf4c4b33..6678af3f5 100644 --- a/src/rate/rate.tsx +++ b/src/rate/rate.tsx @@ -5,17 +5,15 @@ import { StarFilledIcon } from 'tdesign-icons-vue'; import useVModel from '../hooks/useVModel'; import props from './props'; import { useConfig } from '../hooks/useConfig'; -import { useTNodeJSX } from '../hooks/tnode'; import Tooltip from '../tooltip/index'; +import { renderTNodeJSXDefault } from '../utils/render-tnode'; export default defineComponent({ name: 'TRate', props: { ...props }, - setup(props, { slots }) { - const renderTNodeJSX = useTNodeJSX(); - + setup(props) { const activeColor = Array.isArray(props.color) ? props.color[0] : props.color; const defaultColor = Array.isArray(props.color) ? props.color[1] : 'var(--td-bg-color-component)'; @@ -23,27 +21,17 @@ export default defineComponent({ const [starValue, setStarValue] = useVModel(inputValue, props.defaultValue, props.onChange, 'change'); const hoverValue = ref(undefined); - const root = ref(); + const rootRef = ref(); + const { classPrefix } = useConfig('classPrefix'); const displayValue = computed(() => Number(hoverValue.value || starValue.value)); const displayText = computed(() => props.texts.length === 0 ? ['极差', '失望', '一般', '满意', '惊喜'] : props.texts); - // 评分图标 - const RateIcon = (iconProps: any) => { - if (slots.icon !== undefined) { - return renderTNodeJSX('icon', { - params: iconProps, - }); - } - - return ; - }; - const getStarValue = (event: MouseEvent, index: number) => { if (props.allowHalf) { - const { left } = root.value.getBoundingClientRect(); - const firstStar = root.value.firstChild.nextSibling as HTMLElement; - const { width } = firstStar.getBoundingClientRect(); + const { left } = rootRef.value?.getBoundingClientRect?.(); + const firstStar = rootRef.value.firstChild.nextSibling as HTMLElement; + const { width } = firstStar?.getBoundingClientRect?.(); const { clientX } = event; const starMiddle = width * (index - 0.5) + props.gap * (index - 1); @@ -75,79 +63,88 @@ export default defineComponent({ if (index < displayValue.value) return `${classPrefix.value}-rate__item--full`; }; - const { classPrefix } = useConfig('classPrefix'); + const activeIconStyle = computed(() => ({ + fontSize: props.size, + color: activeColor, + })); + const inactiveIconStyle = computed(() => ({ + fontSize: props.size, + color: defaultColor, + })); return { classPrefix, mouseLeaveHandler, getStarCls, clickHandler, mouseEnterHandler, - RateIcon, activeColor, defaultColor, displayText, displayValue, - root, + rootRef, + activeIconStyle, + inactiveIconStyle, }; }, - + methods: { + renderRateIcon() { + return renderTNodeJSXDefault(this, 'icon', ); + }, + }, render() { const { - classPrefix, - mouseLeaveHandler, - getStarCls, - clickHandler, - mouseEnterHandler, - RateIcon, - activeColor, - defaultColor, - displayText, - displayValue, - root, + classPrefix, mouseLeaveHandler, getStarCls, clickHandler, mouseEnterHandler, displayText, displayValue, } = this; return (
-
    - {[...Array(Number(props.count))].map((_, index) => ( +
      + {[...Array(Number(this.count))].map((_, index) => (
    • clickHandler(event, index + 1)} onMousemove={(event: MouseEvent) => mouseEnterHandler(event, index + 1)} > - -
      - -
      -
      - + {this.showText ? ( + +
      + {this.renderRateIcon()} +
      +
      + {this.renderRateIcon()} +
      +       + ) : ( +
      +
      + {this.renderRateIcon()} +
      +
      + {this.renderRateIcon()} +
      - - {/* {props.showText ? ( - -
      - -
      -
      - -
      -       - ) : ( - <> -
      - -
      -
      - -
      - - )} */} + )}
      • ))}
    - {props.showText &&
    {displayText[displayValue - 1]}
    } + {this.showText &&
    {displayText[displayValue - 1]}
    }
); }, diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx index 060e1cd14..281039c91 100755 --- a/src/time-picker/time-picker.tsx +++ b/src/time-picker/time-picker.tsx @@ -114,7 +114,6 @@ export default defineComponent({ }, render() { const { TimeIcon } = this; - return (
Date: Wed, 21 Sep 2022 12:15:07 +0800 Subject: [PATCH 3/4] chore: update snapshot --- .../__tests__/__snapshots__/demo.test.js.snap | 2239 +++++++++++++++++ src/rate/__tests__/demo.test.js | 30 + test/ssr/__snapshots__/ssr.test.js.snap | 625 +++++ 3 files changed, 2894 insertions(+) create mode 100644 src/rate/__tests__/__snapshots__/demo.test.js.snap create mode 100644 src/rate/__tests__/demo.test.js diff --git a/src/rate/__tests__/__snapshots__/demo.test.js.snap b/src/rate/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..93d8d90ad --- /dev/null +++ b/src/rate/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,2239 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`RangeInput RangeInput baseVue demo works fine 1`] = ` +
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+`; + +exports[`RangeInput RangeInput customVue demo works fine 1`] = ` +
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+`; + +exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` +
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+`; + +exports[`RangeInput RangeInput sizeVue demo works fine 1`] = ` +
+
+

+ 16px +

+
+
+
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+
+
+

+ 24px +

+
+
+
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+
+
+`; + +exports[`RangeInput RangeInput statusVue demo works fine 1`] = ` +
+
+

+ 未评分状态 +

+
+
+
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+
+
+

+ 满分状态 +

+
+
+
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+
+
+

+ 半星状态 +

+
+
+
+
    +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
  • +
    +
    + + + +
    +
    + + + +
    +
    +
    • +
+
+
+
+`; + +exports[`RangeInput RangeInput textsVue demo works fine 1`] = ` +
+
    +
  • + +
    + + + +
    +
    + + + +
    +     +
    • +
  • + +
    + + + +
    +
    + + + +
    +     +
    • +
  • + +
    + + + +
    +
    + + + +
    +     +
    • +
  • + +
    + + + +
    +
    + + + +
    +     +
    • +
  • + +
    + + + +
    +
    + + + +
    +     +
    • +
+
+ 满意 +
+
+`; diff --git a/src/rate/__tests__/demo.test.js b/src/rate/__tests__/demo.test.js new file mode 100644 index 000000000..cdf833ca1 --- /dev/null +++ b/src/rate/__tests__/demo.test.js @@ -0,0 +1,30 @@ +/** + * 该文件为由脚本 `npm run test:demo` 自动生成，如需修改，执行脚本命令即可。请勿手写直接修改，否则会被覆盖 + */ + +import { mount } from '@vue/test-utils'; +import baseVue from '@/src/rate/_example/base.vue'; +import customVue from '@/src/rate/_example/custom.vue'; +import iconVue from '@/src/rate/_example/icon.vue'; + +import sizeVue from '@/src/rate/_example/size.vue'; +import statusVue from '@/src/rate/_example/status.vue'; +import textsVue from '@/src/rate/_example/texts.vue'; + +const mapper = { + baseVue, + customVue, + iconVue, + sizeVue, + statusVue, + textsVue, +}; + +describe('RangeInput', () => { + Object.keys(mapper).forEach((demoName) => { + it(`RangeInput ${demoName} demo works fine`, () => { + const wrapper = mount(mapper[demoName]); + expect(wrapper.element).toMatchSnapshot(); + }); + }); +}); diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index c18c7f53d..73711d3ae 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -13633,6 +13633,631 @@ exports[`ssr snapshot test renders ./src/range-input/_example/status.vue correct
`; +exports[`ssr snapshot test renders ./src/rate/_example/base.vue correctly 1`] = ` +
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+`; + +exports[`ssr snapshot test renders ./src/rate/_example/custom.vue correctly 1`] = ` +
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+`; + +exports[`ssr snapshot test renders ./src/rate/_example/icon.vue correctly 1`] = ` +
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+`; + +exports[`ssr snapshot test renders ./src/rate/_example/size.vue correctly 1`] = ` +
+
+

16px

+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+

24px

+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+`; + +exports[`ssr snapshot test renders ./src/rate/_example/status.vue correctly 1`] = ` +
+
+

未评分状态

+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+

满分状态

+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+

半星状态

+
+
+
+
    +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
  • +
    +
    + +
    +
    + +
    +
    +
    • +
+
+
+
+`; + +exports[`ssr snapshot test renders ./src/rate/_example/texts.vue correctly 1`] = ` +
+
    +
    • +
    • +
    • +
    • +
    • +
+
满意
+
+`; + exports[`ssr snapshot test renders ./src/select/_example/base.vue correctly 1`] = `
From 8615eb93bf4c7f040b3f7fbbe99ba43a7e6fa313 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Wed, 21 Sep 2022 14:26:30 +0800 Subject: [PATCH 4/4] chore: update snapshot --- .../__tests__/__snapshots__/demo.test.js.snap | 438 ++++++++++++++++-- src/rate/__tests__/demo.test.js | 5 +- src/rate/_example/base.vue | 11 +- src/rate/_example/custom.vue | 11 +- src/rate/_example/icon.vue | 23 +- src/rate/_example/size.vue | 13 +- src/rate/_example/status.vue | 14 +- src/rate/_example/texts.vue | 11 +- src/rate/index.ts | 3 + test/ssr/__snapshots__/ssr.test.js.snap | 186 ++++---- 10 files changed, 569 insertions(+), 146 deletions(-) diff --git a/src/rate/__tests__/__snapshots__/demo.test.js.snap b/src/rate/__tests__/__snapshots__/demo.test.js.snap index 93d8d90ad..88b3df265 100644 --- a/src/rate/__tests__/__snapshots__/demo.test.js.snap +++ b/src/rate/__tests__/__snapshots__/demo.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`RangeInput RangeInput baseVue demo works fine 1`] = ` +exports[`Rate Rate baseVue demo works fine 1`] = `
@@ -222,7 +222,7 @@ exports[`RangeInput RangeInput baseVue demo works fine 1`] = `
`; -exports[`RangeInput RangeInput customVue demo works fine 1`] = ` +exports[`Rate Rate customVue demo works fine 1`] = `
@@ -357,7 +357,7 @@ exports[`RangeInput RangeInput customVue demo works fine 1`] = `
  • `; -exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` +exports[`Rate Rate iconVue demo works fine 1`] = `
    - + + +
    - + + +
    • @@ -569,13 +593,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -587,13 +635,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -605,13 +677,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -623,13 +719,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -654,13 +774,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -672,13 +816,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -690,13 +858,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -708,13 +900,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -726,13 +942,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px; color: rgb(237, 123, 47);" > - + + +
    - + + +
    @@ -757,13 +997,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px;" > - + + +
    - + + +
    @@ -775,13 +1039,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px;" > - + + +
    - + + +
    @@ -793,13 +1081,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px;" > - + + +
    - + + +
    @@ -811,13 +1123,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px;" > - + + +
    - + + +
    @@ -829,13 +1165,37 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` class="t-rate__star-top" style="font-size: 24px;" > - + + +
    - + + +
    @@ -845,7 +1205,7 @@ exports[`RangeInput RangeInput iconVue demo works fine 1`] = ` `; -exports[`RangeInput RangeInput sizeVue demo works fine 1`] = ` +exports[`Rate Rate sizeVue demo works fine 1`] = `
    `; -exports[`RangeInput RangeInput statusVue demo works fine 1`] = ` +exports[`Rate Rate statusVue demo works fine 1`] = `
    `; -exports[`RangeInput RangeInput textsVue demo works fine 1`] = ` +exports[`Rate Rate textsVue demo works fine 1`] = `
    diff --git a/src/rate/__tests__/demo.test.js b/src/rate/__tests__/demo.test.js index cdf833ca1..f7c3d2bb2 100644 --- a/src/rate/__tests__/demo.test.js +++ b/src/rate/__tests__/demo.test.js @@ -6,7 +6,6 @@ import { mount } from '@vue/test-utils'; import baseVue from '@/src/rate/_example/base.vue'; import customVue from '@/src/rate/_example/custom.vue'; import iconVue from '@/src/rate/_example/icon.vue'; - import sizeVue from '@/src/rate/_example/size.vue'; import statusVue from '@/src/rate/_example/status.vue'; import textsVue from '@/src/rate/_example/texts.vue'; @@ -20,9 +19,9 @@ const mapper = { textsVue, }; -describe('RangeInput', () => { +describe('Rate', () => { Object.keys(mapper).forEach((demoName) => { - it(`RangeInput ${demoName} demo works fine`, () => { + it(`Rate ${demoName} demo works fine`, () => { const wrapper = mount(mapper[demoName]); expect(wrapper.element).toMatchSnapshot(); }); diff --git a/src/rate/_example/base.vue b/src/rate/_example/base.vue index 56160151b..957b50db3 100644 --- a/src/rate/_example/base.vue +++ b/src/rate/_example/base.vue @@ -1,3 +1,12 @@ + diff --git a/src/rate/_example/custom.vue b/src/rate/_example/custom.vue index 2f4027711..f3145dd5d 100644 --- a/src/rate/_example/custom.vue +++ b/src/rate/_example/custom.vue @@ -1,3 +1,12 @@ + diff --git a/src/rate/_example/icon.vue b/src/rate/_example/icon.vue index cb0ae1f49..b09808f82 100644 --- a/src/rate/_example/icon.vue +++ b/src/rate/_example/icon.vue @@ -1,22 +1,37 @@ - diff --git a/src/rate/_example/size.vue b/src/rate/_example/size.vue index 691125e4b..8daf003f4 100644 --- a/src/rate/_example/size.vue +++ b/src/rate/_example/size.vue @@ -1,8 +1,17 @@ + diff --git a/src/rate/_example/status.vue b/src/rate/_example/status.vue index e5a3ed67f..6f84ff43e 100644 --- a/src/rate/_example/status.vue +++ b/src/rate/_example/status.vue @@ -3,8 +3,18 @@

    未评分状态

    满分状态

    - +

    半星状态

    - + + diff --git a/src/rate/_example/texts.vue b/src/rate/_example/texts.vue index ecb27a7c4..c7e78680d 100644 --- a/src/rate/_example/texts.vue +++ b/src/rate/_example/texts.vue @@ -1,3 +1,12 @@ + diff --git a/src/rate/index.ts b/src/rate/index.ts index 023afe604..b568aa481 100644 --- a/src/rate/index.ts +++ b/src/rate/index.ts @@ -1,11 +1,14 @@ import VueCompositionAPI from '@vue/composition-api'; import _Rate from './rate'; import withInstall from '../utils/withInstall'; +import { TdRateProps } from './type'; import './style'; export * from './type'; +export type RateProps = TdRateProps; + export const Rate = withInstall(_Rate, VueCompositionAPI); export default Rate; diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 73711d3ae..0f956f983 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -13723,7 +13723,7 @@ exports[`ssr snapshot test renders ./src/rate/_example/custom.vue correctly 1`]
    -
  • +
  • @@ -13733,7 +13733,7 @@ exports[`ssr snapshot test renders ./src/rate/_example/custom.vue correctly 1`]
    • -
  • +
  • @@ -13743,7 +13743,7 @@ exports[`ssr snapshot test renders ./src/rate/_example/custom.vue correctly 1`]
    • -
  • +
  • @@ -13774,52 +13774,52 @@ exports[`ssr snapshot test renders ./src/rate/_example/icon.vue correctly 1`] =
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    @@ -13830,52 +13830,52 @@ exports[`ssr snapshot test renders ./src/rate/_example/icon.vue correctly 1`] =
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    @@ -13886,52 +13886,52 @@ exports[`ssr snapshot test renders ./src/rate/_example/icon.vue correctly 1`] =
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +
    • -
      - -
      -
      - -
      +
      + +
      +
      + +