vue-devui 1.0.0-rc.4 → 1.0.0-rc.7

package/tree/index.es.js

@@ -0,0 +1,1021 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createVNode, defineComponent, toRefs, inject, computed, mergeProps, toRef, provide, renderSlot, useSlots, ref, watch } from "vue";
+const USE_TREE_TOKEN = "use-tree-token";
+const NODE_HEIGHT = 30;
+const NODE_INDENT = 24;
+const IconClose = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon"
+}, [createVNode("g", {
+  "stroke": "none",
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#252b3a"
+}, null), createVNode("path", {
+  "fill": "#252b3a",
+  "d": "M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"
+}, null)])]);
+const IconOpen = () => createVNode("svg", {
+  "width": "16px",
+  "height": "16px",
+  "viewBox": "0 0 16 16",
+  "version": "1.1",
+  "xmlns": "http://www.w3.org/2000/svg",
+  "class": "svg-icon svg-icon-close"
+}, [createVNode("g", {
+  "stroke-width": "1",
+  "fill": "none",
+  "fill-rule": "evenodd"
+}, [createVNode("rect", {
+  "x": "0.5",
+  "y": "0.5",
+  "width": "15",
+  "height": "15",
+  "rx": "2",
+  "stroke": "#5e7ce0"
+}, null), createVNode("rect", {
+  "x": "4",
+  "y": "7",
+  "width": "8",
+  "height": "2",
+  "fill": "#5e7ce0"
+}, null)])]);
+var DTreeNodeToggle = defineComponent({
+  name: "DTreeNodeToggle",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const {
+      data
+    } = toRefs(props);
+    const {
+      toggleNode
+    } = inject(USE_TREE_TOKEN);
+    return () => {
+      var _a;
+      return createVNode("span", {
+        "class": ["devui-tree-node__folder", ((_a = data.value) == null ? void 0 : _a.disableToggle) && "toggle-disabled"],
+        "onClick": (event) => {
+          event.stopPropagation();
+          if (toggleNode) {
+            toggleNode(data.value);
+          }
+        }
+      }, [data.value.isLeaf ? createVNode("span", {
+        "class": "devui-tree-node__indent"
+      }, null) : data.value.expanded ? createVNode(IconOpen, {
+        "class": "mr-xs"
+      }, null) : createVNode(IconClose, {
+        "class": "mr-xs"
+      }, null)]);
+    };
+  }
+});
+var checkbox = "";
+const commonProps = {
+  name: {
+    type: String,
+    default: void 0
+  },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  isShowTitle: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  beforeChange: {
+    type: Function,
+    default: void 0
+  }
+};
+const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  },
+  label: {
+    type: String,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  "onUpdate:checked": {
+    type: Function,
+    default: void 0
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+});
+const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  direction: {
+    type: String,
+    default: "column"
+  },
+  itemWidth: {
+    type: Number,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  }
+});
+const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+var Checkbox = defineComponent({
+  name: "DCheckbox",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    const isChecked = computed(() => props.checked || props.modelValue);
+    const mergedDisabled = computed(() => {
+      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
+    });
+    const mergedChecked = computed(() => {
+      var _a, _b;
+      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
+    });
+    const mergedIsShowTitle = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
+    });
+    const mergedShowAnimation = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
+    });
+    const mergedColor = computed(() => {
+      var _a;
+      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
+    });
+    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
+    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
+    const canChange = (checked, val) => {
+      var _a;
+      if (mergedDisabled.value) {
+        return Promise.resolve(false);
+      }
+      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
+      if (beforeChange) {
+        const res = beforeChange(checked, val);
+        if (typeof res === "boolean") {
+          return Promise.resolve(res);
+        }
+        return res;
+      }
+      return Promise.resolve(true);
+    };
+    const toggle = () => {
+      const current = !isChecked.value;
+      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
+      ctx.emit("update:checked", current);
+      ctx.emit("update:modelValue", current);
+      ctx.emit("change", current);
+    };
+    const handleClick = () => {
+      canChange(!isChecked.value, props.label).then((res) => res && toggle());
+    };
+    return {
+      itemWidth,
+      direction,
+      mergedColor,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedChecked,
+      mergedShowAnimation,
+      handleClick
+    };
+  },
+  render() {
+    var _a;
+    const {
+      itemWidth,
+      direction,
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedShowAnimation,
+      halfchecked,
+      title,
+      label,
+      handleClick,
+      name,
+      value,
+      mergedColor,
+      $slots
+    } = this;
+    const wrapperCls = {
+      "devui-checkbox-column-margin": direction === "column",
+      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+    };
+    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+    const checkboxCls = {
+      "devui-checkbox": true,
+      active: mergedChecked,
+      halfchecked,
+      disabled: mergedDisabled,
+      unchecked: !mergedChecked
+    };
+    const labelTitle = mergedIsShowTitle ? title || label : "";
+    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
+    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
+    const spanCls = {
+      "devui-checkbox-material": true,
+      "custom-color": mergedColor,
+      "devui-checkbox-no-label": !label && !$slots.default,
+      "devui-no-animation": !mergedShowAnimation,
+      "devui-checkbox-default-background": !halfchecked
+    };
+    const polygonCls = {
+      "devui-tick": true,
+      "devui-no-animation": !mergedShowAnimation
+    };
+    const stopPropagation = ($event) => $event.stopPropagation();
+    const inputProps = {
+      indeterminate: halfchecked
+    };
+    return createVNode("div", {
+      "class": wrapperCls,
+      "style": wrapperStyle
+    }, [createVNode("div", {
+      "class": checkboxCls
+    }, [createVNode("label", {
+      "title": labelTitle,
+      "onClick": handleClick
+    }, [createVNode("input", mergeProps({
+      "name": name || value,
+      "class": "devui-checkbox-input",
+      "type": "checkbox"
+    }, inputProps, {
+      "checked": mergedChecked,
+      "disabled": mergedDisabled,
+      "onClick": stopPropagation,
+      "onChange": stopPropagation
+    }), null), createVNode("span", {
+      "style": spanStyle,
+      "class": spanCls
+    }, [createVNode("span", {
+      "class": "devui-checkbox-halfchecked-bg"
+    }, null), createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "class": "devui-checkbox-tick"
+    }, [createVNode("g", {
+      "stroke": "none",
+      "stroke-width": "1",
+      "fill": "none",
+      "fill-rule": "evenodd"
+    }, [createVNode("polygon", {
+      "fill-rule": "nonzero",
+      "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+      "class": polygonCls
+    }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
+  }
+});
+var checkboxGroup = "";
+defineComponent({
+  name: "DCheckboxGroup",
+  props: checkboxGroupProps,
+  emits: ["change", "update:modelValue"],
+  setup(props, ctx) {
+    const valList = toRef(props, "modelValue");
+    const defaultOpt = {
+      checked: false,
+      isShowTitle: true,
+      halfchecked: false,
+      showAnimation: true,
+      disabled: false
+    };
+    const toggleGroupVal = (val) => {
+      let index2 = -1;
+      if (typeof valList.value[0] === "string") {
+        index2 = valList.value.findIndex((item) => item === val);
+      } else if (typeof valList.value[0] === "object") {
+        index2 = valList.value.findIndex((item) => item.value === val);
+      }
+      if (index2 === -1) {
+        if (typeof props.options[0] === "object") {
+          const newOne = props.options.find((item) => item.value === val);
+          const res2 = [...valList.value, newOne];
+          ctx.emit("update:modelValue", res2);
+          ctx.emit("change", res2);
+          return;
+        }
+        const res = [...valList.value, val];
+        ctx.emit("update:modelValue", res);
+        ctx.emit("change", res);
+        return;
+      }
+      valList.value.splice(index2, 1);
+      ctx.emit("update:modelValue", valList.value);
+      ctx.emit("change", valList.value);
+    };
+    const isItemChecked = (itemVal) => {
+      if (typeof valList.value[0] === "string") {
+        return valList.value.includes(itemVal);
+      } else if (typeof valList.value[0] === "object") {
+        return valList.value.some((item) => item.value === itemVal);
+      }
+    };
+    provide(checkboxGroupInjectionKey, {
+      disabled: toRef(props, "disabled"),
+      isShowTitle: toRef(props, "isShowTitle"),
+      color: toRef(props, "color"),
+      showAnimation: toRef(props, "showAnimation"),
+      beforeChange: props.beforeChange,
+      isItemChecked,
+      toggleGroupVal,
+      itemWidth: toRef(props, "itemWidth"),
+      direction: toRef(props, "direction")
+    });
+    return {
+      defaultOpt
+    };
+  },
+  render() {
+    var _a;
+    const {
+      direction,
+      $slots,
+      defaultOpt,
+      options
+    } = this;
+    let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
+    if ((options == null ? void 0 : options.length) > 0) {
+      children = options.map((opt) => {
+        let mergedOpt = null;
+        if (typeof opt === "string") {
+          mergedOpt = Object.assign({}, defaultOpt, {
+            label: opt,
+            value: opt
+          });
+        } else if (typeof opt === "object") {
+          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+            label: opt.name
+          }));
+        }
+        return createVNode(Checkbox, mergedOpt, null);
+      });
+    }
+    return createVNode("div", {
+      "class": "devui-checkbox-group"
+    }, [createVNode("div", {
+      "class": {
+        "devui-checkbox-list-inline": direction === "row"
+      }
+    }, [children])]);
+  }
+});
+function useTreeNode(data) {
+  const { getChildren } = inject(USE_TREE_TOKEN);
+  const nodeClass = computed(() => {
+    var _a;
+    return [
+      "devui-tree-node",
+      ((_a = data.value) == null ? void 0 : _a.expanded) && "devui-tree-node__open"
+    ];
+  });
+  const nodeStyle = computed(() => {
+    var _a;
+    return { paddingLeft: `${NODE_INDENT * (((_a = data.value) == null ? void 0 : _a.level) - 1)}px` };
+  });
+  const nodeVLineClass = computed(() => {
+    var _a, _b;
+    return [
+      !((_a = data.value) == null ? void 0 : _a.isLeaf) && ((_b = data.value) == null ? void 0 : _b.expanded) && "devui-tree-node__vline"
+    ];
+  });
+  const nodeVLineStyle = computed(() => {
+    var _a;
+    return {
+      height: `${NODE_HEIGHT * (getChildren(data.value, { expanded: true }).length - 1) + NODE_HEIGHT / 2 + 1}px`,
+      left: `${NODE_INDENT * (((_a = data.value) == null ? void 0 : _a.level) - 1) + 9}px`,
+      top: `${NODE_HEIGHT}px`
+    };
+  });
+  const nodeHLineClass = computed(() => {
+    var _a;
+    return [
+      ((_a = data.value) == null ? void 0 : _a.level) !== 1 && "devui-tree-node__hline"
+    ];
+  });
+  const nodeContentClass = computed(() => {
+    var _a;
+    return [
+      "devui-tree-node__content",
+      ((_a = data.value) == null ? void 0 : _a.selected) && "active"
+    ];
+  });
+  const nodeTitleClass = computed(() => {
+    var _a;
+    return [
+      "devui-tree-node__title",
+      ((_a = data.value) == null ? void 0 : _a.disableSelect) && "select-disabled"
+    ];
+  });
+  return {
+    nodeClass,
+    nodeStyle,
+    nodeContentClass,
+    nodeTitleClass,
+    nodeVLineClass,
+    nodeVLineStyle,
+    nodeHLineClass
+  };
+}
+var DTreeNodeContent = defineComponent({
+  name: "DTreeNodeContent",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const {
+      data
+    } = toRefs(props);
+    const {
+      nodeTitleClass
+    } = useTreeNode(data);
+    return () => {
+      var _a;
+      return createVNode("span", {
+        "class": nodeTitleClass.value
+      }, [(_a = data.value) == null ? void 0 : _a.label]);
+    };
+  }
+});
+var DTreeNode = defineComponent({
+  name: "DTreeNode",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    check: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    const {
+      data,
+      check
+    } = toRefs(props);
+    const {
+      toggleSelectNode,
+      toggleCheckNode,
+      toggleNode,
+      getChildren
+    } = inject(USE_TREE_TOKEN);
+    const {
+      nodeClass,
+      nodeStyle,
+      nodeContentClass,
+      nodeVLineClass,
+      nodeVLineStyle,
+      nodeHLineClass
+    } = 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)) {
+        return checkedChildren.length > 0 && checkedChildren.length < children.length;
+      } else {
+        return false;
+      }
+    });
+    return () => {
+      var _a, _b, _c;
+      const checkboxProps2 = {
+        key: (_a = data.value) == null ? void 0 : _a.id,
+        disabled: (_b = data.value) == null ? void 0 : _b.disableCheck,
+        halfchecked: halfChecked.value,
+        modelValue: (_c = data.value) == null ? void 0 : _c.checked,
+        "onUpdate:modelValue": () => {
+          toggleCheckNode(data.value);
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+        }
+      };
+      return createVNode("div", {
+        "class": nodeClass.value,
+        "style": nodeStyle.value
+      }, [createVNode("span", {
+        "class": nodeVLineClass.value,
+        "style": nodeVLineStyle.value
+      }, null), createVNode("div", {
+        "class": nodeContentClass.value,
+        "onClick": () => {
+          toggleSelectNode(data.value);
+        }
+      }, [createVNode("span", {
+        "class": nodeHLineClass.value
+      }, null), slots.icon ? renderSlot(useSlots(), "icon", {
+        nodeData: data,
+        toggleNode
+      }) : createVNode(DTreeNodeToggle, {
+        "data": data.value
+      }, null), createVNode("div", {
+        "class": "devui-tree-node__content--value-wrapper",
+        "style": {
+          height: `${NODE_HEIGHT}px`
+        }
+      }, [check.value && createVNode(Checkbox, checkboxProps2, null), slots.default ? renderSlot(useSlots(), "default", {
+        nodeData: data
+      }) : createVNode(DTreeNodeContent, {
+        "data": data
+      }, null)])])]);
+    };
+  }
+});
+function useToggle() {
+  return function useToggle2(data, core) {
+    const { getNode, setNodeValue } = core;
+    const expandNode = (node) => {
+      if (node.disableToggle) {
+        return;
+      }
+      setNodeValue(node, "expanded", true);
+    };
+    const collapseNode = (node) => {
+      if (node.disableToggle) {
+        return;
+      }
+      setNodeValue(node, "expanded", false);
+    };
+    const toggleNode = (node) => {
+      if (node.disableToggle) {
+        return;
+      }
+      if (getNode(node).expanded) {
+        setNodeValue(node, "expanded", false);
+      } else {
+        setNodeValue(node, "expanded", true);
+      }
+    };
+    return {
+      expandNode,
+      collapseNode,
+      toggleNode
+    };
+  };
+}
+function randomId(n = 8) {
+  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < n; i++) {
+    result += str[parseInt((Math.random() * str.length).toString())];
+  }
+  return result;
+}
+function omit(obj, ...keys) {
+  return Object.entries(obj).filter((item) => !keys.includes(item[0])).reduce((acc, item) => Object.assign({}, acc, { [item[0]]: item[1] }), {});
+}
+function generateInnerTree(tree2, key = "children", level = 0, path = []) {
+  level++;
+  return tree2.reduce((acc, item) => {
+    var _a, _b;
+    const newItem = Object.assign({}, item);
+    if (newItem.id === void 0) {
+      newItem.id = randomId();
+      newItem.idType = "random";
+    }
+    newItem.level = level;
+    if (path.length > 0 && ((_a = path[path.length - 1]) == null ? void 0 : _a.level) >= level) {
+      while (((_b = path[path.length - 1]) == null ? void 0 : _b.level) >= level) {
+        path.pop();
+      }
+    }
+    path.push(newItem);
+    const parentNode = path[path.length - 2];
+    if (parentNode) {
+      newItem.parentId = parentNode.id;
+    }
+    if (!newItem[key]) {
+      return acc.concat(__spreadProps(__spreadValues({}, newItem), { isLeaf: true }));
+    } else {
+      return acc.concat(omit(newItem, "children"), generateInnerTree(newItem[key], key, level, path));
+    }
+  }, []);
+}
+const DEFAULT_CONFIG = {
+  expanded: false,
+  recursive: true
+};
+function useCore() {
+  return function useCore2(data) {
+    const getLevel = (node) => {
+      return data.value.find((item) => item.id === node.id).level;
+    };
+    const getChildren = (node, userConfig = DEFAULT_CONFIG) => {
+      const getInnerExpendedTree = () => {
+        return computed(() => {
+          let excludeNodes = [];
+          const result2 = [];
+          for (let i = 0, len = data == null ? void 0 : data.value.length; i < len; i++) {
+            const item = data == null ? void 0 : data.value[i];
+            if (excludeNodes.map((innerNode) => innerNode.id).includes(item.id)) {
+              continue;
+            }
+            if (item.expanded !== true) {
+              excludeNodes = getChildren(item);
+            }
+            result2.push(item);
+          }
+          return result2;
+        });
+      };
+      const result = [];
+      const config = __spreadValues(__spreadValues({}, DEFAULT_CONFIG), userConfig);
+      const treeData = config.expanded ? getInnerExpendedTree() : data;
+      const startIndex = treeData.value.findIndex((item) => item.id === node.id);
+      for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
+        if (config.recursive) {
+          result.push(treeData.value[i]);
+        } else if (getLevel(node) === treeData.value[i].level - 1) {
+          result.push(treeData.value[i]);
+        }
+      }
+      return result;
+    };
+    const getParent = (node) => {
+      return data.value.find((item) => item.id === node.parentId);
+    };
+    const getExpendedTree = () => {
+      return computed(() => {
+        let excludeNodes = [];
+        const result = [];
+        for (let i = 0, len = data == null ? void 0 : data.value.length; i < len; i++) {
+          const item = data == null ? void 0 : data.value[i];
+          if (excludeNodes.map((node) => node.id).includes(item.id)) {
+            continue;
+          }
+          if (item.expanded !== true) {
+            excludeNodes = getChildren(item);
+          }
+          result.push(item);
+        }
+        return result;
+      });
+    };
+    const getIndex = (node) => {
+      return data.value.findIndex((item) => item.id === node.id);
+    };
+    const getNode = (node) => {
+      return data.value.find((item) => item.id === node.id);
+    };
+    const setNodeValue = (node, key, value) => {
+      data.value[getIndex(node)][key] = value;
+    };
+    const setTree = (newTree) => {
+      data.value = generateInnerTree(newTree);
+    };
+    return {
+      getLevel,
+      getChildren,
+      getParent,
+      getExpendedTree,
+      getIndex,
+      getNode,
+      setNodeValue,
+      setTree
+    };
+  };
+}
+const DEFAULT_TREE_PLUGINS = [useCore(), useToggle()];
+function useTree(tree2, plugins = []) {
+  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({
+    treeData
+  }, pluginMethods);
+}
+function useCheck(options = ref({ checkStrategy: "both" })) {
+  return function useCheck2(data, core) {
+    const { setNodeValue, getNode, getChildren, getParent } = core;
+    const checkNode = (node) => {
+      setNodeValue(node, "checked", true);
+    };
+    const uncheckNode = (node) => {
+      setNodeValue(node, "checked", false);
+    };
+    const controlParentNodeChecked = (node) => {
+      const parentNode = getParent(node);
+      if (!parentNode) {
+        return;
+      }
+      const siblingNodes = getChildren(parentNode, { recursive: false });
+      const checkedSiblingNodes = siblingNodes.filter((item) => item.checked);
+      const toggleParentChecked = () => {
+        if (checkedSiblingNodes.length === 0) {
+          setNodeValue(parentNode, "checked", false);
+        } else if (checkedSiblingNodes.length === siblingNodes.length) {
+          setNodeValue(parentNode, "checked", true);
+        }
+      };
+      if (parentNode.parentId) {
+        toggleParentChecked();
+        controlParentNodeChecked(parentNode);
+      } else {
+        toggleParentChecked();
+      }
+    };
+    const toggleCheckNode = (node) => {
+      if (getNode(node).checked) {
+        setNodeValue(node, "checked", false);
+        if (["downward", "both"].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach((item) => setNodeValue(item, "checked", false));
+        }
+      } else {
+        setNodeValue(node, "checked", true);
+        if (["downward", "both"].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach((item) => setNodeValue(item, "checked", true));
+        }
+      }
+      if (["upward", "both"].includes(options.value.checkStrategy)) {
+        controlParentNodeChecked(node);
+      }
+    };
+    return {
+      checkNode,
+      uncheckNode,
+      toggleCheckNode
+    };
+  };
+}
+function useSelect() {
+  return function useSelect2(data, core) {
+    const { setNodeValue } = core;
+    let prevActiveNode;
+    const selectNode = (node) => {
+      if (node.disableSelect) {
+        return;
+      }
+      if (prevActiveNode) {
+        const prevActiveNodeIndex = data.value.findIndex((item) => item.id === prevActiveNode.id);
+        setNodeValue(data.value[prevActiveNodeIndex], "selected", false);
+      }
+      setNodeValue(node, "selected", true);
+      prevActiveNode = node;
+    };
+    const deselectNode = (node) => {
+      setNodeValue(node, "selected", false);
+    };
+    const toggleSelectNode = (node) => {
+      if (node.selected) {
+        deselectNode(node);
+      } else {
+        selectNode(node);
+      }
+    };
+    return {
+      selectNode,
+      deselectNode,
+      toggleSelectNode
+    };
+  };
+}
+function useOperate() {
+  return function useOperate2(data, core) {
+    const { setNodeValue, getChildren, getIndex, getLevel } = core;
+    const insertBefore = (parentNode, node, referenceNode) => {
+      const children = getChildren(parentNode);
+      const lastChild = children[children.length - 1];
+      let insertedIndex = getIndex(parentNode) + 1;
+      if (referenceNode) {
+        insertedIndex = getIndex(referenceNode);
+      } else if (lastChild) {
+        insertedIndex = getIndex(lastChild) + 1;
+      }
+      setNodeValue(parentNode, "expanded", true);
+      setNodeValue(parentNode, "isLeaf", false);
+      const currentNode = __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));
+    };
+    const removeNode = (node, config = { recursive: true }) => {
+      if (!config.recursive) {
+        getChildren(node).forEach((child) => {
+          setNodeValue(child, "level", getLevel(child) - 1);
+        });
+      }
+      data.value = data.value.filter((item) => {
+        if (config.recursive) {
+          return item.id !== node.id && !getChildren(node).map((nodeItem) => nodeItem.id).includes(item.id);
+        } else {
+          return item.id !== node.id;
+        }
+      });
+    };
+    const editNode = (node, label) => {
+      setNodeValue(node, "label", label);
+    };
+    return {
+      insertBefore,
+      removeNode,
+      editNode
+    };
+  };
+}
+function useMergeNodes() {
+  return function useMergeNodes2(data, core) {
+    const { setNodeValue, getChildren } = core;
+    const { removeNode } = useOperate()(data, core);
+    const mergeTreeNodes = () => {
+      const mergeToNode = (node) => {
+        var _a;
+        if (node.isLeaf) {
+          return;
+        }
+        const children = getChildren(node, { recursive: false });
+        if ((children == null ? void 0 : children.length) === 1) {
+          const subChildren = getChildren(children[0], { recursive: false });
+          if (subChildren.length !== 0) {
+            setNodeValue(node, "label", node.label + " / " + ((_a = children[0]) == null ? void 0 : _a.label));
+            removeNode(children[0], { recursive: false });
+            mergeToNode(node);
+          } else {
+            setNodeValue(children[0], "parentId", node.id);
+          }
+        } else {
+          children.forEach((item) => {
+            mergeToNode(item);
+          });
+        }
+      };
+      data.value.filter((item) => item.level === 1).forEach((item) => {
+        mergeToNode(item);
+      });
+    };
+    return {
+      mergeTreeNodes
+    };
+  };
+}
+const treeProps = {
+  data: {
+    type: Object,
+    default: []
+  },
+  check: {
+    type: [Boolean, String],
+    default: false
+  }
+};
+var tree = "";
+var Tree = defineComponent({
+  name: "DTree",
+  props: treeProps,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const {
+      data,
+      check
+    } = toRefs(props);
+    const userPlugins = [useSelect(), useOperate(), useMergeNodes()];
+    const checkOptions = ref({
+      checkStrategy: check.value || "both"
+    });
+    watch(check, (newVal) => {
+      checkOptions.value.checkStrategy = newVal;
+    });
+    if (check.value) {
+      userPlugins.push(useCheck(checkOptions));
+    }
+    const treeFactory = useTree(data.value, userPlugins);
+    const {
+      setTree,
+      getExpendedTree,
+      toggleNode
+    } = treeFactory;
+    watch(data, setTree);
+    provide(USE_TREE_TOKEN, treeFactory);
+    expose({
+      treeFactory
+    });
+    return () => {
+      return createVNode("div", {
+        "class": "devui-tree"
+      }, [getExpendedTree == null ? void 0 : getExpendedTree().value.map((treeNode) => slots.default ? renderSlot(useSlots(), "default", {
+        treeFactory,
+        nodeData: treeNode
+      }) : createVNode(DTreeNode, {
+        "data": treeNode,
+        "check": check.value
+      }, {
+        default: () => slots.content ? renderSlot(useSlots(), "content", {
+          nodeData: treeNode
+        }) : createVNode(DTreeNodeContent, {
+          "data": treeNode
+        }, null),
+        icon: () => slots.icon ? renderSlot(useSlots(), "icon", {
+          nodeData: treeNode,
+          toggleNode
+        }) : createVNode(DTreeNodeToggle, {
+          "data": treeNode
+        }, null)
+      }))]);
+    };
+  }
+});
+var index = {
+  title: "Tree \u6811",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "20%",
+  install(app) {
+    app.component(Tree.name, Tree);
+  }
+};
+export { Tree, index as default, treeProps };