wetrade-design
Version:
一款多语言支持Vue3的UI框架
933 lines (932 loc) • 41.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.baseSelectPropsWithoutPrivate = void 0;
exports.isMultiple = isMultiple;
var _vue = require("vue");
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _valueUtil = require("./utils/valueUtil");
var _SelectTrigger = _interopRequireDefault(require("./SelectTrigger"));
var _Selector = _interopRequireDefault(require("./Selector"));
var _useSelectTriggerControl = _interopRequireDefault(require("./hooks/useSelectTriggerControl"));
var _useDelayReset3 = _interopRequireDefault(require("./hooks/useDelayReset"));
var _TransBtn = _interopRequireDefault(require("./TransBtn"));
var _icon = _interopRequireDefault(require("../icon"));
var _tabs = _interopRequireWildcard(require("../tabs"));
var _checkbox = _interopRequireDefault(require("../checkbox"));
var _spin = _interopRequireDefault(require("../spin"));
var _empty = _interopRequireDefault(require("../empty"));
var _enum = require("../_util/enum");
var _useLock3 = _interopRequireDefault(require("./hooks/useLock"));
var _SelectContext = _interopRequireDefault(require("./SelectContext"));
var _useBaseProps = require("./hooks/useBaseProps");
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _propsUtil = require("../_util/props-util");
var _isMobile = _interopRequireDefault(require("../vc-util/isMobile"));
var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
var _toReactive = require("../_util/toReactive");
var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
var _createRef = _interopRequireDefault(require("../_util/createRef"));
var _LegacyContext = _interopRequireDefault(require("../vc-tree-select/LegacyContext"));
var _vnode = require("../_util/vnode");
var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
var _zh_CN = _interopRequireDefault(require("../locale/zh_CN"));
var _lodash = _interopRequireDefault(require("lodash"));
var _excluded = ["prefixCls", "id", "open", "defaultOpen", "mode", "showSearch", "searchValue", "onSearch", "allowClear", "clearIcon", "showArrow", "inputIcon", "disabled", "loading", "getInputElement", "getPopupContainer", "placement", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "showAction", "direction", "tokenSeparators", "tagRender", "optionLabelRender", "onPopupScroll", "onDropdownVisibleChange", "onCheckAllChange", "onHeaderTabChange", "onFocus", "onBlur", "onKeyup", "onKeydown", "onMousedown", "onClear", "omitDomProps", "getRawInputElement", "displayValues", "onDisplayValuesChange", "emptyOptions", "activeDescendantId", "activeValue", "OptionList", "label", "condition", "maxTagCount", "flexNoWrap"]; // 默认使用中文
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autofocus', 'maxTagCount', 'flexNoWrap', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'onSetOptions', 'onSetMergedOpen', 'tabindex', 'OptionList', 'notFoundContent'];
var baseSelectPrivateProps = function baseSelectPrivateProps() {
return {
prefixCls: String,
id: String,
omitDomProps: Array,
// >>> Value
displayValues: Array,
stockSearch: Boolean,
searchIconPlacement: {
type: String,
default: 'right'
},
regionType: {
type: Number
},
stockField: {
type: Object,
default: {
stockCode: 'stockCode',
stockName: 'stockName',
regionType: 'regionType'
}
},
stockSearchHeader: Boolean,
history: Boolean,
locale: {
type: Object,
default: undefined
},
spin: {
type: [Boolean, Object],
default: undefined
},
onDisplayValuesChange: Function,
// >>> Active
/** Current dropdown list active item string value */
activeValue: String,
/** Link search input with target element */
activeDescendantId: String,
onActiveValueChange: Function,
// >>> Search
searchValue: String,
/** Trigger onSearch, return false to prevent trigger open event */
onSearch: Function,
/** Trigger when search text match the `tokenSeparators`. Will provide split content */
onSearchSplit: Function,
maxLength: Number,
OptionList: _vueTypes.default.any,
/** Tell if provided `options` is empty */
emptyOptions: Boolean
};
};
var baseSelectPropsWithoutPrivate = function baseSelectPropsWithoutPrivate() {
return {
showSearch: {
type: Boolean,
default: undefined
},
tagRender: {
type: Function
},
optionLabelRender: {
type: Function
},
direction: {
type: String
},
// MISC
tabindex: Number,
autofocus: Boolean,
notFoundContent: _vueTypes.default.any,
placeholder: _vueTypes.default.any,
onClear: Function,
choiceTransitionName: String,
// >>> Mode
mode: String,
// >>> Status
disabled: {
type: Boolean,
default: undefined
},
loading: {
type: Boolean,
default: undefined
},
// >>> Open
open: {
type: Boolean,
default: undefined
},
defaultOpen: {
type: Boolean,
default: undefined
},
onDropdownVisibleChange: {
type: Function
},
onCheckAllChange: {
type: Function
},
onHeaderTabChange: {
type: Function
},
onSetOptions: {
type: Function
},
onSetMergedOpen: {
type: Function
},
// >>> Customize Input
/** @private Internal usage. Do not use in your production. */
getInputElement: {
type: Function
},
/** @private Internal usage. Do not use in your production. */
getRawInputElement: {
type: Function
},
// >>> Selector
maxTagTextLength: Number,
maxTagCount: {
type: [String, Number]
},
maxTagPlaceholder: _vueTypes.default.any,
flexNoWrap: Boolean,
// >>> Search
tokenSeparators: {
type: Array
},
// >>> Icons
allowClear: {
type: Boolean,
default: undefined
},
showArrow: {
type: Boolean,
default: undefined
},
inputIcon: _vueTypes.default.any,
/** Clear all icon */
clearIcon: _vueTypes.default.any,
/** Selector remove icon */
removeIcon: _vueTypes.default.any,
// >>> Dropdown
animation: String,
transitionName: String,
dropdownStyle: {
type: Object
},
dropdownClassName: String,
dropdownMatchSelectWidth: {
type: [Boolean, Number],
default: undefined
},
dropdownRender: {
type: Function
},
dropdownAlign: Object,
placement: {
type: String
},
getPopupContainer: {
type: Function
},
// >>> Focus
showAction: {
type: Array
},
onBlur: {
type: Function
},
onFocus: {
type: Function
},
// >>> Rest Events
onKeyup: Function,
onKeydown: Function,
onMousedown: Function,
onPopupScroll: Function,
onInputKeyDown: Function,
onMouseenter: Function,
onMouseleave: Function,
onClick: Function,
label: String,
condition: {
type: Boolean,
default: undefined
}
};
};
exports.baseSelectPropsWithoutPrivate = baseSelectPropsWithoutPrivate;
var baseSelectProps = function baseSelectProps() {
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, baseSelectPrivateProps()), baseSelectPropsWithoutPrivate());
};
function isMultiple(mode) {
return mode === 'tags' || mode === 'multiple';
}
var _default2 = (0, _vue.defineComponent)({
compatConfig: {
MODE: 3
},
name: 'BaseSelect',
inheritAttrs: false,
props: (0, _propsUtil.initDefaultProps)(baseSelectProps(), {
showAction: [],
notFoundContent: 'Not Found'
}),
setup: function setup(props, _ref) {
var attrs = _ref.attrs,
expose = _ref.expose,
slots = _ref.slots;
var multiple = (0, _vue.computed)(function () {
return isMultiple(props.mode);
});
var mergedShowSearch = (0, _vue.computed)(function () {
return props.showSearch !== undefined ? props.showSearch : multiple.value || props.mode === 'combobox';
});
var mobile = (0, _vue.ref)(false);
(0, _vue.onMounted)(function () {
mobile.value = (0, _isMobile.default)();
});
var legacyTreeSelectContext = (0, _LegacyContext.default)();
var selectProps = (0, _SelectContext.default)();
// ============================== Refs ==============================
var containerRef = (0, _vue.ref)(null);
var selectorDomRef = (0, _createRef.default)();
var triggerRef = (0, _vue.ref)(null);
var selectorRef = (0, _vue.ref)(null);
var listRef = (0, _vue.ref)(null);
var _useLocaleReceiver = (0, _LocaleReceiver.useLocaleReceiver)('Select', _zh_CN.default.Select, (0, _vue.toRef)(props, 'locale')),
_useLocaleReceiver2 = (0, _slicedToArray2.default)(_useLocaleReceiver, 1),
selectLocale = _useLocaleReceiver2[0];
/** Used for component focused management */
var _useDelayReset = (0, _useDelayReset3.default)(),
_useDelayReset2 = (0, _slicedToArray2.default)(_useDelayReset, 3),
mockFocused = _useDelayReset2[0],
setMockFocused = _useDelayReset2[1],
cancelSetMockFocused = _useDelayReset2[2];
var focus = function focus() {
var _selectorRef$value;
(_selectorRef$value = selectorRef.value) === null || _selectorRef$value === void 0 ? void 0 : _selectorRef$value.focus();
};
var blur = function blur() {
var _selectorRef$value2;
(_selectorRef$value2 = selectorRef.value) === null || _selectorRef$value2 === void 0 ? void 0 : _selectorRef$value2.blur();
};
var preDisplayValues = (0, _vue.ref)(null);
expose({
focus: focus,
blur: blur,
scrollTo: function scrollTo(arg) {
var _listRef$value;
return (_listRef$value = listRef.value) === null || _listRef$value === void 0 ? void 0 : _listRef$value.scrollTo(arg);
}
});
// 股票搜索组件选中的id
// const stockSearchMergedSearchValue = computed(() => {
// return props.displayValues[0]?.value;
// });
// ============================== Open ==============================
var initOpen = props.open !== undefined ? props.open : props.defaultOpen;
var innerOpen = (0, _vue.ref)(initOpen);
var mergedOpen = (0, _vue.ref)(initOpen);
var setInnerOpen = function setInnerOpen(val) {
innerOpen.value = props.open !== undefined ? props.open : val;
mergedOpen.value = innerOpen.value;
};
(0, _vue.watch)(function () {
return props.open;
}, function () {
setInnerOpen(props.open);
});
// 股票搜索组件回显label，其余select回显value(此value非业务传进来的value)
var mergedSearchValue = (0, _vue.computed)(function () {
var _props$displayValues$, _props$displayValues$2;
if (props.mode !== 'combobox') {
return props.searchValue;
}
var val = props.stockSearch && (!mergedOpen.value || mergedOpen.value && flag.value) ? (_props$displayValues$ = props.displayValues[0]) === null || _props$displayValues$ === void 0 ? void 0 : _props$displayValues$.label : (_props$displayValues$2 = props.displayValues[0]) === null || _props$displayValues$2 === void 0 ? void 0 : _props$displayValues$2.value;
return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
});
// Not trigger `open` in `combobox` when `notFoundContent` is empty
var emptyListContent = (0, _vue.computed)(function () {
return props.stockSearch ? !mergedOpen.value : !props.notFoundContent && props.emptyOptions;
});
(0, _vue.watchEffect)(function () {
mergedOpen.value = innerOpen.value;
if (props.disabled || emptyListContent.value && mergedOpen.value && props.mode === 'combobox') {
mergedOpen.value = false;
}
});
var triggerOpen = (0, _vue.computed)(function () {
return emptyListContent.value ? false : mergedOpen.value;
});
var onToggleOpen = function onToggleOpen(newOpen) {
props.onSetMergedOpen && props.onSetMergedOpen(mergedOpen.value);
var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen.value;
if (innerOpen.value !== nextOpen && !props.disabled) {
setInnerOpen(nextOpen);
if (props.onDropdownVisibleChange) {
props.onDropdownVisibleChange(nextOpen);
}
}
};
var tokenWithEnter = (0, _vue.computed)(function () {
return (props.tokenSeparators || []).some(function (tokenSeparator) {
return ['\n', '\r\n'].includes(tokenSeparator);
});
});
var flag = (0, _vue.ref)(false);
var onInternalSearch = function onInternalSearch(searchText, fromTyping, isCompositing) {
var _props$onActiveValueC;
flag.value = false;
var ret = true;
var newSearchText = searchText;
(_props$onActiveValueC = props.onActiveValueChange) === null || _props$onActiveValueC === void 0 ? void 0 : _props$onActiveValueC.call(props, null);
// Check if match the `tokenSeparators`
var patchLabels = isCompositing ? null : (0, _valueUtil.getSeparatedContent)(searchText, props.tokenSeparators);
// Ignore combobox since it's not split-able
if (props.mode !== 'combobox' && patchLabels) {
var _props$onSearchSplit;
newSearchText = '';
(_props$onSearchSplit = props.onSearchSplit) === null || _props$onSearchSplit === void 0 ? void 0 : _props$onSearchSplit.call(props, patchLabels);
// Should close when paste finish
onToggleOpen(false);
// Tell Selector that break next actions
ret = false;
}
if (props.onSearch && mergedSearchValue.value !== newSearchText) {
props.onSearch(newSearchText, {
source: fromTyping ? 'typing' : 'effect'
});
}
return ret;
};
// Only triggered when menu is closed & mode is tags
// If menu is open, OptionList will take charge
// If mode isn't tags, press enter is not meaningful when you can't see any option
var onInternalSearchSubmit = function onInternalSearchSubmit(searchText) {
var _props$onSearch;
// prevent empty tags from appearing when you click the Enter button
if (!searchText || !searchText.trim()) {
return;
}
(_props$onSearch = props.onSearch) === null || _props$onSearch === void 0 ? void 0 : _props$onSearch.call(props, searchText, {
source: 'submit'
});
};
// Close will clean up single mode search text
(0, _vue.watch)(mergedOpen, function () {
if (!mergedOpen.value && !multiple.value && props.mode !== 'combobox') {
onInternalSearch('', false, false);
}
}, {
immediate: true,
flush: 'post'
});
// ============================ Disabled ============================
// Close dropdown & remove focus state when disabled change
(0, _vue.watch)(function () {
return props.disabled;
}, function () {
if (innerOpen.value && !!props.disabled) {
setInnerOpen(false);
}
}, {
immediate: true
});
// ============================ Keyboard ============================
/**
* We record input value here to check if can press to clean up by backspace
* - null: Key is not down, this is reset by key up
* - true: Search text is empty when first time backspace down
* - false: Search text is not empty when first time backspace down
*/
var _useLock = (0, _useLock3.default)(),
_useLock2 = (0, _slicedToArray2.default)(_useLock, 2),
getClearLock = _useLock2[0],
setClearLock = _useLock2[1];
// KeyDown
var onInternalKeyDown = function onInternalKeyDown(event) {
var _props$onKeydown;
var clearLock = getClearLock();
var which = event.which;
if (which === _KeyCode.default.ENTER) {
if (props.stockSearch) {
return;
}
// Do not submit form when type in the input
if (props.mode !== 'combobox') {
event.preventDefault();
}
// We only manage open state here, close logic should handle by list component
if (!mergedOpen.value) {
onToggleOpen(true);
}
}
setClearLock(!!mergedSearchValue.value);
// Remove value by `backspace`
if (which === _KeyCode.default.BACKSPACE && !clearLock && multiple.value && !mergedSearchValue.value && props.displayValues.length) {
var cloneDisplayValues = (0, _toConsumableArray2.default)(props.displayValues);
var removedDisplayValue = null;
for (var i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
var current = cloneDisplayValues[i];
if (!current.disabled) {
cloneDisplayValues.splice(i, 1);
removedDisplayValue = current;
break;
}
}
if (removedDisplayValue) {
props.onDisplayValuesChange(cloneDisplayValues, {
type: 'remove',
values: [removedDisplayValue]
});
}
}
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
rest[_key - 1] = arguments[_key];
}
if (mergedOpen.value && listRef.value) {
var _listRef$value2;
(_listRef$value2 = listRef.value).onKeydown.apply(_listRef$value2, [event].concat(rest));
}
(_props$onKeydown = props.onKeydown) === null || _props$onKeydown === void 0 ? void 0 : _props$onKeydown.call.apply(_props$onKeydown, [props, event].concat(rest));
};
// KeyUp
var onInternalKeyUp = function onInternalKeyUp(event) {
for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
rest[_key2 - 1] = arguments[_key2];
}
if (mergedOpen.value && listRef.value) {
var _listRef$value3;
(_listRef$value3 = listRef.value).onKeyup.apply(_listRef$value3, [event].concat(rest));
}
if (props.onKeyup) {
props.onKeyup.apply(props, [event].concat(rest));
}
};
// ============================ Selector ============================
var onSelectorRemove = function onSelectorRemove(val) {
var newValues = props.displayValues.filter(function (i) {
return i !== val;
});
props.onDisplayValuesChange(newValues, {
type: 'remove',
values: [val]
});
};
// ========================== Focus / Blur ==========================
/** Record real focus status */
var focusRef = (0, _vue.ref)(false);
var isSelected = (0, _vue.ref)(false);
var onToggleSelected = function onToggleSelected(val) {
isSelected.value = val;
};
var onContainerFocus = function onContainerFocus() {
flag.value = true;
preDisplayValues.value = props.displayValues[0];
onToggleSelected(false);
setMockFocused(true);
if (!props.disabled) {
if (props.onFocus && !focusRef.value) {
props.onFocus.apply(props, arguments);
}
// `showAction` should handle `focus` if set
if (props.showAction && props.showAction.includes('focus')) {
onToggleOpen(true);
}
}
focusRef.value = true;
};
var onContainerBlur = function onContainerBlur() {
flag.value = false;
setMockFocused(false, function () {
focusRef.value = false;
onToggleOpen(false);
});
if (props.disabled) {
return;
}
var searchVal = mergedSearchValue.value;
if (searchVal) {
// `tags` mode should move `searchValue` into values
if (props.mode === 'tags') {
props.onSearch(searchVal, {
source: 'submit'
});
} else if (props.mode === 'multiple') {
// `multiple` mode only clean the search value but not trigger event
props.onSearch('', {
source: 'blur'
});
}
}
// 股票搜索组件只有选中了id,才回显
// if (props.stockSearch && !props.displayValues[0]?.option) {
if (props.stockSearch && !isSelected.value) {
if (preDisplayValues.value) {
// 还需要回填valueOptions （optionList）
var valueCopy = _lodash.default.cloneDeep(preDisplayValues.value);
if (!valueCopy.option) {
var _valueCopy$option;
valueCopy.option = (_valueCopy$option = {
stockId: valueCopy.value
}, (0, _defineProperty2.default)(_valueCopy$option, props.stockField.stockCode, valueCopy.label), (0, _defineProperty2.default)(_valueCopy$option, "value", valueCopy.label), (0, _defineProperty2.default)(_valueCopy$option, "label", valueCopy.value), _valueCopy$option);
}
props.onSetOptions(valueCopy);
selectProps.onSelect(valueCopy, {
selected: false
});
} else {
props.onDisplayValuesChange([], {
type: 'clear',
values: props.displayValues
});
onInternalSearch('', false, false);
}
}
if (props.onBlur) {
props.onBlur.apply(props, arguments);
}
};
(0, _vue.provide)('VCSelectContainerEvent', {
focus: onContainerFocus,
blur: onContainerBlur
});
// Give focus back of Select
var activeTimeoutIds = [];
(0, _vue.onMounted)(function () {
activeTimeoutIds.forEach(function (timeoutId) {
return clearTimeout(timeoutId);
});
activeTimeoutIds.splice(0, activeTimeoutIds.length);
});
(0, _vue.onBeforeUnmount)(function () {
activeTimeoutIds.forEach(function (timeoutId) {
return clearTimeout(timeoutId);
});
activeTimeoutIds.splice(0, activeTimeoutIds.length);
});
var onInternalMouseDown = function onInternalMouseDown(event) {
var _triggerRef$value, _props$onMousedown;
var target = event.target;
var popupElement = (_triggerRef$value = triggerRef.value) === null || _triggerRef$value === void 0 ? void 0 : _triggerRef$value.getPopupElement();
// We should give focus back to selector if clicked item is not focusable
if (popupElement && popupElement.contains(target)) {
var timeoutId = setTimeout(function () {
var index = activeTimeoutIds.indexOf(timeoutId);
if (index !== -1) {
activeTimeoutIds.splice(index, 1);
}
cancelSetMockFocused();
if (!mobile.value && !popupElement.contains(document.activeElement)) {
var _selectorRef$value3;
(_selectorRef$value3 = selectorRef.value) === null || _selectorRef$value3 === void 0 ? void 0 : _selectorRef$value3.focus();
}
});
activeTimeoutIds.push(timeoutId);
}
for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
restArgs[_key3 - 1] = arguments[_key3];
}
(_props$onMousedown = props.onMousedown) === null || _props$onMousedown === void 0 ? void 0 : _props$onMousedown.call.apply(_props$onMousedown, [props, event].concat(restArgs));
};
// ============================= Dropdown ==============================
var containerWidth = (0, _vue.ref)(null);
var instance = (0, _vue.getCurrentInstance)();
var onPopupMouseEnter = function onPopupMouseEnter() {
// We need force update here since popup dom is render async
instance.update();
};
(0, _vue.onMounted)(function () {
(0, _vue.watch)(triggerOpen, function () {
if (triggerOpen.value) {
var _containerRef$value;
var newWidth = Math.ceil((_containerRef$value = containerRef.value) === null || _containerRef$value === void 0 ? void 0 : _containerRef$value.offsetWidth);
if (containerWidth.value !== newWidth && !Number.isNaN(newWidth)) {
containerWidth.value = newWidth;
}
}
}, {
immediate: true,
flush: 'post'
});
});
// Close when click on non-select element
(0, _useSelectTriggerControl.default)([containerRef, triggerRef], triggerOpen, onToggleOpen);
(0, _useBaseProps.useProvideBaseSelectProps)((0, _toReactive.toReactive)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _vue.toRefs)(props)), {}, {
open: mergedOpen,
triggerOpen: triggerOpen,
showSearch: mergedShowSearch,
multiple: multiple,
toggleOpen: onToggleOpen,
toggleSelected: onToggleSelected,
blur: blur
})));
return function () {
var _selectorRef$value4, _classNames2;
var _props$attrs = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), attrs),
prefixCls = _props$attrs.prefixCls,
id = _props$attrs.id,
open = _props$attrs.open,
defaultOpen = _props$attrs.defaultOpen,
mode = _props$attrs.mode,
showSearch = _props$attrs.showSearch,
searchValue = _props$attrs.searchValue,
onSearch = _props$attrs.onSearch,
allowClear = _props$attrs.allowClear,
clearIcon = _props$attrs.clearIcon,
showArrow = _props$attrs.showArrow,
inputIcon = _props$attrs.inputIcon,
disabled = _props$attrs.disabled,
loading = _props$attrs.loading,
getInputElement = _props$attrs.getInputElement,
getPopupContainer = _props$attrs.getPopupContainer,
placement = _props$attrs.placement,
animation = _props$attrs.animation,
transitionName = _props$attrs.transitionName,
dropdownStyle = _props$attrs.dropdownStyle,
dropdownClassName = _props$attrs.dropdownClassName,
dropdownMatchSelectWidth = _props$attrs.dropdownMatchSelectWidth,
dropdownRender = _props$attrs.dropdownRender,
dropdownAlign = _props$attrs.dropdownAlign,
showAction = _props$attrs.showAction,
direction = _props$attrs.direction,
tokenSeparators = _props$attrs.tokenSeparators,
tagRender = _props$attrs.tagRender,
optionLabelRender = _props$attrs.optionLabelRender,
onPopupScroll = _props$attrs.onPopupScroll,
onDropdownVisibleChange = _props$attrs.onDropdownVisibleChange,
onCheckAllChange = _props$attrs.onCheckAllChange,
onHeaderTabChange = _props$attrs.onHeaderTabChange,
onFocus = _props$attrs.onFocus,
onBlur = _props$attrs.onBlur,
onKeyup = _props$attrs.onKeyup,
onKeydown = _props$attrs.onKeydown,
onMousedown = _props$attrs.onMousedown,
onClear = _props$attrs.onClear,
omitDomProps = _props$attrs.omitDomProps,
getRawInputElement = _props$attrs.getRawInputElement,
displayValues = _props$attrs.displayValues,
onDisplayValuesChange = _props$attrs.onDisplayValuesChange,
emptyOptions = _props$attrs.emptyOptions,
activeDescendantId = _props$attrs.activeDescendantId,
activeValue = _props$attrs.activeValue,
OptionList = _props$attrs.OptionList,
label = _props$attrs.label,
condition = _props$attrs.condition,
maxTagCount = _props$attrs.maxTagCount,
flexNoWrap = _props$attrs.flexNoWrap,
restProps = (0, _objectWithoutProperties2.default)(_props$attrs, _excluded);
// ============================= Input ==============================
// Only works in `combobox`
var customizeInputElement = mode === 'combobox' && getInputElement && getInputElement() || null;
// Used for customize replacement for `vc-cascader`
var customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
var domProps = (0, _objectSpread2.default)({}, restProps);
// Used for raw custom input trigger
var onTriggerVisibleChange;
if (customizeRawInputElement) {
onTriggerVisibleChange = function onTriggerVisibleChange(newOpen) {
onToggleOpen(newOpen);
};
}
DEFAULT_OMIT_PROPS.forEach(function (propName) {
delete domProps[propName];
});
omitDomProps === null || omitDomProps === void 0 ? void 0 : omitDomProps.forEach(function (propName) {
delete domProps[propName];
});
// ============================= Arrow ==============================
var mergedShowArrow = true;
// 暂时注释 面性默认没有箭头
// showArrow !== undefined ? showArrow : loading || (!multiple.value && mode !== 'combobox');
var arrowNode;
if (mergedShowArrow) {
arrowNode = (0, _vue.createVNode)(_TransBtn.default, {
"class": (0, _classNames3.default)("".concat(prefixCls, "-arrow"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-arrow-loading"), loading)),
"customizeIcon": inputIcon,
"customizeIconProps": {
loading: loading,
searchValue: mergedSearchValue.value,
open: mergedOpen.value,
focused: mockFocused.value,
showSearch: mergedShowSearch.value
}
}, null);
}
var prefixIcon;
if (props.stockSearch && props.searchIconPlacement === 'left') {
prefixIcon = (0, _vue.createVNode)("span", {
"class": "".concat(prefixCls, "-prefix")
}, [(0, _vue.createVNode)(_icon.default, {
"class": "".concat(prefixCls, "-suffix-search"),
"iconClass": "wd-icon-interactive_search"
}, null)]);
}
// ============================= Clear ==============================
var clearNode;
var onClearMouseDown = function onClearMouseDown() {
onClear === null || onClear === void 0 ? void 0 : onClear();
onDisplayValuesChange([], {
type: 'clear',
values: displayValues
});
onInternalSearch('', false, false);
preDisplayValues.value = null;
};
if (!disabled && allowClear && (displayValues.length || mergedSearchValue.value)) {
clearNode = (0, _vue.createVNode)(_TransBtn.default, {
"class": "".concat(prefixCls, "-clear"),
"onMousedown": onClearMouseDown,
"customizeIcon": clearIcon
}, {
default: function _default() {
return [(0, _vue.createTextVNode)("\xD7")];
}
});
}
// >>>>>>>>> Spinning
var spinProps;
if (typeof props.spin === 'boolean') {
spinProps = {
spinning: props.spin,
placement: 'top'
};
} else if ((0, _typeof2.default)(props.spin) === 'object') {
spinProps = (0, _objectSpread2.default)({
spinning: true
}, props.spin);
}
var onListMouseDown = function onListMouseDown(event) {
event.preventDefault();
};
// =========================== OptionList ===========================
var optionListSpin = (0, _vue.createVNode)(_spin.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
"spinning": false
}, spinProps), {}, {
"placement": ""
}), {
default: function _default() {
return [props.emptyOptions && props.stockSearch ? (0, _vue.createVNode)("div", {
"onMousedown": onListMouseDown
}, [(0, _vue.createVNode)(_empty.default, {
"type": "module",
"style": {
height: '320px',
margin: 0,
padding: '16px 0'
}
}, null)]) : multiple.value && props !== null && props !== void 0 && props.onCheckAllChange ? (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)(OptionList, {
"ref": listRef
}, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, legacyTreeSelectContext.customSlots), {}, {
option: slots.option
})), (0, _vue.createVNode)(_checkbox.default, {
"class": "".concat(prefixCls, "-dropdown-checkall"),
"onChange": function onChange() {
var _props$onCheckAllChan;
return (_props$onCheckAllChan = props.onCheckAllChange) === null || _props$onCheckAllChan === void 0 ? void 0 : _props$onCheckAllChan.call(props, props.displayValues.length !== selectProps.options.length);
},
"checked": props.displayValues.length === selectProps.options.length,
"indeterminate": props.displayValues.length > 0 && props.displayValues.length < selectProps.options.length
}, {
default: function _default() {
return [selectLocale.value.checkAll];
}
})]) : (0, _vue.createVNode)(OptionList, {
"ref": listRef
}, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, legacyTreeSelectContext.customSlots), {}, {
option: slots.option
}))];
}
});
var optionList = props.stockSearchHeader || props.history ? (0, _vue.createVNode)("div", null, [(_selectorRef$value4 = selectorRef.value) !== null && _selectorRef$value4 !== void 0 && _selectorRef$value4.historyShow ? (0, _vue.createVNode)("p", {
"onMousedown": onListMouseDown,
"class": "".concat(prefixCls, "-dropdown-stock-search-history")
}, [selectLocale.value.history]) : (0, _vue.createVNode)(_vue.Fragment, null, [props.stockSearchHeader ? (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)(_tabs.default, {
"class": "".concat(prefixCls, "-dropdown-stock-search-header"),
"centered": true,
"onMousedown": onListMouseDown,
"onChange": props.onHeaderTabChange
}, {
default: function _default() {
return [(0, _vue.createVNode)(_tabs.TabPane, {
"key": '',
"tab": selectLocale.value.regionTypeAll
}, null), (0, _vue.createVNode)(_tabs.TabPane, {
"key": _enum.RegionTypeEnum.HK,
"tab": selectLocale.value.regionTypeHK
}, null), (0, _vue.createVNode)(_tabs.TabPane, {
"key": _enum.RegionTypeEnum.US,
"tab": selectLocale.value.regionTypeUS
}, null)];
}
}), (0, _vue.createVNode)("p", {
"class": "".concat(prefixCls, "-dropdown-stock-search-place"),
"onMousedown": onListMouseDown
}, null)]) : '']), optionListSpin]) : optionListSpin;
// ============================= Select =============================
var mergedClassName = (0, _classNames3.default)(prefixCls, attrs.class, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-focused"), mockFocused.value), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-multiple"), multiple.value), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-single"), !multiple.value), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-show-arrow"), mergedShowArrow), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-show-prefix"), props.stockSearch && props.searchIconPlacement === 'left'), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-loading"), loading), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-open"), mergedOpen.value), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch.value), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-condition"), condition), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-max-tag-count"), maxTagCount), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-flex-no-wrap"), flexNoWrap), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-fill"), displayValues.length || mergedSearchValue.value), _classNames2));
// >>> Selector
var selectorNode = (0, _vue.createVNode)(_SelectTrigger.default, {
"ref": triggerRef,
"disabled": disabled,
"prefixCls": prefixCls,
"visible": triggerOpen.value,
"popupElement": optionList,
"containerWidth": containerWidth.value,
"animation": animation,
"transitionName": transitionName,
"dropdownStyle": dropdownStyle,
"dropdownClassName": dropdownClassName,
"direction": direction,
"dropdownMatchSelectWidth": dropdownMatchSelectWidth,
"dropdownRender": dropdownRender,
"dropdownAlign": dropdownAlign,
"placement": placement,
"getPopupContainer": getPopupContainer,
"empty": emptyOptions,
"getTriggerDOMNode": function getTriggerDOMNode() {
return selectorDomRef.current;
},
"onPopupVisibleChange": onTriggerVisibleChange,
"onPopupMouseEnter": onPopupMouseEnter
}, {
default: function _default() {
return customizeRawInputElement ? (0, _propsUtil.isValidElement)(customizeRawInputElement) && (0, _vnode.cloneElement)(customizeRawInputElement, {
ref: selectorDomRef
}, false, true) : (0, _vue.createVNode)(_Selector.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
"domRef": selectorDomRef,
"prefixCls": prefixCls,
"inputElement": customizeInputElement,
"ref": selectorRef,
"id": id,
"showSearch": mergedShowSearch.value,
"mode": mode,
"activeDescendantId": activeDescendantId,
"tagRender": tagRender,
"optionLabelRender": optionLabelRender,
"values": displayValues,
"open": mergedOpen.value,
"originalOpen": props.open,
"onToggleOpen": onToggleOpen,
"onToggleSelected": onToggleSelected,
"activeValue": activeValue,
"searchValue": mergedSearchValue.value,
"onSearch": onInternalSearch,
"onSearchSubmit": onInternalSearchSubmit,
"onRemove": onSelectorRemove,
"tokenWithEnter": tokenWithEnter.value
}), null);
}
});
// >>> Render
var renderNode;
// Render raw
if (customizeRawInputElement) {
renderNode = selectorNode;
} else {
renderNode = (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, domProps), {}, {
"class": mergedClassName,
"ref": containerRef,
"onMousedown": onInternalMouseDown,
"onKeydown": onInternalKeyDown,
"onKeyup": onInternalKeyUp
}), [mockFocused.value && !mergedOpen.value && (0, _vue.createVNode)("span", {
"style": {
width: 0,
height: 0,
display: 'flex',
overflow: 'hidden',
opacity: 0
},
"aria-live": "polite"
}, ["".concat(displayValues.map(function (_ref2) {
var label = _ref2.label,
value = _ref2.value;
return ['number', 'string'].includes((0, _typeof2.default)(label)) ? label : value;
}).join(', '))]), prefixIcon, selectorNode, arrowNode, clearNode]);
}
return renderNode;
};
}
});
exports.default = _default2;