beyond-webui 1.1.42 → 1.1.43

package/dist/index.full.js

@@ -53105,6 +53105,7 @@
     TreeOptionsEnum2["LABEL"] = "label";
     TreeOptionsEnum2["CHILDREN"] = "children";
     TreeOptionsEnum2["DISABLED"] = "disabled";
+    TreeOptionsEnum2["CLASS"] = "";
     return TreeOptionsEnum2;
   })(TreeOptionsEnum || {});
   var SetOperationEnum = /* @__PURE__ */ ((SetOperationEnum2) => {
@@ -53134,25 +53135,17 @@
         children: "children" /* CHILDREN */,
         label: "label" /* LABEL */,
         disabled: "disabled" /* DISABLED */,
-        value: "id" /* KEY */
+        value: "id" /* KEY */,
+        class: "" /* CLASS */
       })
     },
-    highlightCurrent: {
-      type: Boolean,
-      default: false
-    },
-    showCheckbox: {
-      type: Boolean,
-      default: false
-    },
+    highlightCurrent: Boolean,
+    showCheckbox: Boolean,
     defaultCheckedKeys: {
       type: definePropType(Array),
       default: () => mutable([])
     },
-    checkStrictly: {
-      type: Boolean,
-      default: false
-    },
+    checkStrictly: Boolean,
     defaultExpandedKeys: {
       type: definePropType(Array),
       default: () => mutable([])
@@ -53169,58 +53162,36 @@
       type: Boolean,
       default: true
     },
-    checkOnClickNode: {
+    checkOnClickNode: Boolean,
+    checkOnClickLeaf: {
       type: Boolean,
-      default: false
+      default: true
     },
     currentNodeKey: {
       type: definePropType([String, Number])
     },
-    accordion: {
-      type: Boolean,
-      default: false
-    },
+    accordion: Boolean,
     filterMethod: {
       type: definePropType(Function)
     },
     perfMode: {
       type: Boolean,
       default: true
-    }
+    },
+    scrollbarAlwaysOn: Boolean
   });
   const treeNodeProps = buildProps({
     node: {
       type: definePropType(Object),
       default: () => mutable(EMPTY_NODE)
     },
-    expanded: {
-      type: Boolean,
-      default: false
-    },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    indeterminate: {
-      type: Boolean,
-      default: false
-    },
-    showCheckbox: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    current: {
-      type: Boolean,
-      default: false
-    },
-    hiddenExpandIcon: {
-      type: Boolean,
-      default: false
-    },
+    expanded: Boolean,
+    checked: Boolean,
+    indeterminate: Boolean,
+    showCheckbox: Boolean,
+    disabled: Boolean,
+    current: Boolean,
+    hiddenExpandIcon: Boolean,
     itemSize
   });
   const treeNodeContentProps = buildProps({
@@ -53230,6 +53201,7 @@
     }
   });
   const NODE_CLICK = "node-click";
+  const NODE_DROP = "node-drop";
   const NODE_EXPAND = "node-expand";
   const NODE_COLLAPSE = "node-collapse";
   const CURRENT_CHANGE = "current-change";
@@ -53238,17 +53210,19 @@
   const NODE_CONTEXTMENU = "node-contextmenu";
   const treeEmits = {
     [NODE_CLICK]: (data, node, e) => data && node && e,
+    [NODE_DROP]: (data, node, e) => data && node && e,
     [NODE_EXPAND]: (data, node) => data && node,
     [NODE_COLLAPSE]: (data, node) => data && node,
     [CURRENT_CHANGE]: (data, node) => data && node,
     [NODE_CHECK]: (data, checkedInfo) => data && checkedInfo,
-    [NODE_CHECK_CHANGE]: (data, checked) => data && typeof checked === "boolean",
-    [NODE_CONTEXTMENU]: (event, data, node) => event && data && node
+    [NODE_CHECK_CHANGE]: (data, checked) => data && isBoolean(checked),
+    [NODE_CONTEXTMENU]: (evt, data, node) => evt && data && node
   };
   const treeNodeEmits = {
     click: (node, e) => !!(node && e),
+    drop: (node, e) => !!(node && e),
     toggle: (node) => !!node,
-    check: (node, checked) => node && typeof checked === "boolean"
+    check: (node, checked) => node && isBoolean(checked)
   };
 
   function useCheck(props, tree) {
@@ -53306,7 +53280,7 @@
     };
     const isChecked = (node) => checkedKeys.value.has(node.key);
     const isIndeterminate = (node) => indeterminateKeys.value.has(node.key);
-    const toggleCheckbox = (node, isChecked2, nodeClick = true) => {
+    const toggleCheckbox = (node, isChecked2, nodeClick = true, immediateUpdate = true) => {
       const checkedKeySet = checkedKeys.value;
       const toggle = (node2, checked) => {
         checkedKeySet[checked ? SetOperationEnum.ADD : SetOperationEnum.DELETE](node2.key);
@@ -53320,7 +53294,9 @@
         }
       };
       toggle(node, isChecked2);
-      updateCheckedKeys();
+      if (immediateUpdate) {
+        updateCheckedKeys();
+      }
       if (nodeClick) {
         afterNodeCheck(node, isChecked2);
       }
@@ -53387,7 +53363,9 @@
     function setCheckedKeys(keys) {
       checkedKeys.value.clear();
       indeterminateKeys.value.clear();
-      _setCheckedKeys(keys);
+      vue.nextTick(() => {
+        _setCheckedKeys(keys);
+      });
     }
     function setChecked(key, isChecked2) {
       if ((tree == null ? void 0 : tree.value) && props.showCheckbox) {
@@ -53400,13 +53378,14 @@
     function _setCheckedKeys(keys) {
       if (tree == null ? void 0 : tree.value) {
         const { treeNodeMap } = tree.value;
-        if (props.showCheckbox && treeNodeMap && keys) {
+        if (props.showCheckbox && treeNodeMap && (keys == null ? void 0 : keys.length) > 0) {
           for (const key of keys) {
             const node = treeNodeMap.get(key);
             if (node && !isChecked(node)) {
-              toggleCheckbox(node, true, false);
+              toggleCheckbox(node, true, false, false);
             }
           }
+          updateCheckedKeys();
         }
       }
     }
@@ -53445,7 +53424,7 @@
       function traverse(nodes2) {
         nodes2.forEach((node) => {
           family.push(node);
-          if (filter == null ? void 0 : filter(query, node.data)) {
+          if (filter == null ? void 0 : filter(query, node.data, node)) {
             family.forEach((member) => {
               expandKeySet.add(member.key);
             });
@@ -53492,19 +53471,10 @@
   }
 
   function useTree(props, emit) {
-    const expandedKeySet = vue.ref(new Set(props.defaultExpandedKeys));
+    const expandedKeySet = vue.ref(/* @__PURE__ */ new Set());
     const currentKey = vue.ref();
     const tree = vue.shallowRef();
-    vue.watch(() => props.currentNodeKey, (key) => {
-      currentKey.value = key;
-    }, {
-      immediate: true
-    });
-    vue.watch(() => props.data, (data) => {
-      setData(data);
-    }, {
-      immediate: true
-    });
+    const listRef = vue.ref();
     const {
       isIndeterminate,
       isChecked,
@@ -53534,34 +53504,26 @@
       return ((_a = props.props) == null ? void 0 : _a.label) || TreeOptionsEnum.LABEL;
     });
     const flattenTree = vue.computed(() => {
+      var _a;
       const expandedKeys = expandedKeySet.value;
       const hiddenKeys = hiddenNodeKeySet.value;
       const flattenNodes = [];
-      const nodes = tree.value && tree.value.treeNodes || [];
-      function traverse() {
-        const stack = [];
-        for (let i = nodes.length - 1; i >= 0; --i) {
-          stack.push(nodes[i]);
-        }
-        while (stack.length) {
-          const node = stack.pop();
-          if (!node)
-            continue;
-          if (!hiddenKeys.has(node.key)) {
-            flattenNodes.push(node);
-          }
-          if (expandedKeys.has(node.key)) {
-            const children = node.children;
-            if (children) {
-              const length = children.length;
-              for (let i = length - 1; i >= 0; --i) {
-                stack.push(children[i]);
-              }
-            }
+      const nodes = ((_a = tree.value) == null ? void 0 : _a.treeNodes) || [];
+      const stack = [];
+      for (let i = nodes.length - 1; i >= 0; --i) {
+        stack.push(nodes[i]);
+      }
+      while (stack.length) {
+        const node = stack.pop();
+        if (hiddenKeys.has(node.key))
+          continue;
+        flattenNodes.push(node);
+        if (node.children && expandedKeys.has(node.key)) {
+          for (let i = node.children.length - 1; i >= 0; --i) {
+            stack.push(node.children[i]);
           }
         }
       }
-      traverse();
       return flattenNodes;
     });
     const isNotEmpty = vue.computed(() => {
@@ -53586,6 +53548,7 @@
           const children = getChildren(rawNode);
           node.disabled = getDisabled(rawNode);
           node.isLeaf = !children || children.length === 0;
+          node.expanded = expandedKeySet.value.has(value);
           if (children && children.length) {
             node.children = traverse(children, level + 1, node);
           }
@@ -53639,7 +53602,17 @@
       }
     }
     function setExpandedKeys(keys) {
-      expandedKeySet.value = new Set(keys);
+      const expandedKeys = /* @__PURE__ */ new Set();
+      const nodeMap = tree.value.treeNodeMap;
+      keys.forEach((k) => {
+        let node = nodeMap.get(k);
+        while (node && !expandedKeys.has(node.key)) {
+          expandedKeys.add(node.key);
+          node.expanded = true;
+          node = node.parent;
+        }
+      });
+      expandedKeySet.value = expandedKeys;
     }
     function handleNodeClick(node, e) {
       emit(NODE_CLICK, node.data, node, e);
@@ -53647,10 +53620,13 @@
       if (props.expandOnClickNode) {
         toggleExpand(node);
       }
-      if (props.showCheckbox && props.checkOnClickNode && !node.disabled) {
+      if (props.showCheckbox && (props.checkOnClickNode || node.isLeaf && props.checkOnClickLeaf) && !node.disabled) {
         toggleCheckbox(node, !isChecked(node), true);
       }
     }
+    function handleNodeDrop(node, e) {
+      emit(NODE_DROP, node.data, node, e);
+    }
     function handleCurrentChange(node) {
       if (!isCurrent(node)) {
         currentKey.value = node.key;
@@ -53668,25 +53644,25 @@
           const treeNode = treeNodeMap.get(key);
           if (node && node.level === (treeNode == null ? void 0 : treeNode.level)) {
             keySet.delete(key);
+            treeNode.expanded = false;
           }
         });
       }
       keySet.add(node.key);
+      node.expanded = true;
       emit(NODE_EXPAND, node.data, node);
     }
     function collapseNode(node) {
       expandedKeySet.value.delete(node.key);
+      node.expanded = false;
       emit(NODE_COLLAPSE, node.data, node);
     }
-    function isExpanded(node) {
-      return expandedKeySet.value.has(node.key);
-    }
     function isDisabled(node) {
       return !!node.disabled;
     }
     function isCurrent(node) {
       const current = currentKey.value;
-      return !!current && current === node.key;
+      return current !== void 0 && current === node.key;
     }
     function getCurrentNode() {
       var _a, _b;
@@ -53701,28 +53677,54 @@
       currentKey.value = key;
     }
     function setData(data) {
-      vue.nextTick(() => tree.value = createTree(data));
+      tree.value = createTree(data);
     }
     function getNode(data) {
       var _a;
       const key = isObject$1(data) ? getKey(data) : data;
       return (_a = tree.value) == null ? void 0 : _a.treeNodeMap.get(key);
     }
+    function scrollToNode(key, strategy = "auto") {
+      const node = getNode(key);
+      if (node && listRef.value) {
+        listRef.value.scrollToItem(flattenTree.value.indexOf(node), strategy);
+      }
+    }
+    function scrollTo(offset) {
+      var _a;
+      (_a = listRef.value) == null ? void 0 : _a.scrollTo(offset);
+    }
+    vue.watch(() => props.currentNodeKey, (key) => {
+      currentKey.value = key;
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.defaultExpandedKeys, (key) => {
+      expandedKeySet.value = new Set(key);
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props.data, (data) => {
+      setData(data);
+    }, {
+      immediate: true
+    });
     return {
       tree,
       flattenTree,
       isNotEmpty,
+      listRef,
       getKey,
       getChildren,
       toggleExpand,
       toggleCheckbox,
-      isExpanded,
       isChecked,
       isIndeterminate,
       isDisabled,
       isCurrent,
       isForceHiddenExpandIcon,
       handleNodeClick,
+      handleNodeDrop,
       handleNodeCheck,
       getCurrentNode,
       getCurrentKey,
@@ -53738,7 +53740,9 @@
       getNode,
       expandNode,
       collapseNode,
-      setExpandedKeys
+      setExpandedKeys,
+      scrollToNode,
+      scrollTo
     };
   }
 
@@ -53751,12 +53755,12 @@
       return () => {
         const node = props.node;
         const { data } = node;
-        return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : vue.h("span", { class: ns.be("node", "label") }, [node == null ? void 0 : node.label]);
+        return (tree == null ? void 0 : tree.ctx.slots.default) ? tree.ctx.slots.default({ node, data }) : vue.h(ElText, { tag: "span", truncated: true, class: ns.be("node", "label") }, () => [node == null ? void 0 : node.label]);
       };
     }
   });
 
-  const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick"];
+  const _hoisted_1$6 = ["aria-expanded", "aria-disabled", "aria-checked", "data-key", "onClick", "onDrop"];
   const __default__$7 = vue.defineComponent({
     name: "ElTreeNode"
   });
@@ -53776,9 +53780,25 @@
         var _a;
         return (_a = tree == null ? void 0 : tree.props.icon) != null ? _a : caret_right_default;
       });
+      const getNodeClass = (node) => {
+        const nodeClassFunc = tree == null ? void 0 : tree.props.props.class;
+        if (!nodeClassFunc)
+          return {};
+        let className;
+        if (isFunction$1(nodeClassFunc)) {
+          const { data } = node;
+          className = nodeClassFunc(data, node);
+        } else {
+          className = nodeClassFunc;
+        }
+        return isString$1(className) ? { [className]: true } : className;
+      };
       const handleClick = (e) => {
         emit("click", props.node, e);
       };
+      const handleDrop = (e) => {
+        emit("drop", props.node, e);
+      };
       const handleExpandIconClick = () => {
         emit("toggle", props.node);
       };
@@ -53802,7 +53822,8 @@
             vue.unref(ns).is("expanded", _ctx.expanded),
             vue.unref(ns).is("current", _ctx.current),
             vue.unref(ns).is("focusable", !_ctx.disabled),
-            vue.unref(ns).is("checked", !_ctx.disabled && _ctx.checked)
+            vue.unref(ns).is("checked", !_ctx.disabled && _ctx.checked),
+            getNodeClass(_ctx.node)
           ]),
           role: "treeitem",
           tabindex: "-1",
@@ -53811,7 +53832,12 @@
           "aria-checked": _ctx.checked,
           "data-key": (_a = _ctx.node) == null ? void 0 : _a.key,
           onClick: vue.withModifiers(handleClick, ["stop"]),
-          onContextmenu: handleContextMenu
+          onContextmenu: handleContextMenu,
+          onDragover: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+          }, ["prevent"])),
+          onDragenter: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+          }, ["prevent"])),
+          onDrop: vue.withModifiers(handleDrop, ["stop"])
         }, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(vue.unref(ns).be("node", "content")),
@@ -53846,7 +53872,9 @@
               onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
               }, ["stop"]))
             }, null, 8, ["model-value", "indeterminate", "disabled"])) : vue.createCommentVNode("v-if", true),
-            vue.createVNode(vue.unref(ElNodeContent), { node: _ctx.node }, null, 8, ["node"])
+            vue.createVNode(vue.unref(ElNodeContent), {
+              node: { ..._ctx.node, expanded: _ctx.expanded }
+            }, null, 8, ["node"])
           ], 6)
         ], 42, _hoisted_1$6);
       };
@@ -53879,14 +53907,15 @@
       const {
         flattenTree,
         isNotEmpty,
+        listRef,
         toggleExpand,
-        isExpanded,
         isIndeterminate,
         isChecked,
         isDisabled,
         isCurrent,
         isForceHiddenExpandIcon,
         handleNodeClick,
+        handleNodeDrop,
         handleNodeCheck,
         toggleCheckbox,
         getCurrentNode,
@@ -53903,7 +53932,9 @@
         getNode,
         expandNode,
         collapseNode,
-        setExpandedKeys
+        setExpandedKeys,
+        scrollToNode,
+        scrollTo
       } = useTree(props, emit);
       expose({
         toggleCheckbox,
@@ -53921,29 +53952,33 @@
         getNode,
         expandNode,
         collapseNode,
-        setExpandedKeys
+        setExpandedKeys,
+        scrollToNode,
+        scrollTo
       });
       return (_ctx, _cache) => {
-        var _a;
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass([vue.unref(ns).b(), { [vue.unref(ns).m("highlight-current")]: _ctx.highlightCurrent }]),
           role: "tree"
         }, [
           vue.unref(isNotEmpty) ? (vue.openBlock(), vue.createBlock(vue.unref(FixedSizeList$1), {
             key: 0,
+            ref_key: "listRef",
+            ref: listRef,
             "class-name": vue.unref(ns).b("virtual-list"),
             data: vue.unref(flattenTree),
             total: vue.unref(flattenTree).length,
             height: _ctx.height,
             "item-size": vue.unref(treeNodeSize),
-            "perf-mode": _ctx.perfMode
+            "perf-mode": _ctx.perfMode,
+            "scrollbar-always-on": _ctx.scrollbarAlwaysOn
           }, {
             default: vue.withCtx(({ data, index, style }) => [
               (vue.openBlock(), vue.createBlock(ElTreeNode, {
                 key: data[index].key,
                 style: vue.normalizeStyle(style),
                 node: data[index],
-                expanded: vue.unref(isExpanded)(data[index]),
+                expanded: data[index].expanded,
                 "show-checkbox": _ctx.showCheckbox,
                 checked: vue.unref(isChecked)(data[index]),
                 indeterminate: vue.unref(isIndeterminate)(data[index]),
@@ -53953,17 +53988,23 @@
                 "hidden-expand-icon": vue.unref(isForceHiddenExpandIcon)(data[index]),
                 onClick: vue.unref(handleNodeClick),
                 onToggle: vue.unref(toggleExpand),
-                onCheck: vue.unref(handleNodeCheck)
-              }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "item-size", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck"]))
+                onCheck: vue.unref(handleNodeCheck),
+                onDrop: vue.unref(handleNodeDrop)
+              }, null, 8, ["style", "node", "expanded", "show-checkbox", "checked", "indeterminate", "item-size", "disabled", "current", "hidden-expand-icon", "onClick", "onToggle", "onCheck", "onDrop"]))
             ]),
             _: 1
-          }, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode"])) : (vue.openBlock(), vue.createElementBlock("div", {
+          }, 8, ["class-name", "data", "total", "height", "item-size", "perf-mode", "scrollbar-always-on"])) : (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: vue.normalizeClass(vue.unref(ns).e("empty-block"))
           }, [
-            vue.createElementVNode("span", {
-              class: vue.normalizeClass(vue.unref(ns).e("empty-text"))
-            }, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : vue.unref(t)("el.tree.emptyText")), 3)
+            vue.renderSlot(_ctx.$slots, "empty", {}, () => {
+              var _a;
+              return [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(ns).e("empty-text"))
+                }, vue.toDisplayString((_a = _ctx.emptyText) != null ? _a : vue.unref(t)("el.tree.emptyText")), 3)
+              ];
+            })
           ], 2))
         ], 2);
       };