xdesign-vue-next/lib/cascader/hooks.js

XDesign Component for vue-next

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

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { reactive, computed, toRefs, watch, nextTick } from 'vue';
import isEqual from 'lodash/isEqual';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import { TreeStore } from '../_common/js/tree/tree-store.js';
import { useFormDisabled } from '../form/hooks.js';
import useVModel from '../hooks/useVModel.js';
import useDefaultValue from '../hooks/useDefaultValue.js';
import { isValueInvalid, isEmptyValues, getCascaderValue, getTreeValue } from './core/helper.js';
import { treeNodesEffect, treeStoreExpendEffect } from './core/effect.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import 'lodash/isArray';
import 'lodash/isNumber';
import 'lodash/difference';
import 'lodash/camelCase';
import 'lodash/isPlainObject';
import 'mitt';
import '../_common/js/tree/tree-node.js';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/regenerator';
import 'lodash/isNull';
import 'lodash/uniqueId';
import 'lodash/isNil';
import 'lodash/get';
import '../_common/js/tree/tree-node-model.js';
import 'lodash/isUndefined';
import 'lodash/isBoolean';
import 'lodash/omit';
import '../_common/js/log/log.js';
import 'lodash/kebabCase';
import 'lodash/isObject';
import 'lodash/isEmpty';
import 'lodash/cloneDeep';

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; }
var useContext = function useContext(props, setInnerValue, innerPopupVisible, setPopupVisible) {
  var statusContext = reactive({
    treeStore: null,
    inputVal: null,
    scopeVal: void 0,
    treeNodes: [],
    expend: []
  });
  return {
    statusContext: statusContext,
    cascaderContext: computed(function () {
      var size = props.size,
        checkStrictly = props.checkStrictly,
        lazy = props.lazy,
        multiple = props.multiple,
        filterable = props.filterable,
        clearable = props.clearable,
        checkProps = props.checkProps,
        max = props.max,
        disabled = props.disabled,
        showAllLevels = props.showAllLevels,
        minCollapsedNum = props.minCollapsedNum,
        valueType = props.valueType;
      return _objectSpread(_objectSpread({
        value: statusContext.scopeVal,
        size: size,
        checkStrictly: checkStrictly,
        lazy: lazy,
        multiple: multiple,
        filterable: filterable,
        clearable: clearable,
        checkProps: checkProps,
        max: max,
        disabled: disabled,
        showAllLevels: showAllLevels,
        minCollapsedNum: minCollapsedNum,
        valueType: valueType,
        visible: innerPopupVisible.value
      }, statusContext), {}, {
        setTreeNodes: function setTreeNodes(nodes) {
          statusContext.treeNodes = nodes;
        },
        setValue: function setValue(val, source, node) {
          if (isEqual(val, statusContext.scopeVal)) return;
          setInnerValue(val, {
            source: source,
            node: node
          });
        },
        setVisible: setPopupVisible,
        setInputVal: function setInputVal(val) {
          statusContext.inputVal = val;
        },
        setExpend: function setExpend(val) {
          statusContext.expend = val;
        }
      });
    })
  };
};
var useCascaderContext = function useCascaderContext(props) {
  var disabled = useFormDisabled();
  var _toRefs = toRefs(props),
    value = _toRefs.value,
    modelValue = _toRefs.modelValue,
    popupVisible = _toRefs.popupVisible;
  var _useVModel = useVModel(value, modelValue, props.defaultValue, props.onChange),
    _useVModel2 = _slicedToArray(_useVModel, 2),
    innerValue = _useVModel2[0],
    setInnerValue = _useVModel2[1];
  var _useDefaultValue = useDefaultValue(popupVisible, false, props.onPopupVisibleChange, "popupVisible"),
    _useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
    innerPopupVisible = _useDefaultValue2[0],
    setPopupVisible = _useDefaultValue2[1];
  var _useContext = useContext(props, setInnerValue, innerPopupVisible, setPopupVisible),
    cascaderContext = _useContext.cascaderContext,
    statusContext = _useContext.statusContext;
  var isFilterable = computed(function () {
    return Boolean(props.filterable || isFunction(props.filter));
  });
  var updatedTreeNodes = function updatedTreeNodes() {
    var _cascaderContext$valu = cascaderContext.value,
      inputVal = _cascaderContext$valu.inputVal,
      treeStore = _cascaderContext$valu.treeStore,
      setTreeNodes = _cascaderContext$valu.setTreeNodes;
    treeNodesEffect(inputVal, treeStore, setTreeNodes, props.filter);
  };
  var updateExpend = function updateExpend() {
    var _cascaderContext$valu2 = cascaderContext.value,
      value2 = _cascaderContext$valu2.value,
      treeStore = _cascaderContext$valu2.treeStore;
    var expend = statusContext.expend;
    treeStoreExpendEffect(treeStore, value2, expend);
    treeStore.replaceChecked(getTreeValue(value2));
  };
  watch(function () {
    return props.options;
  }, function () {
    var options = props.options,
      _props$keys = props.keys,
      keys = _props$keys === void 0 ? {} : _props$keys,
      checkStrictly = props.checkStrictly,
      lazy = props.lazy,
      load = props.load,
      valueMode = props.valueMode;
    var treeStore = statusContext.treeStore;
    if (!options.length && !treeStore) return;
    if (!treeStore) {
      var store = new TreeStore({
        keys: _objectSpread(_objectSpread({}, keys), {}, {
          children: isString(keys.children) ? keys.children : "children"
        }),
        checkable: true,
        expandMutex: true,
        expandParent: true,
        lazy: lazy,
        load: load,
        valueMode: valueMode,
        checkStrictly: checkStrictly,
        onLoad: function onLoad() {
          nextTick(function () {
            store.refreshNodes();
            updatedTreeNodes();
          });
        }
      });
      store.append(options);
      statusContext.treeStore = store;
    } else {
      treeStore.reload(options);
      treeStore.refreshNodes();
    }
    updateExpend();
    updatedTreeNodes();
  }, {
    immediate: true,
    deep: true
  });
  watch(function () {
    var checkStrictly = props.checkStrictly,
      lazy = props.lazy,
      load = props.load,
      valueMode = props.valueMode;
    return JSON.stringify({
      valueMode: valueMode,
      checkStrictly: checkStrictly,
      lazy: lazy,
      load: load
    });
  }, function () {
    var treeStore = statusContext.treeStore;
    if (!treeStore) return;
    var checkStrictly = props.checkStrictly,
      lazy = props.lazy,
      load = props.load,
      valueMode = props.valueMode;
    var treeProps = {
      checkStrictly: checkStrictly,
      disabled: disabled,
      load: load,
      lazy: lazy,
      valueMode: valueMode
    };
    treeStore.setConfig(treeProps);
  }, {
    immediate: true
  });
  watch(innerValue, function () {
    var _cascaderContext$valu3 = cascaderContext.value,
      setValue = _cascaderContext$valu3.setValue,
      multiple = _cascaderContext$valu3.multiple,
      valueType = _cascaderContext$valu3.valueType;
    if (isValueInvalid(innerValue.value, cascaderContext.value)) {
      setValue(multiple ? [] : "", "invalid-value");
    } else {
      statusContext.scopeVal = multiple ? [] : "";
    }
    if (!isEmptyValues(innerValue)) {
      statusContext.scopeVal = getCascaderValue(innerValue.value, valueType, multiple);
    }
    if (!statusContext.treeStore) return;
    updateExpend();
    updatedTreeNodes();
  }, {
    immediate: true
  });
  watch(function () {
    return innerPopupVisible.value && isFilterable.value;
  }, function (visible) {
    var setInputVal = cascaderContext.value.setInputVal;
    if (visible) {
      setInputVal("");
    }
  });
  watch(function () {
    return statusContext.inputVal;
  }, function () {
    updatedTreeNodes();
  });
  return {
    cascaderContext: cascaderContext,
    isFilterable: isFilterable
  };
};

export { useCascaderContext, useContext };
//# sourceMappingURL=hooks.js.map