fix(Cacader): fixed multiple issues

Tencent · Oct 14, 2024 · 68abaad · 68abaad
1 parent a34ee4c
commit 68abaad
Show file tree

Hide file tree

Showing 10 changed files with 780 additions and 899 deletions.
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
diff --git a/src/cascader/__test__/index.test.jsx b/src/cascader/__test__/index.test.jsx
@@ -1,8 +1,8 @@
 import { ref, h, nextTick } from 'vue';
 import { config, mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import Cascader from '../cascader.vue';
 import { AppIcon as TIconApp, CloseIcon } from 'tdesign-icons-vue-next';
+import Cascader from '../cascader';
 import Radio from '../../radio/index';
 import { Tabs as TTabs, TabPanel as TTabPanel } from '../../tabs';
 import prefixConfig from '../../config';
@@ -158,7 +158,7 @@ const itemList = [
 
 const subTitles = ['请选择省份', '请选择城市', '请选择区/县'];
 
-const defaultPlaceholder = "默认选项标签";
+const defaultPlaceholder = '默认选项标签';
 
 describe('cascader', () => {
   describe('props', () => {

diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
@@ -6,31 +6,31 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+checkStrictly | Boolean | false | \- | N
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+keys | Object | - | Typescript：`CascaderKeysType` `type CascaderKeysType = KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
 options | Array | [] | Typescript：`Array<CascaderOption>` | N
+placeholder | String / Slot / Function | '选择选项' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTitles | Array | [] | Typescript：`Array<string>` | N
-theme | String | step | options：step/tab | N
+theme | String | step | options: step/tab | N
 title | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | `v-model` and `v-model:value` is supported | N
 defaultValue | String / Number | - | uncontrolled property | N
 visible | Boolean | false | \- | N
-checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
-placeholder | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: string[]) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/> | N
 onClose | Function |  | Typescript：`(trigger: CascaderTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
-onPick | Function |  | Typescript：`(context: { level: number; value: string | number; index: number }) => void`<br/> | N
+onPick | Function |  | Typescript：`(context: { level: number, value: string \| number, index: number }) => void`<br/> | N
 
 ### Cascader Events
 
 name | params | description
 -- | -- | --
-change | `(value: string \| number, selectedOptions: string[])` | \-
+change | `(value: string \| number, selectedOptions: CascaderOption[])` | \-
 close | `(trigger: CascaderTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(context: { level: number, value: string \| number, index: number })` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +43,4 @@ Name | Default Value | Description
 --td-cascader-step-dot-size | 8px | - 
 --td-cascader-step-height | 44px | - 
 --td-cascader-title-color | @font-gray-1 | - 
---td-cascder-title-font-size | 18px | - 
+--td-cascder-title-font-size | 18px | -
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
@@ -1,45 +1,46 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cascader Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 closeBtn | Boolean / Slot / Function | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts) | N
 options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
+placeholder | String / Slot / Function | '选择选项' | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 subTitles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
 theme | String | step | 展示风格。可选项：step/tab | N
 title | String / Slot / Function | - | 标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | 选项值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | String / Number | - | 选项值。非受控属性 | N
 visible | Boolean | false | 是否展示 | N
-checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
-placeholder | String / Slot / Function | 选择选项 | 未选中时的提示文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: string[]) => void`<br/>值发生变更时触发 | N
+onChange | Function |  | TS 类型：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/>值发生变更时触发 | N
 onClose | Function |  | TS 类型：`(trigger: CascaderTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
 onPick | Function |  | TS 类型：`(context: { level: number, value: string \| number, index: number }) => void`<br/>选择后触发 | N
 
 ### Cascader Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: string \| number, selectedOptions: string[])` | 值发生变更时触发
+change | `(value: string \| number, selectedOptions: CascaderOption[])` | 值发生变更时触发
 close | `(trigger: CascaderTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
 pick | `(context: { level: number, value: string \| number, index: number })` | 选择后触发
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
--- | -- | --
---td-cascader-active-color | @brand-color | - 
---td-cascader-border-color | @border-color | - 
---td-cascader-disabled-color | @font-gray-4 | - 
---td-cascader-options-height | 320px | - 
---td-cascader-options-title-color | @font-gray-3 | - 
---td-cascader-step-arrow-color | @font-gray-3 | - 
---td-cascader-step-dot-size | 8px | - 
---td-cascader-step-height | 44px | - 
---td-cascader-title-color | @font-gray-1 | - 
---td-cascder-title-font-size | 18px | - 
+| 名称                              | 默认值        | 描述 |
+| --------------------------------- | ------------- | ---- |
+| --td-cascader-active-color        | @brand-color  | -    |
+| --td-cascader-border-color        | @border-color | -    |
+| --td-cascader-disabled-color      | @font-gray-4  | -    |
+| --td-cascader-options-height      | 320px         | -    |
+| --td-cascader-options-title-color | @font-gray-3  | -    |
+| --td-cascader-step-arrow-color    | @font-gray-3  | -    |
+| --td-cascader-step-dot-size       | 8px           | -    |
+| --td-cascader-step-height         | 44px          | -    |
+| --td-cascader-title-color         | @font-gray-1  | -    |
+| --td-cascder-title-font-size      | 18px          | -    |