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

* docs(style): [tag] use new display tag * refactor(components): [check] updated doc and code to new display tag * docs(components): [tag] update format of doc * style(components): [tag] undo redundant changes * style(components): [tag] undo redundant changes and update tag doc
element-plus · May 3, 2023 · 0d46d99 · 0d46d99
1 parent 9627100
commit 0d46d99
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 32 deletions.
diff --git a/docs/en-US/component/tag.md b/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' \| ''`              | ''      |
+| 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 | ^[Function]`(evt: MouseEvent) => void` |
+| close | triggers when Tag is removed | ^[Function]`(evt: MouseEvent) => void` |
+
+### 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 / v-model:checked | is checked  | ^[boolean] | false   |
 
-## 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 | ^[Function]`(value: boolean) => void` |
 
-## CheckTag Slots
+### CheckTag Slots
 
 | Name | Description               |
 | ---- | ------------------------- |

diff --git a/packages/components/check-tag/src/check-tag.ts b/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,

diff --git a/packages/components/check-tag/src/check-tag.vue b/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'
@@ -16,6 +17,7 @@ const props = defineProps(checkTagProps)
 const emit = defineEmits(checkTagEmits)
 
 const ns = useNamespace('check-tag')
+const containerKls = computed(() => [ns.b(), ns.is('checked', props.checked)])
 
 const handleChange = () => {
   const checked = !props.checked

diff --git a/packages/components/tag/src/tag.ts b/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>

diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="disableTransitions"
-    :class="classes"
+    :class="containerKls"
     :style="{ backgroundColor: color }"
     @click="handleClick"
   >
@@ -14,7 +14,7 @@
   </span>
   <transition v-else :name="`${ns.namespace.value}-zoom-in-center`" appear>
     <span
-      :class="classes"
+      :class="containerKls"
       :style="{ backgroundColor: color }"
       @click="handleClick"
     >
@@ -45,7 +45,7 @@ const emit = defineEmits(tagEmits)
 
 const tagSize = useFormSize()
 const ns = useNamespace('tag')
-const classes = computed(() => {
+const containerKls = computed(() => {
   const { type, hit, effect, closable, round } = props
   return [
     ns.b(),