naive-ui 2.18.1 → 2.19.2

package/es/tree/src/Tree.js

@@ -52,6 +52,9 @@ export const treeSharedProps = {
         type: Array,
         default: () => []
     },
+    indeterminateKeys: Array,
+    onUpdateIndeterminateKeys: [Function, Array],
+    'onUpdate:indeterminateKeys': [Function, Array],
     onUpdateExpandedKeys: [Function, Array],
     'onUpdate:expandedKeys': [Function, Array]
 };
@@ -91,14 +94,14 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, us
     // use it to do check
     internalDataTreeMate: Object, 
     // use it to display
-    internalDisplayTreeMate: Object, internalHighlightKeySet: Object, internalCheckOnSelect: Boolean, internalHideFilteredNode: Boolean, internalCheckboxFocusable: {
+    internalDisplayTreeMate: Object, internalHighlightKeySet: Object, internalUnifySelectCheck: Boolean, internalHideFilteredNode: Boolean, internalCheckboxFocusable: {
         type: Boolean,
         default: true
     }, internalFocusable: {
         // Make tree-select take over keyboard operations
         type: Boolean,
         default: true
-    }, internalCheckStrategy: {
+    }, checkStrategy: {
         type: String,
         default: 'all'
     } });
@@ -130,15 +133,19 @@ export default defineComponent({
         const controlledCheckedKeysRef = toRef(props, 'checkedKeys');
         const mergedCheckedKeysRef = useMergedState(controlledCheckedKeysRef, uncontrolledCheckedKeysRef);
         const checkedStatusRef = computed(() => {
-            return dataTreeMateRef.value.getCheckedKeys(mergedCheckedKeysRef.value, {
+            const value = dataTreeMateRef.value.getCheckedKeys(mergedCheckedKeysRef.value, {
                 cascade: props.cascade
             });
+            return value;
         });
-        const mergedCheckStrategyRef = computed(() => props.leafOnly ? 'child' : props.internalCheckStrategy);
+        const mergedCheckStrategyRef = computed(() => props.leafOnly ? 'child' : props.checkStrategy);
         const displayedCheckedKeysRef = computed(() => {
             return checkedStatusRef.value.checkedKeys;
         });
         const displayedIndeterminateKeysRef = computed(() => {
+            const { indeterminateKeys } = props;
+            if (indeterminateKeys !== undefined)
+                return indeterminateKeys;
             return checkedStatusRef.value.indeterminateKeys;
         });
         const uncontrolledSelectedKeysRef = ref(props.defaultSelectedKeys || props.selectedKeys);
@@ -333,6 +340,13 @@ export default defineComponent({
             if (_onUpdateCheckedKeys)
                 call(_onUpdateCheckedKeys, value);
         }
+        function doUpdateIndeterminateKeys(value) {
+            const { 'onUpdate:indeterminateKeys': _onUpdateIndeterminateKeys, onUpdateIndeterminateKeys } = props;
+            if (_onUpdateIndeterminateKeys)
+                call(_onUpdateIndeterminateKeys, value);
+            if (onUpdateIndeterminateKeys)
+                call(onUpdateIndeterminateKeys, value);
+        }
         function doUpdateSelectedKeys(value) {
             const { 'onUpdate:selectedKeys': _onUpdateSelectedKeys, onUpdateSelectedKeys } = props;
             uncontrolledSelectedKeysRef.value = value;
@@ -398,12 +412,16 @@ export default defineComponent({
             if (props.disabled || node.disabled) {
                 return;
             }
-            const { checkedKeys } = dataTreeMateRef.value[checked ? 'check' : 'uncheck'](node.key, displayedCheckedKeysRef.value, {
+            if (props.internalUnifySelectCheck && !props.multiple) {
+                handleSelect(node);
+                return;
+            }
+            const { checkedKeys, indeterminateKeys } = dataTreeMateRef.value[checked ? 'check' : 'uncheck'](node.key, displayedCheckedKeysRef.value, {
                 cascade: props.cascade,
-                leafOnly: props.leafOnly,
                 checkStrategy: mergedCheckStrategyRef.value
             });
             doUpdateCheckedKeys(checkedKeys);
+            doUpdateIndeterminateKeys(indeterminateKeys);
         }
         function toggleExpand(key) {
             if (props.disabled)
@@ -432,14 +450,19 @@ export default defineComponent({
             if (props.disabled ||
                 node.disabled ||
                 !props.selectable ||
-                (props.leafOnly && !node.isLeaf)) {
+                (mergedCheckStrategyRef.value === 'child' && !node.isLeaf)) {
                 return;
             }
             pendingNodeKeyRef.value = node.key;
-            if (props.internalCheckOnSelect) {
+            if (props.internalUnifySelectCheck) {
                 const { value: { checkedKeys, indeterminateKeys } } = checkedStatusRef;
-                handleCheck(node, !(checkedKeys.includes(node.key) ||
-                    indeterminateKeys.includes(node.key)));
+                if (props.multiple) {
+                    handleCheck(node, !(checkedKeys.includes(node.key) ||
+                        indeterminateKeys.includes(node.key)));
+                }
+                else {
+                    doUpdateCheckedKeys([node.key]);
+                }
             }
             if (props.multiple) {
                 const selectedKeys = Array.from(mergedSelectedKeysRef.value);
@@ -839,9 +862,9 @@ export default defineComponent({
             mergedSelectedKeysRef,
             mergedExpandedKeysRef,
             mergedThemeRef: themeRef,
+            mergedCheckStrategyRef,
             disabledRef: toRef(props, 'disabled'),
             checkableRef: toRef(props, 'checkable'),
-            leafOnlyRef: toRef(props, 'leafOnly'),
             selectableRef: toRef(props, 'selectable'),
             remoteRef: toRef(props, 'remote'),
             onLoadRef: toRef(props, 'onLoad'),

package/es/tree/src/TreeNode.js

@@ -146,10 +146,13 @@ const TreeNode = defineComponent({
             disabled: computed(() => NTree.disabledRef.value || props.tmNode.disabled),
             checkable: computed(() => NTree.checkableRef.value &&
                 (NTree.cascadeRef.value ||
-                    (NTree.leafOnlyRef.value && props.tmNode.isLeaf))),
+                    NTree.mergedCheckStrategyRef.value !== 'child' ||
+                    props.tmNode.isLeaf)),
             checkboxDisabled: computed(() => !!props.tmNode.rawNode.checkboxDisabled),
             selectable: computed(() => NTree.selectableRef.value &&
-                (NTree.leafOnlyRef.value ? !!props.tmNode.isLeaf : true)),
+                (NTree.mergedCheckStrategyRef.value === 'child'
+                    ? props.tmNode.isLeaf
+                    : true)),
             internalScrollable: NTree.internalScrollableRef,
             draggable: NTree.draggableRef,
             blockLine: NTree.blockLineRef,

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

@@ -1,4 +1,4 @@
-import { TreeNode } from 'treemate';
+import { CheckStrategy, TreeNode } from 'treemate';
 import { InjectionKey, Ref, VNodeChild } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import type { TreeTheme } from '../styles';
@@ -73,7 +73,7 @@ export interface TreeInjection {
     disabledRef: Ref<boolean>;
     checkableRef: Ref<boolean>;
     cascadeRef: Ref<boolean>;
-    leafOnlyRef: Ref<boolean>;
+    mergedCheckStrategyRef: Ref<CheckStrategy>;
     selectableRef: Ref<boolean>;
     pendingNodeKeyRef: Ref<null | Key>;
     internalScrollableRef: Ref<boolean>;

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

@@ -38,6 +38,9 @@ declare const props: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
     };
+    readonly indeterminateKeys: PropType<Key[]>;
+    readonly onUpdateIndeterminateKeys: PropType<MaybeArray<(value: Key[]) => void>>;
+    readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<(value: Key[]) => void>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<(value: Key[]) => void>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<(value: Key[]) => void>>;
     readonly bordered: {
@@ -161,6 +164,14 @@ declare const props: {
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -201,16 +212,9 @@ declare const props: {
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -294,6 +298,14 @@ declare const props: {
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -334,16 +346,9 @@ declare const props: {
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -427,6 +432,14 @@ declare const props: {
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -467,16 +480,9 @@ declare const props: {
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -529,6 +535,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
     };
+    readonly indeterminateKeys: PropType<Key[]>;
+    readonly onUpdateIndeterminateKeys: PropType<MaybeArray<(value: Key[]) => void>>;
+    readonly 'onUpdate:indeterminateKeys': PropType<MaybeArray<(value: Key[]) => void>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<(value: Key[]) => void>>;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<(value: Key[]) => void>>;
     readonly bordered: {
@@ -652,6 +661,14 @@ declare const _default: import("vue").DefineComponent<{
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -692,16 +709,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -785,6 +795,14 @@ declare const _default: import("vue").DefineComponent<{
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -825,16 +843,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -918,6 +929,14 @@ declare const _default: import("vue").DefineComponent<{
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -958,16 +977,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1029,8 +1041,8 @@ declare const _default: import("vue").DefineComponent<{
     handleMenuLeave: () => void;
     handleTriggerClick: () => void;
     handleMenuClickoutside: (e: MouseEvent) => void;
-    handleUpdateSelectedKeys: (keys: Key[]) => void;
     handleUpdateCheckedKeys: (keys: Key[]) => void;
+    handleUpdateIndeterminateKeys: (keys: Key[]) => void;
     handleTriggerFocus: (e: FocusEvent) => void;
     handleTriggerBlur: (e: FocusEvent) => void;
     handleMenuFocusin: (e: FocusEvent) => void;
@@ -1216,6 +1228,14 @@ declare const _default: import("vue").DefineComponent<{
                 iconSizeHuge: string;
             }, any>;
             InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+                fontSizeTiny: string;
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                heightTiny: string;
+                heightSmall: string;
+                heightMedium: string;
+                heightLarge: string;
                 borderRadius: string;
                 textColor: string;
                 textColorDisabled: string;
@@ -1256,16 +1276,9 @@ declare const _default: import("vue").DefineComponent<{
                 clearColor: string;
                 clearColorHover: string;
                 clearColorPressed: string;
-                heightTiny: string;
-                heightSmall: string;
-                heightMedium: string;
-                heightLarge: string;
-                fontSizeTiny: string;
-                fontSizeSmall: string;
-                fontSizeMedium: string;
-                fontSizeLarge: string;
                 paddingSingle: string;
                 clearSize: string;
+                arrowSize: string;
             }, {
                 Popover: import("../../_mixins").Theme<"Popover", {
                     fontSize: string;
@@ -1360,6 +1373,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly labelField?: unknown;
     readonly childrenField?: unknown;
     readonly defaultExpandedKeys?: unknown;
+    readonly indeterminateKeys?: unknown;
+    readonly onUpdateIndeterminateKeys?: unknown;
+    readonly 'onUpdate:indeterminateKeys'?: unknown;
     readonly onUpdateExpandedKeys?: unknown;
     readonly 'onUpdate:expandedKeys'?: unknown;
     readonly bordered?: unknown;
@@ -1484,6 +1500,14 @@ declare const _default: import("vue").DefineComponent<{
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -1524,16 +1548,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1617,6 +1634,14 @@ declare const _default: import("vue").DefineComponent<{
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -1657,16 +1682,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1750,6 +1768,14 @@ declare const _default: import("vue").DefineComponent<{
             iconSizeHuge: string;
         }, any>;
         InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+            fontSizeTiny: string;
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            heightTiny: string;
+            heightSmall: string;
+            heightMedium: string;
+            heightLarge: string;
             borderRadius: string;
             textColor: string;
             textColorDisabled: string;
@@ -1790,16 +1816,9 @@ declare const _default: import("vue").DefineComponent<{
             clearColor: string;
             clearColorHover: string;
             clearColorPressed: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
             paddingSingle: string;
             clearSize: string;
+            arrowSize: string;
         }, {
             Popover: import("../../_mixins").Theme<"Popover", {
                 fontSize: string;
@@ -1826,6 +1845,9 @@ declare const _default: import("vue").DefineComponent<{
     expandedKeys?: Key[] | undefined;
     "onUpdate:expandedKeys"?: MaybeArray<(value: Key[]) => void> | undefined;
     onUpdateExpandedKeys?: MaybeArray<(value: Key[]) => void> | undefined;
+    indeterminateKeys?: Key[] | undefined;
+    onUpdateIndeterminateKeys?: MaybeArray<(value: Key[]) => void> | undefined;
+    "onUpdate:indeterminateKeys"?: MaybeArray<(value: Key[]) => void> | undefined;
 }>, {
     show: boolean | undefined;
     separator: string;

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

@@ -117,7 +117,7 @@ export default defineComponent({
                 ? initMergedValue[initMergedValue.length - 1]
                 : null);
         const mergedCascadeRef = computed(() => {
-            return props.multiple && props.cascade;
+            return props.multiple && props.cascade && props.checkable;
         });
         // The same logic as tree, now it's not that complex so I don't extract a
         // function to reuse it.
@@ -136,21 +136,9 @@ export default defineComponent({
         const treeSelectedKeysRef = computed(() => {
             if (props.checkable)
                 return [];
-            const { value: mergedValue } = mergedValueRef;
-            const { multiple } = props;
-            return Array.isArray(mergedValue)
-                ? multiple
-                    ? mergedValue
-                    : []
-                : multiple
-                    ? []
-                    : mergedValue === null
-                        ? []
-                        : [mergedValue];
+            return treeCheckedKeysRef.value;
         });
         const treeCheckedKeysRef = computed(() => {
-            if (!props.checkable)
-                return [];
             const { value: mergedValue } = mergedValueRef;
             if (props.multiple) {
                 if (Array.isArray(mergedValue))
@@ -226,16 +214,26 @@ export default defineComponent({
                 call(_onUpdateShow, value);
             uncontrolledShowRef.value = value;
         }
-        function doUpdateValue(value) {
+        function doUpdateValue(value, option) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
             if (onUpdateValue)
-                call(onUpdateValue, value);
-            if (_onUpdateValue)
-                call(_onUpdateValue, value);
+                call(onUpdateValue, value, option);
+            if (_onUpdateValue) {
+                call(_onUpdateValue, value, option);
+            }
             uncontrolledValueRef.value = value;
             nTriggerFormInput();
             nTriggerFormChange();
         }
+        function doUpdateIndeterminateKeys(value, option) {
+            const { onUpdateIndeterminateKeys, 'onUpdate:indeterminateKeys': _onUpdateIndeterminateKeys } = props;
+            if (onUpdateIndeterminateKeys) {
+                call(onUpdateIndeterminateKeys, value, option);
+            }
+            if (_onUpdateIndeterminateKeys) {
+                call(_onUpdateIndeterminateKeys, value, option);
+            }
+        }
         function doUpdateExpandedKeys(keys) {
             const { onUpdateExpandedKeys, 'onUpdate:expandedKeys': _onUpdateExpandedKeys } = props;
             if (onUpdateExpandedKeys)
@@ -294,16 +292,19 @@ export default defineComponent({
                 }
             }
         }
-        function handleUpdateSelectedKeys(keys) {
-            var _a;
-            if (props.checkable && props.multiple) {
-                return;
-            }
+        function getOptionsByKeys(keys) {
+            const { value: { getNode } } = dataTreeMateRef;
+            return keys.map((key) => { var _a; return ((_a = getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode) || null; });
+        }
+        function handleUpdateCheckedKeys(keys) {
+            const options = getOptionsByKeys(keys);
             if (props.multiple) {
-                doUpdateValue(keys);
+                doUpdateValue(keys, options);
             }
             else {
-                doUpdateValue((_a = keys[0]) !== null && _a !== void 0 ? _a : null);
+                keys.length
+                    ? doUpdateValue(keys[0], options[0] || null)
+                    : doUpdateValue(null, null);
                 closeMenu();
                 if (!props.filterable) {
                     // Currently it is not necessary. However if there is an action slot,
@@ -316,14 +317,9 @@ export default defineComponent({
                 patternRef.value = '';
             }
         }
-        function handleUpdateCheckedKeys(keys) {
-            // only in checkable & multiple mode, we use tree's check update
-            if (props.checkable && props.multiple) {
-                doUpdateValue(keys);
-                if (props.filterable) {
-                    focusSelectionInput();
-                    patternRef.value = '';
-                }
+        function handleUpdateIndeterminateKeys(keys) {
+            if (props.checkable) {
+                doUpdateIndeterminateKeys(keys, getOptionsByKeys(keys));
             }
         }
         function handleTriggerFocus(e) {
@@ -365,10 +361,10 @@ export default defineComponent({
                 closeMenu();
             }
             if (multiple) {
-                doUpdateValue([]);
+                doUpdateValue([], []);
             }
             else {
-                doUpdateValue(null);
+                doUpdateValue(null, null);
             }
         }
         function handleDeleteOption(option) {
@@ -381,12 +377,12 @@ export default defineComponent({
                         const { checkedKeys } = dataTreeMateRef.value.uncheck(option.value, mergedValue, {
                             cascade: mergedCascadeRef.value
                         });
-                        doUpdateValue(checkedKeys);
+                        doUpdateValue(checkedKeys, getOptionsByKeys(checkedKeys));
                     }
                     else {
                         const nextValue = Array.from(mergedValue);
                         nextValue.splice(index, 1);
-                        doUpdateValue(nextValue);
+                        doUpdateValue(nextValue, getOptionsByKeys(nextValue));
                     }
                 }
             }
@@ -504,8 +500,8 @@ export default defineComponent({
             handleMenuLeave,
             handleTriggerClick,
             handleMenuClickoutside,
-            handleUpdateSelectedKeys,
             handleUpdateCheckedKeys,
+            handleUpdateIndeterminateKeys,
             handleTriggerFocus,
             handleTriggerBlur,
             handleMenuFocusin,
@@ -545,8 +541,8 @@ export default defineComponent({
                                     return null;
                                 const { mergedClsPrefix, filteredTreeInfo, checkable, multiple } = this;
                                 return withDirectives(h("div", { class: `${mergedClsPrefix}-tree-select-menu`, ref: "menuElRef", style: this.cssVars, tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout },
-                                    filteredTreeInfo.filteredTree.length ? (h(NTree, { ref: "treeInstRef", blockLine: true, animated: false, data: filteredTreeInfo.filteredTree, cancelable: multiple, labelField: this.labelField, 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, internalCheckStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, virtualScroll: this.consistentMenuWidth &&
-                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalCheckOnSelect: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys, onUpdateSelectedKeys: this.handleUpdateSelectedKeys })) : (h("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` },
+                                    filteredTreeInfo.filteredTree.length ? (h(NTree, { ref: "treeInstRef", blockLine: true, animated: false, data: filteredTreeInfo.filteredTree, cancelable: multiple, labelField: this.labelField, 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, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : (h("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` },
                                         h(NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))),
                                     h(NBaseFocusDetector, { onFocus: this.handleTabOut })), [[clickoutside, this.handleMenuClickoutside]]);
                             }