refactor(components): [check] updated doc and code to new display tag

element-plus · Apr 29, 2023 · e5619d1 · e5619d1
1 parent d95270f
commit e5619d1
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 36 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
+
+### Tag Attributes
 
 | Name                | Description                          | Type                                                     | Default |
 | ------------------- | ------------------------------------ | -------------------------------------------------------- | ------- |
-| type                | component type                       | ^[string]`'success' \| 'info' \| 'warning' \| 'danger'`  | —       |
+| 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                | tag size                             | ^[string]`'large' \| 'default' \| 'small'`               | default |
-| effect              | component theme                      | ^[string]`'dark' \| 'light' \| 'plain'`                  | light   |
+| 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   |
 
-## Events
+### Tag Events
 
-| Name  | Description                  | Type                                                 |
-| ----- | ---------------------------- | ---------------------------------------------------- |
-| click | triggers when Tag is clicked | ^[Function]`(event: MouseEvent) => boolean`          |
-| close | triggers when Tag is removed | ^[Function]`(event: MouseEvent) => boolean`          |
+| 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`          |
 
-## Slots
+### Tag Slots
 
 | Name | Description               |
 | ---- | ------------------------- |
 | —    | customize default content |
 
-## CheckTag Attributes
+
+## CheckTag API
+
+### CheckTag Attributes
 
 | Name    | Description | Type       | Default |
 | ------- | ----------- | ---------- | ------- |
 | checked | is checked  | ^[boolean] | —       |
 
-## CheckTag Events
+### CheckTag Events
 
-| Name   | Description                        | Type                                        |
-| ------ | ---------------------------------- | ------------------------------------------- |
-| change | triggers when Check Tag is clicked | ^[Function]`(value: boolean) => boolean`    |
+| Name   | Description                        | Type                                                            |
+| ------ | ---------------------------------- | --------------------------------------------------------------- |
+| change | triggers when Check Tag is clicked | `(value: boolean)` => ^[Function]`(value: boolean) => boolean`    |
 
-## 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'
@@ -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

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,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) => {