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(cascader): support panel content #4546

Merged
merged 1 commit into from
Sep 10, 2024
Merged

feat(cascader): support panel content #4546

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
4 changes: 3 additions & 1 deletion src/cascader/cascader.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents
checkStrictly | Boolean | false | \- | N
clearable | Boolean | false | \- | N
collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
disabled | Boolean | - | \- | N
disabled | Boolean | undefined | \- | N
empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
filterable | Boolean | false | \- | N
Expand All @@ -28,6 +28,8 @@ minCollapsedNum | Number | 0 | \- | N
multiple | Boolean | false | \- | N
option | Slot / Function | - | customize one option。Typescript：`TNode<{ item: CascaderOption; index: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
options | Array | [] | Typescript：`Array<CascaderOption>` | N
panelBottomContent | String / Slot / Function | - | bottom content of the cascader panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
panelTopContent | String / Slot / Function | - | top content of the cascader panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
placeholder | String | undefined | \- | N
popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
popupVisible | Boolean | - | \- | N
Expand Down
4 changes: 3 additions & 1 deletion src/cascader/cascader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProp
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
clearable | Boolean | false | 是否支持清空选项 | N
collapsedItems | Slot / Function | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
disabled | Boolean | - | 是否禁用组件 | N
disabled | Boolean | undefined | 是否禁用组件 | N
empty | String / Slot / Function | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
filterable | Boolean | false | 是否可搜索 | N
Expand All @@ -28,6 +28,8 @@ minCollapsedNum | Number | 0 | 最小折叠数量，用于多选情况下折叠
multiple | Boolean | false | 是否允许多选 | N
option | Slot / Function | - | 自定义单个级联选项。TS 类型：`TNode<{ item: CascaderOption; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
panelBottomContent | String / Slot / Function | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
placeholder | String | undefined | 占位符 | N
popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
popupVisible | Boolean | - | 是否显示下拉框 | N
Expand Down
24 changes: 14 additions & 10 deletions src/cascader/cascader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,16 +176,20 @@ export default defineComponent({
suffix: slots.suffix,
prefixIcon: slots.prefixIcon,
panel: () => (
<Panel
option={props.option}
empty={props.empty}
visible={visible}
trigger={props.trigger}
loading={props.loading}
loadingText={props.loadingText}
cascaderContext={cascaderContext.value}
v-slots={{ option: slots.option, empty: slots.empty, loadingText: slots.loadingText }}
/>
<>
{renderTNodeJSX('panelTopContent')}
<Panel
option={props.option}
empty={props.empty}
visible={visible}
trigger={props.trigger}
loading={props.loading}
loadingText={props.loadingText}
cascaderContext={cascaderContext.value}
v-slots={{ option: slots.option, empty: slots.empty, loadingText: slots.loadingText }}
/>
{renderTNodeJSX('panelBottomContent')}
</>
),
collapsedItems: slots.collapsedItems,
}}
Expand Down
8 changes: 8 additions & 0 deletions src/cascader/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,14 @@ export default {
type: Array as PropType<TdCascaderProps['options']>,
default: (): TdCascaderProps['options'] => [],
},
/** 面板内的底部内容 */
panelBottomContent: {
type: [String, Function] as PropType<TdCascaderProps['panelBottomContent']>,
},
/** 面板内的顶部内容 */
panelTopContent: {
type: [String, Function] as PropType<TdCascaderProps['panelTopContent']>,
},
/** 占位符 */
placeholder: {
type: String,
Expand Down
8 changes: 8 additions & 0 deletions src/cascader/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,14 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
* @default []
*/
options?: Array<CascaderOption>;
/**
* 面板内的底部内容
*/
panelBottomContent?: string | TNode;
/**
* 面板内的顶部内容
*/
panelTopContent?: string | TNode;
/**
* 占位符
*/
Expand Down
Loading