diff --git a/src/cascader/_example-composition/custom-options.vue b/src/cascader/_example-composition/custom-options.vue index e0d851138..7c85cc0d8 100644 --- a/src/cascader/_example-composition/custom-options.vue +++ b/src/cascader/_example-composition/custom-options.vue @@ -78,13 +78,13 @@ const options = ref([ ]); const optionsData = computed(() => getDeepOptions(options.value)); const optionRender = (h, { item }) => ( -
- -
-
{item.label}
-
{item.value}
-
+
+ +
+
{item.label}
+
{item.value}
+
); const getDeepOptions = (options) => { if (!options) return null; diff --git a/src/cascader/_example/collapsed.vue b/src/cascader/_example/collapsed.vue index d7dae727b..9a9ba05f6 100644 --- a/src/cascader/_example/collapsed.vue +++ b/src/cascader/_example/collapsed.vue @@ -1,19 +1,31 @@ diff --git a/src/drawer/_example-composition/custom.vue b/src/drawer/_example-composition/custom.vue index 1209d31e8..1fba39cb0 100644 --- a/src/drawer/_example-composition/custom.vue +++ b/src/drawer/_example-composition/custom.vue @@ -46,11 +46,11 @@ const visible = ref(false); const visible2 = ref(false); const visible3 = ref(false); const renderFooter = () => ( -
- confirm - (visible2.value = false)}> - cancel - -
+
+ confirm + (visible2.value = false)}> + cancel + +
); diff --git a/src/image-viewer/_example-composition/block.vue b/src/image-viewer/_example-composition/block.vue index dc3911f30..4739ade16 100644 --- a/src/image-viewer/_example-composition/block.vue +++ b/src/image-viewer/_example-composition/block.vue @@ -22,14 +22,14 @@ const initialImages = [ ]; const images = ref(initialImages); const trigger = (h, { open }) => ( -
- test -
- - 预览 - -
+
+ test +
+ + 预览 +
+
); diff --git a/src/input-adornment/_example-composition/select.vue b/src/input-adornment/_example-composition/select.vue index c5cc2cb6a..1ad510598 100644 --- a/src/input-adornment/_example-composition/select.vue +++ b/src/input-adornment/_example-composition/select.vue @@ -19,23 +19,23 @@ diff --git a/src/menu/_example-composition/closable-side.vue b/src/menu/_example-composition/closable-side.vue index b6602f506..a4d21f75d 100644 --- a/src/menu/_example-composition/closable-side.vue +++ b/src/menu/_example-composition/closable-side.vue @@ -43,7 +43,7 @@ import { ref, computed } from 'vue'; import { Icon } from 'tdesign-icons-vue'; const collapsed = ref(true); -const iconName = computed(() => collapsed.value ? 'chevron-right' : 'chevron-left'); +const iconName = computed(() => (collapsed.value ? 'chevron-right' : 'chevron-left')); const changeCollapsed = () => { collapsed.value = !collapsed.value; }; diff --git a/src/message/_example-composition/close.vue b/src/message/_example-composition/close.vue index f5708b919..2a53f3e56 100644 --- a/src/message/_example-composition/close.vue +++ b/src/message/_example-composition/close.vue @@ -29,14 +29,14 @@ const closableMsg = ref(true); const closableMsg1 = ref(true); const closableMsg2 = ref(true); const closeBtn = () => ( -
{ - closableMsg1.value = false; - }} - > - x -
+
{ + closableMsg1.value = false; + }} + > + x +
); diff --git a/src/message/_example-composition/plugin.vue b/src/message/_example-composition/plugin.vue index a442426bd..7cae0d8bf 100644 --- a/src/message/_example-composition/plugin.vue +++ b/src/message/_example-composition/plugin.vue @@ -85,8 +85,8 @@ import { MessagePlugin } from 'tdesign-vue'; const content = () => ( -
- 操作有误，前往查看 -
+
+ 操作有误，前往查看 +
); diff --git a/src/notification/_example-composition/footer.vue b/src/notification/_example-composition/footer.vue index 2f2374fdf..dcdb1e6d4 100644 --- a/src/notification/_example-composition/footer.vue +++ b/src/notification/_example-composition/footer.vue @@ -14,9 +14,9 @@ diff --git a/src/notification/_example-composition/operation.vue b/src/notification/_example-composition/operation.vue index e9887be69..1a9b87cd0 100644 --- a/src/notification/_example-composition/operation.vue +++ b/src/notification/_example-composition/operation.vue @@ -25,18 +25,18 @@ import { ref } from 'vue'; const visible = ref(true); const footer = () => ( -
- - 查看详情 - -
+
+ + 查看详情 + +
); const footer2 = () => ( -
- - 查看详情 - -
+
+ + 查看详情 + +
); const content = () => '文案不限长度，但在实际使用时建议文案显示内容不易过多，建议最大展示行数数量以三行为宜，最后一行折行末尾处超出文本建议会变为省略号显示。'; // const title = () => { diff --git a/src/notification/_example-composition/plugin.vue b/src/notification/_example-composition/plugin.vue index c7c32a5ba..5da0fb6cf 100644 --- a/src/notification/_example-composition/plugin.vue +++ b/src/notification/_example-composition/plugin.vue @@ -73,12 +73,12 @@ import { NotifyPlugin } from 'tdesign-vue'; import { CloseCircleFilledIcon } from 'tdesign-icons-vue'; const iconRender = () => ( - + ); diff --git a/src/select-input/props.ts b/src/select-input/props.ts index f190c7566..077515fa3 100644 --- a/src/select-input/props.ts +++ b/src/select-input/props.ts @@ -18,7 +18,7 @@ export default { borderless: Boolean, /** 是否可清空 */ clearable: Boolean, - /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量 */ + /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ collapsedItems: { type: Function as PropType, }, @@ -76,6 +76,8 @@ export default { defaultPopupVisible: Boolean, /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */ readonly: Boolean, + /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */ + reserveKeyword: Boolean, /** 输入框状态 */ status: { type: String as PropType, diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md index 950719dc7..b557b7534 100644 --- a/src/select-input/select-input.en-US.md +++ b/src/select-input/select-input.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### SelectInput Props name | type | default | description | required @@ -10,7 +11,7 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts) | N inputValue | String / Number | - | input value。`.sync` is supported。Typescript：`string` | N diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md index d96491529..aee9f958d 100644 --- a/src/select-input/select-input.md +++ b/src/select-input/select-input.md @@ -1,16 +1,17 @@ :: BASE_DOC :: ## API + ### SelectInput Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowInput | Boolean | false | 是否允许输入 | N autoWidth | Boolean | false | 宽度随内容自适应 | N autofocus | Boolean | false | 自动聚焦 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N -collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量。TS 类型：`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | 是否禁用 | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select-input/type.ts) | N inputValue | String / Number | - | 输入框的值。支持语法糖 `.sync`。TS 类型：`string` | N diff --git a/src/select-input/type.ts b/src/select-input/type.ts index 26471925c..47de097de 100644 --- a/src/select-input/type.ts +++ b/src/select-input/type.ts @@ -38,9 +38,14 @@ export interface TdSelectInputProps { */ clearable?: boolean; /** - * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedTags` 表示折叠标签值，`count` 表示折叠的数量 + * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ - collapsedItems?: TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>; + collapsedItems?: TNode<{ + value: SelectInputValue; + collapsedSelectedItems: SelectInputValue; + count: number; + onClose: (context: { index: number; e?: MouseEvent }) => void; + }>; /** * 是否禁用 */ @@ -199,6 +204,12 @@ export interface SelectInputKeys { children?: string; } +export interface SelectInputKeys { + label?: string; + value?: string; + children?: string; +} + export type SelectInputValue = string | number | boolean | Date | Object | Array | Array; export type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue }; diff --git a/src/select/__tests__/__snapshots__/index.test.jsx.snap b/src/select/__tests__/__snapshots__/index.test.jsx.snap index 0d6b9960d..952ac06fa 100644 --- a/src/select/__tests__/__snapshots__/index.test.jsx.snap +++ b/src/select/__tests__/__snapshots__/index.test.jsx.snap @@ -6,7 +6,7 @@ exports[`Select > :props > :bordered 1`] = ` class="t-select__wrap" >
:props > :clearable 1`] = ` class="t-select__wrap" >
:props > :creatable 1`] = ` class="t-select__wrap" >
:props > :disabled 1`] = ` class="t-select__wrap" >
:props > :disabled 1`] = ` disabled="disabled" placeholder="请选择" readonly="readonly" + title="false" type="text" unselectable="on" /> @@ -203,7 +204,7 @@ exports[`Select > :props > :labelInValue 1`] = ` class="t-select__wrap" >
:props > :loading 1`] = ` class="t-select__wrap" >
:props > :placeholder 1`] = ` class="t-select__wrap" >
:props > :remote 1`] = ` remote="true" >
:props > :reserveKeyword 1`] = ` class="t-select__wrap" >
:props > :size 1`] = ` class="t-select__wrap" >
( -
- -
-
{option.label}
-
{option.description}
-
+
+ +
+
{option.label}
+
{option.description}
+
); const optionsData = computed(() => options.value.map((item) => ({ ...item, diff --git a/src/select/props.ts b/src/select/props.ts index 091d6fb21..ce2c1b026 100644 --- a/src/select/props.ts +++ b/src/select/props.ts @@ -16,7 +16,7 @@ export default { borderless: Boolean, /** 是否可以清空选项 */ clearable: Boolean, - /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 */ + /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 */ collapsedItems: { type: Function as PropType, }, @@ -41,7 +41,6 @@ export default { /** 输入框的值 */ inputValue: { type: [String, Number] as PropType, - default: undefined, }, /** 输入框的值，非受控属性 */ defaultInputValue: { @@ -95,10 +94,7 @@ export default { type: Object as PropType, }, /** 是否显示下拉框 */ - popupVisible: { - type: Boolean, - default: undefined, - }, + popupVisible: Boolean, /** 是否显示下拉框，非受控属性 */ defaultPopupVisible: Boolean, /** 组件前置图标 */ @@ -163,12 +159,10 @@ export default { /** 选中值 */ value: { type: [String, Number, Boolean, Object, Array] as PropType, - default: undefined, }, /** 选中值，非受控属性 */ defaultValue: { type: [String, Number, Boolean, Object, Array] as PropType, - default: undefined, }, /** 自定义选中项呈现的内容 */ valueDisplay: { diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index 9a28ea7fb..73aaf9bc9 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Select Props name | type | default | description | required @@ -9,7 +10,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; onClose: (index: number) => void }>`。[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: (context: { index: number, e?: MouseEvent }) => 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 @@ -75,6 +76,7 @@ popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` remove | `(options: SelectRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`
search | `(filterWords: string, context: { e: KeyboardEvent })` | \- + ### Option Props name | type | default | description | required @@ -87,6 +89,7 @@ label | String | - | \- | N title | String | - | \- | N value | String / Number | - | \- | N + ### OptionGroup Props name | type | default | description | required diff --git a/src/select/select.md b/src/select/select.md index 101b56412..e41ea2d07 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -1,15 +1,16 @@ :: BASE_DOC :: ## API + ### Select Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- 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` 表示折叠的数量, `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 +collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签。TS 类型：`TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => 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 @@ -75,9 +76,10 @@ popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` remove | `(options: SelectRemoveContext)` | 多选模式下，选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/select/type.ts)。
`interface SelectRemoveContext { value: string \| number; data: T; e: MouseEvent \| KeyboardEvent }`
search | `(filterWords: string, context: { e: KeyboardEvent })` | 输入值变化时，触发搜索事件。主要用于远程搜索新数据 + ### Option Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- checkAll | Boolean | false | 当前选项是否为全选，全选可以在顶部，也可以在底部。点击当前选项会选中禁用态除外的全部选项，即使是分组选择器也会选中全部选项 | N content | String / Slot / Function | - | 用于定义复杂的选项内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -87,16 +89,17 @@ label | String | - | 选项名称 | N title | String | - | 选项标题，在选项过长时hover选项展示 | N value | String / Number | - | 选项值 | N + ### OptionGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- divider | Boolean | true | 是否显示分隔线 | N label | String | - | 分组别名 | N ### TScroll -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- bufferSize | Number | 20 | 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N isFixedRowHeight | Boolean | false | 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N diff --git a/src/select/select.tsx b/src/select/select.tsx index 19dfb6c14..7ee68a180 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -46,7 +46,7 @@ import useSelectOptions from './hooks/useSelectOptions'; import { SelectPanelInstance } from './instance'; import log from '../_common/js/log'; import useFormDisabled from '../hooks/useFormDisabled'; -import { OptionData } from '../common'; +import type { OptionData } from '../common'; export type OptionInstance = InstanceType; diff --git a/src/select/type.ts b/src/select/type.ts index 6bbeadb14..936081245 100644 --- a/src/select/type.ts +++ b/src/select/type.ts @@ -36,9 +36,14 @@ export interface TdSelectProps { */ clearable?: boolean; /** - * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 - */ - collapsedItems?: TNode<{ value: T[]; collapsedSelectedItems: T[]; count: number; onClose: (index: number) => void }>; + * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，泛型 `T` 继承 `SelectOption`，表示选项数据；`count` 表示折叠的数量, `onClose` 表示移除标签 + */ + collapsedItems?: TNode<{ + value: T[]; + collapsedSelectedItems: T[]; + count: number; + onClose: (context: { index: number; e?: MouseEvent }) => void; + }>; /** * 是否允许用户创建新条目，需配合 filterable 使用 * @default false diff --git a/src/sticky-tool/_example-composition/base.vue b/src/sticky-tool/_example-composition/base.vue index 9a3161263..efa5310c7 100644 --- a/src/sticky-tool/_example-composition/base.vue +++ b/src/sticky-tool/_example-composition/base.vue @@ -26,7 +26,9 @@ import { ChatIcon, AddIcon, QrcodeIcon } from 'tdesign-icons-vue'; const renderChatIcon = () => ; const renderAddIcon = () => ; const renderQrIcon = () => ; -const renderPopup = () => TDesign Logo; +const renderPopup = () => ( + TDesign Logo +); const handleClick = (context) => { console.log('click', context); }; diff --git a/src/sticky-tool/_example-composition/compact.vue b/src/sticky-tool/_example-composition/compact.vue index de4f51f6c..f7bfc0e95 100644 --- a/src/sticky-tool/_example-composition/compact.vue +++ b/src/sticky-tool/_example-composition/compact.vue @@ -25,7 +25,9 @@ import { ChatIcon, AddIcon, QrcodeIcon } from 'tdesign-icons-vue'; const renderChatIcon = () => ; const renderAddIcon = () => ; const renderQrIcon = () => ; -const renderPopup = () => TDesign Logo; +const renderPopup = () => ( + TDesign Logo +); const handleClick = (context) => { console.log('click', context); }; diff --git a/src/sticky-tool/_example-composition/shape.vue b/src/sticky-tool/_example-composition/shape.vue index 848be8bda..7c0c5007c 100644 --- a/src/sticky-tool/_example-composition/shape.vue +++ b/src/sticky-tool/_example-composition/shape.vue @@ -42,7 +42,9 @@ import { ChatIcon, AddIcon, QrcodeIcon } from 'tdesign-icons-vue'; const renderChatIcon = () => ; const renderAddIcon = () => ; const renderQrIcon = () => ; -const renderPopup = () => TDesign Logo; +const renderPopup = () => ( + TDesign Logo +); const handleClick = (context) => { console.log('click', context); }; diff --git a/src/switch/_example-composition/describe.vue b/src/switch/_example-composition/describe.vue index 9842649d0..fc8fdc9bb 100644 --- a/src/switch/_example-composition/describe.vue +++ b/src/switch/_example-composition/describe.vue @@ -42,5 +42,5 @@ const renderChecked2 = ref(true); const slotChecked = ref(true); const renderActiveContent = () => ; const renderInactiveContent = () => ; -const renderContent = (h, data) => data.value ? : ; +const renderContent = (h, data) => (data.value ? : ); diff --git a/src/tag-input/props.ts b/src/tag-input/props.ts index 7603d0348..a30d02c66 100644 --- a/src/tag-input/props.ts +++ b/src/tag-input/props.ts @@ -12,7 +12,7 @@ export default { autoWidth: Boolean, /** 是否可清空 */ clearable: Boolean, - /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */ + /** 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ collapsedItems: { type: Function as PropType, }, diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md index 1fa1842da..9bce04c17 100644 --- a/src/tag-input/tag-input.en-US.md +++ b/src/tag-input/tag-input.en-US.md @@ -1,13 +1,14 @@ :: BASE_DOC :: ## API + ### TagInput Props name | type | default | description | required -- | -- | -- | -- | -- autoWidth | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | \- | N dragSort | Boolean | false | \- | N excessTagsDisplayType | String | break-line | options: scroll/break-line | N diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md index e7982f063..9a79dec47 100644 --- a/src/tag-input/tag-input.md +++ b/src/tag-input/tag-input.md @@ -1,13 +1,14 @@ :: BASE_DOC :: ## API + ### TagInput Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autoWidth | Boolean | false | 宽度随内容自适应 | N clearable | Boolean | false | 是否可清空 | N -collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: TagInputValue; collapsedSelectedItems: TagInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | - | 是否禁用标签输入框 | N dragSort | Boolean | false | 拖拽调整标签顺序 | N excessTagsDisplayType | String | break-line | 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示。可选项：scroll/break-line | N diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx index 9d1aeac5f..e234aa916 100644 --- a/src/tag-input/tag-input.tsx +++ b/src/tag-input/tag-input.tsx @@ -184,7 +184,7 @@ export default defineComponent({ const displayNode = renderTNodeJSX(this, 'valueDisplay', { params: { value: this.tagValue, - onClose: (index: number, item: any) => this.onClose({ index, item }), + onClose: (index: number) => this.onClose({ index }), }, }); // 左侧文本 diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts index 7c671adde..63bf56f99 100644 --- a/src/tag-input/type.ts +++ b/src/tag-input/type.ts @@ -20,9 +20,14 @@ export interface TdTagInputProps { */ clearable?: boolean; /** - * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 - */ - collapsedItems?: TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>; + * 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 + */ + collapsedItems?: TNode<{ + value: TagInputValue; + collapsedSelectedItems: TagInputValue; + count: number; + onClose: (context: { index: number; e?: MouseEvent }) => void; + }>; /** * 是否禁用标签输入框 */ diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx index 58d23baf9..6a6cf89a3 100644 --- a/src/tag-input/useTagList.tsx +++ b/src/tag-input/useTagList.tsx @@ -26,11 +26,16 @@ export default function useTagList(props: TdTagInputProps, context: SetupContext const oldInputValue = ref(); // 点击标签关闭按钮，删除标签 - const onClose = (p: { e?: MouseEvent; index: number; item: string | number }) => { + const onClose = (p: { e?: MouseEvent; index: number }) => { const arr = [...tagValue.value]; - arr.splice(p.index, 1); + const [item] = arr.splice(p.index, 1); // 当前删除的item无需参数传递 setTagValue(arr, { trigger: 'tag-remove', ...p }); - const removeParams: TagInputRemoveContext = { ...p, trigger: 'tag-remove', value: arr }; + const removeParams: TagInputRemoveContext = { + ...p, + item, + trigger: 'tag-remove', + value: arr, + }; onRemove.value?.(removeParams); context.emit('remove', removeParams); }; @@ -99,7 +104,7 @@ export default function useTagList(props: TdTagInputProps, context: SetupContext key={index} size={size.value} disabled={disabled.value} - onClose={(context: { e: MouseEvent }) => onClose({ e: context.e, item, index })} + onClose={(context: { e: MouseEvent }) => onClose({ e: context.e, index })} closable={!readonly.value && !disabled.value} props={tagProps.value} > @@ -137,7 +142,9 @@ export default function useTagList(props: TdTagInputProps, context: SetupContext params: { value: tagValue.value, count: tagValue.value.length - minCollapsedNum.value, - collapsedTags: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length), + collapsedTags: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length), // deprecated + collapsedSelectedItems: tagValue.value.slice(minCollapsedNum.value, tagValue.value.length), + onClose, }, }); list.push( diff --git a/src/tree-select/__tests__/vitest-tree-select.test.jsx b/src/tree-select/__tests__/vitest-tree-select.test.jsx index 2b7eaff78..67a7cec69 100644 --- a/src/tree-select/__tests__/vitest-tree-select.test.jsx +++ b/src/tree-select/__tests__/vitest-tree-select.test.jsx @@ -122,7 +122,7 @@ describe('TreeSelect Component', () => { }); it('slots.collapsed-items works fine', () => { const wrapper = getTreeSelectMultipleMount(TreeSelect, { - scopedSlots: { 'collapsed-items': (h) => TNode }, + scopedSlots: { collapsedItems: (h) => TNode }, minCollapsedNum: 2, value: [1, 3, '5'], data: [ @@ -152,12 +152,8 @@ describe('TreeSelect Component', () => { }); expect(fn).toHaveBeenCalled(); expect(fn.mock.calls[0][1].count).toBe(1); - expect(fn.mock.calls[0][1].value).toEqual([ - { label: 'tdesign-vue', value: 1 }, - { label: 'tdesign-miniprogram', value: 3 }, - { label: 'tdesign-angular', value: '5' }, - ]); - expect(fn.mock.calls[0][1].collapsedSelectedItems).toEqual([{ label: 'tdesign-angular', value: '5' }]); + expect(fn.mock.calls[0][1].value).toEqual(['tdesign-vue', 'tdesign-miniprogram', 'tdesign-angular']); + expect(fn.mock.calls[0][1].collapsedSelectedItems).toEqual(['tdesign-angular']); }); it('slots.collapsedItems: a function with params', () => { const fn = vi.fn(); @@ -176,12 +172,8 @@ describe('TreeSelect Component', () => { expect(fn).toHaveBeenCalled(); expect(fn.mock.calls[0][0].count).toBe(1); - expect(fn.mock.calls[0][0].value).toEqual([ - { label: 'tdesign-vue', value: 1 }, - { label: 'tdesign-miniprogram', value: 3 }, - { label: 'tdesign-angular', value: '5' }, - ]); - expect(fn.mock.calls[0][0].collapsedSelectedItems).toEqual([{ label: 'tdesign-angular', value: '5' }]); + expect(fn.mock.calls[0][0].value).toEqual(['tdesign-vue', 'tdesign-miniprogram', 'tdesign-angular']); + expect(fn.mock.calls[0][0].collapsedSelectedItems).toEqual(['tdesign-angular']); }); it('props.data: empty data with panel content node', async () => { diff --git a/src/tree-select/_example/collapsed.vue b/src/tree-select/_example/collapsed.vue index f98b9df98..1e2cf3700 100644 --- a/src/tree-select/_example/collapsed.vue +++ b/src/tree-select/_example/collapsed.vue @@ -2,35 +2,26 @@ - - - - diff --git a/src/tree-select/props.ts b/src/tree-select/props.ts index 312afd648..8596a81a1 100644 --- a/src/tree-select/props.ts +++ b/src/tree-select/props.ts @@ -16,7 +16,7 @@ export default { borderless: Boolean, /** 是否允许清空 */ clearable: Boolean, - /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 */ + /** 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 */ collapsedItems: { type: Function as PropType, }, diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md index 4c1c9f2ac..957240042 100644 --- a/src/tree-select/tree-select.en-US.md +++ b/src/tree-select/tree-select.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### TreeSelect Props name | type | default | description | required @@ -9,7 +10,7 @@ autoWidth | Boolean | false | \- | N autofocus | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N data | Array | [] | Typescript：`Array` | 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 @@ -51,7 +52,7 @@ onChange | Function | | Typescript：`(value: TreeValueType, context: TreeSelec onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onEnter | Function | | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`
| N onFocus | Function | | Typescript：`(context: { value: TreeSelectValue; e: FocusEvent }) => void`
| N -onInputChange | Function | | Typescript：`(value: InputValue, context: SelectInputValueChangeContext) => void`
| N +onInputChange | Function | | Typescript：`(value: InputValue, context: SelectInputValueChangeContext) => void`
| N onPopupVisibleChange | Function | | Typescript：`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'`

`interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }`
| N onRemove | Function | | Typescript：`(options: RemoveOptions) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/tree-select/type.ts)。
`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }`
| N onSearch | Function | | Typescript：`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`
| N diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md index 0b2579248..87c9aaf1b 100644 --- a/src/tree-select/tree-select.md +++ b/src/tree-select/tree-select.md @@ -1,15 +1,16 @@ :: BASE_DOC :: ## API + ### TreeSelect Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- autoWidth | Boolean | false | 宽度随内容自适应 | N autofocus | Boolean | false | 自动聚焦 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清空 | N -collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N data | Array | [] | 树选择的数据列表。结构：`[{ label: TNode, value: string \| number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。
其中 `label` 和 `value` 可以使用 `keys` 属性定义别名。TS 类型：`Array` | N disabled | Boolean | - | 是否禁用组件 | N empty | String / Slot / Function | - | 当下拉列表为空时显示的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index 8ac1c7ce3..7c2151ed6 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -116,18 +116,6 @@ export default defineComponent({
); }, - - renderCollapsedItems() { - const selectedNodeInfo = this.nodeInfo || []; - const value = Array.isArray(selectedNodeInfo) ? selectedNodeInfo : [selectedNodeInfo]; - return this.renderTNodeJSX('collapsedItems', { - params: { - value, - collapsedSelectedItems: value.slice(this.minCollapsedNum), - count: value.length - this.minCollapsedNum, - }, - }); - }, }, render() { @@ -137,6 +125,7 @@ export default defineComponent({ scopedSlots={{ tips: slots.tips, suffix: slots.suffix, + collapsedItems: slots.collapsedItems, }} class={`${this.classPrefix}-tree-select`} {...{ @@ -159,7 +148,7 @@ export default defineComponent({ suffix: this.suffix, allowInput: Boolean(this.filterable || isFunction(this.filter) || this.$listeners.search || this.onSearch), minCollapsedNum: this.minCollapsedNum, - collapsedItems: this.renderCollapsedItems, + collapsedItems: this.collapsedItems, popupProps: { overlayClassName: this.popupClass, ...(this.popupProps as TdTreeSelectProps['popupProps']), diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index 8aec64314..ba447fe72 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -37,9 +37,14 @@ export interface TdTreeSelectProps< */ clearable?: boolean; /** - * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedTags` 表示折叠的标签，`count` 表示折叠的数量 - */ - collapsedItems?: TNode<{ value: DataOption[]; collapsedSelectedItems: DataOption[]; count: number }>; + * 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调 + */ + collapsedItems?: TNode<{ + value: DataOption[]; + collapsedSelectedItems: DataOption[]; + count: number; + onClose: (context: { index: number; e?: MouseEvent }) => void; + }>; /** * 树选择的数据列表。结构：`[{ label: TNode, value: string | number, text: string, ... }]`，其中 `label` 表示选项呈现的内容，可自定义；`value` 表示选项的唯一值；表示当 `label` 用于选项复杂内容呈现时，`text` 用于搜索功能。
其中 `label` 和 `value` 可以使用 `keys` 属性定义别名 * @default [] diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index 75fb58f92..be8afb540 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -22671,6 +22671,13 @@ exports[`csr snapshot test > csr test ./src/cascader/_example/collapsed.vue 1`] class="t-space t-space-vertical" style="gap: 16px;" > +
+

+ default: +

+
@@ -22747,77 +22754,168 @@ exports[`csr snapshot test > csr test ./src/cascader/_example/collapsed.vue 1`]
+
+

+ use collapsedItems: +

+
+
+ size control: +
+
+
-
-
+ + - - 选项一/子选项一 - - - - -
+ small + + + +
+ +
+
+
+
+
+
+
+ + disabled control: + +
+
+
+ class="t-checkbox__label" + /> + +
+
+
+
+
+
+ + readonly control: + +
+
+
@@ -22855,11 +22953,13 @@ exports[`csr snapshot test > csr test ./src/cascader/_example/collapsed.vue 1`] />
- - +2 - + + Function - More(2) + +
csr test ./src/config-provider/_example/others.vue style="width: 400px;" >
csr test ./src/config-provider/_example/others.vue style="width: 400px;" >
csr test ./src/config-provider/_example/others.vue style="width: 400px;" >
csr test ./src/select/_example/scroll-bottom.vue 1` style="width: 300px;" >
csr test ./src/tree/_example/base.vue 1`] = `
@@ -116392,7 +116492,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = `
@@ -116428,7 +116528,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = `
@@ -116464,7 +116564,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/base.vue 1`] = `
@@ -121414,7 +121514,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] =
@@ -121450,7 +121550,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] =
@@ -121486,7 +121586,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] =
@@ -121522,7 +121622,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] =
@@ -121558,7 +121658,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] =
@@ -121581,7 +121681,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-level.vue 1`] =
@@ -121685,7 +121785,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-mutex.vue 1`] =
@@ -121721,7 +121821,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/expand-mutex.vue 1`] =
@@ -122072,7 +122172,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = `
@@ -122103,7 +122203,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = `
@@ -122163,7 +122263,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = `
@@ -122194,7 +122294,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/icon.vue 1`] = `
@@ -122262,7 +122362,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122292,7 +122392,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t525, label: 1 + value: t518, label: 1 @@ -122300,7 +122400,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122317,7 +122417,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t526, label: 1.1 + value: t519, label: 1.1 @@ -122325,7 +122425,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122342,7 +122442,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t527, label: 1.2 + value: t520, label: 1.2 @@ -122350,7 +122450,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122380,7 +122480,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t528, label: 2 + value: t521, label: 2 @@ -122388,7 +122488,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122405,7 +122505,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t529, label: 2.1 + value: t522, label: 2.1 @@ -122413,7 +122513,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122430,7 +122530,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` style="position: relative;" > - value: t530, label: 2.2 + value: t523, label: 2.2 @@ -122467,7 +122567,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122496,7 +122596,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > csr test ./src/tree/_example/label.vue 1`] = ` - label: 1, value: t531 + label: 1, value: t524 @@ -122518,7 +122618,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122534,7 +122634,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > csr test ./src/tree/_example/label.vue 1`] = ` - label: 1.1, value: t532 + label: 1.1, value: t525 @@ -122556,7 +122656,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122572,7 +122672,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > csr test ./src/tree/_example/label.vue 1`] = ` - label: 1.2, value: t533 + label: 1.2, value: t526 @@ -122594,7 +122694,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122623,7 +122723,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > csr test ./src/tree/_example/label.vue 1`] = ` - label: 2, value: t534 + label: 2, value: t527 @@ -122645,7 +122745,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122661,7 +122761,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > csr test ./src/tree/_example/label.vue 1`] = ` - label: 2.1, value: t535 + label: 2.1, value: t528 @@ -122683,7 +122783,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = `
@@ -122699,7 +122799,7 @@ exports[`csr snapshot test > csr test ./src/tree/_example/label.vue 1`] = ` > csr test ./src/tree/_example/label.vue 1`] = ` - label: 2.2, value: t536 + label: 2.2, value: t529 @@ -130629,87 +130729,7 @@ exports[`csr snapshot test > csr test ./src/tree-select/_example/collapsed.vue 1 class="t-tag t-tag--default t-tag--dark" > - +1 - -
-
- - - - - - - -
-
-
-
-
-
-
-
-
-
- - 广州市 - - - - -
-
- - 更多... + (1)
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap index 639cef179..3b83e5c63 100644 --- a/test/snap/__snapshots__/ssr.test.js.snap +++ b/test/snap/__snapshots__/ssr.test.js.snap @@ -188,7 +188,7 @@ exports[`ssr snapshot test > renders ./src/cascader/_example/base.vue correctly exports[`ssr snapshot test > renders ./src/cascader/_example/check-strictly.vue correctly 1`] = `"
1/1.1/1.1.2/1.1.2.1
2
"`; -exports[`ssr snapshot test > renders ./src/cascader/_example/collapsed.vue correctly 1`] = `"
选项一/子选项一
+2
选项一/子选项一
+2
选项一/子选项一
+2
"`; +exports[`ssr snapshot test > renders ./src/cascader/_example/collapsed.vue correctly 1`] = `"

default:

选项一/子选项一
+2

use collapsedItems:

size control:
disabled control:
readonly control:
选项一/子选项一
Function - More(2)
"`; exports[`ssr snapshot test > renders ./src/cascader/_example/custom-options.vue correctly 1`] = `"
"`; @@ -298,7 +298,7 @@ exports[`ssr snapshot test > renders ./src/config-provider/_example/global.vue c exports[`ssr snapshot test > renders ./src/config-provider/_example/input.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/config-provider/_example/others.vue correctly 1`] = `"


0 / 20
0 / 0
Empty Data





















Feature Tag
Feature Tag
Feature Tag
Feature Tag


Tree Empty Data


Department A
Department B



First Step
You need to click the blue button
Second Step
Fill your base information into the form
Error Step
Something Wrong! Custom Error Icon!
4
Last Step
You haven't finish this step.


\\"\\"
loading
"`; +exports[`ssr snapshot test > renders ./src/config-provider/_example/others.vue correctly 1`] = `"


0 / 20
0 / 0
Empty Data





















Feature Tag
Feature Tag
Feature Tag
Feature Tag


Tree Empty Data


Department A
Department B



First Step
You need to click the blue button
Second Step
Fill your base information into the form
Error Step
Something Wrong! Custom Error Icon!
4
Last Step
You haven't finish this step.


\\"\\"
loading
"`; exports[`ssr snapshot test > renders ./src/config-provider/_example/pagination.vue correctly 1`] = `"
Total 36 items
10 / page
  • 1
  • 2
  • 3
  • 4
jump to
/ 4
"`; @@ -849,7 +849,7 @@ exports[`ssr snapshot test > renders ./src/select/_example/prefix.vue correctly exports[`ssr snapshot test > renders ./src/select/_example/remote-search.vue correctly 1`] = `"
请输入搜索
"`; -exports[`ssr snapshot test > renders ./src/select/_example/scroll-bottom.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/select/_example/scroll-bottom.vue correctly 1`] = `"
"`; exports[`ssr snapshot test > renders ./src/select/_example/size.vue correctly 1`] = `"
"`; @@ -1219,7 +1219,7 @@ exports[`ssr snapshot test > renders ./src/transfer/_example/tree.vue correctly exports[`ssr snapshot test > renders ./src/tree/_example/activable.vue correctly 1`] = `"
节点可高亮:
节点可多选高亮:
整个节点可点击:
1
1.1
1.2
2
2.1
2.2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/base.vue correctly 1`] = `"
第一段
第一段
第一段
第一段
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/base.vue correctly 1`] = `"
第一段
第一段
第一段
第一段
"`; exports[`ssr snapshot test > renders ./src/tree/_example/checkable.vue correctly 1`] = `"
可选:
严格模式:
"`; @@ -1241,15 +1241,15 @@ exports[`ssr snapshot test > renders ./src/tree/_example/empty.vue correctly 1`] exports[`ssr snapshot test > renders ./src/tree/_example/expand-all.vue correctly 1`] = `"
切换数据:
展开动画:
t1
t1.1
t1.1.1
t1.1.2
t1.2
1.2.1
1.2.2
t2
t2.1
t2.2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-level.vue correctly 1`] = `"
1
1.1
1.2
2
2.1
2.2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-level.vue correctly 1`] = `"
1
1.1
1.2
2
2.1
2.2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `"
互斥展开:
整个节点可点击:
1
2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `"
互斥展开:
整个节点可点击:
1
2
"`; exports[`ssr snapshot test > renders ./src/tree/_example/filter.vue correctly 1`] = `"
filter:
1
2
filter:
1
2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/icon.vue correctly 1`] = `"

属性设置 jsx 形式

1
2

slot 形式

1
2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/icon.vue correctly 1`] = `"

属性设置 jsx 形式

1
2

slot 形式

1
2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/label.vue correctly 1`] = `"

属性设置 jsx 形式

value: t1061, label: 1
value: t1062, label: 1.1
value: t1063, label: 1.2
value: t1064, label: 2
value: t1065, label: 2.1
value: t1066, label: 2.2

slot 形式

"`; +exports[`ssr snapshot test > renders ./src/tree/_example/label.vue correctly 1`] = `"

属性设置 jsx 形式

value: t1047, label: 1
value: t1048, label: 1.1
value: t1049, label: 1.2
value: t1050, label: 2
value: t1051, label: 2.1
value: t1052, label: 2.2

slot 形式

"`; exports[`ssr snapshot test > renders ./src/tree/_example/lazy.vue correctly 1`] = `"
可选:
严格模式:
"`; @@ -1271,7 +1271,7 @@ exports[`ssr snapshot test > renders ./src/tree/_example/vscroll-lazy.vue correc exports[`ssr snapshot test > renders ./src/tree-select/_example/base.vue correctly 1`] = `"
单选：
"`; -exports[`ssr snapshot test > renders ./src/tree-select/_example/collapsed.vue correctly 1`] = `"
广州市
+1
广州市
更多...
"`; +exports[`ssr snapshot test > renders ./src/tree-select/_example/collapsed.vue correctly 1`] = `"
广州市
(1)
"`; exports[`ssr snapshot test > renders ./src/tree-select/_example/dvalue.vue correctly 1`] = `"
"`;