feat(Cascader): support select parent nodes when filtering (#6102)

* feat(cascader): support select parentnode when filtering

* feat(cascader): support select parentnode when filtering

* feat(cascader): support select parentnode when filtering

* fix(cascader): fix custom option node change

* fix(cascader): fix custom option node change

* chore: fix lint

* chore: stash changelog [ci skip]

* chore: optimize

* feat(cascader): add more params for option

* fix(cascader): fix reservekeyword api

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <tdesign@tencent.com>

Author: uyarn

packages/components/cascader/_example-ts/custom-options.vue

@@ -31,11 +31,27 @@
       :option="optionRender"
     >
     </t-cascader>
+    <t-cascader
+      v-model="value4"
+      :popup-props="{ overlayClassName: 'tdesign-demo-select__overlay-option' }"
+      :options="options"
+      multiple
+    >
+      <template #option="{ item, onChange }">
+        <div class="tdesign-demo__user-option" @click="(e) => handleClick(item, onChange)">
+          <img src="https://tdesign.gtimg.com/site/avatar.jpg" />
+          <div class="tdesign-demo__user-option-info">
+            <div>{{ item.label }}</div>
+            <div>{{ item.value }}</div>
+          </div>
+        </div>
+      </template>
+    </t-cascader>
   </t-space>
 </template>
 <script lang="tsx" setup>
 import { ref, computed } from 'vue';
-import { CascaderProps } from 'tdesign-vue-next';
+import type { CascaderProps, TreeOptionData } from 'tdesign-vue-next';
 const options: CascaderProps['options'] = [
   {
     label: '选项一',
@@ -96,6 +112,10 @@ const getDeepOptions = (options: CascaderProps['options']): CascaderProps['optio
   }));
 };
 const optionsData = computed<CascaderProps['options']>(() => getDeepOptions(options));
+
+const handleClick = (item: TreeOptionData, changeCallback: () => void) => {
+  if (Array.isArray(item.children) && !item.children?.length) changeCallback();
+};
 </script>
 <style>
 .tdesign-demo__user-option {

packages/components/cascader/_example-ts/filterable.vue

@@ -3,6 +3,7 @@
     <t-cascader v-model="value" :options="options" filterable clearable />
     <t-cascader v-model="value2" :options="options" filterable clearable multiple :min-collapsed-num="2" />
     <t-cascader v-model="value3" :filter="filterMethod" :options="options" clearable :min-collapsed-num="2" />
+    <t-cascader v-model="value4" filterable :options="options" clearable multiple check-strictly />
   </t-space>
 </template>
 
@@ -46,6 +47,8 @@ const options: CascaderProps['options'] = [
 const value = ref('');
 const value2 = ref(['1.1']);
 const value3 = ref('');
+const value4 = ref([]);
+
 const filterMethod: CascaderProps['filter'] = (search, node) => {
   console.log('filter:', search, node.label);
   return node.label.indexOf(search) !== -1;

packages/components/cascader/_example/custom-options.vue

@@ -31,6 +31,22 @@
       :option="optionRender"
     >
     </t-cascader>
+    <t-cascader
+      v-model="value4"
+      :popup-props="{ overlayClassName: 'tdesign-demo-select__overlay-option' }"
+      :options="options"
+      multiple
+    >
+      <template #option="{ item, onChange }">
+        <div class="tdesign-demo__user-option" @click="(e) => handleClick(item, onChange)">
+          <img src="https://tdesign.gtimg.com/site/avatar.jpg" />
+          <div class="tdesign-demo__user-option-info">
+            <div>{{ item.label }}</div>
+            <div>{{ item.value }}</div>
+          </div>
+        </div>
+      </template>
+    </t-cascader>
   </t-space>
 </template>
 <script setup lang="jsx">
@@ -74,6 +90,7 @@ const options = [
 const value1 = ref('');
 const value2 = ref('');
 const value3 = ref('');
+const value4 = ref([]);
 
 const optionRender = (h, { item }) => (
   <div class="tdesign-demo__user-option">
@@ -96,6 +113,10 @@ const getDeepOptions = (options) => {
 };
 
 const optionsData = computed(() => getDeepOptions(options));
+
+const handleClick = (item, changeCallback) => {
+  if (Array.isArray(item.children) && !item.children?.length) changeCallback();
+};
 </script>
 <style>
 .tdesign-demo__user-option {

packages/components/cascader/_example/filterable.vue

@@ -3,6 +3,7 @@
     <t-cascader v-model="value" :options="options" filterable clearable />
     <t-cascader v-model="value2" :options="options" filterable clearable multiple :min-collapsed-num="2" />
     <t-cascader v-model="value3" :filter="filterMethod" :options="options" clearable :min-collapsed-num="2" />
+    <t-cascader v-model="value4" filterable :options="options" clearable multiple check-strictly />
   </t-space>
 </template>
 
@@ -47,6 +48,7 @@ const options = [
 const value = ref('');
 const value2 = ref(['1.1']);
 const value3 = ref('');
+const value4 = ref([]);
 
 const filterMethod = (search, node) => {
   console.log('filter:', search, node.label);

packages/components/cascader/cascader.en-US.md

@@ -26,7 +26,7 @@ loadingText | String / Slot / Function | - | Typescript：`string \| TNode`。[s
 max | Number | 0 | \- | N
 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/packages/components/common.ts) | N
+option | Slot / Function | - | customize one option。Typescript：`TNode<{ item: CascaderOption; index: number; onChange: ()=> void; onExpand: ()=> void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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/packages/components/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/packages/components/common.ts) | N
@@ -36,7 +36,7 @@ popupVisible | Boolean | - | \- | N
 defaultPopupVisible | Boolean | - | uncontrolled property | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 readonly | Boolean | undefined | \- | N
-reserveKeyword | Boolean | false | \- | N
+reserveKeyword | Boolean | true | \- | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/cascader/type.ts) | N
 showAllLevels | Boolean | true | \- | N
 size | String | medium | options: large/medium/small。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N

packages/components/cascader/cascader.md

@@ -26,7 +26,7 @@ loadingText | String / Slot / Function | - | 远程加载时显示的文字，
 max | Number | 0 | 用于控制多选数量，值为 0 则不限制 | N
 minCollapsedNum | Number | 0 | 最小折叠数量，用于多选情况下折叠选中项，超出该数值的选中项折叠。值为 0 则表示不折叠 | N
 multiple | Boolean | false | 是否允许多选 | N
-option | Slot / Function | - | 自定义单个级联选项。TS 类型：`TNode<{ item: CascaderOption; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+option | Slot / Function | - | 自定义单个级联选项, item 是选项本身的值，index 是下标，onChange 用于触发当前节点选中，onExpand 用于触发当前节点展开。TS 类型：`TNode<{ item: CascaderOption; index: number; onChange: ()=> void; onExpand: ()=> void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/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/packages/components/common.ts) | N
 panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
@@ -36,7 +36,7 @@ popupVisible | Boolean | - | 是否显示下拉框 | N
 defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
 prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
 readonly | Boolean | undefined | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
-reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
+reserveKeyword | Boolean | true | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
 selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/cascader/type.ts) | N
 showAllLevels | Boolean | true | 选中值使用完整路径，输入框在单选时也显示完整路径 | N
 size | String | medium | 组件尺寸。可选项：large/medium/small。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N

packages/components/cascader/components/Item.tsx

@@ -99,7 +99,7 @@ export default defineComponent({
           disabled={node.isDisabled() || ((value as TreeNodeValue[]).length >= max && max !== 0)}
           // node.value maybe string or number
           name={String(node.value)}
-          stopLabelTrigger={!!node.children}
+          stopLabelTrigger={!!node.children && !props.cascaderContext.isParentFilterable}
           title={inputVal ? getFullPathLabel(node) : renderTitle(node)}
           onChange={() => {
             props.onChange();
@@ -113,19 +113,14 @@ export default defineComponent({
 
     return () => {
       const { cascaderContext, node, optionChild } = props;
-      const isOptionChildAndMultiple = optionChild && cascaderContext.multiple;
       return (
-        <li
-          ref={liRef}
-          class={itemClass.value}
-          onClick={() => (isOptionChildAndMultiple ? props.onChange() : props.onClick())}
-          onMouseenter={props.onMouseenter}
-        >
+        <li ref={liRef} class={itemClass.value} onClick={props.onClick} onMouseenter={props.onMouseenter}>
           {optionChild ||
             (cascaderContext.multiple
               ? RenderCheckBox(node, cascaderContext)
               : RenderLabelContent(node, cascaderContext))}
           {node.children &&
+            !props.cascaderContext.isParentFilterable &&
             (node.loading ? (
               <TLoading class={iconClass.value} size="small" />
             ) : (

packages/components/cascader/components/Panel.tsx

@@ -6,7 +6,7 @@ import CascaderProps from '../props';
 import { useConfig, usePrefixClass, useTNodeDefault } from '@tdesign/shared-hooks';
 
 import { getDefaultNode } from '@tdesign/shared-utils';
-import { getPanels, expendClickEffect, valueChangeEffect } from '../utils';
+import { getPanels, expandClickEffect, valueChangeEffect } from '../utils';
 
 export default defineComponent({
   name: 'TCascaderSubPanel',
@@ -32,14 +32,19 @@ export default defineComponent({
 
     const handleExpand = (node: TreeNode, trigger: 'hover' | 'click') => {
       const { trigger: propsTrigger, cascaderContext } = props;
-      expendClickEffect(propsTrigger, trigger, node, cascaderContext, props.options);
+      expandClickEffect(propsTrigger, trigger, node, cascaderContext);
     };
 
     const renderItem = (node: TreeNode, index: number) => {
       const optionChild = node.data.content
         ? getDefaultNode(node.data.content(h))
         : renderTNodeJSXDefault('option', {
-            params: { item: node.data, index },
+            params: {
+              item: node.data,
+              index,
+              onExpand: () => handleExpand(node, 'click'),
+              onChange: () => valueChangeEffect(node, props.cascaderContext),
+            },
           });
       return (
         <Item

packages/components/cascader/hooks/index.ts

@@ -11,7 +11,6 @@ import {
   isValueInvalid,
   treeNodesEffect,
   treeStoreExpendEffect,
-  calculateExpand,
 } from '../utils';
 
 import {
@@ -24,34 +23,6 @@ import {
   TreeOptionData,
 } from '../types';
 
-/**
- * @description 扁平化树形数据，在 filterable 和 checkStrictly 时使用
- */
-function flattenOptions(options: TdCascaderProps['options']) {
-  const result: TdCascaderProps['options'] = [];
-
-  function processNodes(nodes: any[], parentLabel = '', isParentDisabled = false) {
-    nodes.forEach((node) => {
-      const currentDisabled = isParentDisabled || node.disabled || false;
-      const currentLabel = parentLabel ? `${parentLabel}/${node.label}` : node.label;
-
-      const newNode = {
-        label: currentLabel,
-        value: node.value,
-        disabled: currentDisabled,
-      };
-      result.push(newNode);
-
-      if (node.children) {
-        processNodes(node.children, currentLabel, currentDisabled);
-      }
-    });
-  }
-
-  processNodes(options);
-  return result;
-}
-
 // 全局状态
 export const useContext = (
   props: TdCascaderProps,
@@ -67,6 +38,11 @@ export const useContext = (
     expend: [],
   });
 
+  // 部分模式下需要允许父节点被搜索选择 valueMode = 'parentFirst' 和 checkStrictly
+  const isParentFilterable = computed(
+    () => (props.valueMode === 'parentFirst' || props.checkStrictly) && statusContext.inputVal,
+  );
+
   return {
     statusContext,
     cascaderContext: computed(() => {
@@ -84,6 +60,8 @@ export const useContext = (
         minCollapsedNum,
         valueType,
         modelValue,
+        valueMode,
+        reserveKeyword,
       } = props;
       return {
         value: statusContext.scopeVal,
@@ -99,7 +77,10 @@ export const useContext = (
         showAllLevels,
         minCollapsedNum,
         valueType,
+        valueMode,
+        reserveKeyword,
         visible: innerPopupVisible.value,
+        isParentFilterable: isParentFilterable.value,
         ...statusContext,
         setTreeNodes: (nodes: TreeNode[]) => {
           statusContext.treeNodes = nodes;
@@ -112,7 +93,7 @@ export const useContext = (
         setInputVal: (val: string) => {
           statusContext.inputVal = val;
         },
-        setExpend: (val: TreeNodeValue[]) => {
+        setExpand: (val: TreeNodeValue[]) => {
           statusContext.expend = val;
         },
       };
@@ -139,12 +120,12 @@ export const useCascaderContext = (props: TdCascaderProps) => {
 
   // 更新treeNodes
   const updatedTreeNodes = () => {
-    const { inputVal, treeStore, setTreeNodes } = cascaderContext.value;
-    treeNodesEffect(inputVal, treeStore, setTreeNodes, props.filter);
+    const { inputVal, treeStore, setTreeNodes, isParentFilterable } = cascaderContext.value;
+    treeNodesEffect(inputVal, treeStore, setTreeNodes, props.filter, isParentFilterable);
   };
 
   // 更新节点展开状态
-  const updateExpend = () => {
+  const updateExpand = () => {
     const { value, treeStore } = cascaderContext.value;
     const { expend } = statusContext;
     treeStoreExpendEffect(treeStore, value, expend);
@@ -185,7 +166,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
         treeStore.reload(options);
         treeStore.refreshNodes();
       }
-      updateExpend();
+      updateExpand();
       updatedTreeNodes();
     },
     { immediate: true, deep: true },
@@ -235,7 +216,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
       }
 
       if (!statusContext.treeStore) return;
-      updateExpend();
+      updateExpand();
       updatedTreeNodes();
     },
     { immediate: true },
@@ -253,19 +234,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
 
   watch(
     () => statusContext.inputVal,
-    (val) => {
-      if (props.checkStrictly && props.filterable) {
-        if (val) {
-          const flattenedOptions = flattenOptions(props.options);
-          statusContext.treeStore.reload(flattenedOptions);
-          statusContext.treeStore.refreshNodes();
-        } else {
-          statusContext.treeStore.reload(props.options);
-        }
-        const expand = calculateExpand(statusContext.treeStore, cascaderContext.value.value);
-        statusContext.treeStore.replaceExpanded(expand);
-        updateExpend();
-      }
+    () => {
       updatedTreeNodes();
     },
   );

packages/components/cascader/props.ts

@@ -78,7 +78,7 @@ export default {
   },
   /** 是否允许多选 */
   multiple: Boolean,
-  /** 自定义单个级联选项 */
+  /** 自定义单个级联选项, item 是选项本身的值，index 是下标，onChange 用于触发当前节点选中，onExpand 用于触发当前节点展开 */
   option: {
     type: Function as PropType<TdCascaderProps['option']>,
   },
@@ -116,7 +116,10 @@ export default {
     default: undefined,
   },
   /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */
-  reserveKeyword: Boolean,
+  reserveKeyword: {
+    type: Boolean,
+    default: true,
+  },
   /** 透传 SelectInput 筛选器输入框组件的全部属性 */
   selectInputProps: {
     type: Object as PropType<TdCascaderProps['selectInputProps']>,