xdesign-vue-next/lib/tree/useTree.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { ref, toRefs, watch, createVNode, nextTick } from 'vue';
import isArray from 'lodash/isArray';
import TreeItem from './tree-item.js';
import { TreeStore } from '../_common/js/tree/tree-store.js';
import useDefaultValue from '../hooks/useDefaultValue.js';
import useVModel from '../hooks/useVModel.js';
import useOnDrag from './hooks/useOnDrag.js';
import { getStoreConfig, getMark, getNode } from './util.js';
import 'lodash/isFunction';
import 'lodash/isBoolean';
import '../checkbox/index.js';
import '../checkbox/checkbox.js';
import '../checkbox/props.js';
import '../hooks/useRipple.js';
import '../hooks/useKeepAnimation.js';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import 'lodash/isString';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/en_US.js';
import '../_chunks/dep-3a1cce9f.js';
import '../hooks/useConfig.js';
import '../utils/set-style.js';
import '../hooks/tnode.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import '../checkbox/constants.js';
import '../checkbox/hooks/useCheckboxLazyLoad.js';
import '../_common/js/utils/observe.js';
import '../checkbox/hooks/useKeyboard.js';
import '../hooks/useDisabled.js';
import '../checkbox/group.js';
import '@babel/runtime/helpers/typeof';
import '@babel/runtime/helpers/toConsumableArray';
import 'lodash/intersection';
import 'lodash/isUndefined';
import '../checkbox/checkbox-group-props.js';
import '../hooks/slot.js';
import '../utils/withInstall.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/set-style.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/isNull';
import 'lodash/isNumber';
import '../utils/dom.js';
import '../utils/easing.js';
import '../loading/props.js';
import '../hooks/useTeleport.js';
import './constants.js';
import './hooks/useDraggable.js';
import 'lodash/throttle';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import 'lodash/difference';
import 'lodash/isPlainObject';
import 'mitt';
import '../_common/js/tree/tree-node.js';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/regenerator';
import 'lodash/uniqueId';
import 'lodash/isNil';
import 'lodash/get';
import '../_common/js/tree/tree-node-model.js';
import 'lodash/omit';
import '../_common/js/log/log.js';
import 'lodash/pick';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function useTree(props) {
  var treeStore = ref();
  var cacheMap = /* @__PURE__ */new Map();
  var treeNodeViews = ref([]);
  var _toRefs = toRefs(props),
    expanded = _toRefs.expanded,
    actived = _toRefs.actived,
    value = _toRefs.value,
    modelValue = _toRefs.modelValue;
  var _useVModel = useVModel(value, modelValue, props.defaultValue, props.onChange),
    _useVModel2 = _slicedToArray(_useVModel, 2),
    innerChecked = _useVModel2[0],
    setInnerChecked = _useVModel2[1];
  var _useDefaultValue = useDefaultValue(actived, props.defaultActived, props.onActive, "actived"),
    _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
    innerActived = _useDefaultValue2[0],
    setInnerActived = _useDefaultValue2[1];
  var _useDefaultValue3 = useDefaultValue(expanded, props.defaultExpanded, props.onExpand, "expanded"),
    _useDefaultValue4 = _slicedToArray(_useDefaultValue3, 2),
    innerExpanded = _useDefaultValue4[0],
    setInnerExpanded = _useDefaultValue4[1];
  var handleLoad = function handleLoad(info) {
    var _props$onLoad;
    var node = info.node;
    var ctx = {
      node: node.getModel()
    };
    if (innerChecked.value && innerChecked.value.length > 0) {
      treeStore.value.replaceChecked(innerChecked.value);
    }
    if (innerExpanded.value && innerExpanded.value.length > 0) {
      treeStore.value.replaceExpanded(innerExpanded.value);
    }
    if (innerActived.value && innerActived.value.length > 0) {
      treeStore.value.replaceActived(innerActived.value);
    }
    (_props$onLoad = props.onLoad) === null || _props$onLoad === void 0 ? void 0 : _props$onLoad.call(props, ctx);
  };
  var handleClick = function handleClick(state) {
    var _props$onClick;
    var expandOnClickNode = props.expandOnClickNode;
    var mouseEvent = state.mouseEvent,
      event = state.event,
      node = state.node;
    if (!node) {
      return;
    }
    var shouldExpand = expandOnClickNode;
    var shouldActive = !props.disabled && !node.disabled;
    ["trigger", "ignore"].forEach(function (markName) {
      var mark = getMark(markName, event.target, event.currentTarget);
      var markValue = (mark === null || mark === void 0 ? void 0 : mark.value) || "";
      if (markValue.indexOf("expand") >= 0) {
        if (markName === "trigger") {
          shouldExpand = true;
        }
      }
      if (markValue.indexOf("active") >= 0) {
        if (markName === "ignore") {
          shouldActive = false;
        }
      }
    });
    var ctx = {
      node: node.getModel(),
      e: mouseEvent
    };
    if (shouldExpand) {
      var tnode = getNode(treeStore.value, node);
      var expanded2 = node.setExpanded(!tnode.isExpanded());
      setInnerExpanded(expanded2, _objectSpread(_objectSpread({}, ctx), {}, {
        trigger: "node-click"
      }));
    }
    if (shouldActive) {
      var _tnode = getNode(treeStore.value, node);
      var actived2 = node.setActived(!_tnode.isActived());
      setInnerActived(actived2, ctx);
    }
    (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, ctx);
  };
  var handleChange = function handleChange(state) {
    var disabled = props.disabled;
    var node = state.node,
      mouseEvent = state.mouseEvent;
    if (!node || disabled || node.disabled) {
      return;
    }
    var tnode = getNode(treeStore.value, node);
    var checked = node.setChecked(!tnode.isChecked());
    setInnerChecked(checked, {
      node: node.getModel(),
      e: mouseEvent
    });
  };
  var renderTreeNodeViews = function renderTreeNodeViews() {
    var nodes = treeStore.value.getNodes();
    treeNodeViews.value = nodes.filter(function (node) {
      return node.visible;
    }).map(function (node) {
      var nodeView = cacheMap.get(node.value);
      if (!nodeView) {
        nodeView = createVNode(TreeItem, {
          "key": node.value,
          "node": node,
          "onChange": handleChange,
          "onClick": handleClick,
          "expandOnClickNode": props.expandOnClickNode
        }, null);
        cacheMap.set(node.value, nodeView);
      }
      return nodeView;
    });
    nextTick(function () {
      cacheMap.forEach(function (view, value2) {
        if (!treeStore.value.getNode(value2)) {
          cacheMap["delete"](value2);
        }
      });
    });
  };
  useOnDrag(treeStore);
  var updateExpanded = function updateExpanded() {
    var expandParent = props.expandParent;
    if (isArray(innerExpanded.value)) {
      var expandedMap = /* @__PURE__ */new Map();
      innerExpanded.value.forEach(function (val) {
        expandedMap.set(val, true);
        if (expandParent) {
          var node = treeStore.value.getNode(val);
          node.getParents().forEach(function (tn) {
            expandedMap.set(tn.value, true);
          });
        }
      });
      var expandedArr = Array.from(expandedMap.keys());
      treeStore.value.setExpanded(expandedArr);
    }
  };
  var init = function init() {
    var options = props.data;
    var store = new TreeStore(_objectSpread(_objectSpread({}, getStoreConfig(props)), {}, {
      onLoad: function onLoad(info) {
        handleLoad(info);
      },
      onUpdate: function onUpdate() {
        renderTreeNodeViews();
      }
    }));
    treeStore.value = store;
    if (!isArray(options)) {
      options = [];
    }
    store.append(options);
    store.refreshNodes();
    if (isArray(innerChecked.value)) {
      store.setChecked(innerChecked.value);
    }
    updateExpanded();
    if (isArray(innerActived.value)) {
      store.setActived(innerActived.value);
    }
    renderTreeNodeViews();
  };
  watch(function () {
    return props.data;
  }, function (list) {
    list = props.data;
    cacheMap.clear();
    treeStore.value.reload(list);
    treeStore.value.refreshNodes();
    if (!list.length) return;
    if (isArray(innerChecked.value)) {
      treeStore.value.setChecked(innerChecked.value);
    }
    updateExpanded();
    if (isArray(innerActived.value)) {
      treeStore.value.setActived(innerActived.value);
    }
    treeStore.value.refreshState();
  }, {
    deep: true
  });
  watch(function () {
    return getStoreConfig(props);
  }, function () {
    if (!treeStore.value) return;
    treeStore.value.setConfig(getStoreConfig(props));
  });
  watch(innerChecked, function (nVal) {
    treeStore.value.replaceChecked(nVal);
  }, {
    deep: true
  });
  watch(innerExpanded, function (nVal) {
    treeStore.value.replaceExpanded(nVal);
  }, {
    deep: true
  });
  watch(innerActived, function (nVal) {
    treeStore.value.replaceActived(nVal);
  }, {
    deep: true
  });
  init();
  return {
    treeStore: treeStore,
    treeNodeViews: treeNodeViews
  };
}

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