@dt-frames/ui 2.0.4 → 2.0.6

package/es/components/tree/index.js

@@ -0,0 +1,1087 @@
+import { InputSearch, 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, renderSlot, createCommentVNode, toDisplayString, createVNode, createBlock, withModifiers, withCtx, Fragment, renderList, normalizeProps, guardReactiveProps, createTextVNode, createElementVNode, onMounted, onUnmounted, isVNode, getCurrentInstance, render, useAttrs, reactive, toRaw, watchEffect, 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 { useDebounceFn } from "@vueuse/core";
+import { Menu as Menu$1, Divider } from "ant-design-vue";
+const BasicProps = {
+  defaultExpandLevel: {
+    type: String
+  },
+  defaultExpandAll: {
+    type: Boolean
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  checkStrictly: {
+    type: Boolean,
+    default: false
+  },
+  expandedKeys: {
+    type: Array,
+    default: () => []
+  },
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  checkedKeys: {
+    type: Array,
+    default: () => []
+  },
+  fieldNames: {
+    type: Object
+  },
+  beforeRightClick: {
+    type: Function,
+    default: void 0
+  },
+  rightMenuList: {
+    type: Array
+  },
+  renderIcon: {
+    type: Function
+  },
+  highlight: {
+    type: [Boolean, String],
+    default: false
+  },
+  actionList: {
+    type: Array,
+    default: () => []
+  },
+  clickRowToExpand: {
+    type: Boolean,
+    default: false
+  },
+  searchValue: {
+    type: String,
+    default: ""
+  },
+  filterFn: {
+    type: Function,
+    default: void 0
+  },
+  checkable: Boolean,
+  expandOnSearch: Boolean,
+  checkOnSearch: Boolean,
+  selectedOnSearch: Boolean,
+  treeData: {
+    type: Array
+  },
+  value: {
+    type: [Object, Array]
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  toolbar: Boolean,
+  search: {
+    type: Boolean,
+    default: false
+  }
+};
+const searchProps = {
+  title: {
+    type: String,
+    default: ""
+  },
+  toolbar: {
+    type: Boolean,
+    default: false
+  },
+  checkable: {
+    type: Boolean,
+    default: false
+  },
+  search: {
+    type: Boolean,
+    default: false
+  },
+  searchText: {
+    type: String,
+    default: ""
+  },
+  checkAll: {
+    type: Function,
+    default: void 0
+  },
+  expandAll: {
+    type: Function,
+    default: void 0
+  }
+};
+const rightMenuProps = {
+  width: {
+    type: Number,
+    default: 156
+  },
+  customEvent: {
+    type: Object,
+    default: null
+  },
+  styles: {
+    type: Object
+  },
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  axis: {
+    type: Object,
+    default: () => {
+      return { x: 0, y: 0 };
+    }
+  },
+  items: {
+    type: Array,
+    default: () => []
+  }
+};
+function eachTree(treeDatas, callBack, parentNode = {}) {
+  treeDatas.forEach((el) => {
+    const newNode = callBack(el, parentNode) || el;
+    if (el.children) {
+      eachTree(el.children, callBack, newNode);
+    }
+  });
+}
+function forEach(tree, func, config = {}) {
+  const list = [...tree];
+  const { children = "children" } = config;
+  for (let i = 0; i < list.length; i++) {
+    if (func(list[i])) {
+      return;
+    }
+    children && list[i][children] && list.splice(i + 1, 0, ...list[i][children]);
+  }
+}
+function filter(tree, func, config = {}) {
+  const children = config.children || "children";
+  function listFilter(list) {
+    return list.map((node) => ({ ...node })).filter((node) => {
+      node[children] = node[children] && listFilter(node[children]);
+      return func(node) || node[children] && node[children].length;
+    });
+  }
+  return listFilter(tree);
+}
+function treeToList(tree, config = {}) {
+  const { children = "children" } = config;
+  const result = [...tree];
+  for (let i = 0; i < result.length; i++) {
+    if (!result[i][children])
+      continue;
+    result.splice(i + 1, 0, ...result[i][children]);
+  }
+  return result;
+}
+function useTree(treeDataRef, getFieldNames) {
+  function getAllKeys(list) {
+    const keys = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField)
+      return keys;
+    for (let index2 = 0; index2 < treeData.length; index2++) {
+      const node = treeData[index2];
+      keys.push(node[keyField]);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...getAllKeys(children));
+      }
+    }
+    return keys;
+  }
+  function getEnabledKeys(list) {
+    const keys = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField)
+      return keys;
+    for (let index2 = 0; index2 < treeData.length; index2++) {
+      const node = treeData[index2];
+      node.disabled !== true && node.selectable !== false && keys.push(node[keyField]);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...getEnabledKeys(children));
+      }
+    }
+    return keys;
+  }
+  function getChildrenKeys(nodeKey, list) {
+    const keys = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField)
+      return keys;
+    for (let index2 = 0; index2 < treeData.length; index2++) {
+      const node = treeData[index2];
+      const children = node[childrenField];
+      if (nodeKey === node[keyField]) {
+        keys.push(node[keyField]);
+        if (children && children.length) {
+          keys.push(...getAllKeys(children));
+        }
+      } else {
+        if (children && children.length) {
+          keys.push(...getChildrenKeys(nodeKey, children));
+        }
+      }
+    }
+    return keys;
+  }
+  function updateNodeByKey(key, node, list) {
+    if (!key)
+      return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField)
+      return;
+    for (let index2 = 0; index2 < treeData.length; index2++) {
+      const element = treeData[index2];
+      const children = element[childrenField];
+      if (element[keyField] === key) {
+        treeData[index2] = { ...treeData[index2], ...node };
+        break;
+      } else if (children && children.length) {
+        updateNodeByKey(key, node, element[childrenField]);
+      }
+    }
+  }
+  function filterByLevel(level = 1, list, currentLevel = 1) {
+    if (!level)
+      return [];
+    const res = [];
+    const data = list || unref(treeDataRef) || [];
+    for (let index2 = 0; index2 < data.length; index2++) {
+      const item = data[index2];
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
+      const key = keyField ? item[keyField] : "";
+      const children = childrenField ? item[childrenField] : [];
+      res.push(key);
+      if (children && children.length && currentLevel < level) {
+        currentLevel += 1;
+        res.push(...filterByLevel(level, children, currentLevel));
+      }
+    }
+    return res;
+  }
+  function insertNodeByKey({ parentKey = null, node, push = "push" }) {
+    const treeData = cloneDeep(unref(treeDataRef));
+    if (!parentKey) {
+      treeData[push](node);
+      treeDataRef.value = treeData;
+      return;
+    }
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField)
+      return;
+    forEach(treeData, (treeItem) => {
+      if (treeItem[keyField] === parentKey) {
+        treeItem[childrenField] = treeItem[childrenField] || [];
+        treeItem[childrenField][push](node);
+        return true;
+      }
+    });
+    treeDataRef.value = treeData;
+  }
+  function insertNodesByKey({ parentKey = null, list, push = "push" }) {
+    const treeData = cloneDeep(unref(treeDataRef));
+    if (!list || list.length < 1)
+      return;
+    if (!parentKey) {
+      for (let i = 0; i < list.length; i++) {
+        treeData[push](list[i]);
+      }
+    } else {
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
+      if (!childrenField || !keyField)
+        return;
+      forEach(treeData, (treeItem) => {
+        if (treeItem[keyField] === parentKey) {
+          treeItem[childrenField] = treeItem[childrenField] || [];
+          for (let i = 0; i < list.length; i++) {
+            treeItem[childrenField][push](list[i]);
+          }
+          treeDataRef.value = treeData;
+          return true;
+        }
+      });
+    }
+  }
+  function deleteNodeByKey(key, list) {
+    if (!key)
+      return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField)
+      return;
+    for (let index2 = 0; index2 < treeData.length; index2++) {
+      const element = treeData[index2];
+      const children = element[childrenField];
+      if (element[keyField] === key) {
+        treeData.splice(index2, 1);
+        break;
+      } else if (children && children.length) {
+        deleteNodeByKey(key, element[childrenField]);
+      }
+    }
+  }
+  function getSelectedNode(key, list, selectedNode) {
+    if (!key && key !== 0)
+      return null;
+    const treeData = list || unref(treeDataRef);
+    treeData.forEach((item) => {
+      if (selectedNode?.key || selectedNode?.key === 0)
+        return selectedNode;
+      if (item.key === key) {
+        selectedNode = item;
+        return;
+      }
+      if (item.children && item.children.length) {
+        selectedNode = getSelectedNode(key, item.children, selectedNode);
+      }
+    });
+    return selectedNode || null;
+  }
+  return {
+    getAllKeys,
+    getEnabledKeys,
+    getChildrenKeys,
+    updateNodeByKey,
+    filterByLevel,
+    insertNodeByKey,
+    insertNodesByKey,
+    deleteNodeByKey,
+    getSelectedNode
+  };
+}
+var ToolbarEnum = /* @__PURE__ */ ((ToolbarEnum2) => {
+  ToolbarEnum2[ToolbarEnum2["SELECT_ALL"] = 0] = "SELECT_ALL";
+  ToolbarEnum2[ToolbarEnum2["UN_SELECT_ALL"] = 1] = "UN_SELECT_ALL";
+  ToolbarEnum2[ToolbarEnum2["EXPAND_ALL"] = 2] = "EXPAND_ALL";
+  ToolbarEnum2[ToolbarEnum2["UN_EXPAND_ALL"] = 3] = "UN_EXPAND_ALL";
+  return ToolbarEnum2;
+})(ToolbarEnum || {});
+const _hoisted_1$1 = { class: "dt-tree-header flex px-2 py-1.5 items-center" };
+const _hoisted_2 = {
+  key: 1,
+  class: "text-center leading-8 m-0"
+};
+const _hoisted_3 = {
+  key: 2,
+  class: "dt-tree-search flex flex-1 items-center"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "flex-1"
+};
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("i", { class: "i ic:baseline-more-vert text-center cursor-pointer" }, null, -1);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "TreeHeader",
+  props: searchProps,
+  emits: [
+    "search"
+  ],
+  setup(__props, { emit: emits }) {
+    const props = __props;
+    const slots = useSlots();
+    const { t } = useI18n("UI");
+    const searchValue = ref("");
+    function emitChange(value) {
+      emits("search", value);
+    }
+    function handleMenuClick(e) {
+      const { key } = e;
+      switch (key) {
+        case ToolbarEnum.SELECT_ALL:
+          props.checkAll?.(true);
+          break;
+        case ToolbarEnum.UN_SELECT_ALL:
+          props.checkAll?.(false);
+          break;
+        case ToolbarEnum.EXPAND_ALL:
+          props.expandAll?.(true);
+          break;
+        case ToolbarEnum.UN_EXPAND_ALL:
+          props.expandAll?.(false);
+          break;
+      }
+    }
+    const toolbarList = computed(() => {
+      const { checkable } = props;
+      const defaultToolbarList = [
+        { label: t("EXPAND_ALL"), value: ToolbarEnum.EXPAND_ALL },
+        {
+          label: t("COLLAPSE_ALL"),
+          value: ToolbarEnum.UN_EXPAND_ALL
+        }
+      ];
+      return checkable ? [
+        { label: t("SELECT_ALL1"), value: ToolbarEnum.SELECT_ALL },
+        {
+          label: t("CANCEL_SELECT_ALL"),
+          value: ToolbarEnum.UN_SELECT_ALL,
+          divider: checkable
+        },
+        ...defaultToolbarList
+      ] : defaultToolbarList;
+    });
+    const debounceEmitChange = useDebounceFn(emitChange, 200);
+    watch(
+      () => searchValue.value,
+      (v) => {
+        debounceEmitChange(v);
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_AInputSearch = InputSearch;
+      const _component_AMenuItem = MenuItem;
+      const _component_AMenuDivider = MenuDivider;
+      const _component_AMenu = Menu;
+      const _component_ADropdown = Dropdown;
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        unref(slots).headerTitle ? renderSlot(_ctx.$slots, "headerTitle", { key: 0 }) : createCommentVNode("v-if", true),
+        !unref(slots).headerTitle && _ctx.title ? (openBlock(), createElementBlock("h4", _hoisted_2, toDisplayString(_ctx.title), 1)) : createCommentVNode("v-if", true),
+        _ctx.search || _ctx.toolbar ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          _ctx.search ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(_component_AInputSearch, {
+              size: "small",
+              allowClear: "",
+              value: searchValue.value,
+              "onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
+              placeholder: unref(t)("FILTER")
+            }, null, 8, ["value", "placeholder"])
+          ])) : createCommentVNode("v-if", true),
+          _ctx.toolbar ? (openBlock(), createBlock(_component_ADropdown, {
+            key: 1,
+            onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["prevent"]))
+          }, {
+            overlay: withCtx(() => [
+              createVNode(_component_AMenu, { onClick: handleMenuClick }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(toolbarList), (item) => {
+                    return openBlock(), createElementBlock(Fragment, {
+                      key: item.value
+                    }, [
+                      createVNode(_component_AMenuItem, normalizeProps(guardReactiveProps({ key: item.value })), {
+                        default: withCtx(() => [
+                          createTextVNode(toDisplayString(item.label), 1)
+                        ]),
+                        _: 2
+                      }, 1040),
+                      item.divider ? (openBlock(), createBlock(_component_AMenuDivider, { key: 0 })) : createCommentVNode("v-if", true)
+                    ], 64);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(() => [
+              _hoisted_5
+            ]),
+            _: 1
+          })) : createCommentVNode("v-if", true)
+        ])) : createCommentVNode("v-if", true)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const TreeHeader = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/tree/src/components/TreeHeader.vue"]]);
+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?.();
+    }
+    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]
+      })]);
+    };
+  }
+});
+const contextMenuVue = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/tree/src/components/ContextMenu.vue"]]);
+function useContextMenu() {
+  const menuManager = {
+    domList: [],
+    resolve: () => {
+    }
+  };
+  function createContextMenu(options) {
+    const { event } = options || {};
+    event && event?.preventDefault();
+    return new Promise((resolve) => {
+      const body = document.body;
+      const container = document.createElement("div");
+      const propsData = {};
+      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(contextMenuVue, 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];
+}
+const _hoisted_1 = {
+  class: "dt-tree h-full flex flex-col"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: BasicProps,
+  emits: ["update:expandedKeys", "update:selectedKeys", "update:value", "check", "change", "clickNode", "update:searchValue"],
+  setup(__props, {
+    expose,
+    emit
+  }) {
+    const props = __props;
+    const {
+      t
+    } = useI18n("UI");
+    const {
+      getSlot,
+      extendSlots
+    } = useSlots$1();
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const state = reactive({
+      checkStrictly: props.checkStrictly,
+      expandedKeys: props.expandedKeys || [],
+      selectedKeys: props.selectedKeys || [],
+      checkedKeys: props.checkedKeys || []
+    });
+    const searchState = reactive({
+      startSearch: false,
+      searchText: "",
+      searchData: []
+    });
+    const treeDataRef = ref([]);
+    const getFieldNames = computed(() => {
+      const {
+        fieldNames
+      } = props;
+      return {
+        children: "children",
+        title: "title",
+        key: "key",
+        ...fieldNames
+      };
+    });
+    const getTreeData = computed(() => {
+      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);
+        }
+      }
+      return icon;
+    };
+    const treeData = computed(() => {
+      const data = cloneDeep(getTreeData.value);
+      eachTree(data, (item, _parent) => {
+        const searchText = searchState.searchText;
+        const {
+          highlight
+        } = unref(props);
+        const {
+          title: titleField,
+          key: keyField,
+          children: childrenField
+        } = unref(getFieldNames);
+        const icon = getIcon(item, item.icon);
+        const title = get(item, titleField);
+        const searchIdx = searchText ? title.indexOf(searchText) : -1;
+        const isHighlight = searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
+        const highlightStyle = `color: ${isBoolean(highlight) ? "#f50" : highlight}`;
+        const titleDom = isHighlight ? createVNode("span", {
+          "class": "tree-content"
+        }, [createVNode("span", null, [title.substr(0, searchIdx)]), createVNode("span", {
+          "style": highlightStyle
+        }, [searchText]), createVNode("span", null, [title.substr(searchIdx + searchText.length)])]) : title;
+        item._title = item.title;
+        item[titleField] = createVNode("span", {
+          "class": "tree-title",
+          "onClick": handleClickNode.bind(null, item[keyField], item[childrenField], item)
+        }, [slots?.title ? getSlot(slots, "title", item) : createVNode(Fragment, null, [unref(getBindValues).showIcon && icon && createVNode("i", {
+          "class": `i ${icon}`
+        }, null), titleDom, createVNode("span", {
+          "class": "tree-action"
+        }, [renderAction(item)])])]);
+      });
+      return data;
+    });
+    const getBindValues = computed(() => {
+      let propsData = {
+        blockNode: true,
+        ...attrs,
+        ...props,
+        expandedKeys: state.expandedKeys,
+        selectedKeys: state.selectedKeys,
+        checkedKeys: state.checkedKeys,
+        checkStrictly: state.checkStrictly,
+        fieldNames: unref(getFieldNames),
+        "onUpdate:expandedKeys": (v) => {
+          state.expandedKeys = v;
+          emit("update:expandedKeys", v);
+        },
+        "onUpdate:selectedKeys": (v) => {
+          state.selectedKeys = v;
+          emit("update:selectedKeys", v);
+        },
+        onCheck: (v, e) => {
+          let currentValue = toRaw(state.checkedKeys);
+          if (isArray(currentValue) && searchState.startSearch) {
+            const {
+              key
+            } = unref(getFieldNames);
+            currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
+            if (e.checked) {
+              currentValue.push(e.node.$attrs.node[key]);
+            }
+            state.checkedKeys = currentValue;
+          } else {
+            state.checkedKeys = v;
+          }
+          const rawVal = toRaw(state.checkedKeys);
+          emit("update:value", rawVal);
+          emit("check", rawVal, e);
+        },
+        onRightClick: handleRightClick
+      };
+      return omit(propsData, "treeData", "class");
+    });
+    const showTitle = computed(() => {
+      const {
+        title,
+        toolbar,
+        search
+      } = props;
+      return title || toolbar || search || slots.headerTitle;
+    });
+    function handleClickNode(key, children, node) {
+      emit("clickNode", node);
+      if (!props.clickRowToExpand || !children || children.length === 0)
+        return;
+      if (!state.expandedKeys.includes(key)) {
+        setExpandedKeys([...state.expandedKeys, key]);
+      } else {
+        const keys = [...state.expandedKeys];
+        const index2 = keys.findIndex((item) => item === key);
+        if (index2 !== -1) {
+          keys.splice(index2, 1);
+        }
+        setExpandedKeys(keys);
+      }
+    }
+    function renderAction(node) {
+      const {
+        actionList
+      } = props;
+      if (!actionList || actionList.length === 0)
+        return;
+      return actionList.map((item, index2) => {
+        let nodeShow = true;
+        if (isFunction(item.show)) {
+          nodeShow = item.show?.(node);
+        } else if (isBoolean(item.show)) {
+          nodeShow = item.show;
+        }
+        if (!nodeShow)
+          return null;
+        return createVNode("span", {
+          "key": index2,
+          "class": "tree-action"
+        }, [item.render(node)]);
+      });
+    }
+    function handleSearch(searchValue) {
+      if (searchValue !== searchState.searchText)
+        searchState.searchText = searchValue;
+      emit("update:searchValue", searchValue);
+      if (!searchValue) {
+        searchState.startSearch = false;
+        return;
+      }
+      const {
+        filterFn,
+        checkable,
+        expandOnSearch,
+        checkOnSearch,
+        selectedOnSearch
+      } = unref(props);
+      const {
+        title: titleField,
+        key: keyField
+      } = unref(getFieldNames);
+      const matchedKeys = [];
+      searchState.startSearch = true;
+      searchState.searchData = filter(unref(treeDataRef), (node) => {
+        const result = filterFn ? filterFn(searchValue, node, unref(getFieldNames)) : node[titleField]?.includes(searchValue) ?? false;
+        if (result) {
+          matchedKeys.push(node[keyField]);
+        }
+        return result;
+      }, unref(getFieldNames));
+      if (expandOnSearch) {
+        const expandKeys = treeToList(searchState.searchData).map((val) => {
+          return val[keyField];
+        });
+        if (expandKeys && expandKeys.length) {
+          setExpandedKeys(expandKeys);
+        }
+      }
+      if (checkOnSearch && checkable && matchedKeys.length) {
+        setCheckedKeys(matchedKeys);
+      }
+      if (selectedOnSearch && matchedKeys.length) {
+        setSelectedKeys(matchedKeys);
+      }
+    }
+    const [createContextMenu] = useContextMenu();
+    async function handleRightClick({
+      event,
+      node
+    }) {
+      const {
+        rightMenuList: menuList = [],
+        beforeRightClick
+      } = props;
+      let contextMenuOptions = {
+        event,
+        items: []
+      };
+      if (beforeRightClick && isFunction(beforeRightClick)) {
+        let result = await beforeRightClick(node, event);
+        if (Array.isArray(result)) {
+          contextMenuOptions.items = result;
+        } else {
+          Object.assign(contextMenuOptions, result);
+        }
+      } else {
+        contextMenuOptions.items = menuList;
+      }
+      if (!contextMenuOptions.items?.length)
+        return;
+      contextMenuOptions.items = contextMenuOptions.items.filter((item) => !item.hidden);
+      createContextMenu(contextMenuOptions);
+    }
+    const {
+      deleteNodeByKey,
+      insertNodeByKey,
+      insertNodesByKey,
+      filterByLevel,
+      updateNodeByKey,
+      getAllKeys,
+      getChildrenKeys,
+      getEnabledKeys,
+      getSelectedNode
+    } = useTree(treeDataRef, getFieldNames);
+    function setExpandedKeys(keys) {
+      state.expandedKeys = keys;
+    }
+    function getExpandedKeys() {
+      return state.expandedKeys;
+    }
+    function setSelectedKeys(keys) {
+      state.selectedKeys = keys;
+    }
+    function getSelectedKeys() {
+      return state.selectedKeys;
+    }
+    function setCheckedKeys(keys) {
+      state.checkedKeys = keys;
+    }
+    function getCheckedKeys() {
+      return state.checkedKeys;
+    }
+    function checkAll(checkAll2) {
+      state.checkedKeys = checkAll2 ? getEnabledKeys() : [];
+    }
+    function expandAll(expandAll2) {
+      state.expandedKeys = expandAll2 ? getAllKeys() : [];
+    }
+    function onStrictlyChange(strictly) {
+      state.checkStrictly = strictly;
+    }
+    const instance = {
+      setExpandedKeys,
+      getExpandedKeys,
+      setSelectedKeys,
+      getSelectedKeys,
+      setCheckedKeys,
+      getCheckedKeys,
+      insertNodeByKey,
+      insertNodesByKey,
+      deleteNodeByKey,
+      updateNodeByKey,
+      getSelectedNode,
+      checkAll,
+      expandAll,
+      onStrictlyChange,
+      filterByLevel: (level) => {
+        state.expandedKeys = filterByLevel(level);
+      },
+      setSearchValue: (value) => {
+        handleSearch(value);
+      },
+      getSearchValue: () => {
+        return searchState.searchText;
+      }
+    };
+    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
+    });
+    watch(() => state.checkedKeys, () => {
+      const v = toRaw(state.checkedKeys);
+      emit("update:value", v);
+      emit("change", v);
+    });
+    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);
+    return (_ctx, _cache) => {
+      const _component_ATree = Tree;
+      const _component_AEmpty = Empty;
+      const _component_ASpin = Spin;
+      return openBlock(), createElementBlock("div", _hoisted_1, [unref(showTitle) ? (openBlock(), createBlock(TreeHeader, {
+        key: 0,
+        title: _ctx.title,
+        toolbar: _ctx.toolbar,
+        search: _ctx.search,
+        checkable: _ctx.checkable,
+        searchText: searchState.searchText,
+        checkAll,
+        expandAll,
+        onSearch: handleSearch
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(unref(extendSlots)(unref(slots))), 1)]),
+        _: 1
+      }, 8, ["title", "toolbar", "search", "checkable", "searchText"])) : createCommentVNode("v-if", 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)
+        }), null, 16, ["treeData"])], 512), [[vShow, !unref(getNotFound)]]), withDirectives(createVNode(_component_AEmpty, null, null, 512), [[vShow, unref(getNotFound)]])]),
+        _: 1
+      }, 8, ["spinning", "tip"])]);
+    };
+  }
+});
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "D:/dt/dt-frame-front/dt-frames/frames/packages/ui/src/components/tree/src/index.vue"]]);
+export {
+  index as DtTree
+};