UNPKG

xdesign-vue-next

Version:

XDesign Component for vue-next

635 lines (627 loc) 26.3 kB
/** * 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 _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray'); var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator'); var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); var vue = require('vue'); var _regeneratorRuntime = require('@babel/runtime/regenerator'); var isArray = require('lodash/isArray'); var isEmpty = require('lodash/isEmpty'); var isBoolean = require('lodash/isBoolean'); var isFunction = require('lodash/isFunction'); var isNil = require('lodash/isNil'); var tree_index = require('../tree/index.js'); var selectInput_index = require('../select-input/index.js'); var commonComponents_fakeArrow = require('../common-components/fake-arrow.js'); var treeSelect_props = require('./props.js'); var hooks_useConfig = require('../hooks/useConfig.js'); var form_hooks = require('../form/hooks.js'); var hooks_tnode = require('../hooks/tnode.js'); var hooks_useVModel = require('../hooks/useVModel.js'); var hooks_useDefaultValue = require('../hooks/useDefaultValue.js'); var configProvider_useConfig = require('../config-provider/useConfig.js'); require('../tree/td-tree.js'); require('../tree/props.js'); require('../tree/constants.js'); require('../tree/useTree.js'); require('../tree/tree-item.js'); require('../checkbox/index.js'); require('../checkbox/checkbox.js'); require('../checkbox/props.js'); require('../hooks/useRipple.js'); require('../hooks/useKeepAnimation.js'); 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('../utils/set-style.js'); 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('lodash/kebabCase'); require('lodash/cloneDeep'); require('lodash/isString'); require('lodash/camelCase'); require('../utils/render-tnode.js'); require('lodash/isObject'); require('../checkbox/group.js'); require('@babel/runtime/helpers/typeof'); 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('../tree/util.js'); require('lodash/pick'); require('../tree/hooks/useDraggable.js'); require('lodash/throttle'); require('../_common/js/tree/tree-store.js'); 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('lodash/uniqueId'); require('lodash/get'); require('../_common/js/tree/tree-node-model.js'); require('lodash/omit'); require('../_common/js/log/log.js'); require('../tree/hooks/useOnDrag.js'); require('../tree/hooks/useExposeFunc.js'); require('lodash/upperFirst'); require('../select-input/select-input.js'); require('../popup/index.js'); require('../popup/popup.js'); require('@popperjs/core'); require('lodash/debounce'); require('../popup/container.js'); require('../popup/props.js'); require('../hooks/useResizeObserver.js'); require('../select-input/props.js'); require('../select-input/useSingle.js'); require('../input/index.js'); require('../input/input.js'); require('../_chunks/dep-3fb13dcd.js'); require('../_chunks/dep-a2621e42.js'); require('../input/props.js'); require('../input/useInput.js'); require('../form/const.js'); require('../input/useLengthLimit.js'); require('../input/useInputEventHandler.js'); require('../input/useInputWidth.js'); require('../input/input-group.js'); require('../input/input-group-props.js'); require('../select-input/useMultiple.js'); require('../tag-input/index.js'); require('../tag-input/tag-input.js'); require('../tag-input/props.js'); require('../tag-input/hooks/useTagScroll.js'); require('../tag-input/useTagList.js'); require('../tag/index.js'); require('../tag/tag.js'); require('../_chunks/dep-ac484abb.js'); require('../tag/props.js'); require('../tag/check-tag.js'); require('../tag/check-tag-props.js'); require('../tag-input/hooks/useHover.js'); require('../tag-input/hooks/useDragSorter.js'); require('../select-input/useOverlayInnerStyle.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty); var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray); var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator); var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime); var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray); var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty); var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean); var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction); var isNil__default = /*#__PURE__*/_interopDefaultLegacy(isNil); 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; } var _TreeSelect = vue.defineComponent({ name: "XTreeSelect", props: treeSelect_props["default"], setup: function setup(props2, _ref) { var slots = _ref.slots; var renderTNodeJSX = hooks_tnode.useTNodeJSX(); var renderDefaultTNode = hooks_tnode.useTNodeDefault(); var classPrefix = hooks_useConfig.usePrefixClass(); var _useConfig = configProvider_useConfig.useConfig("treeSelect"), globalConfig = _useConfig.globalConfig; var formDisabled = form_hooks.useFormDisabled(); var treeRef = vue.ref(null); var filterByText = vue.ref(null); var actived = vue.ref([]); var expanded = vue.ref([]); var nodeInfo = vue.ref(null); var treeKey = vue.ref(0); var _toRefs = vue.toRefs(props2), value = _toRefs.value, modelValue = _toRefs.modelValue, popupVisible = _toRefs.popupVisible, inputValue = _toRefs.inputValue; var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultValue, props2.onChange), _useVModel2 = _slicedToArray__default["default"](_useVModel, 2), treeSelectValue = _useVModel2[0], setTreeSelectValue = _useVModel2[1]; var _useDefaultValue = hooks_useDefaultValue["default"](popupVisible, false, props2.onPopupVisibleChange, "popupVisible"), _useDefaultValue2 = _slicedToArray__default["default"](_useDefaultValue, 2), innerVisible = _useDefaultValue2[0], setInnerVisible = _useDefaultValue2[1]; var _useDefaultValue3 = hooks_useDefaultValue["default"](inputValue, props2.defaultInputValue, props2.onInputChange, "inputValue"), _useDefaultValue4 = _slicedToArray__default["default"](_useDefaultValue3, 2), innerInputValue = _useDefaultValue4[0], setInnerInputValue = _useDefaultValue4[1]; vue.watch(treeSelectValue, /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() { return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: _context.next = 2; return changeNodeInfo(); case 2: if (!props2.multiple) { actived.value = nodeInfo.value ? [nodeInfo.value.value] : []; } case 3: case "end": return _context.stop(); } }, _callee); }))); vue.watch(function () { return props2.data; }, /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2() { return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) { while (1) switch (_context2.prev = _context2.next) { case 0: _context2.next = 2; return changeNodeInfo(); case 2: treeRerender(); case 3: case "end": return _context2.stop(); } }, _callee2); })), { deep: true }); var tDisabled = vue.computed(function () { return formDisabled.value || props2.disabled; }); var inputPlaceholder = vue.computed(function () { var _nodeInfo$value; return innerVisible.value && ((_nodeInfo$value = nodeInfo.value) === null || _nodeInfo$value === void 0 ? void 0 : _nodeInfo$value.label) || props2.placeholder || globalConfig.value.placeholder; }); var popupClass = vue.computed(function () { return ["".concat(classPrefix.value, "-select__dropdown"), "narrow-scrollbar"]; }); var dropdownInnerSize = vue.computed(function () { return { small: "s", medium: "m", large: "l" }[props2.size]; }); var isObjectValue = vue.computed(function () { return props2.valueType === "object"; }); var checked = vue.computed(function () { if (props2.multiple) { if (isObjectValue.value) { return isArray__default["default"](treeSelectValue.value) ? treeSelectValue.value.map(function (item) { return item.value; }) : []; } return isArray__default["default"](treeSelectValue.value) ? treeSelectValue.value.map(function (item) { return item; }) : []; } return []; }); var multiLimitDisabled = vue.computed(function () { return props2.multiple && !!props2.max && isArray__default["default"](treeSelectValue.value) && props2.max <= treeSelectValue.value.length; }); var realLabel = vue.computed(function () { if (!isEmpty__default["default"](props2.treeProps) && !isEmpty__default["default"](props2.treeProps.keys)) { return props2.treeProps.keys.label || "label"; } return "label"; }); var realValue = vue.computed(function () { if (!isEmpty__default["default"](props2.treeProps) && !isEmpty__default["default"](props2.treeProps.keys)) { return props2.treeProps.keys.value || "value"; } return "value"; }); var realChildren = vue.computed(function () { if (!isEmpty__default["default"](props2.treeProps) && !isEmpty__default["default"](props2.treeProps.keys)) { return props2.treeProps.keys.children || "children"; } return "children"; }); vue.onMounted( /*#__PURE__*/_asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3() { return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) { while (1) switch (_context3.prev = _context3.next) { case 0: if (!(!treeSelectValue.value && props2.defaultValue)) { _context3.next = 3; break; } _context3.next = 3; return change(props2.defaultValue, null, "uncheck"); case 3: if (isObjectValue.value) { actived.value = isArray__default["default"](treeSelectValue.value) ? treeSelectValue.value.map(function (item) { return item.value; }) : [treeSelectValue.value.value]; } else { actived.value = isArray__default["default"](treeSelectValue.value) ? treeSelectValue.value : [treeSelectValue.value]; } changeNodeInfo(); case 5: case "end": return _context3.stop(); } }, _callee3); }))); var change = function change(valueParam, node, trigger) { setTreeSelectValue(valueParam, { node: node, trigger: trigger }); changeNodeInfo(); }; var clear = function clear(content) { var _props2$onClear; var defaultValue = props2.multiple ? [] : ""; actived.value = []; change(defaultValue, null, "clear"); (_props2$onClear = props2.onClear) === null || _props2$onClear === void 0 ? void 0 : _props2$onClear.call(props2, { e: content.e }); }; var treeNodeChange = function treeNodeChange(valueParam, context) { var current = valueParam; if (isObjectValue.value) { current = valueParam.map(function (nodeValue) { return getTreeNode(props2.data, nodeValue); }); } change(current, context.node, "check"); }; var treeNodeActive = function treeNodeActive(valueParam, context) { if (!props2.multiple) { setInnerVisible(false, context); } if (props2.multiple) { return; } if (treeSelectValue.value === context.node.data[realValue.value]) { return; } var current = valueParam; if (isObjectValue.value) { var nodeValue = isEmpty__default["default"](valueParam) ? "" : valueParam[0]; current = getTreeNode(props2.data, nodeValue); } else { current = isEmpty__default["default"](valueParam) ? "" : valueParam[0]; } change(current, context.node, "check"); actived.value = valueParam; }; var treeNodeExpand = function treeNodeExpand(valueParam) { expanded.value = valueParam; }; var treeNodeLoad = function treeNodeLoad() { changeNodeInfo(); }; var inputChange = function inputChange(value2) { var _props2$onSearch2; if (!innerVisible.value) { var _props2$onSearch; (_props2$onSearch = props2.onSearch) === null || _props2$onSearch === void 0 ? void 0 : _props2$onSearch.call(props2, String(value2)); return; } setInnerInputValue(value2); if (!value2) { filterByText.value = null; return null; } filterByText.value = function (node) { if (isFunction__default["default"](props2.filter)) { var filter = props2.filter(String(value2), node); if (isBoolean__default["default"](filter)) { return filter; } } return node.data[realLabel.value].indexOf(value2) >= 0; }; (_props2$onSearch2 = props2.onSearch) === null || _props2$onSearch2 === void 0 ? void 0 : _props2$onSearch2.call(props2, String(value2)); }; var tagChange = function tagChange(value2, context) { var _props2$onRemove; var trigger = context.trigger, index = context.index; if (["tag-remove", "backspace"].includes(trigger)) { isArray__default["default"](treeSelectValue.value) && treeSelectValue.value.splice(index, 1); } (_props2$onRemove = props2.onRemove) === null || _props2$onRemove === void 0 ? void 0 : _props2$onRemove.call(props2, { value: value2, data: null, e: context && context.e }); change(treeSelectValue.value, null, trigger); }; var changeNodeInfo = /*#__PURE__*/function () { var _ref5 = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee4() { return _regeneratorRuntime__default["default"].wrap(function _callee4$(_context4) { while (1) switch (_context4.prev = _context4.next) { case 0: _context4.next = 2; return treeSelectValue.value; case 2: if (!props2.multiple) { if (treeSelectValue.value || treeSelectValue.value === 0) { nodeInfo.value = getSingleNodeInfo(); } else { nodeInfo.value = ""; } } else if (props2.multiple) { if (isArray__default["default"](treeSelectValue.value)) { nodeInfo.value = getMultipleNodeInfo(); } else { nodeInfo.value = []; } } else { nodeInfo.value = null; } case 3: case "end": return _context4.stop(); } }, _callee4); })); return function changeNodeInfo() { return _ref5.apply(this, arguments); }; }(); var getSingleNodeInfo = function getSingleNodeInfo() { var _props2$treeProps; var nodeValue = isObjectValue.value ? treeSelectValue.value.value : treeSelectValue.value; if (treeRef.value && (_props2$treeProps = props2.treeProps) !== null && _props2$treeProps !== void 0 && _props2$treeProps.load) { if (!isEmpty__default["default"](props2.data)) { var node2 = treeRef.value.getItem(nodeValue); if (node2) { return { label: node2.data[realLabel.value], value: node2.data[realValue.value] }; } } return { label: nodeValue, value: nodeValue }; } var node = getTreeNode(props2.data, nodeValue); if (!node) { return { label: nodeValue, value: nodeValue }; } return node; }; var getMultipleNodeInfo = function getMultipleNodeInfo() { return treeSelectValue.value.map(function (value2) { var _props2$treeProps2; var nodeValue = isObjectValue.value ? value2.value : value2; if (treeRef.value && (_props2$treeProps2 = props2.treeProps) !== null && _props2$treeProps2 !== void 0 && _props2$treeProps2.load) { if (!isEmpty__default["default"](props2.data)) { var node2 = treeRef.value.getItem(nodeValue); if (node2) { return { label: node2.data[realLabel.value], value: node2.data[realValue.value] }; } } return { label: nodeValue, value: nodeValue }; } var node = getTreeNode(props2.data, nodeValue); if (!node) { return { label: nodeValue, value: nodeValue }; } return node; }); }; var getTreeNode = function getTreeNode(data, targetValue) { for (var i = 0, len = data.length; i < len; i++) { var _data$i; if (data[i][realValue.value] === targetValue) { return { label: data[i][realLabel.value], value: data[i][realValue.value] }; } if ((_data$i = data[i]) !== null && _data$i !== void 0 && _data$i[realChildren.value]) { var _data$i2; var result = getTreeNode((_data$i2 = data[i]) === null || _data$i2 === void 0 ? void 0 : _data$i2[realChildren.value], targetValue); if (!isNil__default["default"](result)) { return result; } } } return null; }; var treeRerender = function treeRerender() { treeKey.value += 1; }; var renderTree = function renderTree() { return vue.withDirectives(vue.createVNode(tree_index.Tree, vue.mergeProps({ "ref": treeRef, "key": treeKey.value, "value": _toConsumableArray__default["default"](checked.value), "hover": true, "keys": props2.keys, "data": props2.data, "activable": !props2.multiple, "checkable": props2.multiple, "disabled": tDisabled.value || multiLimitDisabled.value, "size": props2.size, "filter": filterByText.value, "icon": !filterByText.value, "actived": actived.value, "expanded": expanded.value, "activeMultiple": props2.multiple, "onChange": treeNodeChange, "onActive": treeNodeActive, "onExpand": treeNodeExpand, "onLoad": treeNodeLoad, "expandOnClickNode": true }, props2.treeProps), { empty: function empty() { return renderDefaultTNode("empty", { defaultNode: vue.createVNode("div", { "class": "".concat(classPrefix.value, "-select__empty") }, [globalConfig.value.empty]) }); } }), [[vue.vShow, !props2.loading]]); }; var renderSuffixIcon = function renderSuffixIcon() { var _ref6; return vue.createVNode(commonComponents_fakeArrow["default"], { "isActive": innerVisible.value, "disabled": props2.disabled, "overlayClassName": (_ref6 = {}, _defineProperty__default["default"](_ref6, "".concat(classPrefix.value, "-fake-arrow--highlight"), innerVisible.value), _defineProperty__default["default"](_ref6, "".concat(classPrefix.value, "-fake-arrow--disable"), props2.disabled), _ref6) }, null); }; return function () { return vue.createVNode(selectInput_index.SelectInput, vue.mergeProps({ "class": "".concat(classPrefix.value, "-tree-select"), "value": nodeInfo.value, "inputValue": innerVisible.value ? innerInputValue.value : "", "popupVisible": innerVisible.value, "disabled": tDisabled.value, "multiple": props2.multiple, "loading": props2.loading, "clearable": props2.clearable, "autoWidth": props2.autoWidth, "borderless": props2.borderless, "readonly": props2.readonly, "placeholder": inputPlaceholder.value, "allowInput": props2.filterable || isFunction__default["default"](props2.filter), "minCollapsedNum": props2.minCollapsedNum, "collapsed-items": props2.collapsedItems, "popupProps": _objectSpread({ overlayClassName: popupClass.value }, props2.popupProps), "inputProps": _objectSpread({ size: props2.size }, props2.inputProps), "tagInputProps": { size: props2.size }, "tagProps": _objectSpread({ maxWidth: 300 }, props2.tagProps), "label": function label() { return renderTNodeJSX("prefixIcon"); }, "suffixIcon": function suffixIcon() { return renderSuffixIcon(); }, "onClear": clear, "onBlur": function onBlur(_, context) { var _props2$onBlur; (_props2$onBlur = props2.onBlur) === null || _props2$onBlur === void 0 ? void 0 : _props2$onBlur.call(props2, { value: treeSelectValue.value, e: context.e }); }, "onFocus": function onFocus(_, context) { var _props2$onFocus; (_props2$onFocus = props2.onFocus) === null || _props2$onFocus === void 0 ? void 0 : _props2$onFocus.call(props2, { value: treeSelectValue.value, e: context.e }); }, "valueDisplay": function valueDisplay() { var _ref7; return renderTNodeJSX("valueDisplay", { params: props2.multiple ? { value: nodeInfo.value, onClose: function onClose(index) { var value2 = nodeInfo.value.map(function (node) { return node.value; }); tagChange(value2, { trigger: "tag-remove", index: index, item: value2[index] }); } } : { value: nodeInfo.value || (_ref7 = {}, _defineProperty__default["default"](_ref7, realLabel.value, ""), _defineProperty__default["default"](_ref7, realValue.value, void 0), _ref7) } }); }, "onInputChange": inputChange, "onTagChange": tagChange, "onPopupVisibleChange": function onPopupVisibleChange(state, context) { return setInnerVisible(state, context); } }, props2.selectInputProps), { panel: function panel() { return vue.createVNode("div", { "class": ["".concat(classPrefix.value, "-select__dropdown-inner"), "".concat(classPrefix.value, "-select__dropdown-inner--size-").concat(dropdownInnerSize.value)] }, [vue.withDirectives(vue.createVNode("p", { "class": ["".concat(classPrefix.value, "-select-loading-tips"), "".concat(classPrefix.value, "-select__right-icon-polyfill")] }, [renderDefaultTNode("loadingText", { defaultNode: vue.createVNode("div", { "class": "".concat(classPrefix.value, "-select__empty") }, [globalConfig.value.loadingText]) })]), [[vue.vShow, props2.loading && !tDisabled.value]]), renderTree()]); }, collapsedItems: slots.collapsedItems }); }; } }); exports["default"] = _TreeSelect; //# sourceMappingURL=tree-select.js.map