feat(components): [check-tag] add type prop (#15727)

* feat(components): [check-tag] add type prop * feat(components): update
2025-08-26 12:32:17 +08:00 · 2024-02-02 09:22:42 +08:00
parent 95f4afe89d
commit 9cf28d22fe
14 changed files with 144 additions and 131 deletions
--- a/docs/en-US/component/tag.md
+++ b/docs/en-US/component/tag.md
@ -53,7 +53,7 @@ tag/theme

 :::

-## Rounded <el-tag>> 2.1.7</el-tag>
+## Rounded

 Tag can also be rounded like button.

@ -63,9 +63,9 @@ tag/rounded

 :::

-## Checkable tag
+## Checkable Tag

-Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
+Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`. You can use `type` prop in ^(2.5.4).

 :::demo basic check-tag usage, the API is rather simple.

@ -77,16 +77,16 @@ tag/checkable

 ### Tag Attributes

-| 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                          | Type                                                               | Default |
+|---------------------|--------------------------------------|--------------------------------------------------------------------|---------|
+| type                | type of Tag                          | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary |
+| 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   |

 ### Tag Events

@ -105,9 +105,10 @@ tag/checkable

 ### CheckTag Attributes

-| Name                      | Description | Type       | Default |
-| ------------------------- | ----------- | ---------- | ------- |
-| checked / v-model:checked | is checked  | ^[boolean] | false   |
+| Name                      | Description      | Type                                                               | Default |
+|---------------------------|------------------|--------------------------------------------------------------------|---------|
+| checked / v-model:checked | is checked       | ^[boolean]                                                         | false   |
+| type ^(2.5.4)             | type of CheckTag | ^[enum]`'primary' \| 'success' \| 'info' \| 'warning' \| 'danger'` | primary |

 ### CheckTag Events

--- a/docs/examples/tag/basic.vue
+++ b/docs/examples/tag/basic.vue
@ -1,7 +1,10 @@
 <template>
-  <el-tag>Tag 1</el-tag>
-  <el-tag class="ml-2" type="success">Tag 2</el-tag>
-  <el-tag class="ml-2" type="info">Tag 3</el-tag>
-  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
-  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
+  <div class="flex gap-2">
+    <el-tag type="primary">Tag 1</el-tag>
+    <el-tag type="success">Tag 2</el-tag>
+    <el-tag type="info">Tag 3</el-tag>
+    <el-tag type="warning">Tag 4</el-tag>
+    <el-tag type="danger">Tag 5</el-tag>
+  </div>
 </template>
+<script setup lang="ts"></script>
--- a/docs/examples/tag/checkable.vue
+++ b/docs/examples/tag/checkable.vue
@ -1,16 +1,58 @@
 <template>
-  <div>
-    <el-check-tag checked style="margin-right: 8px">Checked</el-check-tag>
+  <div class="flex gap-2">
+    <el-check-tag checked>Checked</el-check-tag>
    <el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
  </div>
+  <div class="flex gap-2 mt-4">
+    <el-check-tag :checked="checked1" type="primary" @change="onChange1">
+      Tag 1
+    </el-check-tag>
+    <el-check-tag :checked="checked2" type="success" @change="onChange2">
+      Tag 2
+    </el-check-tag>
+    <el-check-tag :checked="checked3" type="info" @change="onChange3">
+      Tag 3
+    </el-check-tag>
+    <el-check-tag :checked="checked4" type="warning" @change="onChange4">
+      Tag 4
+    </el-check-tag>
+    <el-check-tag :checked="checked5" type="danger" @change="onChange5">
+      Tag 5
+    </el-check-tag>
+  </div>
 </template>

 <script lang="ts" setup>
 import { ref } from 'vue'

 const checked = ref(false)
+const checked1 = ref(true)
+const checked2 = ref(true)
+const checked3 = ref(true)
+const checked4 = ref(true)
+const checked5 = ref(true)

 const onChange = (status: boolean) => {
  checked.value = status
 }
+
+const onChange1 = (status: boolean) => {
+  checked1.value = status
+}
+
+const onChange2 = (status: boolean) => {
+  checked2.value = status
+}
+
+const onChange3 = (status: boolean) => {
+  checked3.value = status
+}
+
+const onChange4 = (status: boolean) => {
+  checked4.value = status
+}
+
+const onChange5 = (status: boolean) => {
+  checked5.value = status
+}
 </script>
--- a/docs/examples/tag/editable.vue
+++ b/docs/examples/tag/editable.vue
@ -1,26 +1,27 @@
 <template>
-  <el-tag
-    v-for="tag in dynamicTags"
-    :key="tag"
-    class="mx-1"
-    closable
-    :disable-transitions="false"
-    @close="handleClose(tag)"
-  >
-    {{ tag }}
-  </el-tag>
-  <el-input
-    v-if="inputVisible"
-    ref="InputRef"
-    v-model="inputValue"
-    class="ml-1 w-20"
-    size="small"
-    @keyup.enter="handleInputConfirm"
-    @blur="handleInputConfirm"
-  />
-  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
-    + New Tag
-  </el-button>
+  <div class="flex gap-2">
+    <el-tag
+      v-for="tag in dynamicTags"
+      :key="tag"
+      closable
+      :disable-transitions="false"
+      @close="handleClose(tag)"
+    >
+      {{ tag }}
+    </el-tag>
+    <el-input
+      v-if="inputVisible"
+      ref="InputRef"
+      v-model="inputValue"
+      class="w-20"
+      size="small"
+      @keyup.enter="handleInputConfirm"
+      @blur="handleInputConfirm"
+    />
+    <el-button v-else class="button-new-tag" size="small" @click="showInput">
+      + New Tag
+    </el-button>
+  </div>
 </template>

 <script lang="ts" setup>
--- a/docs/examples/tag/removable.vue
+++ b/docs/examples/tag/removable.vue
@ -1,20 +1,16 @@
 <template>
-  <el-tag
-    v-for="tag in tags"
-    :key="tag.name"
-    class="mx-1"
-    closable
-    :type="tag.type"
-  >
-    {{ tag.name }}
-  </el-tag>
+  <div class="flex gap-2">
+    <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
+      {{ tag.name }}
+    </el-tag>
+  </div>
 </template>

 <script lang="ts" setup>
 import { ref } from 'vue'

 const tags = ref([
-  { name: 'Tag 1', type: '' },
+  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
--- a/docs/examples/tag/rounded.vue
+++ b/docs/examples/tag/rounded.vue
@ -1,34 +1,31 @@
 <template>
-  <div class="flex flex-wrap gap-2 my-2">
+  <div class="flex gap-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
-      class="mx-1"
      effect="dark"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
-  <div class="flex flex-wrap gap-2">
+  <div class="flex gap-2 mt-4">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
-      class="mx-1"
      effect="light"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
-  <div class="flex flex-wrap gap-2 my-2">
+  <div class="flex gap-2 mt-4">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
-      class="mx-1"
      effect="plain"
      round
    >
@ -45,10 +42,10 @@ import type { TagProps } from 'element-plus'
 type Item = { type: TagProps['type']; label: string }

 const items = ref<Array<Item>>([
-  { type: '', label: 'Tag 1' },
+  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
-  { type: 'danger', label: 'Tag 4' },
-  { type: 'warning', label: 'Tag 5' },
+  { type: 'warning', label: 'Tag 4' },
+  { type: 'danger', label: 'Tag 5' },
 ])
 </script>
--- a/docs/examples/tag/sizes.vue
+++ b/docs/examples/tag/sizes.vue
@ -1,13 +1,7 @@
 <template>
-  <el-row>
-    <el-tag class="mx-1" size="large">Large</el-tag>
-    <el-tag class="mx-1">Default</el-tag>
-    <el-tag class="mx-1" size="small">Small</el-tag>
-  </el-row>
-
-  <el-row class="mt-4">
-    <el-tag class="mx-1" size="large" closable>Large</el-tag>
-    <el-tag class="mx-1" closable>Default</el-tag>
-    <el-tag class="mx-1" size="small" closable>Small</el-tag>
-  </el-row>
+  <div class="flex gap-2">
+    <el-tag size="large">Large</el-tag>
+    <el-tag>Default</el-tag>
+    <el-tag size="small">Small</el-tag>
+  </div>
 </template>
--- a/docs/examples/tag/theme.vue
+++ b/docs/examples/tag/theme.vue
@ -1,69 +1,36 @@
 <template>
-  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
-    <span class="tag-group__title m-1 line-height-2">Dark</span>
+  <div class="flex gap-2">
+    <span>Dark</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
-      class="mx-1"
      effect="dark"
    >
      {{ item.label }}
    </el-tag>
-    <el-tag
-      v-for="item in items"
-      :key="item.label"
-      :type="item.type"
-      class="mx-1"
-      effect="dark"
-      closable
-    >
-      {{ item.label }}
-    </el-tag>
  </div>
-  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
-    <span class="tag-group__title m-1">Light</span>
+  <div class="flex gap-2 mt-4">
+    <span>Light</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
-      class="mx-1"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </el-tag>
-    <el-tag
-      v-for="item in items"
-      :key="item.label"
-      class="mx-1"
-      :type="item.type"
-      effect="light"
-      closable
-    >
-      {{ item.label }}
-    </el-tag>
  </div>
-  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
-    <span class="tag-group__title m-1">Plain</span>
+  <div class="flex gap-2 mt-4">
+    <span>Plain</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
-      class="mx-1"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </el-tag>
-    <el-tag
-      v-for="item in items"
-      :key="item.label"
-      class="mx-1"
-      :type="item.type"
-      effect="plain"
-      closable
-    >
-      {{ item.label }}
-    </el-tag>
  </div>
 </template>

@ -75,10 +42,10 @@ import type { TagProps } from 'element-plus'
 type Item = { type: TagProps['type']; label: string }

 const items = ref<Array<Item>>([
-  { type: '', label: 'Tag 1' },
+  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
-  { type: 'danger', label: 'Tag 4' },
-  { type: 'warning', label: 'Tag 5' },
+  { type: 'warning', label: 'Tag 4' },
+  { type: 'danger', label: 'Tag 5' },
 ])
 </script>
--- a/packages/components/check-tag/src/check-tag.ts
+++ b/packages/components/check-tag/src/check-tag.ts
@ -12,6 +12,14 @@ export const checkTagProps = buildProps({
    type: Boolean,
    default: false,
  },
+  /**
+   * @description type of Tag
+   */
+  type: {
+    type: String,
+    values: ['primary', 'success', 'info', 'warning', 'danger'],
+    default: 'primary',
+  },
 } as const)
 export type CheckTagProps = ExtractPropTypes<typeof checkTagProps>

--- a/packages/components/check-tag/src/check-tag.vue
+++ b/packages/components/check-tag/src/check-tag.vue
@ -17,7 +17,11 @@ const props = defineProps(checkTagProps)
 const emit = defineEmits(checkTagEmits)

 const ns = useNamespace('check-tag')
-const containerKls = computed(() => [ns.b(), ns.is('checked', props.checked)])
+const containerKls = computed(() => [
+  ns.b(),
+  ns.is('checked', props.checked),
+  ns.m(props.type || 'primary'),
+])

 const handleChange = () => {
  const checked = !props.checked
--- a/packages/components/tag/src/tag.ts
+++ b/packages/components/tag/src/tag.ts
@ -10,8 +10,8 @@ export const tagProps = buildProps({
   */
  type: {
    type: String,
-    values: ['success', 'info', 'warning', 'danger', ''],
-    default: '',
+    values: ['primary', 'success', 'info', 'warning', 'danger'],
+    default: 'primary',
  },
  /**
   * @description whether Tag can be removed
@ -28,17 +28,13 @@ export const tagProps = buildProps({
  /**
   * @description background color of the Tag
   */
-  color: {
-    type: String,
-    default: '',
-  },
+  color: String,
  /**
   * @description size of Tag
   */
  size: {
    type: String,
    values: componentSizes,
-    default: '',
  },
  /**
   * @description theme of Tag
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@ -50,7 +50,7 @@ const containerKls = computed(() => {
  return [
    ns.b(),
    ns.is('closable', closable),
-    ns.m(type),
+    ns.m(type || 'primary'),
    ns.m(tagSize.value),
    ns.m(effect),
    ns.is('hit', hit),
--- a/packages/theme-chalk/src/check-tag.scss
+++ b/packages/theme-chalk/src/check-tag.scss
@ -18,10 +18,15 @@
  }

  @include when(checked) {
-    background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary');
-    &:hover {
-      background-color: getCssVar('color', 'primary', 'light-7');
+    @each $type in $types {
+      &.#{bem('check-tag', '', $type)} {
+        background-color: getCssVar('color', $type, 'light-8');
+        color: getCssVar('color', $type);
+
+        &:hover {
+          background-color: getCssVar('color', $type, 'light-7');
+        }
+      }
    }
  }
 }
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@ -63,7 +63,6 @@ $tag-icon-span-gap: map.merge(
@include b(tag) {
  @include genTheme('light-9', 'light-8', '');

-  @include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include css-var-from-global(('tag', 'text-color'), ('color', $type));