feat: add showLeafIcon

components/tree-select/demo/multiple.vue

@@ -27,7 +27,12 @@ Multiple selection usage.
     multiple
     tree-default-expand-all
     :tree-data="treeData"
-  ></a-tree-select>
+  >
+    <template #title="{ value: val, title }">
+      <b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
+      <template v-else>{{ title }}</template>
+    </template>
+  </a-tree-select>
 </template>
 <script lang="ts">
 import type { TreeSelectProps } from 'ant-design-vue';

components/tree-select/demo/treeLine.vue

@@ -0,0 +1,89 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 线性样式
+  en-US: Show Tree Line
+---
+
+## zh-CN
+
+通过 `treeLine` 配置线性样式。
+
+## en-US
+
+Use `treeLine` to show the line style.
+
+</docs>
+
+<template>
+  <a-switch
+    v-model:checked="treeLine"
+    checked-children="treeLine"
+    un-checked-children="treeLine"
+  ></a-switch>
+  <a-switch
+    v-model:checked="showLeafIcon"
+    :disabled="!treeLine"
+    checked-children="showLeafIcon"
+    un-checked-children="showLeafIcon"
+  ></a-switch>
+  <a-tree-select
+    v-model:value="value"
+    style="width: 300px"
+    placeholder="Please select"
+    :tree-line="treeLine && { showLeafIcon }"
+    :tree-data="treeData"
+  >
+    <template #title="{ value: val, title }">
+      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
+      <template v-else>{{ title }}</template>
+    </template>
+  </a-tree-select>
+</template>
+<script lang="ts">
+import type { TreeSelectProps } from 'ant-design-vue';
+import { defineComponent, ref, watch } from 'vue';
+export default defineComponent({
+  setup() {
+    const treeLine = ref(true);
+    const showLeafIcon = ref(false);
+    const value = ref<string>();
+    const treeData = ref<TreeSelectProps['treeData']>([
+      {
+        title: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            title: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                title: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                title: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
+          },
+          {
+            title: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+    ]);
+    watch(value, () => {
+      console.log(value.value);
+    });
+    return {
+      treeLine,
+      showLeafIcon,
+      value,
+      treeData,
+    };
+  },
+});
+</script>

components/tree-select/index.en-US.md

@@ -47,6 +47,7 @@ Tree selection control.
 | treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |  |
 | treeDefaultExpandedKeys | Default expanded treeNodes | string\[] \| number\[] | - |  |
 | treeExpandedKeys(v-model) | Set expanded keys | string\[] \| number\[] | - |  |
+| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 |
 | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' |  |
 | treeNodeLabelProp | Will render as content of select | string | 'title' |  |
 | value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - |  |

components/tree-select/index.zh-CN.md

@@ -48,6 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | treeDefaultExpandAll | 默认展开所有树节点 | boolean | false |  |
 | treeDefaultExpandedKeys | 默认展开的树节点 | string\[] \| number\[] | - |  |
 | treeExpandedKeys(v-model) | 设置展开的树节点 | string\[] \| number\[] | - |  |
+| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 |
 | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' |  |
 | treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' |  |
 | value(v-model) | 指定当前选中的条目 | string/string\[] | - |  |

components/tree/Tree.tsx

@@ -81,7 +81,10 @@ export interface AntTreeNodeDropEvent {
 export const treeProps = () => {
   return {
     ...vcTreeProps(),
-    showLine: { type: Boolean, default: undefined },
+    showLine: {
+      type: [Boolean, Object] as PropType<boolean | { showLeafIcon: boolean }>,
+      default: undefined,
+    },
     /** 是否支持多选 */
     multiple: { type: Boolean, default: undefined },
     /** 是否自动展开父节点 */

components/tree/index.en-US.md

@@ -36,7 +36,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | selectedKeys(v-model) | (Controlled) Specifies the keys of the selected treeNodes | string\[] \| number\[] | - |  |
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |  |
 | switcherIcon | customize collapse/expand icon of tree node | slot | - |  |
-| showLine | Shows a connecting line | boolean | false |  |
+| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean}(3.0+) | false |  |
 | title | custom title | slot |  | 2.0.0 |
 
 ### Events

components/tree/index.zh-CN.md

@@ -37,7 +37,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | selectedKeys(v-model) | （受控）设置选中的树节点 | string\[] \| number\[] | - |  |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
 | switcherIcon | 自定义树节点的展开/折叠图标 | slot | - |  |
-| showLine | 是否展示连接线 | boolean | false |  |
+| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean}(3.0+) | false |  |
 | title | 自定义标题 | slot |  | 2.0.0 |
 
 ### 事件

components/vc-tree-select/Context.tsx

@@ -1,68 +0,0 @@
-import type {
-  FlattenDataNode,
-  InternalDataEntity,
-  Key,
-  LegacyDataNode,
-  RawValueType,
-} from './interface';
-import type { SkipType } from './hooks/useKeyValueMapping';
-import type { ComputedRef, InjectionKey, PropType } from 'vue';
-import { computed, defineComponent, inject, provide } from 'vue';
-
-interface ContextProps {
-  checkable: boolean;
-  customCheckable: () => any;
-  checkedKeys: Key[];
-  halfCheckedKeys: Key[];
-  treeExpandedKeys: Key[];
-  treeDefaultExpandedKeys: Key[];
-  onTreeExpand: (keys: Key[]) => void;
-  treeDefaultExpandAll: boolean;
-  treeIcon: any;
-  showTreeIcon: boolean;
-  switcherIcon: any;
-  treeLine: boolean;
-  treeNodeFilterProp: string;
-  treeLoadedKeys: Key[];
-  treeMotion: any;
-  loadData: (treeNode: LegacyDataNode) => Promise<unknown>;
-  onTreeLoad: (loadedKeys: Key[]) => void;
-
-  // Cache help content. These can be generated by parent component.
-  // Let's reuse this.
-  getEntityByKey: (key: Key, skipType?: SkipType, ignoreDisabledCheck?: boolean) => FlattenDataNode;
-  getEntityByValue: (
-    value: RawValueType,
-    skipType?: SkipType,
-    ignoreDisabledCheck?: boolean,
-  ) => FlattenDataNode;
-
-  slots: {
-    title?: (data: InternalDataEntity) => any;
-    titleRender?: (data: InternalDataEntity) => any;
-    [key: string]: ((...args: any[]) => any) | undefined;
-  };
-}
-
-const SelectContextKey: InjectionKey<ComputedRef<ContextProps>> = Symbol('SelectContextKey');
-
-export const SelectContext = defineComponent({
-  name: 'SelectContext',
-  props: {
-    value: { type: Object as PropType<ContextProps> },
-  },
-  setup(props, { slots }) {
-    provide(
-      SelectContextKey,
-      computed(() => props.value),
-    );
-    return () => slots.default?.();
-  },
-});
-
-export const useInjectTreeSelectContext = () => {
-  return inject(
-    SelectContextKey,
-    computed(() => ({} as ContextProps)),
-  );
-};

components/vc-tree-select/LegacyContext.tsx

@@ -5,6 +5,7 @@
 
 import type { InjectionKey } from 'vue';
 import { inject, provide } from 'vue';
+import type { TreeProps } from '../tree';
 import type { DataEntity, IconType } from '../vc-tree/interface';
 import type { InternalDataEntity, Key, LegacyDataNode, RawValueType } from './interface';
 
@@ -20,7 +21,7 @@ export interface LegacyContextProps {
   treeIcon: IconType;
   showTreeIcon: boolean;
   switcherIcon: IconType;
-  treeLine: boolean;
+  treeLine: TreeProps['showLine'];
   treeNodeFilterProp: string;
   treeLoadedKeys: Key[];
   treeMotion: any;

components/vc-tree/props.ts

@@ -125,7 +125,10 @@ export const treeProps = () => ({
   children: PropTypes.any,
   treeData: { type: Array as PropType<DataNode[]> }, // Generate treeNode by children
   fieldNames: { type: Object as PropType<FieldNames> },
-  showLine: { type: Boolean, default: undefined },
+  showLine: {
+    type: [Boolean, Object] as PropType<boolean | { showLeafIcon: boolean }>,
+    default: undefined,
+  },
   showIcon: { type: Boolean, default: undefined },
   icon: PropTypes.any,
   selectable: { type: Boolean, default: undefined },