refactor(components): refactor rate

packages/components/rate/__tests__/rate.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Rate from '../src/index.vue'
+import Rate from '../src/rate.vue'
 
 describe('Rate.vue', () => {
   test('create', () => {

packages/components/rate/index.ts

@@ -1,13 +1,8 @@
-import Rate from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Rate from './src/rate.vue'
 
-Rate.install = (app: App): void => {
-  app.component(Rate.name, Rate)
-}
+export const ElRate = withInstall(Rate)
+export default ElRate
 
-const _Rate = Rate as SFCWithInstall<typeof Rate>
-
-export default _Rate
-export const ElRate = _Rate
+export * from './src/rate'

packages/components/rate/src/rate.ts

@@ -0,0 +1,89 @@
+import { Star, StarFilled } from '@element-plus/icons'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { buildProps, definePropType } from '@element-plus/utils/props'
+import type { Component, ExtractPropTypes } from 'vue'
+
+export const rateProps = buildProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  lowThreshold: {
+    type: Number,
+    default: 2,
+  },
+  highThreshold: {
+    type: Number,
+    default: 4,
+  },
+  max: {
+    type: Number,
+    default: 5,
+  },
+  colors: {
+    type: [Array, Object],
+    default: () => ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
+  },
+  voidColor: {
+    type: String,
+    default: '#C6D1DE',
+  },
+  disabledVoidColor: {
+    type: String,
+    default: '#EFF2F7',
+  },
+  icons: {
+    type: definePropType<string[] | Component>([Array, Object]),
+    default: () => [StarFilled, StarFilled, StarFilled],
+  },
+  voidIcon: {
+    type: definePropType<string | Component>([String, Object]),
+    default: Star as any,
+  },
+  disabledvoidIcon: {
+    type: definePropType<string | Component>([String, Object]),
+    default: StarFilled as any,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  allowHalf: {
+    type: Boolean,
+    default: false,
+  },
+  showText: {
+    type: Boolean,
+    default: false,
+  },
+  showScore: {
+    type: Boolean,
+    default: false,
+  },
+  textColor: {
+    type: String,
+    default: '#1f2d3d',
+  },
+  texts: {
+    type: definePropType<string[]>([Array]),
+    default: () => [
+      'Extremely bad',
+      'Disappointed',
+      'Fair',
+      'Satisfied',
+      'Surprise',
+    ],
+  },
+  scoreTemplate: {
+    type: String,
+    default: '{value}',
+  },
+} as const)
+
+export type RateProps = ExtractPropTypes<typeof rateProps>
+
+export const rateEmits = {
+  change: (value: number) => typeof value === 'number',
+  [UPDATE_MODEL_EVENT]: (value: number) => typeof value === 'number',
+}
+export type RateEmits = typeof rateEmits

packages/components/rate/src/rate.vue

@@ -51,89 +51,14 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { ElIcon } from '@element-plus/components/icon'
 import { StarFilled, Star } from '@element-plus/icons'
-import type { PropType, Component } from 'vue'
+import { rateProps, rateEmits } from './rate'
 import type { ElFormContext } from '@element-plus/tokens'
 
 export default defineComponent({
   name: 'ElRate',
   components: { ElIcon, StarFilled, Star },
-  props: {
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
-    lowThreshold: {
-      type: Number,
-      default: 2,
-    },
-    highThreshold: {
-      type: Number,
-      default: 4,
-    },
-    max: {
-      type: Number,
-      default: 5,
-    },
-    colors: {
-      type: [Array, Object],
-      default: () => ['#F7BA2A', '#F7BA2A', '#F7BA2A'],
-    },
-    voidColor: {
-      type: String,
-      default: '#C6D1DE',
-    },
-    disabledVoidColor: {
-      type: String,
-      default: '#EFF2F7',
-    },
-    icons: {
-      type: [Array, Object] as PropType<string[] | Component>,
-      default: () => [StarFilled, StarFilled, StarFilled],
-    },
-    voidIcon: {
-      type: [String, Object] as PropType<string | Component>,
-      default: Star,
-    },
-    disabledvoidIcon: {
-      type: [String, Object] as PropType<string | Component>,
-      default: StarFilled,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    allowHalf: {
-      type: Boolean,
-      default: false,
-    },
-    showText: {
-      type: Boolean,
-      default: false,
-    },
-    showScore: {
-      type: Boolean,
-      default: false,
-    },
-    textColor: {
-      type: String,
-      default: '#1f2d3d',
-    },
-    texts: {
-      type: Array as PropType<string[]>,
-      default: () => [
-        'Extremely bad',
-        'Disappointed',
-        'Fair',
-        'Satisfied',
-        'Surprise',
-      ],
-    },
-    scoreTemplate: {
-      type: String,
-      default: '{value}',
-    },
-  },
-  emits: [UPDATE_MODEL_EVENT, 'change'],
+  props: rateProps,
+  emits: rateEmits,
   setup(props, { emit }) {
     const elForm = inject(elFormKey, {} as ElFormContext)