From 9cf28d22fe998e8f53dee0d0896e9568225d1b0c Mon Sep 17 00:00:00 2001 From: kooriookami <38392315+kooriookami@users.noreply.github.com> Date: Fri, 2 Feb 2024 09:22:42 +0800 Subject: [PATCH] feat(components): [check-tag] add type prop (#15727) * feat(components): [check-tag] add type prop * feat(components): update --- docs/en-US/component/tag.md | 33 ++++++------ docs/examples/tag/basic.vue | 13 +++-- docs/examples/tag/checkable.vue | 46 ++++++++++++++++- docs/examples/tag/editable.vue | 45 ++++++++-------- docs/examples/tag/removable.vue | 16 +++--- docs/examples/tag/rounded.vue | 15 +++--- docs/examples/tag/sizes.vue | 16 ++---- docs/examples/tag/theme.vue | 51 ++++--------------- .../components/check-tag/src/check-tag.ts | 8 +++ .../components/check-tag/src/check-tag.vue | 6 ++- packages/components/tag/src/tag.ts | 10 ++-- packages/components/tag/src/tag.vue | 2 +- packages/theme-chalk/src/check-tag.scss | 13 +++-- packages/theme-chalk/src/tag.scss | 1 - 14 files changed, 144 insertions(+), 131 deletions(-) diff --git a/docs/en-US/component/tag.md b/docs/en-US/component/tag.md index 0e75fb3de2..25ed34b73a 100644 --- a/docs/en-US/component/tag.md +++ b/docs/en-US/component/tag.md @@ -53,7 +53,7 @@ tag/theme ::: -## Rounded > 2.1.7 +## 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 diff --git a/docs/examples/tag/basic.vue b/docs/examples/tag/basic.vue index 421a1c5dea..5df2f01b14 100644 --- a/docs/examples/tag/basic.vue +++ b/docs/examples/tag/basic.vue @@ -1,7 +1,10 @@ + diff --git a/docs/examples/tag/checkable.vue b/docs/examples/tag/checkable.vue index 5729ec86ab..d75780cafd 100644 --- a/docs/examples/tag/checkable.vue +++ b/docs/examples/tag/checkable.vue @@ -1,16 +1,58 @@ diff --git a/docs/examples/tag/editable.vue b/docs/examples/tag/editable.vue index edfb049145..4148114461 100644 --- a/docs/examples/tag/editable.vue +++ b/docs/examples/tag/editable.vue @@ -1,26 +1,27 @@ diff --git a/docs/examples/tag/sizes.vue b/docs/examples/tag/sizes.vue index 3809432c2a..9de4d89fae 100644 --- a/docs/examples/tag/sizes.vue +++ b/docs/examples/tag/sizes.vue @@ -1,13 +1,7 @@ diff --git a/docs/examples/tag/theme.vue b/docs/examples/tag/theme.vue index 4cadb36759..de046dd271 100644 --- a/docs/examples/tag/theme.vue +++ b/docs/examples/tag/theme.vue @@ -1,69 +1,36 @@ @@ -75,10 +42,10 @@ import type { TagProps } from 'element-plus' type Item = { type: TagProps['type']; label: string } const items = ref>([ - { 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' }, ]) diff --git a/packages/components/check-tag/src/check-tag.ts b/packages/components/check-tag/src/check-tag.ts index b8bc99e4fc..405f863a96 100644 --- 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 diff --git a/packages/components/check-tag/src/check-tag.vue b/packages/components/check-tag/src/check-tag.vue index 9ff65faa42..596fbddcee 100644 --- 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 diff --git a/packages/components/tag/src/tag.ts b/packages/components/tag/src/tag.ts index 853308e244..5d502ab419 100644 --- 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 diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue index f33c47a918..81d80d0cee 100644 --- 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), diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss index 88c7e1a2c8..017febb554 100644 --- 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'); + } + } } } } diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss index d92f71f754..d1ddda33dd 100644 --- 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));