refactor(components): refactor tag (#3489)

* refactor(components): refactor tag

* fix

packages/components/tag/__tests__/tag.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Tag from '../src/index.vue'
+import Tag from '../src/tag.vue'
 
 const AXIOM = 'Rem is the best girl'
 

packages/components/tag/index.ts

@@ -1,13 +1,8 @@
-import Tag 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 Tag from './src/tag.vue'
 
-Tag.install = (app: App): void => {
-  app.component(Tag.name, Tag)
-}
+export const ElTag = withInstall(Tag)
+export default ElTag
 
-const _Tag = Tag as SFCWithInstall<typeof Tag>
-
-export default _Tag
-export const ElTag = _Tag
+export * from './src/tag'

packages/components/tag/src/tag.ts

@@ -0,0 +1,34 @@
+import { buildProp } from '@element-plus/utils/props'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const tagProps = {
+  closable: Boolean,
+  type: buildProp({
+    type: String,
+    values: ['success', 'info', 'warning', 'danger', ''] as const,
+    default: '',
+  }),
+  hit: Boolean,
+  disableTransitions: Boolean,
+  color: {
+    type: String,
+    default: '',
+  },
+  size: buildProp({
+    type: String,
+    values: ['medium', 'small', 'mini'],
+  } as const),
+  effect: buildProp({
+    type: String,
+    values: ['dark', 'light', 'plain'] as const,
+    default: 'light',
+  }),
+} as const
+export type TagProps = ExtractPropTypes<typeof tagProps>
+
+export const tagEmits = {
+  close: (evt: MouseEvent) => evt instanceof MouseEvent,
+  click: (evt: MouseEvent) => evt instanceof MouseEvent,
+}
+export type TagEmits = typeof tagEmits

packages/components/tag/src/tag.vue

@@ -31,44 +31,19 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { useGlobalConfig } from '@element-plus/utils/util'
-import { isValidComponentSize } from '@element-plus/utils/validators'
 
-import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import { tagProps, tagEmits } from './tag'
 
 export default defineComponent({
   name: 'ElTag',
-  props: {
-    closable: Boolean,
-    type: {
-      type: String as PropType<'success' | 'info' | 'warning' | 'danger' | ''>,
-      default: '',
-    },
-    hit: Boolean,
-    disableTransitions: Boolean,
-    color: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String as PropType<ComponentSize>,
-      validator: isValidComponentSize,
-    },
-    effect: {
-      type: String,
-      default: 'light',
-      validator: (val: string): boolean => {
-        return ['dark', 'light', 'plain'].indexOf(val) !== -1
-      },
-    },
-  },
-  emits: ['close', 'click'],
-  setup(props, ctx) {
+
+  props: tagProps,
+  emits: tagEmits,
+
+  setup(props, { emit }) {
     const ELEMENT = useGlobalConfig()
 
-    const tagSize = computed(() => {
-      return props.size || ELEMENT.size
-    })
+    const tagSize = computed(() => props.size || ELEMENT.size)
     const classes = computed(() => {
       const { type, hit, effect } = props
       return [
@@ -81,17 +56,16 @@ export default defineComponent({
     })
 
     // methods
-    const handleClose = (event) => {
+    const handleClose = (event: MouseEvent) => {
       event.stopPropagation()
-      ctx.emit('close', event)
+      emit('close', event)
     }
 
-    const handleClick = (event) => {
-      ctx.emit('click', event)
+    const handleClick = (event: MouseEvent) => {
+      emit('click', event)
     }
 
     return {
-      tagSize,
       classes,
       handleClose,
       handleClick,