naive-ui 2.20.0 → 2.21.0

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

@@ -1,10 +1,11 @@
 import { PropType } from 'vue';
 import { TreeMate, TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { TreeDragInfo, TreeOptions, Key, TreeOption, AllowDrop } from './interface';
+import { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop } from './interface';
 import { defaultAllowDrop } from './dnd';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string): TreeMateOptions<T, T, T>;
 declare type OnUpdateKeys = (value: Key[], option: Array<TreeOption | null>) => void;
+declare type OnLoad = (node: TreeOption) => Promise<void>;
 export declare const treeSharedProps: {
     readonly filter: PropType<(pattern: string, node: TreeOption) => boolean>;
     readonly defaultExpandAll: BooleanConstructor;
@@ -109,7 +110,7 @@ declare const treeProps: {
         readonly type: StringConstructor;
         readonly default: "";
     };
-    readonly onLoad: PropType<(node: TreeOption) => Promise<void>>;
+    readonly onLoad: PropType<OnLoad>;
     readonly cascade: BooleanConstructor;
     readonly selectable: {
         readonly type: BooleanConstructor;
@@ -136,7 +137,7 @@ declare const treeProps: {
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragstart: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragover: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDrop: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
+    readonly onDrop: PropType<MaybeArray<(e: TreeDropInfo) => void>>;
     readonly onUpdateCheckedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:checkedKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateSelectedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -356,7 +357,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "";
     };
-    readonly onLoad: PropType<(node: TreeOption) => Promise<void>>;
+    readonly onLoad: PropType<OnLoad>;
     readonly cascade: BooleanConstructor;
     readonly selectable: {
         readonly type: BooleanConstructor;
@@ -383,7 +384,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragstart: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragover: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
-    readonly onDrop: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
+    readonly onDrop: PropType<MaybeArray<(e: TreeDropInfo) => void>>;
     readonly onUpdateCheckedKeys: PropType<MaybeArray<OnUpdateKeys>>;
     readonly 'onUpdate:checkedKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateSelectedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -600,6 +601,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -1046,8 +1050,8 @@ declare const _default: import("vue").DefineComponent<{
     internalScrollable: boolean;
     checkStrategy: CheckStrategy;
     leafOnly: boolean;
-    defaultExpandAll: boolean;
     defaultExpandedKeys: Key[];
+    defaultExpandAll: boolean;
     cancelable: boolean;
     blockLine: boolean;
     selectable: boolean;
@@ -1067,8 +1071,8 @@ declare const _default: import("vue").DefineComponent<{
     onDragleave?: MaybeArray<(e: TreeDragInfo) => void> | undefined;
     onDragover?: MaybeArray<(e: TreeDragInfo) => void> | undefined;
     onDragstart?: MaybeArray<(e: TreeDragInfo) => void> | undefined;
-    onDrop?: MaybeArray<(e: TreeDragInfo) => void> | undefined;
-    onLoad?: ((node: TreeOption) => Promise<void>) | undefined;
+    onDrop?: MaybeArray<(e: TreeDropInfo) => void> | undefined;
+    onLoad?: OnLoad | undefined;
     theme?: import("../../_mixins").Theme<"Tree", {
         fontSize: string;
         nodeBorderRadius: string;
@@ -1241,8 +1245,8 @@ declare const _default: import("vue").DefineComponent<{
     internalScrollable: boolean;
     checkStrategy: CheckStrategy;
     leafOnly: boolean;
-    defaultExpandAll: boolean;
     defaultExpandedKeys: Key[];
+    defaultExpandAll: boolean;
     cancelable: boolean;
     blockLine: boolean;
     selectable: boolean;

package/es/tree/src/Tree.js

@@ -1,5 +1,14 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { h, ref, toRef, computed, defineComponent, provide, watch, nextTick } from 'vue';
+import { h, ref, toRef, computed, defineComponent, provide, watch, nextTick, watchEffect } from 'vue';
 import { createTreeMate, flatten, createIndexGetter } from 'treemate';
 import { useMergedState } from 'vooks';
 import { VVirtualList } from 'vueuc';
@@ -169,7 +178,10 @@ export default defineComponent({
         const uncontrolledHighlightKeySetRef = ref(new Set());
         const controlledHighlightKeySetRef = toRef(props, 'internalHighlightKeySet');
         const mergedHighlightKeySetRef = useMergedState(controlledHighlightKeySetRef, uncontrolledHighlightKeySetRef);
-        const loadingKeysRef = ref([]);
+        const loadingKeysRef = ref(new Set());
+        const expandedNonLoadingKeysRef = computed(() => {
+            return mergedExpandedKeysRef.value.filter((key) => !loadingKeysRef.value.has(key));
+        });
         let dragStartX = 0;
         const draggingNodeRef = ref(null);
         const droppingNodeRef = ref(null);
@@ -201,7 +213,7 @@ export default defineComponent({
         });
         // shallow watch data
         watch(toRef(props, 'data'), () => {
-            loadingKeysRef.value = [];
+            loadingKeysRef.value.clear();
             pendingNodeKeyRef.value = null;
             resetDndState();
         }, {
@@ -209,7 +221,7 @@ export default defineComponent({
         });
         watch(toRef(props, 'pattern'), (value) => {
             if (value) {
-                const { expandedKeys: expandedKeysAfterChange, highlightKeySet } = keysWithFilter(props.data, props.pattern, props.keyField, mergedFilterRef.value);
+                const { expandedKeys: expandedKeysAfterChange, highlightKeySet } = keysWithFilter(props.data, props.pattern, props.keyField, props.childrenField, mergedFilterRef.value);
                 uncontrolledHighlightKeySetRef.value = highlightKeySet;
                 doUpdateExpandedKeys(expandedKeysAfterChange, getOptionsByKeys(expandedKeysAfterChange));
             }
@@ -217,6 +229,45 @@ export default defineComponent({
                 uncontrolledHighlightKeySetRef.value = new Set();
             }
         });
+        function triggerLoading(node) {
+            return __awaiter(this, void 0, void 0, function* () {
+                const { onLoad } = props;
+                if (!onLoad) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        warn('tree', 'There is unloaded node in data but props.onLoad is not specified.');
+                    }
+                    return yield Promise.resolve();
+                }
+                const { value: loadingKeys } = loadingKeysRef;
+                return yield new Promise((resolve) => {
+                    if (!loadingKeys.has(node.key)) {
+                        loadingKeys.add(node.key);
+                        onLoad(node.rawNode)
+                            .then(() => {
+                            loadingKeys.delete(node.key);
+                            resolve();
+                        })
+                            .catch((loadError) => {
+                            console.error(loadError);
+                            resetDragExpandState();
+                        });
+                    }
+                });
+            });
+        }
+        watchEffect(() => {
+            var _a;
+            const { value: displayTreeMate } = displayTreeMateRef;
+            if (!displayTreeMate)
+                return;
+            const { getNode } = displayTreeMate;
+            (_a = mergedExpandedKeysRef.value) === null || _a === void 0 ? void 0 : _a.forEach((key) => {
+                const node = getNode(key);
+                if (node && !node.shallowLoaded) {
+                    void triggerLoading(node);
+                }
+            });
+        });
         // animation in progress
         const aipRef = ref(false);
         // animation flattened nodes
@@ -226,7 +277,7 @@ export default defineComponent({
         // during animation. This will seldom cause wired scrollbar status. It is
         // fixable and need some changes in vueuc, I've no time so I just leave it
         // here. Maybe the bug won't be fixed during the life time of the project.
-        watch(mergedExpandedKeysRef, (value, prevValue) => {
+        watch(expandedNonLoadingKeysRef, (value, prevValue) => {
             if (!props.animated) {
                 void nextTick(syncScrollbar);
                 return;
@@ -520,24 +571,9 @@ export default defineComponent({
             };
             if (!node.shallowLoaded) {
                 expandTimerId = window.setTimeout(() => {
-                    const { onLoad } = props;
-                    if (onLoad) {
-                        if (!loadingKeysRef.value.includes(node.key)) {
-                            loadingKeysRef.value.push(node.key);
-                            onLoad(node.rawNode)
-                                .then(() => {
-                                loadingKeysRef.value.splice(loadingKeysRef.value.findIndex((key) => key === node.key), 1);
-                                expand();
-                            })
-                                .catch((loadError) => {
-                                console.error(loadError);
-                                resetDragExpandState();
-                            });
-                        }
-                    }
-                    else if (process.env.NODE_ENV !== 'production') {
-                        warn('tree', 'There is unloaded node in data but props.onLoad is not specified.');
-                    }
+                    void triggerLoading(node).then(() => {
+                        expand();
+                    });
                 }, 1000);
             }
             else {

package/es/tree/src/TreeNode.js

@@ -34,8 +34,8 @@ const TreeNode = defineComponent({
         function handleSwitcherClick() {
             const { tmNode } = props;
             if (NTree.remoteRef.value && !tmNode.isLeaf && !tmNode.shallowLoaded) {
-                if (!NTree.loadingKeysRef.value.includes(tmNode.key)) {
-                    NTree.loadingKeysRef.value.push(tmNode.key);
+                if (!NTree.loadingKeysRef.value.has(tmNode.key)) {
+                    NTree.loadingKeysRef.value.add(tmNode.key);
                 }
                 const { onLoadRef: { value: onLoad } } = NTree;
                 if (onLoad) {
@@ -44,7 +44,7 @@ const TreeNode = defineComponent({
                         NTree.handleSwitcherClick(tmNode);
                     })
                         .finally(() => {
-                        NTree.loadingKeysRef.value.splice(NTree.loadingKeysRef.value.findIndex((key) => key === tmNode.key), 1);
+                        NTree.loadingKeysRef.value.delete(tmNode.key);
                     });
                 }
             }
@@ -137,7 +137,7 @@ const TreeNode = defineComponent({
                 return false;
             }),
             pending: useMemo(() => NTree.pendingNodeKeyRef.value === props.tmNode.key),
-            loading: useMemo(() => NTree.loadingKeysRef.value.includes(props.tmNode.key)),
+            loading: useMemo(() => NTree.loadingKeysRef.value.has(props.tmNode.key)),
             highlight: useMemo(() => NTree.highlightKeySetRef.value.has(props.tmNode.key)),
             checked: useMemo(() => NTree.displayedCheckedKeysRef.value.includes(props.tmNode.key)),
             indeterminate: useMemo(() => NTree.displayedIndeterminateKeysRef.value.includes(props.tmNode.key)),

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

@@ -84,6 +84,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;

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

@@ -17,8 +17,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     hide: boolean;
     expanded: boolean;
-    clsPrefix: string;
     loading: boolean;
+    clsPrefix: string;
 } & {
     onClick?: ((e: MouseEvent) => void) | undefined;
 }>, {

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

@@ -52,7 +52,7 @@ export interface InternalDropInfo {
     dropPosition: DropPosition;
 }
 export interface TreeInjection {
-    loadingKeysRef: Ref<Key[]>;
+    loadingKeysRef: Ref<Set<Key>>;
     highlightKeySetRef: Ref<Set<Key>>;
     displayedCheckedKeysRef: Ref<Key[]>;
     displayedIndeterminateKeysRef: Ref<Key[]>;

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

@@ -1,5 +1,5 @@
 import { Key, TreeOption } from './interface';
-export declare function keysWithFilter(nodes: TreeOption[], pattern: string, keyField: string, filter: (pattern: string, node: TreeOption) => boolean): {
+export declare function keysWithFilter(nodes: TreeOption[], pattern: string, keyField: string, childrenField: string, filter: (pattern: string, node: TreeOption) => boolean): {
     expandedKeys: Key[];
     highlightKeySet: Set<Key>;
 };

package/es/tree/src/utils.js

@@ -1,15 +1,15 @@
-function traverse(nodes, callback, callbackAfter) {
+function traverse(nodes, childrenField, callback, callbackAfter) {
     nodes === null || nodes === void 0 ? void 0 : nodes.forEach((node) => {
         callback(node);
-        traverse(node.children, callback, callbackAfter);
+        traverse(node[childrenField], childrenField, callback, callbackAfter);
         callbackAfter(node);
     });
 }
-export function keysWithFilter(nodes, pattern, keyField, filter) {
+export function keysWithFilter(nodes, pattern, keyField, childrenField, filter) {
     const keys = new Set();
     const highlightKeySet = new Set();
     const path = [];
-    traverse(nodes, (node) => {
+    traverse(nodes, childrenField, (node) => {
         path.push(node);
         if (filter(pattern, node)) {
             highlightKeySet.add(node[keyField]);

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

@@ -1134,6 +1134,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -1422,8 +1425,8 @@ declare const _default: import("vue").DefineComponent<{
     childrenField: string;
     checkStrategy: CheckStrategy;
     showPath: boolean;
-    defaultExpandAll: boolean;
     defaultExpandedKeys: Key[];
+    defaultExpandAll: boolean;
 } & {
     value?: string | number | (string | number)[] | null | undefined;
     filter?: ((pattern: string, node: import("../../tree").TreeOption) => boolean) | undefined;
@@ -1871,7 +1874,7 @@ declare const _default: import("vue").DefineComponent<{
     checkStrategy: CheckStrategy;
     leafOnly: boolean;
     showPath: boolean;
-    defaultExpandAll: boolean;
     defaultExpandedKeys: Key[];
+    defaultExpandAll: boolean;
 }>;
 export default _default;