Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(select): props collapsedItems to add onClose function #2863

Merged
merged 1 commit into from
Nov 7, 2023
Merged

feat(select): props collapsedItems to add onClose function #2863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions src/select/_example/collapsed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,38 @@ export default {
{ label: '选项一', value: '1' },
{ label: '选项二', value: '2' },
{ label: '选项三', value: '3' },
{ label: '选项四', value: '4' },
{ label: '选项五', value: '5' },
{ label: '选项六', value: '6' },
{ label: '选项七', value: '7' },
{ label: '选项八', value: '8' },
{ label: '选项九', value: '9' },
],
value: ['1', '3'],
value: ['1', '3', '9'],
minCollapsedNum: 1,
};
},
methods: {
collapsedItems(h, { value, count, collapsedSelectedItems }) {
console.log('collapsedItems: ', value, collapsedSelectedItems, count);
collapsedItems(h, {
value, count, collapsedSelectedItems, onClose,
}) {
console.log('collapsedItems: ', value, collapsedSelectedItems, count, onClose);
if (!count) return;
// hover展示全部已选项
return (
<t-popup>
<div slot="content">
{collapsedSelectedItems.map((item) => (
<p style="padding: 8px;">{item.label}</p>
{collapsedSelectedItems.map((item, index) => (
<p style="padding: 2px;">
<t-tag
closable={true}
onClick={() => {
onClose(index + 1);
}}
>
{item.label}
</t-tag>
</p>
))}
</div>
<span v-show={count > 0} style="color: #ED7B2F; margin-left: 8px">
Expand Down
2 changes: 1 addition & 1 deletion src/select/select.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ autoWidth | Boolean | false | \- | N
autofocus | Boolean | false | \- | N
borderless | Boolean | false | \- | N
clearable | Boolean | false | \- | N
collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (index: number) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
creatable | Boolean | false | \- | N
disabled | Boolean | - | \- | N
empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
Expand Down
2 changes: 1 addition & 1 deletion src/select/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N
autofocus | Boolean | false | 自动聚焦 | N
borderless | Boolean | false | 无边框模式 | N
clearable | Boolean | false | 是否可以清空选项 | N
collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量；`onClose` 表示移除标签。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (index: number) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
creatable | Boolean | false | 是否允许用户创建新条目，需配合 filterable 使用 | N
disabled | Boolean | - | 是否禁用组件 | N
empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
Expand Down
1 change: 1 addition & 0 deletions src/select/select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ export default defineComponent({
})
.slice(minCollapsedNum.value),
count: values.length - minCollapsedNum.value,
onClose: (index: number) => removeTag(index),
}
: {};
});
Expand Down
6 changes: 3 additions & 3 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84812,7 +84812,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/collapsed.vue 1`] =
class="t-tag t-tag--default t-tag--dark"
>
<span>
+1
+2
</span>
</div>
</div>
Expand Down Expand Up @@ -84891,7 +84891,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/collapsed.vue 1`] =
<span
style="color: rgb(237, 123, 47); margin-left: 8px;"
>
+1
+2
</span>
</div>
<input
Expand Down Expand Up @@ -84969,7 +84969,7 @@ exports[`csr snapshot test > csr test ./src/select/_example/collapsed.vue 1`] =
<span
style="color: rgb(0, 168, 112); margin-left: 8px;"
>
+1
+2
</span>
</div>
<input
Expand Down
2 changes: 1 addition & 1 deletion test/snap/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -799,7 +799,7 @@ exports[`ssr snapshot test > renders ./src/rate/_example/texts.vue correctly 1`]

exports[`ssr snapshot test > renders ./src/select/_example/base.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\">属性：</div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择云解决方案\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\">插槽：</div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"请选择云产品\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;

exports[`ssr snapshot test > renders ./src/select/_example/collapsed.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--multiple t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--close\\"><span>选项一</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+1</span></div></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner t-input--soft-hidden\\"><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--multiple t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--close\\"><span>选项一</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><span style=\\"color:#ED7B2F;margin-left:8px;\\">+1</span></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner t-input--soft-hidden\\"><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--multiple t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--close\\"><span>选项一</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><span style=\\"color:#00a870;margin-left:8px;\\">+1</span></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner t-input--soft-hidden\\"><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;
exports[`ssr snapshot test > renders ./src/select/_example/collapsed.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--multiple t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--close\\"><span>选项一</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><div class=\\"t-tag t-tag--default t-tag--dark\\"><span>+2</span></div></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner t-input--soft-hidden\\"><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--multiple t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--close\\"><span>选项一</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><span style=\\"color:#ED7B2F;margin-left:8px;\\">+2</span></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner t-input--soft-hidden\\"><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select-input t-select-input--multiple t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark t-tag--close\\"><span>选项一</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><span style=\\"color:#00a870;margin-left:8px;\\">+2</span></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner t-input--soft-hidden\\"><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;

exports[`ssr snapshot test > renders ./src/select/_example/creatable.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-horizontal\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:200px;display:inline-block;margin:0 20px 20px 0;\\"><div class=\\"t-select-input t-select-input--empty t-select\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input autocomplete=\\"\\" placeholder=\\"单选支持自定义创建\\" type=\\"text\\" unselectable=\\"off\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-select__wrap\\" style=\\"width:400px;display:inline-block;\\"><div class=\\"t-select-input t-select-input--multiple t-select-input--empty t-select\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-is-empty t-tag-input__with-suffix-icon\\"><div class=\\"t-input t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input autocomplete=\\"\\" placeholder=\\"多选支持自定义创建\\" type=\\"text\\" unselectable=\\"off\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__input-pre\\">多选支持自定义创建</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"t-fake-arrow t-select__right-icon\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div></div>"`;

Expand Down