docs(style): [tag] use new display tag

docs/en-US/component/tag.md

@@ -73,45 +73,50 @@ tag/checkable
 
 :::
 
-## Attributes
+## Tag API
 
-| Name                | Description                          | Type    | Accepted Values             | Default |
-| ------------------- | ------------------------------------ | ------- | --------------------------- | ------- |
-| type                | component type                       | string  | success/info/warning/danger | —       |
-| closable            | whether Tag can be removed           | boolean | —                           | false   |
-| disable-transitions | whether to disable animations        | boolean | —                           | false   |
-| hit                 | whether Tag has a highlighted border | boolean | —                           | false   |
-| color               | background color of the Tag          | string  | —                           | —       |
-| size                | tag size                             | string  | large / default /small      | default |
-| effect              | component theme                      | string  | dark / light / plain        | light   |
-| round               | whether Tag is rounded               | boolean | —                           | false   |
+### Tag Attributes
 
-## Events
+| Name                | Description                          | Type                                                     | Default |
+| ------------------- | ------------------------------------ | -------------------------------------------------------- | ------- |
+| type                | type of Tag                          | ^[enum]`'success' \| 'info' \| 'warning' \| 'danger'`    | —       |
+| closable            | whether Tag can be removed           | ^[boolean]                                               | false   |
+| disable-transitions | whether to disable animations        | ^[boolean]                                               | false   |
+| hit                 | whether Tag has a highlighted border | ^[boolean]                                               | false   |
+| color               | background color of the Tag          | ^[string]                                                | —       |
+| size                | size of Tag                          | ^[enum]`'large' \| 'default' \| 'small'`                 | default |
+| effect              | theme of Tag                         | ^[enum]`'dark' \| 'light' \| 'plain'`                    | light   |
+| round               | whether Tag is rounded               | ^[boolean]                                               | false   |
 
-| Name  | Description                  | Parameters |
-| ----- | ---------------------------- | ---------- |
-| click | triggers when Tag is clicked | —          |
-| close | triggers when Tag is removed | —          |
+### Tag Events
 
-## Slots
+| Name  | Description                  | Type                                                                |
+| ----- | ---------------------------- | ------------------------------------------------------------------- |
+| click | triggers when Tag is clicked | `(evt: MouseEvent)` => ^[Function]`(evt: MouseEvent) => boolean`          |
+| close | triggers when Tag is removed | `(evt: MouseEvent)` => ^[Function]`(evt: MouseEvent) => boolean`          |
+
+### Tag Slots
 
 | Name | Description               |
 | ---- | ------------------------- |
 | —    | customize default content |
 
-## CheckTag Attributes
 
-| Name    | Description | Type    | Accepted Values | Default |
-| ------- | ----------- | ------- | --------------- | ------- |
-| checked | is checked  | boolean | true/false      | —       |
+## CheckTag API
+
+### CheckTag Attributes
+
+| Name    | Description | Type       | Default |
+| ------- | ----------- | ---------- | ------- |
+| checked | is checked  | ^[boolean] | —       |
 
-## CheckTag Events
+### CheckTag Events
 
-| Name   | Description                        | Parameters |
-| ------ | ---------------------------------- | ---------- |
-| change | triggers when Check Tag is clicked | checked    |
+| Name   | Description                        | Type                                                            |
+| ------ | ---------------------------------- | --------------------------------------------------------------- |
+| change | triggers when Check Tag is clicked | `(value: boolean)` => ^[Function]`(value: boolean) => boolean`    |
 
-## CheckTag Slots
+### CheckTag Slots
 
 | Name | Description               |
 | ---- | ------------------------- |

packages/components/check-tag/src/check-tag.ts

@@ -5,6 +5,9 @@ import type CheckTag from './check-tag.vue'
 import type { ExtractPropTypes } from 'vue'
 
 export const checkTagProps = buildProps({
+  /**
+   * @description is checked
+   */
   checked: {
     type: Boolean,
     default: false,

packages/components/check-tag/src/check-tag.vue

@@ -1,10 +1,11 @@
 <template>
-  <span :class="[ns.b(), ns.is('checked', checked)]" @click="handleChange">
+  <span :class="containerKls" @click="handleChange">
     <slot />
   </span>
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { CHANGE_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import { checkTagEmits, checkTagProps } from './check-tag'
@@ -15,7 +16,11 @@ defineOptions({
 const props = defineProps(checkTagProps)
 const emit = defineEmits(checkTagEmits)
 
-const ns = useNamespace('check-tag')
+const nsCheckTag = useNamespace('check-tag')
+const containerKls = computed(() => [
+  nsCheckTag.b(),
+  nsCheckTag.is('checked', props.checked),
+])
 
 const handleChange = () => {
   const checked = !props.checked

packages/components/tag/src/tag.ts

@@ -5,28 +5,52 @@ import type Tag from './tag.vue'
 import type { ExtractPropTypes } from 'vue'
 
 export const tagProps = buildProps({
-  closable: Boolean,
+  /**
+   * @description type of Tag
+   */
   type: {
     type: String,
     values: ['success', 'info', 'warning', 'danger', ''],
     default: '',
   },
-  hit: Boolean,
+  /**
+   * @description whether Tag can be removed
+   */
+  closable: Boolean,
+  /**
+   * @description whether to disable animations
+   */
   disableTransitions: Boolean,
+  /**
+   * @description whether Tag has a highlighted border
+   */
+  hit: Boolean,
+  /**
+   * @description background color of the Tag
+   */
   color: {
     type: String,
     default: '',
   },
+  /**
+   * @description size of Tag
+   */
   size: {
     type: String,
     values: componentSizes,
     default: '',
   },
+  /**
+   * @description theme of Tag
+   */
   effect: {
     type: String,
     values: ['dark', 'light', 'plain'],
     default: 'light',
   },
+  /**
+   * @description whether Tag is rounded
+   */
   round: Boolean,
 } as const)
 export type TagProps = ExtractPropTypes<typeof tagProps>

packages/components/tag/src/tag.vue

@@ -1,27 +1,27 @@
 <template>
   <span
     v-if="disableTransitions"
-    :class="classes"
+    :class="containerKls"
     :style="{ backgroundColor: color }"
     @click="handleClick"
   >
-    <span :class="ns.e('content')">
+    <span :class="contentKls">
       <slot />
     </span>
-    <el-icon v-if="closable" :class="ns.e('close')" @click.stop="handleClose">
+    <el-icon v-if="closable" :class="iconKls" @click.stop="handleClose">
       <Close />
     </el-icon>
   </span>
-  <transition v-else :name="`${ns.namespace.value}-zoom-in-center`" appear>
+  <transition v-else :name="`${nsTag.namespace.value}-zoom-in-center`" appear>
     <span
-      :class="classes"
+      :class="containerKls"
       :style="{ backgroundColor: color }"
       @click="handleClick"
     >
-      <span :class="ns.e('content')">
+      <span :class="contentKls">
         <slot />
       </span>
-      <el-icon v-if="closable" :class="ns.e('close')" @click.stop="handleClose">
+      <el-icon v-if="closable" :class="iconKls" @click.stop="handleClose">
         <Close />
       </el-icon>
     </span>
@@ -44,19 +44,21 @@ const props = defineProps(tagProps)
 const emit = defineEmits(tagEmits)
 
 const tagSize = useFormSize()
-const ns = useNamespace('tag')
-const classes = computed(() => {
+const nsTag = useNamespace('tag')
+const containerKls = computed(() => {
   const { type, hit, effect, closable, round } = props
   return [
-    ns.b(),
-    ns.is('closable', closable),
-    ns.m(type),
-    ns.m(tagSize.value),
-    ns.m(effect),
-    ns.is('hit', hit),
-    ns.is('round', round),
+    nsTag.b(),
+    nsTag.is('closable', closable),
+    nsTag.m(type),
+    nsTag.m(tagSize.value),
+    nsTag.m(effect),
+    nsTag.is('hit', hit),
+    nsTag.is('round', round),
   ]
 })
+const contentKls = computed(() => nsTag.e('content'))
+const iconKls = computed(() => nsTag.e('close'))
 
 // methods
 const handleClose = (event: MouseEvent) => {