From 4a30d886a83450fff41aca43b653d66511aeb23d Mon Sep 17 00:00:00 2001 From: ntnyq Date: Sun, 7 Jul 2024 12:40:09 +0800 Subject: [PATCH] feat(components): [select & select-v2] add `tag-effect` prop (#17445) --- docs/en-US/component/select-v2.md | 1 + docs/en-US/component/select.md | 1 + packages/components/select-v2/src/defaults.ts | 4 ++++ packages/components/select-v2/src/select.vue | 3 +++ packages/components/select/src/select.ts | 4 ++++ packages/components/select/src/select.vue | 3 +++ packages/theme-chalk/src/select.scss | 4 ++++ 7 files changed, 20 insertions(+) diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index e477a03639..d2109ebdd9 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -265,6 +265,7 @@ select-v2/custom-label | collapse-tags-tooltip ^(2.3.0) | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | ^[boolean] | false | | max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 | | tag-type ^(2.5.0) | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info | +| tag-effect ^(2.7.7) | tag effect | ^[enum]`'' \| 'light' \| 'dark' \| 'plain'` | light | | aria-label ^(a11y) ^(2.5.0) | same as `aria-label` in native input | ^[string] | — | | empty-values ^(2.7.0) | empty values of component, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[array] | — | | value-on-clear ^(2.7.0) | clear return value, [see config-provider](/en-US/component/config-provider#empty-values-configurations) | ^[string] / ^[number] / ^[boolean] / ^[Function] | — | diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index 4b38b817a4..ab76abd8ad 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -227,6 +227,7 @@ select/custom-label | suffix-icon | custom suffix icon component | ^[string] / ^[object]`Component` | ArrowDown | | suffix-transition ^(deprecated) | animation when dropdown appears/disappears icon | ^[boolean] | true | | tag-type | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info | +| tag-effect ^(2.7.7) | tag effect | ^[enum]`'' \| 'light' \| 'dark' \| 'plain'` | light | | validate-event | whether to trigger form validation | ^[boolean] | true | | placement ^(2.2.17) | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start | | fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[array]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] | diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts index e5fee355f5..92c42e60aa 100644 --- a/packages/components/select-v2/src/defaults.ts +++ b/packages/components/select-v2/src/defaults.ts @@ -244,6 +244,10 @@ export const SelectProps = buildProps({ * @description tag type */ tagType: { ...tagProps.type, default: 'info' }, + /** + * @description tag effect + */ + tagEffect: { ...tagProps.effect, default: 'light' }, ...useEmptyValuesProps, ...useAriaProps(['ariaLabel']), } as const) diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue index 6618f249dc..e9387bbc49 100644 --- a/packages/components/select-v2/src/select.vue +++ b/packages/components/select-v2/src/select.vue @@ -63,6 +63,7 @@ :closable="!selectDisabled && !getDisabled(item)" :size="collapseTagSize" :type="tagType" + :effect="tagEffect" disable-transitions :style="tagStyle" @close="deleteTag($event, item)" @@ -97,6 +98,7 @@ :closable="false" :size="collapseTagSize" :type="tagType" + :effect="tagEffect" :style="collapseTagStyle" disable-transitions > @@ -118,6 +120,7 @@ :closable="!selectDisabled && !getDisabled(selected)" :size="collapseTagSize" :type="tagType" + :effect="tagEffect" disable-transitions @close="deleteTag($event, selected)" > diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts index 920547b5c6..a5a436184a 100644 --- a/packages/components/select/src/select.ts +++ b/packages/components/select/src/select.ts @@ -190,6 +190,10 @@ export const SelectProps = buildProps({ */ // eslint-disable-next-line vue/require-prop-types tagType: { ...tagProps.type, default: 'info' }, + /** + * @description tag effect + */ + tagEffect: { ...tagProps.effect, default: 'light' }, /** * @description whether to trigger form validation */ diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index 82e48954fc..1407df28c1 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -63,6 +63,7 @@ :closable="!selectDisabled && !item.isDisabled" :size="collapseTagSize" :type="tagType" + :effect="tagEffect" disable-transitions :style="tagStyle" @close="deleteTag($event, item)" @@ -97,6 +98,7 @@ :closable="false" :size="collapseTagSize" :type="tagType" + :effect="tagEffect" disable-transitions :style="collapseTagStyle" > @@ -118,6 +120,7 @@ :closable="!selectDisabled && !item.isDisabled" :size="collapseTagSize" :type="tagType" + :effect="tagEffect" disable-transitions @close="deleteTag($event, item)" > diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss index bf55f20c93..3275f1a991 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -137,6 +137,10 @@ cursor: pointer; border-color: transparent; + &.#{$namespace}-tag--plain { + border-color: getCssVar('tag', 'border-color'); + } + .#{$namespace}-tag__content { min-width: 0; }