mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): [select & select-v2] add tag-effect prop (#17445)

Browse Source
This commit is contained in:
ntnyq 2024-07-07 12:40:09 +08:00 committed by GitHub
parent ea6b50fdc6
commit 4a30d886a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/en-US/component/select-v2.md
View File

@ -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] | — |

1
docs/en-US/component/select.md
View File

@ -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'] |

4
packages/components/select-v2/src/defaults.ts
View File

@ -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)

3
packages/components/select-v2/src/select.vue
View File

@ -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)"
>

4
packages/components/select/src/select.ts
View File

@ -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
*/

3
packages/components/select/src/select.vue
View File

@ -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)"
>

4
packages/theme-chalk/src/select.scss
View File

@ -137,6 +137,10 @@
cursor: pointer;
border-color: transparent;
&.#{$namespace}-tag--plain {
border-color: getCssVar('tag', 'border-color');
}
.#{$namespace}-tag__content {
min-width: 0;
}