vue-devui 1.0.0-alpha.4 → 1.0.0-beta.10

package/tree/index.es.js

@@ -1 +1,907 @@
-import{ref as e,defineComponent as a,inject as l,createVNode as t,toRefs as i,provide as n}from"vue";const d={data:{type:Array,required:!0,default:()=>[]}},o=(e,a="children")=>e.reduce(((e,l)=>l[a]?e.concat(l,o(l[a],a)):e.concat(l)),[]);var c=a({name:"DTreeNodeContent",props:{node:{type:Object,required:!0}},setup(e){const a=l("treeRoot");return()=>{const l=e.node,{disabled:i,label:n}=l;return a.ctx.slots.default?a.ctx.slots.default({node:l}):t("span",{class:["devui-tree-node__title",i&&"select-disabled"]},[n])}}}),I=a({name:"DTree",props:d,emits:[],setup(a,l){const{data:d}=i(a);o(d.value);const{mergeData:I}=function(a){const l=(e,a="children",t="label")=>{const{[a]:i,[t]:n}=e;return Array.isArray(i)&&1===i.length&&i[0][a]&&1===i[0][a].length?l(Object.assign({},i[0],{[t]:`${n} \\ ${i[0][t]}`})):e},t=(e,a=0,i="children",n="label")=>e.map((e=>{const{[i]:d}=e;if(!Array.isArray(d)||!d.length)return Object.assign({},e,{level:a+1});let o=e;return 1===d.length&&(o=l(e)),Object.assign({},o,{[i]:t(o[i],a+1,i,n),level:a+1})}));return{mergeData:e(t(a))}}(d.value),{openedData:s,toggle:r}=function(a){const l=e=>e.reduce(((e,a)=>a.open?e.concat(a,l(a.children)):e.concat(a)),[]),t=e(l(a));return{openedData:t,toggle:(e,i)=>{e.stopPropagation(),i.children&&(i.open=!i.open,t.value=l(a))}}}(I.value),{nodeClassNameReflect:g,handleInitNodeClassNameReflect:u,handleClickOnNode:v}=(()=>{const a=e({});return{nodeClassNameReflect:a,handleClickOnNode:e=>{"devui-tree_isDisabledNode"!==a.value[e]&&(a.value=Object.fromEntries(Object.entries(a.value).map((([a])=>[a,a===e?"active":""]))))},handleInitNodeClassNameReflect:(e=!1,...l)=>{const t=l.join("-");return a.value[t]=e?"devui-tree_isDisabledNode":a.value[t]||"",t}}})();n("treeRoot",{ctx:l,props:a});const y=()=>t("span",{style:"display: inline-block; width: 16px; height: 16px;"},null);return()=>t("div",{class:"devui-tree"},[s.value.map((e=>(e=>{const{key:a="",label:l,disabled:i,open:n,level:d,children:o}=e,I=u(i,a,l);return t("div",{class:["devui-tree-node",n&&"devui-tree-node__open"],style:{paddingLeft:24*(d-1)+"px"}},[t("div",{class:`devui-tree-node__content ${g.value[I]}`,onClick:()=>v(I)},[t("div",{class:"devui-tree-node__content--value-wrapper"},[o?t(n?"data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24gc3ZnLWljb24tY2xvc2UiCj4KICA8ZyBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMiIgc3Ryb2tlPSIjNWU3Y2UwIj48L3JlY3Q+CiAgICA8cmVjdCB4PSI0IiB5PSI3IiB3aWR0aD0iOCIgaGVpZ2h0PSIyIiBmaWxsPSIjNWU3Y2UwIj48L3JlY3Q+CiAgPC9nPgo8L3N2Zz4=":"data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24iCj4KICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSIyIiBzdHJva2U9IiMyNTJiM2EiPjwvcmVjdD4KICAgIDxwYXRoCiAgICAgIGZpbGw9IiMyNTJiM2EiCiAgICAgIGQ9Ik04Ljc1LDQgTDguNzUsNy4yNSBMMTIsNy4yNSBMMTIsOC43NSBMOC43NDksOC43NSBMOC43NSwxMiBMNy4yNSwxMiBMNy4yNDksOC43NSBMNCw4Ljc1IEw0LDcuMjUgTDcuMjUsNy4yNSBMNy4yNSw0IEw4Ljc1LDQgWiIKICAgID48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K",{class:"mr-xs",onClick:a=>r(a,e)},null):t(y,null,null),t(c,{node:e},null)])])])})(e)))])}});I.install=function(e){e.component(I.name,I)};var s={title:"Tree 树",category:"数据展示",status:void 0,install(e){e.use(I)}};export{I as Tree,s as default};
+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));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { h, render, defineComponent, ref, createVNode, inject, computed, mergeProps, watch, unref, Fragment, onUpdated, toRefs, reactive, provide } from "vue";
+const treeProps = {
+  data: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  checkable: {
+    type: Boolean,
+    default: false
+  },
+  checkableRelation: {
+    type: String,
+    default: "none"
+  }
+};
+const CHECK_CONFIG = {
+  none: {},
+  half: {
+    halfchecked: true
+  },
+  select: {
+    checked: true
+  }
+};
+const flatten = (tree2, key = "children") => {
+  return tree2.reduce((acc, item) => !item[key] ? acc.concat(item) : acc.concat(item, flatten(item[key], key)), []);
+};
+const getRandomId = () => (Math.random() * 10 ** 9).toString().slice(0, 8);
+const preCheckNodeId = (d, postfixId) => {
+  const randomStr = getRandomId();
+  console.info("randomStr: ", randomStr);
+  return __spreadProps(__spreadValues({}, d), { id: postfixId ? `${postfixId}_${randomStr}` : randomStr });
+};
+const getId = (id) => {
+  const ids = id.split("_");
+  return [...ids.slice(0, ids.length), getRandomId()].join("_");
+};
+const preCheckTree = (ds, postfixId) => {
+  return ds.map((d) => {
+    const dd = preCheckNodeId(d, postfixId);
+    return d.children ? __spreadProps(__spreadValues({}, dd), {
+      children: preCheckTree(d.children, dd.id)
+    }) : dd;
+  });
+};
+const _deleteNode = (ids, data, index2 = 0) => {
+  const curTargetId = ids.slice(0, index2 + 2).join("_");
+  data.forEach((item) => {
+    if (item.id === ids.slice(0, index2 + 1).join("_")) {
+      if (ids.length === index2 + 2) {
+        item.children = item.children.filter(({ id: d }) => d !== curTargetId);
+      } else {
+        item.children = _deleteNode(ids, item.children, index2 + 1);
+      }
+    }
+  });
+  return data;
+};
+const deleteNode = (id, data) => {
+  if (id.includes("_")) {
+    return _deleteNode(id.split("_"), data);
+  }
+  return data.filter(({ id: d }) => d !== id);
+};
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(Component, props, children = null) {
+  const vnode = h(Component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading$1 = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const loadingConstructor = defineComponent(Loading);
+const cacheTarget = new WeakMap();
+const loading = {
+  open(options = {}) {
+    const parent = options.target || document.body;
+    if (cacheTarget.has(parent)) {
+      return cacheTarget.get(parent);
+    }
+    parent.style.position = options.positionType;
+    const isFull = document.body === parent;
+    options = __spreadValues(__spreadValues({}, new LoadingProps()), options);
+    const instance = createComponent(loadingConstructor, __spreadProps(__spreadValues({}, options), {
+      isFull
+    }), options.loadingTemplateRef ? () => options.loadingTemplateRef : null);
+    cacheTarget.set(parent, instance);
+    instance.proxy.open();
+    parent.appendChild(instance.proxy.$el);
+    const close = instance.proxy.close;
+    instance.loadingInstance = instance.proxy;
+    instance.loadingInstance.close = (...args) => {
+      cacheTarget.delete(parent);
+      close(...args);
+    };
+    return instance;
+  }
+};
+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 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 = (isChecked2, 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(isChecked2, 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))])])]);
+  }
+});
+function useToggle(data) {
+  const openedTree = (tree2) => {
+    return tree2.reduce((acc, item) => item.open ? acc.concat(item, openedTree(item.children)) : acc.concat(item), []);
+  };
+  const openedData = ref(openedTree(data.value));
+  watch(() => data.value, (d) => openedData.value = openedTree(d), { deep: true });
+  const toggle = (target, item) => {
+    target.stopPropagation();
+    if (!item.children)
+      return;
+    item.open = !item.open;
+    openedData.value = openedTree(data.value);
+  };
+  return {
+    openedData,
+    toggle
+  };
+}
+function useMergeNode(data) {
+  const mergeObject = (treeItem, childName = "children", labelName = "label") => {
+    const { [childName]: children, [labelName]: label } = treeItem;
+    if (Array.isArray(children) && children.length === 1 && children[0][childName] && children[0][childName].length === 1) {
+      return mergeObject(Object.assign({}, children[0], {
+        [labelName]: `${label} \\ ${children[0][labelName]}`
+      }));
+    }
+    return treeItem;
+  };
+  const mergeNode = (tree2, level = 0, childName = "children", labelName = "label") => {
+    return tree2.map((item) => {
+      const { [childName]: children } = item;
+      if (!Array.isArray(children) || !children.length) {
+        return Object.assign({}, item, { level: level + 1 });
+      }
+      let currentObject = item;
+      if (children.length === 1) {
+        currentObject = mergeObject(item);
+      }
+      return Object.assign({}, currentObject, {
+        [childName]: mergeNode(currentObject[childName], level + 1, childName, labelName),
+        level: level + 1
+      });
+    });
+  };
+  const mergeData = ref(mergeNode(data));
+  return {
+    mergeData
+  };
+}
+const HIGHLIGHT_CLASS = "active";
+const IS_DISABLED_FLAG = "devui-tree_isDisabledNode";
+const useHighlightNode = () => {
+  const nodeClassNameReflectRef = ref({});
+  const prevActiveNodeKey = ref("");
+  const handleInit = (isDisabled = false, ...keys) => {
+    const key = keys.join("-");
+    nodeClassNameReflectRef.value[key] = isDisabled ? IS_DISABLED_FLAG : nodeClassNameReflectRef.value[key] || "";
+    return key;
+  };
+  const handleClick = (key) => {
+    if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG)
+      return;
+    if (prevActiveNodeKey.value === key)
+      return;
+    if (prevActiveNodeKey.value)
+      nodeClassNameReflectRef.value[prevActiveNodeKey.value] = "";
+    nodeClassNameReflectRef.value[key] = HIGHLIGHT_CLASS;
+    prevActiveNodeKey.value = key;
+  };
+  return {
+    nodeClassNameReflect: nodeClassNameReflectRef,
+    handleClickOnNode: handleClick,
+    handleInitNodeClassNameReflect: handleInit
+  };
+};
+function useChecked(cbr, ctx, data) {
+  const selected = ref({});
+  const flatData = flatten(data);
+  const findPedigreeById = (id) => {
+    const treeData = data;
+    let parentLevel = {};
+    let childLevel = [];
+    let target = void 0;
+    const ergodic = (curr, parentNode) => {
+      curr.every(({ children, id: itemId }) => {
+        if (target) {
+          return false;
+        }
+        if (itemId === id) {
+          parentLevel = parentNode;
+          childLevel = Array.isArray(children) ? flatten(children).map(({ id: key }) => key) : [];
+          target = itemId;
+          return false;
+        }
+        if (Array.isArray(children)) {
+          ergodic(children, {
+            id: itemId,
+            children: children.map(({ id: key }) => key),
+            parent: parentNode
+          });
+        }
+        return true;
+      });
+    };
+    ergodic(treeData, {});
+    return {
+      parentLevel,
+      childLevel
+    };
+  };
+  const generateParentObject = (parentLevel, isSelected, checkId) => {
+    const state = {};
+    const currentSelected = unref(selected);
+    const ergodic = (currObj, isOverflow = false) => {
+      const { id, children, parent } = currObj;
+      if (!parent) {
+        return;
+      }
+      if (isSelected) {
+        const optional = children.filter((item) => !currentSelected[item] || currentSelected[item] === "none");
+        if (optional.length <= 1) {
+          if (optional[0] === checkId) {
+            state[id] = "select";
+          } else if (isOverflow) {
+            state[id] = "half";
+          }
+        } else {
+          state[id] = "half";
+        }
+        ergodic(parent, state[id] === "select");
+      } else {
+        const optional = children.filter((item) => currentSelected[item] && currentSelected[item] !== "none");
+        if (optional.length <= 1) {
+          if (optional[0] === checkId || isOverflow) {
+            state[id] = "none";
+          }
+        } else {
+          state[id] = "half";
+        }
+        ergodic(parent, state[id] === "none");
+      }
+    };
+    ergodic(parentLevel);
+    return state;
+  };
+  const onNodeClick = (item) => {
+    const { id } = item;
+    let currentSelected = Object.assign({}, unref(selected));
+    const isSelected = currentSelected[id] === "none" || !currentSelected[id];
+    if (cbr.value === "none") {
+      currentSelected = Object.assign(currentSelected, {
+        [id]: isSelected ? "select" : "none"
+      });
+    } else if (cbr.value === "both") {
+      const { parentLevel, childLevel } = findPedigreeById(id);
+      currentSelected = Object.assign(currentSelected, Object.fromEntries(childLevel.map((key) => [key, isSelected ? "select" : "none"])), generateParentObject(parentLevel, isSelected, id), { [id]: isSelected ? "select" : "none" });
+    } else if (cbr.value === "upward") {
+      const { parentLevel } = findPedigreeById(id);
+      currentSelected = Object.assign(currentSelected, generateParentObject(parentLevel, isSelected, id), { [id]: isSelected ? "select" : "none" });
+    } else if (cbr.value === "downward") {
+      const { childLevel } = findPedigreeById(id);
+      currentSelected = Object.assign(currentSelected, Object.fromEntries(childLevel.map((key) => [key, isSelected ? "select" : "none"])), { [id]: isSelected ? "select" : "none" });
+    }
+    selected.value = currentSelected;
+    const currentSelectedItem = flatData.filter(({ id: id2 }) => currentSelected[id2] && currentSelected[id2] !== "none");
+    ctx.emit("nodeSelected", currentSelectedItem);
+  };
+  return {
+    selected,
+    onNodeClick
+  };
+}
+const useLazy = () => {
+  const reflect = ref({});
+  const handleInit = (item, value) => {
+    var _a;
+    if (!item.isParent) {
+      return;
+    }
+    const key = (_a = reflect.value[value.id]) == null ? void 0 : _a.id.toString();
+    if (!key) {
+      reflect.value[value.id] = __spreadProps(__spreadValues({}, value), {
+        loadingTargetId: `devui-tree_loadingTemplate-${value.id}`,
+        dataSource: null
+      });
+    }
+  };
+  const getLazyData = async (key) => {
+    const ds = reflect.value[key];
+    if (ds.dataSource) {
+      return ds.dataSource;
+    }
+    const handleLoading = reflect.value[key].renderLoading(reflect.value[key].loadingTargetId);
+    try {
+      reflect.value[key].dataSource = await ds.onGetNodeData();
+    } catch (e) {
+      console.error(e);
+    } finally {
+      handleLoading.loadingInstance.close();
+    }
+    return reflect.value[key].dataSource;
+  };
+  return {
+    lazyNodesReflect: reflect,
+    handleInitLazyNodeReflect: handleInit,
+    getLazyData
+  };
+};
+const reflectIconWithHandle = (data, operator) => {
+  const handleAdd = (payload) => operator.handleAdd();
+  const handleEdit = (payload) => operator.handleEdit();
+  const handleDelete = (payload) => operator.handleDelete();
+  return createVNode(Fragment, null, [operator.addable && createVNode("span", {
+    "class": "op-icons icon icon-add",
+    "onClick": handleAdd
+  }, null), operator.editable && createVNode("span", {
+    "class": "op-icons icon icon-edit",
+    "onClick": handleEdit
+  }, null), operator.deletable && createVNode("span", {
+    "class": "op-icons icon icon-close",
+    "onClick": handleDelete
+  }, null)]);
+};
+const useOperate = (treeData) => {
+  const operateIconReflect = ref([]);
+  const editStatusReflect = ref({});
+  const handleReflectIdToIcon = (id, operator) => {
+    const isNotExistedReflectItem = operateIconReflect.value.every(({
+      id: d
+    }) => d != id);
+    if (isNotExistedReflectItem) {
+      editStatusReflect.value[id] = false;
+      operateIconReflect.value.push({
+        id,
+        renderIcon: (data) => reflectIconWithHandle(data, operator)
+      });
+    }
+  };
+  return {
+    operateIconReflect,
+    editStatusReflect,
+    handleReflectIdToIcon
+  };
+};
+var IconOpen = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24gc3ZnLWljb24tY2xvc2UiCj4KICA8ZyBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjAuNSIgd2lkdGg9IjE1IiBoZWlnaHQ9IjE1IiByeD0iMiIgc3Ryb2tlPSIjNWU3Y2UwIj48L3JlY3Q+CiAgICA8cmVjdCB4PSI0IiB5PSI3IiB3aWR0aD0iOCIgaGVpZ2h0PSIyIiBmaWxsPSIjNWU3Y2UwIj48L3JlY3Q+CiAgPC9nPgo8L3N2Zz4=";
+var IconClose = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNnB4IgogIGhlaWdodD0iMTZweCIKICB2aWV3Qm94PSIwIDAgMTYgMTYiCiAgdmVyc2lvbj0iMS4xIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICBjbGFzcz0ic3ZnLWljb24iCj4KICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxyZWN0IHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSIyIiBzdHJva2U9IiMyNTJiM2EiPjwvcmVjdD4KICAgIDxwYXRoCiAgICAgIGZpbGw9IiMyNTJiM2EiCiAgICAgIGQ9Ik04Ljc1LDQgTDguNzUsNy4yNSBMMTIsNy4yNSBMMTIsOC43NSBMOC43NDksOC43NSBMOC43NSwxMiBMNy4yNSwxMiBMNy4yNDksOC43NSBMNCw4Ljc1IEw0LDcuMjUgTDcuMjUsNy4yNSBMNy4yNSw0IEw4Ljc1LDQgWiIKICAgID48L3BhdGg+CiAgPC9nPgo8L3N2Zz4K";
+var NodeContent = defineComponent({
+  name: "DTreeNodeContent",
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    editStatusReflect: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const tree2 = inject("treeRoot");
+    const getCurID = (id) => `devui-tree-node__input-${id}`;
+    onUpdated(() => {
+      const target = document.querySelector(`#${getCurID(props.node.id)}`);
+      target == null ? void 0 : target.focus();
+    });
+    return () => {
+      const {
+        node,
+        editStatusReflect
+      } = toRefs(props);
+      const {
+        disabled,
+        label,
+        id
+      } = node.value;
+      const handleChange = ({
+        target
+      }) => {
+        node.value.label = target.value;
+      };
+      const handleBlur = () => {
+        editStatusReflect.value[id] = false;
+      };
+      return tree2.ctx.slots.default ? tree2.ctx.slots.default({
+        node
+      }) : createVNode("span", {
+        "class": ["devui-tree-node__title", disabled && "select-disabled"]
+      }, [editStatusReflect.value[id] ? createVNode("input", {
+        "id": getCurID(id),
+        "ref": ref,
+        "value": label,
+        "onChange": handleChange,
+        "onBlur": handleBlur
+      }, null) : label]);
+    };
+  }
+});
+var tree = "";
+var Tree = defineComponent({
+  name: "DTree",
+  props: treeProps,
+  emits: ["nodeSelected"],
+  setup(props, ctx) {
+    const {
+      data,
+      checkable,
+      checkableRelation: cbr
+    } = toRefs(reactive(__spreadProps(__spreadValues({}, props), {
+      data: preCheckTree(props.data)
+    })));
+    const {
+      mergeData
+    } = useMergeNode(data.value);
+    const {
+      openedData,
+      toggle
+    } = useToggle(mergeData);
+    const {
+      nodeClassNameReflect,
+      handleInitNodeClassNameReflect,
+      handleClickOnNode
+    } = useHighlightNode();
+    const {
+      lazyNodesReflect,
+      handleInitLazyNodeReflect,
+      getLazyData
+    } = useLazy();
+    const {
+      selected,
+      onNodeClick
+    } = useChecked(cbr, ctx, data.value);
+    const {
+      editStatusReflect,
+      operateIconReflect,
+      handleReflectIdToIcon
+    } = useOperate();
+    provide("treeRoot", {
+      ctx,
+      props
+    });
+    const Indent = () => {
+      return createVNode("span", {
+        "style": "display: inline-block; width: 16px; height: 16px; margin-left: 8px;"
+      }, null);
+    };
+    const renderNode = (item) => {
+      var _a;
+      const {
+        id = "",
+        label,
+        disabled,
+        open,
+        isParent,
+        level,
+        children,
+        addable,
+        editable,
+        deletable
+      } = item;
+      handleReflectIdToIcon(id, {
+        addable,
+        editable,
+        deletable,
+        handleAdd: () => {
+          const newItem = {
+            id: getId(item.id),
+            label: "new item",
+            level: item.level + 1,
+            addable,
+            editable,
+            deletable
+          };
+          item.open = true;
+          if (item.children && Array.isArray(item.children)) {
+            item.children.push(newItem);
+          } else {
+            item.children = [newItem];
+          }
+        },
+        handleEdit: () => {
+          editStatusReflect.value[id] = !editStatusReflect.value[id];
+        },
+        handleDelete: () => {
+          mergeData.value = deleteNode(id, mergeData.value);
+        }
+      });
+      handleInitNodeClassNameReflect(disabled, id);
+      handleInitLazyNodeReflect(item, {
+        id,
+        onGetNodeData: async () => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve([{
+                id: `It is a test Node-1 ID = ${id}`,
+                label: `It is a test Node-1 ID = ${id}`,
+                level: item.level + 1
+              }, {
+                id: `It is a test Node-2 ID = ${id}`,
+                label: `It is a test Node-2 ID = ${id}`,
+                level: item.level + 1
+              }]);
+            }, 4e3);
+          });
+        },
+        renderLoading: (id2) => {
+          return loading.open({
+            target: document.getElementById(id2),
+            message: "\u52A0\u8F7D\u4E2D...",
+            positionType: "relative",
+            zIndex: 1
+          });
+        }
+      });
+      const renderFoldIcon = (item2) => {
+        const handleClick = async (target) => {
+          if (item2.isParent) {
+            item2.children = await getLazyData(id);
+          }
+          return toggle(target, item2);
+        };
+        return isParent || children && children.length ? open ? createVNode(IconOpen, {
+          "class": "mr-xs",
+          "onClick": handleClick
+        }, null) : createVNode(IconClose, {
+          "class": "mr-xs",
+          "onClick": handleClick
+        }, null) : createVNode(Indent, null, null);
+      };
+      const checkState = CHECK_CONFIG[(_a = selected.value[id]) != null ? _a : "none"];
+      return createVNode("div", {
+        "class": ["devui-tree-node", open && "devui-tree-node__open"],
+        "style": {
+          paddingLeft: `${24 * (level - 1)}px`
+        }
+      }, [createVNode("div", {
+        "class": `devui-tree-node__content ${nodeClassNameReflect.value[id]}`,
+        "onClick": () => handleClickOnNode(id)
+      }, [createVNode("div", {
+        "class": "devui-tree-node__content--value-wrapper"
+      }, [renderFoldIcon(item), checkable.value && createVNode(Checkbox, mergeProps({
+        "key": id,
+        "onClick": () => onNodeClick(item),
+        "disabled": disabled
+      }, checkState), null), createVNode(NodeContent, {
+        "node": item,
+        "editStatusReflect": editStatusReflect.value
+      }, null), operateIconReflect.value.find(({
+        id: d
+      }) => id === d).renderIcon(item), item.isParent ? createVNode("div", {
+        "class": "devui-tree-node_loading",
+        "id": lazyNodesReflect.value[id].loadingTargetId
+      }, null) : null])])]);
+    };
+    return () => {
+      return createVNode("div", {
+        "class": "devui-tree"
+      }, [openedData.value.map((item) => renderNode(item))]);
+    };
+  }
+});
+Tree.install = function(app) {
+  app.component(Tree.name, Tree);
+};
+var index = {
+  title: "Tree \u6811",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "20%",
+  install(app) {
+    app.use(Tree);
+  }
+};
+export { Tree, index as default };