vue-devui 1.0.0-rc.11 → 1.0.0-rc.12

package/tree/index.es.js

@@ -29,9 +29,10 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { createVNode, defineComponent, toRefs, inject, watch, provide, reactive, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, renderSlot, useSlots, isVNode, getCurrentInstance, onUpdated, shallowRef, toRaw, watchEffect } from "vue";
+import { createVNode, defineComponent, toRefs, inject, watch, provide, reactive, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, getCurrentInstance, renderSlot, useSlots, resolveComponent, isVNode, onUpdated, shallowRef, toRaw, watchEffect } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const USE_TREE_TOKEN = "use-tree-token";
+const TREE_INSTANCE = "tree-instance";
 const NODE_HEIGHT = 30;
 const NODE_INDENT = 24;
 const IconClose = () => createVNode("svg", {
@@ -1384,7 +1385,7 @@ var lodash = { exports: {} };
       function baseAt(object4, paths) {
         var index2 = -1, length = paths.length, result2 = Array2(length), skip = object4 == null;
         while (++index2 < length) {
-          result2[index2] = skip ? undefined$1 : get(object4, paths[index2]);
+          result2[index2] = skip ? undefined$1 : get2(object4, paths[index2]);
         }
         return result2;
       }
@@ -1829,7 +1830,7 @@ var lodash = { exports: {} };
           return matchesStrictComparable(toKey(path), srcValue);
         }
         return function(object4) {
-          var objValue = get(object4, path);
+          var objValue = get2(object4, path);
           return objValue === undefined$1 && objValue === srcValue ? hasIn(object4, path) : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
         };
       }
@@ -4562,7 +4563,7 @@ var lodash = { exports: {} };
       function functionsIn(object4) {
         return object4 == null ? [] : baseFunctions(object4, keysIn(object4));
       }
-      function get(object4, path, defaultValue) {
+      function get2(object4, path, defaultValue) {
         var result2 = object4 == null ? undefined$1 : baseGet(object4, path);
         return result2 === undefined$1 ? defaultValue : result2;
       }
@@ -5417,7 +5418,7 @@ var lodash = { exports: {} };
       lodash2.forInRight = forInRight;
       lodash2.forOwn = forOwn;
       lodash2.forOwnRight = forOwnRight;
-      lodash2.get = get;
+      lodash2.get = get2;
       lodash2.gt = gt;
       lodash2.gte = gte;
       lodash2.has = has;
@@ -8301,6 +8302,7 @@ function useTreeNode(data) {
     var _a;
     return [ns.e("node-title"), ((_a = data.value) == null ? void 0 : _a.disableSelect) && "select-disabled"];
   });
+  const nodeOperationAreaClass = computed(() => ns.e("node-operation-area"));
   return {
     nodeClass,
     nodeStyle,
@@ -8308,7 +8310,8 @@ function useTreeNode(data) {
     nodeTitleClass,
     nodeVLineClass,
     nodeVLineStyles,
-    nodeHLineClass
+    nodeHLineClass,
+    nodeOperationAreaClass
   };
 }
 var DTreeNodeContent = defineComponent({
@@ -8334,6 +8337,27 @@ var DTreeNodeContent = defineComponent({
     };
   }
 });
+const formatCheckStatus = (check) => {
+  return typeof check === "boolean" ? check ? "both" : "none" : check;
+};
+const camelize = (name) => name.substring(1).replace(/^\S/, (s) => s.toLocaleLowerCase());
+function get(object4, path) {
+  const keys = path.split(".");
+  let result = object4;
+  keys.forEach((key) => {
+    var _a;
+    result = (_a = result[key]) != null ? _a : "";
+  });
+  return result;
+}
+function createI18nTranslate(name, app, newPrefix) {
+  const prefix = newPrefix || camelize(name) + ".";
+  return (path) => {
+    const messages2 = app == null ? void 0 : app.appContext.config.globalProperties.langMessages.value;
+    const message = get(messages2, prefix + path) || get(messages2, path);
+    return message;
+  };
+}
 var DTreeNode = defineComponent({
   name: "DTreeNode",
   props: {
@@ -8342,23 +8366,33 @@ var DTreeNode = defineComponent({
       default: () => ({})
     },
     check: {
-      type: Boolean,
+      type: [Boolean, String],
+      default: false
+    },
+    operate: {
+      type: [Boolean, String, Array],
       default: false
     }
   },
   setup(props, {
     slots
   }) {
+    const app = getCurrentInstance();
+    const t = createI18nTranslate("DTree", app);
     const {
       data,
-      check
+      check,
+      operate
     } = toRefs(props);
     const {
       toggleSelectNode,
       toggleCheckNode,
       toggleNode,
-      getChildren
+      getChildren,
+      insertBefore,
+      removeNode
     } = inject(USE_TREE_TOKEN);
+    const treeInstance = inject(TREE_INSTANCE);
     const ns2 = useNamespace("tree");
     const {
       nodeClass,
@@ -8366,23 +8400,29 @@ var DTreeNode = defineComponent({
       nodeContentClass,
       nodeVLineClass,
       nodeVLineStyles,
-      nodeHLineClass
+      nodeHLineClass,
+      nodeOperationAreaClass
     } = useTreeNode(data);
     const halfChecked = computed(() => {
-      const children = getChildren == null ? void 0 : getChildren(data.value);
-      const checkedChildren = children == null ? void 0 : children.filter((item) => item.checked);
-      if (["upward", "both"].includes(check.value)) {
+      var _a;
+      if (!((_a = data.value) == null ? void 0 : _a.checked)) {
+        return false;
+      }
+      const checkFormat = formatCheckStatus(check.value);
+      if (["upward", "both"].includes(checkFormat)) {
+        const children = (getChildren == null ? void 0 : getChildren(data.value)) || [];
+        const checkedChildren = children == null ? void 0 : children.filter((item) => item.checked);
         return checkedChildren.length > 0 && checkedChildren.length < children.length;
       } else {
         return false;
       }
     });
-    return () => {
+    const checkboxProps2 = computed(() => {
       var _a, _b, _c;
-      const checkboxProps2 = {
+      return {
         key: (_a = data.value) == null ? void 0 : _a.id,
         disabled: (_b = data.value) == null ? void 0 : _b.disableCheck,
-        halfchecked: halfChecked.value,
+        halfChecked: halfChecked.value,
         modelValue: (_c = data.value) == null ? void 0 : _c.checked,
         "onUpdate:modelValue": () => {
           toggleCheckNode == null ? void 0 : toggleCheckNode(data.value);
@@ -8391,9 +8431,20 @@ var DTreeNode = defineComponent({
           event.stopPropagation();
         }
       };
+    });
+    const isShowOperationArea = ref(false);
+    const showOperationArea = () => {
+      isShowOperationArea.value = true;
+    };
+    const hideOperationArea = () => {
+      isShowOperationArea.value = false;
+    };
+    return () => {
       return createVNode("div", {
         "class": nodeClass.value,
-        "style": nodeStyle.value
+        "style": nodeStyle.value,
+        "onMouseenter": showOperationArea,
+        "onMouseleave": hideOperationArea
       }, [nodeVLineStyles.value.map((item) => createVNode("span", {
         "class": nodeVLineClass.value,
         "style": item
@@ -8401,6 +8452,7 @@ var DTreeNode = defineComponent({
         "class": nodeContentClass.value,
         "onClick": () => {
           toggleSelectNode == null ? void 0 : toggleSelectNode(data.value);
+          treeInstance.emit("node-click", data.value);
         }
       }, [createVNode("span", {
         "class": nodeHLineClass.value
@@ -8414,10 +8466,24 @@ var DTreeNode = defineComponent({
         "style": {
           height: `${NODE_HEIGHT}px`
         }
-      }, [check.value && createVNode(Checkbox, checkboxProps2, null), slots.default ? renderSlot(useSlots(), "default", {
+      }, [check.value && createVNode(Checkbox, checkboxProps2.value, null), slots.default ? renderSlot(useSlots(), "default", {
         nodeData: data
       }) : createVNode(DTreeNodeContent, {
         "data": data.value
+      }, null)]), operate.value && isShowOperationArea.value && createVNode("div", {
+        "class": nodeOperationAreaClass.value
+      }, [createVNode(resolveComponent("d-icon"), {
+        "name": "add",
+        "onClick": () => {
+          insertBefore(data.value, {
+            label: t("newNode") || "New node"
+          });
+        }
+      }, null), createVNode(resolveComponent("d-icon"), {
+        "name": "delete",
+        "onClick": () => {
+          removeNode(data.value);
+        }
       }, null)])])]);
     };
   }
@@ -8845,6 +8911,8 @@ var ResizeObserverContainer = defineComponent({
           top: 0
         });
       }
+    }, {
+      immediate: true
     });
     return () => createVNode("div", {
       "style": outerStyle.value
@@ -9104,6 +9172,7 @@ const ScrollStyle = {
   overflowY: "auto",
   overflowAnchor: "none"
 };
+const DEFAULT_HEIGHT = 20;
 var VirtualList = defineComponent({
   name: "DVirtualList",
   props: virtualListProps,
@@ -9212,7 +9281,7 @@ var VirtualList = defineComponent({
           cacheHeight = heights.get(key);
         }
         if (cacheHeight === void 0) {
-          cacheHeight = props.itemHeight || 20;
+          cacheHeight = props.itemHeight || DEFAULT_HEIGHT;
         }
         const currentItemBottom = itemTop + cacheHeight;
         if (startIndex === void 0 && currentItemBottom >= scrollTop) {
@@ -9346,6 +9415,11 @@ var VirtualList = defineComponent({
     }, {
       flush: "post"
     });
+    ctx.expose({
+      scrollTo(index2) {
+        syncScrollTop(index2 * (props.itemHeight || DEFAULT_HEIGHT));
+      }
+    });
     return () => {
       const Component = props.component;
       return createVNode("div", {
@@ -9385,28 +9459,30 @@ var VirtualList = defineComponent({
   }
 });
 function useToggle() {
-  return function useToggle2(data, core) {
+  return function useToggle2(data, core, context) {
     const { getNode, setNodeValue } = core;
     const expandNode = (node) => {
       if (node.disableToggle) {
         return;
       }
       setNodeValue(node, "expanded", true);
+      context.emit("toggle-change", node);
     };
     const collapseNode = (node) => {
       if (node.disableToggle) {
         return;
       }
       setNodeValue(node, "expanded", false);
+      context.emit("toggle-change", node);
     };
     const toggleNode = (node) => {
       if (node.disableToggle) {
         return;
       }
       if (getNode(node).expanded) {
-        setNodeValue(node, "expanded", false);
+        collapseNode(node);
       } else {
-        setNodeValue(node, "expanded", true);
+        expandNode(node);
       }
     };
     const expandAllNodes = () => {
@@ -9466,11 +9542,12 @@ const DEFAULT_CONFIG = {
   expanded: false,
   recursive: true
 };
+const nodeMap = /* @__PURE__ */ new Map();
 function useCore() {
-  const nodeMap = /* @__PURE__ */ new Map();
   return function useCore2(data) {
     const getLevel = (node) => {
-      return data.value.find((item) => item.id === node.id).level;
+      var _a;
+      return (_a = data.value.find((item) => item.id === node.id)) == null ? void 0 : _a.level;
     };
     const getChildren = (node, userConfig = DEFAULT_CONFIG) => {
       if (node.isLeaf) {
@@ -9536,6 +9613,9 @@ function useCore() {
       });
     };
     const getIndex = (node) => {
+      if (!node) {
+        return -1;
+      }
       return data.value.findIndex((item) => item.id === node.id);
     };
     const getNode = (node) => {
@@ -9543,12 +9623,17 @@ function useCore() {
     };
     const setNodeValue = (node, key, value) => {
       nodeMap.clear();
-      data.value[getIndex(node)][key] = value;
+      if (getIndex(node) !== -1) {
+        data.value[getIndex(node)][key] = value;
+      }
     };
     const setTree = (newTree) => {
       nodeMap.clear();
       data.value = generateInnerTree(newTree);
     };
+    const getTree = () => {
+      return data.value;
+    };
     onUnmounted(() => {
       nodeMap.clear();
     });
@@ -9560,76 +9645,92 @@ function useCore() {
       getIndex,
       getNode,
       setNodeValue,
-      setTree
+      setTree,
+      getTree
     };
   };
 }
 const DEFAULT_TREE_PLUGINS = [useCore(), useToggle()];
-function useTree(tree2, plugins = []) {
+function useTree(tree2, plugins = [], context) {
   const treeData = ref(generateInnerTree(tree2));
   const core = useCore()(treeData);
   const pluginMethods = DEFAULT_TREE_PLUGINS.concat(plugins).reduce((acc, plugin) => {
-    return __spreadValues(__spreadValues({}, acc), plugin(treeData, core));
+    return __spreadValues(__spreadValues({}, acc), plugin(treeData, core, context));
   }, {});
   return __spreadValues({
     treeData
   }, pluginMethods);
 }
 function useCheck(options = ref({ checkStrategy: "both" })) {
-  return function useCheck2(data, core) {
+  return function useCheck2(data, core, context) {
     const { setNodeValue, getNode, getChildren, getParent } = core;
     const checkNode = (node) => {
       setNodeValue(node, "checked", true);
+      context.emit("check-change", node);
     };
     const uncheckNode = (node) => {
       setNodeValue(node, "checked", false);
+      context.emit("check-change", node);
     };
-    const controlParentNodeChecked = (node) => {
+    const controlParentNodeChecked = (node, checked) => {
+      if (!node.parentId) {
+        return;
+      }
       const parentNode = getParent(node);
       if (!parentNode) {
         return;
       }
-      const siblingNodes = getChildren(parentNode, { recursive: false });
-      const checkedSiblingNodes = siblingNodes.filter((item) => item.checked);
-      const toggleParentChecked = () => {
+      let childChecked = checked;
+      if (checked) {
+        if (!parentNode.checked) {
+          setNodeValue(parentNode, "checked", true);
+        }
+      } else {
+        const siblingNodes = getChildren(parentNode);
+        const checkedSiblingNodes = siblingNodes.filter((item) => item.checked && item.id !== node.id);
         if (checkedSiblingNodes.length === 0) {
           setNodeValue(parentNode, "checked", false);
-        } else if (checkedSiblingNodes.length === siblingNodes.length) {
+        } else {
           setNodeValue(parentNode, "checked", true);
+          childChecked = true;
         }
-      };
+      }
       if (parentNode.parentId) {
-        toggleParentChecked();
-        controlParentNodeChecked(parentNode);
-      } else {
-        toggleParentChecked();
+        controlParentNodeChecked(parentNode, childChecked);
       }
     };
     const toggleCheckNode = (node) => {
-      if (getNode(node).checked) {
+      const checked = getNode(node).checked;
+      if (checked) {
         setNodeValue(node, "checked", false);
+        context.emit("check-change", node);
         if (["downward", "both"].includes(options.value.checkStrategy)) {
           getChildren(node).forEach((item) => setNodeValue(item, "checked", false));
         }
       } else {
         setNodeValue(node, "checked", true);
+        context.emit("check-change", node);
         if (["downward", "both"].includes(options.value.checkStrategy)) {
           getChildren(node).forEach((item) => setNodeValue(item, "checked", true));
         }
       }
       if (["upward", "both"].includes(options.value.checkStrategy)) {
-        controlParentNodeChecked(node);
+        controlParentNodeChecked(node, !checked);
       }
     };
+    const getCheckedNodes = () => {
+      return data.value.filter((node) => node.checked);
+    };
     return {
       checkNode,
       uncheckNode,
-      toggleCheckNode
+      toggleCheckNode,
+      getCheckedNodes
     };
   };
 }
 function useSelect() {
-  return function useSelect2(data, core) {
+  return function useSelect2(data, core, context) {
     const { setNodeValue } = core;
     let prevActiveNode;
     const selectNode = (node) => {
@@ -9641,10 +9742,12 @@ function useSelect() {
         setNodeValue(data.value[prevActiveNodeIndex], "selected", false);
       }
       setNodeValue(node, "selected", true);
+      context.emit("select-change", node);
       prevActiveNode = node;
     };
     const deselectNode = (node) => {
       setNodeValue(node, "selected", false);
+      context.emit("select-change", node);
     };
     const toggleSelectNode = (node) => {
       if (node.selected) {
@@ -9653,10 +9756,14 @@ function useSelect() {
         selectNode(node);
       }
     };
+    const getSelectedNode = () => {
+      return data.value.find((node) => node.selected);
+    };
     return {
       selectNode,
       deselectNode,
-      toggleSelectNode
+      toggleSelectNode,
+      getSelectedNode
     };
   };
 }
@@ -9664,7 +9771,9 @@ function useOperate() {
   return function useOperate2(data, core) {
     const { setNodeValue, getChildren, getIndex, getLevel } = core;
     const insertBefore = (parentNode, node, referenceNode) => {
-      const children = getChildren(parentNode);
+      const children = getChildren(parentNode, {
+        recursive: false
+      });
       const lastChild = children[children.length - 1];
       let insertedIndex = getIndex(parentNode) + 1;
       if (referenceNode) {
@@ -9674,12 +9783,20 @@ function useOperate() {
       }
       setNodeValue(parentNode, "expanded", true);
       setNodeValue(parentNode, "isLeaf", false);
-      const currentNode = __spreadProps(__spreadValues({}, node), {
+      if (lastChild) {
+        setNodeValue(lastChild, "parentChildNode", children.length + 1);
+      }
+      const currentNode = ref(__spreadProps(__spreadValues({}, node), {
         level: getLevel(parentNode) + 1,
         parentId: parentNode.id,
-        isLeaf: true
-      });
-      data.value = data.value.slice(0, insertedIndex).concat(currentNode, data.value.slice(insertedIndex, data.value.length));
+        isLeaf: true,
+        parentChildNode: children.length + 1,
+        currentIndex: (lastChild == null ? void 0 : lastChild.currentIndex) + 1
+      }));
+      if (currentNode.value.id === void 0) {
+        currentNode.value.id = randomId();
+      }
+      data.value = data.value.slice(0, insertedIndex).concat(currentNode.value, data.value.slice(insertedIndex, data.value.length));
     };
     const removeNode = (node, config = { recursive: true }) => {
       if (!config.recursive) {
@@ -9749,6 +9866,10 @@ const treeProps = {
     type: [Boolean, String],
     default: false
   },
+  operate: {
+    type: [Boolean, String, Array],
+    default: false
+  },
   height: {
     type: [Number, String]
   }
@@ -9757,26 +9878,30 @@ var tree = "";
 var Tree = defineComponent({
   name: "DTree",
   props: treeProps,
-  setup(props, {
-    slots,
-    expose
-  }) {
+  emits: ["toggle-change", "check-change", "select-change", "node-click"],
+  setup(props, context) {
+    const {
+      slots,
+      expose
+    } = context;
+    const treeInstance = getCurrentInstance();
     const {
       data,
-      check
+      check,
+      operate
     } = toRefs(props);
     const ns2 = useNamespace("tree");
     const userPlugins = [useSelect(), useOperate(), useMergeNodes()];
     const checkOptions = ref({
-      checkStrategy: check.value || "both"
+      checkStrategy: formatCheckStatus(check.value)
     });
     watch(check, (newVal) => {
-      checkOptions.value.checkStrategy = newVal;
+      checkOptions.value.checkStrategy = formatCheckStatus(newVal);
     });
     if (check.value) {
       userPlugins.push(useCheck(checkOptions));
     }
-    const treeFactory = useTree(data.value, userPlugins);
+    const treeFactory = useTree(data.value, userPlugins, context);
     const {
       setTree,
       getExpendedTree,
@@ -9784,6 +9909,7 @@ var Tree = defineComponent({
     } = treeFactory;
     watch(data, setTree);
     provide(USE_TREE_TOKEN, treeFactory);
+    provide(TREE_INSTANCE, treeInstance);
     expose({
       treeFactory
     });
@@ -9792,7 +9918,8 @@ var Tree = defineComponent({
       nodeData: treeNode
     }) : createVNode(DTreeNode, {
       "data": treeNode,
-      "check": check.value
+      "check": check.value,
+      "operate": operate.value
     }, {
       default: () => slots.content ? renderSlot(useSlots(), "content", {
         nodeData: treeNode
@@ -9830,7 +9957,7 @@ var Tree = defineComponent({
 var index = {
   title: "Tree \u6811",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "20%",
+  status: "50%",
   install(app) {
     app.component(Tree.name, Tree);
   }