bkui-vue 0.0.1-beta.62 → 0.0.1-beta.65

package/dist/index.esm.js

@@ -2674,18 +2674,18 @@ folder.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M860.8 128H163.2a32 32 0 0 0-27.36 52l295.2 336 0.96 0V896l160-82.72V516.8l0.96 0 295.2-336A32 32 0 0 0 860.8 128Z"}}]}');
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64C264 64 64 264 64 512c0 57.6 11.2 113.6 32 166.4V896c0 17.6 14.4 32 32 32h217.6C576 1019.2 836.8 908.8 928 678.4S908.8 187.2 678.4 96C625.6 75.2 569.6 64 512 64zM500.8 721.6c-27.2 0-48-20.8-48-48s20.8-48 48-48c27.2 0 48 20.8 48 48S528 721.6 500.8 721.6zM587.2 507.2c-36.8 20.8-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8c1.6-70.4 49.6-118.4 136-118.4 80 0 132.8 44.8 132.8 110.4C648 454.4 627.2 484.8 587.2 507.2z"}}]}');
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64zM500.8 721.6c-27.2 0-48-20.8-48-48s20.8-48 48-48c27.2 0 48 20.8 48 48S528 721.6 500.8 721.6zM587.2 507.2c-36.8 20.8-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8c1.6-70.4 49.6-118.4 136-118.4 80 0 132.8 44.8 132.8 110.4C648 454.4 627.2 484.8 587.2 507.2z"}}]}');
-const data$c = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 128c212.8 0 384 171.2 384 384S724.8 896 512 896 128 724.8 128 512 299.2 128 512 128M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64z"}},{"type":"element","name":"path","attributes":{"d":"M548.8 673.6A48 48 0 0 1 500.8 721.6 48 48 0 0 1 452.8 673.6 48 48 0 0 1 548.8 673.6z"}},{"type":"element","name":"path","attributes":{"d":"M513.6 302.4c80 0 132.8 44.8 132.8 110.4 0 41.6-20.8 72-60.8 96-40 24-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8C377.6 352 427.2 302.4 513.6 302.4z"}}]}');
-const help = (props, context) => {
+JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 128c212.8 0 384 171.2 384 384S724.8 896 512 896 128 724.8 128 512 299.2 128 512 128M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64z"}},{"type":"element","name":"path","attributes":{"d":"M548.8 673.6A48 48 0 0 1 500.8 721.6 48 48 0 0 1 452.8 673.6 48 48 0 0 1 548.8 673.6z"}},{"type":"element","name":"path","attributes":{"d":"M513.6 302.4c80 0 132.8 44.8 132.8 110.4 0 41.6-20.8 72-60.8 96-40 24-48 35.2-48 62.4v14.4H464v-16c-3.2-44.8 11.2-70.4 51.2-92.8 36.8-22.4 48-35.2 48-60.8s-20.8-44.8-52.8-44.8c-28.8-1.6-52.8 19.2-56 48 0 1.6 0 1.6 0 3.2h-76.8C377.6 352 427.2 302.4 513.6 302.4z"}}]}');
+JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1303.273","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M664.4363636363637 0C676.8000000000001 0 688.5818181818182 4.945454545454545 697.3090909090909 13.672727272727274L697.3090909090909 13.672727272727274 1010.3272727272728 326.6909090909091C1019.0545454545455 335.41818181818184 1024 347.3454545454546 1024 359.70909090909095L1024 359.70909090909095 1024 1256.7272727272727C1024 1282.4727272727273 1003.2 1303.2727272727273 977.4545454545455 1303.2727272727273L977.4545454545455 1303.2727272727273 46.54545454545455 1303.2727272727273C20.8 1303.2727272727273 0 1282.4727272727273 0 1256.7272727272727L0 1256.7272727272727 0 46.54545454545455C0 20.8 20.8 0 46.54545454545455 0L46.54545454545455 0ZM637.6727272727272 744.7272727272727L474.76363636363635 954.1818181818182 358.40000000000003 814.5454545454546 195.4909090909091 1024 847.1272727272727 1024 637.6727272727272 744.7272727272727ZM465.4545454545455 558.5454545454545C414.041856 558.5454545454545 372.3636363636364 600.2236741818182 372.3636363636364 651.6363636363636 372.3636363636364 703.0490530909091 414.041856 744.7272727272727 465.4545454545455 744.7272727272727 516.8672349090909 744.7272727272727 558.5454545454545 703.0490530909091 558.5454545454545 651.6363636363636 558.5454545454545 600.2236741818182 516.8672349090909 558.5454545454545 465.4545454545455 558.5454545454545ZM642.9090909090909 107.34545454545454L642.9090909090909 381.0909090909091 916.6545454545455 381.0909090909091 642.9090909090909 107.34545454545454Z"}}]}');
+const data$c = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64zM512 896C299.2 896 128 724.8 128 512S299.2 128 512 128s384 171.2 384 384S724.8 896 512 896z"}},{"type":"element","name":"path","attributes":{"d":"M494.4 403.2c-28.8 6.4-56 20.8-76.8 41.6-24 22.4 1.6 44.8 16 27.2 9.6-12.8 24-22.4 40-28.8 11.2-1.6 17.6 1.6 19.2 9.6 1.6 14.4 0 27.2-4.8 41.6-4.8 19.2-14.4 51.2-25.6 94.4-22.4 76.8-33.6 124.8-30.4 140.8 3.2 17.6 12.8 32 28.8 41.6 17.6 8 38.4 9.6 57.6 4.8 30.4-6.4 57.6-22.4 80-44.8 25.6-25.6-3.2-43.2-17.6-28.8-9.6 12.8-24 22.4-40 25.6-14.4 3.2-22.4-3.2-25.6-16-1.6-14.4 1.6-28.8 6.4-41.6 40-136 57.6-212.8 52.8-232-3.2-14.4-12.8-27.2-25.6-33.6C532.8 398.4 512 398.4 494.4 403.2z"}},{"type":"element","name":"path","attributes":{"d":"M608 304A48 48 0 0 1 560 352 48 48 0 0 1 512 304 48 48 0 0 1 608 304z"}}]}');
+const infoLine = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
   return createVNode(bkIcon, mergeProps(p2, {
     "data": data$c,
-    "name": "help"
+    "name": "infoLine"
   }), null);
 };
-help.displayName = "help";
-help.inheritAttrs = false;
-JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1303.273","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M664.4363636363637 0C676.8000000000001 0 688.5818181818182 4.945454545454545 697.3090909090909 13.672727272727274L697.3090909090909 13.672727272727274 1010.3272727272728 326.6909090909091C1019.0545454545455 335.41818181818184 1024 347.3454545454546 1024 359.70909090909095L1024 359.70909090909095 1024 1256.7272727272727C1024 1282.4727272727273 1003.2 1303.2727272727273 977.4545454545455 1303.2727272727273L977.4545454545455 1303.2727272727273 46.54545454545455 1303.2727272727273C20.8 1303.2727272727273 0 1282.4727272727273 0 1256.7272727272727L0 1256.7272727272727 0 46.54545454545455C0 20.8 20.8 0 46.54545454545455 0L46.54545454545455 0ZM637.6727272727272 744.7272727272727L474.76363636363635 954.1818181818182 358.40000000000003 814.5454545454546 195.4909090909091 1024 847.1272727272727 1024 637.6727272727272 744.7272727272727ZM465.4545454545455 558.5454545454545C414.041856 558.5454545454545 372.3636363636364 600.2236741818182 372.3636363636364 651.6363636363636 372.3636363636364 703.0490530909091 414.041856 744.7272727272727 465.4545454545455 744.7272727272727 516.8672349090909 744.7272727272727 558.5454545454545 703.0490530909091 558.5454545454545 651.6363636363636 558.5454545454545 600.2236741818182 516.8672349090909 558.5454545454545 465.4545454545455 558.5454545454545ZM642.9090909090909 107.34545454545454L642.9090909090909 381.0909090909091 916.6545454545455 381.0909090909091 642.9090909090909 107.34545454545454Z"}}]}');
-JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64C264 64 64 264 64 512s200 448 448 448 448-200 448-448S760 64 512 64zM512 896C299.2 896 128 724.8 128 512S299.2 128 512 128s384 171.2 384 384S724.8 896 512 896z"}},{"type":"element","name":"path","attributes":{"d":"M494.4 403.2c-28.8 6.4-56 20.8-76.8 41.6-24 22.4 1.6 44.8 16 27.2 9.6-12.8 24-22.4 40-28.8 11.2-1.6 17.6 1.6 19.2 9.6 1.6 14.4 0 27.2-4.8 41.6-4.8 19.2-14.4 51.2-25.6 94.4-22.4 76.8-33.6 124.8-30.4 140.8 3.2 17.6 12.8 32 28.8 41.6 17.6 8 38.4 9.6 57.6 4.8 30.4-6.4 57.6-22.4 80-44.8 25.6-25.6-3.2-43.2-17.6-28.8-9.6 12.8-24 22.4-40 25.6-14.4 3.2-22.4-3.2-25.6-16-1.6-14.4 1.6-28.8 6.4-41.6 40-136 57.6-212.8 52.8-232-3.2-14.4-12.8-27.2-25.6-33.6C532.8 398.4 512 398.4 494.4 403.2z"}},{"type":"element","name":"path","attributes":{"d":"M608 304A48 48 0 0 1 560 352 48 48 0 0 1 512 304 48 48 0 0 1 608 304z"}}]}');
+infoLine.displayName = "infoLine";
+infoLine.inheritAttrs = false;
 const data$b = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","class":"bk-icon","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;","overflow":"hidden","viewBox":"0 0 1024 1024"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 64A448 448 0 1 1 64 512 448 448 0 0 1 512 64ZM493.92 402.56a156 156 0 0 0-77.12 42.24c-24.32 22.88 1.44 44 16 27.52a82.56 82.56 0 0 1 40.48-28.16c11.04-2.24 17.6 1.28 19.36 10.4A118.88 118.88 0 0 1 488.16 496q-7.2 29.76-26.4 93.92-34.72 116.32-30.08 140.8a54.72 54.72 0 0 0 28.8 40.96 88 88 0 0 0 58.4 5.12 161.76 161.76 0 0 0 80-45.44c25.76-24.96-3.52-43.04-17.28-28a76.32 76.32 0 0 1-39.36 26.08c-14.24 2.88-22.72-2.4-25.28-16A104.96 104.96 0 0 1 522.88 672Q582.24 469.12 576 439.84a46.24 46.24 0 0 0-25.6-33.6A89.6 89.6 0 0 0 493.92 402.56Zm67.84-39.84A49.92 49.92 0 1 0 512 312.96 49.76 49.76 0 0 0 561.76 362.72Z"}}]}');
 const info = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
@@ -2858,7 +2858,7 @@ var Component$A = defineComponent({
       "class": typeClass
     }, [createVNode("div", {
       "class": "bk-alert-wraper"
-    }, [this.showIcon && createVNode(help, {
+    }, [this.showIcon && createVNode(infoLine, {
       "class": "bk-alert-icon-info"
     }, null), createVNode("div", {
       "class": "bk-alert-content"
@@ -2866,7 +2866,7 @@ var Component$A = defineComponent({
       "class": "bk-alert-title"
     }, [this.title]), createVNode("div", {
       "class": "bk-alert-description"
-    }, null)]), createVNode("span", {
+    }, null)]), this.closable && createVNode("span", {
       "class": closeButtonClasses,
       "onClick": this.handleClose
     }, [this.closeText])])]);
@@ -9407,6 +9407,85 @@ var BkCheckboxGroup = defineComponent({
   }
 });
 const BkCheckbox = withInstallProps(Component$q, { Group: BkCheckboxGroup });
+const trimArr$1 = function(s2) {
+  return (s2 || "").split(" ").filter((item) => !!item.trim());
+};
+function removeClass$1(el, cls) {
+  if (!el || !cls)
+    return;
+  const classes2 = trimArr$1(cls);
+  let curClass = el.getAttribute("class") || "";
+  if (el.classList) {
+    el.classList.remove(...classes2);
+    return;
+  }
+  classes2.forEach((item) => {
+    curClass = curClass.replace(` ${item} `, " ");
+  });
+  const className = trimArr$1(curClass).join(" ");
+  el.setAttribute("class", className);
+}
+function addClass$1(el, cls) {
+  if (!el)
+    return;
+  let className = el.getAttribute("class") || "";
+  const curClass = trimArr$1(className);
+  const classes2 = (cls || "").split(" ").filter((item) => !curClass.includes(item) && !!item.trim());
+  if (el.classList) {
+    el.classList.add(...classes2);
+  } else {
+    className += ` ${classes2.join(" ")}`;
+    el.setAttribute("class", className);
+  }
+}
+const collapseMotion$1 = (emit) => ({
+  css: true,
+  onBeforeEnter: (el) => {
+    addClass$1(el, "collapse-transition");
+    if (!el.dataset)
+      el.dataset = {};
+    el.style.height = "0px";
+  },
+  onEnter: (el) => {
+    el.dataset.oldOverflow = el.style.overflow;
+    if (el.scrollHeight !== 0) {
+      el.style.height = `${el.scrollHeight}px`;
+      el.style.maxHeight = `${el.scrollHeight}px`;
+    } else {
+      el.style.height = "0px";
+    }
+    el.style.overflow = "hidden";
+  },
+  onAfterEnter: (el) => {
+    el.style.height = "";
+    el.style.maxHeight = "";
+    el.style.overflow = el.dataset.oldOverflow;
+    removeClass$1(el, "collapse-transition");
+    emit("before-enter");
+  },
+  onBeforeLeave: (el) => {
+    if (!el.dataset)
+      el.dataset = {};
+    el.dataset.oldOverflow = el.style.overflow;
+    el.style.height = `${el.scrollHeight}px`;
+    el.style.maxHeight = `${el.scrollHeight}px`;
+    el.style.overflow = "hidden";
+  },
+  onLeave: (el) => {
+    if (el.scrollHeight !== 0) {
+      addClass$1(el, "collapse-transition");
+      el.style.transitionProperty = "height";
+      el.style.height = "0px";
+    }
+  },
+  onAfterLeave: (el) => {
+    removeClass$1(el, "collapse-transition");
+    el.style.height = "";
+    el.style.maxHeight = "";
+    el.style.overflow = el.dataset.oldOverflow;
+    emit("after-leave");
+  }
+});
 var Component$p = defineComponent({
   name: "Collapse",
   props: {
@@ -9414,16 +9493,27 @@ var Component$p = defineComponent({
     idFiled: PropTypes.string.def("$index"),
     titleField: PropTypes.string.def("name"),
     contentField: PropTypes.string.def("content"),
-    activeIndex: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.number.def(-1)]),
-    activeName: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string).def([]), PropTypes.string.def("")]),
-    accordion: PropTypes.bool.def(true)
+    modelValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number).def([]), PropTypes.arrayOf(PropTypes.string).def([]), PropTypes.number.def(-1)]),
+    accordion: PropTypes.bool.def(false)
   },
+  emits: ["item-click", "update:modelValue", "after-leave", "before-enter"],
   setup(props, {
+    emit,
     slots
   }) {
-    const localActiveItems = ref(null);
-    watch(() => [props.activeName, props.activeIndex], () => {
-      localActiveItems.value = null;
+    const localActiveItems = ref([]);
+    const transition = ref(collapseMotion$1(emit));
+    watch(() => [props.modelValue], () => {
+      const value = props.modelValue;
+      if (Array.isArray(value)) {
+        localActiveItems.value = [...value];
+      } else if (typeof value !== "undefined") {
+        localActiveItems.value = [value];
+      } else {
+        localActiveItems.value = [];
+      }
+    }, {
+      immediate: true
     });
     const collapseData = computed(() => (props.list || []).map((item, index) => {
       if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
@@ -9436,59 +9526,47 @@ var Component$p = defineComponent({
         $index: index
       }, item);
     }));
-    const activeItemIndexList = computed(() => {
-      var _a;
-      if (localActiveItems.value !== null) {
-        return localActiveItems.value.map((item) => item.$index);
-      }
-      if (props.activeName !== null && props.activeName !== void 0 && props.activeName !== "") {
-        const activeNames = resolvePropsActiveValue(props.activeName);
-        return activeNames.map((name2) => collapseData.value.findIndex((item) => item[props.idFiled] === name2));
-      }
-      return resolvePropsActiveValue((_a = props.activeIndex) != null ? _a : 0);
-    });
-    const resolvePropsActiveValue = (prop) => {
-      if (Array.isArray(prop)) {
-        return props.accordion ? resolvePropsActiveValue(prop[0]) : prop;
-      }
-      if (typeof prop === "string" || typeof prop === "number") {
-        return [prop];
-      }
-      return [];
-    };
     const handleItemClick = (item) => {
-      if (localActiveItems.value === null) {
-        localActiveItems.value = [item];
+      if (item.disabled)
+        return;
+      if (props.accordion) {
+        const activeItemIndex = localActiveItems.value.findIndex((local) => local === item[props.idFiled]);
+        if (activeItemIndex >= 0) {
+          localActiveItems.value.splice(activeItemIndex, 1);
+        } else {
+          localActiveItems.value = [item[props.idFiled]];
+        }
       } else {
-        if (props.accordion) {
-          localActiveItems.value = [item];
+        const activeItemIndex = localActiveItems.value.findIndex((local) => local === item[props.idFiled]);
+        if (activeItemIndex >= 0) {
+          localActiveItems.value.splice(activeItemIndex, 1);
         } else {
-          const activeItemIndex = localActiveItems.value.findIndex((local) => local.$index === item.$index);
-          if (activeItemIndex >= 0) {
-            localActiveItems.value.splice(activeItemIndex, 1);
-          } else {
-            localActiveItems.value.push(item);
-          }
+          localActiveItems.value.push(item[props.idFiled]);
         }
       }
+      emit("item-click", item);
+      emit("update:modelValue", localActiveItems.value);
     };
-    const isItemActive = (item) => activeItemIndexList.value.some((activeIndex) => activeIndex === item.$index);
+    const isItemActive = (item) => localActiveItems.value.includes(item[props.idFiled]);
     const renderItems = () => collapseData.value.map((item) => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       return createVNode("div", {
-        "class": "bk-collapse-item"
+        "class": `bk-collapse-item ${item.disabled ? "is-disabled" : ""} ${isItemActive(item) ? "bk-collapse-item-active" : ""}`
       }, [createVNode("div", {
         "class": "bk-collapse-header",
         "onClick": () => handleItemClick(item)
       }, [createVNode("span", {
         "class": "bk-collapse-title"
-      }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots, item)) != null ? _b : item[props.titleField]]), isItemActive(item) ? createVNode(angleDown, {
-        "class": "bk-collapse-icon"
-      }, null) : createVNode(angleRight, {
-        "class": "bk-collapse-icon"
-      }, null)]), createVNode("div", {
-        "class": `bk-collapse-content ${isItemActive(item) && "active" || ""}`
-      }, [(_d = (_c = slots.content) == null ? void 0 : _c.call(slots, item)) != null ? _d : item[props.contentField]])]);
+      }, [(_b = (_a = slots.default) == null ? void 0 : _a.call(slots, item)) != null ? _b : item[props.titleField]]), createVNode(angleRight, {
+        "class": `bk-collapse-icon ${isItemActive(item) && "rotate-icon" || ""}`
+      }, null)]), createVNode(Transition, transition.value, {
+        default: () => {
+          var _a2, _b2;
+          return [withDirectives(createVNode("div", {
+            "class": `bk-collapse-content ${isItemActive(item) && "active" || ""}`
+          }, [(_b2 = (_a2 = slots.content) == null ? void 0 : _a2.call(slots, item)) != null ? _b2 : item[props.contentField]]), [[vShow, isItemActive(item)]])];
+        }
+      })]);
     });
     const className = "bk-collapse-wrapper";
     return () => createVNode("div", {
@@ -9496,7 +9574,7 @@ var Component$p = defineComponent({
     }, [renderItems()]);
   }
 });
-const BkCollaspe = withInstall(Component$p);
+const BkCollapse = withInstall(Component$p);
 const propsMixin$1 = {
   isShow: PropTypes.bool.def(false),
   width: PropTypes.string.def("50%") || PropTypes.number,
@@ -13893,12 +13971,12 @@ var Settings = defineComponent({
     });
   }
 });
-let EVENTS;
+let EVENTS$1;
 (function(EVENTS2) {
   EVENTS2["ON_SORT_BY_CLICK"] = "onSortByClick";
   EVENTS2["ON_FILTER_CLICK"] = "onFilterClick";
   EVENTS2["ON_SETTING_CHANGE"] = "onSettingChange";
-})(EVENTS || (EVENTS = {}));
+})(EVENTS$1 || (EVENTS$1 = {}));
 class TableRender {
   constructor(props, ctx, reactiveProp, colgroups) {
     __publicField(this, "getRowHeight", (row, rowIndex) => {
@@ -13951,7 +14029,7 @@ class TableRender {
           col.isHidden = !(checked != null ? checked : []).includes(resolvePropVal(col, "field", [col]));
         });
       }
-      this.emitEvent(EVENTS.ON_SETTING_CHANGE, [arg]);
+      this.emitEvent(EVENTS$1.ON_SETTING_CHANGE, [arg]);
     };
     return [this.props.settings ? createVNode(Settings, {
       "class": "table-head-settings",
@@ -14031,7 +14109,7 @@ class TableRender {
   }
   getSortCell(column, index) {
     const hanldeSortClick = (sortFn, type) => {
-      this.emitEvent(EVENTS.ON_SORT_BY_CLICK, [{
+      this.emitEvent(EVENTS$1.ON_SORT_BY_CLICK, [{
         sortFn,
         column,
         index,
@@ -14046,7 +14124,7 @@ class TableRender {
   getFilterCell(column, index) {
     const handleFilterChange = (checked, filterFn) => {
       const filterFn0 = (row, index2) => filterFn(checked, row, index2);
-      this.emitEvent(EVENTS.ON_FILTER_CLICK, [{
+      this.emitEvent(EVENTS$1.ON_FILTER_CLICK, [{
         filterFn: filterFn0,
         checked,
         column,
@@ -14298,19 +14376,19 @@ var Component$7 = defineComponent({
     watchEffect(() => {
       watchEffectFn(columnFilterFn, columnSortFn);
     });
-    tableRender.on(EVENTS.ON_SORT_BY_CLICK, (args) => {
+    tableRender.on(EVENTS$1.ON_SORT_BY_CLICK, (args) => {
       const {
         sortFn
       } = args;
       columnSortFn = sortFn;
       pageData.sort(columnSortFn);
-    }).on(EVENTS.ON_FILTER_CLICK, (args) => {
+    }).on(EVENTS$1.ON_FILTER_CLICK, (args) => {
       const {
         filterFn
       } = args;
       columnFilterFn = filterFn;
       resolvePageData(columnFilterFn, columnSortFn);
-    }).on(EVENTS.ON_SETTING_CHANGE, (args) => {
+    }).on(EVENTS$1.ON_SETTING_CHANGE, (args) => {
       var _a, _b;
       const {
         checked = []
@@ -15372,6 +15450,7 @@ const tabNavProps = __spreadValues({
     type: Array,
     default: () => []
   },
+  tabPosition: PropTypes.commonType(["left", "right", "top"], "position").def("top"),
   closable: Boolean,
   addable: Boolean,
   sortable: Boolean,
@@ -15453,51 +15532,49 @@ var TabNav = defineComponent({
     const dragenterIndex = ref(-1);
     const dragStartIndex = ref(-1);
     const draggingEle = ref("");
-    return {
+    const distinctRoots = (el1, el2) => el1 === el2;
+    const methods = {
+      handleTabAdd(e) {
+        props.tabAdd(e);
+      },
+      dragstart(index, $event) {
+        dragStartIndex.value = index;
+        draggingEle.value = props.guid;
+        Object.assign($event.dataTransfer, {
+          effectAllowed: "move"
+        });
+        props.tabDrag(index, $event);
+      },
+      dragenter(index) {
+        if (distinctRoots(draggingEle.value, props.guid)) {
+          dragenterIndex.value = index;
+        }
+      },
+      dragend() {
+        dragenterIndex.value = -1;
+        dragStartIndex.value = -1;
+        draggingEle.value = null;
+      },
+      drop(index, sortType) {
+        if (!distinctRoots(draggingEle.value, props.guid)) {
+          return false;
+        }
+        props.tabSort(dragStartIndex.value, index, sortType);
+      },
+      handleTabChange(name2) {
+        props.tabChange(name2);
+      },
+      handleTabRemove(index, panel) {
+        props.tabRemove(index, panel);
+      }
+    };
+    return __spreadProps(__spreadValues({}, methods), {
       navs,
       dragenterIndex,
       dragStartIndex,
       draggingEle,
       guid: Math.random().toString(16).substr(4) + Math.random().toString(16).substr(4)
-    };
-  },
-  methods: {
-    distinctRoots(el1, el2) {
-      return el1 === el2;
-    },
-    handleTabAdd(e) {
-      this.tabAdd(e);
-    },
-    dragstart(index, $event) {
-      this.dragStartIndex = index;
-      this.draggingEle = this.guid;
-      Object.assign($event.dataTransfer, {
-        effectAllowed: "move"
-      });
-      this.tabDrag(index, $event);
-    },
-    dragenter(index) {
-      if (this.distinctRoots(this.draggingEle, this.guid)) {
-        this.dragenterIndex = index;
-      }
-    },
-    dragend() {
-      this.dragenterIndex = -1;
-      this.dragStartIndex = -1;
-      this.draggingEle = null;
-    },
-    drop(index, sortType) {
-      if (!this.distinctRoots(this.draggingEle, this.guid)) {
-        return false;
-      }
-      this.tabSort(this.dragStartIndex, index, sortType);
-    },
-    handleTabChange(name2) {
-      this.tabChange(name2);
-    },
-    handleTabRemove(index, panel) {
-      this.tabRemove(index, panel);
-    }
+    });
   },
   render() {
     const {
@@ -15617,17 +15694,12 @@ var Tab = defineComponent({
     "drag"
   ],
   setup(_props, {
-    slots
+    slots,
+    emit
   }) {
     const isMounted = ref(false);
     const panels = ref([]);
     const instance = getCurrentInstance();
-    if (typeof slots.panel === "function") {
-      panels.value = slots.panel();
-    }
-    if (typeof slots.default === "function") {
-      panels.value = slots.default();
-    }
     const getPaneInstanceFromSlot = (vnode, panelInstanceList = []) => {
       const {
         children
@@ -15654,7 +15726,7 @@ var Tab = defineComponent({
           return;
         const content = children[0];
         const panelInstanceList = getPaneInstanceFromSlot(content);
-        const isChanged = !(panelInstanceList.length === panels.value.length && panelInstanceList.every((panel, index) => panel.uid === panels.value[index].uid));
+        const isChanged = panelInstanceList.length !== panels.value.length;
         if (isChanged) {
           panels.value = panelInstanceList;
         }
@@ -15667,52 +15739,54 @@ var Tab = defineComponent({
     onUpdated(() => {
       setPanelInstances();
     });
-    return {
-      isMounted,
-      panels
-    };
-  },
-  methods: {
-    tabAdd(e) {
-      this.$emit("add", {
-        e
-      });
-      this.$emit("add-panel", {
-        e
-      });
-    },
-    tabChange(name2) {
-      this.$emit("change", name2);
-      this.$emit("tab-change", name2);
-      this.$emit("update:active", name2);
-    },
-    tabRemove(index, panel) {
-      this.$emit("remove", index, panel);
-      this.$emit("remove-panel", index, panel);
-    },
-    tabSort(dragTabIndex, dropTabIndex, sortType) {
-      if (sortType === "insert") {
-        if (dragTabIndex < dropTabIndex) {
-          this.panels.splice(dropTabIndex + 1, 0, this.panels[dragTabIndex]);
-          this.panels.splice(dragTabIndex, 1);
-        } else if (dragTabIndex > dropTabIndex) {
-          this.panels.splice(dropTabIndex, 0, this.panels[dragTabIndex]);
-          this.panels.splice(dragTabIndex + 1, 1);
+    const methods = {
+      tabAdd(e) {
+        emit("add", {
+          e
+        });
+        emit("add-panel", {
+          e
+        });
+      },
+      tabChange(name2) {
+        emit("change", name2);
+        emit("tab-change", name2);
+        emit("update:active", name2);
+      },
+      tabRemove(index, panel) {
+        emit("remove", index, panel);
+        emit("remove-panel", index, panel);
+      },
+      tabSort(dragTabIndex, dropTabIndex, sortType) {
+        const list = panels.value;
+        if (sortType === "insert") {
+          if (dragTabIndex < dropTabIndex) {
+            list.splice(dropTabIndex + 1, 0, panels[dragTabIndex]);
+            list.splice(dragTabIndex, 1);
+          } else if (dragTabIndex > dropTabIndex) {
+            list.splice(dropTabIndex, 0, panels[dragTabIndex]);
+            list.splice(dragTabIndex + 1, 1);
+          } else {
+            return false;
+          }
         } else {
-          return false;
+          const swap = list[dropTabIndex];
+          list[dropTabIndex] = list[dragTabIndex];
+          list[dragTabIndex] = swap;
         }
-      } else {
-        const swap = this.panels[dropTabIndex];
-        this.panels[dropTabIndex] = this.panels[dragTabIndex];
-        this.panels[dragTabIndex] = swap;
+        panels.value = [...list];
+        emit("sort", dragTabIndex, dropTabIndex, sortType);
+        emit("sort-change", dragTabIndex, dropTabIndex, sortType);
+      },
+      tabDrag(dragTabIndex, dragEvent) {
+        emit("drag", dragTabIndex, dragEvent);
+        emit("on-drag-tab", dragTabIndex, dragEvent);
       }
-      this.$emit("sort", dragTabIndex, dropTabIndex, sortType);
-      this.$emit("sort-change", dragTabIndex, dropTabIndex, sortType);
-    },
-    tabDrag(dragTabIndex, dragEvent) {
-      this.$emit("drag", dragTabIndex, dragEvent);
-      this.$emit("on-drag-tab", dragTabIndex, dragEvent);
-    }
+    };
+    return __spreadProps(__spreadValues({}, methods), {
+      isMounted,
+      panels
+    });
   },
   render() {
     var _a, _b;
@@ -15736,6 +15810,7 @@ var Tab = defineComponent({
         validateActive,
         changeOnHover,
         changeOnHoverDelay,
+        tabPosition,
         tabAdd,
         tabChange,
         tabRemove,
@@ -15755,6 +15830,7 @@ var Tab = defineComponent({
         validateActive,
         changeOnHover,
         changeOnHoverDelay,
+        tabPosition,
         tabAdd,
         tabChange,
         tabRemove,
@@ -19932,6 +20008,10 @@ const datePickerProps = {
     type: Number,
     default: -1
   },
+  headerSlotCls: {
+    type: String,
+    default: ""
+  },
   footerSlotCls: {
     type: String,
     default: ""
@@ -20034,6 +20114,8 @@ var Component$3 = defineComponent({
       return visualValue.value;
     });
     const isConfirm = computed(() => !!slots.trigger || props.type === "datetime" || props.type === "datetimerange" || props.multiple);
+    const hasHeader = computed(() => !!slots.header);
+    const hasFooter = computed(() => !!slots.footer);
     const fontSizeCls = computed(() => {
       let cls = "";
       if (props.fontSize === "medium") {
@@ -20059,7 +20141,6 @@ var Component$3 = defineComponent({
       }
       return !props.editable || props.readonly;
     });
-    const hasFooter = computed(() => !!slots.footer);
     const allowCrossDayProp = computed(() => panel.value === "RangeTimePickerPanel" ? props.allowCrossDay : false);
     const inputRef = ref(null);
     const inputFocus = () => {
@@ -20315,10 +20396,11 @@ var Component$3 = defineComponent({
       visualValue,
       displayValue,
       isConfirm,
+      hasHeader,
+      hasFooter,
       fontSizeCls,
       longWidthCls,
       localReadonly,
-      hasFooter,
       allowCrossDayProp,
       pickerDropdownRef,
       inputRef,
@@ -20430,35 +20512,42 @@ var Component$3 = defineComponent({
           "appendToBody": this.appendToBody,
           "onClick": this.handleTransferClick
         }, {
-          default: () => [this.panel === "DateRangePanel" ? createVNode(DateRangePanel, {
-            "ref": "pickerPanelRef",
-            "type": this.type,
-            "confirm": this.isConfirm,
-            "shortcuts": this.shortcuts,
-            "modelValue": this.internalValue,
-            "selectionMode": this.selectionMode,
-            "startDate": this.startDate,
-            "disableDate": this.disableDate,
-            "focusedDate": this.focusedDate,
-            "onPick": this.onPick,
-            "onPick-success": this.onPickSuccess
-          }, null) : createVNode(DatePanel, {
-            "ref": "pickerPanelRef",
-            "clearable": this.clearable,
-            "showTime": this.type === "datetime" || this.type === "datetimerange",
-            "confirm": this.isConfirm,
-            "shortcuts": this.shortcuts,
-            "multiple": this.multiple,
-            "shortcutClose": this.shortcutClose,
-            "selectionMode": this.selectionMode,
-            "modelValue": this.internalValue,
-            "startDate": this.startDate,
-            "disableDate": this.disableDate,
-            "focusedDate": this.focusedDate,
-            "onPick": this.onPick,
-            "onPick-clear": this.handleClear,
-            "onPick-success": this.onPickSuccess
-          }, null)]
+          default: () => {
+            var _a2, _b2, _c2, _d, _e, _f;
+            return [this.hasHeader ? createVNode("div", {
+              "class": ["bk-date-picker-top-wrapper", this.headerSlotCls]
+            }, [(_c2 = (_b2 = (_a2 = this.$slots).header) == null ? void 0 : _b2.call(_a2)) != null ? _c2 : null]) : null, this.panel === "DateRangePanel" ? createVNode(DateRangePanel, {
+              "ref": "pickerPanelRef",
+              "type": this.type,
+              "confirm": this.isConfirm,
+              "shortcuts": this.shortcuts,
+              "modelValue": this.internalValue,
+              "selectionMode": this.selectionMode,
+              "startDate": this.startDate,
+              "disableDate": this.disableDate,
+              "focusedDate": this.focusedDate,
+              "onPick": this.onPick,
+              "onPick-success": this.onPickSuccess
+            }, null) : createVNode(DatePanel, {
+              "ref": "pickerPanelRef",
+              "clearable": this.clearable,
+              "showTime": this.type === "datetime" || this.type === "datetimerange",
+              "confirm": this.isConfirm,
+              "shortcuts": this.shortcuts,
+              "multiple": this.multiple,
+              "shortcutClose": this.shortcutClose,
+              "selectionMode": this.selectionMode,
+              "modelValue": this.internalValue,
+              "startDate": this.startDate,
+              "disableDate": this.disableDate,
+              "focusedDate": this.focusedDate,
+              "onPick": this.onPick,
+              "onPick-clear": this.handleClear,
+              "onPick-success": this.onPickSuccess
+            }, null), this.hasFooter ? createVNode("div", {
+              "class": ["bk-date-picker-footer-wrapper", this.footerSlotCls]
+            }, [(_f = (_e = (_d = this.$slots).footer) == null ? void 0 : _e.call(_d)) != null ? _f : null]) : null];
+          }
         }), [[vShow, this.opened]])]
       })]
     })]), [[resolveDirective("clickoutside"), this.handleClose]]);
@@ -20888,6 +20977,29 @@ var Component$2 = defineComponent({
   }
 });
 const Transfer = withInstall(Component$2);
+var EVENTS = /* @__PURE__ */ ((EVENTS2) => {
+  EVENTS2["NODE_CLICK"] = "node-click";
+  EVENTS2["NODE_COLLAPSE"] = "node-collapse";
+  EVENTS2["NODE_EXPAND"] = "node-expand";
+  return EVENTS2;
+})(EVENTS || {});
+var NODE_ATTRIBUTES = /* @__PURE__ */ ((NODE_ATTRIBUTES2) => {
+  NODE_ATTRIBUTES2["DEPTH"] = "__depth";
+  NODE_ATTRIBUTES2["INDEX"] = "__index";
+  NODE_ATTRIBUTES2["UUID"] = "__uuid";
+  NODE_ATTRIBUTES2["PARENT_ID"] = "__parent_id";
+  NODE_ATTRIBUTES2["HAS_CHILD"] = "__has_child";
+  NODE_ATTRIBUTES2["PATH"] = "__path";
+  NODE_ATTRIBUTES2["IS_ROOT"] = "__is_root";
+  NODE_ATTRIBUTES2["ORDER"] = "__order";
+  NODE_ATTRIBUTES2["IS_OPENED"] = "__is_open";
+  NODE_ATTRIBUTES2["IS_CHECKED"] = "__is_checked";
+  NODE_ATTRIBUTES2["IS_SELECTED"] = "__is_selected";
+  NODE_ATTRIBUTES2["IS_ASYNC_INIT"] = "__is_async_init";
+  NODE_ATTRIBUTES2["IS_MATCH"] = "__is_match";
+  NODE_ATTRIBUTES2["IS_NULL"] = "__IS_NULL";
+  return NODE_ATTRIBUTES2;
+})(NODE_ATTRIBUTES || {});
 const treeProps = {
   data: PropTypes.arrayOf(PropTypes.any).def([]),
   label: PropTypes.oneOfType([PropTypes.func.def(void 0), PropTypes.string.def("label")]),
@@ -20930,7 +21042,11 @@ const treeProps = {
     PropTypes.number,
     PropTypes.bool
   ]).def(void 0),
-  emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E")
+  emptyText: PropTypes.string.def("\u6CA1\u6709\u6570\u636E"),
+  draggable: PropTypes.bool.def(false),
+  dragSort: PropTypes.bool.def(false),
+  selectable: PropTypes.bool.def(true),
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.any]).def(null)
 };
 var useEmpty = (props, {
   slots
@@ -20945,235 +21061,80 @@ var useEmpty = (props, {
     }
   })
 });
-var rngBrowser = { exports: {} };
-var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
-if (getRandomValues) {
-  var rnds8 = new Uint8Array(16);
-  rngBrowser.exports = function whatwgRNG() {
-    getRandomValues(rnds8);
-    return rnds8;
+var useNodeAttribute = (flatData, props) => {
+  const getSchemaVal2 = (key) => flatData.schema.get(key);
+  const getNodeAttr2 = (node, attr) => {
+    var _a;
+    return (_a = getSchemaVal2(node[NODE_ATTRIBUTES.UUID])) == null ? void 0 : _a[attr];
   };
-} else {
-  var rnds = new Array(16);
-  rngBrowser.exports = function mathRNG() {
-    for (var i = 0, r2; i < 16; i++) {
-      if ((i & 3) === 0)
-        r2 = Math.random() * 4294967296;
-      rnds[i] = r2 >>> ((i & 3) << 3) & 255;
+  const setNodeAttr = (node, attr, val) => flatData.schema.set(node[NODE_ATTRIBUTES.UUID], __spreadProps(__spreadValues({}, getSchemaVal2(node[NODE_ATTRIBUTES.UUID])), {
+    [attr]: val
+  }));
+  const getNodePath = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.PATH);
+  const getNodeId = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.UUID);
+  const isRootNode = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.IS_ROOT);
+  const isNodeOpened = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.IS_OPENED);
+  const hasChildNode = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.HAS_CHILD);
+  const isNodeMatched = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.IS_MATCH);
+  const isNodeChecked = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.IS_CHECKED);
+  const getNodeParentId = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.PARENT_ID);
+  const getNodeParentIdById = (id) => getNodeAttr2({
+    [NODE_ATTRIBUTES.UUID]: id
+  }, NODE_ATTRIBUTES.PARENT_ID);
+  const deleteNodeSchema = (id) => flatData.schema.delete(id);
+  const isItemOpen = (item) => {
+    var _a;
+    if (typeof item === "object") {
+      return isNodeOpened(item);
     }
-    return rnds;
+    if (typeof item === "string") {
+      return (_a = getSchemaVal2(item)) == null ? void 0 : _a[NODE_ATTRIBUTES.IS_OPENED];
+    }
+    return false;
   };
-}
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex[i] = (i + 256).toString(16).substr(1);
-}
-function bytesToUuid$2(buf, offset2) {
-  var i = offset2 || 0;
-  var bth = byteToHex;
-  return [
-    bth[buf[i++]],
-    bth[buf[i++]],
-    bth[buf[i++]],
-    bth[buf[i++]],
-    "-",
-    bth[buf[i++]],
-    bth[buf[i++]],
-    "-",
-    bth[buf[i++]],
-    bth[buf[i++]],
-    "-",
-    bth[buf[i++]],
-    bth[buf[i++]],
-    "-",
-    bth[buf[i++]],
-    bth[buf[i++]],
-    bth[buf[i++]],
-    bth[buf[i++]],
-    bth[buf[i++]],
-    bth[buf[i++]]
-  ].join("");
-}
-var bytesToUuid_1 = bytesToUuid$2;
-var rng$1 = rngBrowser.exports;
-var bytesToUuid$1 = bytesToUuid_1;
-var _nodeId;
-var _clockseq;
-var _lastMSecs = 0;
-var _lastNSecs = 0;
-function v1$1(options, buf, offset2) {
-  var i = buf && offset2 || 0;
-  var b2 = buf || [];
-  options = options || {};
-  var node = options.node || _nodeId;
-  var clockseq = options.clockseq !== void 0 ? options.clockseq : _clockseq;
-  if (node == null || clockseq == null) {
-    var seedBytes = rng$1();
-    if (node == null) {
-      node = _nodeId = [
-        seedBytes[0] | 1,
-        seedBytes[1],
-        seedBytes[2],
-        seedBytes[3],
-        seedBytes[4],
-        seedBytes[5]
-      ];
-    }
-    if (clockseq == null) {
-      clockseq = _clockseq = (seedBytes[6] << 8 | seedBytes[7]) & 16383;
-    }
-  }
-  var msecs = options.msecs !== void 0 ? options.msecs : new Date().getTime();
-  var nsecs = options.nsecs !== void 0 ? options.nsecs : _lastNSecs + 1;
-  var dt = msecs - _lastMSecs + (nsecs - _lastNSecs) / 1e4;
-  if (dt < 0 && options.clockseq === void 0) {
-    clockseq = clockseq + 1 & 16383;
-  }
-  if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === void 0) {
-    nsecs = 0;
-  }
-  if (nsecs >= 1e4) {
-    throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
-  }
-  _lastMSecs = msecs;
-  _lastNSecs = nsecs;
-  _clockseq = clockseq;
-  msecs += 122192928e5;
-  var tl = ((msecs & 268435455) * 1e4 + nsecs) % 4294967296;
-  b2[i++] = tl >>> 24 & 255;
-  b2[i++] = tl >>> 16 & 255;
-  b2[i++] = tl >>> 8 & 255;
-  b2[i++] = tl & 255;
-  var tmh = msecs / 4294967296 * 1e4 & 268435455;
-  b2[i++] = tmh >>> 8 & 255;
-  b2[i++] = tmh & 255;
-  b2[i++] = tmh >>> 24 & 15 | 16;
-  b2[i++] = tmh >>> 16 & 255;
-  b2[i++] = clockseq >>> 8 | 128;
-  b2[i++] = clockseq & 255;
-  for (var n2 = 0; n2 < 6; ++n2) {
-    b2[i + n2] = node[n2];
-  }
-  return buf ? buf : bytesToUuid$1(b2);
-}
-var v1_1 = v1$1;
-var rng = rngBrowser.exports;
-var bytesToUuid = bytesToUuid_1;
-function v4$1(options, buf, offset2) {
-  var i = buf && offset2 || 0;
-  if (typeof options == "string") {
-    buf = options === "binary" ? new Array(16) : null;
-    options = null;
-  }
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)();
-  rnds[6] = rnds[6] & 15 | 64;
-  rnds[8] = rnds[8] & 63 | 128;
-  if (buf) {
-    for (var ii = 0; ii < 16; ++ii) {
-      buf[i + ii] = rnds[ii];
-    }
-  }
-  return buf || bytesToUuid(rnds);
-}
-var v4_1 = v4$1;
-var v1 = v1_1;
-var v4 = v4_1;
-var uuid = v4;
-uuid.v1 = v1;
-uuid.v4 = v4;
-var uuid_1 = uuid;
-const DEFAULT_LEVLE_LINE = "1px dashed #c3cdd7";
-var NODE_ATTRIBUTES = /* @__PURE__ */ ((NODE_ATTRIBUTES2) => {
-  NODE_ATTRIBUTES2["DEPTH"] = "__depth";
-  NODE_ATTRIBUTES2["INDEX"] = "__index";
-  NODE_ATTRIBUTES2["UUID"] = "__uuid";
-  NODE_ATTRIBUTES2["PARENT_ID"] = "__parentId";
-  NODE_ATTRIBUTES2["HAS_CHILD"] = "__hasChild";
-  NODE_ATTRIBUTES2["PATH"] = "__path";
-  NODE_ATTRIBUTES2["IS_ROOT"] = "__isRoot";
-  NODE_ATTRIBUTES2["ORDER"] = "__order";
-  NODE_ATTRIBUTES2["IS_OPEN"] = "__isOpen";
-  NODE_ATTRIBUTES2["CHECKED"] = "__checked";
-  NODE_ATTRIBUTES2["IS_ASYNC_INIT"] = "__isAsyncInit";
-  NODE_ATTRIBUTES2["IS_MATCH"] = "__isMatch";
-  return NODE_ATTRIBUTES2;
-})(NODE_ATTRIBUTES || {});
-const getFlatdata = (props, treeData = void 0, cachedSchema = []) => {
-  const { data: data2, children } = props;
-  const outputData = [];
-  let order2 = 0;
-  const schema = /* @__PURE__ */ new Map();
-  function getUid(item) {
-    let uid = null;
-    if (typeof props.nodeKey === "string") {
-      uid = item[props.nodeKey];
-    }
-    return uid || item["__uuid"] || uuid_1.v4();
-  }
-  function getCachedTreeNodeAttr(uuid2, node, attr, cachedAttr, defaultValue = void 0) {
-    const cached = (cachedSchema || []).find((item) => item["__uuid"] === uuid2);
-    let result = void 0;
-    if (cached) {
-      result = cached[cachedAttr];
-    } else {
-      result = node[attr];
-    }
-    if (result === void 0) {
-      result = defaultValue;
-    }
-    return result;
-  }
-  function isCachedTreeNodeOpened(uuid2, node) {
-    return getCachedTreeNodeAttr(uuid2, node, "isOpen", "__isOpen", false);
-  }
-  function isCachedTreeNodeChecked(uuid2, node) {
-    return getCachedTreeNodeAttr(uuid2, node, "checked", "__checked", false);
-  }
-  function isCachedTreeNodeMatch(uuid2, node) {
-    return getCachedTreeNodeAttr(uuid2, node, "isMatch", "__isMatch", true);
-  }
-  function flatten(array, depth = 0, parent = null, path = null) {
-    const arrLength = array.length;
-    for (let i = 0; i < arrLength; i++) {
-      const item = array[i];
-      if (Array.isArray(item)) {
-        flatten(item, depth, parent, path);
-      } else {
-        if (typeof item === "object" && item !== null) {
-          const uuid2 = getUid(item);
-          const currentPath = path !== null ? `${path}-${i}` : `${i}`;
-          const hasChildren = !!(item[children] || []).length;
-          const attrs = {
-            ["__depth"]: depth,
-            ["__index"]: i,
-            ["__uuid"]: uuid2,
-            ["__parentId"]: parent,
-            ["__hasChild"]: hasChildren,
-            ["__path"]: currentPath,
-            ["__isRoot"]: parent === null,
-            ["__order"]: order2,
-            ["__isMatch"]: isCachedTreeNodeMatch(uuid2, item),
-            ["__isOpen"]: isCachedTreeNodeOpened(uuid2, item),
-            ["__checked"]: isCachedTreeNodeChecked(uuid2, item),
-            [children]: null
-          };
-          Object.assign(item, { ["__uuid"]: uuid2 });
-          schema.set(uuid2, attrs);
-          order2 += 1;
-          outputData.push(__spreadProps(__spreadValues({}, item), {
-            [children]: null
-          }));
-          if (Object.prototype.hasOwnProperty.call(item, children)) {
-            flatten(item[children] || [], depth + 1, uuid2, currentPath);
-          }
-        }
-      }
+  const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, NODE_ATTRIBUTES.PARENT_ID));
+  const getSourceNodeByPath = (path) => {
+    const paths = path.split("-");
+    return paths.reduce((pre, nodeIndex) => {
+      const index = Number(nodeIndex);
+      return Array.isArray(pre) ? pre[index] : pre[props.children][index];
+    }, props.data);
+  };
+  const getSourceNodeByUID = (uid) => getSourceNodeByPath(getNodePath({
+    [NODE_ATTRIBUTES.UUID]: uid
+  }));
+  const getParentNodeData = (uid) => {
+    if (isRootNode({
+      [NODE_ATTRIBUTES.UUID]: uid
+    })) {
+      return {
+        [props.children]: props.data
+      };
     }
-  }
-  flatten(treeData ? treeData : data2);
-  return [outputData, schema];
+    return getSourceNodeByUID(getNodeParentIdById(uid));
+  };
+  return {
+    getSchemaVal: getSchemaVal2,
+    getNodeAttr: getNodeAttr2,
+    getNodeId,
+    getNodeParentId,
+    getNodeParentIdById,
+    getParentNodeData,
+    setNodeAttr,
+    getNodePath,
+    isRootNode,
+    isNodeOpened,
+    hasChildNode,
+    isItemOpen,
+    isNodeChecked,
+    isNodeMatched,
+    checkNodeIsOpen,
+    getSourceNodeByPath,
+    getSourceNodeByUID,
+    deleteNodeSchema
+  };
 };
+const DEFAULT_LEVLE_LINE = "1px dashed #c3cdd7";
 const getPropsOneOfBoolValueWithDefault = (props, key, item = null, defaultTrueValue = null, defaultFalseValue = null, args = []) => {
   const prop = props[key];
   if (typeof prop === "boolean") {
@@ -21219,7 +21180,7 @@ const getTreeStyle = (item, props) => {
 };
 const getNodeItemStyle = (item, props, flatData = {}) => {
   const { schema } = flatData;
-  const depth = getNodeAttr(schema, item["__uuid"], "__depth");
+  const depth = getNodeAttr(schema, item[NODE_ATTRIBUTES.UUID], NODE_ATTRIBUTES.DEPTH);
   return __spreadValues({
     "--depth": depth
   }, typeof props.levelLine === "function" ? {
@@ -21229,19 +21190,20 @@ const getNodeItemStyle = (item, props, flatData = {}) => {
   } : {});
 };
 const getNodeItemClass = (item, schema, props) => {
-  const { __isRoot, __isOpen } = getSchemaVal(schema, item["__uuid"]) || {};
+  const { __is_root, __is_open } = getSchemaVal(schema, item[NODE_ATTRIBUTES.UUID]) || {};
   return {
-    "is-root": __isRoot,
+    "is-root": __is_root,
     "bk-tree-node": true,
-    "is-open": __isOpen,
+    "is-open": __is_open,
     "is-virtual-render": props.virtualRender,
     "level-line": props.levelLine
   };
 };
 const getNodeRowClass = (item, schema) => {
-  const { __checked } = getSchemaVal(schema, item["__uuid"]) || {};
+  const { __is_checked, __is_selected } = getSchemaVal(schema, item[NODE_ATTRIBUTES.UUID]) || {};
   return {
-    "is-checked": __checked,
+    "is-checked": __is_checked,
+    "is-selected": __is_selected,
     [resolveClassName("node-row")]: true
   };
 };
@@ -21256,47 +21218,20 @@ const assignTreeNode = (path, treeData, childKey, assignVal) => {
   }, treeData);
   Object.assign(targetNode, assignVal || {});
 };
-var useNodeAttribute = (flatData) => {
-  const schemaValues = computed(() => Array.from(flatData.schema.values()));
-  const getSchemaVal2 = (key) => flatData.schema.get(key);
-  const getNodeAttr2 = (node, attr) => {
-    var _a;
-    return (_a = getSchemaVal2(node[NODE_ATTRIBUTES.UUID])) == null ? void 0 : _a[attr];
-  };
-  const setNodeAttr = (node, attr, val) => flatData.schema.set(node[NODE_ATTRIBUTES.UUID], __spreadProps(__spreadValues({}, getSchemaVal2(node[NODE_ATTRIBUTES.UUID])), {
-    [attr]: val
-  }));
-  const getNodePath = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.PATH);
-  const isRootNode = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.IS_ROOT);
-  const isNodeOpened = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.IS_OPEN);
-  const hasChildNode = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.HAS_CHILD);
-  const isChecked = (node) => getNodeAttr2(node, NODE_ATTRIBUTES.CHECKED);
-  const isItemOpen = (item) => {
-    var _a;
-    if (typeof item === "object") {
-      return isNodeOpened(item);
-    }
-    if (typeof item === "string") {
-      return (_a = getSchemaVal2(item)) == null ? void 0 : _a[NODE_ATTRIBUTES.IS_OPEN];
-    }
-    return false;
-  };
-  const checkNodeIsOpen = (node) => isRootNode(node) || isItemOpen(node) || isItemOpen(getNodeAttr2(node, NODE_ATTRIBUTES.PARENT_ID));
-  return {
-    schemaValues,
-    getSchemaVal: getSchemaVal2,
-    getNodeAttr: getNodeAttr2,
-    setNodeAttr,
-    getNodePath,
-    isRootNode,
-    isNodeOpened,
-    hasChildNode,
-    isItemOpen,
-    isChecked,
-    checkNodeIsOpen
-  };
+const resolveNodeItem = (node) => {
+  if (node === void 0 || node === null) {
+    return { __IS_NULL: true };
+  }
+  if (typeof node === "string") {
+    return { [NODE_ATTRIBUTES.UUID]: node };
+  }
+  if (Object.prototype.hasOwnProperty.call(node, NODE_ATTRIBUTES.UUID)) {
+    return node;
+  }
+  console.error("setNodeAction Error: node id cannot found");
+  return node;
 };
-var useAsync = (props, flatData) => {
+var useNodeAsync = (props, flatData) => {
   const {
     setNodeAttr,
     getNodePath,
@@ -21304,7 +21239,7 @@ var useAsync = (props, flatData) => {
   } = useNodeAttribute(flatData);
   const setNodeRemoteLoad = (resp, item) => {
     if (typeof resp === "object" && resp !== null) {
-      setNodeAttr(item, NODE_ATTRIBUTES.IS_OPEN, true);
+      setNodeAttr(item, NODE_ATTRIBUTES.IS_OPENED, true);
       const nodeValue = Array.isArray(resp) ? resp : [resp];
       updateTreeNode(getNodePath(item), props.data, props.children, props.children, nodeValue);
     }
@@ -21349,23 +21284,25 @@ var useAsync = (props, flatData) => {
     deepAutoOpen
   };
 };
-var useNodeAction = (props, ctx, flatData, renderData) => {
-  const checkedNodes = [];
+var useNodeAction = (props, ctx, flatData, renderData, schemaValues) => {
+  let selectedNodeId = null;
   const {
     setNodeAttr,
     getNodePath,
     getSchemaVal: getSchemaVal2,
     getNodeAttr: getNodeAttr2,
+    getNodeId,
     isRootNode,
     hasChildNode,
     isItemOpen,
     isNodeOpened,
-    schemaValues
+    isNodeChecked,
+    isNodeMatched
   } = useNodeAttribute(flatData);
   const {
     asyncNodeClick,
     deepAutoOpen
-  } = useAsync(props, flatData);
+  } = useNodeAsync(props, flatData);
   const getRootIcon = (item) => isItemOpen(item) ? createVNode(folderShapeOpen, {
     "class": resolveClassName("tree-icon")
   }, null) : createVNode(folder, {
@@ -21393,9 +21330,12 @@ var useNodeAction = (props, ctx, flatData, renderData) => {
     return null;
   };
   const getActionIcon = (item) => {
+    if (ctx.slots.nodeAction) {
+      return ctx.slots.nodeAction(resolveScopedSlotParam(item));
+    }
     let prefixFnVal = null;
     if (typeof props.prefixIcon === "function") {
-      prefixFnVal = props.prefixIcon(isRootNode(item), hasChildNode(item) || item.async, isItemOpen(item), "action", item);
+      prefixFnVal = props.prefixIcon(resolveScopedSlotParam(item), "node_action");
       if (prefixFnVal !== "default") {
         return renderPrefixVal(prefixFnVal);
       }
@@ -21408,9 +21348,12 @@ var useNodeAction = (props, ctx, flatData, renderData) => {
     return null;
   };
   const getNodePrefixIcon = (item) => {
+    if (ctx.slots.nodeType) {
+      return ctx.slots.nodeType(resolveScopedSlotParam(item));
+    }
     let prefixFnVal = null;
     if (typeof props.prefixIcon === "function") {
-      prefixFnVal = props.prefixIcon(isRootNode(item), hasChildNode(item) || item.async, isItemOpen(item), "node_type", item);
+      prefixFnVal = props.prefixIcon(resolveScopedSlotParam(item), "node_type");
       if (prefixFnVal !== "default") {
         return renderPrefixVal(prefixFnVal);
       }
@@ -21422,40 +21365,82 @@ var useNodeAction = (props, ctx, flatData, renderData) => {
     }
     return null;
   };
-  const getLoadingIcon = (item) => item.loading ? createVNode(spinner, null, null) : "";
-  const setNodeOpened = (item, isOpen = null) => {
+  const getLoadingIcon = (item) => {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = ctx.slots).nodeLoading) == null ? void 0 : _b.call(_a, resolveScopedSlotParam(item))) != null ? _c : item.loading) ? createVNode(spinner, null, null) : "";
+  };
+  const setNodeOpened = (item, isOpen = null, e = null, fireEmit = true) => {
     const newVal = isOpen === null ? !isItemOpen(item) : !!isOpen;
-    setNodeAttr(item, NODE_ATTRIBUTES.IS_OPEN, newVal);
+    setNodeAttr(item, NODE_ATTRIBUTES.IS_OPENED, newVal);
+    if (fireEmit) {
+      const emitEvent = isItemOpen(item) ? EVENTS.NODE_EXPAND : EVENTS.NODE_COLLAPSE;
+      ctx.emit(emitEvent, resolveScopedSlotParam(item), getSchemaVal2(item[NODE_ATTRIBUTES.UUID]), e);
+    }
     if (newVal) {
       return;
     }
-    renderData.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).forEach((filterNode) => setNodeAttr(filterNode, NODE_ATTRIBUTES.IS_OPEN, newVal));
+    renderData.value.filter((node) => String.prototype.startsWith.call(getNodePath(node), getNodePath(item))).forEach((filterNode) => setNodeAttr(filterNode, NODE_ATTRIBUTES.IS_OPENED, newVal));
   };
-  const hanldeTreeNodeClick = (item) => {
-    asyncNodeClick(item);
-    if (hasChildNode(item)) {
-      setNodeOpened(item);
+  const setNodeAction = (args, action, value) => {
+    if (Array.isArray(args)) {
+      args.forEach((node) => setNodeAttr(resolveNodeItem(node), action, value));
+      return;
+    }
+    setNodeAttr(resolveNodeItem(args), action, value);
+  };
+  const setOpen = (item, isOpen = true, autoOpenParents = false) => {
+    const resolvedItem = resolveNodeItem(item);
+    if (resolvedItem[NODE_ATTRIBUTES.IS_NULL]) {
+      return;
     }
+    if (autoOpenParents) {
+      if (isOpen) {
+        setNodeAction(resolvedItem, NODE_ATTRIBUTES.IS_OPENED, isOpen);
+        if (!isRootNode(resolvedItem)) {
+          const parentId = getNodeAttr2(resolvedItem, NODE_ATTRIBUTES.PARENT_ID);
+          setOpen(parentId, true, true);
+        }
+      } else {
+        setNodeOpened(resolvedItem, false, null, false);
+      }
+    } else {
+      setNodeAction(resolvedItem, NODE_ATTRIBUTES.IS_OPENED, isOpen);
+    }
+  };
+  const hanldeTreeNodeClick = (item, e) => {
+    asyncNodeClick(item);
+    setNodeOpened(item, null, e);
   };
   const handleNodeActionClick = (e, node) => {
     e.stopImmediatePropagation();
     e.stopPropagation();
     e.preventDefault();
-    hanldeTreeNodeClick(node);
+    hanldeTreeNodeClick(node, e);
+  };
+  const setSelect = (uuid2, selected = true, autoOpen = true) => {
+    const resolvedItem = resolveNodeItem(uuid2);
+    if (resolvedItem[NODE_ATTRIBUTES.IS_NULL]) {
+      return;
+    }
+    if (props.selectable) {
+      if (selectedNodeId !== null) {
+        setNodeAttr({
+          [NODE_ATTRIBUTES.UUID]: selectedNodeId
+        }, NODE_ATTRIBUTES.IS_SELECTED, !selected);
+      }
+      setNodeAttr(resolvedItem, NODE_ATTRIBUTES.IS_SELECTED, selected);
+      selectedNodeId = getNodeId(resolvedItem);
+    }
+    if (autoOpen) {
+      setOpen(uuid2, true, true);
+    }
   };
-  const handleNodeContentClick = (item) => {
-    if (!checkedNodes.includes(item[NODE_ATTRIBUTES.UUID])) {
-      checkedNodes.forEach((__uuid) => setNodeAttr({
-        __uuid
-      }, NODE_ATTRIBUTES.CHECKED, false));
-      checkedNodes.length = 0;
-      setNodeAttr(item, NODE_ATTRIBUTES.CHECKED, true);
-      checkedNodes.push(item[NODE_ATTRIBUTES.UUID]);
-      if (!isNodeOpened(item)) {
-        hanldeTreeNodeClick(item);
-      }
-      ctx.emit("check", item, getSchemaVal2(item[NODE_ATTRIBUTES.UUID]));
+  const handleNodeContentClick = (item, e) => {
+    setSelect(item);
+    if (!isNodeOpened(item)) {
+      hanldeTreeNodeClick(item, e);
     }
+    ctx.emit(EVENTS.NODE_CLICK, resolveScopedSlotParam(item), getSchemaVal2(item[NODE_ATTRIBUTES.UUID]), e);
   };
   const filterNextNode = (depth, node) => {
     if (isRootNode(node)) {
@@ -21486,14 +21471,22 @@ var useNodeAction = (props, ctx, flatData, renderData) => {
       "style": getNodeLineStyle(maxDeep - index)
     }, null));
   };
+  const resolveScopedSlotParam = (item) => __spreadProps(__spreadValues({}, item), {
+    hasChildNode: hasChildNode(item),
+    isMatched: isNodeMatched(item),
+    isChecked: isNodeChecked(item),
+    isOpened: isNodeOpened(item),
+    isRoot: isRootNode(item)
+  });
   const renderTreeNode = (item) => {
     var _a, _b, _c, _d, _e;
     return createVNode("div", {
+      "data-tree-node": getNodeId(item),
       "class": getNodeRowClass(item, flatData.schema)
     }, [createVNode("div", {
       "class": getNodeItemClass(item, flatData.schema, props),
       "style": getNodeItemStyle(item, props, flatData),
-      "onClick": () => handleNodeContentClick(item)
+      "onClick": (e) => handleNodeContentClick(item, e)
     }, [createVNode("span", {
       "class": resolveClassName("node-action"),
       "onClick": (e) => handleNodeActionClick(e, item)
@@ -21501,15 +21494,137 @@ var useNodeAction = (props, ctx, flatData, renderData) => {
       "class": resolveClassName("node-content")
     }, [[getNodePrefixIcon(item), getLoadingIcon(item)], createVNode("span", {
       "class": resolveClassName("node-text")
-    }, [(_e = (_b = (_a = ctx.slots).node) == null ? void 0 : _b.call(_a, item)) != null ? _e : [getLabel(item, props), (_d = (_c = ctx.slots).nodeAppend) == null ? void 0 : _d.call(_c, item)]])]), getVirtualLines(item)])]);
+    }, [(_c = (_b = (_a = ctx.slots).node) == null ? void 0 : _b.call(_a, resolveScopedSlotParam(item))) != null ? _c : [getLabel(item, props)]]), (_e = (_d = ctx.slots).nodeAppend) == null ? void 0 : _e.call(_d, resolveScopedSlotParam(item))]), getVirtualLines(item)])]);
   };
   return {
     renderTreeNode,
     hanldeTreeNodeClick,
     deepAutoOpen,
-    setNodeOpened
+    setNodeAction,
+    setNodeOpened,
+    setSelect,
+    setOpen
   };
 };
+var useNodeDrag = (props, root, flatData) => {
+  const {
+    getSourceNodeByUID,
+    getNodeParentIdById,
+    getParentNodeData,
+    getNodeAttr: getNodeAttr2,
+    getNodePath,
+    isRootNode
+  } = useNodeAttribute(flatData, props);
+  const getTargetTreeNode = (e) => {
+    const target = e.target;
+    return target.closest("[data-tree-node]");
+  };
+  const handleTreeNodeMouseup = (e) => {
+    const targetNode = getTargetTreeNode(e);
+    targetNode.removeEventListener("mouseup", handleTreeNodeMouseup);
+  };
+  const handleTreeNodeMousedown = (e) => {
+    const targetNode = getTargetTreeNode(e);
+    targetNode.setAttribute("draggable", "true");
+    targetNode.addEventListener("mouseup", handleTreeNodeMouseup);
+  };
+  const handleTreeNodeDragover = (e) => {
+    e.preventDefault();
+    const targetNode = getTargetTreeNode(e);
+    const sourceNodeId = e.dataTransfer.getData("node-id");
+    const targetNodeId = targetNode.getAttribute("data-tree-node");
+    const transferEffect = isNodeSortable(sourceNodeId, targetNodeId) ? "move" : "none";
+    e.dataTransfer.effectAllowed = transferEffect;
+    e.dataTransfer.dropEffect = transferEffect;
+  };
+  const handleTreeNodeDragStart = (e) => {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.dropEffect = "move";
+    const targetNode = getTargetTreeNode(e);
+    e.dataTransfer.setData("text/plain", "");
+    e.dataTransfer.setData("node-id", targetNode.getAttribute("data-tree-node"));
+  };
+  const handleTreeNodeDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const targetNode = getTargetTreeNode(e);
+    const sourceNodeId = e.dataTransfer.getData("node-id");
+    const targetNodeId = targetNode.getAttribute("data-tree-node");
+    Reflect.apply(props.dragSort ? dragSortData : dragAsChildNode, globalThis, [sourceNodeId, targetNodeId]);
+  };
+  const isNodeSortable = (sourceId, tartgetId) => {
+    const sourcePath = getNodePath({
+      [NODE_ATTRIBUTES.UUID]: sourceId
+    });
+    const targetPath = getNodePath({
+      [NODE_ATTRIBUTES.UUID]: tartgetId
+    });
+    const sourceParentNodeId = getNodeParentIdById(sourceId);
+    const targetParentNode = getNodeParentIdById(tartgetId);
+    if (sourceParentNodeId === targetParentNode) {
+      return true;
+    }
+    return sourcePath.indexOf(targetPath) === -1 && targetPath.indexOf(sourcePath) === -1;
+  };
+  const dragSortData = (sourceId, tartgetId) => {
+    if (!isNodeSortable(sourceId, tartgetId)) {
+      return;
+    }
+    const sourceNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(sourceId)));
+    const targetNodeData = JSON.parse(JSON.stringify(getSourceNodeByUID(tartgetId)));
+    const sourceNodeParent = getParentNodeData(sourceId);
+    const targetNodeParent = getParentNodeData(tartgetId);
+    const sourceNodeIndex = getNodeAttr2({
+      [NODE_ATTRIBUTES.UUID]: sourceId
+    }, NODE_ATTRIBUTES.INDEX);
+    const targetNodeIndex = getNodeAttr2({
+      [NODE_ATTRIBUTES.UUID]: tartgetId
+    }, NODE_ATTRIBUTES.INDEX);
+    sourceNodeParent == null ? void 0 : sourceNodeParent[props.children].splice(sourceNodeIndex, 1, targetNodeData);
+    targetNodeParent == null ? void 0 : targetNodeParent[props.children].splice(targetNodeIndex, 1, sourceNodeData);
+  };
+  const dragAsChildNode = (sourceNodeId, targetNodeId) => {
+    const sourceNodeData = getSourceNodeByUID(sourceNodeId);
+    const targetNodeData = getSourceNodeByUID(targetNodeId);
+    let parentNode = null;
+    if (isRootNode({
+      [NODE_ATTRIBUTES.UUID]: sourceNodeId
+    })) {
+      parentNode = props.data;
+    } else {
+      const sourceNodeParentId = getNodeParentIdById(sourceNodeId);
+      if (sourceNodeParentId !== void 0 && sourceNodeParentId !== null) {
+        parentNode = getSourceNodeByUID(sourceNodeParentId);
+        const sourceNodeIndex = getNodeAttr2({
+          [NODE_ATTRIBUTES.UUID]: sourceNodeId
+        }, NODE_ATTRIBUTES.INDEX);
+        parentNode == null ? void 0 : parentNode[props.children].splice(sourceNodeIndex, 1);
+      }
+    }
+    if (!targetNodeData[props.children]) {
+      targetNodeData[props.children] = [];
+    }
+    targetNodeData[props.children].unshift(sourceNodeData);
+  };
+  onMounted(() => {
+    if (props.draggable && root.value) {
+      const rootTree = root.value.$el;
+      rootTree.addEventListener("mousedown", handleTreeNodeMousedown);
+      rootTree.addEventListener("dragstart", handleTreeNodeDragStart);
+      rootTree.addEventListener("dragover", handleTreeNodeDragover);
+      rootTree.addEventListener("drop", handleTreeNodeDrop);
+    }
+  });
+  onUnmounted(() => {
+    if (props.draggable && root.value) {
+      const rootTree = root.value.$el;
+      rootTree.removeEventListener("mousedown", handleTreeNodeMousedown);
+      rootTree.removeEventListener("dragstart", handleTreeNodeDragStart);
+      rootTree.removeEventListener("dragover", handleTreeNodeDragover);
+      rootTree.removeEventListener("drop", handleTreeNodeDrop);
+    }
+  });
+};
 var useSearch = (props) => {
   var _a;
   const refSearch = toRef(props, "search");
@@ -21552,26 +21667,281 @@ var useSearch = (props) => {
     isTreeUI
   };
 };
+var rngBrowser = { exports: {} };
+var getRandomValues = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
+if (getRandomValues) {
+  var rnds8 = new Uint8Array(16);
+  rngBrowser.exports = function whatwgRNG() {
+    getRandomValues(rnds8);
+    return rnds8;
+  };
+} else {
+  var rnds = new Array(16);
+  rngBrowser.exports = function mathRNG() {
+    for (var i = 0, r2; i < 16; i++) {
+      if ((i & 3) === 0)
+        r2 = Math.random() * 4294967296;
+      rnds[i] = r2 >>> ((i & 3) << 3) & 255;
+    }
+    return rnds;
+  };
+}
+var byteToHex = [];
+for (var i = 0; i < 256; ++i) {
+  byteToHex[i] = (i + 256).toString(16).substr(1);
+}
+function bytesToUuid$2(buf, offset2) {
+  var i = offset2 || 0;
+  var bth = byteToHex;
+  return [
+    bth[buf[i++]],
+    bth[buf[i++]],
+    bth[buf[i++]],
+    bth[buf[i++]],
+    "-",
+    bth[buf[i++]],
+    bth[buf[i++]],
+    "-",
+    bth[buf[i++]],
+    bth[buf[i++]],
+    "-",
+    bth[buf[i++]],
+    bth[buf[i++]],
+    "-",
+    bth[buf[i++]],
+    bth[buf[i++]],
+    bth[buf[i++]],
+    bth[buf[i++]],
+    bth[buf[i++]],
+    bth[buf[i++]]
+  ].join("");
+}
+var bytesToUuid_1 = bytesToUuid$2;
+var rng$1 = rngBrowser.exports;
+var bytesToUuid$1 = bytesToUuid_1;
+var _nodeId;
+var _clockseq;
+var _lastMSecs = 0;
+var _lastNSecs = 0;
+function v1$1(options, buf, offset2) {
+  var i = buf && offset2 || 0;
+  var b2 = buf || [];
+  options = options || {};
+  var node = options.node || _nodeId;
+  var clockseq = options.clockseq !== void 0 ? options.clockseq : _clockseq;
+  if (node == null || clockseq == null) {
+    var seedBytes = rng$1();
+    if (node == null) {
+      node = _nodeId = [
+        seedBytes[0] | 1,
+        seedBytes[1],
+        seedBytes[2],
+        seedBytes[3],
+        seedBytes[4],
+        seedBytes[5]
+      ];
+    }
+    if (clockseq == null) {
+      clockseq = _clockseq = (seedBytes[6] << 8 | seedBytes[7]) & 16383;
+    }
+  }
+  var msecs = options.msecs !== void 0 ? options.msecs : new Date().getTime();
+  var nsecs = options.nsecs !== void 0 ? options.nsecs : _lastNSecs + 1;
+  var dt = msecs - _lastMSecs + (nsecs - _lastNSecs) / 1e4;
+  if (dt < 0 && options.clockseq === void 0) {
+    clockseq = clockseq + 1 & 16383;
+  }
+  if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === void 0) {
+    nsecs = 0;
+  }
+  if (nsecs >= 1e4) {
+    throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
+  }
+  _lastMSecs = msecs;
+  _lastNSecs = nsecs;
+  _clockseq = clockseq;
+  msecs += 122192928e5;
+  var tl = ((msecs & 268435455) * 1e4 + nsecs) % 4294967296;
+  b2[i++] = tl >>> 24 & 255;
+  b2[i++] = tl >>> 16 & 255;
+  b2[i++] = tl >>> 8 & 255;
+  b2[i++] = tl & 255;
+  var tmh = msecs / 4294967296 * 1e4 & 268435455;
+  b2[i++] = tmh >>> 8 & 255;
+  b2[i++] = tmh & 255;
+  b2[i++] = tmh >>> 24 & 15 | 16;
+  b2[i++] = tmh >>> 16 & 255;
+  b2[i++] = clockseq >>> 8 | 128;
+  b2[i++] = clockseq & 255;
+  for (var n2 = 0; n2 < 6; ++n2) {
+    b2[i + n2] = node[n2];
+  }
+  return buf ? buf : bytesToUuid$1(b2);
+}
+var v1_1 = v1$1;
+var rng = rngBrowser.exports;
+var bytesToUuid = bytesToUuid_1;
+function v4$1(options, buf, offset2) {
+  var i = buf && offset2 || 0;
+  if (typeof options == "string") {
+    buf = options === "binary" ? new Array(16) : null;
+    options = null;
+  }
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    for (var ii = 0; ii < 16; ++ii) {
+      buf[i + ii] = rnds[ii];
+    }
+  }
+  return buf || bytesToUuid(rnds);
+}
+var v4_1 = v4$1;
+var v1 = v1_1;
+var v4 = v4_1;
+var uuid = v4;
+uuid.v1 = v1;
+uuid.v4 = v4;
+var uuid_1 = uuid;
+var useTreeInit = (props) => {
+  var _a;
+  const getFlatdata = (props2, treeData = void 0, cachedSchema = []) => {
+    const {
+      data: data2,
+      children
+    } = props2;
+    const outputData = [];
+    let order2 = 0;
+    const schema = /* @__PURE__ */ new Map();
+    function getUid(item) {
+      let uid = null;
+      if (typeof props2.nodeKey === "string") {
+        uid = item[props2.nodeKey];
+      }
+      return uid || item[NODE_ATTRIBUTES.UUID] || uuid_1.v4();
+    }
+    function getCachedTreeNodeAttr(uuid2, node, attr, cachedAttr, defVal = void 0) {
+      const cached = (cachedSchema || []).find((item) => item[NODE_ATTRIBUTES.UUID] === uuid2);
+      let result = void 0;
+      if (cached) {
+        result = cached[cachedAttr];
+      } else {
+        result = node[attr];
+      }
+      if (result === void 0) {
+        result = defVal;
+      }
+      return result;
+    }
+    function isCachedTreeNodeOpened(uuid2, node) {
+      return getCachedTreeNodeAttr(uuid2, node, "isOpen", NODE_ATTRIBUTES.IS_OPENED, false);
+    }
+    function isCachedTreeNodeChecked(uuid2, node) {
+      return getCachedTreeNodeAttr(uuid2, node, "checked", NODE_ATTRIBUTES.IS_CHECKED, false);
+    }
+    function isCachedTreeNodeMatch(uuid2, node) {
+      return getCachedTreeNodeAttr(uuid2, node, "isMatch", NODE_ATTRIBUTES.IS_MATCH, true);
+    }
+    function isCachedTreeNodeSelected(uuid2, node) {
+      return getCachedTreeNodeAttr(uuid2, node, "isSelected", NODE_ATTRIBUTES.IS_SELECTED, false);
+    }
+    function flatten(array, depth = 0, parent = null, path = null) {
+      const arrLength = array.length;
+      for (let i = 0; i < arrLength; i++) {
+        const item = array[i];
+        if (Array.isArray(item)) {
+          flatten(item, depth, parent, path);
+        } else {
+          if (typeof item === "object" && item !== null) {
+            const uuid2 = getUid(item);
+            const currentPath = path !== null ? `${path}-${i}` : `${i}`;
+            const hasChildren = !!(item[children] || []).length;
+            const attrs = {
+              [NODE_ATTRIBUTES.DEPTH]: depth,
+              [NODE_ATTRIBUTES.INDEX]: i,
+              [NODE_ATTRIBUTES.UUID]: uuid2,
+              [NODE_ATTRIBUTES.PARENT_ID]: parent,
+              [NODE_ATTRIBUTES.HAS_CHILD]: hasChildren,
+              [NODE_ATTRIBUTES.PATH]: currentPath,
+              [NODE_ATTRIBUTES.IS_ROOT]: parent === null,
+              [NODE_ATTRIBUTES.ORDER]: order2,
+              [NODE_ATTRIBUTES.IS_SELECTED]: props2.selectable ? isCachedTreeNodeSelected(uuid2, item) : false,
+              [NODE_ATTRIBUTES.IS_MATCH]: isCachedTreeNodeMatch(uuid2, item),
+              [NODE_ATTRIBUTES.IS_OPENED]: isCachedTreeNodeOpened(uuid2, item),
+              [NODE_ATTRIBUTES.IS_CHECKED]: isCachedTreeNodeChecked(uuid2, item),
+              [children]: null
+            };
+            Object.assign(item, {
+              [NODE_ATTRIBUTES.UUID]: uuid2
+            });
+            schema.set(uuid2, attrs);
+            order2 += 1;
+            outputData.push(__spreadProps(__spreadValues({}, item), {
+              [children]: null
+            }));
+            if (Object.prototype.hasOwnProperty.call(item, children)) {
+              flatten(item[children] || [], depth + 1, uuid2, currentPath);
+            }
+          }
+        }
+      }
+    }
+    flatten(treeData ? treeData : data2);
+    return [outputData, schema];
+  };
+  const formatData = getFlatdata(props);
+  const flatData = reactive({
+    data: formatData[0],
+    schema: formatData[1],
+    levelLineSchema: {}
+  });
+  const schemaValues = computed(() => Array.from(flatData.schema.values()));
+  const {
+    asyncNodeClick,
+    deepAutoOpen
+  } = useNodeAsync(props, flatData);
+  watch(() => [props.data], (newData) => {
+    var _a2, _b;
+    const formatData2 = getFlatdata(props, newData, schemaValues.value);
+    flatData.data = formatData2[0];
+    flatData.schema = formatData2[1];
+    if (((_a2 = props.async) == null ? void 0 : _a2.callback) && ((_b = props.async) == null ? void 0 : _b.deepAutoOpen) === "every") {
+      deepAutoOpen();
+    }
+  }, {
+    deep: true
+  });
+  if ((_a = props.async) == null ? void 0 : _a.callback) {
+    deepAutoOpen();
+  }
+  return {
+    flatData,
+    schemaValues,
+    asyncNodeClick,
+    deepAutoOpen
+  };
+};
 var Component$1 = defineComponent({
   name: "Tree",
   props: treeProps,
-  emits: ["check"],
+  emits: [EVENTS.NODE_CLICK, EVENTS.NODE_COLLAPSE, EVENTS.NODE_EXPAND],
   setup(props, ctx) {
-    var _a;
-    const formatData = getFlatdata(props);
-    const flatData = reactive({
-      data: formatData[0],
-      schema: formatData[1],
-      levelLineSchema: {}
-    });
     const {
-      schemaValues,
+      flatData,
+      schemaValues
+    } = useTreeInit(props);
+    const {
       setNodeAttr,
       checkNodeIsOpen,
       getNodeAttr: getNodeAttr2,
       getNodePath,
       isRootNode,
-      isChecked
+      isNodeOpened,
+      isNodeChecked,
+      isNodeMatched,
+      hasChildNode
     } = useNodeAttribute(flatData);
     const {
       searchFn,
@@ -21603,79 +21973,41 @@ var Component$1 = defineComponent({
     const {
       renderTreeNode,
       hanldeTreeNodeClick,
-      deepAutoOpen,
-      setNodeOpened
-    } = useNodeAction(props, ctx, flatData, renderData);
-    if ((_a = props.async) == null ? void 0 : _a.callback) {
-      deepAutoOpen();
-    }
-    watch(() => [props.data], (newData) => {
-      var _a2, _b;
-      const formatData2 = getFlatdata(props, newData, schemaValues.value);
-      flatData.data = formatData2[0];
-      flatData.schema = formatData2[1];
-      if (((_a2 = props.async) == null ? void 0 : _a2.callback) && ((_b = props.async) == null ? void 0 : _b.deepAutoOpen) === "every") {
-        deepAutoOpen();
-      }
-    }, {
-      deep: true
-    });
-    const resolveNodeItem = (node) => {
-      if (typeof node === "string") {
-        return {
-          [NODE_ATTRIBUTES.UUID]: node
-        };
-      }
-      if (Object.prototype.hasOwnProperty.call(node, NODE_ATTRIBUTES.UUID)) {
-        return node;
-      }
-      console.error("setNodeAction Error: node id cannot found");
-      return node;
-    };
-    const setNodeAction = (args, action, value) => {
-      if (Array.isArray(args)) {
-        args.forEach((node) => setNodeAttr(resolveNodeItem(node), action, value));
-        return;
-      }
-      setNodeAttr(resolveNodeItem(args), action, value);
-    };
-    const setOpen = (item, isOpen = true, autoOpenParents = false) => {
-      const resolvedItem = resolveNodeItem(item);
-      if (autoOpenParents) {
-        if (isOpen) {
-          setNodeAction(resolvedItem, NODE_ATTRIBUTES.IS_OPEN, isOpen);
-          if (!isRootNode(resolvedItem)) {
-            const parentId = getNodeAttr2(resolvedItem, NODE_ATTRIBUTES.PARENT_ID);
-            setOpen(parentId, true, true);
-          }
-        } else {
-          setNodeOpened(resolvedItem, false);
-        }
-      } else {
-        setNodeAction(resolvedItem, NODE_ATTRIBUTES.IS_OPEN, isOpen);
-      }
-    };
+      setNodeOpened,
+      setOpen,
+      setNodeAction,
+      setSelect
+    } = useNodeAction(props, ctx, flatData, renderData, schemaValues);
     const setChecked = (item, checked = true) => {
-      setNodeAction(resolveNodeItem(item), NODE_ATTRIBUTES.CHECKED, checked);
-    };
-    const select2 = (item, fireOther = true) => {
-      var _a2;
-      if (fireOther) {
-        setChecked((_a2 = schemaValues.value.filter((item2) => isChecked(item2))) != null ? _a2 : [], false);
-      }
-      setChecked(item, true);
+      setNodeAction(resolveNodeItem(item), NODE_ATTRIBUTES.IS_CHECKED, checked);
     };
+    if (props.selectable) {
+      watch(() => props.selected, (newData) => {
+        setSelect(newData, true, true);
+      }, {
+        immediate: true
+      });
+    }
+    const getData = () => flatData;
     ctx.expose({
       hanldeTreeNodeClick,
+      isNodeChecked,
+      isRootNode,
+      isNodeOpened,
+      isNodeMatched,
+      hasChildNode,
       setOpen,
       setChecked,
       setNodeAction,
-      select: select2
+      setNodeOpened,
+      setSelect,
+      getData
     });
     const root = ref();
     const {
       renderEmpty
     } = useEmpty(props, ctx);
+    useNodeDrag(props, root, flatData);
     const renderTreeContent = (scopedData) => {
       if (scopedData.length) {
         return scopedData.map(renderTreeNode);
@@ -22706,7 +23038,7 @@ var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   Button: BkButton,
   Card: BkCard,
   Checkbox: BkCheckbox,
-  Collapse: BkCollaspe,
+  Collapse: BkCollapse,
   Dialog: BkDialog,
   Exception: BkException,
   FixedNavbar: BkFixedNavbar,
@@ -22759,4 +23091,4 @@ var preset = {
   install: createInstall(),
   version: "0.0.1"
 };
-export { BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCollaspe as Collapse, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTag as Tag, TagInput, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel };
+export { BkAffix as Affix, BkAlert as Alert, BkAnimateNumber as AnimateNumber, BkBacktop as Backtop, BkBadge as Badge, BkBreadcrumb as Breadcrumb, BkButton as Button, BkCard as Card, BkCascader as Cascader, BkCheckbox as Checkbox, BkCollapse as Collapse, BkContainer as Container, BkDatePicker as DatePicker, BkDialog as Dialog, BkDivider as Divider, BkDropdown as Dropdown, BkException as Exception, BkFixedNavbar as FixedNavbar, BkForm as Form, BkInput as Input, BkLink as Link, BkLoading as Loading, BkMenu as Menu, Message, BkModal as Modal, Navigation, Notify, BkPagination as Pagination, BkPopover as Popover, BkProgress as Progress, BkRadio as Radio, BkRate as Rate, BkSelect as Select, BkSideslider as Sideslider, BkSteps as Steps, BkSwiper as Swiper, BkSwitcher as Switcher, BkTab as Tab, BkTable as Table, BkTag as Tag, TagInput, Transfer, BkTree as Tree, BkVirtualRender as VirtualRender, tooltips as bkTooltips, ClickOutside as clickoutside, BkContainer as containerProps, preset as default, mousewheel };