From 4e516da2209f2b005b07ff659b844dbe3003a587 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 7 Sep 2021 02:40:25 +0800 Subject: [PATCH] fix(cascader): `check-strategy="child"` doesn't behaves the same as previous `leaf-only` --- CHANGELOG.en-US.md | 48 +++++++++---------- CHANGELOG.zh-CN.md | 48 +++++++++---------- src/cascader/demos/enUS/action.demo.md | 1 - src/cascader/demos/enUS/index.demo-entry.md | 2 +- src/cascader/demos/enUS/multiple-lazy.demo.md | 9 ++-- src/cascader/demos/enUS/multiple.demo.md | 9 ++-- src/cascader/demos/enUS/single-lazy.demo.md | 9 ++-- src/cascader/demos/enUS/single.demo.md | 12 ++--- src/cascader/demos/enUS/virtual.demo.md | 9 ++-- src/cascader/demos/zhCN/action.demo.md | 7 +-- src/cascader/demos/zhCN/index.demo-entry.md | 2 +- src/cascader/demos/zhCN/multiple-lazy.demo.md | 9 ++-- src/cascader/demos/zhCN/multiple.demo.md | 9 ++-- src/cascader/demos/zhCN/single-lazy.demo.md | 9 ++-- src/cascader/demos/zhCN/single.demo.md | 12 ++--- src/cascader/demos/zhCN/virtual.demo.md | 9 ++-- src/cascader/src/Cascader.tsx | 30 +++++------- src/cascader/src/CascaderOption.tsx | 11 +++-- src/cascader/src/CascaderSelectMenu.tsx | 11 +++-- src/cascader/src/interface.ts | 20 ++++---- src/cascader/src/utils.ts | 12 ++--- 21 files changed, 152 insertions(+), 136 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 008ee3da09e..fee1abf9547 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -6,7 +6,7 @@ - `n-form` & `n-form-item` split `show-require-mark` into `show-require-mark` and `require-mark-placement`. -### Features +### Feats - `n-drawer` add `on-mask-click` prop. - `n-for` add `require-mark-placement` prop, closes [#1055](https://github.com/TuSimple/naive-ui/issues/1055). @@ -16,6 +16,7 @@ - Fix `n-step` must be passed with `internal-index`. - Fix `n-radio-group`'s `on-update:value` and `on-update-value` can't be array. +- Fix `n-cascader` `check-strategy="child"` doesn't behaves the same as previous `leaf-only`. ## 2.17.2 (2021-09-06) @@ -29,7 +30,6 @@ - Fix `n-cascader` menu not showing correct checked keys. - ## 2.17.0 (2021-09-05) ### Breaking Changes @@ -1014,7 +1014,7 @@ See vue3.md - Fix the problem that nested `n-icon` is not flattened. - Fix the problem that `n-date-picker` has no year in panel when type is `date` and `datetime`. -### Features +### Feats - `n-button` add `dashed` props - Add `n-space` component. @@ -1060,7 +1060,7 @@ See vue3.md ## 1.5.1 (2020-07-20) -### Features +### Feats - Add `disabled` for `n-time-picker`. @@ -1080,7 +1080,7 @@ See vue3.md ## 1.4.1 (2020-06-23) -### Features +### Feats - Add `autofocus` for `n-select`. @@ -1090,13 +1090,13 @@ See vue3.md - `n-menu` doesn't support slot API anymore. -### Features +### Feats - Add experimental setting primary color feature. ## 1.3.5 (2020-06-06) -### Features +### Feats - Add `attr-type` for `n-button` @@ -1113,7 +1113,7 @@ See vue3.md ## 1.3.3 (2020-06-03) -### Features +### Feats - Add `$NOs.theme` to get the current theme of the OS. @@ -1132,7 +1132,7 @@ See vue3.md - Fix the problem that header of `n-data-table` has no border-color transition. - Fix the problem that `show-icon` & `closable` & `bordered` props of `$NConfirm` don't work. -### Features +### Feats - Add and adjust some colors in the style scheme of `n-config-consumer`. @@ -1142,7 +1142,7 @@ See vue3.md - Default UI CSS bundle won't include external font files. If you need using it you should import it explicitly. -### Features +### Feats - Add `themed-style` prop on `n-layout`. @@ -1165,13 +1165,13 @@ See vue3.md ## 1.2.0 (2020-05-29) -### Features +### Feats - Add `feedback` and `validation-status` props for `n-form-item`. ## 1.1.5 (2020-05-28) -### Features +### Feats - Add `display-directive` prop for `n-collapse` and `n-collapse-item`. - Add `class` and `style` prop for `n-select`'s `option`. @@ -1203,7 +1203,7 @@ See vue3.md ## 1.1.2 (2020-05-19) -### Features +### Feats - Add content slot for `n-step`. - Add `label` prop for `n-checkbox`. @@ -1234,7 +1234,7 @@ See vue3.md ## 1.1.0 (2020-05-16) -### Features +### Feats - `n-button` now accepts custom color. @@ -1265,7 +1265,7 @@ See vue3.md ## 1.0.11 (2020-04-30) -### Features +### Feats - Add `fallback-option` prop for `n-select` to deal with the value with no corresponding option. @@ -1280,7 +1280,7 @@ See vue3.md ## 1.0.10 (2020-04-28) -### Features +### Feats - Add `arrow-placement` prop on `n-collapse`. - Add `arrow` slot on `n-collapse-item`. @@ -1291,7 +1291,7 @@ See vue3.md ## 1.0.9 (2020-04-23) -### Features +### Feats - Add `autofocus` prop on `n-input`. - Add `closable` option on `NMessage`. @@ -1304,14 +1304,14 @@ See vue3.md ## 1.0.8 (2020-04-22) -### Features +### Feats - Add `n-dynamic-tags`. - Add `tableHeaderOverlayBackgroundColor` & `inputOverlayBackgroundColor` to `styleScheme` ## 1.0.7 (2020-04-10) -### Features +### Feats - Add `filter-option-value` prop for `n-data-table`'s `column` to better deal with single filter mode. @@ -1327,7 +1327,7 @@ See vue3.md ## 1.0.5 (2020-03-27) -### Features +### Feats - Change the data type of `n-data-table`'s filters from Array to Object. @@ -1337,13 +1337,13 @@ See vue3.md ## 1.0.4 (2020-03-26) -### Features +### Feats - Filter menu in `n-data-table` is scrollable when there are too many items. ## 1.0.3 (2020-03-25) -### Features +### Feats - `$NMessage`, `$NNotification`, `$NConfirm`'s theme will be applied on their children components. @@ -1362,7 +1362,7 @@ See vue3.md ## 1.0.1 (2020-03-21) -### Features +### Feats - Add `'bar'` & `'arrow-circle'` on `show-trigger` prop of `n-layout-sider`. @@ -1370,6 +1370,6 @@ See vue3.md - Rails of `n-scrollbar` shadow mouse event. -### Features +### Feats - `n-date-table` add `empty` slot. [#86](https://github.com/TuSimple/naive-ui/issues/86) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6e91795408e..a4e1b160dc5 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -6,7 +6,7 @@ - `n-form` & `n-form-item` 拆分 `show-require-mark` 为 `show-require-mark` 和 `require-mark-placement` -### Features +### Feats - `n-drawer` 新增 `on-mask-click` 属性 - `n-form` 新增 `require-mark-placement` 属性，关闭 [#1055](https://github.com/TuSimple/naive-ui/issues/1055) @@ -16,7 +16,7 @@ - 修复 `n-step` 必须传 `internal-index` - 修复 `n-radio-group` 的 `on-update:value` 和 `on-update-value` 类型不能为数组 - +- 修复 `n-cascader` `check-strategy="child"` 和原有 `leaf-only` 表现不一致 ## 2.17.2 (2021-09-06) @@ -1015,7 +1015,7 @@ - 修正了嵌套 `n-icon` 没有被打平的问题 - 修正了 `n-date-picker` 在类型为 `date` 和 `datetime` 时面板不显示年的问题 -### Features +### Feats - `n-button` 增加 `dashed` 属性 - 增加 `n-space` 组件 @@ -1061,7 +1061,7 @@ ## 1.5.1 (2020-07-20) -### Features +### Feats - 为 `n-time-picker` 增加了 `disabled` 属性 @@ -1081,7 +1081,7 @@ ## 1.4.1 (2020-06-23) -### Features +### Feats - 为 `n-select` 增加了 `autofocus` 属性 @@ -1091,13 +1091,13 @@ - `n-menu` 不再支持 slot API -### Features +### Feats - 增加了试验性的设定主色功能 ## 1.3.5 (2020-06-06) -### Features +### Feats - 为 `n-button` 增加了 `attr-type` 属性 @@ -1114,7 +1114,7 @@ ## 1.3.3 (2020-06-03) -### Features +### Feats - 增加了 `$NOs.theme` 来获取当前操作系统的主题 @@ -1133,7 +1133,7 @@ - 修正了 `n-data-table` 表头没 border-color transition 的问题 - 修正了 `$NConfirm` 的 `show-icon` & `closable` & `bordered` 属性设置无效的问题 -### Features +### Feats - 增加并调整了一些 `n-config-consumer` 样式方案中的颜色 @@ -1143,7 +1143,7 @@ - UI 默认样式不再包含外部字体文件，如果需要使用 UI 提供的字体需要明确引入 -### Features +### Feats - 为 `n-layout` 增加了 `themed-style` 属性 @@ -1166,13 +1166,13 @@ ## 1.2.0 (2020-05-29) -### Features +### Feats - 为 `n-form-item` 增加了 `feedback` 和 `validation-status` 属性 ## 1.1.5 (2020-05-28) -### Features +### Feats - 为 `n-collapse` 和 `n-collapse-item` 增加了 `display-directive` 属性 - 为 `n-select` 的 `option` 增加了 `class` 和 `style` 属性 @@ -1204,7 +1204,7 @@ ## 1.1.2 (2020-05-19) -### Features +### Feats - 为 `n-step` 增加内容的 slot - 为 `n-checkbox` 增加了 `label` prop @@ -1235,7 +1235,7 @@ ## 1.1.0 (2020-05-16) -### Features +### Feats - `n-button` 接受自定义颜色 @@ -1266,7 +1266,7 @@ ## 1.0.11 (2020-04-30) -### Features +### Feats - 为 `n-select` 增加了 `fallback-option` 属性用于控制无对应选项时的回退选项 @@ -1281,7 +1281,7 @@ ## 1.0.10 (2020-04-28) -### Features +### Feats - 为 `n-collapse` 增加了 `arrow-placement` 属性 - 为 `n-collapse-item` 增加了`arrow` slot @@ -1292,7 +1292,7 @@ ## 1.0.9 (2020-04-23) -### Features +### Feats - 为 `n-input` 增加了 `autofocus` 选项 - 为 `NMessage` 增加了 `closable` 选项 @@ -1305,14 +1305,14 @@ ## 1.0.8 (2020-04-22) -### Features +### Feats - 增加 `n-dynamic-tags` 组件 - `styleScheme` 新增暴露颜色 `tableHeaderOverlayBackgroundColor` & `inputOverlayBackgroundColor` ## 1.0.7 (2020-04-10) -### Features +### Feats - 为 `n-data-table` 的 `column` 增加了 `filter-option-value` 的属性来应对单选的情况 @@ -1328,7 +1328,7 @@ ## 1.0.5 (2020-03-27) -### Features +### Feats - 改变 `n-data-table` 的 filters 的数据类型从数组改变成对象 @@ -1338,13 +1338,13 @@ ## 1.0.4 (2020-03-26) -### Features +### Feats - 当选项过多时，`n-data-table` 过滤菜单的内容可以滚动 ## 1.0.3 (2020-03-25) -### Features +### Feats - `$NMessage`, `$NNotification`, `$NConfirm` 的获取到的主题会应用到他们的内部组件 @@ -1363,7 +1363,7 @@ ## 1.0.1 (2020-03-21) -### Features +### Feats - `n-layout-sider` 的 `show-trigger` 增加了 `'bar'` & `'arrow-circle'` 选项 @@ -1371,6 +1371,6 @@ - `n-scrollbar` 的轨道会挡住鼠标事件 -### Features +### Feats - `n-data-table` 增加了 empty 插槽 [#86](https://github.com/TuSimple/naive-ui/issues/86) diff --git a/src/cascader/demos/enUS/action.demo.md b/src/cascader/demos/enUS/action.demo.md index 07617f7d475..c7de47109fe 100644 --- a/src/cascader/demos/enUS/action.demo.md +++ b/src/cascader/demos/enUS/action.demo.md @@ -7,7 +7,6 @@ Is there anybody who needs an action slot on a cascader menu? v-model:value="value" placeholder="Meaningless values" :options="options" - :leaf-only="false" > diff --git a/src/cascader/demos/enUS/index.demo-entry.md b/src/cascader/demos/enUS/index.demo-entry.md index 1bb1284b1d6..50ee07cffd7 100644 --- a/src/cascader/demos/enUS/index.demo-entry.md +++ b/src/cascader/demos/enUS/index.demo-entry.md @@ -23,7 +23,7 @@ custom-field | Name | Type | Default | Description | | --- | --- | --- | --- | | cascade | `boolean` | `true` | Whether to cascade the checkbox selection onto children. | -| check-strategy | `string` | `'all'` | The way to show checked options. `all` means showing all checked node. `parent` means showing all checked parent node when all child node are checked. `child` means showing all child node. | +| check-strategy | `string` | `'all'` | The way to show checked options. `all` means showing all checked node. `parent` means showing all checked parent node when all child node are checked (not working in single select mode). `child` means showing all child node. | | children-field | `string` | `'children'` | The children field in `CascaderOption`. | | clearable | `boolean` | `false` | Whether the cascader is clearable. | | default-value | `string \| number \| Array \| null` | `null` | Data selected by default if no value is set. | diff --git a/src/cascader/demos/enUS/multiple-lazy.demo.md b/src/cascader/demos/enUS/multiple-lazy.demo.md index f8e7408fed0..7aa0a2ac9f1 100644 --- a/src/cascader/demos/enUS/multiple-lazy.demo.md +++ b/src/cascader/demos/enUS/multiple-lazy.demo.md @@ -3,7 +3,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path @@ -13,7 +16,7 @@ placeholder="Meaningless values" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" remote :on-load="handleLoad" @@ -38,7 +41,7 @@ function getChildren (option) { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, value: null, diff --git a/src/cascader/demos/enUS/multiple.demo.md b/src/cascader/demos/enUS/multiple.demo.md index a054088c1e7..bea93760f17 100644 --- a/src/cascader/demos/enUS/multiple.demo.md +++ b/src/cascader/demos/enUS/multiple.demo.md @@ -3,7 +3,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path Hover Trigger @@ -22,7 +25,7 @@ :expand-trigger="hoverTrigger ? 'hover' : 'click'" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" :filterable="filterable" /> @@ -62,7 +65,7 @@ function getOptions (depth = 3, iterator = 1, prefix = '') { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, hoverTrigger: false, diff --git a/src/cascader/demos/enUS/single-lazy.demo.md b/src/cascader/demos/enUS/single-lazy.demo.md index 78ddeac52e4..e767f9e197c 100644 --- a/src/cascader/demos/enUS/single-lazy.demo.md +++ b/src/cascader/demos/enUS/single-lazy.demo.md @@ -3,7 +3,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path @@ -12,7 +15,7 @@ placeholder="Meaningless values" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" remote :on-load="handleLoad" @@ -37,7 +40,7 @@ function getChildren (option) { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, value: null, diff --git a/src/cascader/demos/enUS/single.demo.md b/src/cascader/demos/enUS/single.demo.md index ffebb0ce705..23f519cc982 100644 --- a/src/cascader/demos/enUS/single.demo.md +++ b/src/cascader/demos/enUS/single.demo.md @@ -3,8 +3,10 @@ ```html - Leaf Only - Cascade + Child Check + Strategy Show Path Hover Trigger Filterable @@ -14,8 +16,7 @@ placeholder="Meaningless values" :expand-trigger="hoverTrigger ? 'hover' : 'click'" :options="options" - :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" :filterable="filterable" /> @@ -55,8 +56,7 @@ function getOptions (depth = 3, iterator = 1, prefix = '') { export default { data () { return { - leafOnly: true, - cascade: true, + checkStrategyIsChild: true, showPath: true, hoverTrigger: false, filterable: false, diff --git a/src/cascader/demos/enUS/virtual.demo.md b/src/cascader/demos/enUS/virtual.demo.md index 1bfe4516b64..5f13d21bdcd 100644 --- a/src/cascader/demos/enUS/virtual.demo.md +++ b/src/cascader/demos/enUS/virtual.demo.md @@ -7,7 +7,10 @@ In this example there are 5000 \* 2 \* 2 = 20000 entries. ```html - Leaf Only + Child Check + Strategy Cascade Show Path Hover Trigger @@ -19,7 +22,7 @@ In this example there are 5000 \* 2 \* 2 = 20000 entries. :expand-trigger="hoverTrigger ? 'hover' : 'click'" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" :filterable="filterable" /> @@ -59,7 +62,7 @@ function getOptions (depth = 3, iterator = 1, prefix = '') { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, hoverTrigger: false, diff --git a/src/cascader/demos/zhCN/action.demo.md b/src/cascader/demos/zhCN/action.demo.md index a440a139398..68f9b4314ff 100644 --- a/src/cascader/demos/zhCN/action.demo.md +++ b/src/cascader/demos/zhCN/action.demo.md @@ -3,12 +3,7 @@ 有人要在级联菜单里用这个插槽吗？ ```html - + ``` diff --git a/src/cascader/demos/zhCN/index.demo-entry.md b/src/cascader/demos/zhCN/index.demo-entry.md index 82d63f5217e..c32a4a81dab 100644 --- a/src/cascader/demos/zhCN/index.demo-entry.md +++ b/src/cascader/demos/zhCN/index.demo-entry.md @@ -23,7 +23,7 @@ custom-field | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | cascade | `boolean` | `true` | 在多选时是否关联选项 | -| check-strategy | `string` | `'all'` | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点 | +| check-strategy | `string` | `'all'` | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时，对于单选无效）；`child` 表示只显示子节点； | | children-field | `string` | `'children'` | 替代 `CascaderOption` 中的 children 字段名 | | clearable | `boolean` | `false` | 值是否可清除 | | default-value | `string \| number \| Array \| null` | `null` | 级联菜单默认选中的数据 | diff --git a/src/cascader/demos/zhCN/multiple-lazy.demo.md b/src/cascader/demos/zhCN/multiple-lazy.demo.md index 2ce6cf216ad..459c01179f7 100644 --- a/src/cascader/demos/zhCN/multiple-lazy.demo.md +++ b/src/cascader/demos/zhCN/multiple-lazy.demo.md @@ -3,7 +3,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path @@ -13,7 +16,7 @@ placeholder="没啥用的值" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" remote :on-load="handleLoad" @@ -38,7 +41,7 @@ function getChildren (option) { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, value: null, diff --git a/src/cascader/demos/zhCN/multiple.demo.md b/src/cascader/demos/zhCN/multiple.demo.md index 1e24731c7d2..258642a4b28 100644 --- a/src/cascader/demos/zhCN/multiple.demo.md +++ b/src/cascader/demos/zhCN/multiple.demo.md @@ -3,7 +3,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path Hover Trigger @@ -22,7 +25,7 @@ :expand-trigger="hoverTrigger ? 'hover' : 'click'" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" :filterable="filterable" /> @@ -62,7 +65,7 @@ function getOptions (depth = 3, iterator = 1, prefix = '') { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, hoverTrigger: false, diff --git a/src/cascader/demos/zhCN/single-lazy.demo.md b/src/cascader/demos/zhCN/single-lazy.demo.md index 52bd6c05222..34ccd513448 100644 --- a/src/cascader/demos/zhCN/single-lazy.demo.md +++ b/src/cascader/demos/zhCN/single-lazy.demo.md @@ -3,7 +3,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path @@ -12,7 +15,7 @@ placeholder="没啥用的值" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" remote :on-load="handleLoad" @@ -45,7 +48,7 @@ export default { isLeaf: false } ], - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, value: null diff --git a/src/cascader/demos/zhCN/single.demo.md b/src/cascader/demos/zhCN/single.demo.md index 99b664ab3a6..d575ead065d 100644 --- a/src/cascader/demos/zhCN/single.demo.md +++ b/src/cascader/demos/zhCN/single.demo.md @@ -3,8 +3,10 @@ ```html - Leaf Only - Cascade + Child Check + Strategy Show Path Hover Trigger Filterable @@ -14,8 +16,7 @@ placeholder="没啥用的值" :expand-trigger="hoverTrigger ? 'hover' : 'click'" :options="options" - :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" :filterable="filterable" /> @@ -55,8 +56,7 @@ function getOptions (depth = 3, iterator = 1, prefix = '') { export default { data () { return { - leafOnly: true, - cascade: true, + checkStrategyIsChild: true, showPath: true, hoverTrigger: false, filterable: false, diff --git a/src/cascader/demos/zhCN/virtual.demo.md b/src/cascader/demos/zhCN/virtual.demo.md index 661b1466ca8..3a0a21d73d6 100644 --- a/src/cascader/demos/zhCN/virtual.demo.md +++ b/src/cascader/demos/zhCN/virtual.demo.md @@ -7,7 +7,10 @@ ```html - Leaf Only + Child Check + Strategy Cascade Show Path Hover Trigger @@ -19,7 +22,7 @@ :expand-trigger="hoverTrigger ? 'hover' : 'click'" :options="options" :cascade="cascade" - :leaf-only="leafOnly" + :check-strategy="checkStrategyIsChild ? 'child' : 'all'" :show-path="showPath" :filterable="filterable" /> @@ -59,7 +62,7 @@ function getOptions (depth = 3, iterator = 1, prefix = '') { export default { data () { return { - leafOnly: true, + checkStrategyIsChild: true, cascade: true, showPath: true, hoverTrigger: false, diff --git a/src/cascader/src/Cascader.tsx b/src/cascader/src/Cascader.tsx index b5146b6d83c..2aca9ece6f0 100644 --- a/src/cascader/src/Cascader.tsx +++ b/src/cascader/src/Cascader.tsx @@ -33,7 +33,7 @@ import { getPathLabel } from './utils' import CascaderMenu from './CascaderMenu' import CascaderSelectMenu from './CascaderSelectMenu' import { - BaseOption, + CascaderOption, cascaderInjectionKey, CascaderMenuInstance, ExpandTrigger, @@ -55,7 +55,7 @@ const cascaderProps = { default: undefined }, options: { - type: Array as PropType, + type: Array as PropType, default: () => [] }, value: [String, Number, Array] as PropType, @@ -169,6 +169,9 @@ export default defineComponent({ controlledValueRef, uncontrolledValueRef ) + const mergedCheckStrategyRef = computed(() => { + return props.leafOnly ? 'child' : props.checkStrategy + }) const patternRef = ref('') const formItem = useFormItem(props) const { mergedSizeRef, mergedDisabledRef } = formItem @@ -271,7 +274,7 @@ export default defineComponent({ hoverKeyRef.value = key } function doCheck (key: Key): boolean { - const { cascade, multiple, leafOnly, filterable } = props + const { cascade, multiple, filterable } = props if (multiple) { try { const { checkedKeys } = treeMateRef.value.check( @@ -279,7 +282,7 @@ export default defineComponent({ mergedKeysRef.value.checkedKeys, { cascade, - checkStrategy: leafOnly ? 'child' : props.checkStrategy + checkStrategy: mergedCheckStrategyRef.value } ) doUpdateValue(checkedKeys) @@ -299,7 +302,7 @@ export default defineComponent({ } } } else { - if (leafOnly) { + if (mergedCheckStrategyRef.value === 'child') { const node = treeMateRef.value.getNode(key) if (node?.isLeaf) { doUpdateValue(key) @@ -313,14 +316,14 @@ export default defineComponent({ return true } function doUncheck (key: Key): void { - const { cascade, multiple, leafOnly } = props + const { cascade, multiple } = props if (multiple) { const { checkedKeys } = treeMateRef.value.uncheck( key, mergedKeysRef.value.checkedKeys, { cascade, - checkStrategy: leafOnly ? 'child' : props.checkStrategy + checkStrategy: mergedCheckStrategyRef.value } ) doUpdateValue(checkedKeys) @@ -328,18 +331,11 @@ export default defineComponent({ } const selectedOptionsRef = computed(() => { if (props.multiple) { - const { - showPath, - separator, - labelField, - cascade, - leafOnly, - checkStrategy - } = props + const { showPath, separator, labelField, cascade } = props const { getCheckedKeys, getNode } = treeMateRef.value const value = getCheckedKeys(checkedKeysRef.value, { cascade, - checkStrategy: leafOnly ? 'child' : checkStrategy + checkStrategy: mergedCheckStrategyRef.value }).checkedKeys return value.map((key) => { const node = getNode(key) @@ -695,7 +691,7 @@ export default defineComponent({ checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, - leafOnlyRef: toRef(props, 'leafOnly'), + mergedCheckStrategyRef, cascadeRef: toRef(props, 'cascade'), multipleRef: toRef(props, 'multiple'), keyboardKeyRef, diff --git a/src/cascader/src/CascaderOption.tsx b/src/cascader/src/CascaderOption.tsx index 820890a1dc8..81958de1c3c 100644 --- a/src/cascader/src/CascaderOption.tsx +++ b/src/cascader/src/CascaderOption.tsx @@ -26,7 +26,7 @@ export default defineComponent({ keyboardKeyRef, loadingKeySetRef, cascadeRef, - leafOnlyRef, + mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, @@ -83,7 +83,7 @@ export default defineComponent({ }) const showCheckboxRef = computed(() => { if (multipleRef.value && cascadeRef.value) return true - if (!leafOnlyRef.value) return true + if (mergedCheckStrategyRef.value !== 'child') return true }) const isLeafRef = computed(() => props.tmNode.isLeaf) const disabledRef = computed(() => props.tmNode.disabled) @@ -148,7 +148,7 @@ export default defineComponent({ } } return { - leafOnly: leafOnlyRef, + checkStrategy: mergedCheckStrategyRef, multiple: multipleRef, cascade: cascadeRef, checked: checkedRef, @@ -227,7 +227,8 @@ export default defineComponent({ ) }} - ) : this.leafOnly && !(this.multiple && this.cascade) ? ( + ) : this.checkStrategy === 'child' && + !(this.multiple && this.cascade) ? ( {{ default: () => @@ -241,7 +242,7 @@ export default defineComponent({ ) : null }} - ) : null} + ) : null} diff --git a/src/cascader/src/CascaderSelectMenu.tsx b/src/cascader/src/CascaderSelectMenu.tsx index 79f1f6b8e77..3fbe0647483 100644 --- a/src/cascader/src/CascaderSelectMenu.tsx +++ b/src/cascader/src/CascaderSelectMenu.tsx @@ -24,7 +24,7 @@ import { TmNode, Value, Filter, - BaseOption, + CascaderOption, SelectMenuInstance, cascaderInjectionKey } from './interface' @@ -49,17 +49,17 @@ export default defineComponent({ }, filter: { type: Function as PropType, - default: (pattern: string, _: BaseOption, path: BaseOption[]) => + default: (pattern: string, _: CascaderOption, path: CascaderOption[]) => path.some((option) => option.label && ~option.label.indexOf(pattern)) } }, setup (props) { const { isMountedRef, - leafOnlyRef, mergedValueRef, mergedClsPrefixRef, mergedThemeRef, + mergedCheckStrategyRef, syncSelectMenuPosition, closeMenu, handleSelectMenuClickOutside, @@ -69,7 +69,10 @@ export default defineComponent({ } = inject(cascaderInjectionKey)! const menuInstRef = ref(null) const selectOptionsRef = computed(() => { - return createSelectOptions(props.tmNodes, leafOnlyRef.value) + return createSelectOptions( + props.tmNodes, + mergedCheckStrategyRef.value === 'child' + ) }) const filteredSelectOptionsRef = computed(() => { const { filter, pattern } = props diff --git a/src/cascader/src/interface.ts b/src/cascader/src/interface.ts index b4cc7ae7b53..eb2334d3dc7 100644 --- a/src/cascader/src/interface.ts +++ b/src/cascader/src/interface.ts @@ -1,4 +1,4 @@ -import { TreeNode } from 'treemate' +import { CheckStrategy, TreeNode } from 'treemate' import type { MergedTheme } from '../../_mixins' import type { NLocale } from '../../locales' import type { CascaderTheme } from '../styles' @@ -9,27 +9,25 @@ export type Value = ValueAtom | ValueAtom[] export type Key = ValueAtom -export type CascaderOption = BaseOption - -export interface BaseOption { +export interface CascaderOption { label?: string value?: ValueAtom disabled?: boolean - children?: BaseOption[] + children?: CascaderOption[] [key: string]: unknown } export type ExpandTrigger = 'hover' | 'click' -export type TmNode = TreeNode +export type TmNode = TreeNode export type Filter = ( pattern: string, - option: BaseOption, - path: BaseOption[] + option: CascaderOption, + path: CascaderOption[] ) => boolean -export type OnLoad = (option: BaseOption) => Promise +export type OnLoad = (option: CascaderOption) => Promise export type OnUpdateValue = < T extends string & @@ -57,7 +55,7 @@ export interface CascaderInjection { checkedKeysRef: Ref indeterminateKeysRef: Ref hoverKeyPathRef: Ref - leafOnlyRef: Ref + mergedCheckStrategyRef: Ref multipleRef: Ref keyboardKeyRef: Ref hoverKeyRef: Ref @@ -66,7 +64,7 @@ export interface CascaderInjection { expandTriggerRef: Ref isMountedRef: Ref cascadeRef: Ref - onLoadRef: Ref<((value: BaseOption) => Promise) | undefined> + onLoadRef: Ref<((value: CascaderOption) => Promise) | undefined> localeRef: Ref virtualScrollRef: Ref optionHeightRef: Ref diff --git a/src/cascader/src/utils.ts b/src/cascader/src/utils.ts index 80d04deb734..5ca4800c703 100644 --- a/src/cascader/src/utils.ts +++ b/src/cascader/src/utils.ts @@ -1,4 +1,4 @@ -import type { TmNode, BaseOption } from './interface' +import type { TmNode, CascaderOption } from './interface' import type { SelectBaseOption } from '../../select/src/interface' function traverseWithCallback ( @@ -19,14 +19,14 @@ function traverseWithCallback ( function createSelectOptions ( tmNodes: TmNode[], - leafOnly: boolean -): Array { - const selectOptions: Array = [] - const path: BaseOption[] = [] + checkStrategyIsChild: boolean +): Array { + const selectOptions: Array = [] + const path: CascaderOption[] = [] traverseWithCallback( tmNodes, (tmNode) => { - if (tmNode.isLeaf || !leafOnly) { + if (tmNode.isLeaf || !checkStrategyIsChild) { if (tmNode.disabled) return const { rawNode } = tmNode path.push(rawNode)