naive-ui 2.32.0 → 2.32.2

package/es/transfer/src/TransferListItem.d.ts

@@ -195,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorHover: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;

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

@@ -7,7 +7,7 @@ export interface Option {
     value: OptionValue;
     disabled?: boolean;
 }
-export declare type Filter = (pattern: string, option: Option) => boolean;
+export declare type Filter = (pattern: string, option: Option, from: 'source' | 'target') => boolean;
 export interface RenderLabelProps {
     option: Option;
 }

package/es/transfer/src/use-transfer-data.d.ts

@@ -3,21 +3,28 @@ interface UseTransferDataProps {
     defaultValue: OptionValue[] | null;
     value?: OptionValue[] | null;
     options: Option[];
-    filterable: boolean;
+    filterable: boolean | undefined;
+    sourceFilterable: Boolean;
+    targetFilterable: Boolean;
     filter: Filter;
 }
 export declare function useTransferData(props: UseTransferDataProps): {
     uncontrolledValueRef: import("vue").Ref<OptionValue[] | null>;
     mergedValueRef: import("vue").ComputedRef<OptionValue[] | null>;
     targetValueSetRef: import("vue").ComputedRef<Set<OptionValue>>;
-    valueSetForSelectAllRef: import("vue").ComputedRef<Set<OptionValue>>;
-    valueSetForUnselectAllRef: import("vue").ComputedRef<Set<OptionValue>>;
-    targetOptionsRef: import("vue").ComputedRef<Option[]>;
+    valueSetForCheckAllRef: import("vue").ComputedRef<Set<string | number>>;
+    valueSetForUncheckAllRef: import("vue").ComputedRef<Set<string | number>>;
+    valueSetForClearRef: import("vue").ComputedRef<Set<string | number>>;
+    filteredTgtOptionsRef: import("vue").ComputedRef<Option[]>;
     filteredSrcOptionsRef: import("vue").ComputedRef<Option[]>;
+    targetOptionsRef: import("vue").ComputedRef<Option[]>;
     canNotSelectAnythingRef: import("vue").ComputedRef<boolean>;
     canBeClearedRef: import("vue").ComputedRef<boolean>;
     allCheckedRef: import("vue").ComputedRef<boolean>;
     srcPatternRef: import("vue").Ref<string>;
+    tgtPatternRef: import("vue").Ref<string>;
+    mergedSrcFilterableRef: import("vue").ComputedRef<Boolean>;
     handleSrcFilterUpdateValue: (value: string | null) => void;
+    handleTgtFilterUpdateValue: (value: string | null) => void;
 };
 export {};

package/es/transfer/src/use-transfer-data.js

@@ -12,14 +12,31 @@ export function useTransferData(props) {
     const targetValueSetRef = computed(() => new Set(mergedValueRef.value || []));
     const targetOptionsRef = computed(() => {
         const optionMap = optionsMapRef.value;
-        return (mergedValueRef.value || []).map((v) => optionMap.get(v));
+        const targetOptions = [];
+        (mergedValueRef.value || []).forEach((v) => {
+            const option = optionMap.get(v);
+            if (option) {
+                targetOptions.push(option);
+            }
+        });
+        return targetOptions;
     });
     const srcPatternRef = ref('');
+    const tgtPatternRef = ref('');
+    const mergedSrcFilterableRef = computed(() => {
+        return props.sourceFilterable || !!props.filterable;
+    });
     const filteredSrcOptionsRef = computed(() => {
-        if (!props.filterable)
+        if (!mergedSrcFilterableRef.value)
             return props.options;
         const { filter } = props;
-        return props.options.filter((opt) => filter(srcPatternRef.value, opt));
+        return props.options.filter((opt) => filter(srcPatternRef.value, opt, 'source'));
+    });
+    const filteredTgtOptionsRef = computed(() => {
+        if (!props.targetFilterable)
+            return targetOptionsRef.value;
+        const { filter } = props;
+        return targetOptionsRef.value.filter((opt) => filter(tgtPatternRef.value, opt, 'target'));
     });
     const mergedValueSetRef = computed(() => {
         const { value } = mergedValueRef;
@@ -27,15 +44,33 @@ export function useTransferData(props) {
             return new Set();
         return new Set(value);
     });
-    const valueSetForSelectAllRef = computed(() => {
-        const mergedValueSet = mergedValueSetRef.value;
-        return new Set(filteredSrcOptionsRef.value
-            .filter((option) => !option.disabled || mergedValueSet.has(option.value))
-            .map((option) => option.value));
+    const valueSetForCheckAllRef = computed(() => {
+        const values = new Set(mergedValueSetRef.value);
+        filteredSrcOptionsRef.value.forEach((option) => {
+            if (!option.disabled && !values.has(option.value)) {
+                values.add(option.value);
+            }
+        });
+        return values;
+    });
+    const valueSetForUncheckAllRef = computed(() => {
+        const values = new Set(mergedValueSetRef.value);
+        filteredSrcOptionsRef.value.forEach((option) => {
+            if (!option.disabled && values.has(option.value)) {
+                values.delete(option.value);
+            }
+        });
+        return values;
+    });
+    const valueSetForClearRef = computed(() => {
+        const values = new Set(mergedValueSetRef.value);
+        filteredTgtOptionsRef.value.forEach((option) => {
+            if (!option.disabled) {
+                values.delete(option.value);
+            }
+        });
+        return values;
     });
-    const valueSetForUnselectAllRef = computed(() => new Set(targetOptionsRef.value
-        .filter((option) => option.disabled)
-        .map((option) => option.value)));
     const canNotSelectAnythingRef = computed(() => {
         return filteredSrcOptionsRef.value.every((option) => option.disabled);
     });
@@ -47,23 +82,31 @@ export function useTransferData(props) {
         return filteredSrcOptionsRef.value.every((option) => option.disabled || mergedValueSet.has(option.value));
     });
     const canBeClearedRef = computed(() => {
-        return targetOptionsRef.value.some((option) => !option.disabled);
+        return filteredTgtOptionsRef.value.some((option) => !option.disabled);
     });
     function handleSrcFilterUpdateValue(value) {
         srcPatternRef.value = value !== null && value !== void 0 ? value : '';
     }
+    function handleTgtFilterUpdateValue(value) {
+        tgtPatternRef.value = value !== null && value !== void 0 ? value : '';
+    }
     return {
         uncontrolledValueRef,
         mergedValueRef,
         targetValueSetRef,
-        valueSetForSelectAllRef,
-        valueSetForUnselectAllRef,
-        targetOptionsRef,
+        valueSetForCheckAllRef,
+        valueSetForUncheckAllRef,
+        valueSetForClearRef,
+        filteredTgtOptionsRef,
         filteredSrcOptionsRef,
+        targetOptionsRef,
         canNotSelectAnythingRef,
         canBeClearedRef,
         allCheckedRef,
         srcPatternRef,
-        handleSrcFilterUpdateValue
+        tgtPatternRef,
+        mergedSrcFilterableRef,
+        handleSrcFilterUpdateValue,
+        handleTgtFilterUpdateValue
     };
 }

package/es/transfer/styles/light.d.ts

@@ -108,6 +108,7 @@ declare const transferLight: import("../../_mixins").Theme<"Transfer", {
         colorHover: string;
     }, any>;
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

package/es/tree/index.d.ts

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

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

@@ -3,7 +3,7 @@ import { TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 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 function createTreeMateOptions<T>(keyField: string, childrenField: string, disabledField: string): TreeMateOptions<T, T, T>;
 export declare type OnUpdateKeys = (value: Array<string & number>, option: Array<TreeOption | null>) => void;
 export declare type OnUpdateKeysImpl = (value: Key[], option: Array<TreeOption | null>) => void;
 declare type OnLoad = (node: TreeOption) => Promise<void>;
@@ -24,6 +24,10 @@ export declare const treeSharedProps: {
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -74,6 +78,10 @@ export declare const treeProps: {
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -154,6 +162,10 @@ export declare const treeProps: {
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly nodeProps: PropType<TreeNodeProps>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -382,6 +394,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -462,6 +478,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly nodeProps: PropType<TreeNodeProps>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1109,6 +1129,9 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterEnter: () => void;
     handleResize: () => void;
     handleKeydown: (e: KeyboardEvent) => void;
+    scrollTo: (options: {
+        key: Key;
+    }) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-arrow-color': string;
         '--n-loading-color': string;
@@ -1163,6 +1186,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -1243,6 +1270,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => VNodeChild>;
     readonly nodeProps: PropType<TreeNodeProps>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1447,8 +1478,10 @@ declare const _default: import("vue").DefineComponent<{
     readonly allowCheckingNotLoaded: boolean;
     readonly cascade: boolean;
     readonly indent: number;
+    readonly keyboard: boolean;
     readonly internalScrollable: boolean;
     readonly checkStrategy: CheckStrategy;
+    readonly disabledField: string;
     readonly leafOnly: boolean;
     readonly accordion: boolean;
     readonly defaultExpandedKeys: Key[];

package/es/tree/src/Tree.js

@@ -30,8 +30,11 @@ import { NEmpty } from '../../empty';
 // During expanding, some node are mis-applied with :active style
 // Async dnd has bug
 const ITEM_SIZE = 30; // 24 + 3 + 3
-export function createTreeMateOptions(keyField, childrenField) {
+export function createTreeMateOptions(keyField, childrenField, disabledField) {
     return {
+        getIsGroup() {
+            return false;
+        },
         getKey(node) {
             return node[keyField];
         },
@@ -39,7 +42,7 @@ export function createTreeMateOptions(keyField, childrenField) {
             return node[childrenField];
         },
         getDisabled(node) {
-            return !!(node.disabled || node.checkboxDisabled);
+            return !!(node[disabledField] || node.checkboxDisabled);
         }
     };
 }
@@ -60,6 +63,10 @@ export const treeSharedProps = {
         type: String,
         default: 'children'
     },
+    disabledField: {
+        type: String,
+        default: 'disabled'
+    },
     defaultExpandedKeys: {
         type: Array,
         default: () => []
@@ -107,7 +114,10 @@ export const treeProps = Object.assign(Object.assign(Object.assign(Object.assign
     }, checkboxPlacement: {
         type: String,
         default: 'left'
-    }, 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), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, nodeProps: Function, keyboard: {
+        type: Boolean,
+        default: true
+    }, 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
@@ -172,7 +182,7 @@ export default defineComponent({
         // We don't expect data source to change so we just determine it once
         const displayTreeMateRef = computed(() => createTreeMate(props.showIrrelevantNodes
             ? props.data
-            : filteredTreeInfoRef.value.filteredTree, createTreeMateOptions(props.keyField, props.childrenField)));
+            : filteredTreeInfoRef.value.filteredTree, createTreeMateOptions(props.keyField, props.childrenField, props.disabledField)));
         const treeSelectInjection = inject(treeSelectInjectionKey, null);
         const dataTreeMateRef = props.internalTreeSelect
             ? treeSelectInjection.dataTreeMate
@@ -237,6 +247,7 @@ export default defineComponent({
         const mergedExpandedKeysRef = useMergedState(controlledExpandedKeysRef, uncontrolledExpandedKeysRef);
         const fNodesRef = computed(() => displayTreeMateRef.value.getFlattenedNodes(mergedExpandedKeysRef.value));
         const { pendingNodeKeyRef, handleKeydown } = useKeyboard({
+            props,
             mergedSelectedKeysRef,
             fNodesRef,
             mergedExpandedKeysRef,
@@ -1072,8 +1083,13 @@ export default defineComponent({
             handleSelect,
             handleCheck
         });
+        function scrollTo(options) {
+            var _a;
+            (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(options);
+        }
         const exposedMethods = {
-            handleKeydown
+            handleKeydown,
+            scrollTo
         };
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
@@ -1111,6 +1127,7 @@ export default defineComponent({
             handleAfterEnter,
             handleResize,
             handleKeydown: exposedMethods.handleKeydown,
+            scrollTo: exposedMethods.scrollTo,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -1164,12 +1181,9 @@ export default defineComponent({
         }
         else {
             return (h("div", { class: treeClass, tabindex: tabindex, ref: "selfElRef", style: this.cssVars, onKeydown: mergedFocusable ? handleKeydown : undefined, onFocusout: mergedFocusable ? handleFocusout : undefined, onDragleave: draggable ? this.handleDragLeaveTree : undefined }, !fNodes.length
-                ? resolveSlot(this.$slots.empty, () => {
-                    var _a, _b, _c, _d;
-                    return [
-                        h(NEmpty, { class: `${mergedClsPrefix}-tree__empty`, theme: (_b = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.peers) === null || _b === void 0 ? void 0 : _b.Empty, themeOverrides: (_d = (_c = this.themeOverrides) === null || _c === void 0 ? void 0 : _c.peers) === null || _d === void 0 ? void 0 : _d.Empty })
-                    ];
-                })
+                ? resolveSlot(this.$slots.empty, () => [
+                    h(NEmpty, { class: `${mergedClsPrefix}-tree__empty`, theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+                ])
                 : fNodes.map(createNode)));
         }
     }

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

@@ -114,4 +114,9 @@ export interface MotionData {
 export interface InternalTreeInst {
     handleKeydown: (e: KeyboardEvent) => void;
 }
+export interface TreeInst {
+    scrollTo: (options: {
+        key: Key;
+    }) => void;
+}
 export {};

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

@@ -1,7 +1,10 @@
 import { Ref } from 'vue';
 import { TreeNode } from 'treemate';
 import { Key, TmNode, TreeOption } from './interface';
-export declare function useKeyboard({ fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, handleSelect, handleSwitcherClick }: {
+export declare function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, handleSelect, handleSwitcherClick }: {
+    props: {
+        keyboard: boolean;
+    };
     fNodesRef: Ref<Array<TreeNode<TreeOption>>>;
     mergedExpandedKeysRef: Ref<Key[]>;
     mergedSelectedKeysRef: Ref<Key[]>;

package/es/tree/src/keyboard.js

@@ -1,6 +1,6 @@
 import { inject, ref } from 'vue';
 import { treeSelectInjectionKey } from '../../tree-select/src/interface';
-export function useKeyboard({ fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, handleSelect, handleSwitcherClick }) {
+export function useKeyboard({ props, fNodesRef, mergedExpandedKeysRef, mergedSelectedKeysRef, handleSelect, handleSwitcherClick }) {
     const { value: mergedSelectedKeys } = mergedSelectedKeysRef;
     // If it's used in tree-select, make it take over pending state
     const treeSelectInjection = inject(treeSelectInjectionKey, null);
@@ -10,6 +10,8 @@ export function useKeyboard({ fNodesRef, mergedExpandedKeysRef, mergedSelectedKe
             ? mergedSelectedKeys[mergedSelectedKeys.length - 1]
             : null);
     function handleKeydown(e) {
+        if (!props.keyboard)
+            return;
         const { value: pendingNodeKey } = pendingNodeKeyRef;
         if (pendingNodeKey === null) {
             if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {

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

@@ -39,6 +39,10 @@ export declare const treeSelectProps: {
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -602,6 +606,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -1567,6 +1575,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly disabledField: {
+        readonly type: StringConstructor;
+        readonly default: "disabled";
+    };
     readonly defaultExpandedKeys: {
         readonly type: PropType<Key[]>;
         readonly default: () => never[];
@@ -2121,6 +2133,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly allowCheckingNotLoaded: boolean;
     readonly cascade: boolean;
     readonly checkStrategy: CheckStrategy;
+    readonly disabledField: string;
     readonly leafOnly: boolean;
     readonly showPath: boolean;
     readonly defaultExpandedKeys: Key[];

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

@@ -3,7 +3,7 @@ import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { clickoutside } from 'vdirs';
 import { createTreeMate } from 'treemate';
-import { happensIn } from 'seemly';
+import { getPreciseEventTarget, happensIn } from 'seemly';
 import { createTreeMateOptions, treeSharedProps } from '../../tree/src/Tree';
 import { NInternalSelection, NBaseFocusDetector } from '../../_internal';
 import { NTree } from '../../tree';
@@ -91,7 +91,7 @@ export default defineComponent({
             };
         });
         // used to resolve selected options
-        const dataTreeMateRef = computed(() => createTreeMate(props.options, createTreeMateOptions(props.keyField, props.childrenField)));
+        const dataTreeMateRef = computed(() => createTreeMate(props.options, createTreeMateOptions(props.keyField, props.childrenField, props.disabledField)));
         const { value: initMergedValue } = mergedValueRef;
         const pendingNodeKeyRef = ref(props.checkable
             ? null
@@ -258,7 +258,7 @@ export default defineComponent({
         function handleMenuClickoutside(e) {
             var _a;
             if (mergedShowRef.value) {
-                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(e.target))) {
+                if (!((_a = triggerInstRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(getPreciseEventTarget(e)))) {
                     // outside select, don't need to return focus
                     closeMenu();
                 }
@@ -550,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, 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(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, disabledField: this.disabledField, 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/typography/styles/light.js

@@ -2,7 +2,7 @@ import commonVars from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     const { primaryColor, textColor2, borderColor, lineHeight, fontSize, borderRadiusSmall, dividerColor, fontWeightStrong, textColor1, textColor3, infoColor, warningColor, errorColor, successColor, codeColor } = vars;
-    return Object.assign(Object.assign({}, commonVars), { aTextColor: primaryColor, blockquoteTextColor: textColor2, blockquotePrefixColor: borderColor, blockquoteLineHeight: lineHeight, blockquoteFontSize: fontSize, codeBorderRadius: borderRadiusSmall, liTextColor: textColor2, liLineHeight: lineHeight, liFontSize: fontSize, hrColor: dividerColor, headerFontWeight: fontWeightStrong, headerTextColor: textColor1, pTextColor: textColor2, pTextColor1Depth: textColor1, pTextColor2Depth: textColor2, pTextColor3Depth: textColor3, pLineHeight: lineHeight, pFontSize: fontSize, headerBarColor: primaryColor, headerBarColorPrimary: primaryColor, headerBarColorInfo: infoColor, headerBarColorError: errorColor, headerBarColorWarning: warningColor, headerBarColorSuccess: successColor, textColor: textColor2, textColor1Depth: textColor1, textColor2Depth: textColor2, textColor3Depth: textColor3, textColorPrimary: primaryColor, textColorInfo: infoColor, textColorSuccess: successColor, textColorWarning: warningColor, textColorError: errorColor, codeTextColor: textColor2, codeColor: codeColor, codeBorder: '1px solid #0000' });
+    return Object.assign(Object.assign({}, commonVars), { aTextColor: primaryColor, blockquoteTextColor: textColor2, blockquotePrefixColor: borderColor, blockquoteLineHeight: lineHeight, blockquoteFontSize: fontSize, codeBorderRadius: borderRadiusSmall, liTextColor: textColor2, liLineHeight: lineHeight, liFontSize: fontSize, hrColor: dividerColor, headerFontWeight: fontWeightStrong, headerTextColor: textColor1, pTextColor: textColor2, pTextColor1Depth: textColor1, pTextColor2Depth: textColor2, pTextColor3Depth: textColor3, pLineHeight: lineHeight, pFontSize: fontSize, headerBarColor: primaryColor, headerBarColorPrimary: primaryColor, headerBarColorInfo: infoColor, headerBarColorError: errorColor, headerBarColorWarning: warningColor, headerBarColorSuccess: successColor, textColor: textColor2, textColor1Depth: textColor1, textColor2Depth: textColor2, textColor3Depth: textColor3, textColorPrimary: primaryColor, textColorInfo: infoColor, textColorSuccess: successColor, textColorWarning: warningColor, textColorError: errorColor, codeTextColor: textColor2, codeColor, codeBorder: '1px solid #0000' });
 };
 const typographyLight = {
     name: 'Typography',

package/es/upload/src/Upload.d.ts

@@ -258,6 +258,7 @@ export declare const uploadProps: {
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -503,6 +504,7 @@ export declare const uploadProps: {
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -748,6 +750,7 @@ export declare const uploadProps: {
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -1076,6 +1079,7 @@ declare const _default: import("vue").DefineComponent<{
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -1321,6 +1325,7 @@ declare const _default: import("vue").DefineComponent<{
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -1566,6 +1571,7 @@ declare const _default: import("vue").DefineComponent<{
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -1927,6 +1933,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledWarning: string;
                 rippleColorWarning: string;
                 colorError: string;
+                /** currently not used */
                 colorHoverError: string;
                 colorPressedError: string;
                 colorFocusError: string;
@@ -2272,6 +2279,7 @@ declare const _default: import("vue").DefineComponent<{
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -2517,6 +2525,7 @@ declare const _default: import("vue").DefineComponent<{
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;
@@ -2762,6 +2771,7 @@ declare const _default: import("vue").DefineComponent<{
             borderDisabledWarning: string;
             rippleColorWarning: string;
             colorError: string;
+            /** currently not used */
             colorHoverError: string;
             colorPressedError: string;
             colorFocusError: string;

package/es/upload/src/Upload.js

@@ -293,7 +293,7 @@ export default defineComponent({
                     name: file.name,
                     status: 'pending',
                     percentage: 0,
-                    file: file,
+                    file,
                     url: null,
                     type: file.type,
                     thumbnailUrl: null,

package/es/upload/src/UploadFile.js

@@ -17,7 +17,7 @@ import { warn } from '../../_utils';
 import NUploadProgress from './UploadProgress';
 import { uploadInjectionKey } from './interface';
 import { imageIcon, documentIcon } from './icons';
-import { environmentSupportFile, isImageFile } from './utils';
+import { download, environmentSupportFile, isImageFile } from './utils';
 const buttonThemeOverrides = {
     paddingMedium: '0 3px',
     heightMedium: '24px',
@@ -139,7 +139,9 @@ export default defineComponent({
         function handleDownload(file) {
             const { onDownloadRef: { value: onDownload } } = NUpload;
             void Promise.resolve(onDownload ? onDownload(Object.assign({}, file)) : true).then((res) => {
-                /** I haven't figure out its usage, so just leave it here */
+                if (res !== false) {
+                    download(file.url, file.name);
+                }
             });
         }
         function handleAbort(file) {

package/es/upload/src/utils.d.ts

@@ -16,3 +16,4 @@ export declare function createSettledFileInfo(fileInfo: FileInfo): SettledFileIn
  * version, so I can't simply use it.
  */
 export declare function matchType(name: string, mimeType: string, accept: string): boolean;
+export declare const download: (url: string | null, name: string | undefined) => void;

package/es/upload/src/utils.js

@@ -151,3 +151,15 @@ export function matchType(name, mimeType, accept) {
         return false;
     });
 }
+export const download = (url, name) => {
+    if (!url)
+        return;
+    const a = document.createElement('a');
+    a.href = url;
+    if (name !== undefined) {
+        a.download = name;
+    }
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+};