naive-ui 2.30.6 → 2.31.0

package/es/tree/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NTree } from './src/Tree';
+export { default as NTree, treeProps } from './src/Tree';
 export type { TreeProps } from './src/Tree';
 export type { TreeOption, TreeDragInfo, TreeDropInfo } from './src/interface';

package/es/tree/index.js

@@ -1 +1 @@
-export { default as NTree } from './src/Tree';
+export { default as NTree, treeProps } from './src/Tree';

package/es/tree/src/Tree.d.ts

@@ -1,7 +1,7 @@
 import { PropType, VNodeChild } from 'vue';
 import { TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps } from './interface';
+import type { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon, TreeNodeProps, CheckOnClick } from './interface';
 import { defaultAllowDrop } from './dnd';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string): TreeMateOptions<T, T, T>;
 export declare type OnUpdateKeys = (value: Array<string & number>, option: Array<TreeOption | null>) => void;
@@ -29,12 +29,13 @@ export declare const treeSharedProps: {
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
 };
-declare const treeProps: {
+export declare const treeProps: {
     readonly internalTreeSelect: BooleanConstructor;
     readonly internalScrollable: BooleanConstructor;
     readonly internalScrollablePadding: StringConstructor;
@@ -78,10 +79,12 @@ declare const treeProps: {
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
+    readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -95,6 +98,10 @@ declare const treeProps: {
         readonly default: true;
     };
     readonly expandOnClick: BooleanConstructor;
+    readonly checkOnClick: {
+        readonly type: PropType<boolean | CheckOnClick>;
+        readonly default: false;
+    };
     readonly cancelable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -146,7 +153,6 @@ declare const treeProps: {
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
-    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -381,10 +387,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
+    readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -398,6 +406,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly expandOnClick: BooleanConstructor;
+    readonly checkOnClick: {
+        readonly type: PropType<boolean | CheckOnClick>;
+        readonly default: false;
+    };
     readonly cancelable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -449,7 +461,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
-    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1156,10 +1167,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
+    readonly accordion: BooleanConstructor;
     readonly showIrrelevantNodes: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1173,6 +1186,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly expandOnClick: BooleanConstructor;
+    readonly checkOnClick: {
+        readonly type: PropType<boolean | CheckOnClick>;
+        readonly default: false;
+    };
     readonly cancelable: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1224,7 +1241,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
-    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly nodeProps: PropType<TreeNodeProps>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1433,6 +1449,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly internalScrollable: boolean;
     readonly checkStrategy: CheckStrategy;
     readonly leafOnly: boolean;
+    readonly accordion: boolean;
     readonly defaultExpandedKeys: Key[];
     readonly selectable: boolean;
     readonly expandOnClick: boolean;
@@ -1446,6 +1463,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly internalFocusable: boolean;
     readonly showIrrelevantNodes: boolean;
     readonly expandOnDragenter: boolean;
+    readonly checkOnClick: boolean | CheckOnClick;
     readonly blockNode: boolean;
     readonly allowDrop: AllowDrop;
 }>;

package/es/tree/src/Tree.js

@@ -65,18 +65,22 @@ export const treeSharedProps = {
         default: () => []
     },
     indeterminateKeys: Array,
+    renderSwitcherIcon: Function,
     onUpdateIndeterminateKeys: [Function, Array],
     'onUpdate:indeterminateKeys': [Function, Array],
     onUpdateExpandedKeys: [Function, Array],
     'onUpdate:expandedKeys': [Function, Array]
 };
-const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { showIrrelevantNodes: { type: Boolean, default: true }, data: {
+export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { accordion: Boolean, showIrrelevantNodes: { type: Boolean, default: true }, data: {
         type: Array,
         default: () => []
     }, expandOnDragenter: {
         type: Boolean,
         default: true
-    }, expandOnClick: Boolean, cancelable: {
+    }, expandOnClick: Boolean, checkOnClick: {
+        type: [Boolean, Function],
+        default: false
+    }, cancelable: {
         type: Boolean,
         default: true
     }, checkable: Boolean, draggable: Boolean, blockNode: Boolean, blockLine: Boolean, disabled: Boolean, checkedKeys: Array, defaultCheckedKeys: {
@@ -103,7 +107,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, us
     }, checkboxPlacement: {
         type: String,
         default: 'left'
-    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, renderSwitcherIcon: Function, nodeProps: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), treeSharedProps), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), treeSharedProps), { 
     // internal props for tree-select
     internalTreeSelect: Boolean, internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to display
@@ -361,7 +365,7 @@ export default defineComponent({
         // animation in progress
         const aipRef = ref(false);
         // animation flattened nodes
-        const afNodeRef = ref([]);
+        const afNodesRef = ref([]);
         // Note: Since the virtual list depends on min height, if there's a node
         // whose height starts from 0, the virtual list will have a wrong height
         // during animation. This will seldom cause wired scrollbar status. It is
@@ -390,8 +394,7 @@ export default defineComponent({
                     removedKey = expandedKey;
                 }
             }
-            if ((addedKey !== null && removedKey !== null) ||
-                (addedKey === null && removedKey === null)) {
+            if (addedKey === null && removedKey === null) {
                 // 1. multi action, not triggered by click
                 // 2. no action, don't know what happened
                 return;
@@ -399,16 +402,29 @@ export default defineComponent({
             const { virtualScroll } = props;
             const viewportHeight = (virtualScroll ? virtualListInstRef.value.listElRef : selfElRef.value).offsetHeight;
             const viewportItemCount = Math.ceil(viewportHeight / ITEM_SIZE) + 1;
+            // play add animation
+            let baseExpandedKeys;
             if (addedKey !== null) {
-                // play add animation
-                aipRef.value = true;
-                afNodeRef.value = displayTreeMateRef.value.getFlattenedNodes(prevValue);
-                const expandedNodeIndex = afNodeRef.value.findIndex((node) => node.key === addedKey);
+                baseExpandedKeys = prevValue;
+            }
+            if (removedKey !== null) {
+                if (baseExpandedKeys === undefined) {
+                    baseExpandedKeys = value;
+                }
+                else {
+                    baseExpandedKeys = baseExpandedKeys.filter((key) => key !== removedKey);
+                }
+            }
+            aipRef.value = true;
+            afNodesRef.value =
+                displayTreeMateRef.value.getFlattenedNodes(baseExpandedKeys);
+            if (addedKey !== null) {
+                const expandedNodeIndex = afNodesRef.value.findIndex((node) => node.key === addedKey);
                 if (~expandedNodeIndex) {
                     const expandedChildren = flatten(
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    afNodeRef.value[expandedNodeIndex].children, value);
-                    afNodeRef.value.splice(expandedNodeIndex + 1, 0, {
+                    afNodesRef.value[expandedNodeIndex].children, value);
+                    afNodesRef.value.splice(expandedNodeIndex + 1, 0, {
                         __motion: true,
                         mode: 'expand',
                         height: virtualScroll
@@ -421,10 +437,9 @@ export default defineComponent({
                 }
             }
             if (removedKey !== null) {
-                afNodeRef.value = displayTreeMateRef.value.getFlattenedNodes(value);
-                const collapsedNodeIndex = afNodeRef.value.findIndex((node) => node.key === removedKey);
+                const collapsedNodeIndex = afNodesRef.value.findIndex((node) => node.key === removedKey);
                 if (~collapsedNodeIndex) {
-                    const collapsedNodeChildren = afNodeRef.value[collapsedNodeIndex].children;
+                    const collapsedNodeChildren = afNodesRef.value[collapsedNodeIndex].children;
                     // Sometime the whole tree is change, remove a key doesn't mean it is collapsed,
                     // but maybe children removed
                     if (!collapsedNodeChildren)
@@ -432,7 +447,7 @@ export default defineComponent({
                     // play remove animation
                     aipRef.value = true;
                     const collapsedChildren = flatten(collapsedNodeChildren, value);
-                    afNodeRef.value.splice(collapsedNodeIndex + 1, 0, {
+                    afNodesRef.value.splice(collapsedNodeIndex + 1, 0, {
                         __motion: true,
                         mode: 'collapse',
                         height: virtualScroll
@@ -450,7 +465,7 @@ export default defineComponent({
         });
         const mergedFNodesRef = computed(() => {
             if (aipRef.value)
-                return afNodeRef.value;
+                return afNodesRef.value;
             else
                 return fNodesRef.value;
         });
@@ -580,9 +595,10 @@ export default defineComponent({
             doUpdateCheckedKeys(checkedKeys, getOptionsByKeys(checkedKeys));
             doUpdateIndeterminateKeys(indeterminateKeys, getOptionsByKeys(indeterminateKeys));
         }
-        function toggleExpand(key) {
+        function toggleExpand(node) {
             if (props.disabled)
                 return;
+            const { key } = node;
             const { value: mergedExpandedKeys } = mergedExpandedKeysRef;
             const index = mergedExpandedKeys.findIndex((expandNodeId) => expandNodeId === key);
             if (~index) {
@@ -595,14 +611,24 @@ export default defineComponent({
                 if (!nodeToBeExpanded || nodeToBeExpanded.isLeaf) {
                     return;
                 }
-                const nextKeys = mergedExpandedKeys.concat(key);
+                let nextKeys;
+                if (props.accordion) {
+                    const siblingKeySet = new Set(node.siblings.map(({ key }) => key));
+                    nextKeys = mergedExpandedKeys.filter((expandedKey) => {
+                        return !siblingKeySet.has(expandedKey);
+                    });
+                    nextKeys.push(key);
+                }
+                else {
+                    nextKeys = mergedExpandedKeys.concat(key);
+                }
                 doUpdateExpandedKeys(nextKeys, getOptionsByKeys(nextKeys));
             }
         }
         function handleSwitcherClick(node) {
             if (props.disabled || aipRef.value)
                 return;
-            toggleExpand(node.key);
+            toggleExpand(node);
         }
         function handleSelect(node) {
             if (props.disabled || !props.selectable) {
@@ -1014,6 +1040,7 @@ export default defineComponent({
             blockLineRef: toRef(props, 'blockLine'),
             indentRef: toRef(props, 'indent'),
             cascadeRef: toRef(props, 'cascade'),
+            checkOnClickRef: toRef(props, 'checkOnClick'),
             checkboxPlacementRef: props.checkboxPlacement,
             droppingMouseNodeRef,
             droppingNodeParentRef,

package/es/tree/src/TreeNode.d.ts

@@ -27,7 +27,7 @@ declare const TreeNode: import("vue").DefineComponent<{
     internalScrollable: import("vue").Ref<boolean>;
     draggable: import("vue").Ref<boolean>;
     blockLine: import("vue").Ref<boolean>;
-    nodeProps: import("vue").ComputedRef<import("vue").HTMLAttributes | undefined>;
+    nodeProps: import("vue").ComputedRef<(import("vue").HTMLAttributes & Record<string, unknown>) | undefined>;
     checkboxFocusable: import("vue").Ref<boolean>;
     droppingPosition: import("vue").Ref<import("./interface").DropPosition | null>;
     droppingOffsetLevel: import("vue").Ref<number>;

package/es/tree/src/TreeNode.js

@@ -22,7 +22,7 @@ const TreeNode = defineComponent({
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NTree = inject(treeInjectionKey);
-        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef } = NTree;
+        const { droppingNodeParentRef, droppingMouseNodeRef, draggingNodeRef, droppingPositionRef, droppingOffsetLevelRef, nodePropsRef, indentRef, blockLineRef, checkboxPlacementRef, checkOnClickRef } = NTree;
         const disabledRef = computed(() => NTree.disabledRef.value || props.tmNode.disabled);
         const resolvedNodePropsRef = computed(() => {
             const { value: nodeProps } = nodePropsRef;
@@ -69,6 +69,21 @@ const TreeNode = defineComponent({
                     (NTree.multipleRef.value && NTree.cascadeRef.value) ||
                     props.tmNode.isLeaf
                 : true));
+        const checkableRef = useMemo(() => NTree.checkableRef.value &&
+            (NTree.cascadeRef.value ||
+                NTree.mergedCheckStrategyRef.value !== 'child' ||
+                props.tmNode.isLeaf));
+        const checkedRef = useMemo(() => NTree.displayedCheckedKeysRef.value.includes(props.tmNode.key));
+        const mergedCheckOnClickRef = useMemo(() => {
+            const { value: checkable } = checkableRef;
+            if (!checkable)
+                return false;
+            const { value: checkOnClick } = checkOnClickRef;
+            if (typeof checkOnClick === 'boolean') {
+                return checkOnClick;
+            }
+            return checkOnClick(props.tmNode.rawNode);
+        });
         function _handleClick(e) {
             const { value: expandOnClick } = NTree.expandOnClickRef;
             const { value: selectable } = selectableRef;
@@ -83,6 +98,9 @@ const TreeNode = defineComponent({
             if (expandOnClick && !tmNode.isLeaf) {
                 handleSwitcherClick();
             }
+            if (mergedCheckOnClickRef.value) {
+                handleCheck(!checkedRef.value);
+            }
         }
         function handleContentClick(e) {
             var _a, _b;
@@ -186,15 +204,12 @@ const TreeNode = defineComponent({
                 var _a;
                 return (_a = NTree.highlightKeySetRef.value) === null || _a === void 0 ? void 0 : _a.has(props.tmNode.key);
             }),
-            checked: useMemo(() => NTree.displayedCheckedKeysRef.value.includes(props.tmNode.key)),
+            checked: checkedRef,
             indeterminate: useMemo(() => NTree.displayedIndeterminateKeysRef.value.includes(props.tmNode.key)),
             selected: useMemo(() => NTree.mergedSelectedKeysRef.value.includes(props.tmNode.key)),
             expanded: useMemo(() => NTree.mergedExpandedKeysRef.value.includes(props.tmNode.key)),
             disabled: disabledRef,
-            checkable: computed(() => NTree.checkableRef.value &&
-                (NTree.cascadeRef.value ||
-                    NTree.mergedCheckStrategyRef.value !== 'child' ||
-                    props.tmNode.isLeaf)),
+            checkable: checkableRef,
             checkboxDisabled: computed(() => !!props.tmNode.rawNode.checkboxDisabled),
             selectable: selectableRef,
             expandOnClick: NTree.expandOnClickRef,

package/es/tree/src/interface.d.ts

@@ -28,7 +28,7 @@ export declare type RenderPrefix = RenderTreePart;
 export declare type RenderSuffix = RenderTreePart;
 export declare type TreeNodeProps = (info: {
     option: TreeOption;
-}) => HTMLAttributes;
+}) => HTMLAttributes & Record<string, unknown>;
 export interface TreeDragInfo {
     event: DragEvent;
     node: TreeOption;
@@ -55,6 +55,7 @@ export interface InternalDropInfo {
     dropPosition: DropPosition;
 }
 export declare type RenderSwitcherIcon = () => VNodeChild;
+export declare type CheckOnClick = (option: TreeOption) => boolean;
 export interface TreeInjection {
     loadingKeysRef: Ref<Set<Key>>;
     highlightKeySetRef: Ref<Set<Key> | null>;
@@ -91,6 +92,7 @@ export interface TreeInjection {
     multipleRef: Ref<boolean>;
     checkboxPlacementRef: 'left' | 'right';
     internalTreeSelect: boolean;
+    checkOnClickRef: Ref<boolean | CheckOnClick>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;
     handleCheck: (node: TreeNode<TreeOption>, checked: boolean) => void;

package/es/tree-select/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NTreeSelect } from './src/TreeSelect';
+export { default as NTreeSelect, treeSelectProps } from './src/TreeSelect';
 export type { TreeSelectProps } from './src/TreeSelect';
-export type { TreeSelectOption } from './src/interface';
+export type { TreeSelectOption, TreeSelectNodeProps, TreeSelectRenderLabel, TreeSelectRenderPrefix, TreeSelectRenderSuffix, TreeSelectRenderTag } from './src/interface';

package/es/tree-select/index.js

@@ -1 +1 @@
-export { default as NTreeSelect } from './src/TreeSelect';
+export { default as NTreeSelect, treeSelectProps } from './src/TreeSelect';

package/es/tree-select/src/TreeSelect.d.ts

@@ -1,13 +1,17 @@
-import { PropType, HTMLAttributes } from 'vue';
+import { PropType, HTMLAttributes, VNodeChild } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { CheckStrategy } from 'treemate';
 import type { FormValidationStatus } from '../../form/src/interface';
 import { Key } from '../../tree/src/interface';
-import type { SelectBaseOption } from '../../select/src/interface';
+import type { SelectBaseOption, SelectOption } from '../../select/src/interface';
 import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { OnUpdateValue, TreeSelectOption, Value } from './interface';
+import type { OnUpdateValue, TreeSelectNodeProps, TreeSelectOption, TreeSelectRenderTag, Value } from './interface';
 declare type OnLoad = (node: TreeSelectOption) => Promise<void>;
-declare const props: {
+export declare const treeSelectProps: {
+    readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly nodeProps: PropType<TreeSelectNodeProps>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onLoad: PropType<OnLoad>;
@@ -40,6 +44,7 @@ declare const props: {
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<import("../../tree/src/interface").RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
@@ -106,6 +111,7 @@ declare const props: {
         readonly default: true;
     };
     readonly status: PropType<FormValidationStatus>;
+    readonly renderTag: PropType<TreeSelectRenderTag>;
     readonly theme: PropType<import("../../_mixins").Theme<"TreeSelect", {
         menuPadding: string;
         menuColor: string;
@@ -563,8 +569,12 @@ declare const props: {
         }>;
     }>>>;
 };
-export declare type TreeSelectProps = ExtractPublicPropTypes<typeof props>;
+export declare type TreeSelectProps = ExtractPublicPropTypes<typeof treeSelectProps>;
 declare const _default: import("vue").DefineComponent<{
+    readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly nodeProps: PropType<TreeSelectNodeProps>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onLoad: PropType<OnLoad>;
@@ -597,6 +607,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<import("../../tree/src/interface").RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
@@ -663,6 +674,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly status: PropType<FormValidationStatus>;
+    readonly renderTag: PropType<TreeSelectRenderTag>;
     readonly theme: PropType<import("../../_mixins").Theme<"TreeSelect", {
         menuPadding: string;
         menuColor: string;
@@ -1149,12 +1161,16 @@ declare const _default: import("vue").DefineComponent<{
     treeCheckedKeys: import("vue").ComputedRef<Key[]>;
     mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
     mergedDisabled: import("vue").ComputedRef<boolean>;
-    selectedOption: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null>;
-    selectedOptions: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null>;
+    selectedOption: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)> | null>;
+    selectedOptions: import("vue").ComputedRef<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => VNodeChild)>[] | null>;
     pattern: import("vue").Ref<string>;
     pendingNodeKey: import("vue").Ref<string | number | null>;
     mergedCascade: import("vue").ComputedRef<boolean>;
     mergedFilter: import("vue").ComputedRef<(pattern: string, node: import("../../tree").TreeOption) => boolean>;
+    selectionRenderTag: import("vue").ComputedRef<(({ option, handleClose }: {
+        option: SelectOption;
+        handleClose: () => void;
+    }) => VNodeChild) | undefined>;
     handleTriggerOrMenuResize: () => void;
     doUpdateExpandedKeys: (keys: Key[], option: Array<TreeSelectOption | null>) => void;
     handleMenuLeave: () => void;
@@ -1520,6 +1536,10 @@ declare const _default: import("vue").DefineComponent<{
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly renderLabel: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderPrefix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly renderSuffix: PropType<import("./interface").TreeSelectRenderTreePart>;
+    readonly nodeProps: PropType<TreeSelectNodeProps>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onLoad: PropType<OnLoad>;
@@ -1552,6 +1572,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly indeterminateKeys: PropType<Key[]>;
+    readonly renderSwitcherIcon: PropType<import("../../tree/src/interface").RenderSwitcherIcon>;
     readonly onUpdateIndeterminateKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<import("../../tree/src/Tree").OnUpdateKeys>>;
@@ -1618,6 +1639,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly status: PropType<FormValidationStatus>;
+    readonly renderTag: PropType<TreeSelectRenderTag>;
     readonly theme: PropType<import("../../_mixins").Theme<"TreeSelect", {
         menuPadding: string;
         menuColor: string;

package/es/tree-select/src/TreeSelect.js

@@ -14,7 +14,7 @@ import { treeSelectLight } from '../styles';
 import { treeSelectInjectionKey } from './interface';
 import { treeOption2SelectOption, treeOption2SelectOptionWithPath } from './utils';
 import style from './styles/index.cssr';
-const props = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { bordered: {
+export const treeSelectProps = Object.assign(Object.assign(Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: true
     }, cascade: Boolean, checkable: Boolean, clearable: Boolean, clearFilterAfterSelect: {
@@ -47,14 +47,14 @@ const props = Object.assign(Object.assign(Object.assign(Object.assign({}, useThe
     }, size: String, value: [String, Number, Array], to: useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
-    }, status: String }), treeSharedProps), { onBlur: Function, onFocus: Function, onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
+    }, status: String, renderTag: Function }), treeSharedProps), { renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, onBlur: Function, onFocus: Function, onLoad: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
     /**
      * @deprecated
      */
     leafOnly: Boolean });
 export default defineComponent({
     name: 'TreeSelect',
-    props,
+    props: treeSelectProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             watchEffect(() => {
@@ -431,6 +431,21 @@ export default defineComponent({
             if (!happensIn(e, 'action'))
                 e.preventDefault();
         }
+        const selectionRenderTagRef = computed(() => {
+            const { renderTag } = props;
+            if (!renderTag)
+                return undefined;
+            return function selectionRenderTag({ option, handleClose }) {
+                const { value } = option;
+                if (value !== undefined) {
+                    const treeOption = dataTreeMateRef.value.getNode(value);
+                    if (treeOption) {
+                        return renderTag({ option: treeOption.rawNode, handleClose });
+                    }
+                }
+                return value;
+            };
+        });
         provide(treeSelectInjectionKey, {
             pendingNodeKeyRef,
             dataTreeMate: dataTreeMateRef
@@ -485,6 +500,7 @@ export default defineComponent({
             pendingNodeKey: pendingNodeKeyRef,
             mergedCascade: mergedCascadeRef,
             mergedFilter: mergedFilterRef,
+            selectionRenderTag: selectionRenderTagRef,
             handleTriggerOrMenuResize,
             doUpdateExpandedKeys,
             handleMenuLeave,
@@ -514,7 +530,7 @@ export default defineComponent({
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {
-                        default: () => (h(NInternalSelection, { ref: "triggerInstRef", onResize: this.handleTriggerOrMenuResize, status: this.mergedStatus, focused: this.focused, clsPrefix: mergedClsPrefix, theme: mergedTheme.peers.InternalSelection, themeOverrides: mergedTheme.peerOverrides.InternalSelection, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, size: this.mergedSize, bordered: this.bordered, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, active: this.mergedShow, loading: this.loading, multiple: this.multiple, maxTagCount: this.maxTagCount, showArrow: true, filterable: this.filterable, clearable: this.clearable, pattern: this.pattern, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onClick: this.handleTriggerClick, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onDeleteOption: this.handleDeleteOption, onKeydown: this.handleKeydown }, {
+                        default: () => (h(NInternalSelection, { ref: "triggerInstRef", onResize: this.handleTriggerOrMenuResize, status: this.mergedStatus, focused: this.focused, clsPrefix: mergedClsPrefix, theme: mergedTheme.peers.InternalSelection, themeOverrides: mergedTheme.peerOverrides.InternalSelection, renderTag: this.selectionRenderTag, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, size: this.mergedSize, bordered: this.bordered, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, active: this.mergedShow, loading: this.loading, multiple: this.multiple, maxTagCount: this.maxTagCount, showArrow: true, filterable: this.filterable, clearable: this.clearable, pattern: this.pattern, onPatternInput: this.handlePatternInput, onClear: this.handleClear, onClick: this.handleTriggerClick, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onDeleteOption: this.handleDeleteOption, onKeydown: this.handleKeydown }, {
                             arrow: () => { var _a, _b; return [(_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
                         }))
                     }),
@@ -534,7 +550,7 @@ export default defineComponent({
                                         (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || '',
                                         this.cssVars
                                     ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
-                                    h(NTree, { ref: "treeInstRef", blockLine: true, allowCheckingNotLoaded: this.allowCheckingNotLoaded, showIrrelevantNodes: false, animated: false, pattern: this.pattern, filter: this.mergedFilter, data: options, cancelable: multiple, labelField: this.labelField, keyField: this.keyField, childrenField: this.childrenField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, virtualScroll: this.consistentMenuWidth && this.virtualScroll, internalTreeSelect: true, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, internalRenderEmpty: () => (h("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, resolveSlot($slots.empty, () => [
+                                    h(NTree, { ref: "treeInstRef", blockLine: true, allowCheckingNotLoaded: this.allowCheckingNotLoaded, showIrrelevantNodes: false, animated: false, pattern: this.pattern, filter: this.mergedFilter, data: options, cancelable: multiple, labelField: this.labelField, keyField: this.keyField, childrenField: this.childrenField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, renderLabel: this.renderLabel, renderPrefix: this.renderPrefix, renderSuffix: this.renderSuffix, renderSwitcherIcon: this.renderSwitcherIcon, nodeProps: this.nodeProps, virtualScroll: this.consistentMenuWidth && this.virtualScroll, internalTreeSelect: true, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, internalRenderEmpty: () => (h("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, resolveSlot($slots.empty, () => [
                                             h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
                                         ]))), onLoad: this.onLoad, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys }),
                                     resolveWrappedSlot($slots.action, (children) => {

package/es/tree-select/src/interface.d.ts

@@ -1,5 +1,5 @@
 import { TreeMate, TreeNode } from 'treemate';
-import { Ref } from 'vue';
+import { HTMLAttributes, Ref, VNodeChild } from 'vue';
 import type { TreeOptionBase, TreeOption } from '../../tree/src/interface';
 export declare type TreeSelectOption = Omit<TreeOptionBase, 'checkboxDisabled' | 'isLeaf' | 'children'> & {
     children?: TreeSelectOption[];
@@ -14,3 +14,19 @@ export interface TreeSelectInjection {
     dataTreeMate: Ref<TreeMate<TreeOption>>;
 }
 export declare const treeSelectInjectionKey: import("vue").InjectionKey<TreeSelectInjection>;
+export declare type TreeSelectRenderTag = (props: {
+    option: TreeSelectOption;
+    handleClose: () => void;
+}) => VNodeChild;
+export interface TreeSelectRenderProps {
+    option: TreeSelectOption;
+    checked: boolean;
+    selected: boolean;
+}
+export declare type TreeSelectRenderTreePart = ({ option, checked, selected }: TreeSelectRenderProps) => VNodeChild;
+export declare type TreeSelectRenderLabel = TreeSelectRenderTreePart;
+export declare type TreeSelectRenderPrefix = TreeSelectRenderTreePart;
+export declare type TreeSelectRenderSuffix = TreeSelectRenderTreePart;
+export declare type TreeSelectNodeProps = (info: {
+    option: TreeSelectOption;
+}) => HTMLAttributes & Record<string, unknown>;