@dt-frames/ui 2.0.24 → 3.0.1

package/es/components/tree/index.js

@@ -1,19 +1,59 @@
-import { Input, MenuItem, MenuDivider, Menu, Dropdown, Tree, Empty, Spin } from "ant-design-vue/es";
-import "ant-design-vue/es/spin/style";
-import "ant-design-vue/es/empty/style";
-import "ant-design-vue/es/tree/style";
-import { unref, defineComponent, useSlots, ref, computed, watch, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot, createVNode, createBlock, withModifiers, withCtx, Fragment, renderList, normalizeProps, guardReactiveProps, createTextVNode, createElementVNode, onMounted, nextTick, onUnmounted, isVNode, getCurrentInstance, render as render$2, useAttrs, reactive, toRaw, watchEffect, normalizeClass, createSlots, withDirectives, mergeProps, vShow } from "vue";
-import { useI18n, useSlots as useSlots$1, isArray, isFunction, isEmpty, isBoolean } from "@dt-frames/core";
-import { cloneDeep, difference, omit, get } from "lodash-es";
-import "ant-design-vue/es/dropdown/style";
-import "ant-design-vue/es/menu/style";
-import "ant-design-vue/es/input/style";
+import { isProd, getDynamicProps, useI18n, isArray, isFunction, isEmpty, isBoolean, getSlot } from "@dt-frames/core";
+import { ref, onUnmounted, unref, watch, defineComponent, computed, onMounted, nextTick, createVNode, isVNode, Fragment, getCurrentInstance, render, useSlots, openBlock, createElementBlock, toDisplayString, createCommentVNode, renderSlot, createBlock, withModifiers, withCtx, renderList, normalizeProps, guardReactiveProps, createTextVNode, createElementVNode, useAttrs, reactive, toRaw, createSlots, withDirectives, mergeProps, vShow } from "vue";
+import { Input, MenuItem, MenuDivider, Menu as Menu$1, Dropdown, Tree, Empty, Spin } from "ant-design-vue/es";
+import { cloneDeep, omit, difference, get } from "lodash-es";
+import { Menu, Divider } from "ant-design-vue";
+import { Icon } from "../icons";
 import { useDebounceFn } from "@vueuse/core";
-import { Menu as Menu$1, Divider } from "ant-design-vue";
-import { useHeader } from "../../theme";
+function useTree(props) {
+  const treeRef = ref(null);
+  const loadedRef = ref(null);
+  function register(instance) {
+    isProd() && onUnmounted(() => {
+      treeRef.value = null;
+      loadedRef.value = null;
+    });
+    if (unref(loadedRef) && isProd() && instance === unref(treeRef))
+      return;
+    treeRef.value = instance;
+    loadedRef.value = true;
+    watch(
+      () => props,
+      () => {
+        props && instance.setProps(getDynamicProps(props));
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+  }
+  const methods = {
+    setProps: (props2) => unref(treeRef)?.setProps(props2),
+    setExpandedKeys: (keys) => unref(treeRef)?.setExpandedKeys(keys),
+    getExpandedKeys: () => unref(treeRef)?.getExpandedKeys(),
+    setSelectedKeys: (keys) => unref(treeRef)?.setSelectedKeys(keys),
+    getSelectedKeys: () => unref(treeRef)?.getSelectedKeys(),
+    setCheckedKeys: (keys) => unref(treeRef)?.setCheckedKeys(keys),
+    getCheckedKeys: () => unref(treeRef)?.getCheckedKeys(),
+    insertNodeByKey: (opt) => unref(treeRef)?.insertNodeByKey(opt),
+    insertNodesByKey: (opt) => unref(treeRef)?.insertNodesByKey(opt),
+    deleteNodeByKey: (key) => unref(treeRef)?.deleteNodeByKey(key),
+    updateNodeByKey: (key, node) => unref(treeRef)?.updateNodeByKey(key, node),
+    getSelectedNode: (key, treeList, selectNode) => unref(treeRef)?.getSelectedNode(key, treeList, selectNode),
+    checkAll: (checkAll) => unref(treeRef)?.checkAll(checkAll),
+    expandAll: (expandAll) => unref(treeRef)?.expandAll(expandAll),
+    onStrictlyChange: (strictly) => unref(treeRef)?.onStrictlyChange(strictly),
+    filterByLevel: (level) => unref(treeRef)?.filterByLevel(level),
+    setSearchValue: (value) => unref(treeRef)?.setSearchValue(value),
+    getSearchValue: () => unref(treeRef)?.getSearchValue()
+  };
+  return [register, methods];
+}
 const BasicProps = {
-  defaultExpandLevel: {
-    type: String
+  expandLevel: {
+    type: Number,
+    default: 0
   },
   defaultExpandAll: {
     type: Boolean
@@ -234,7 +274,191 @@ function treeToList(tree, config = {}) {
   }
   return result;
 }
-function useTree(treeDataRef, getFieldNames, emit) {
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  name: "ContextMenu",
+  props: rightMenuProps,
+  setup(props) {
+    const wrapRef = ref(null);
+    const showRef = ref(false);
+    const ItemContent = (props2) => {
+      const {
+        item
+      } = props2;
+      return createVNode("span", {
+        "class": "px-4 w-full flex items-center",
+        "onClick": props2.handler.bind(null, item)
+      }, [props2.showIcon && item.icon && createVNode("i", {
+        "class": "i mr-2 " + item.icon
+      }, null), createVNode("span", null, [item.label])]);
+    };
+    const getStyle = computed(() => {
+      const {
+        axis,
+        items,
+        styles,
+        width
+      } = props;
+      const {
+        x,
+        y
+      } = axis || {
+        x: 0,
+        y: 0
+      };
+      const menuHeight = (items || []).length * 40;
+      const body = document.body;
+      const left = body.clientWidth < x + width ? x - width : x;
+      const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+      return {
+        ...styles,
+        position: "absolute",
+        width: `${width}px`,
+        left: `${left + 1}px`,
+        top: `${top + 1}px`,
+        zIndex: 9999
+      };
+    });
+    function handleAction(item, e) {
+      const {
+        handler,
+        disabled
+      } = item;
+      if (disabled)
+        return;
+      showRef.value = false;
+      e?.stopPropagation();
+      e?.preventDefault();
+      handler?.(props.node);
+    }
+    function renderMenuItem(items) {
+      const visibleItems = items.filter((item) => !item.hidden);
+      return visibleItems.map((item) => {
+        const {
+          disabled,
+          label,
+          children,
+          divider = false
+        } = item;
+        const contentProps = {
+          item,
+          handler: handleAction,
+          showIcon: props.showIcon
+        };
+        if (!children || children.length === 0) {
+          return createVNode(Fragment, null, [createVNode(Menu.Item, {
+            "disabled": disabled,
+            "class": "dt-context-menu__item",
+            "key": label
+          }, {
+            default: () => [createVNode(ItemContent, contentProps, null)]
+          }), divider ? createVNode(Divider, {
+            "key": `d-${label}`
+          }, null) : null]);
+        }
+        return createVNode(Menu.SubMenu, {
+          "key": label,
+          "disabled": disabled,
+          "popupClassName": "dt-context-menu__popup"
+        }, {
+          title: () => createVNode(ItemContent, contentProps, null),
+          default: () => renderMenuItem(children)
+        });
+      });
+    }
+    onMounted(() => {
+      nextTick(() => showRef.value = true);
+    });
+    onUnmounted(() => {
+      const el = unref(wrapRef);
+      el && document.body.removeChild(el);
+    });
+    return () => {
+      let _slot;
+      if (!unref(showRef)) {
+        return null;
+      }
+      const {
+        items
+      } = props;
+      return createVNode("div", {
+        "class": "dt-context-menu fixed top-0 left-0 z-50 block m-0"
+      }, [createVNode(Menu, {
+        "inlineIndent": 12,
+        "mode": "vertical",
+        "ref": wrapRef,
+        "style": unref(getStyle)
+      }, _isSlot(_slot = renderMenuItem(items)) ? _slot : {
+        default: () => [_slot]
+      })]);
+    };
+  }
+});
+function useContextMenu() {
+  const menuManager = {
+    domList: [],
+    resolve: () => {
+    }
+  };
+  function createContextMenu(options) {
+    const { event, node } = options || {};
+    event && event?.preventDefault();
+    return new Promise((resolve) => {
+      const body = document.body;
+      const container = document.createElement("div");
+      const propsData = { node };
+      if (options.styles) {
+        propsData.styles = options.styles;
+      }
+      if (options.items) {
+        propsData.items = options.items;
+      }
+      if (options.event) {
+        propsData.customEvent = event;
+        propsData.axis = { x: event.clientX, y: event.clientY };
+      }
+      const vm = createVNode(_sfc_main$2, propsData);
+      render(vm, container);
+      const handleClick = function() {
+        menuManager.resolve("");
+      };
+      menuManager.domList.push(container);
+      const remove = function() {
+        menuManager.domList.forEach((dom) => {
+          try {
+            dom && body.removeChild(dom);
+          } catch (error) {
+          }
+        });
+        body.removeEventListener("click", handleClick);
+        body.removeEventListener("scroll", handleClick);
+      };
+      menuManager.resolve = function(arg) {
+        remove();
+        resolve(arg);
+      };
+      remove();
+      body.appendChild(container);
+      body.addEventListener("click", handleClick);
+      body.addEventListener("scroll", handleClick);
+    });
+  }
+  function destroyContextMenu() {
+    if (menuManager) {
+      menuManager.resolve("");
+      menuManager.domList = [];
+    }
+  }
+  if (getCurrentInstance()) {
+    onUnmounted(() => {
+      destroyContextMenu();
+    });
+  }
+  return [createContextMenu, destroyContextMenu];
+}
+function useMethod(treeDataRef, getFieldNames, props) {
   function getAllKeys(list) {
     const keys = [];
     const treeData = list || unref(treeDataRef);
@@ -315,7 +539,6 @@ function useTree(treeDataRef, getFieldNames, emit) {
     for (let index = 0; index < data.length; index++) {
       const item = data[index];
       const { key: keyField, children: childrenField } = unref(getFieldNames);
-      console.log(keyField, childrenField);
       const key = keyField ? item[keyField] : "";
       const children = childrenField ? item[childrenField] : [];
       res.push(key);
@@ -444,7 +667,7 @@ function useTree(treeDataRef, getFieldNames, emit) {
       });
       dropPosition === -1 ? ar.splice(i, 0, dragObj) : ar.splice(i + 1, 0, dragObj);
     }
-    emit("drop", { data, info });
+    unref(props).onDrop && unref(props).onDrop({ data, info });
     treeDataRef.value = data;
   }
   return {
@@ -467,12 +690,12 @@ var ToolbarEnum = /* @__PURE__ */ ((ToolbarEnum2) => {
   ToolbarEnum2[ToolbarEnum2["UN_EXPAND_ALL"] = 3] = "UN_EXPAND_ALL";
   return ToolbarEnum2;
 })(ToolbarEnum || {});
-const _hoisted_1$2 = { class: "dt-tree-header flex px-2 py-1.5 items-center" };
-const _hoisted_2$2 = {
+const _hoisted_1$1 = { class: "dt-tree-header flex px-2 py-1.5 items-center" };
+const _hoisted_2 = {
   key: 0,
-  class: "text-center leading-8 m-0"
+  class: "text-center leading-8 m-0 font-normal"
 };
-const _hoisted_3$2 = {
+const _hoisted_3 = {
   key: 1,
   class: "dt-tree-search flex flex-1 items-center"
 };
@@ -481,7 +704,7 @@ const _hoisted_4 = {
   class: "flex-1 flex items-center"
 };
 const _hoisted_5 = /* @__PURE__ */ createElementVNode("i", { class: "i ic:baseline-format-list-bulleted text-right cursor-pointer toolbar" }, null, -1);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "TreeHeader",
   props: searchProps,
   emits: [
@@ -542,11 +765,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       const _component_AInput = Input;
       const _component_AMenuItem = MenuItem;
       const _component_AMenuDivider = MenuDivider;
-      const _component_AMenu = Menu;
+      const _component_AMenu = Menu$1;
       const _component_ADropdown = Dropdown;
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        _ctx.title ? (openBlock(), createElementBlock("h4", _hoisted_2$2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
-        _ctx.search || _ctx.toolbar ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        _ctx.title ? (openBlock(), createElementBlock("h4", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+        _ctx.search || _ctx.toolbar ? (openBlock(), createElementBlock("div", _hoisted_3, [
           _ctx.search ? (openBlock(), createElementBlock("div", _hoisted_4, [
             unref(slots).addonBefore ? renderSlot(_ctx.$slots, "addonBefore", { key: 0 }) : createCommentVNode("", true),
             createVNode(_component_AInput, {
@@ -566,7 +789,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             overlay: withCtx(() => [
               createVNode(_component_AMenu, { onClick: handleMenuClick }, {
                 default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(toolbarList), (item) => {
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(toolbarList.value, (item) => {
                     return openBlock(), createElementBlock(Fragment, {
                       key: item.value
                     }, [
@@ -593,242 +816,23 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const _sfc_main$1 = defineComponent({
-  name: "ContextMenu",
-  props: rightMenuProps,
-  setup(props) {
-    const wrapRef = ref(null);
-    const showRef = ref(false);
-    const ItemContent = (props2) => {
-      const {
-        item
-      } = props2;
-      return createVNode("span", {
-        "class": "px-4 w-full flex items-center",
-        "onClick": props2.handler.bind(null, item)
-      }, [props2.showIcon && item.icon && createVNode("i", {
-        "class": "i mr-2 " + item.icon
-      }, null), createVNode("span", null, [item.label])]);
-    };
-    const getStyle = computed(() => {
-      const {
-        axis,
-        items,
-        styles,
-        width
-      } = props;
-      const {
-        x,
-        y
-      } = axis || {
-        x: 0,
-        y: 0
-      };
-      const menuHeight = (items || []).length * 40;
-      const body = document.body;
-      const left = body.clientWidth < x + width ? x - width : x;
-      const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
-      return {
-        ...styles,
-        position: "absolute",
-        width: `${width}px`,
-        left: `${left + 1}px`,
-        top: `${top + 1}px`,
-        zIndex: 9999
-      };
-    });
-    function handleAction(item, e) {
-      const {
-        handler,
-        disabled
-      } = item;
-      if (disabled)
-        return;
-      showRef.value = false;
-      e?.stopPropagation();
-      e?.preventDefault();
-      handler?.(props.node);
-    }
-    function renderMenuItem(items) {
-      const visibleItems = items.filter((item) => !item.hidden);
-      return visibleItems.map((item) => {
-        const {
-          disabled,
-          label,
-          children,
-          divider = false
-        } = item;
-        const contentProps = {
-          item,
-          handler: handleAction,
-          showIcon: props.showIcon
-        };
-        if (!children || children.length === 0) {
-          return createVNode(Fragment, null, [createVNode(Menu$1.Item, {
-            "disabled": disabled,
-            "class": "dt-context-menu__item",
-            "key": label
-          }, {
-            default: () => [createVNode(ItemContent, contentProps, null)]
-          }), divider ? createVNode(Divider, {
-            "key": `d-${label}`
-          }, null) : null]);
-        }
-        return createVNode(Menu$1.SubMenu, {
-          "key": label,
-          "disabled": disabled,
-          "popupClassName": "dt-context-menu__popup"
-        }, {
-          title: () => createVNode(ItemContent, contentProps, null),
-          default: () => renderMenuItem(children)
-        });
-      });
-    }
-    onMounted(() => {
-      nextTick(() => showRef.value = true);
-    });
-    onUnmounted(() => {
-      const el = unref(wrapRef);
-      el && document.body.removeChild(el);
-    });
-    return () => {
-      let _slot;
-      if (!unref(showRef)) {
-        return null;
-      }
-      const {
-        items
-      } = props;
-      return createVNode("div", {
-        "class": "dt-context-menu fixed top-0 left-0 z-50 block m-0"
-      }, [createVNode(Menu$1, {
-        "inlineIndent": 12,
-        "mode": "vertical",
-        "ref": wrapRef,
-        "style": unref(getStyle)
-      }, _isSlot(_slot = renderMenuItem(items)) ? _slot : {
-        default: () => [_slot]
-      })]);
-    };
-  }
-});
-function useContextMenu() {
-  const menuManager = {
-    domList: [],
-    resolve: () => {
-    }
-  };
-  function createContextMenu(options) {
-    const { event, node } = options || {};
-    event && event?.preventDefault();
-    return new Promise((resolve) => {
-      const body = document.body;
-      const container = document.createElement("div");
-      const propsData = { node };
-      if (options.styles) {
-        propsData.styles = options.styles;
-      }
-      if (options.items) {
-        propsData.items = options.items;
-      }
-      if (options.event) {
-        propsData.customEvent = event;
-        propsData.axis = { x: event.clientX, y: event.clientY };
-      }
-      const vm = createVNode(_sfc_main$1, propsData);
-      render$2(vm, container);
-      const handleClick = function() {
-        menuManager.resolve("");
-      };
-      menuManager.domList.push(container);
-      const remove = function() {
-        menuManager.domList.forEach((dom) => {
-          try {
-            dom && body.removeChild(dom);
-          } catch (error) {
-          }
-        });
-        body.removeEventListener("click", handleClick);
-        body.removeEventListener("scroll", handleClick);
-      };
-      menuManager.resolve = function(arg) {
-        remove();
-        resolve(arg);
-      };
-      remove();
-      body.appendChild(container);
-      body.addEventListener("click", handleClick);
-      body.addEventListener("scroll", handleClick);
-    });
-  }
-  function destroyContextMenu() {
-    if (menuManager) {
-      menuManager.resolve("");
-      menuManager.domList = [];
-    }
-  }
-  if (getCurrentInstance()) {
-    onUnmounted(() => {
-      destroyContextMenu();
-    });
-  }
-  return [createContextMenu, destroyContextMenu];
-}
-const _hoisted_1$1 = {
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true",
-  "data-icon": "folder-open",
-  viewBox: "64 64 896 896"
-};
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", { d: "M928 444H820V330.4c0-17.7-14.3-32-32-32H473L355.7 186.2a8.15 8.15 0 0 0-5.5-2.2H96c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h698c13 0 24.8-7.9 29.7-20l134-332c1.5-3.8 2.3-7.9 2.3-12 0-17.7-14.3-32-32-32zM136 256h188.5l119.6 114.4H748V444H238c-13 0-24.8 7.9-29.7 20L136 643.2V256zm635.3 512H159l103.3-256h612.4L771.3 768z" }, null, -1);
-const _hoisted_3$1 = [
-  _hoisted_2$1
-];
-function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_3$1);
-}
-const ForderOpen = { render: render$1 };
 const _hoisted_1 = {
-  width: "1em",
-  height: "1em",
-  fill: "currentColor",
-  "aria-hidden": "true",
-  "data-icon": "folder",
-  viewBox: "64 64 896 896"
+  class: "dt-tree h-full flex flex-col"
 };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", { d: "M880 298.4H521L403.7 186.2a8.15 8.15 0 0 0-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z" }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
-];
-function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
-}
-const Forder = { render };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: BasicProps,
-  emits: ["update:expandedKeys", "update:selectedKeys", "update:value", "check", "change", "clickNode", "drop", "update:searchValue"],
+  emits: ["register", "update:expandedKeys", "update:selectedKeys", "update:value", "check", "change", "clickNode", "drop", "update:searchValue"],
   setup(__props, {
-    expose,
     emit
   }) {
     const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const propsRef = ref(props);
     const {
       t
     } = useI18n("UI");
-    const {
-      getSlot
-    } = useSlots$1();
-    const {
-      getUiSize
-    } = useHeader();
-    const attrs = useAttrs();
-    const slots = useSlots();
     const activeKey = ref(props.activeKey);
     const state = reactive({
       checkStrictly: props.checkStrictly,
@@ -845,7 +849,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const getFieldNames = computed(() => {
       const {
         fieldNames
-      } = props;
+      } = unref(propsRef);
       return {
         children: "children",
         title: "title",
@@ -854,17 +858,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     });
     const getTreeData = computed(() => {
-      return searchState.startSearch ? searchState.searchData : unref(treeDataRef);
+      return (searchState.startSearch ? searchState.searchData : unref(treeDataRef)) ?? [];
     });
     const getNotFound = computed(() => {
       return !getTreeData.value || getTreeData.value.length === 0;
     });
     const getIcon = (params, icon) => {
       if (!icon) {
-        if (props.renderIcon && isFunction(props.renderIcon)) {
-          return props.renderIcon(params);
+        if (unref(propsRef).renderIcon && isFunction(unref(propsRef).renderIcon)) {
+          return unref(propsRef).renderIcon(params);
         } else if (!params?.isLeaf) {
-          return state.expandedKeys.includes(params.key) ? createVNode(ForderOpen, null, null) : createVNode(Forder, null, null);
+          const svgIcon = "svg " + (state.expandedKeys.includes(params.key) ? "ui-forder-open" : "ui-forder");
+          return createVNode(Icon, {
+            "name": svgIcon,
+            "size": 22
+          }, null);
         }
       }
       return createVNode("i", {
@@ -882,7 +890,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const searchText = searchState.searchText;
         const {
           highlight
-        } = unref(props);
+        } = unref(propsRef);
         const icon = getIcon(item, item.icon);
         const title = get(item, titleField);
         const searchIdx = searchText ? title.indexOf(searchText) : -1;
@@ -911,6 +919,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       let propsData = {
         ...attrs,
         ...props,
+        ...omit(unref(propsRef), ["onDrop"]),
         expandedKeys: state.expandedKeys,
         selectedKeys: state.selectedKeys,
         checkedKeys: state.checkedKeys,
@@ -951,14 +960,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         title,
         toolbar,
         search
-      } = props;
+      } = unref(propsRef);
       return title || toolbar || search || slots.headerTitle;
     });
     function handleClickNode(key, children, node) {
       emit("clickNode", node);
       activeKey.value = node[unref(getFieldNames).key];
-      if (!props.clickRowToExpand || !children || children.length === 0)
+      if (!unref(propsRef).clickRowToExpand || !children || children.length === 0) {
         return;
+      }
       if (!state.expandedKeys.includes(key)) {
         setExpandedKeys([...state.expandedKeys, key]);
       } else {
@@ -973,15 +983,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function renderAction(node) {
       const {
         action
-      } = props;
+      } = unref(propsRef);
       if (action && isFunction(action)) {
         return createVNode(Fragment, null, [action(node)]);
       }
       return null;
     }
     function handleSearch(searchValue) {
-      if (searchValue !== searchState.searchText)
+      if (searchValue !== searchState.searchText) {
         searchState.searchText = searchValue;
+      }
       emit("update:searchValue", searchValue);
       if (!searchValue) {
         searchState.startSearch = false;
@@ -990,7 +1001,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const {
         filterFn,
         expandOnSearch
-      } = unref(props);
+      } = unref(propsRef);
       const {
         title: titleField,
         key: keyField
@@ -1021,7 +1032,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const {
         rightMenuList: menuList = [],
         beforeRightClick
-      } = props;
+      } = unref(propsRef);
       let contextMenuOptions = {
         event,
         items: [],
@@ -1037,8 +1048,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       } else {
         contextMenuOptions.items = menuList;
       }
-      if (!contextMenuOptions.items?.length)
+      if (!contextMenuOptions.items?.length) {
         return;
+      }
       contextMenuOptions.items = contextMenuOptions.items.filter((item) => !item.hidden);
       createContextMenu(contextMenuOptions);
     }
@@ -1053,7 +1065,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getEnabledKeys,
       getSelectedNode,
       onDrop
-    } = useTree(treeDataRef, getFieldNames, emit);
+    } = useMethod(treeDataRef, getFieldNames, propsRef);
     function setExpandedKeys(keys) {
       state.expandedKeys = keys;
     }
@@ -1074,6 +1086,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function checkAll(checkAll2) {
       state.checkedKeys = checkAll2 ? getEnabledKeys() : [];
+      emit("check", state.checkedKeys);
     }
     function expandAll(expandAll2) {
       state.expandedKeys = expandAll2 ? getAllKeys() : [];
@@ -1081,7 +1094,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onStrictlyChange(strictly) {
       state.checkStrictly = strictly;
     }
-    const instance = {
+    const treeActionMethods = {
+      setProps,
       setExpandedKeys,
       getExpandedKeys,
       setSelectedKeys,
@@ -1107,69 +1121,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     onMounted(() => {
-      const level = parseInt(props.defaultExpandLevel);
-      if (level > 0) {
-        state.expandedKeys = filterByLevel(level);
-      } else if (props.defaultExpandAll) {
-        expandAll(true);
-      }
-    });
-    watch(() => props.searchValue, (val) => {
-      if (val !== searchState.searchText) {
-        searchState.searchText = val;
-      }
-    }, {
-      immediate: true
-    });
-    watch(() => props.treeData, (val) => {
-      if (val) {
-        handleSearch(searchState.searchText);
-      }
-    });
-    watch(() => props.value, () => {
-      state.checkedKeys = toRaw(props.value || []);
-    }, {
-      immediate: true
+      emit("register", treeActionMethods);
     });
     watch(() => state.checkedKeys, () => {
       const v = toRaw(state.checkedKeys);
       emit("update:value", v);
       emit("change", v);
     });
-    watchEffect(() => {
-      activeKey.value = props.activeKey;
-    });
-    watchEffect(() => {
-      treeDataRef.value = props.treeData;
-    });
-    watchEffect(() => {
-      state.expandedKeys = props.expandedKeys;
-    });
-    watchEffect(() => {
-      state.selectedKeys = props.selectedKeys;
-    });
-    watchEffect(() => {
-      state.checkedKeys = props.checkedKeys;
-    });
-    watchEffect(() => {
-      state.checkStrictly = props.checkStrictly;
-    });
-    expose(instance);
+    function setProps(_props) {
+      const aProps = {
+        ...props,
+        ...propsRef.value,
+        ..._props
+      };
+      propsRef.value = aProps;
+      treeDataRef.value = unref(aProps.treeData);
+      handleSearch(searchState.searchText);
+      if (aProps.searchValue && aProps.searchValue !== searchState.searchText) {
+        searchState.searchText = aProps.searchValue;
+      }
+      state.checkedKeys = toRaw(aProps.value || []);
+      activeKey.value = aProps.activeKey;
+      state.expandedKeys = aProps.expandedKeys;
+      state.selectedKeys = aProps.selectedKeys;
+      state.checkedKeys = aProps.checkedKeys;
+      state.checkStrictly = aProps.checkStrictly;
+      const level = aProps.expandLevel;
+      state.expandedKeys = filterByLevel(level);
+      if (aProps.defaultExpandAll) {
+        expandAll(true);
+      }
+    }
     return (_ctx, _cache) => {
       const _component_ATree = Tree;
       const _component_AEmpty = Empty;
       const _component_ASpin = Spin;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["dt-tree h-full flex flex-col", `dt-tree-${unref(getUiSize)}`])
-      }, [unref(showTitle) ? (openBlock(), createBlock(_sfc_main$2, {
+      return openBlock(), createElementBlock("div", _hoisted_1, [unref(showTitle) ? (openBlock(), createBlock(_sfc_main$1, {
         key: 0,
-        title: _ctx.title,
-        toolbar: _ctx.toolbar,
-        search: _ctx.search,
-        checkable: _ctx.checkable,
-        searchText: searchState.searchText,
-        checkAll,
-        expandAll,
+        title: unref(propsRef).title,
+        toolbar: unref(propsRef).toolbar,
+        search: unref(propsRef).search,
+        checkable: unref(propsRef).checkable,
+        "search-text": unref(searchState).searchText,
+        "check-all": checkAll,
+        "expand-all": expandAll,
         onSearch: handleSearch
       }, createSlots({
         _: 2
@@ -1178,13 +1173,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: item,
           fn: withCtx(() => [renderSlot(_ctx.$slots, item)])
         };
-      })]), 1032, ["title", "toolbar", "search", "checkable", "searchText"])) : createCommentVNode("", true), createVNode(_component_ASpin, {
+      })]), 1032, ["title", "toolbar", "search", "checkable", "search-text"])) : createCommentVNode("", true), createVNode(_component_ASpin, {
         spinning: _ctx.loading,
         tip: unref(t)("LOADING")
       }, {
         default: withCtx(() => [withDirectives(createElementVNode("div", null, [createVNode(_component_ATree, mergeProps(unref(getBindValues), {
-          showIcon: false,
-          treeData: unref(treeData),
+          "show-icon": false,
+          "tree-data": unref(treeData),
           onDrop: unref(onDrop)
         }), createSlots({
           _: 2
@@ -1192,12 +1187,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: "switcherIcon",
           fn: withCtx((data) => [renderSlot(_ctx.$slots, "switcherIcon", normalizeProps(guardReactiveProps(data || {})))]),
           key: "0"
-        } : void 0]), 1040, ["treeData", "onDrop"])], 512), [[vShow, !unref(getNotFound)]]), withDirectives(createVNode(_component_AEmpty, null, null, 512), [[vShow, unref(getNotFound)]])]),
+        } : void 0]), 1040, ["tree-data", "onDrop"])], 512), [[vShow, !unref(getNotFound)]]), withDirectives(createVNode(_component_AEmpty, null, null, 512), [[vShow, unref(getNotFound)]])]),
         _: 3
-      }, 8, ["spinning", "tip"])], 2);
+      }, 8, ["spinning", "tip"])]);
     };
   }
 });
 export {
-  _sfc_main as DtTree
+  _sfc_main as DtTree,
+  useTree
 };