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

XDesign Component for vue-next

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var isArray = require('lodash/isArray');
var tree_treeItem = require('./tree-item.js');
var _common_js_tree_treeStore = require('../_common/js/tree/tree-store.js');
var hooks_useDefaultValue = require('../hooks/useDefaultValue.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var tree_hooks_useOnDrag = require('./hooks/useOnDrag.js');
var tree_util = require('./util.js');
require('lodash/isFunction');
require('lodash/isBoolean');
require('../checkbox/index.js');
require('../checkbox/checkbox.js');
require('../checkbox/props.js');
require('../hooks/useRipple.js');
require('../hooks/useKeepAnimation.js');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('../_chunks/dep-8d10b59f.js');
require('../hooks/useConfig.js');
require('../utils/set-style.js');
require('../hooks/tnode.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('../checkbox/constants.js');
require('../checkbox/hooks/useCheckboxLazyLoad.js');
require('../_common/js/utils/observe.js');
require('../checkbox/hooks/useKeyboard.js');
require('../hooks/useDisabled.js');
require('../checkbox/group.js');
require('@babel/runtime/helpers/typeof');
require('@babel/runtime/helpers/toConsumableArray');
require('lodash/intersection');
require('lodash/isUndefined');
require('../checkbox/checkbox-group-props.js');
require('../hooks/slot.js');
require('../utils/withInstall.js');
require('../loading/index.js');
require('../loading/directive.js');
require('../loading/plugin.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/set-style.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isNull');
require('lodash/isNumber');
require('../utils/dom.js');
require('../utils/easing.js');
require('../loading/props.js');
require('../hooks/useTeleport.js');
require('./constants.js');
require('./hooks/useDraggable.js');
require('lodash/throttle');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('lodash/difference');
require('lodash/isPlainObject');
require('mitt');
require('../_common/js/tree/tree-node.js');
require('@babel/runtime/helpers/asyncToGenerator');
require('@babel/runtime/regenerator');
require('lodash/uniqueId');
require('lodash/isNil');
require('lodash/get');
require('../_common/js/tree/tree-node-model.js');
require('lodash/omit');
require('../_common/js/log/log.js');
require('lodash/pick');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);

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__default["default"](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 = vue.ref();
  var cacheMap = /* @__PURE__ */new Map();
  var treeNodeViews = vue.ref([]);
  var _toRefs = vue.toRefs(props),
    expanded = _toRefs.expanded,
    actived = _toRefs.actived,
    value = _toRefs.value,
    modelValue = _toRefs.modelValue;
  var _useVModel = hooks_useVModel["default"](value, modelValue, props.defaultValue, props.onChange),
    _useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
    innerChecked = _useVModel2[0],
    setInnerChecked = _useVModel2[1];
  var _useDefaultValue = hooks_useDefaultValue["default"](actived, props.defaultActived, props.onActive, "actived"),
    _useDefaultValue2 = _slicedToArray__default["default"](_useDefaultValue, 2),
    innerActived = _useDefaultValue2[0],
    setInnerActived = _useDefaultValue2[1];
  var _useDefaultValue3 = hooks_useDefaultValue["default"](expanded, props.defaultExpanded, props.onExpand, "expanded"),
    _useDefaultValue4 = _slicedToArray__default["default"](_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 = tree_util.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 = tree_util.getNode(treeStore.value, node);
      var expanded2 = node.setExpanded(!tnode.isExpanded());
      setInnerExpanded(expanded2, _objectSpread(_objectSpread({}, ctx), {}, {
        trigger: "node-click"
      }));
    }
    if (shouldActive) {
      var _tnode = tree_util.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 = tree_util.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 = vue.createVNode(tree_treeItem["default"], {
          "key": node.value,
          "node": node,
          "onChange": handleChange,
          "onClick": handleClick,
          "expandOnClickNode": props.expandOnClickNode
        }, null);
        cacheMap.set(node.value, nodeView);
      }
      return nodeView;
    });
    vue.nextTick(function () {
      cacheMap.forEach(function (view, value2) {
        if (!treeStore.value.getNode(value2)) {
          cacheMap["delete"](value2);
        }
      });
    });
  };
  tree_hooks_useOnDrag["default"](treeStore);
  var updateExpanded = function updateExpanded() {
    var expandParent = props.expandParent;
    if (isArray__default["default"](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 _common_js_tree_treeStore.TreeStore(_objectSpread(_objectSpread({}, tree_util.getStoreConfig(props)), {}, {
      onLoad: function onLoad(info) {
        handleLoad(info);
      },
      onUpdate: function onUpdate() {
        renderTreeNodeViews();
      }
    }));
    treeStore.value = store;
    if (!isArray__default["default"](options)) {
      options = [];
    }
    store.append(options);
    store.refreshNodes();
    if (isArray__default["default"](innerChecked.value)) {
      store.setChecked(innerChecked.value);
    }
    updateExpanded();
    if (isArray__default["default"](innerActived.value)) {
      store.setActived(innerActived.value);
    }
    renderTreeNodeViews();
  };
  vue.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__default["default"](innerChecked.value)) {
      treeStore.value.setChecked(innerChecked.value);
    }
    updateExpanded();
    if (isArray__default["default"](innerActived.value)) {
      treeStore.value.setActived(innerActived.value);
    }
    treeStore.value.refreshState();
  }, {
    deep: true
  });
  vue.watch(function () {
    return tree_util.getStoreConfig(props);
  }, function () {
    if (!treeStore.value) return;
    treeStore.value.setConfig(tree_util.getStoreConfig(props));
  });
  vue.watch(innerChecked, function (nVal) {
    treeStore.value.replaceChecked(nVal);
  }, {
    deep: true
  });
  vue.watch(innerExpanded, function (nVal) {
    treeStore.value.replaceExpanded(nVal);
  }, {
    deep: true
  });
  vue.watch(innerActived, function (nVal) {
    treeStore.value.replaceActived(nVal);
  }, {
    deep: true
  });
  init();
  return {
    treeStore: treeStore,
    treeNodeViews: treeNodeViews
  };
}

exports["default"] = useTree;
//# sourceMappingURL=useTree.js.map