tdesign-vue/es/tree/tree.js

tdesign-vue

/**
 * tdesign v1.14.1
 * (c) 2025 tdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { upperFirst, isFunction } from 'lodash-es';
import { getCreateElement, getScopedSlots, TransitionGroup } from './adapt.js';
import props from './props.js';
import useTreeStore from './hooks/useTreeStore.js';
import useTreeStyles from './hooks/useTreeStyles.js';
import useTreeState from './hooks/useTreeState.js';
import useTreeAction from './hooks/useTreeAction.js';
import useTreeScroll from './hooks/useTreeScroll.js';
import useTreeNodes from './hooks/useTreeNodes.js';
import useDragHandle from './hooks/useDragHandle.js';
import { renderTNodeJSX } from '../utils/render-tnode.js';
import { getNode } from './util.js';
import { defineComponent } from '@vue/composition-api';
import { useConfig } from '../config-provider/useConfig.js';
import { usePrefixClass } from '../hooks/useConfig.js';
import 'vue';
import '../utils/withInstall.js';
import '../hooks/useVModel.js';
import '../hooks/useDefaultValue.js';
import 'tdesign-icons-vue';
import '../checkbox/index.js';
import '../checkbox/group.js';
import '../_chunks/dep-e77071c7.js';
import '@babel/runtime/helpers/typeof';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/slicedToArray';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import '../checkbox/checkbox.js';
import '../checkbox/props.js';
import '../hooks/index.js';
import '../hooks/slots.js';
import '../hooks/useCommonClassName.js';
import '../hooks/useDestroyOnClose.js';
import '../hooks/useElementLazyRender.js';
import '../_common/js/utils/observe.js';
import '../hooks/useFormDisabled.js';
import '../hooks/useGlobalIcon.js';
import '../hooks/useLazyLoad.js';
import '../hooks/useResizeObserver.js';
import '../hooks/useVirtualScrollNew.js';
import '../hooks/useImagePreviewUrl.js';
import '../_common/js/upload/utils.js';
import '../_common/js/log/log.js';
import '../hooks/useMutationObservable.js';
import '../hooks/useVariables.js';
import '../_common/js/utils/getColorTokenColor.js';
import '../_common/js/common.js';
import '../checkbox/constants.js';
import '../checkbox/store.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '../checkbox/hooks/useKeyboardEvent.js';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-d2f11e9e.js';
import '../_chunks/dep-05dc6583.js';
import 'dayjs';
import '../_chunks/dep-62386ed0.js';
import '../config-provider/type.js';
import '../_common/js/global-config/t.js';
import '@babel/runtime/helpers/readOnlyError';
import '../checkbox/checkbox-group-props.js';
import './style/css.js';
import '../checkbox/type.js';
import '../loading/index.js';
import '../loading/directive.js';
import '../loading/plugin.js';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/setStyle.js';
import '../_common/js/utils/helper.js';
import '../config-provider/config-receiver.js';
import '../utils/mixins.js';
import '../utils/dom.js';
import 'raf';
import '../utils/easing.js';
import '../utils/transfer-dom.js';
import '../loading/props.js';
import '../config.js';
import '../loading/type.js';
import '../_common/js/tree/tree-node.js';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/regenerator';
import '../_common/js/tree/tree-node-model.js';
import '../_common/js/log/index.js';
import '../_common/js/tree/tree-store.js';
import 'mitt';
import './tree-item.js';
import './hooks/useItemState.js';
import './hooks/useTreeItem.js';
import './hooks/useItemEvents.js';
import './hooks/useRenderIcon.js';
import './hooks/useRenderLabel.js';
import './hooks/useRenderLine.js';
import './hooks/useRenderOperations.js';
import './hooks/useDraggable.js';
import './hooks/useTreeEvents.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _TdTree = defineComponent({
  name: "TTree",
  model: {
    prop: "value",
    event: "change"
  },
  props: _objectSpread({}, props),
  setup: function setup(props2, context) {
    var _useConfig = useConfig("tree"),
      t = _useConfig.t,
      global = _useConfig.global;
    var classPrefix = usePrefixClass();
    var componentName = usePrefixClass("tree");
    var _useTreeState = useTreeState(props2, context),
      state = _useTreeState.state;
    var treeContentRef = state.treeContentRef,
      isScrolling = state.isScrolling;
    var _useTreeStore = useTreeStore(state),
      store = _useTreeStore.store,
      updateStoreConfig = _useTreeStore.updateStoreConfig,
      rebuild = _useTreeStore.rebuild;
    useDragHandle(state);
    var _useTreeAction = useTreeAction(state),
      setActived = _useTreeAction.setActived,
      setExpanded = _useTreeAction.setExpanded,
      setChecked = _useTreeAction.setChecked;
    var _useTreeScroll = useTreeScroll(state),
      onInnerVirtualScroll = _useTreeScroll.onInnerVirtualScroll,
      virtualConfig = _useTreeScroll.virtualConfig,
      scrollToElement = _useTreeScroll.scrollToElement;
    var _useTreeNodes = useTreeNodes(state),
      renderTreeNodes = _useTreeNodes.renderTreeNodes,
      nodesEmpty = _useTreeNodes.nodesEmpty;
    var _useTreeStyles = useTreeStyles(state),
      treeClasses = _useTreeStyles.treeClasses,
      treeContentStyles = _useTreeStyles.treeContentStyles,
      scrollStyles = _useTreeStyles.scrollStyles,
      cursorStyles = _useTreeStyles.cursorStyles;
    return {
      t: t,
      global: global,
      classPrefix: classPrefix,
      componentName: componentName,
      state: state,
      store: store,
      treeClasses: treeClasses,
      treeContentRef: treeContentRef,
      rebuild: rebuild,
      updateStoreConfig: updateStoreConfig,
      setActived: setActived,
      setExpanded: setExpanded,
      setChecked: setChecked,
      renderTreeNodes: renderTreeNodes,
      nodesEmpty: nodesEmpty,
      isScrolling: isScrolling,
      onInnerVirtualScroll: onInnerVirtualScroll,
      treeContentStyles: treeContentStyles,
      scrollStyles: scrollStyles,
      cursorStyles: cursorStyles,
      virtualConfig: virtualConfig,
      scrollTo: scrollToElement,
      scrollToElement: scrollToElement
    };
  },
  watch: {
    data: function data(list) {
      this.rebuild(list);
    }
  },
  methods: {
    refresh: function refresh() {
      this.store.refreshState();
    },
    setItem: function setItem(value, options) {
      var _this = this;
      var node = this.store.getNode(value);
      var spec = options;
      var keys = Object.keys(spec);
      if (node && spec) {
        ["expanded", "actived", "checked"].forEach(function (name) {
          if (keys.includes(name)) {
            var val = spec[name];
            delete spec[name];
            var methodName = "set".concat(upperFirst(name));
            var setupMethod = _this[methodName];
            if (isFunction(setupMethod)) {
              setupMethod.call(_this, node, val);
            }
          }
        });
        node.set(spec);
      }
    },
    getItem: function getItem(value) {
      var node = this.store.getNode(value);
      return node === null || node === void 0 ? void 0 : node.getModel();
    },
    getItems: function getItems(value) {
      var nodes = this.store.getNodes(value);
      return nodes.map(function (node) {
        return node.getModel();
      });
    },
    appendTo: function appendTo(para, item) {
      var store = this.store;
      var list = [];
      if (Array.isArray(item)) {
        list = item;
      } else {
        list = [item];
      }
      list.forEach(function (item2) {
        var val = (item2 === null || item2 === void 0 ? void 0 : item2.value) || "";
        var node = getNode(store, val);
        if (node) {
          store.appendNodes(para, node);
        } else {
          store.appendNodes(para, item2);
        }
      });
    },
    insertBefore: function insertBefore(value, item) {
      var store = this.store;
      var val = (item === null || item === void 0 ? void 0 : item.value) || "";
      var node = getNode(store, val);
      if (node) {
        store.insertBefore(value, node);
      } else {
        store.insertBefore(value, item);
      }
    },
    insertAfter: function insertAfter(value, item) {
      var store = this.store;
      var val = (item === null || item === void 0 ? void 0 : item.value) || "";
      var node = getNode(store, val);
      if (node) {
        store.insertAfter(value, node);
      } else {
        store.insertAfter(value, item);
      }
    },
    remove: function remove(value) {
      return this.store.remove(value);
    },
    getIndex: function getIndex(value) {
      return this.store.getNodeIndex(value);
    },
    getParent: function getParent(value) {
      var node = this.store.getParent(value);
      return node === null || node === void 0 ? void 0 : node.getModel();
    },
    getParents: function getParents(value) {
      var nodes = this.store.getParents(value);
      return nodes.map(function (node) {
        return node.getModel();
      });
    },
    getPath: function getPath(value) {
      var node = this.store.getNode(value);
      var pathNodes = [];
      if (node) {
        pathNodes = node.getPath().map(function (node2) {
          return node2.getModel();
        });
      }
      return pathNodes;
    },
    getTreeData: function getTreeData(value) {
      var list = [];
      if (value) {
        var node = this.store.getNode(value);
        if (!node) return [];
        list = this.store.getNodes(value);
      } else {
        list = this.store.getNodes();
      }
      var nodeMap = {};
      var treeNodes = [];
      list.forEach(function (item) {
        var value2 = item.value;
        var itemData = _objectSpread(_objectSpread({}, item.data), {}, {
          value: value2
        });
        delete itemData.children;
        nodeMap[value2] = itemData;
        var parent = item.getParent();
        if (!parent) {
          treeNodes.push(itemData);
        } else {
          var parentData = nodeMap[parent.value];
          if (!parentData) {
            treeNodes.push(itemData);
          } else {
            if (!Array.isArray(parentData.children)) {
              parentData.children = [];
            }
            parentData.children.push(itemData);
          }
        }
      });
      return treeNodes;
    }
  },
  render: function render(h) {
    var _allNodes$value$filte, _allNodes$value, _refProps$scroll$valu, _refProps$scroll$valu2;
    var state = this.state,
      treeClasses = this.treeClasses,
      updateStoreConfig = this.updateStoreConfig,
      renderTreeNodes = this.renderTreeNodes,
      nodesEmpty = this.nodesEmpty,
      isScrolling = this.isScrolling,
      virtualConfig = this.virtualConfig,
      treeContentStyles = this.treeContentStyles,
      scrollStyles = this.scrollStyles,
      cursorStyles = this.cursorStyles;
    var createElement = getCreateElement(h);
    var scope = state.scope,
      allNodes = state.allNodes,
      refProps = state.refProps;
    scope.scopedSlots = getScopedSlots(this);
    updateStoreConfig();
    var treeNodeViews = renderTreeNodes(createElement);
    var cname = this.componentName;
    var isVirtual = virtualConfig.isVirtualScroll.value;
    var emptyNode = null;
    if (nodesEmpty) {
      var useLocale = !this.empty && !this.$slots.empty;
      var emptyContent = useLocale ? this.t(this.global.empty) : renderTNodeJSX(this, "empty");
      emptyNode = h("div", {
        "class": "".concat(cname, "__empty")
      }, [emptyContent]);
    } else if (treeNodeViews.length <= 0) {
      emptyNode = h("div");
    }
    var $props = this.$props;
    var transition = $props.transition;
    var treeNodeList = null;
    if (!transition || isVirtual && isScrolling) {
      treeNodeList = h("div", {
        "class": "".concat(cname, "__list"),
        "style": scrollStyles
      }, [treeNodeViews]);
    } else {
      treeNodeList = h(TransitionGroup, {
        "attrs": {
          "tag": "div",
          "enter-active-class": "".concat(cname, "__item--enter-active"),
          "leave-active-class": "".concat(cname, "__item--leave-active")
        },
        "class": "".concat(cname, "__list"),
        "style": scrollStyles
      }, [treeNodeViews]);
    }
    var topValue = ((_allNodes$value$filte = (_allNodes$value = allNodes.value) === null || _allNodes$value === void 0 ? void 0 : _allNodes$value.filter(function (node) {
      return node.visible;
    }).length) !== null && _allNodes$value$filte !== void 0 ? _allNodes$value$filte : 0) * ((_refProps$scroll$valu = (_refProps$scroll$valu2 = refProps.scroll.value) === null || _refProps$scroll$valu2 === void 0 ? void 0 : _refProps$scroll$valu2.rowHeight) !== null && _refProps$scroll$valu !== void 0 ? _refProps$scroll$valu : 34);
    var placeholderStyles = {
      width: "1px",
      height: "1px",
      opacity: 0,
      pointerEvents: "none",
      position: "absolute",
      left: 0,
      top: "".concat(topValue, "px")
    };
    var placeholderEl = h("div", {
      "style": placeholderStyles
    });
    var treeNode = h("div", {
      "class": treeClasses,
      "ref": "treeContentRef",
      "on": {
        "scroll": this.onInnerVirtualScroll
      },
      "style": treeContentStyles
    }, [isVirtual && h("div", {
      "class": "".concat(cname, "__vscroll-cursor"),
      "style": cursorStyles
    }), emptyNode || treeNodeList, isVirtual && placeholderEl]);
    return treeNode;
  }
});

export { _TdTree as default };
//# sourceMappingURL=tree.js.map