4865 lines
155 KiB
JavaScript
4865 lines
155 KiB
JavaScript
import { createVNode, defineComponent, ref, computed, mergeProps, unref, withCtx, toDisplayString, createBlock, openBlock, Fragment, renderList, toRef, watchEffect, shallowRef, watch, toRaw, provide, isRef, reactive, toRefs, createTextVNode, nextTick, inject, cloneVNode, isVNode, useSSRContext } from 'vue';
|
||
import { ssrRenderAttrs, ssrInterpolate, ssrRenderComponent, ssrRenderList } from 'vue/server-renderer';
|
||
import { get } from 'lodash-es';
|
||
import { u as usePrefix } from './BasicIconOld-93vAWohq.mjs';
|
||
import _objectSpread$1 from '@babel/runtime/helpers/esm/objectSpread2';
|
||
import _extends from '@babel/runtime/helpers/esm/extends';
|
||
import { bc as Icon, L as initDefaultProps, E as useConfigInject, bx as useCompactItemContext, $ as useInjectDisabled, F as genComponentStyleHook, ad as getTransitionName, by as getTransitionDirection, H as classNames, bz as DefaultRenderEmpty, G as omit, a0 as merge, aE as CloseCircleFilled, bj as LoadingOutlined, as as CloseOutlined, bs as useState$1, X as functionType, Y as stringType, Z as booleanType, P as PropTypes, aC as someType, a8 as genCompactItemStyle, ab as isValidElement, ae as cloneElement, Q as resetComponent, bq as resetIcon, R as textEllipsis, J as flattenChildren, S as KeyCode, bA as pickAttrs } from './server.mjs';
|
||
import { _ as __nuxt_component_2, T as Trigger, s as supportsPassive } from './index-TzujBed1.mjs';
|
||
import { R as ResizeObserver, B as BaseInput } from './BaseInput-8pfzphkE.mjs';
|
||
import { O as Overflow } from './Overflow-DfCwiuVq.mjs';
|
||
import { w as wrapperRaf } from './raf-ruCY1ktO.mjs';
|
||
import { u as useMemo, i as initMoveMotion } from './move-Cs7vI4mQ.mjs';
|
||
import { u as useMergedState } from './useMergedState-BZEfJ8Fl.mjs';
|
||
import { C as CheckOutlined } from '../_/CheckOutlined.mjs';
|
||
import { S as SearchOutlined } from '../_/SearchOutlined.mjs';
|
||
import { u as useInjectFormItemContext, F as FormItemInputContext } from './FormItemContext-CR0UDjwx.mjs';
|
||
import { g as getMergedStatus, a as getStatusClassNames } from './statusUtils-TdjbCkOy.mjs';
|
||
import { i as initSlideMotion, s as slideDownOut, a as slideUpOut, b as slideDownIn, c as slideUpIn } from './slide-DWlovEng.mjs';
|
||
|
||
// This icon file is generated automatically.
|
||
var DownOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
|
||
|
||
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
|
||
|
||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||
|
||
var DownOutlined = function DownOutlined(props, context) {
|
||
var p = _objectSpread({}, props, context.attrs);
|
||
|
||
return createVNode(Icon, _objectSpread({}, p, {
|
||
"icon": DownOutlined$1
|
||
}), null);
|
||
};
|
||
|
||
DownOutlined.displayName = 'DownOutlined';
|
||
DownOutlined.inheritAttrs = false;
|
||
|
||
function getKey(data, index) {
|
||
const {
|
||
key
|
||
} = data;
|
||
let value;
|
||
if ("value" in data) {
|
||
({
|
||
value
|
||
} = data);
|
||
}
|
||
if (key !== null && key !== void 0) {
|
||
return key;
|
||
}
|
||
if (value !== void 0) {
|
||
return value;
|
||
}
|
||
return `rc-index-key-${index}`;
|
||
}
|
||
function fillFieldNames(fieldNames, childrenAsData) {
|
||
const {
|
||
label,
|
||
value,
|
||
options
|
||
} = fieldNames || {};
|
||
return {
|
||
label: label || (childrenAsData ? "children" : "label"),
|
||
value: value || "value",
|
||
options: options || "options"
|
||
};
|
||
}
|
||
function flattenOptions(options) {
|
||
let {
|
||
fieldNames,
|
||
childrenAsData
|
||
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
||
const flattenList = [];
|
||
const {
|
||
label: fieldLabel,
|
||
value: fieldValue,
|
||
options: fieldOptions
|
||
} = fillFieldNames(fieldNames, false);
|
||
function dig(list, isGroupOption) {
|
||
list.forEach((data) => {
|
||
const label = data[fieldLabel];
|
||
if (isGroupOption || !(fieldOptions in data)) {
|
||
const value = data[fieldValue];
|
||
flattenList.push({
|
||
key: getKey(data, flattenList.length),
|
||
groupOption: isGroupOption,
|
||
data,
|
||
label,
|
||
value
|
||
});
|
||
} else {
|
||
let grpLabel = label;
|
||
if (grpLabel === void 0 && childrenAsData) {
|
||
grpLabel = data.label;
|
||
}
|
||
flattenList.push({
|
||
key: getKey(data, flattenList.length),
|
||
group: true,
|
||
data,
|
||
label: grpLabel
|
||
});
|
||
dig(data[fieldOptions], true);
|
||
}
|
||
});
|
||
}
|
||
dig(options, false);
|
||
return flattenList;
|
||
}
|
||
function injectPropsWithOption(option) {
|
||
const newOption = _extends({}, option);
|
||
if (!("props" in newOption)) {
|
||
Object.defineProperty(newOption, "props", {
|
||
get() {
|
||
return newOption;
|
||
}
|
||
});
|
||
}
|
||
return newOption;
|
||
}
|
||
function getSeparatedContent(text, tokens) {
|
||
if (!tokens || !tokens.length) {
|
||
return null;
|
||
}
|
||
let match = false;
|
||
function separate(str, _ref) {
|
||
let [token, ...restTokens] = _ref;
|
||
if (!token) {
|
||
return [str];
|
||
}
|
||
const list2 = str.split(token);
|
||
match = match || list2.length > 1;
|
||
return list2.reduce((prevList, unitStr) => [...prevList, ...separate(unitStr, restTokens)], []).filter((unit) => unit);
|
||
}
|
||
const list = separate(text, tokens);
|
||
return match ? list : null;
|
||
}
|
||
var __rest$4 = function(s, e) {
|
||
var t = {};
|
||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||
}
|
||
return t;
|
||
};
|
||
const getBuiltInPlacements = (dropdownMatchSelectWidth) => {
|
||
const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
|
||
return {
|
||
bottomLeft: {
|
||
points: ["tl", "bl"],
|
||
offset: [0, 4],
|
||
overflow: {
|
||
adjustX,
|
||
adjustY: 1
|
||
}
|
||
},
|
||
bottomRight: {
|
||
points: ["tr", "br"],
|
||
offset: [0, 4],
|
||
overflow: {
|
||
adjustX,
|
||
adjustY: 1
|
||
}
|
||
},
|
||
topLeft: {
|
||
points: ["bl", "tl"],
|
||
offset: [0, -4],
|
||
overflow: {
|
||
adjustX,
|
||
adjustY: 1
|
||
}
|
||
},
|
||
topRight: {
|
||
points: ["br", "tr"],
|
||
offset: [0, -4],
|
||
overflow: {
|
||
adjustX,
|
||
adjustY: 1
|
||
}
|
||
}
|
||
};
|
||
};
|
||
const SelectTrigger = defineComponent({
|
||
name: "SelectTrigger",
|
||
inheritAttrs: false,
|
||
props: {
|
||
dropdownAlign: Object,
|
||
visible: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
dropdownClassName: String,
|
||
dropdownStyle: PropTypes.object,
|
||
placement: String,
|
||
empty: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
prefixCls: String,
|
||
popupClassName: String,
|
||
animation: String,
|
||
transitionName: String,
|
||
getPopupContainer: Function,
|
||
dropdownRender: Function,
|
||
containerWidth: Number,
|
||
dropdownMatchSelectWidth: PropTypes.oneOfType([Number, Boolean]).def(true),
|
||
popupElement: PropTypes.any,
|
||
direction: String,
|
||
getTriggerDOMNode: Function,
|
||
onPopupVisibleChange: Function,
|
||
onPopupMouseEnter: Function,
|
||
onPopupFocusin: Function,
|
||
onPopupFocusout: Function
|
||
},
|
||
setup(props2, _ref) {
|
||
let {
|
||
slots,
|
||
attrs,
|
||
expose
|
||
} = _ref;
|
||
const builtInPlacements = computed(() => {
|
||
const {
|
||
dropdownMatchSelectWidth
|
||
} = props2;
|
||
return getBuiltInPlacements(dropdownMatchSelectWidth);
|
||
});
|
||
const popupRef = ref();
|
||
expose({
|
||
getPopupElement: () => {
|
||
return popupRef.value;
|
||
}
|
||
});
|
||
return () => {
|
||
const _a = _extends(_extends({}, props2), attrs), {
|
||
empty = false
|
||
} = _a, restProps = __rest$4(_a, ["empty"]);
|
||
const {
|
||
visible,
|
||
dropdownAlign,
|
||
prefixCls,
|
||
popupElement,
|
||
dropdownClassName,
|
||
dropdownStyle,
|
||
direction = "ltr",
|
||
placement,
|
||
dropdownMatchSelectWidth,
|
||
containerWidth,
|
||
dropdownRender,
|
||
animation,
|
||
transitionName,
|
||
getPopupContainer,
|
||
getTriggerDOMNode,
|
||
onPopupVisibleChange,
|
||
onPopupMouseEnter,
|
||
onPopupFocusin,
|
||
onPopupFocusout
|
||
} = restProps;
|
||
const dropdownPrefixCls = `${prefixCls}-dropdown`;
|
||
let popupNode = popupElement;
|
||
if (dropdownRender) {
|
||
popupNode = dropdownRender({
|
||
menuNode: popupElement,
|
||
props: props2
|
||
});
|
||
}
|
||
const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
|
||
const popupStyle = _extends({
|
||
minWidth: `${containerWidth}px`
|
||
}, dropdownStyle);
|
||
if (typeof dropdownMatchSelectWidth === "number") {
|
||
popupStyle.width = `${dropdownMatchSelectWidth}px`;
|
||
} else if (dropdownMatchSelectWidth) {
|
||
popupStyle.width = `${containerWidth}px`;
|
||
}
|
||
return createVNode(Trigger, _objectSpread$1(_objectSpread$1({}, props2), {}, {
|
||
"showAction": onPopupVisibleChange ? ["click"] : [],
|
||
"hideAction": onPopupVisibleChange ? ["click"] : [],
|
||
"popupPlacement": placement || (direction === "rtl" ? "bottomRight" : "bottomLeft"),
|
||
"builtinPlacements": builtInPlacements.value,
|
||
"prefixCls": dropdownPrefixCls,
|
||
"popupTransitionName": mergedTransitionName,
|
||
"popupAlign": dropdownAlign,
|
||
"popupVisible": visible,
|
||
"getPopupContainer": getPopupContainer,
|
||
"popupClassName": classNames(dropdownClassName, {
|
||
[`${dropdownPrefixCls}-empty`]: empty
|
||
}),
|
||
"popupStyle": popupStyle,
|
||
"getTriggerDOMNode": getTriggerDOMNode,
|
||
"onPopupVisibleChange": onPopupVisibleChange
|
||
}), {
|
||
default: slots.default,
|
||
popup: () => createVNode("div", {
|
||
"ref": popupRef,
|
||
"onMouseenter": onPopupMouseEnter,
|
||
"onFocusin": onPopupFocusin,
|
||
"onFocusout": onPopupFocusout
|
||
}, [popupNode])
|
||
});
|
||
};
|
||
}
|
||
});
|
||
const TransBtn = (props2, _ref) => {
|
||
let {
|
||
slots
|
||
} = _ref;
|
||
var _a;
|
||
const {
|
||
class: className,
|
||
customizeIcon,
|
||
customizeIconProps,
|
||
onMousedown,
|
||
onClick
|
||
} = props2;
|
||
let icon;
|
||
if (typeof customizeIcon === "function") {
|
||
icon = customizeIcon(customizeIconProps);
|
||
} else {
|
||
icon = isVNode(customizeIcon) ? cloneVNode(customizeIcon) : customizeIcon;
|
||
}
|
||
return createVNode("span", {
|
||
"class": className,
|
||
"onMousedown": (event) => {
|
||
event.preventDefault();
|
||
if (onMousedown) {
|
||
onMousedown(event);
|
||
}
|
||
},
|
||
"style": {
|
||
userSelect: "none",
|
||
WebkitUserSelect: "none"
|
||
},
|
||
"unselectable": "on",
|
||
"onClick": onClick,
|
||
"aria-hidden": true
|
||
}, [icon !== void 0 ? icon : createVNode("span", {
|
||
"class": className.split(/\s+/).map((cls) => `${cls}-icon`)
|
||
}, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])]);
|
||
};
|
||
TransBtn.inheritAttrs = false;
|
||
TransBtn.displayName = "TransBtn";
|
||
TransBtn.props = {
|
||
class: String,
|
||
customizeIcon: PropTypes.any,
|
||
customizeIconProps: PropTypes.any,
|
||
onMousedown: Function,
|
||
onClick: Function
|
||
};
|
||
const inputProps = {
|
||
inputRef: PropTypes.any,
|
||
prefixCls: String,
|
||
id: String,
|
||
inputElement: PropTypes.VueNode,
|
||
disabled: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
autofocus: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
autocomplete: String,
|
||
editable: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
activeDescendantId: String,
|
||
value: String,
|
||
open: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
/** Pass accessibility props to input */
|
||
attrs: PropTypes.object,
|
||
onKeydown: {
|
||
type: Function
|
||
},
|
||
onMousedown: {
|
||
type: Function
|
||
},
|
||
onChange: {
|
||
type: Function
|
||
},
|
||
onPaste: {
|
||
type: Function
|
||
},
|
||
onCompositionstart: {
|
||
type: Function
|
||
},
|
||
onCompositionend: {
|
||
type: Function
|
||
},
|
||
onFocus: {
|
||
type: Function
|
||
},
|
||
onBlur: {
|
||
type: Function
|
||
}
|
||
};
|
||
const Input = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "SelectInput",
|
||
inheritAttrs: false,
|
||
props: inputProps,
|
||
setup(props2) {
|
||
let blurTimeout = null;
|
||
const VCSelectContainerEvent = inject("VCSelectContainerEvent");
|
||
return () => {
|
||
var _a;
|
||
const {
|
||
prefixCls,
|
||
id,
|
||
inputElement,
|
||
disabled,
|
||
tabindex,
|
||
autofocus,
|
||
autocomplete,
|
||
editable,
|
||
activeDescendantId,
|
||
value,
|
||
onKeydown,
|
||
onMousedown,
|
||
onChange,
|
||
onPaste,
|
||
onCompositionstart,
|
||
onCompositionend,
|
||
onFocus,
|
||
onBlur,
|
||
open: open2,
|
||
inputRef,
|
||
attrs
|
||
} = props2;
|
||
let inputNode = inputElement || createVNode(BaseInput, null, null);
|
||
const inputProps2 = inputNode.props || {};
|
||
const {
|
||
onKeydown: onOriginKeyDown,
|
||
onInput: onOriginInput,
|
||
onFocus: onOriginFocus,
|
||
onBlur: onOriginBlur,
|
||
onMousedown: onOriginMouseDown,
|
||
onCompositionstart: onOriginCompositionStart,
|
||
onCompositionend: onOriginCompositionEnd,
|
||
style
|
||
} = inputProps2;
|
||
inputNode = cloneElement(inputNode, _extends(_extends(_extends(_extends(_extends({
|
||
type: "search"
|
||
}, inputProps2), {
|
||
id,
|
||
ref: inputRef,
|
||
disabled,
|
||
tabindex,
|
||
lazy: false,
|
||
autocomplete: autocomplete || "off",
|
||
autofocus,
|
||
class: classNames(`${prefixCls}-selection-search-input`, (_a = inputNode === null || inputNode === void 0 ? void 0 : inputNode.props) === null || _a === void 0 ? void 0 : _a.class),
|
||
role: "combobox",
|
||
"aria-expanded": open2,
|
||
"aria-haspopup": "listbox",
|
||
"aria-owns": `${id}_list`,
|
||
"aria-autocomplete": "list",
|
||
"aria-controls": `${id}_list`,
|
||
"aria-activedescendant": activeDescendantId
|
||
}), attrs), {
|
||
value: editable ? value : "",
|
||
readonly: !editable,
|
||
unselectable: !editable ? "on" : null,
|
||
style: _extends(_extends({}, style), {
|
||
opacity: editable ? null : 0
|
||
}),
|
||
onKeydown: (event) => {
|
||
onKeydown(event);
|
||
if (onOriginKeyDown) {
|
||
onOriginKeyDown(event);
|
||
}
|
||
},
|
||
onMousedown: (event) => {
|
||
onMousedown(event);
|
||
if (onOriginMouseDown) {
|
||
onOriginMouseDown(event);
|
||
}
|
||
},
|
||
onInput: (event) => {
|
||
onChange(event);
|
||
if (onOriginInput) {
|
||
onOriginInput(event);
|
||
}
|
||
},
|
||
onCompositionstart(event) {
|
||
onCompositionstart(event);
|
||
if (onOriginCompositionStart) {
|
||
onOriginCompositionStart(event);
|
||
}
|
||
},
|
||
onCompositionend(event) {
|
||
onCompositionend(event);
|
||
if (onOriginCompositionEnd) {
|
||
onOriginCompositionEnd(event);
|
||
}
|
||
},
|
||
onPaste,
|
||
onFocus: function() {
|
||
clearTimeout(blurTimeout);
|
||
onOriginFocus && onOriginFocus(arguments.length <= 0 ? void 0 : arguments[0]);
|
||
onFocus && onFocus(arguments.length <= 0 ? void 0 : arguments[0]);
|
||
VCSelectContainerEvent === null || VCSelectContainerEvent === void 0 ? void 0 : VCSelectContainerEvent.focus(arguments.length <= 0 ? void 0 : arguments[0]);
|
||
},
|
||
onBlur: function() {
|
||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
args[_key] = arguments[_key];
|
||
}
|
||
blurTimeout = setTimeout(() => {
|
||
onOriginBlur && onOriginBlur(args[0]);
|
||
onBlur && onBlur(args[0]);
|
||
VCSelectContainerEvent === null || VCSelectContainerEvent === void 0 ? void 0 : VCSelectContainerEvent.blur(args[0]);
|
||
}, 100);
|
||
}
|
||
}), inputNode.type === "textarea" ? {} : {
|
||
type: "search"
|
||
}), true, true);
|
||
return inputNode;
|
||
};
|
||
}
|
||
});
|
||
const TreeSelectLegacyContextPropsKey = Symbol("TreeSelectLegacyContextPropsKey");
|
||
function useInjectLegacySelectContext() {
|
||
return inject(TreeSelectLegacyContextPropsKey, {});
|
||
}
|
||
const props$1 = {
|
||
id: String,
|
||
prefixCls: String,
|
||
values: PropTypes.array,
|
||
open: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
searchValue: String,
|
||
inputRef: PropTypes.any,
|
||
placeholder: PropTypes.any,
|
||
disabled: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
mode: String,
|
||
showSearch: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
autofocus: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
autocomplete: String,
|
||
activeDescendantId: String,
|
||
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
compositionStatus: Boolean,
|
||
removeIcon: PropTypes.any,
|
||
choiceTransitionName: String,
|
||
maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
maxTagTextLength: Number,
|
||
maxTagPlaceholder: PropTypes.any.def(() => (omittedValues) => `+ ${omittedValues.length} ...`),
|
||
tagRender: Function,
|
||
onToggleOpen: {
|
||
type: Function
|
||
},
|
||
onRemove: Function,
|
||
onInputChange: Function,
|
||
onInputPaste: Function,
|
||
onInputKeyDown: Function,
|
||
onInputMouseDown: Function,
|
||
onInputCompositionStart: Function,
|
||
onInputCompositionEnd: Function
|
||
};
|
||
const onPreventMouseDown = (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
};
|
||
const SelectSelector = defineComponent({
|
||
name: "MultipleSelectSelector",
|
||
inheritAttrs: false,
|
||
props: props$1,
|
||
setup(props2) {
|
||
const measureRef = shallowRef();
|
||
const inputWidth = shallowRef(0);
|
||
const focused = shallowRef(false);
|
||
const legacyTreeSelectContext = useInjectLegacySelectContext();
|
||
const selectionPrefixCls = computed(() => `${props2.prefixCls}-selection`);
|
||
const inputValue = computed(() => props2.open || props2.mode === "tags" ? props2.searchValue : "");
|
||
const inputEditable = computed(() => props2.mode === "tags" || props2.showSearch && (props2.open || focused.value));
|
||
const targetValue = ref("");
|
||
watchEffect(() => {
|
||
targetValue.value = inputValue.value;
|
||
});
|
||
function defaultRenderSelector(title, content, itemDisabled, closable, onClose) {
|
||
return createVNode("span", {
|
||
"class": classNames(`${selectionPrefixCls.value}-item`, {
|
||
[`${selectionPrefixCls.value}-item-disabled`]: itemDisabled
|
||
}),
|
||
"title": typeof title === "string" || typeof title === "number" ? title.toString() : void 0
|
||
}, [createVNode("span", {
|
||
"class": `${selectionPrefixCls.value}-item-content`
|
||
}, [content]), closable && createVNode(TransBtn, {
|
||
"class": `${selectionPrefixCls.value}-item-remove`,
|
||
"onMousedown": onPreventMouseDown,
|
||
"onClick": onClose,
|
||
"customizeIcon": props2.removeIcon
|
||
}, {
|
||
default: () => [createTextVNode("×")]
|
||
})]);
|
||
}
|
||
function customizeRenderSelector(value, content, itemDisabled, closable, onClose, option) {
|
||
var _a;
|
||
const onMouseDown = (e) => {
|
||
onPreventMouseDown(e);
|
||
props2.onToggleOpen(!open);
|
||
};
|
||
let originData = option;
|
||
if (legacyTreeSelectContext.keyEntities) {
|
||
originData = ((_a = legacyTreeSelectContext.keyEntities[value]) === null || _a === void 0 ? void 0 : _a.node) || {};
|
||
}
|
||
return createVNode("span", {
|
||
"key": value,
|
||
"onMousedown": onMouseDown
|
||
}, [props2.tagRender({
|
||
label: content,
|
||
value,
|
||
disabled: itemDisabled,
|
||
closable,
|
||
onClose,
|
||
option: originData
|
||
})]);
|
||
}
|
||
function renderItem(valueItem) {
|
||
const {
|
||
disabled: itemDisabled,
|
||
label,
|
||
value,
|
||
option
|
||
} = valueItem;
|
||
const closable = !props2.disabled && !itemDisabled;
|
||
let displayLabel = label;
|
||
if (typeof props2.maxTagTextLength === "number") {
|
||
if (typeof label === "string" || typeof label === "number") {
|
||
const strLabel = String(displayLabel);
|
||
if (strLabel.length > props2.maxTagTextLength) {
|
||
displayLabel = `${strLabel.slice(0, props2.maxTagTextLength)}...`;
|
||
}
|
||
}
|
||
}
|
||
const onClose = (event) => {
|
||
var _a;
|
||
if (event) event.stopPropagation();
|
||
(_a = props2.onRemove) === null || _a === void 0 ? void 0 : _a.call(props2, valueItem);
|
||
};
|
||
return typeof props2.tagRender === "function" ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose, option) : defaultRenderSelector(label, displayLabel, itemDisabled, closable, onClose);
|
||
}
|
||
function renderRest(omittedValues) {
|
||
const {
|
||
maxTagPlaceholder = (omittedValues2) => `+ ${omittedValues2.length} ...`
|
||
} = props2;
|
||
const content = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
|
||
return defaultRenderSelector(content, content, false);
|
||
}
|
||
const handleInput = (e) => {
|
||
const composing = e.target.composing;
|
||
targetValue.value = e.target.value;
|
||
if (!composing) {
|
||
props2.onInputChange(e);
|
||
}
|
||
};
|
||
return () => {
|
||
const {
|
||
id,
|
||
prefixCls,
|
||
values,
|
||
open: open2,
|
||
inputRef,
|
||
placeholder,
|
||
disabled,
|
||
autofocus,
|
||
autocomplete,
|
||
activeDescendantId,
|
||
tabindex,
|
||
compositionStatus,
|
||
onInputPaste,
|
||
onInputKeyDown,
|
||
onInputMouseDown,
|
||
onInputCompositionStart,
|
||
onInputCompositionEnd
|
||
} = props2;
|
||
const inputNode = createVNode("div", {
|
||
"class": `${selectionPrefixCls.value}-search`,
|
||
"style": {
|
||
width: inputWidth.value + "px"
|
||
},
|
||
"key": "input"
|
||
}, [createVNode(Input, {
|
||
"inputRef": inputRef,
|
||
"open": open2,
|
||
"prefixCls": prefixCls,
|
||
"id": id,
|
||
"inputElement": null,
|
||
"disabled": disabled,
|
||
"autofocus": autofocus,
|
||
"autocomplete": autocomplete,
|
||
"editable": inputEditable.value,
|
||
"activeDescendantId": activeDescendantId,
|
||
"value": targetValue.value,
|
||
"onKeydown": onInputKeyDown,
|
||
"onMousedown": onInputMouseDown,
|
||
"onChange": handleInput,
|
||
"onPaste": onInputPaste,
|
||
"onCompositionstart": onInputCompositionStart,
|
||
"onCompositionend": onInputCompositionEnd,
|
||
"tabindex": tabindex,
|
||
"attrs": pickAttrs(props2, true),
|
||
"onFocus": () => focused.value = true,
|
||
"onBlur": () => focused.value = false
|
||
}, null), createVNode("span", {
|
||
"ref": measureRef,
|
||
"class": `${selectionPrefixCls.value}-search-mirror`,
|
||
"aria-hidden": true
|
||
}, [targetValue.value, createTextVNode(" ")])]);
|
||
const selectionNode = createVNode(Overflow, {
|
||
"prefixCls": `${selectionPrefixCls.value}-overflow`,
|
||
"data": values,
|
||
"renderItem": renderItem,
|
||
"renderRest": renderRest,
|
||
"suffix": inputNode,
|
||
"itemKey": "key",
|
||
"maxCount": props2.maxTagCount,
|
||
"key": "overflow"
|
||
}, null);
|
||
return createVNode(Fragment, null, [selectionNode, !values.length && !inputValue.value && !compositionStatus && createVNode("span", {
|
||
"class": `${selectionPrefixCls.value}-placeholder`
|
||
}, [placeholder])]);
|
||
};
|
||
}
|
||
});
|
||
const props = {
|
||
inputElement: PropTypes.any,
|
||
id: String,
|
||
prefixCls: String,
|
||
values: PropTypes.array,
|
||
open: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
searchValue: String,
|
||
inputRef: PropTypes.any,
|
||
placeholder: PropTypes.any,
|
||
compositionStatus: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
mode: String,
|
||
showSearch: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
autofocus: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
autocomplete: String,
|
||
activeDescendantId: String,
|
||
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
activeValue: String,
|
||
backfill: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
optionLabelRender: Function,
|
||
onInputChange: Function,
|
||
onInputPaste: Function,
|
||
onInputKeyDown: Function,
|
||
onInputMouseDown: Function,
|
||
onInputCompositionStart: Function,
|
||
onInputCompositionEnd: Function
|
||
};
|
||
const SingleSelector = defineComponent({
|
||
name: "SingleSelector",
|
||
setup(props2) {
|
||
const inputChanged = shallowRef(false);
|
||
const combobox = computed(() => props2.mode === "combobox");
|
||
const inputEditable = computed(() => combobox.value || props2.showSearch);
|
||
const inputValue = computed(() => {
|
||
let inputValue2 = props2.searchValue || "";
|
||
if (combobox.value && props2.activeValue && !inputChanged.value) {
|
||
inputValue2 = props2.activeValue;
|
||
}
|
||
return inputValue2;
|
||
});
|
||
const legacyTreeSelectContext = useInjectLegacySelectContext();
|
||
watch([combobox, () => props2.activeValue], () => {
|
||
if (combobox.value) {
|
||
inputChanged.value = false;
|
||
}
|
||
}, {
|
||
immediate: true
|
||
});
|
||
const hasTextInput = computed(() => props2.mode !== "combobox" && !props2.open && !props2.showSearch ? false : !!inputValue.value || props2.compositionStatus);
|
||
const title = computed(() => {
|
||
const item = props2.values[0];
|
||
return item && (typeof item.label === "string" || typeof item.label === "number") ? item.label.toString() : void 0;
|
||
});
|
||
const renderPlaceholder = () => {
|
||
if (props2.values[0]) {
|
||
return null;
|
||
}
|
||
const hiddenStyle = hasTextInput.value ? {
|
||
visibility: "hidden"
|
||
} : void 0;
|
||
return createVNode("span", {
|
||
"class": `${props2.prefixCls}-selection-placeholder`,
|
||
"style": hiddenStyle
|
||
}, [props2.placeholder]);
|
||
};
|
||
const handleInput = (e) => {
|
||
const composing = e.target.composing;
|
||
if (!composing) {
|
||
inputChanged.value = true;
|
||
props2.onInputChange(e);
|
||
}
|
||
};
|
||
return () => {
|
||
var _a, _b, _c, _d;
|
||
const {
|
||
inputElement,
|
||
prefixCls,
|
||
id,
|
||
values,
|
||
inputRef,
|
||
disabled,
|
||
autofocus,
|
||
autocomplete,
|
||
activeDescendantId,
|
||
open: open2,
|
||
tabindex,
|
||
optionLabelRender,
|
||
onInputKeyDown,
|
||
onInputMouseDown,
|
||
onInputPaste,
|
||
onInputCompositionStart,
|
||
onInputCompositionEnd
|
||
} = props2;
|
||
const item = values[0];
|
||
let titleNode = null;
|
||
if (item && legacyTreeSelectContext.customSlots) {
|
||
const key = (_a = item.key) !== null && _a !== void 0 ? _a : item.value;
|
||
const originData = ((_b = legacyTreeSelectContext.keyEntities[key]) === null || _b === void 0 ? void 0 : _b.node) || {};
|
||
titleNode = legacyTreeSelectContext.customSlots[(_c = originData.slots) === null || _c === void 0 ? void 0 : _c.title] || legacyTreeSelectContext.customSlots.title || item.label;
|
||
if (typeof titleNode === "function") {
|
||
titleNode = titleNode(originData);
|
||
}
|
||
} else {
|
||
titleNode = optionLabelRender && item ? optionLabelRender(item.option) : item === null || item === void 0 ? void 0 : item.label;
|
||
}
|
||
return createVNode(Fragment, null, [createVNode("span", {
|
||
"class": `${prefixCls}-selection-search`
|
||
}, [createVNode(Input, {
|
||
"inputRef": inputRef,
|
||
"prefixCls": prefixCls,
|
||
"id": id,
|
||
"open": open2,
|
||
"inputElement": inputElement,
|
||
"disabled": disabled,
|
||
"autofocus": autofocus,
|
||
"autocomplete": autocomplete,
|
||
"editable": inputEditable.value,
|
||
"activeDescendantId": activeDescendantId,
|
||
"value": inputValue.value,
|
||
"onKeydown": onInputKeyDown,
|
||
"onMousedown": onInputMouseDown,
|
||
"onChange": handleInput,
|
||
"onPaste": onInputPaste,
|
||
"onCompositionstart": onInputCompositionStart,
|
||
"onCompositionend": onInputCompositionEnd,
|
||
"tabindex": tabindex,
|
||
"attrs": pickAttrs(props2, true)
|
||
}, null)]), !combobox.value && item && !hasTextInput.value && createVNode("span", {
|
||
"class": `${prefixCls}-selection-item`,
|
||
"title": title.value
|
||
}, [createVNode(Fragment, {
|
||
"key": (_d = item.key) !== null && _d !== void 0 ? _d : item.value
|
||
}, [titleNode])]), renderPlaceholder()]);
|
||
};
|
||
}
|
||
});
|
||
SingleSelector.props = props;
|
||
SingleSelector.inheritAttrs = false;
|
||
function isValidateOpenKey(currentKeyCode) {
|
||
return ![
|
||
// System function button
|
||
KeyCode.ESC,
|
||
KeyCode.SHIFT,
|
||
KeyCode.BACKSPACE,
|
||
KeyCode.TAB,
|
||
KeyCode.WIN_KEY,
|
||
KeyCode.ALT,
|
||
KeyCode.META,
|
||
KeyCode.WIN_KEY_RIGHT,
|
||
KeyCode.CTRL,
|
||
KeyCode.SEMICOLON,
|
||
KeyCode.EQUALS,
|
||
KeyCode.CAPS_LOCK,
|
||
KeyCode.CONTEXT_MENU,
|
||
// F1-F12
|
||
KeyCode.F1,
|
||
KeyCode.F2,
|
||
KeyCode.F3,
|
||
KeyCode.F4,
|
||
KeyCode.F5,
|
||
KeyCode.F6,
|
||
KeyCode.F7,
|
||
KeyCode.F8,
|
||
KeyCode.F9,
|
||
KeyCode.F10,
|
||
KeyCode.F11,
|
||
KeyCode.F12
|
||
].includes(currentKeyCode);
|
||
}
|
||
function useLock() {
|
||
let duration = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 250;
|
||
let lock = null;
|
||
let timeout;
|
||
function doLock(locked) {
|
||
if (locked || lock === null) {
|
||
lock = locked;
|
||
}
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(() => {
|
||
lock = null;
|
||
}, duration);
|
||
}
|
||
return [() => lock, doLock];
|
||
}
|
||
function createRef() {
|
||
const func = (node) => {
|
||
func.current = node;
|
||
};
|
||
return func;
|
||
}
|
||
const Selector = defineComponent({
|
||
name: "Selector",
|
||
inheritAttrs: false,
|
||
props: {
|
||
id: String,
|
||
prefixCls: String,
|
||
showSearch: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
open: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
/** Display in the Selector value, it's not same as `value` prop */
|
||
values: PropTypes.array,
|
||
multiple: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
mode: String,
|
||
searchValue: String,
|
||
activeValue: String,
|
||
inputElement: PropTypes.any,
|
||
autofocus: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
activeDescendantId: String,
|
||
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
disabled: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
placeholder: PropTypes.any,
|
||
removeIcon: PropTypes.any,
|
||
// Tags
|
||
maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||
maxTagTextLength: Number,
|
||
maxTagPlaceholder: PropTypes.any,
|
||
tagRender: Function,
|
||
optionLabelRender: Function,
|
||
/** Check if `tokenSeparators` contains `\n` or `\r\n` */
|
||
tokenWithEnter: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
// Motion
|
||
choiceTransitionName: String,
|
||
onToggleOpen: {
|
||
type: Function
|
||
},
|
||
/** `onSearch` returns go next step boolean to check if need do toggle open */
|
||
onSearch: Function,
|
||
onSearchSubmit: Function,
|
||
onRemove: Function,
|
||
onInputKeyDown: {
|
||
type: Function
|
||
},
|
||
/**
|
||
* @private get real dom for trigger align.
|
||
* This may be removed after React provides replacement of `findDOMNode`
|
||
*/
|
||
domRef: Function
|
||
},
|
||
setup(props2, _ref) {
|
||
let {
|
||
expose
|
||
} = _ref;
|
||
const inputRef = createRef();
|
||
const compositionStatus = ref(false);
|
||
const [getInputMouseDown, setInputMouseDown] = useLock(0);
|
||
const onInternalInputKeyDown = (event) => {
|
||
const {
|
||
which
|
||
} = event;
|
||
if (which === KeyCode.UP || which === KeyCode.DOWN) {
|
||
event.preventDefault();
|
||
}
|
||
if (props2.onInputKeyDown) {
|
||
props2.onInputKeyDown(event);
|
||
}
|
||
if (which === KeyCode.ENTER && props2.mode === "tags" && !compositionStatus.value && !props2.open) {
|
||
props2.onSearchSubmit(event.target.value);
|
||
}
|
||
if (isValidateOpenKey(which)) {
|
||
props2.onToggleOpen(true);
|
||
}
|
||
};
|
||
const onInternalInputMouseDown = () => {
|
||
setInputMouseDown(true);
|
||
};
|
||
let pastedText = null;
|
||
const triggerOnSearch = (value) => {
|
||
if (props2.onSearch(value, true, compositionStatus.value) !== false) {
|
||
props2.onToggleOpen(true);
|
||
}
|
||
};
|
||
const onInputCompositionStart = () => {
|
||
compositionStatus.value = true;
|
||
};
|
||
const onInputCompositionEnd = (e) => {
|
||
compositionStatus.value = false;
|
||
if (props2.mode !== "combobox") {
|
||
triggerOnSearch(e.target.value);
|
||
}
|
||
};
|
||
const onInputChange = (event) => {
|
||
let {
|
||
target: {
|
||
value
|
||
}
|
||
} = event;
|
||
if (props2.tokenWithEnter && pastedText && /[\r\n]/.test(pastedText)) {
|
||
const replacedText = pastedText.replace(/[\r\n]+$/, "").replace(/\r\n/g, " ").replace(/[\r\n]/g, " ");
|
||
value = value.replace(replacedText, pastedText);
|
||
}
|
||
pastedText = null;
|
||
triggerOnSearch(value);
|
||
};
|
||
const onInputPaste = (e) => {
|
||
const {
|
||
clipboardData
|
||
} = e;
|
||
const value = clipboardData.getData("text");
|
||
pastedText = value;
|
||
};
|
||
const onClick = (_ref2) => {
|
||
let {
|
||
target
|
||
} = _ref2;
|
||
if (target !== inputRef.current) {
|
||
const isIE = (void 0).body.style.msTouchAction !== void 0;
|
||
if (isIE) {
|
||
setTimeout(() => {
|
||
inputRef.current.focus();
|
||
});
|
||
} else {
|
||
inputRef.current.focus();
|
||
}
|
||
}
|
||
};
|
||
const onMousedown = (event) => {
|
||
const inputMouseDown = getInputMouseDown();
|
||
if (event.target !== inputRef.current && !inputMouseDown) {
|
||
event.preventDefault();
|
||
}
|
||
if (props2.mode !== "combobox" && (!props2.showSearch || !inputMouseDown) || !props2.open) {
|
||
if (props2.open) {
|
||
props2.onSearch("", true, false);
|
||
}
|
||
props2.onToggleOpen();
|
||
}
|
||
};
|
||
expose({
|
||
focus: () => {
|
||
inputRef.current.focus();
|
||
},
|
||
blur: () => {
|
||
inputRef.current.blur();
|
||
}
|
||
});
|
||
return () => {
|
||
const {
|
||
prefixCls,
|
||
domRef,
|
||
mode
|
||
} = props2;
|
||
const sharedProps = {
|
||
inputRef,
|
||
onInputKeyDown: onInternalInputKeyDown,
|
||
onInputMouseDown: onInternalInputMouseDown,
|
||
onInputChange,
|
||
onInputPaste,
|
||
compositionStatus: compositionStatus.value,
|
||
onInputCompositionStart,
|
||
onInputCompositionEnd
|
||
};
|
||
const selectNode = mode === "multiple" || mode === "tags" ? createVNode(SelectSelector, _objectSpread$1(_objectSpread$1({}, props2), sharedProps), null) : createVNode(SingleSelector, _objectSpread$1(_objectSpread$1({}, props2), sharedProps), null);
|
||
return createVNode("div", {
|
||
"ref": domRef,
|
||
"class": `${prefixCls}-selector`,
|
||
"onClick": onClick,
|
||
"onMousedown": onMousedown
|
||
}, [selectNode]);
|
||
};
|
||
}
|
||
});
|
||
function useDelayReset() {
|
||
let timeout = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 10;
|
||
const bool = shallowRef(false);
|
||
let delay;
|
||
const cancelLatest = () => {
|
||
clearTimeout(delay);
|
||
};
|
||
const delaySetBool = (value, callback) => {
|
||
cancelLatest();
|
||
delay = setTimeout(() => {
|
||
bool.value = value;
|
||
if (callback) {
|
||
callback();
|
||
}
|
||
}, timeout);
|
||
};
|
||
return [bool, delaySetBool, cancelLatest];
|
||
}
|
||
const BaseSelectContextKey = Symbol("BaseSelectContextKey");
|
||
function useProvideBaseSelectProps(props2) {
|
||
return provide(BaseSelectContextKey, props2);
|
||
}
|
||
function useBaseProps() {
|
||
return inject(BaseSelectContextKey, {});
|
||
}
|
||
function toReactive(objectRef) {
|
||
if (!isRef(objectRef)) return reactive(objectRef);
|
||
const proxy = new Proxy({}, {
|
||
get(_, p, receiver) {
|
||
return Reflect.get(objectRef.value, p, receiver);
|
||
},
|
||
set(_, p, value) {
|
||
objectRef.value[p] = value;
|
||
return true;
|
||
},
|
||
deleteProperty(_, p) {
|
||
return Reflect.deleteProperty(objectRef.value, p);
|
||
},
|
||
has(_, p) {
|
||
return Reflect.has(objectRef.value, p);
|
||
},
|
||
ownKeys() {
|
||
return Object.keys(objectRef.value);
|
||
},
|
||
getOwnPropertyDescriptor() {
|
||
return {
|
||
enumerable: true,
|
||
configurable: true
|
||
};
|
||
}
|
||
});
|
||
return reactive(proxy);
|
||
}
|
||
var __rest$3 = function(s, e) {
|
||
var t = {};
|
||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||
}
|
||
return t;
|
||
};
|
||
const DEFAULT_OMIT_PROPS = ["value", "onChange", "removeIcon", "placeholder", "autofocus", "maxTagCount", "maxTagTextLength", "maxTagPlaceholder", "choiceTransitionName", "onInputKeyDown", "onPopupScroll", "tabindex", "OptionList", "notFoundContent"];
|
||
const baseSelectPrivateProps = () => {
|
||
return {
|
||
prefixCls: String,
|
||
id: String,
|
||
omitDomProps: Array,
|
||
// >>> Value
|
||
displayValues: Array,
|
||
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: PropTypes.any,
|
||
/** Tell if provided `options` is empty */
|
||
emptyOptions: Boolean
|
||
};
|
||
};
|
||
const baseSelectPropsWithoutPrivate = () => {
|
||
return {
|
||
showSearch: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
tagRender: {
|
||
type: Function
|
||
},
|
||
optionLabelRender: {
|
||
type: Function
|
||
},
|
||
direction: {
|
||
type: String
|
||
},
|
||
// MISC
|
||
tabindex: Number,
|
||
autofocus: Boolean,
|
||
notFoundContent: PropTypes.any,
|
||
placeholder: PropTypes.any,
|
||
onClear: Function,
|
||
choiceTransitionName: String,
|
||
// >>> Mode
|
||
mode: String,
|
||
// >>> Status
|
||
disabled: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
// >>> Open
|
||
open: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
defaultOpen: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
onDropdownVisibleChange: {
|
||
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: PropTypes.any,
|
||
// >>> Search
|
||
tokenSeparators: {
|
||
type: Array
|
||
},
|
||
// >>> Icons
|
||
allowClear: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
showArrow: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
inputIcon: PropTypes.any,
|
||
/** Clear all icon */
|
||
clearIcon: PropTypes.any,
|
||
/** Selector remove icon */
|
||
removeIcon: PropTypes.any,
|
||
// >>> Dropdown
|
||
animation: String,
|
||
transitionName: String,
|
||
dropdownStyle: {
|
||
type: Object
|
||
},
|
||
dropdownClassName: String,
|
||
dropdownMatchSelectWidth: {
|
||
type: [Boolean, Number],
|
||
default: void 0
|
||
},
|
||
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
|
||
};
|
||
};
|
||
const baseSelectProps = () => {
|
||
return _extends(_extends({}, baseSelectPrivateProps()), baseSelectPropsWithoutPrivate());
|
||
};
|
||
function isMultiple(mode) {
|
||
return mode === "tags" || mode === "multiple";
|
||
}
|
||
const BaseSelect = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "BaseSelect",
|
||
inheritAttrs: false,
|
||
props: initDefaultProps(baseSelectProps(), {
|
||
showAction: [],
|
||
notFoundContent: "Not Found"
|
||
}),
|
||
setup(props2, _ref) {
|
||
let {
|
||
attrs,
|
||
expose,
|
||
slots
|
||
} = _ref;
|
||
const multiple = computed(() => isMultiple(props2.mode));
|
||
const mergedShowSearch = computed(() => props2.showSearch !== void 0 ? props2.showSearch : multiple.value || props2.mode === "combobox");
|
||
const mobile = shallowRef(false);
|
||
const legacyTreeSelectContext = useInjectLegacySelectContext();
|
||
const containerRef = shallowRef(null);
|
||
const selectorDomRef = createRef();
|
||
const triggerRef = shallowRef(null);
|
||
const selectorRef = shallowRef(null);
|
||
const listRef = shallowRef(null);
|
||
const blurRef = ref(false);
|
||
const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
|
||
const focus = () => {
|
||
var _a;
|
||
(_a = selectorRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
||
};
|
||
const blur = () => {
|
||
var _a;
|
||
(_a = selectorRef.value) === null || _a === void 0 ? void 0 : _a.blur();
|
||
};
|
||
expose({
|
||
focus,
|
||
blur,
|
||
scrollTo: (arg) => {
|
||
var _a;
|
||
return (_a = listRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
|
||
}
|
||
});
|
||
const mergedSearchValue = computed(() => {
|
||
var _a;
|
||
if (props2.mode !== "combobox") {
|
||
return props2.searchValue;
|
||
}
|
||
const val = (_a = props2.displayValues[0]) === null || _a === void 0 ? void 0 : _a.value;
|
||
return typeof val === "string" || typeof val === "number" ? String(val) : "";
|
||
});
|
||
const initOpen = props2.open !== void 0 ? props2.open : props2.defaultOpen;
|
||
const innerOpen = shallowRef(initOpen);
|
||
const mergedOpen = shallowRef(initOpen);
|
||
const setInnerOpen = (val) => {
|
||
innerOpen.value = props2.open !== void 0 ? props2.open : val;
|
||
mergedOpen.value = innerOpen.value;
|
||
};
|
||
watch(() => props2.open, () => {
|
||
setInnerOpen(props2.open);
|
||
});
|
||
const emptyListContent = computed(() => !props2.notFoundContent && props2.emptyOptions);
|
||
watchEffect(() => {
|
||
mergedOpen.value = innerOpen.value;
|
||
if (props2.disabled || emptyListContent.value && mergedOpen.value && props2.mode === "combobox") {
|
||
mergedOpen.value = false;
|
||
}
|
||
});
|
||
const triggerOpen = computed(() => emptyListContent.value ? false : mergedOpen.value);
|
||
const onToggleOpen = (newOpen) => {
|
||
const nextOpen = newOpen !== void 0 ? newOpen : !mergedOpen.value;
|
||
if (mergedOpen.value !== nextOpen && !props2.disabled) {
|
||
setInnerOpen(nextOpen);
|
||
props2.onDropdownVisibleChange && props2.onDropdownVisibleChange(nextOpen);
|
||
if (!nextOpen && popupFocused.value) {
|
||
popupFocused.value = false;
|
||
setMockFocused(false, () => {
|
||
focusRef.value = false;
|
||
blurRef.value = false;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
const tokenWithEnter = computed(() => (props2.tokenSeparators || []).some((tokenSeparator) => ["\n", "\r\n"].includes(tokenSeparator)));
|
||
const onInternalSearch = (searchText, fromTyping, isCompositing) => {
|
||
var _a, _b;
|
||
let ret = true;
|
||
let newSearchText = searchText;
|
||
(_a = props2.onActiveValueChange) === null || _a === void 0 ? void 0 : _a.call(props2, null);
|
||
const patchLabels = isCompositing ? null : getSeparatedContent(searchText, props2.tokenSeparators);
|
||
if (props2.mode !== "combobox" && patchLabels) {
|
||
newSearchText = "";
|
||
(_b = props2.onSearchSplit) === null || _b === void 0 ? void 0 : _b.call(props2, patchLabels);
|
||
onToggleOpen(false);
|
||
ret = false;
|
||
}
|
||
if (props2.onSearch && mergedSearchValue.value !== newSearchText) {
|
||
props2.onSearch(newSearchText, {
|
||
source: fromTyping ? "typing" : "effect"
|
||
});
|
||
}
|
||
return ret;
|
||
};
|
||
const onInternalSearchSubmit = (searchText) => {
|
||
var _a;
|
||
if (!searchText || !searchText.trim()) {
|
||
return;
|
||
}
|
||
(_a = props2.onSearch) === null || _a === void 0 ? void 0 : _a.call(props2, searchText, {
|
||
source: "submit"
|
||
});
|
||
};
|
||
watch(mergedOpen, () => {
|
||
if (!mergedOpen.value && !multiple.value && props2.mode !== "combobox") {
|
||
onInternalSearch("", false, false);
|
||
}
|
||
}, {
|
||
immediate: true,
|
||
flush: "post"
|
||
});
|
||
watch(() => props2.disabled, () => {
|
||
if (innerOpen.value && !!props2.disabled) {
|
||
setInnerOpen(false);
|
||
}
|
||
if (props2.disabled && !blurRef.value) {
|
||
setMockFocused(false);
|
||
}
|
||
}, {
|
||
immediate: true
|
||
});
|
||
const [getClearLock, setClearLock] = useLock();
|
||
const onInternalKeyDown = function(event) {
|
||
var _a;
|
||
const clearLock = getClearLock();
|
||
const {
|
||
which
|
||
} = event;
|
||
if (which === KeyCode.ENTER) {
|
||
if (props2.mode !== "combobox") {
|
||
event.preventDefault();
|
||
}
|
||
if (!mergedOpen.value) {
|
||
onToggleOpen(true);
|
||
}
|
||
}
|
||
setClearLock(!!mergedSearchValue.value);
|
||
if (which === KeyCode.BACKSPACE && !clearLock && multiple.value && !mergedSearchValue.value && props2.displayValues.length) {
|
||
const cloneDisplayValues = [...props2.displayValues];
|
||
let removedDisplayValue = null;
|
||
for (let i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
|
||
const current = cloneDisplayValues[i];
|
||
if (!current.disabled) {
|
||
cloneDisplayValues.splice(i, 1);
|
||
removedDisplayValue = current;
|
||
break;
|
||
}
|
||
}
|
||
if (removedDisplayValue) {
|
||
props2.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) {
|
||
listRef.value.onKeydown(event, ...rest);
|
||
}
|
||
(_a = props2.onKeydown) === null || _a === void 0 ? void 0 : _a.call(props2, event, ...rest);
|
||
};
|
||
const onInternalKeyUp = function(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) {
|
||
listRef.value.onKeyup(event, ...rest);
|
||
}
|
||
if (props2.onKeyup) {
|
||
props2.onKeyup(event, ...rest);
|
||
}
|
||
};
|
||
const onSelectorRemove = (val) => {
|
||
const newValues = props2.displayValues.filter((i) => i !== val);
|
||
props2.onDisplayValuesChange(newValues, {
|
||
type: "remove",
|
||
values: [val]
|
||
});
|
||
};
|
||
const focusRef = shallowRef(false);
|
||
const onContainerFocus = function() {
|
||
setMockFocused(true);
|
||
if (!props2.disabled) {
|
||
if (props2.onFocus && !focusRef.value) {
|
||
props2.onFocus(...arguments);
|
||
}
|
||
if (props2.showAction && props2.showAction.includes("focus")) {
|
||
onToggleOpen(true);
|
||
}
|
||
}
|
||
focusRef.value = true;
|
||
};
|
||
const popupFocused = ref(false);
|
||
const onContainerBlur = function() {
|
||
if (popupFocused.value) {
|
||
return;
|
||
}
|
||
blurRef.value = true;
|
||
setMockFocused(false, () => {
|
||
focusRef.value = false;
|
||
blurRef.value = false;
|
||
onToggleOpen(false);
|
||
});
|
||
if (props2.disabled) {
|
||
return;
|
||
}
|
||
const searchVal = mergedSearchValue.value;
|
||
if (searchVal) {
|
||
if (props2.mode === "tags") {
|
||
props2.onSearch(searchVal, {
|
||
source: "submit"
|
||
});
|
||
} else if (props2.mode === "multiple") {
|
||
props2.onSearch("", {
|
||
source: "blur"
|
||
});
|
||
}
|
||
}
|
||
if (props2.onBlur) {
|
||
props2.onBlur(...arguments);
|
||
}
|
||
};
|
||
const onPopupFocusin = () => {
|
||
popupFocused.value = true;
|
||
};
|
||
const onPopupFocusout = () => {
|
||
popupFocused.value = false;
|
||
};
|
||
provide("VCSelectContainerEvent", {
|
||
focus: onContainerFocus,
|
||
blur: onContainerBlur
|
||
});
|
||
const onInternalMouseDown = function(event) {
|
||
var _a, _b;
|
||
const {
|
||
target
|
||
} = event;
|
||
const popupElement = (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.getPopupElement();
|
||
if (popupElement && popupElement.contains(target)) {
|
||
setTimeout(() => {
|
||
var _a2;
|
||
cancelSetMockFocused();
|
||
if (!mobile.value && !popupElement.contains((void 0).activeElement)) {
|
||
(_a2 = selectorRef.value) === null || _a2 === void 0 ? void 0 : _a2.focus();
|
||
}
|
||
});
|
||
}
|
||
for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
||
restArgs[_key3 - 1] = arguments[_key3];
|
||
}
|
||
(_b = props2.onMousedown) === null || _b === void 0 ? void 0 : _b.call(props2, event, ...restArgs);
|
||
};
|
||
const containerWidth = shallowRef(null);
|
||
const onPopupMouseEnter = () => {
|
||
};
|
||
useProvideBaseSelectProps(toReactive(_extends(_extends({}, toRefs(props2)), {
|
||
open: mergedOpen,
|
||
triggerOpen,
|
||
showSearch: mergedShowSearch,
|
||
multiple,
|
||
toggleOpen: onToggleOpen
|
||
})));
|
||
return () => {
|
||
const _a = _extends(_extends({}, props2), attrs), {
|
||
prefixCls,
|
||
id,
|
||
open: open2,
|
||
defaultOpen,
|
||
mode,
|
||
// Search related
|
||
showSearch,
|
||
searchValue,
|
||
onSearch,
|
||
// Icons
|
||
allowClear,
|
||
clearIcon,
|
||
showArrow,
|
||
inputIcon,
|
||
// Others
|
||
disabled,
|
||
loading,
|
||
getInputElement,
|
||
getPopupContainer,
|
||
placement,
|
||
// Dropdown
|
||
animation,
|
||
transitionName,
|
||
dropdownStyle,
|
||
dropdownClassName,
|
||
dropdownMatchSelectWidth,
|
||
dropdownRender,
|
||
dropdownAlign,
|
||
showAction,
|
||
direction,
|
||
// Tags
|
||
tokenSeparators,
|
||
tagRender,
|
||
optionLabelRender,
|
||
// Events
|
||
onPopupScroll,
|
||
onDropdownVisibleChange,
|
||
onFocus,
|
||
onBlur,
|
||
onKeyup,
|
||
onKeydown,
|
||
onMousedown,
|
||
onClear,
|
||
omitDomProps,
|
||
getRawInputElement,
|
||
displayValues,
|
||
onDisplayValuesChange,
|
||
emptyOptions,
|
||
activeDescendantId,
|
||
activeValue,
|
||
OptionList: OptionList2
|
||
} = _a, restProps = __rest$3(_a, ["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", "onFocus", "onBlur", "onKeyup", "onKeydown", "onMousedown", "onClear", "omitDomProps", "getRawInputElement", "displayValues", "onDisplayValuesChange", "emptyOptions", "activeDescendantId", "activeValue", "OptionList"]);
|
||
const customizeInputElement = mode === "combobox" && getInputElement && getInputElement() || null;
|
||
const customizeRawInputElement = typeof getRawInputElement === "function" && getRawInputElement();
|
||
const domProps = _extends({}, restProps);
|
||
let onTriggerVisibleChange;
|
||
if (customizeRawInputElement) {
|
||
onTriggerVisibleChange = (newOpen) => {
|
||
onToggleOpen(newOpen);
|
||
};
|
||
}
|
||
DEFAULT_OMIT_PROPS.forEach((propName) => {
|
||
delete domProps[propName];
|
||
});
|
||
omitDomProps === null || omitDomProps === void 0 ? void 0 : omitDomProps.forEach((propName) => {
|
||
delete domProps[propName];
|
||
});
|
||
const mergedShowArrow = showArrow !== void 0 ? showArrow : loading || !multiple.value && mode !== "combobox";
|
||
let arrowNode;
|
||
if (mergedShowArrow) {
|
||
arrowNode = createVNode(TransBtn, {
|
||
"class": classNames(`${prefixCls}-arrow`, {
|
||
[`${prefixCls}-arrow-loading`]: loading
|
||
}),
|
||
"customizeIcon": inputIcon,
|
||
"customizeIconProps": {
|
||
loading,
|
||
searchValue: mergedSearchValue.value,
|
||
open: mergedOpen.value,
|
||
focused: mockFocused.value,
|
||
showSearch: mergedShowSearch.value
|
||
}
|
||
}, null);
|
||
}
|
||
let clearNode;
|
||
const onClearMouseDown = () => {
|
||
onClear === null || onClear === void 0 ? void 0 : onClear();
|
||
onDisplayValuesChange([], {
|
||
type: "clear",
|
||
values: displayValues
|
||
});
|
||
onInternalSearch("", false, false);
|
||
};
|
||
if (!disabled && allowClear && (displayValues.length || mergedSearchValue.value)) {
|
||
clearNode = createVNode(TransBtn, {
|
||
"class": `${prefixCls}-clear`,
|
||
"onMousedown": onClearMouseDown,
|
||
"customizeIcon": clearIcon
|
||
}, {
|
||
default: () => [createTextVNode("×")]
|
||
});
|
||
}
|
||
const optionList = createVNode(OptionList2, {
|
||
"ref": listRef
|
||
}, _extends(_extends({}, legacyTreeSelectContext.customSlots), {
|
||
option: slots.option
|
||
}));
|
||
const mergedClassName = classNames(prefixCls, attrs.class, {
|
||
[`${prefixCls}-focused`]: mockFocused.value,
|
||
[`${prefixCls}-multiple`]: multiple.value,
|
||
[`${prefixCls}-single`]: !multiple.value,
|
||
[`${prefixCls}-allow-clear`]: allowClear,
|
||
[`${prefixCls}-show-arrow`]: mergedShowArrow,
|
||
[`${prefixCls}-disabled`]: disabled,
|
||
[`${prefixCls}-loading`]: loading,
|
||
[`${prefixCls}-open`]: mergedOpen.value,
|
||
[`${prefixCls}-customize-input`]: customizeInputElement,
|
||
[`${prefixCls}-show-search`]: mergedShowSearch.value
|
||
});
|
||
const selectorNode = createVNode(SelectTrigger, {
|
||
"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": () => selectorDomRef.current,
|
||
"onPopupVisibleChange": onTriggerVisibleChange,
|
||
"onPopupMouseEnter": onPopupMouseEnter,
|
||
"onPopupFocusin": onPopupFocusin,
|
||
"onPopupFocusout": onPopupFocusout
|
||
}, {
|
||
default: () => {
|
||
return customizeRawInputElement ? isValidElement(customizeRawInputElement) && cloneElement(customizeRawInputElement, {
|
||
ref: selectorDomRef
|
||
}, false, true) : createVNode(Selector, _objectSpread$1(_objectSpread$1({}, props2), {}, {
|
||
"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,
|
||
"onToggleOpen": onToggleOpen,
|
||
"activeValue": activeValue,
|
||
"searchValue": mergedSearchValue.value,
|
||
"onSearch": onInternalSearch,
|
||
"onSearchSubmit": onInternalSearchSubmit,
|
||
"onRemove": onSelectorRemove,
|
||
"tokenWithEnter": tokenWithEnter.value
|
||
}), null);
|
||
}
|
||
});
|
||
let renderNode;
|
||
if (customizeRawInputElement) {
|
||
renderNode = selectorNode;
|
||
} else {
|
||
renderNode = createVNode("div", _objectSpread$1(_objectSpread$1({}, domProps), {}, {
|
||
"class": mergedClassName,
|
||
"ref": containerRef,
|
||
"onMousedown": onInternalMouseDown,
|
||
"onKeydown": onInternalKeyDown,
|
||
"onKeyup": onInternalKeyUp
|
||
}), [mockFocused.value && !mergedOpen.value && createVNode("span", {
|
||
"style": {
|
||
width: 0,
|
||
height: 0,
|
||
position: "absolute",
|
||
overflow: "hidden",
|
||
opacity: 0
|
||
},
|
||
"aria-live": "polite"
|
||
}, [`${displayValues.map((_ref2) => {
|
||
let {
|
||
label,
|
||
value
|
||
} = _ref2;
|
||
return ["number", "string"].includes(typeof label) ? label : value;
|
||
}).join(", ")}`]), selectorNode, arrowNode, clearNode]);
|
||
}
|
||
return renderNode;
|
||
};
|
||
}
|
||
});
|
||
const Filter = (_ref, _ref2) => {
|
||
let {
|
||
height,
|
||
offset,
|
||
prefixCls,
|
||
onInnerResize
|
||
} = _ref;
|
||
let {
|
||
slots
|
||
} = _ref2;
|
||
var _a;
|
||
let outerStyle = {};
|
||
let innerStyle = {
|
||
display: "flex",
|
||
flexDirection: "column"
|
||
};
|
||
if (offset !== void 0) {
|
||
outerStyle = {
|
||
height: `${height}px`,
|
||
position: "relative",
|
||
overflow: "hidden"
|
||
};
|
||
innerStyle = _extends(_extends({}, innerStyle), {
|
||
transform: `translateY(${offset}px)`,
|
||
position: "absolute",
|
||
left: 0,
|
||
right: 0,
|
||
top: 0
|
||
});
|
||
}
|
||
return createVNode("div", {
|
||
"style": outerStyle
|
||
}, [createVNode(ResizeObserver, {
|
||
"onResize": (_ref3) => {
|
||
let {
|
||
offsetHeight
|
||
} = _ref3;
|
||
if (offsetHeight && onInnerResize) {
|
||
onInnerResize();
|
||
}
|
||
}
|
||
}, {
|
||
default: () => [createVNode("div", {
|
||
"style": innerStyle,
|
||
"class": classNames({
|
||
[`${prefixCls}-holder-inner`]: prefixCls
|
||
})
|
||
}, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])]
|
||
})]);
|
||
};
|
||
Filter.displayName = "Filter";
|
||
Filter.inheritAttrs = false;
|
||
Filter.props = {
|
||
prefixCls: String,
|
||
/** Virtual filler height. Should be `count * itemMinHeight` */
|
||
height: Number,
|
||
/** Set offset of visible items. Should be the top of start item position */
|
||
offset: Number,
|
||
onInnerResize: Function
|
||
};
|
||
const Item = (_ref, _ref2) => {
|
||
let {
|
||
setRef
|
||
} = _ref;
|
||
let {
|
||
slots
|
||
} = _ref2;
|
||
var _a;
|
||
const children = flattenChildren((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots));
|
||
return children && children.length ? cloneVNode(children[0], {
|
||
ref: setRef
|
||
}) : children;
|
||
};
|
||
Item.props = {
|
||
setRef: {
|
||
type: Function,
|
||
default: () => {
|
||
}
|
||
}
|
||
};
|
||
const MIN_SIZE = 20;
|
||
function getPageY(e) {
|
||
return "touches" in e ? e.touches[0].pageY : e.pageY;
|
||
}
|
||
const ScrollBar = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "ScrollBar",
|
||
inheritAttrs: false,
|
||
props: {
|
||
prefixCls: String,
|
||
scrollTop: Number,
|
||
scrollHeight: Number,
|
||
height: Number,
|
||
count: Number,
|
||
onScroll: {
|
||
type: Function
|
||
},
|
||
onStartMove: {
|
||
type: Function
|
||
},
|
||
onStopMove: {
|
||
type: Function
|
||
}
|
||
},
|
||
setup() {
|
||
return {
|
||
moveRaf: null,
|
||
scrollbarRef: createRef(),
|
||
thumbRef: createRef(),
|
||
visibleTimeout: null,
|
||
state: reactive({
|
||
dragging: false,
|
||
pageY: null,
|
||
startTop: null,
|
||
visible: false
|
||
})
|
||
};
|
||
},
|
||
watch: {
|
||
scrollTop: {
|
||
handler() {
|
||
this.delayHidden();
|
||
},
|
||
flush: "post"
|
||
}
|
||
},
|
||
mounted() {
|
||
var _a, _b;
|
||
(_a = this.scrollbarRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("touchstart", this.onScrollbarTouchStart, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
(_b = this.thumbRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("touchstart", this.onMouseDown, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
},
|
||
beforeUnmount() {
|
||
this.removeEvents();
|
||
clearTimeout(this.visibleTimeout);
|
||
},
|
||
methods: {
|
||
delayHidden() {
|
||
clearTimeout(this.visibleTimeout);
|
||
this.state.visible = true;
|
||
this.visibleTimeout = setTimeout(() => {
|
||
this.state.visible = false;
|
||
}, 2e3);
|
||
},
|
||
onScrollbarTouchStart(e) {
|
||
e.preventDefault();
|
||
},
|
||
onContainerMouseDown(e) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
},
|
||
// ======================= Clean =======================
|
||
patchEvents() {
|
||
(void 0).addEventListener("mousemove", this.onMouseMove);
|
||
(void 0).addEventListener("mouseup", this.onMouseUp);
|
||
this.thumbRef.current.addEventListener("touchmove", this.onMouseMove, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
this.thumbRef.current.addEventListener("touchend", this.onMouseUp);
|
||
},
|
||
removeEvents() {
|
||
(void 0).removeEventListener("mousemove", this.onMouseMove);
|
||
(void 0).removeEventListener("mouseup", this.onMouseUp);
|
||
this.scrollbarRef.current.removeEventListener("touchstart", this.onScrollbarTouchStart, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
if (this.thumbRef.current) {
|
||
this.thumbRef.current.removeEventListener("touchstart", this.onMouseDown, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
this.thumbRef.current.removeEventListener("touchmove", this.onMouseMove, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
this.thumbRef.current.removeEventListener("touchend", this.onMouseUp);
|
||
}
|
||
wrapperRaf.cancel(this.moveRaf);
|
||
},
|
||
// ======================= Thumb =======================
|
||
onMouseDown(e) {
|
||
const {
|
||
onStartMove
|
||
} = this.$props;
|
||
_extends(this.state, {
|
||
dragging: true,
|
||
pageY: getPageY(e),
|
||
startTop: this.getTop()
|
||
});
|
||
onStartMove();
|
||
this.patchEvents();
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
},
|
||
onMouseMove(e) {
|
||
const {
|
||
dragging,
|
||
pageY,
|
||
startTop
|
||
} = this.state;
|
||
const {
|
||
onScroll
|
||
} = this.$props;
|
||
wrapperRaf.cancel(this.moveRaf);
|
||
if (dragging) {
|
||
const offsetY = getPageY(e) - pageY;
|
||
const newTop = startTop + offsetY;
|
||
const enableScrollRange = this.getEnableScrollRange();
|
||
const enableHeightRange = this.getEnableHeightRange();
|
||
const ptg = enableHeightRange ? newTop / enableHeightRange : 0;
|
||
const newScrollTop = Math.ceil(ptg * enableScrollRange);
|
||
this.moveRaf = wrapperRaf(() => {
|
||
onScroll(newScrollTop);
|
||
});
|
||
}
|
||
},
|
||
onMouseUp() {
|
||
const {
|
||
onStopMove
|
||
} = this.$props;
|
||
this.state.dragging = false;
|
||
onStopMove();
|
||
this.removeEvents();
|
||
},
|
||
// ===================== Calculate =====================
|
||
getSpinHeight() {
|
||
const {
|
||
height,
|
||
scrollHeight
|
||
} = this.$props;
|
||
let baseHeight = height / scrollHeight * 100;
|
||
baseHeight = Math.max(baseHeight, MIN_SIZE);
|
||
baseHeight = Math.min(baseHeight, height / 2);
|
||
return Math.floor(baseHeight);
|
||
},
|
||
getEnableScrollRange() {
|
||
const {
|
||
scrollHeight,
|
||
height
|
||
} = this.$props;
|
||
return scrollHeight - height || 0;
|
||
},
|
||
getEnableHeightRange() {
|
||
const {
|
||
height
|
||
} = this.$props;
|
||
const spinHeight = this.getSpinHeight();
|
||
return height - spinHeight || 0;
|
||
},
|
||
getTop() {
|
||
const {
|
||
scrollTop
|
||
} = this.$props;
|
||
const enableScrollRange = this.getEnableScrollRange();
|
||
const enableHeightRange = this.getEnableHeightRange();
|
||
if (scrollTop === 0 || enableScrollRange === 0) {
|
||
return 0;
|
||
}
|
||
const ptg = scrollTop / enableScrollRange;
|
||
return ptg * enableHeightRange;
|
||
},
|
||
// Not show scrollbar when height is large than scrollHeight
|
||
showScroll() {
|
||
const {
|
||
height,
|
||
scrollHeight
|
||
} = this.$props;
|
||
return scrollHeight > height;
|
||
}
|
||
},
|
||
render() {
|
||
const {
|
||
dragging,
|
||
visible
|
||
} = this.state;
|
||
const {
|
||
prefixCls
|
||
} = this.$props;
|
||
const spinHeight = this.getSpinHeight() + "px";
|
||
const top = this.getTop() + "px";
|
||
const canScroll = this.showScroll();
|
||
const mergedVisible = canScroll && visible;
|
||
return createVNode("div", {
|
||
"ref": this.scrollbarRef,
|
||
"class": classNames(`${prefixCls}-scrollbar`, {
|
||
[`${prefixCls}-scrollbar-show`]: canScroll
|
||
}),
|
||
"style": {
|
||
width: "8px",
|
||
top: 0,
|
||
bottom: 0,
|
||
right: 0,
|
||
position: "absolute",
|
||
display: mergedVisible ? void 0 : "none"
|
||
},
|
||
"onMousedown": this.onContainerMouseDown,
|
||
"onMousemove": this.delayHidden
|
||
}, [createVNode("div", {
|
||
"ref": this.thumbRef,
|
||
"class": classNames(`${prefixCls}-scrollbar-thumb`, {
|
||
[`${prefixCls}-scrollbar-thumb-moving`]: dragging
|
||
}),
|
||
"style": {
|
||
width: "100%",
|
||
height: spinHeight,
|
||
top,
|
||
left: 0,
|
||
position: "absolute",
|
||
background: "rgba(0, 0, 0, 0.5)",
|
||
borderRadius: "99px",
|
||
cursor: "pointer",
|
||
userSelect: "none"
|
||
},
|
||
"onMousedown": this.onMouseDown
|
||
}, null)]);
|
||
}
|
||
});
|
||
function useHeights(mergedData, getKey2, onItemAdd, onItemRemove) {
|
||
const instance = /* @__PURE__ */ new Map();
|
||
const heights = /* @__PURE__ */ new Map();
|
||
const updatedMark = ref(Symbol("update"));
|
||
watch(mergedData, () => {
|
||
updatedMark.value = Symbol("update");
|
||
});
|
||
let collectRaf = void 0;
|
||
function cancelRaf() {
|
||
wrapperRaf.cancel(collectRaf);
|
||
}
|
||
function collectHeight() {
|
||
cancelRaf();
|
||
collectRaf = wrapperRaf(() => {
|
||
instance.forEach((element, key) => {
|
||
if (element && element.offsetParent) {
|
||
const {
|
||
offsetHeight
|
||
} = element;
|
||
if (heights.get(key) !== offsetHeight) {
|
||
updatedMark.value = Symbol("update");
|
||
heights.set(key, element.offsetHeight);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
function setInstance(item, ins) {
|
||
const key = getKey2(item);
|
||
instance.get(key);
|
||
if (ins) {
|
||
instance.set(key, ins.$el || ins);
|
||
collectHeight();
|
||
} else {
|
||
instance.delete(key);
|
||
}
|
||
}
|
||
return [setInstance, collectHeight, heights, updatedMark];
|
||
}
|
||
function useScrollTo(containerRef, mergedData, heights, props2, getKey2, collectHeight, syncScrollTop, triggerFlash) {
|
||
let scroll;
|
||
return (arg) => {
|
||
if (arg === null || arg === void 0) {
|
||
triggerFlash();
|
||
return;
|
||
}
|
||
wrapperRaf.cancel(scroll);
|
||
const data = mergedData.value;
|
||
const itemHeight = props2.itemHeight;
|
||
if (typeof arg === "number") {
|
||
syncScrollTop(arg);
|
||
} else if (arg && typeof arg === "object") {
|
||
let index;
|
||
const {
|
||
align
|
||
} = arg;
|
||
if ("index" in arg) {
|
||
({
|
||
index
|
||
} = arg);
|
||
} else {
|
||
index = data.findIndex((item) => getKey2(item) === arg.key);
|
||
}
|
||
const {
|
||
offset = 0
|
||
} = arg;
|
||
const syncScroll = (times, targetAlign) => {
|
||
if (times < 0 || !containerRef.value) return;
|
||
const height = containerRef.value.clientHeight;
|
||
let needCollectHeight = false;
|
||
let newTargetAlign = targetAlign;
|
||
if (height) {
|
||
const mergedAlign = targetAlign || align;
|
||
let stackTop = 0;
|
||
let itemTop = 0;
|
||
let itemBottom = 0;
|
||
const maxLen = Math.min(data.length, index);
|
||
for (let i = 0; i <= maxLen; i += 1) {
|
||
const key = getKey2(data[i]);
|
||
itemTop = stackTop;
|
||
const cacheHeight = heights.get(key);
|
||
itemBottom = itemTop + (cacheHeight === void 0 ? itemHeight : cacheHeight);
|
||
stackTop = itemBottom;
|
||
if (i === index && cacheHeight === void 0) {
|
||
needCollectHeight = true;
|
||
}
|
||
}
|
||
const scrollTop = containerRef.value.scrollTop;
|
||
let targetTop = null;
|
||
switch (mergedAlign) {
|
||
case "top":
|
||
targetTop = itemTop - offset;
|
||
break;
|
||
case "bottom":
|
||
targetTop = itemBottom - height + offset;
|
||
break;
|
||
default: {
|
||
const scrollBottom = scrollTop + height;
|
||
if (itemTop < scrollTop) {
|
||
newTargetAlign = "top";
|
||
} else if (itemBottom > scrollBottom) {
|
||
newTargetAlign = "bottom";
|
||
}
|
||
}
|
||
}
|
||
if (targetTop !== null && targetTop !== scrollTop) {
|
||
syncScrollTop(targetTop);
|
||
}
|
||
}
|
||
scroll = wrapperRaf(() => {
|
||
if (needCollectHeight) {
|
||
collectHeight();
|
||
}
|
||
syncScroll(times - 1, newTargetAlign);
|
||
}, 2);
|
||
};
|
||
syncScroll(5);
|
||
}
|
||
};
|
||
}
|
||
const useOriginScroll = ((isScrollAtTop, isScrollAtBottom) => {
|
||
let lock = false;
|
||
let lockTimeout = null;
|
||
function lockScroll() {
|
||
clearTimeout(lockTimeout);
|
||
lock = true;
|
||
lockTimeout = setTimeout(() => {
|
||
lock = false;
|
||
}, 50);
|
||
}
|
||
return function(deltaY) {
|
||
let smoothOffset = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
||
const originScroll = (
|
||
// Pass origin wheel when on the top
|
||
deltaY < 0 && isScrollAtTop.value || // Pass origin wheel when on the bottom
|
||
deltaY > 0 && isScrollAtBottom.value
|
||
);
|
||
if (smoothOffset && originScroll) {
|
||
clearTimeout(lockTimeout);
|
||
lock = false;
|
||
} else if (!originScroll || lock) {
|
||
lockScroll();
|
||
}
|
||
return !lock && originScroll;
|
||
};
|
||
});
|
||
function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, onWheelDelta) {
|
||
let offsetRef = 0;
|
||
let nextFrame = null;
|
||
let wheelValue = null;
|
||
let isMouseScroll = false;
|
||
const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
|
||
function onWheel(event) {
|
||
if (!inVirtual.value) return;
|
||
wrapperRaf.cancel(nextFrame);
|
||
const {
|
||
deltaY
|
||
} = event;
|
||
offsetRef += deltaY;
|
||
wheelValue = deltaY;
|
||
if (originScroll(deltaY)) return;
|
||
{
|
||
event.preventDefault();
|
||
}
|
||
nextFrame = wrapperRaf(() => {
|
||
const patchMultiple = isMouseScroll ? 10 : 1;
|
||
onWheelDelta(offsetRef * patchMultiple);
|
||
offsetRef = 0;
|
||
});
|
||
}
|
||
function onFireFoxScroll(event) {
|
||
if (!inVirtual.value) return;
|
||
isMouseScroll = event.detail === wheelValue;
|
||
}
|
||
return [onWheel, onFireFoxScroll];
|
||
}
|
||
var __rest$2 = function(s, e) {
|
||
var t = {};
|
||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||
}
|
||
return t;
|
||
};
|
||
const EMPTY_DATA = [];
|
||
const ScrollStyle = {
|
||
overflowY: "auto",
|
||
overflowAnchor: "none"
|
||
};
|
||
function renderChildren(list, startIndex, endIndex, setNodeRef, renderFunc, _ref) {
|
||
let {
|
||
getKey: getKey2
|
||
} = _ref;
|
||
return list.slice(startIndex, endIndex + 1).map((item, index) => {
|
||
const eleIndex = startIndex + index;
|
||
const node = renderFunc(item, eleIndex, {
|
||
// style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
|
||
});
|
||
const key = getKey2(item);
|
||
return createVNode(Item, {
|
||
"key": key,
|
||
"setRef": (ele) => setNodeRef(item, ele)
|
||
}, {
|
||
default: () => [node]
|
||
});
|
||
});
|
||
}
|
||
const List = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "List",
|
||
inheritAttrs: false,
|
||
props: {
|
||
prefixCls: String,
|
||
data: PropTypes.array,
|
||
height: Number,
|
||
itemHeight: Number,
|
||
/** If not match virtual scroll condition, Set List still use height of container. */
|
||
fullHeight: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
itemKey: {
|
||
type: [String, Number, Function],
|
||
required: true
|
||
},
|
||
component: {
|
||
type: [String, Object]
|
||
},
|
||
/** Set `false` will always use real scroll instead of virtual one */
|
||
virtual: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
children: Function,
|
||
onScroll: Function,
|
||
onMousedown: Function,
|
||
onMouseenter: Function,
|
||
onVisibleChange: Function
|
||
},
|
||
setup(props2, _ref2) {
|
||
let {
|
||
expose
|
||
} = _ref2;
|
||
const useVirtual = computed(() => {
|
||
const {
|
||
height,
|
||
itemHeight,
|
||
virtual
|
||
} = props2;
|
||
return !!(virtual !== false && height && itemHeight);
|
||
});
|
||
const inVirtual = computed(() => {
|
||
const {
|
||
height,
|
||
itemHeight,
|
||
data: data2
|
||
} = props2;
|
||
return useVirtual.value && data2 && itemHeight * data2.length > height;
|
||
});
|
||
const state = reactive({
|
||
scrollTop: 0,
|
||
scrollMoving: false
|
||
});
|
||
const data = computed(() => {
|
||
return props2.data || EMPTY_DATA;
|
||
});
|
||
const mergedData = shallowRef([]);
|
||
watch(data, () => {
|
||
mergedData.value = toRaw(data.value).slice();
|
||
}, {
|
||
immediate: true
|
||
});
|
||
const itemKey = shallowRef((_item) => void 0);
|
||
watch(() => props2.itemKey, (val) => {
|
||
if (typeof val === "function") {
|
||
itemKey.value = val;
|
||
} else {
|
||
itemKey.value = (item) => item === null || item === void 0 ? void 0 : item[val];
|
||
}
|
||
}, {
|
||
immediate: true
|
||
});
|
||
const componentRef = shallowRef();
|
||
const fillerInnerRef = shallowRef();
|
||
const scrollBarRef = shallowRef();
|
||
const getKey2 = (item) => {
|
||
return itemKey.value(item);
|
||
};
|
||
const sharedConfig = {
|
||
getKey: getKey2
|
||
};
|
||
function syncScrollTop(newTop) {
|
||
let value;
|
||
if (typeof newTop === "function") {
|
||
value = newTop(state.scrollTop);
|
||
} else {
|
||
value = newTop;
|
||
}
|
||
const alignedTop = keepInRange(value);
|
||
if (componentRef.value) {
|
||
componentRef.value.scrollTop = alignedTop;
|
||
}
|
||
state.scrollTop = alignedTop;
|
||
}
|
||
const [setInstance, collectHeight, heights, updatedMark] = useHeights(mergedData, getKey2);
|
||
const calRes = reactive({
|
||
scrollHeight: void 0,
|
||
start: 0,
|
||
end: 0,
|
||
offset: void 0
|
||
});
|
||
const offsetHeight = shallowRef(0);
|
||
watch([useVirtual, mergedData], () => {
|
||
if (!useVirtual.value) {
|
||
_extends(calRes, {
|
||
scrollHeight: void 0,
|
||
start: 0,
|
||
end: mergedData.value.length - 1,
|
||
offset: void 0
|
||
});
|
||
}
|
||
}, {
|
||
immediate: true
|
||
});
|
||
watch([useVirtual, mergedData, offsetHeight, inVirtual], () => {
|
||
if (useVirtual.value && !inVirtual.value) {
|
||
_extends(calRes, {
|
||
scrollHeight: offsetHeight.value,
|
||
start: 0,
|
||
end: mergedData.value.length - 1,
|
||
offset: void 0
|
||
});
|
||
}
|
||
if (componentRef.value) {
|
||
state.scrollTop = componentRef.value.scrollTop;
|
||
}
|
||
}, {
|
||
immediate: true
|
||
});
|
||
watch([inVirtual, useVirtual, () => state.scrollTop, mergedData, updatedMark, () => props2.height, offsetHeight], () => {
|
||
if (!useVirtual.value || !inVirtual.value) {
|
||
return;
|
||
}
|
||
let itemTop = 0;
|
||
let startIndex;
|
||
let startOffset;
|
||
let endIndex;
|
||
const dataLen = mergedData.value.length;
|
||
const data2 = mergedData.value;
|
||
const scrollTop = state.scrollTop;
|
||
const {
|
||
itemHeight,
|
||
height
|
||
} = props2;
|
||
const scrollTopHeight = scrollTop + height;
|
||
for (let i = 0; i < dataLen; i += 1) {
|
||
const item = data2[i];
|
||
const key = getKey2(item);
|
||
let cacheHeight = heights.get(key);
|
||
if (cacheHeight === void 0) {
|
||
cacheHeight = itemHeight;
|
||
}
|
||
const currentItemBottom = itemTop + cacheHeight;
|
||
if (startIndex === void 0 && currentItemBottom >= scrollTop) {
|
||
startIndex = i;
|
||
startOffset = itemTop;
|
||
}
|
||
if (endIndex === void 0 && currentItemBottom > scrollTopHeight) {
|
||
endIndex = i;
|
||
}
|
||
itemTop = currentItemBottom;
|
||
}
|
||
if (startIndex === void 0) {
|
||
startIndex = 0;
|
||
startOffset = 0;
|
||
endIndex = Math.ceil(height / itemHeight);
|
||
}
|
||
if (endIndex === void 0) {
|
||
endIndex = dataLen - 1;
|
||
}
|
||
endIndex = Math.min(endIndex + 1, dataLen);
|
||
_extends(calRes, {
|
||
scrollHeight: itemTop,
|
||
start: startIndex,
|
||
end: endIndex,
|
||
offset: startOffset
|
||
});
|
||
}, {
|
||
immediate: true
|
||
});
|
||
const maxScrollHeight = computed(() => calRes.scrollHeight - props2.height);
|
||
function keepInRange(newScrollTop) {
|
||
let newTop = newScrollTop;
|
||
if (!Number.isNaN(maxScrollHeight.value)) {
|
||
newTop = Math.min(newTop, maxScrollHeight.value);
|
||
}
|
||
newTop = Math.max(newTop, 0);
|
||
return newTop;
|
||
}
|
||
const isScrollAtTop = computed(() => state.scrollTop <= 0);
|
||
const isScrollAtBottom = computed(() => state.scrollTop >= maxScrollHeight.value);
|
||
function onScrollBar(newScrollTop) {
|
||
const newTop = newScrollTop;
|
||
syncScrollTop(newTop);
|
||
}
|
||
function onFallbackScroll(e) {
|
||
var _a;
|
||
const {
|
||
scrollTop: newScrollTop
|
||
} = e.currentTarget;
|
||
if (newScrollTop !== state.scrollTop) {
|
||
syncScrollTop(newScrollTop);
|
||
}
|
||
(_a = props2.onScroll) === null || _a === void 0 ? void 0 : _a.call(props2, e);
|
||
}
|
||
const [onRawWheel, onFireFoxScroll] = useFrameWheel(useVirtual, isScrollAtTop, isScrollAtBottom, (offsetY) => {
|
||
syncScrollTop((top) => {
|
||
const newTop = top + offsetY;
|
||
return newTop;
|
||
});
|
||
});
|
||
function onMozMousePixelScroll(e) {
|
||
if (useVirtual.value) {
|
||
e.preventDefault();
|
||
}
|
||
}
|
||
const removeEventListener = () => {
|
||
if (componentRef.value) {
|
||
componentRef.value.removeEventListener("wheel", onRawWheel, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
componentRef.value.removeEventListener("DOMMouseScroll", onFireFoxScroll);
|
||
componentRef.value.removeEventListener("MozMousePixelScroll", onMozMousePixelScroll);
|
||
}
|
||
};
|
||
watchEffect(() => {
|
||
nextTick(() => {
|
||
if (componentRef.value) {
|
||
removeEventListener();
|
||
componentRef.value.addEventListener("wheel", onRawWheel, supportsPassive ? {
|
||
passive: false
|
||
} : false);
|
||
componentRef.value.addEventListener("DOMMouseScroll", onFireFoxScroll);
|
||
componentRef.value.addEventListener("MozMousePixelScroll", onMozMousePixelScroll);
|
||
}
|
||
});
|
||
});
|
||
const scrollTo = useScrollTo(componentRef, mergedData, heights, props2, getKey2, collectHeight, syncScrollTop, () => {
|
||
var _a;
|
||
(_a = scrollBarRef.value) === null || _a === void 0 ? void 0 : _a.delayHidden();
|
||
});
|
||
expose({
|
||
scrollTo
|
||
});
|
||
const componentStyle = computed(() => {
|
||
let cs = null;
|
||
if (props2.height) {
|
||
cs = _extends({
|
||
[props2.fullHeight ? "height" : "maxHeight"]: props2.height + "px"
|
||
}, ScrollStyle);
|
||
if (useVirtual.value) {
|
||
cs.overflowY = "hidden";
|
||
if (state.scrollMoving) {
|
||
cs.pointerEvents = "none";
|
||
}
|
||
}
|
||
}
|
||
return cs;
|
||
});
|
||
watch([() => calRes.start, () => calRes.end, mergedData], () => {
|
||
if (props2.onVisibleChange) {
|
||
const renderList2 = mergedData.value.slice(calRes.start, calRes.end + 1);
|
||
props2.onVisibleChange(renderList2, mergedData.value);
|
||
}
|
||
}, {
|
||
flush: "post"
|
||
});
|
||
const delayHideScrollBar = () => {
|
||
var _a;
|
||
(_a = scrollBarRef.value) === null || _a === void 0 ? void 0 : _a.delayHidden();
|
||
};
|
||
return {
|
||
state,
|
||
mergedData,
|
||
componentStyle,
|
||
onFallbackScroll,
|
||
onScrollBar,
|
||
componentRef,
|
||
useVirtual,
|
||
calRes,
|
||
collectHeight,
|
||
setInstance,
|
||
sharedConfig,
|
||
scrollBarRef,
|
||
fillerInnerRef,
|
||
delayHideScrollBar
|
||
};
|
||
},
|
||
render() {
|
||
const _a = _extends(_extends({}, this.$props), this.$attrs), {
|
||
prefixCls = "rc-virtual-list",
|
||
height,
|
||
itemHeight,
|
||
// eslint-disable-next-line no-unused-vars
|
||
fullHeight,
|
||
data,
|
||
itemKey,
|
||
virtual,
|
||
component: Component = "div",
|
||
onScroll,
|
||
children = this.$slots.default,
|
||
style,
|
||
class: className
|
||
} = _a, restProps = __rest$2(_a, ["prefixCls", "height", "itemHeight", "fullHeight", "data", "itemKey", "virtual", "component", "onScroll", "children", "style", "class"]);
|
||
const mergedClassName = classNames(prefixCls, className);
|
||
const {
|
||
scrollTop
|
||
} = this.state;
|
||
const {
|
||
scrollHeight,
|
||
offset,
|
||
start,
|
||
end
|
||
} = this.calRes;
|
||
const {
|
||
componentStyle,
|
||
onFallbackScroll,
|
||
onScrollBar,
|
||
useVirtual,
|
||
collectHeight,
|
||
sharedConfig,
|
||
setInstance,
|
||
mergedData,
|
||
delayHideScrollBar
|
||
} = this;
|
||
return createVNode("div", _objectSpread$1({
|
||
"style": _extends(_extends({}, style), {
|
||
position: "relative"
|
||
}),
|
||
"class": mergedClassName
|
||
}, restProps), [createVNode(Component, {
|
||
"class": `${prefixCls}-holder`,
|
||
"style": componentStyle,
|
||
"ref": "componentRef",
|
||
"onScroll": onFallbackScroll,
|
||
"onMouseenter": delayHideScrollBar
|
||
}, {
|
||
default: () => [createVNode(Filter, {
|
||
"prefixCls": prefixCls,
|
||
"height": scrollHeight,
|
||
"offset": offset,
|
||
"onInnerResize": collectHeight,
|
||
"ref": "fillerInnerRef"
|
||
}, {
|
||
default: () => renderChildren(mergedData, start, end, setInstance, children, sharedConfig)
|
||
})]
|
||
}), useVirtual && createVNode(ScrollBar, {
|
||
"ref": "scrollBarRef",
|
||
"prefixCls": prefixCls,
|
||
"scrollTop": scrollTop,
|
||
"height": height,
|
||
"scrollHeight": scrollHeight,
|
||
"count": mergedData.length,
|
||
"onScroll": onScrollBar,
|
||
"onStartMove": () => {
|
||
this.state.scrollMoving = true;
|
||
},
|
||
"onStopMove": () => {
|
||
this.state.scrollMoving = false;
|
||
}
|
||
}, null)]);
|
||
}
|
||
});
|
||
function isPlatformMac() {
|
||
return /(mac\sos|macintosh)/i.test((void 0).appVersion);
|
||
}
|
||
const SelectContextKey = Symbol("SelectContextKey");
|
||
function useProvideSelectProps(props2) {
|
||
return provide(SelectContextKey, props2);
|
||
}
|
||
function useSelectProps() {
|
||
return inject(SelectContextKey, {});
|
||
}
|
||
var __rest$1 = function(s, e) {
|
||
var t = {};
|
||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||
}
|
||
return t;
|
||
};
|
||
function isTitleType(content) {
|
||
return typeof content === "string" || typeof content === "number";
|
||
}
|
||
const OptionList = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "OptionList",
|
||
inheritAttrs: false,
|
||
setup(_, _ref) {
|
||
let {
|
||
expose,
|
||
slots
|
||
} = _ref;
|
||
const baseProps = useBaseProps();
|
||
const props2 = useSelectProps();
|
||
const itemPrefixCls = computed(() => `${baseProps.prefixCls}-item`);
|
||
const memoFlattenOptions = useMemo(() => props2.flattenOptions, [() => baseProps.open, () => props2.flattenOptions], (next) => next[0]);
|
||
const listRef = createRef();
|
||
const onListMouseDown = (event) => {
|
||
event.preventDefault();
|
||
};
|
||
const scrollIntoView = (args) => {
|
||
if (listRef.current) {
|
||
listRef.current.scrollTo(typeof args === "number" ? {
|
||
index: args
|
||
} : args);
|
||
}
|
||
};
|
||
const getEnabledActiveIndex = function(index) {
|
||
let offset = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
|
||
const len = memoFlattenOptions.value.length;
|
||
for (let i = 0; i < len; i += 1) {
|
||
const current = (index + i * offset + len) % len;
|
||
const {
|
||
group,
|
||
data
|
||
} = memoFlattenOptions.value[current];
|
||
if (!group && !data.disabled) {
|
||
return current;
|
||
}
|
||
}
|
||
return -1;
|
||
};
|
||
const state = reactive({
|
||
activeIndex: getEnabledActiveIndex(0)
|
||
});
|
||
const setActive = function(index) {
|
||
let fromKeyboard = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
||
state.activeIndex = index;
|
||
const info = {
|
||
source: fromKeyboard ? "keyboard" : "mouse"
|
||
};
|
||
const flattenItem = memoFlattenOptions.value[index];
|
||
if (!flattenItem) {
|
||
props2.onActiveValue(null, -1, info);
|
||
return;
|
||
}
|
||
props2.onActiveValue(flattenItem.value, index, info);
|
||
};
|
||
watch([() => memoFlattenOptions.value.length, () => baseProps.searchValue], () => {
|
||
setActive(props2.defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
|
||
}, {
|
||
immediate: true
|
||
});
|
||
const isSelected = (value) => props2.rawValues.has(value) && baseProps.mode !== "combobox";
|
||
watch([() => baseProps.open, () => baseProps.searchValue], () => {
|
||
if (!baseProps.multiple && baseProps.open && props2.rawValues.size === 1) {
|
||
const value = Array.from(props2.rawValues)[0];
|
||
const index = toRaw(memoFlattenOptions.value).findIndex((_ref2) => {
|
||
let {
|
||
data
|
||
} = _ref2;
|
||
return data[props2.fieldNames.value] === value;
|
||
});
|
||
if (index !== -1) {
|
||
setActive(index);
|
||
nextTick(() => {
|
||
scrollIntoView(index);
|
||
});
|
||
}
|
||
}
|
||
if (baseProps.open) {
|
||
nextTick(() => {
|
||
var _a;
|
||
(_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(void 0);
|
||
});
|
||
}
|
||
}, {
|
||
immediate: true,
|
||
flush: "post"
|
||
});
|
||
const onSelectValue = (value) => {
|
||
if (value !== void 0) {
|
||
props2.onSelect(value, {
|
||
selected: !props2.rawValues.has(value)
|
||
});
|
||
}
|
||
if (!baseProps.multiple) {
|
||
baseProps.toggleOpen(false);
|
||
}
|
||
};
|
||
const getLabel = (item) => typeof item.label === "function" ? item.label() : item.label;
|
||
function renderItem(index) {
|
||
const item = memoFlattenOptions.value[index];
|
||
if (!item) return null;
|
||
const itemData = item.data || {};
|
||
const {
|
||
value
|
||
} = itemData;
|
||
const {
|
||
group
|
||
} = item;
|
||
const attrs = pickAttrs(itemData, true);
|
||
const mergedLabel = getLabel(item);
|
||
return item ? createVNode("div", _objectSpread$1(_objectSpread$1({
|
||
"aria-label": typeof mergedLabel === "string" && !group ? mergedLabel : null
|
||
}, attrs), {}, {
|
||
"key": index,
|
||
"role": group ? "presentation" : "option",
|
||
"id": `${baseProps.id}_list_${index}`,
|
||
"aria-selected": isSelected(value)
|
||
}), [value]) : null;
|
||
}
|
||
const onKeydown = (event) => {
|
||
const {
|
||
which,
|
||
ctrlKey
|
||
} = event;
|
||
switch (which) {
|
||
// >>> Arrow keys & ctrl + n/p on Mac
|
||
case KeyCode.N:
|
||
case KeyCode.P:
|
||
case KeyCode.UP:
|
||
case KeyCode.DOWN: {
|
||
let offset = 0;
|
||
if (which === KeyCode.UP) {
|
||
offset = -1;
|
||
} else if (which === KeyCode.DOWN) {
|
||
offset = 1;
|
||
} else if (isPlatformMac() && ctrlKey) {
|
||
if (which === KeyCode.N) {
|
||
offset = 1;
|
||
} else if (which === KeyCode.P) {
|
||
offset = -1;
|
||
}
|
||
}
|
||
if (offset !== 0) {
|
||
const nextActiveIndex = getEnabledActiveIndex(state.activeIndex + offset, offset);
|
||
scrollIntoView(nextActiveIndex);
|
||
setActive(nextActiveIndex, true);
|
||
}
|
||
break;
|
||
}
|
||
// >>> Select
|
||
case KeyCode.ENTER: {
|
||
const item = memoFlattenOptions.value[state.activeIndex];
|
||
if (item && !item.data.disabled) {
|
||
onSelectValue(item.value);
|
||
} else {
|
||
onSelectValue(void 0);
|
||
}
|
||
if (baseProps.open) {
|
||
event.preventDefault();
|
||
}
|
||
break;
|
||
}
|
||
// >>> Close
|
||
case KeyCode.ESC: {
|
||
baseProps.toggleOpen(false);
|
||
if (baseProps.open) {
|
||
event.stopPropagation();
|
||
}
|
||
}
|
||
}
|
||
};
|
||
const onKeyup = () => {
|
||
};
|
||
const scrollTo = (index) => {
|
||
scrollIntoView(index);
|
||
};
|
||
expose({
|
||
onKeydown,
|
||
onKeyup,
|
||
scrollTo
|
||
});
|
||
return () => {
|
||
const {
|
||
id,
|
||
notFoundContent,
|
||
onPopupScroll
|
||
} = baseProps;
|
||
const {
|
||
menuItemSelectedIcon,
|
||
fieldNames,
|
||
virtual,
|
||
listHeight,
|
||
listItemHeight
|
||
} = props2;
|
||
const renderOption = slots.option;
|
||
const {
|
||
activeIndex
|
||
} = state;
|
||
const omitFieldNameList = Object.keys(fieldNames).map((key) => fieldNames[key]);
|
||
if (memoFlattenOptions.value.length === 0) {
|
||
return createVNode("div", {
|
||
"role": "listbox",
|
||
"id": `${id}_list`,
|
||
"class": `${itemPrefixCls.value}-empty`,
|
||
"onMousedown": onListMouseDown
|
||
}, [notFoundContent]);
|
||
}
|
||
return createVNode(Fragment, null, [createVNode("div", {
|
||
"role": "listbox",
|
||
"id": `${id}_list`,
|
||
"style": {
|
||
height: 0,
|
||
width: 0,
|
||
overflow: "hidden"
|
||
}
|
||
}, [renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)]), createVNode(List, {
|
||
"itemKey": "key",
|
||
"ref": listRef,
|
||
"data": memoFlattenOptions.value,
|
||
"height": listHeight,
|
||
"itemHeight": listItemHeight,
|
||
"fullHeight": false,
|
||
"onMousedown": onListMouseDown,
|
||
"onScroll": onPopupScroll,
|
||
"virtual": virtual
|
||
}, {
|
||
default: (item, itemIndex) => {
|
||
var _a;
|
||
const {
|
||
group,
|
||
groupOption,
|
||
data,
|
||
value
|
||
} = item;
|
||
const {
|
||
key
|
||
} = data;
|
||
const label = typeof item.label === "function" ? item.label() : item.label;
|
||
if (group) {
|
||
const groupTitle = (_a = data.title) !== null && _a !== void 0 ? _a : isTitleType(label) && label;
|
||
return createVNode("div", {
|
||
"class": classNames(itemPrefixCls.value, `${itemPrefixCls.value}-group`),
|
||
"title": groupTitle
|
||
}, [renderOption ? renderOption(data) : label !== void 0 ? label : key]);
|
||
}
|
||
const {
|
||
disabled,
|
||
title,
|
||
children,
|
||
style,
|
||
class: cls,
|
||
className
|
||
} = data, otherProps = __rest$1(data, ["disabled", "title", "children", "style", "class", "className"]);
|
||
const passedProps = omit(otherProps, omitFieldNameList);
|
||
const selected = isSelected(value);
|
||
const optionPrefixCls = `${itemPrefixCls.value}-option`;
|
||
const optionClassName = classNames(itemPrefixCls.value, optionPrefixCls, cls, className, {
|
||
[`${optionPrefixCls}-grouped`]: groupOption,
|
||
[`${optionPrefixCls}-active`]: activeIndex === itemIndex && !disabled,
|
||
[`${optionPrefixCls}-disabled`]: disabled,
|
||
[`${optionPrefixCls}-selected`]: selected
|
||
});
|
||
const mergedLabel = getLabel(item);
|
||
const iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === "function" || selected;
|
||
const content = typeof mergedLabel === "number" ? mergedLabel : mergedLabel || value;
|
||
let optionTitle = isTitleType(content) ? content.toString() : void 0;
|
||
if (title !== void 0) {
|
||
optionTitle = title;
|
||
}
|
||
return createVNode("div", _objectSpread$1(_objectSpread$1({}, passedProps), {}, {
|
||
"aria-selected": selected,
|
||
"class": optionClassName,
|
||
"title": optionTitle,
|
||
"onMousemove": (e) => {
|
||
if (otherProps.onMousemove) {
|
||
otherProps.onMousemove(e);
|
||
}
|
||
if (activeIndex === itemIndex || disabled) {
|
||
return;
|
||
}
|
||
setActive(itemIndex);
|
||
},
|
||
"onClick": (e) => {
|
||
if (!disabled) {
|
||
onSelectValue(value);
|
||
}
|
||
if (otherProps.onClick) {
|
||
otherProps.onClick(e);
|
||
}
|
||
},
|
||
"style": style
|
||
}), [createVNode("div", {
|
||
"class": `${optionPrefixCls}-content`
|
||
}, [renderOption ? renderOption(data) : content]), isValidElement(menuItemSelectedIcon) || selected, iconVisible && createVNode(TransBtn, {
|
||
"class": `${itemPrefixCls.value}-option-state`,
|
||
"customizeIcon": menuItemSelectedIcon,
|
||
"customizeIconProps": {
|
||
isSelected: selected
|
||
}
|
||
}, {
|
||
default: () => [selected ? "✓" : null]
|
||
})]);
|
||
}
|
||
})]);
|
||
};
|
||
}
|
||
});
|
||
var __rest = function(s, e) {
|
||
var t = {};
|
||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
||
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
||
}
|
||
return t;
|
||
};
|
||
function convertNodeToOption(node) {
|
||
const _a = node, {
|
||
key,
|
||
children
|
||
} = _a, _b = _a.props, {
|
||
value,
|
||
disabled
|
||
} = _b, restProps = __rest(_b, ["value", "disabled"]);
|
||
const child = children === null || children === void 0 ? void 0 : children.default;
|
||
return _extends({
|
||
key,
|
||
value: value !== void 0 ? value : key,
|
||
children: child,
|
||
disabled: disabled || disabled === ""
|
||
}, restProps);
|
||
}
|
||
function convertChildrenToData(nodes) {
|
||
let optionOnly = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
||
const dd = flattenChildren(nodes).map((node, index) => {
|
||
var _a;
|
||
if (!isValidElement(node) || !node.type) {
|
||
return null;
|
||
}
|
||
const {
|
||
type: {
|
||
isSelectOptGroup
|
||
},
|
||
key,
|
||
children,
|
||
props: props2
|
||
} = node;
|
||
if (optionOnly || !isSelectOptGroup) {
|
||
return convertNodeToOption(node);
|
||
}
|
||
const child = children && children.default ? children.default() : void 0;
|
||
const label = (props2 === null || props2 === void 0 ? void 0 : props2.label) || ((_a = children.label) === null || _a === void 0 ? void 0 : _a.call(children)) || key;
|
||
return _extends(_extends({
|
||
key: `__RC_SELECT_GRP__${key === null ? index : String(key)}__`
|
||
}, props2), {
|
||
label,
|
||
options: convertChildrenToData(child || [])
|
||
});
|
||
}).filter((data) => data);
|
||
return dd;
|
||
}
|
||
function useOptions(options, children, fieldNames) {
|
||
const mergedOptions = shallowRef();
|
||
const valueOptions = shallowRef();
|
||
const labelOptions = shallowRef();
|
||
const tempMergedOptions = shallowRef([]);
|
||
watch([options, children], () => {
|
||
if (options.value) {
|
||
tempMergedOptions.value = toRaw(options.value).slice();
|
||
} else {
|
||
tempMergedOptions.value = convertChildrenToData(children.value);
|
||
}
|
||
}, {
|
||
immediate: true,
|
||
deep: true
|
||
});
|
||
watchEffect(() => {
|
||
const newOptions = tempMergedOptions.value;
|
||
const newValueOptions = /* @__PURE__ */ new Map();
|
||
const newLabelOptions = /* @__PURE__ */ new Map();
|
||
const fieldNamesValue = fieldNames.value;
|
||
function dig(optionList) {
|
||
let isChildren = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
|
||
for (let i = 0; i < optionList.length; i += 1) {
|
||
const option = optionList[i];
|
||
if (!option[fieldNamesValue.options] || isChildren) {
|
||
newValueOptions.set(option[fieldNamesValue.value], option);
|
||
newLabelOptions.set(option[fieldNamesValue.label], option);
|
||
} else {
|
||
dig(option[fieldNamesValue.options], true);
|
||
}
|
||
}
|
||
}
|
||
dig(newOptions);
|
||
mergedOptions.value = newOptions;
|
||
valueOptions.value = newValueOptions;
|
||
labelOptions.value = newLabelOptions;
|
||
});
|
||
return {
|
||
options: mergedOptions,
|
||
valueOptions,
|
||
labelOptions
|
||
};
|
||
}
|
||
function getUUID() {
|
||
let retId;
|
||
{
|
||
retId = "TEST_OR_SSR";
|
||
}
|
||
return retId;
|
||
}
|
||
function useId() {
|
||
let id = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : ref("");
|
||
const innerId = `rc_select_${getUUID()}`;
|
||
return id.value || innerId;
|
||
}
|
||
function toArray(value) {
|
||
if (Array.isArray(value)) {
|
||
return value;
|
||
}
|
||
return value !== void 0 ? [value] : [];
|
||
}
|
||
function includes(test, search) {
|
||
return toArray(test).join("").toUpperCase().includes(search);
|
||
}
|
||
const useFilterOptions = ((options, fieldNames, searchValue, filterOption, optionFilterProp) => computed(() => {
|
||
const searchValueVal = searchValue.value;
|
||
const optionFilterPropValue = optionFilterProp === null || optionFilterProp === void 0 ? void 0 : optionFilterProp.value;
|
||
const filterOptionValue = filterOption === null || filterOption === void 0 ? void 0 : filterOption.value;
|
||
if (!searchValueVal || filterOptionValue === false) {
|
||
return options.value;
|
||
}
|
||
const {
|
||
options: fieldOptions,
|
||
label: fieldLabel,
|
||
value: fieldValue
|
||
} = fieldNames.value;
|
||
const filteredOptions = [];
|
||
const customizeFilter = typeof filterOptionValue === "function";
|
||
const upperSearch = searchValueVal.toUpperCase();
|
||
const filterFunc = customizeFilter ? filterOptionValue : (_, option) => {
|
||
if (optionFilterPropValue) {
|
||
return includes(option[optionFilterPropValue], upperSearch);
|
||
}
|
||
if (option[fieldOptions]) {
|
||
return includes(option[fieldLabel !== "children" ? fieldLabel : "label"], upperSearch);
|
||
}
|
||
return includes(option[fieldValue], upperSearch);
|
||
};
|
||
const wrapOption = customizeFilter ? (opt) => injectPropsWithOption(opt) : (opt) => opt;
|
||
options.value.forEach((item) => {
|
||
if (item[fieldOptions]) {
|
||
const matchGroup = filterFunc(searchValueVal, wrapOption(item));
|
||
if (matchGroup) {
|
||
filteredOptions.push(item);
|
||
} else {
|
||
const subOptions = item[fieldOptions].filter((subItem) => filterFunc(searchValueVal, wrapOption(subItem)));
|
||
if (subOptions.length) {
|
||
filteredOptions.push(_extends(_extends({}, item), {
|
||
[fieldOptions]: subOptions
|
||
}));
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
if (filterFunc(searchValueVal, wrapOption(item))) {
|
||
filteredOptions.push(item);
|
||
}
|
||
});
|
||
return filteredOptions;
|
||
}));
|
||
const useCache = ((labeledValues, valueOptions) => {
|
||
const cacheRef = shallowRef({
|
||
values: /* @__PURE__ */ new Map(),
|
||
options: /* @__PURE__ */ new Map()
|
||
});
|
||
const filledLabeledValues = computed(() => {
|
||
const {
|
||
values: prevValueCache,
|
||
options: prevOptionCache
|
||
} = cacheRef.value;
|
||
const patchedValues = labeledValues.value.map((item) => {
|
||
var _a;
|
||
if (item.label === void 0) {
|
||
return _extends(_extends({}, item), {
|
||
label: (_a = prevValueCache.get(item.value)) === null || _a === void 0 ? void 0 : _a.label
|
||
});
|
||
}
|
||
return item;
|
||
});
|
||
const valueCache = /* @__PURE__ */ new Map();
|
||
const optionCache = /* @__PURE__ */ new Map();
|
||
patchedValues.forEach((item) => {
|
||
valueCache.set(item.value, item);
|
||
optionCache.set(item.value, valueOptions.value.get(item.value) || prevOptionCache.get(item.value));
|
||
});
|
||
cacheRef.value.values = valueCache;
|
||
cacheRef.value.options = optionCache;
|
||
return patchedValues;
|
||
});
|
||
const getOption = (val) => valueOptions.value.get(val) || cacheRef.value.options.get(val);
|
||
return [filledLabeledValues, getOption];
|
||
});
|
||
const OMIT_DOM_PROPS = ["inputValue"];
|
||
function selectProps$1() {
|
||
return _extends(_extends({}, baseSelectPropsWithoutPrivate()), {
|
||
prefixCls: String,
|
||
id: String,
|
||
backfill: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
// >>> Field Names
|
||
fieldNames: Object,
|
||
// >>> Search
|
||
/** @deprecated Use `searchValue` instead */
|
||
inputValue: String,
|
||
searchValue: String,
|
||
onSearch: Function,
|
||
autoClearSearchValue: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
// >>> Select
|
||
onSelect: Function,
|
||
onDeselect: Function,
|
||
// >>> Options
|
||
/**
|
||
* In Select, `false` means do nothing.
|
||
* In TreeSelect, `false` will highlight match item.
|
||
* It's by design.
|
||
*/
|
||
filterOption: {
|
||
type: [Boolean, Function],
|
||
default: void 0
|
||
},
|
||
filterSort: Function,
|
||
optionFilterProp: String,
|
||
optionLabelProp: String,
|
||
options: Array,
|
||
defaultActiveFirstOption: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
virtual: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
listHeight: Number,
|
||
listItemHeight: Number,
|
||
// >>> Icon
|
||
menuItemSelectedIcon: PropTypes.any,
|
||
mode: String,
|
||
labelInValue: {
|
||
type: Boolean,
|
||
default: void 0
|
||
},
|
||
value: PropTypes.any,
|
||
defaultValue: PropTypes.any,
|
||
onChange: Function,
|
||
children: Array
|
||
});
|
||
}
|
||
function isRawValue(value) {
|
||
return !value || typeof value !== "object";
|
||
}
|
||
const Select$1 = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "VcSelect",
|
||
inheritAttrs: false,
|
||
props: initDefaultProps(selectProps$1(), {
|
||
prefixCls: "vc-select",
|
||
autoClearSearchValue: true,
|
||
listHeight: 200,
|
||
listItemHeight: 20,
|
||
dropdownMatchSelectWidth: true
|
||
}),
|
||
setup(props2, _ref) {
|
||
let {
|
||
expose,
|
||
attrs,
|
||
slots
|
||
} = _ref;
|
||
const mergedId = useId(toRef(props2, "id"));
|
||
const multiple = computed(() => isMultiple(props2.mode));
|
||
const childrenAsData = computed(() => !!(!props2.options && props2.children));
|
||
const mergedFilterOption = computed(() => {
|
||
if (props2.filterOption === void 0 && props2.mode === "combobox") {
|
||
return false;
|
||
}
|
||
return props2.filterOption;
|
||
});
|
||
const mergedFieldNames = computed(() => fillFieldNames(props2.fieldNames, childrenAsData.value));
|
||
const [mergedSearchValue, setSearchValue] = useMergedState("", {
|
||
value: computed(() => props2.searchValue !== void 0 ? props2.searchValue : props2.inputValue),
|
||
postState: (search) => search || ""
|
||
});
|
||
const parsedOptions = useOptions(toRef(props2, "options"), toRef(props2, "children"), mergedFieldNames);
|
||
const {
|
||
valueOptions,
|
||
labelOptions,
|
||
options: mergedOptions
|
||
} = parsedOptions;
|
||
const convert2LabelValues = (draftValues) => {
|
||
const valueList = toArray(draftValues);
|
||
return valueList.map((val) => {
|
||
var _a, _b;
|
||
let rawValue;
|
||
let rawLabel;
|
||
let rawKey;
|
||
let rawDisabled;
|
||
if (isRawValue(val)) {
|
||
rawValue = val;
|
||
} else {
|
||
rawKey = val.key;
|
||
rawLabel = val.label;
|
||
rawValue = (_a = val.value) !== null && _a !== void 0 ? _a : rawKey;
|
||
}
|
||
const option = valueOptions.value.get(rawValue);
|
||
if (option) {
|
||
if (rawLabel === void 0) rawLabel = option === null || option === void 0 ? void 0 : option[props2.optionLabelProp || mergedFieldNames.value.label];
|
||
if (rawKey === void 0) rawKey = (_b = option === null || option === void 0 ? void 0 : option.key) !== null && _b !== void 0 ? _b : rawValue;
|
||
rawDisabled = option === null || option === void 0 ? void 0 : option.disabled;
|
||
}
|
||
return {
|
||
label: rawLabel,
|
||
value: rawValue,
|
||
key: rawKey,
|
||
disabled: rawDisabled,
|
||
option
|
||
};
|
||
});
|
||
};
|
||
const [internalValue, setInternalValue] = useMergedState(props2.defaultValue, {
|
||
value: toRef(props2, "value")
|
||
});
|
||
const rawLabeledValues = computed(() => {
|
||
var _a;
|
||
const values = convert2LabelValues(internalValue.value);
|
||
if (props2.mode === "combobox" && !((_a = values[0]) === null || _a === void 0 ? void 0 : _a.value)) {
|
||
return [];
|
||
}
|
||
return values;
|
||
});
|
||
const [mergedValues, getMixedOption] = useCache(rawLabeledValues, valueOptions);
|
||
const displayValues = computed(() => {
|
||
if (!props2.mode && mergedValues.value.length === 1) {
|
||
const firstValue = mergedValues.value[0];
|
||
if (firstValue.value === null && (firstValue.label === null || firstValue.label === void 0)) {
|
||
return [];
|
||
}
|
||
}
|
||
return mergedValues.value.map((item) => {
|
||
var _a;
|
||
return _extends(_extends({}, item), {
|
||
label: (_a = typeof item.label === "function" ? item.label() : item.label) !== null && _a !== void 0 ? _a : item.value
|
||
});
|
||
});
|
||
});
|
||
const rawValues = computed(() => new Set(mergedValues.value.map((val) => val.value)));
|
||
watchEffect(() => {
|
||
var _a;
|
||
if (props2.mode === "combobox") {
|
||
const strValue = (_a = mergedValues.value[0]) === null || _a === void 0 ? void 0 : _a.value;
|
||
if (strValue !== void 0 && strValue !== null) {
|
||
setSearchValue(String(strValue));
|
||
}
|
||
}
|
||
}, {
|
||
flush: "post"
|
||
});
|
||
const createTagOption = (val, label) => {
|
||
const mergedLabel = label !== null && label !== void 0 ? label : val;
|
||
return {
|
||
[mergedFieldNames.value.value]: val,
|
||
[mergedFieldNames.value.label]: mergedLabel
|
||
};
|
||
};
|
||
const filledTagOptions = shallowRef();
|
||
watchEffect(() => {
|
||
if (props2.mode !== "tags") {
|
||
filledTagOptions.value = mergedOptions.value;
|
||
return;
|
||
}
|
||
const cloneOptions = mergedOptions.value.slice();
|
||
const existOptions = (val) => valueOptions.value.has(val);
|
||
[...mergedValues.value].sort((a, b) => a.value < b.value ? -1 : 1).forEach((item) => {
|
||
const val = item.value;
|
||
if (!existOptions(val)) {
|
||
cloneOptions.push(createTagOption(val, item.label));
|
||
}
|
||
});
|
||
filledTagOptions.value = cloneOptions;
|
||
});
|
||
const filteredOptions = useFilterOptions(filledTagOptions, mergedFieldNames, mergedSearchValue, mergedFilterOption, toRef(props2, "optionFilterProp"));
|
||
const filledSearchOptions = computed(() => {
|
||
if (props2.mode !== "tags" || !mergedSearchValue.value || filteredOptions.value.some((item) => item[props2.optionFilterProp || "value"] === mergedSearchValue.value)) {
|
||
return filteredOptions.value;
|
||
}
|
||
return [createTagOption(mergedSearchValue.value), ...filteredOptions.value];
|
||
});
|
||
const orderedFilteredOptions = computed(() => {
|
||
if (!props2.filterSort) {
|
||
return filledSearchOptions.value;
|
||
}
|
||
return [...filledSearchOptions.value].sort((a, b) => props2.filterSort(a, b));
|
||
});
|
||
const displayOptions = computed(() => flattenOptions(orderedFilteredOptions.value, {
|
||
fieldNames: mergedFieldNames.value,
|
||
childrenAsData: childrenAsData.value
|
||
}));
|
||
const triggerChange = (values) => {
|
||
const labeledValues = convert2LabelValues(values);
|
||
setInternalValue(labeledValues);
|
||
if (props2.onChange && // Trigger event only when value changed
|
||
(labeledValues.length !== mergedValues.value.length || labeledValues.some((newVal, index) => {
|
||
var _a;
|
||
return ((_a = mergedValues.value[index]) === null || _a === void 0 ? void 0 : _a.value) !== (newVal === null || newVal === void 0 ? void 0 : newVal.value);
|
||
}))) {
|
||
const returnValues = props2.labelInValue ? labeledValues.map((v) => {
|
||
return _extends(_extends({}, v), {
|
||
originLabel: v.label,
|
||
label: typeof v.label === "function" ? v.label() : v.label
|
||
});
|
||
}) : labeledValues.map((v) => v.value);
|
||
const returnOptions = labeledValues.map((v) => injectPropsWithOption(getMixedOption(v.value)));
|
||
props2.onChange(
|
||
// Value
|
||
multiple.value ? returnValues : returnValues[0],
|
||
// Option
|
||
multiple.value ? returnOptions : returnOptions[0]
|
||
);
|
||
}
|
||
};
|
||
const [activeValue, setActiveValue] = useState$1(null);
|
||
const [accessibilityIndex, setAccessibilityIndex] = useState$1(0);
|
||
const mergedDefaultActiveFirstOption = computed(() => props2.defaultActiveFirstOption !== void 0 ? props2.defaultActiveFirstOption : props2.mode !== "combobox");
|
||
const onActiveValue = function(active, index) {
|
||
let {
|
||
source = "keyboard"
|
||
} = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
|
||
setAccessibilityIndex(index);
|
||
if (props2.backfill && props2.mode === "combobox" && active !== null && source === "keyboard") {
|
||
setActiveValue(String(active));
|
||
}
|
||
};
|
||
const triggerSelect = (val, selected) => {
|
||
const getSelectEnt = () => {
|
||
var _a;
|
||
const option = getMixedOption(val);
|
||
const originLabel = option === null || option === void 0 ? void 0 : option[mergedFieldNames.value.label];
|
||
return [props2.labelInValue ? {
|
||
label: typeof originLabel === "function" ? originLabel() : originLabel,
|
||
originLabel,
|
||
value: val,
|
||
key: (_a = option === null || option === void 0 ? void 0 : option.key) !== null && _a !== void 0 ? _a : val
|
||
} : val, injectPropsWithOption(option)];
|
||
};
|
||
if (selected && props2.onSelect) {
|
||
const [wrappedValue, option] = getSelectEnt();
|
||
props2.onSelect(wrappedValue, option);
|
||
} else if (!selected && props2.onDeselect) {
|
||
const [wrappedValue, option] = getSelectEnt();
|
||
props2.onDeselect(wrappedValue, option);
|
||
}
|
||
};
|
||
const onInternalSelect = (val, info) => {
|
||
let cloneValues;
|
||
const mergedSelect = multiple.value ? info.selected : true;
|
||
if (mergedSelect) {
|
||
cloneValues = multiple.value ? [...mergedValues.value, val] : [val];
|
||
} else {
|
||
cloneValues = mergedValues.value.filter((v) => v.value !== val);
|
||
}
|
||
triggerChange(cloneValues);
|
||
triggerSelect(val, mergedSelect);
|
||
if (props2.mode === "combobox") {
|
||
setActiveValue("");
|
||
} else if (!multiple.value || props2.autoClearSearchValue) {
|
||
setSearchValue("");
|
||
setActiveValue("");
|
||
}
|
||
};
|
||
const onDisplayValuesChange = (nextValues, info) => {
|
||
triggerChange(nextValues);
|
||
if (info.type === "remove" || info.type === "clear") {
|
||
info.values.forEach((item) => {
|
||
triggerSelect(item.value, false);
|
||
});
|
||
}
|
||
};
|
||
const onInternalSearch = (searchText, info) => {
|
||
var _a;
|
||
setSearchValue(searchText);
|
||
setActiveValue(null);
|
||
if (info.source === "submit") {
|
||
const formatted = (searchText || "").trim();
|
||
if (formatted) {
|
||
const newRawValues = Array.from(/* @__PURE__ */ new Set([...rawValues.value, formatted]));
|
||
triggerChange(newRawValues);
|
||
triggerSelect(formatted, true);
|
||
setSearchValue("");
|
||
}
|
||
return;
|
||
}
|
||
if (info.source !== "blur") {
|
||
if (props2.mode === "combobox") {
|
||
triggerChange(searchText);
|
||
}
|
||
(_a = props2.onSearch) === null || _a === void 0 ? void 0 : _a.call(props2, searchText);
|
||
}
|
||
};
|
||
const onInternalSearchSplit = (words) => {
|
||
let patchValues = words;
|
||
if (props2.mode !== "tags") {
|
||
patchValues = words.map((word) => {
|
||
const opt = labelOptions.value.get(word);
|
||
return opt === null || opt === void 0 ? void 0 : opt.value;
|
||
}).filter((val) => val !== void 0);
|
||
}
|
||
const newRawValues = Array.from(/* @__PURE__ */ new Set([...rawValues.value, ...patchValues]));
|
||
triggerChange(newRawValues);
|
||
newRawValues.forEach((newRawValue) => {
|
||
triggerSelect(newRawValue, true);
|
||
});
|
||
};
|
||
const realVirtual = computed(() => props2.virtual !== false && props2.dropdownMatchSelectWidth !== false);
|
||
useProvideSelectProps(toReactive(_extends(_extends({}, parsedOptions), {
|
||
flattenOptions: displayOptions,
|
||
onActiveValue,
|
||
defaultActiveFirstOption: mergedDefaultActiveFirstOption,
|
||
onSelect: onInternalSelect,
|
||
menuItemSelectedIcon: toRef(props2, "menuItemSelectedIcon"),
|
||
rawValues,
|
||
fieldNames: mergedFieldNames,
|
||
virtual: realVirtual,
|
||
listHeight: toRef(props2, "listHeight"),
|
||
listItemHeight: toRef(props2, "listItemHeight"),
|
||
childrenAsData
|
||
})));
|
||
const selectRef = ref();
|
||
expose({
|
||
focus() {
|
||
var _a;
|
||
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
||
},
|
||
blur() {
|
||
var _a;
|
||
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.blur();
|
||
},
|
||
scrollTo(arg) {
|
||
var _a;
|
||
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
|
||
}
|
||
});
|
||
const pickProps = computed(() => {
|
||
return omit(props2, [
|
||
"id",
|
||
"mode",
|
||
"prefixCls",
|
||
"backfill",
|
||
"fieldNames",
|
||
// Search
|
||
"inputValue",
|
||
"searchValue",
|
||
"onSearch",
|
||
"autoClearSearchValue",
|
||
// Select
|
||
"onSelect",
|
||
"onDeselect",
|
||
"dropdownMatchSelectWidth",
|
||
// Options
|
||
"filterOption",
|
||
"filterSort",
|
||
"optionFilterProp",
|
||
"optionLabelProp",
|
||
"options",
|
||
"children",
|
||
"defaultActiveFirstOption",
|
||
"menuItemSelectedIcon",
|
||
"virtual",
|
||
"listHeight",
|
||
"listItemHeight",
|
||
// Value
|
||
"value",
|
||
"defaultValue",
|
||
"labelInValue",
|
||
"onChange"
|
||
]);
|
||
});
|
||
return () => {
|
||
return createVNode(BaseSelect, _objectSpread$1(_objectSpread$1(_objectSpread$1({}, pickProps.value), attrs), {}, {
|
||
"id": mergedId,
|
||
"prefixCls": props2.prefixCls,
|
||
"ref": selectRef,
|
||
"omitDomProps": OMIT_DOM_PROPS,
|
||
"mode": props2.mode,
|
||
"displayValues": displayValues.value,
|
||
"onDisplayValuesChange": onDisplayValuesChange,
|
||
"searchValue": mergedSearchValue.value,
|
||
"onSearch": onInternalSearch,
|
||
"onSearchSplit": onInternalSearchSplit,
|
||
"dropdownMatchSelectWidth": props2.dropdownMatchSelectWidth,
|
||
"OptionList": OptionList,
|
||
"emptyOptions": !displayOptions.value.length,
|
||
"activeValue": activeValue.value,
|
||
"activeDescendantId": `${mergedId}_list_${accessibilityIndex.value}`
|
||
}), slots);
|
||
};
|
||
}
|
||
});
|
||
const Option = () => null;
|
||
Option.isSelectOption = true;
|
||
Option.displayName = "ASelectOption";
|
||
const OptGroup = () => null;
|
||
OptGroup.isSelectOptGroup = true;
|
||
OptGroup.displayName = "ASelectOptGroup";
|
||
function getIcons(props2) {
|
||
let slots = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
||
const {
|
||
loading,
|
||
multiple,
|
||
prefixCls,
|
||
hasFeedback,
|
||
feedbackIcon,
|
||
showArrow
|
||
} = props2;
|
||
const suffixIcon = props2.suffixIcon || slots.suffixIcon && slots.suffixIcon();
|
||
const clearIcon = props2.clearIcon || slots.clearIcon && slots.clearIcon();
|
||
const menuItemSelectedIcon = props2.menuItemSelectedIcon || slots.menuItemSelectedIcon && slots.menuItemSelectedIcon();
|
||
const removeIcon = props2.removeIcon || slots.removeIcon && slots.removeIcon();
|
||
const mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : createVNode(CloseCircleFilled, null, null);
|
||
const getSuffixIconNode = (arrowIcon) => createVNode(Fragment, null, [showArrow !== false && arrowIcon, hasFeedback && feedbackIcon]);
|
||
let mergedSuffixIcon = null;
|
||
if (suffixIcon !== void 0) {
|
||
mergedSuffixIcon = getSuffixIconNode(suffixIcon);
|
||
} else if (loading) {
|
||
mergedSuffixIcon = getSuffixIconNode(createVNode(LoadingOutlined, {
|
||
"spin": true
|
||
}, null));
|
||
} else {
|
||
const iconCls = `${prefixCls}-suffix`;
|
||
mergedSuffixIcon = (_ref) => {
|
||
let {
|
||
open: open2,
|
||
showSearch
|
||
} = _ref;
|
||
if (open2 && showSearch) {
|
||
return getSuffixIconNode(createVNode(SearchOutlined, {
|
||
"class": iconCls
|
||
}, null));
|
||
}
|
||
return getSuffixIconNode(createVNode(DownOutlined, {
|
||
"class": iconCls
|
||
}, null));
|
||
};
|
||
}
|
||
let mergedItemIcon = null;
|
||
if (menuItemSelectedIcon !== void 0) {
|
||
mergedItemIcon = menuItemSelectedIcon;
|
||
} else if (multiple) {
|
||
mergedItemIcon = createVNode(CheckOutlined, null, null);
|
||
} else {
|
||
mergedItemIcon = null;
|
||
}
|
||
let mergedRemoveIcon = null;
|
||
if (removeIcon !== void 0) {
|
||
mergedRemoveIcon = removeIcon;
|
||
} else {
|
||
mergedRemoveIcon = createVNode(CloseOutlined, null, null);
|
||
}
|
||
return {
|
||
clearIcon: mergedClearIcon,
|
||
suffixIcon: mergedSuffixIcon,
|
||
itemIcon: mergedItemIcon,
|
||
removeIcon: mergedRemoveIcon
|
||
};
|
||
}
|
||
const genItemStyle = (token) => {
|
||
const {
|
||
controlPaddingHorizontal
|
||
} = token;
|
||
return {
|
||
position: "relative",
|
||
display: "block",
|
||
minHeight: token.controlHeight,
|
||
padding: `${(token.controlHeight - token.fontSize * token.lineHeight) / 2}px ${controlPaddingHorizontal}px`,
|
||
color: token.colorText,
|
||
fontWeight: "normal",
|
||
fontSize: token.fontSize,
|
||
lineHeight: token.lineHeight,
|
||
boxSizing: "border-box"
|
||
};
|
||
};
|
||
const genSingleStyle$1 = (token) => {
|
||
const {
|
||
antCls,
|
||
componentCls
|
||
} = token;
|
||
const selectItemCls = `${componentCls}-item`;
|
||
return [
|
||
{
|
||
[`${componentCls}-dropdown`]: _extends(_extends({}, resetComponent(token)), {
|
||
position: "absolute",
|
||
top: -9999,
|
||
zIndex: token.zIndexPopup,
|
||
boxSizing: "border-box",
|
||
padding: token.paddingXXS,
|
||
overflow: "hidden",
|
||
fontSize: token.fontSize,
|
||
// Fix select render lag of long text in chrome
|
||
// https://github.com/ant-design/ant-design/issues/11456
|
||
// https://github.com/ant-design/ant-design/issues/11843
|
||
fontVariant: "initial",
|
||
backgroundColor: token.colorBgElevated,
|
||
borderRadius: token.borderRadiusLG,
|
||
outline: "none",
|
||
boxShadow: token.boxShadowSecondary,
|
||
[`
|
||
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
|
||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft
|
||
`]: {
|
||
animationName: slideUpIn
|
||
},
|
||
[`
|
||
&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
|
||
&${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft
|
||
`]: {
|
||
animationName: slideDownIn
|
||
},
|
||
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft`]: {
|
||
animationName: slideUpOut
|
||
},
|
||
[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft`]: {
|
||
animationName: slideDownOut
|
||
},
|
||
"&-hidden": {
|
||
display: "none"
|
||
},
|
||
"&-empty": {
|
||
color: token.colorTextDisabled
|
||
},
|
||
// ========================= Options =========================
|
||
[`${selectItemCls}-empty`]: _extends(_extends({}, genItemStyle(token)), {
|
||
color: token.colorTextDisabled
|
||
}),
|
||
[`${selectItemCls}`]: _extends(_extends({}, genItemStyle(token)), {
|
||
cursor: "pointer",
|
||
transition: `background ${token.motionDurationSlow} ease`,
|
||
borderRadius: token.borderRadiusSM,
|
||
// =========== Group ============
|
||
"&-group": {
|
||
color: token.colorTextDescription,
|
||
fontSize: token.fontSizeSM,
|
||
cursor: "default"
|
||
},
|
||
// =========== Option ===========
|
||
"&-option": {
|
||
display: "flex",
|
||
"&-content": _extends({
|
||
flex: "auto"
|
||
}, textEllipsis),
|
||
"&-state": {
|
||
flex: "none"
|
||
},
|
||
[`&-active:not(${selectItemCls}-option-disabled)`]: {
|
||
backgroundColor: token.controlItemBgHover
|
||
},
|
||
[`&-selected:not(${selectItemCls}-option-disabled)`]: {
|
||
color: token.colorText,
|
||
fontWeight: token.fontWeightStrong,
|
||
backgroundColor: token.controlItemBgActive,
|
||
[`${selectItemCls}-option-state`]: {
|
||
color: token.colorPrimary
|
||
}
|
||
},
|
||
"&-disabled": {
|
||
[`&${selectItemCls}-option-selected`]: {
|
||
backgroundColor: token.colorBgContainerDisabled
|
||
},
|
||
color: token.colorTextDisabled,
|
||
cursor: "not-allowed"
|
||
},
|
||
"&-grouped": {
|
||
paddingInlineStart: token.controlPaddingHorizontal * 2
|
||
}
|
||
}
|
||
}),
|
||
// =========================== RTL ===========================
|
||
"&-rtl": {
|
||
direction: "rtl"
|
||
}
|
||
})
|
||
},
|
||
// Follow code may reuse in other components
|
||
initSlideMotion(token, "slide-up"),
|
||
initSlideMotion(token, "slide-down"),
|
||
initMoveMotion(token, "move-up"),
|
||
initMoveMotion(token, "move-down")
|
||
];
|
||
};
|
||
const FIXED_ITEM_MARGIN = 2;
|
||
function getSelectItemStyle(_ref) {
|
||
let {
|
||
controlHeightSM,
|
||
controlHeight,
|
||
lineWidth: borderWidth
|
||
} = _ref;
|
||
const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
|
||
const selectItemMargin = Math.ceil(selectItemDist / 2);
|
||
return [selectItemDist, selectItemMargin];
|
||
}
|
||
function genSizeStyle$1(token, suffix) {
|
||
const {
|
||
componentCls,
|
||
iconCls
|
||
} = token;
|
||
const selectOverflowPrefixCls = `${componentCls}-selection-overflow`;
|
||
const selectItemHeight = token.controlHeightSM;
|
||
const [selectItemDist] = getSelectItemStyle(token);
|
||
const suffixCls = suffix ? `${componentCls}-${suffix}` : "";
|
||
return {
|
||
[`${componentCls}-multiple${suffixCls}`]: {
|
||
fontSize: token.fontSize,
|
||
/**
|
||
* Do not merge `height` & `line-height` under style with `selection` & `search`, since chrome
|
||
* may update to redesign with its align logic.
|
||
*/
|
||
// =========================== Overflow ===========================
|
||
[selectOverflowPrefixCls]: {
|
||
position: "relative",
|
||
display: "flex",
|
||
flex: "auto",
|
||
flexWrap: "wrap",
|
||
maxWidth: "100%",
|
||
"&-item": {
|
||
flex: "none",
|
||
alignSelf: "center",
|
||
maxWidth: "100%",
|
||
display: "inline-flex"
|
||
}
|
||
},
|
||
// ========================= Selector =========================
|
||
[`${componentCls}-selector`]: {
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
alignItems: "center",
|
||
// Multiple is little different that horizontal is follow the vertical
|
||
padding: `${selectItemDist - FIXED_ITEM_MARGIN}px ${FIXED_ITEM_MARGIN * 2}px`,
|
||
borderRadius: token.borderRadius,
|
||
[`${componentCls}-show-search&`]: {
|
||
cursor: "text"
|
||
},
|
||
[`${componentCls}-disabled&`]: {
|
||
background: token.colorBgContainerDisabled,
|
||
cursor: "not-allowed"
|
||
},
|
||
"&:after": {
|
||
display: "inline-block",
|
||
width: 0,
|
||
margin: `${FIXED_ITEM_MARGIN}px 0`,
|
||
lineHeight: `${selectItemHeight}px`,
|
||
content: '"\\a0"'
|
||
}
|
||
},
|
||
[`
|
||
&${componentCls}-show-arrow ${componentCls}-selector,
|
||
&${componentCls}-allow-clear ${componentCls}-selector
|
||
`]: {
|
||
paddingInlineEnd: token.fontSizeIcon + token.controlPaddingHorizontal
|
||
},
|
||
// ======================== Selections ========================
|
||
[`${componentCls}-selection-item`]: {
|
||
position: "relative",
|
||
display: "flex",
|
||
flex: "none",
|
||
boxSizing: "border-box",
|
||
maxWidth: "100%",
|
||
height: selectItemHeight,
|
||
marginTop: FIXED_ITEM_MARGIN,
|
||
marginBottom: FIXED_ITEM_MARGIN,
|
||
lineHeight: `${selectItemHeight - token.lineWidth * 2}px`,
|
||
background: token.colorFillSecondary,
|
||
border: `${token.lineWidth}px solid ${token.colorSplit}`,
|
||
borderRadius: token.borderRadiusSM,
|
||
cursor: "default",
|
||
transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
|
||
userSelect: "none",
|
||
marginInlineEnd: FIXED_ITEM_MARGIN * 2,
|
||
paddingInlineStart: token.paddingXS,
|
||
paddingInlineEnd: token.paddingXS / 2,
|
||
[`${componentCls}-disabled&`]: {
|
||
color: token.colorTextDisabled,
|
||
borderColor: token.colorBorder,
|
||
cursor: "not-allowed"
|
||
},
|
||
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
||
"&-content": {
|
||
display: "inline-block",
|
||
marginInlineEnd: token.paddingXS / 2,
|
||
overflow: "hidden",
|
||
whiteSpace: "pre",
|
||
textOverflow: "ellipsis"
|
||
},
|
||
"&-remove": _extends(_extends({}, resetIcon()), {
|
||
display: "inline-block",
|
||
color: token.colorIcon,
|
||
fontWeight: "bold",
|
||
fontSize: 10,
|
||
lineHeight: "inherit",
|
||
cursor: "pointer",
|
||
[`> ${iconCls}`]: {
|
||
verticalAlign: "-0.2em"
|
||
},
|
||
"&:hover": {
|
||
color: token.colorIconHover
|
||
}
|
||
})
|
||
},
|
||
// ========================== Input ==========================
|
||
[`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
|
||
[`${componentCls}-selection-search`]: {
|
||
marginInlineStart: 0
|
||
}
|
||
},
|
||
[`${componentCls}-selection-search`]: {
|
||
display: "inline-flex",
|
||
position: "relative",
|
||
maxWidth: "100%",
|
||
marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist,
|
||
[`
|
||
&-input,
|
||
&-mirror
|
||
`]: {
|
||
height: selectItemHeight,
|
||
fontFamily: token.fontFamily,
|
||
lineHeight: `${selectItemHeight}px`,
|
||
transition: `all ${token.motionDurationSlow}`
|
||
},
|
||
"&-input": {
|
||
width: "100%",
|
||
minWidth: 4.1
|
||
// fix search cursor missing
|
||
},
|
||
"&-mirror": {
|
||
position: "absolute",
|
||
top: 0,
|
||
insetInlineStart: 0,
|
||
insetInlineEnd: "auto",
|
||
zIndex: 999,
|
||
whiteSpace: "pre",
|
||
visibility: "hidden"
|
||
}
|
||
},
|
||
// ======================= Placeholder =======================
|
||
[`${componentCls}-selection-placeholder `]: {
|
||
position: "absolute",
|
||
top: "50%",
|
||
insetInlineStart: token.inputPaddingHorizontalBase,
|
||
insetInlineEnd: token.inputPaddingHorizontalBase,
|
||
transform: "translateY(-50%)",
|
||
transition: `all ${token.motionDurationSlow}`
|
||
}
|
||
}
|
||
};
|
||
}
|
||
function genMultipleStyle(token) {
|
||
const {
|
||
componentCls
|
||
} = token;
|
||
const smallToken = merge(token, {
|
||
controlHeight: token.controlHeightSM,
|
||
controlHeightSM: token.controlHeightXS,
|
||
borderRadius: token.borderRadiusSM,
|
||
borderRadiusSM: token.borderRadiusXS
|
||
});
|
||
const [, smSelectItemMargin] = getSelectItemStyle(token);
|
||
return [
|
||
genSizeStyle$1(token),
|
||
// ======================== Small ========================
|
||
// Shared
|
||
genSizeStyle$1(smallToken, "sm"),
|
||
// Padding
|
||
{
|
||
[`${componentCls}-multiple${componentCls}-sm`]: {
|
||
[`${componentCls}-selection-placeholder`]: {
|
||
insetInlineStart: token.controlPaddingHorizontalSM - token.lineWidth,
|
||
insetInlineEnd: "auto"
|
||
},
|
||
// https://github.com/ant-design/ant-design/issues/29559
|
||
[`${componentCls}-selection-search`]: {
|
||
marginInlineStart: smSelectItemMargin
|
||
}
|
||
}
|
||
},
|
||
// ======================== Large ========================
|
||
// Shared
|
||
genSizeStyle$1(merge(token, {
|
||
fontSize: token.fontSizeLG,
|
||
controlHeight: token.controlHeightLG,
|
||
controlHeightSM: token.controlHeight,
|
||
borderRadius: token.borderRadiusLG,
|
||
borderRadiusSM: token.borderRadius
|
||
}), "lg")
|
||
];
|
||
}
|
||
function genSizeStyle(token, suffix) {
|
||
const {
|
||
componentCls,
|
||
inputPaddingHorizontalBase,
|
||
borderRadius
|
||
} = token;
|
||
const selectHeightWithoutBorder = token.controlHeight - token.lineWidth * 2;
|
||
const selectionItemPadding = Math.ceil(token.fontSize * 1.25);
|
||
const suffixCls = suffix ? `${componentCls}-${suffix}` : "";
|
||
return {
|
||
[`${componentCls}-single${suffixCls}`]: {
|
||
fontSize: token.fontSize,
|
||
// ========================= Selector =========================
|
||
[`${componentCls}-selector`]: _extends(_extends({}, resetComponent(token)), {
|
||
display: "flex",
|
||
borderRadius,
|
||
[`${componentCls}-selection-search`]: {
|
||
position: "absolute",
|
||
top: 0,
|
||
insetInlineStart: inputPaddingHorizontalBase,
|
||
insetInlineEnd: inputPaddingHorizontalBase,
|
||
bottom: 0,
|
||
"&-input": {
|
||
width: "100%"
|
||
}
|
||
},
|
||
[`
|
||
${componentCls}-selection-item,
|
||
${componentCls}-selection-placeholder
|
||
`]: {
|
||
padding: 0,
|
||
lineHeight: `${selectHeightWithoutBorder}px`,
|
||
transition: `all ${token.motionDurationSlow}`,
|
||
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
|
||
"@supports (-moz-appearance: meterbar)": {
|
||
lineHeight: `${selectHeightWithoutBorder}px`
|
||
}
|
||
},
|
||
[`${componentCls}-selection-item`]: {
|
||
position: "relative",
|
||
userSelect: "none"
|
||
},
|
||
[`${componentCls}-selection-placeholder`]: {
|
||
transition: "none",
|
||
pointerEvents: "none"
|
||
},
|
||
// For common baseline align
|
||
[[
|
||
"&:after",
|
||
/* For '' value baseline align */
|
||
`${componentCls}-selection-item:after`,
|
||
/* For undefined value baseline align */
|
||
`${componentCls}-selection-placeholder:after`
|
||
].join(",")]: {
|
||
display: "inline-block",
|
||
width: 0,
|
||
visibility: "hidden",
|
||
content: '"\\a0"'
|
||
}
|
||
}),
|
||
[`
|
||
&${componentCls}-show-arrow ${componentCls}-selection-item,
|
||
&${componentCls}-show-arrow ${componentCls}-selection-placeholder
|
||
`]: {
|
||
paddingInlineEnd: selectionItemPadding
|
||
},
|
||
// Opacity selection if open
|
||
[`&${componentCls}-open ${componentCls}-selection-item`]: {
|
||
color: token.colorTextPlaceholder
|
||
},
|
||
// ========================== Input ==========================
|
||
// We only change the style of non-customize input which is only support by `combobox` mode.
|
||
// Not customize
|
||
[`&:not(${componentCls}-customize-input)`]: {
|
||
[`${componentCls}-selector`]: {
|
||
width: "100%",
|
||
height: token.controlHeight,
|
||
padding: `0 ${inputPaddingHorizontalBase}px`,
|
||
[`${componentCls}-selection-search-input`]: {
|
||
height: selectHeightWithoutBorder
|
||
},
|
||
"&:after": {
|
||
lineHeight: `${selectHeightWithoutBorder}px`
|
||
}
|
||
}
|
||
},
|
||
[`&${componentCls}-customize-input`]: {
|
||
[`${componentCls}-selector`]: {
|
||
"&:after": {
|
||
display: "none"
|
||
},
|
||
[`${componentCls}-selection-search`]: {
|
||
position: "static",
|
||
width: "100%"
|
||
},
|
||
[`${componentCls}-selection-placeholder`]: {
|
||
position: "absolute",
|
||
insetInlineStart: 0,
|
||
insetInlineEnd: 0,
|
||
padding: `0 ${inputPaddingHorizontalBase}px`,
|
||
"&:after": {
|
||
display: "none"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
}
|
||
function genSingleStyle(token) {
|
||
const {
|
||
componentCls
|
||
} = token;
|
||
const inputPaddingHorizontalSM = token.controlPaddingHorizontalSM - token.lineWidth;
|
||
return [
|
||
genSizeStyle(token),
|
||
// ======================== Small ========================
|
||
// Shared
|
||
genSizeStyle(merge(token, {
|
||
controlHeight: token.controlHeightSM,
|
||
borderRadius: token.borderRadiusSM
|
||
}), "sm"),
|
||
// padding
|
||
{
|
||
[`${componentCls}-single${componentCls}-sm`]: {
|
||
[`&:not(${componentCls}-customize-input)`]: {
|
||
[`${componentCls}-selection-search`]: {
|
||
insetInlineStart: inputPaddingHorizontalSM,
|
||
insetInlineEnd: inputPaddingHorizontalSM
|
||
},
|
||
[`${componentCls}-selector`]: {
|
||
padding: `0 ${inputPaddingHorizontalSM}px`
|
||
},
|
||
// With arrow should provides `padding-right` to show the arrow
|
||
[`&${componentCls}-show-arrow ${componentCls}-selection-search`]: {
|
||
insetInlineEnd: inputPaddingHorizontalSM + token.fontSize * 1.5
|
||
},
|
||
[`
|
||
&${componentCls}-show-arrow ${componentCls}-selection-item,
|
||
&${componentCls}-show-arrow ${componentCls}-selection-placeholder
|
||
`]: {
|
||
paddingInlineEnd: token.fontSize * 1.5
|
||
}
|
||
}
|
||
}
|
||
},
|
||
// ======================== Large ========================
|
||
// Shared
|
||
genSizeStyle(merge(token, {
|
||
controlHeight: token.controlHeightLG,
|
||
fontSize: token.fontSizeLG,
|
||
borderRadius: token.borderRadiusLG
|
||
}), "lg")
|
||
];
|
||
}
|
||
const genSelectorStyle = (token) => {
|
||
const {
|
||
componentCls
|
||
} = token;
|
||
return {
|
||
position: "relative",
|
||
backgroundColor: token.colorBgContainer,
|
||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
|
||
input: {
|
||
cursor: "pointer"
|
||
},
|
||
[`${componentCls}-show-search&`]: {
|
||
cursor: "text",
|
||
input: {
|
||
cursor: "auto",
|
||
color: "inherit"
|
||
}
|
||
},
|
||
[`${componentCls}-disabled&`]: {
|
||
color: token.colorTextDisabled,
|
||
background: token.colorBgContainerDisabled,
|
||
cursor: "not-allowed",
|
||
[`${componentCls}-multiple&`]: {
|
||
background: token.colorBgContainerDisabled
|
||
},
|
||
input: {
|
||
cursor: "not-allowed"
|
||
}
|
||
}
|
||
};
|
||
};
|
||
const genStatusStyle = function(rootSelectCls, token) {
|
||
let overwriteDefaultBorder = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
|
||
const {
|
||
componentCls,
|
||
borderHoverColor,
|
||
outlineColor,
|
||
antCls
|
||
} = token;
|
||
const overwriteStyle = overwriteDefaultBorder ? {
|
||
[`${componentCls}-selector`]: {
|
||
borderColor: borderHoverColor
|
||
}
|
||
} : {};
|
||
return {
|
||
[rootSelectCls]: {
|
||
[`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: _extends(_extends({}, overwriteStyle), {
|
||
[`${componentCls}-focused& ${componentCls}-selector`]: {
|
||
borderColor: borderHoverColor,
|
||
boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
|
||
borderInlineEndWidth: `${token.controlLineWidth}px !important`,
|
||
outline: 0
|
||
},
|
||
[`&:hover ${componentCls}-selector`]: {
|
||
borderColor: borderHoverColor,
|
||
borderInlineEndWidth: `${token.controlLineWidth}px !important`
|
||
}
|
||
})
|
||
}
|
||
};
|
||
};
|
||
const getSearchInputWithoutBorderStyle = (token) => {
|
||
const {
|
||
componentCls
|
||
} = token;
|
||
return {
|
||
[`${componentCls}-selection-search-input`]: {
|
||
margin: 0,
|
||
padding: 0,
|
||
background: "transparent",
|
||
border: "none",
|
||
outline: "none",
|
||
appearance: "none",
|
||
"&::-webkit-search-cancel-button": {
|
||
display: "none",
|
||
"-webkit-appearance": "none"
|
||
}
|
||
}
|
||
};
|
||
};
|
||
const genBaseStyle = (token) => {
|
||
const {
|
||
componentCls,
|
||
inputPaddingHorizontalBase,
|
||
iconCls
|
||
} = token;
|
||
return {
|
||
[componentCls]: _extends(_extends({}, resetComponent(token)), {
|
||
position: "relative",
|
||
display: "inline-block",
|
||
cursor: "pointer",
|
||
[`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: _extends(_extends({}, genSelectorStyle(token)), getSearchInputWithoutBorderStyle(token)),
|
||
// [`&:not(&-disabled):hover ${selectCls}-selector`]: {
|
||
// ...genHoverStyle(token),
|
||
// },
|
||
// ======================== Selection ========================
|
||
[`${componentCls}-selection-item`]: _extends({
|
||
flex: 1,
|
||
fontWeight: "normal"
|
||
}, textEllipsis),
|
||
// ======================= Placeholder =======================
|
||
[`${componentCls}-selection-placeholder`]: _extends(_extends({}, textEllipsis), {
|
||
flex: 1,
|
||
color: token.colorTextPlaceholder,
|
||
pointerEvents: "none"
|
||
}),
|
||
// ========================== Arrow ==========================
|
||
[`${componentCls}-arrow`]: _extends(_extends({}, resetIcon()), {
|
||
position: "absolute",
|
||
top: "50%",
|
||
insetInlineStart: "auto",
|
||
insetInlineEnd: inputPaddingHorizontalBase,
|
||
height: token.fontSizeIcon,
|
||
marginTop: -token.fontSizeIcon / 2,
|
||
color: token.colorTextQuaternary,
|
||
fontSize: token.fontSizeIcon,
|
||
lineHeight: 1,
|
||
textAlign: "center",
|
||
pointerEvents: "none",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
[iconCls]: {
|
||
verticalAlign: "top",
|
||
transition: `transform ${token.motionDurationSlow}`,
|
||
"> svg": {
|
||
verticalAlign: "top"
|
||
},
|
||
[`&:not(${componentCls}-suffix)`]: {
|
||
pointerEvents: "auto"
|
||
}
|
||
},
|
||
[`${componentCls}-disabled &`]: {
|
||
cursor: "not-allowed"
|
||
},
|
||
"> *:not(:last-child)": {
|
||
marginInlineEnd: 8
|
||
// FIXME: magic
|
||
}
|
||
}),
|
||
// ========================== Clear ==========================
|
||
[`${componentCls}-clear`]: {
|
||
position: "absolute",
|
||
top: "50%",
|
||
insetInlineStart: "auto",
|
||
insetInlineEnd: inputPaddingHorizontalBase,
|
||
zIndex: 1,
|
||
display: "inline-block",
|
||
width: token.fontSizeIcon,
|
||
height: token.fontSizeIcon,
|
||
marginTop: -token.fontSizeIcon / 2,
|
||
color: token.colorTextQuaternary,
|
||
fontSize: token.fontSizeIcon,
|
||
fontStyle: "normal",
|
||
lineHeight: 1,
|
||
textAlign: "center",
|
||
textTransform: "none",
|
||
background: token.colorBgContainer,
|
||
cursor: "pointer",
|
||
opacity: 0,
|
||
transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
|
||
textRendering: "auto",
|
||
"&:before": {
|
||
display: "block"
|
||
},
|
||
"&:hover": {
|
||
color: token.colorTextTertiary
|
||
}
|
||
},
|
||
"&:hover": {
|
||
[`${componentCls}-clear`]: {
|
||
opacity: 1
|
||
}
|
||
}
|
||
}),
|
||
// ========================= Feedback ==========================
|
||
[`${componentCls}-has-feedback`]: {
|
||
[`${componentCls}-clear`]: {
|
||
insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS
|
||
}
|
||
}
|
||
};
|
||
};
|
||
const genSelectStyle = (token) => {
|
||
const {
|
||
componentCls
|
||
} = token;
|
||
return [
|
||
{
|
||
[componentCls]: {
|
||
// ==================== BorderLess ====================
|
||
[`&-borderless ${componentCls}-selector`]: {
|
||
backgroundColor: `transparent !important`,
|
||
borderColor: `transparent !important`,
|
||
boxShadow: `none !important`
|
||
},
|
||
// ==================== In Form ====================
|
||
[`&${componentCls}-in-form-item`]: {
|
||
width: "100%"
|
||
}
|
||
}
|
||
},
|
||
// =====================================================
|
||
// == LTR ==
|
||
// =====================================================
|
||
// Base
|
||
genBaseStyle(token),
|
||
// Single
|
||
genSingleStyle(token),
|
||
// Multiple
|
||
genMultipleStyle(token),
|
||
// Dropdown
|
||
genSingleStyle$1(token),
|
||
// =====================================================
|
||
// == RTL ==
|
||
// =====================================================
|
||
{
|
||
[`${componentCls}-rtl`]: {
|
||
direction: "rtl"
|
||
}
|
||
},
|
||
// =====================================================
|
||
// == Status ==
|
||
// =====================================================
|
||
genStatusStyle(componentCls, merge(token, {
|
||
borderHoverColor: token.colorPrimaryHover,
|
||
outlineColor: token.controlOutline
|
||
})),
|
||
genStatusStyle(`${componentCls}-status-error`, merge(token, {
|
||
borderHoverColor: token.colorErrorHover,
|
||
outlineColor: token.colorErrorOutline
|
||
}), true),
|
||
genStatusStyle(`${componentCls}-status-warning`, merge(token, {
|
||
borderHoverColor: token.colorWarningHover,
|
||
outlineColor: token.colorWarningOutline
|
||
}), true),
|
||
// =====================================================
|
||
// == Space Compact ==
|
||
// =====================================================
|
||
genCompactItemStyle(token, {
|
||
borderElCls: `${componentCls}-selector`,
|
||
focusElCls: `${componentCls}-focused`
|
||
})
|
||
];
|
||
};
|
||
const useSelectStyle = genComponentStyleHook("Select", (token, _ref) => {
|
||
let {
|
||
rootPrefixCls
|
||
} = _ref;
|
||
const selectToken = merge(token, {
|
||
rootPrefixCls,
|
||
inputPaddingHorizontalBase: token.paddingSM - 1
|
||
});
|
||
return [genSelectStyle(selectToken)];
|
||
}, (token) => ({
|
||
zIndexPopup: token.zIndexPopupBase + 50
|
||
}));
|
||
const selectProps = () => _extends(_extends({}, omit(selectProps$1(), ["inputIcon", "mode", "getInputElement", "getRawInputElement", "backfill"])), {
|
||
value: someType([Array, Object, String, Number]),
|
||
defaultValue: someType([Array, Object, String, Number]),
|
||
notFoundContent: PropTypes.any,
|
||
suffixIcon: PropTypes.any,
|
||
itemIcon: PropTypes.any,
|
||
size: stringType(),
|
||
mode: stringType(),
|
||
bordered: booleanType(true),
|
||
transitionName: String,
|
||
choiceTransitionName: stringType(""),
|
||
popupClassName: String,
|
||
/** @deprecated Please use `popupClassName` instead */
|
||
dropdownClassName: String,
|
||
placement: stringType(),
|
||
status: stringType(),
|
||
"onUpdate:value": functionType()
|
||
});
|
||
const SECRET_COMBOBOX_MODE_DO_NOT_USE = "SECRET_COMBOBOX_MODE_DO_NOT_USE";
|
||
const Select = defineComponent({
|
||
compatConfig: {
|
||
MODE: 3
|
||
},
|
||
name: "ASelect",
|
||
Option,
|
||
OptGroup,
|
||
inheritAttrs: false,
|
||
props: initDefaultProps(selectProps(), {
|
||
listHeight: 256,
|
||
listItemHeight: 24
|
||
}),
|
||
SECRET_COMBOBOX_MODE_DO_NOT_USE,
|
||
slots: Object,
|
||
setup(props2, _ref) {
|
||
let {
|
||
attrs,
|
||
emit,
|
||
slots,
|
||
expose
|
||
} = _ref;
|
||
const selectRef = ref();
|
||
const formItemContext = useInjectFormItemContext();
|
||
const formItemInputContext = FormItemInputContext.useInject();
|
||
const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props2.status));
|
||
const focus = () => {
|
||
var _a;
|
||
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.focus();
|
||
};
|
||
const blur = () => {
|
||
var _a;
|
||
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.blur();
|
||
};
|
||
const scrollTo = (arg) => {
|
||
var _a;
|
||
(_a = selectRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg);
|
||
};
|
||
const mode = computed(() => {
|
||
const {
|
||
mode: mode2
|
||
} = props2;
|
||
if (mode2 === "combobox") {
|
||
return void 0;
|
||
}
|
||
if (mode2 === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
|
||
return "combobox";
|
||
}
|
||
return mode2;
|
||
});
|
||
const {
|
||
prefixCls,
|
||
direction,
|
||
renderEmpty,
|
||
size: contextSize,
|
||
getPrefixCls,
|
||
getPopupContainer,
|
||
disabled,
|
||
select
|
||
} = useConfigInject("select", props2);
|
||
const {
|
||
compactSize,
|
||
compactItemClassnames
|
||
} = useCompactItemContext(prefixCls, direction);
|
||
const mergedSize = computed(() => compactSize.value || contextSize.value);
|
||
const contextDisabled = useInjectDisabled();
|
||
const mergedDisabled = computed(() => {
|
||
var _a;
|
||
return (_a = disabled.value) !== null && _a !== void 0 ? _a : contextDisabled.value;
|
||
});
|
||
const [wrapSSR, hashId] = useSelectStyle(prefixCls);
|
||
const rootPrefixCls = computed(() => getPrefixCls());
|
||
const placement = computed(() => {
|
||
if (props2.placement !== void 0) {
|
||
return props2.placement;
|
||
}
|
||
return direction.value === "rtl" ? "bottomRight" : "bottomLeft";
|
||
});
|
||
const transitionName = computed(() => getTransitionName(rootPrefixCls.value, getTransitionDirection(placement.value), props2.transitionName));
|
||
const mergedClassName = computed(() => classNames({
|
||
[`${prefixCls.value}-lg`]: mergedSize.value === "large",
|
||
[`${prefixCls.value}-sm`]: mergedSize.value === "small",
|
||
[`${prefixCls.value}-rtl`]: direction.value === "rtl",
|
||
[`${prefixCls.value}-borderless`]: !props2.bordered,
|
||
[`${prefixCls.value}-in-form-item`]: formItemInputContext.isFormItemInput
|
||
}, getStatusClassNames(prefixCls.value, mergedStatus.value, formItemInputContext.hasFeedback), compactItemClassnames.value, hashId.value));
|
||
const triggerChange = function() {
|
||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||
args[_key] = arguments[_key];
|
||
}
|
||
emit("update:value", args[0]);
|
||
emit("change", ...args);
|
||
formItemContext.onFieldChange();
|
||
};
|
||
const handleBlur = (e) => {
|
||
emit("blur", e);
|
||
formItemContext.onFieldBlur();
|
||
};
|
||
expose({
|
||
blur,
|
||
focus,
|
||
scrollTo
|
||
});
|
||
const isMultiple2 = computed(() => mode.value === "multiple" || mode.value === "tags");
|
||
const mergedShowArrow = computed(() => props2.showArrow !== void 0 ? props2.showArrow : props2.loading || !(isMultiple2.value || mode.value === "combobox"));
|
||
return () => {
|
||
var _a, _b, _c, _d;
|
||
const {
|
||
notFoundContent,
|
||
listHeight = 256,
|
||
listItemHeight = 24,
|
||
popupClassName,
|
||
dropdownClassName,
|
||
virtual,
|
||
dropdownMatchSelectWidth,
|
||
id = formItemContext.id.value,
|
||
placeholder = (_a = slots.placeholder) === null || _a === void 0 ? void 0 : _a.call(slots),
|
||
showArrow
|
||
} = props2;
|
||
const {
|
||
hasFeedback,
|
||
feedbackIcon
|
||
} = formItemInputContext;
|
||
let mergedNotFound;
|
||
if (notFoundContent !== void 0) {
|
||
mergedNotFound = notFoundContent;
|
||
} else if (slots.notFoundContent) {
|
||
mergedNotFound = slots.notFoundContent();
|
||
} else if (mode.value === "combobox") {
|
||
mergedNotFound = null;
|
||
} else {
|
||
mergedNotFound = (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty("Select")) || createVNode(DefaultRenderEmpty, {
|
||
"componentName": "Select"
|
||
}, null);
|
||
}
|
||
const {
|
||
suffixIcon,
|
||
itemIcon,
|
||
removeIcon,
|
||
clearIcon
|
||
} = getIcons(_extends(_extends({}, props2), {
|
||
multiple: isMultiple2.value,
|
||
prefixCls: prefixCls.value,
|
||
hasFeedback,
|
||
feedbackIcon,
|
||
showArrow: mergedShowArrow.value
|
||
}), slots);
|
||
const selectProps2 = omit(props2, ["prefixCls", "suffixIcon", "itemIcon", "removeIcon", "clearIcon", "size", "bordered", "status"]);
|
||
const rcSelectRtlDropdownClassName = classNames(popupClassName || dropdownClassName, {
|
||
[`${prefixCls.value}-dropdown-${direction.value}`]: direction.value === "rtl"
|
||
}, hashId.value);
|
||
return wrapSSR(createVNode(Select$1, _objectSpread$1(_objectSpread$1(_objectSpread$1({
|
||
"ref": selectRef,
|
||
"virtual": virtual,
|
||
"dropdownMatchSelectWidth": dropdownMatchSelectWidth
|
||
}, selectProps2), attrs), {}, {
|
||
"showSearch": (_b = props2.showSearch) !== null && _b !== void 0 ? _b : (_c = select === null || select === void 0 ? void 0 : select.value) === null || _c === void 0 ? void 0 : _c.showSearch,
|
||
"placeholder": placeholder,
|
||
"listHeight": listHeight,
|
||
"listItemHeight": listItemHeight,
|
||
"mode": mode.value,
|
||
"prefixCls": prefixCls.value,
|
||
"direction": direction.value,
|
||
"inputIcon": suffixIcon,
|
||
"menuItemSelectedIcon": itemIcon,
|
||
"removeIcon": removeIcon,
|
||
"clearIcon": clearIcon,
|
||
"notFoundContent": mergedNotFound,
|
||
"class": [mergedClassName.value, attrs.class],
|
||
"getPopupContainer": getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
|
||
"dropdownClassName": rcSelectRtlDropdownClassName,
|
||
"onChange": triggerChange,
|
||
"onBlur": handleBlur,
|
||
"id": id,
|
||
"dropdownRender": selectProps2.dropdownRender || slots.dropdownRender,
|
||
"transitionName": transitionName.value,
|
||
"children": (_d = slots.default) === null || _d === void 0 ? void 0 : _d.call(slots),
|
||
"tagRender": props2.tagRender || slots.tagRender,
|
||
"optionLabelRender": slots.optionLabel,
|
||
"maxTagPlaceholder": props2.maxTagPlaceholder || slots.maxTagPlaceholder,
|
||
"showArrow": hasFeedback || showArrow,
|
||
"disabled": mergedDisabled.value
|
||
}), {
|
||
option: slots.option
|
||
}));
|
||
};
|
||
}
|
||
});
|
||
Select.install = function(app) {
|
||
app.component(Select.name, Select);
|
||
app.component(Select.Option.displayName, Select.Option);
|
||
app.component(Select.OptGroup.displayName, Select.OptGroup);
|
||
return app;
|
||
};
|
||
const SelectOption = Select.Option;
|
||
Select.OptGroup;
|
||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||
__name: "BasicSelect",
|
||
__ssrInlineRender: true,
|
||
props: {
|
||
title: {},
|
||
value: { type: [String, Number, Boolean, Array] },
|
||
valueText: { type: [String, Number, Boolean, Array] },
|
||
style: {},
|
||
size: {},
|
||
keyName: {},
|
||
disabled: { type: Boolean },
|
||
mode: {},
|
||
valueName: {},
|
||
multiple: { type: Boolean },
|
||
items: {},
|
||
placeholder: {},
|
||
allowClear: { type: Boolean, default: true },
|
||
hasTooltip: { type: Boolean, default: true }
|
||
},
|
||
emits: ["update:value", "change", "update:valueText"],
|
||
setup(__props, { emit: __emit }) {
|
||
const props2 = __props;
|
||
const emit = __emit;
|
||
const localValue = computed({
|
||
get() {
|
||
return props2.value;
|
||
},
|
||
set(value) {
|
||
emit("update:value", value);
|
||
}
|
||
});
|
||
function setValueText(val) {
|
||
localTextValue.value = get(val, props2.valueName);
|
||
}
|
||
const localTextValue = computed({
|
||
get() {
|
||
return props2.valueText;
|
||
},
|
||
set(value) {
|
||
emit("update:valueText", value);
|
||
}
|
||
});
|
||
const filterOption = (input, option) => {
|
||
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||
};
|
||
const handleChange = (e) => {
|
||
setValueText(props2.items.find((x) => get(x, props2.keyName) === e));
|
||
emit(
|
||
"change",
|
||
props2.items.find((x) => get(x, props2.keyName) === e)
|
||
);
|
||
};
|
||
const { prefixCls } = usePrefix("select");
|
||
return (_ctx, _push, _parent, _attrs) => {
|
||
const _component_a_select = Select;
|
||
const _component_a_select_option = SelectOption;
|
||
const _component_a_tooltip = __nuxt_component_2;
|
||
_push(`<div${ssrRenderAttrs(mergeProps({
|
||
class: [unref(prefixCls)]
|
||
}, _attrs))}><div>${ssrInterpolate(props2.title)}</div>`);
|
||
_push(ssrRenderComponent(_component_a_select, {
|
||
class: "w-full",
|
||
size: props2.size,
|
||
value: localValue.value,
|
||
"onUpdate:value": ($event) => localValue.value = $event,
|
||
disabled: props2.disabled,
|
||
"show-search": "",
|
||
mode: props2.mode,
|
||
style: props2.style,
|
||
multiple: props2.multiple,
|
||
onChange: handleChange,
|
||
placeholder: props2.placeholder,
|
||
allowClear: props2.allowClear,
|
||
"filter-option": filterOption,
|
||
autofocus: false,
|
||
"get-popup-container": (triggerNode) => triggerNode.parentElement,
|
||
onFocus: (e) => e.preventDefault()
|
||
}, {
|
||
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
||
if (_push2) {
|
||
_push2(`<!--[-->`);
|
||
ssrRenderList(props2.items, (val, i) => {
|
||
_push2(ssrRenderComponent(_component_a_select_option, {
|
||
key: i,
|
||
label: unref(get)(val, props2.valueName),
|
||
value: unref(get)(val, props2.keyName)
|
||
}, {
|
||
default: withCtx((_2, _push3, _parent3, _scopeId2) => {
|
||
if (_push3) {
|
||
if (props2.hasTooltip) {
|
||
_push3(ssrRenderComponent(_component_a_tooltip, {
|
||
placement: "left",
|
||
class: "cursor-pointer"
|
||
}, {
|
||
title: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
||
if (_push4) {
|
||
_push4(`<span${_scopeId3}>${ssrInterpolate(unref(get)(val, props2.valueName))}</span>`);
|
||
} else {
|
||
return [
|
||
createVNode("span", null, toDisplayString(unref(get)(val, props2.valueName)), 1)
|
||
];
|
||
}
|
||
}),
|
||
default: withCtx((_3, _push4, _parent4, _scopeId3) => {
|
||
if (_push4) {
|
||
_push4(`<div class="truncate max-w-40"${_scopeId3}>${ssrInterpolate(unref(get)(val, props2.valueName))}</div>`);
|
||
} else {
|
||
return [
|
||
createVNode("div", { class: "truncate max-w-40" }, toDisplayString(unref(get)(val, props2.valueName)), 1)
|
||
];
|
||
}
|
||
}),
|
||
_: 2
|
||
}, _parent3, _scopeId2));
|
||
} else {
|
||
_push3(`<div${_scopeId2}>${ssrInterpolate(unref(get)(val, props2.valueName))}</div>`);
|
||
}
|
||
} else {
|
||
return [
|
||
props2.hasTooltip ? (openBlock(), createBlock(_component_a_tooltip, {
|
||
key: 0,
|
||
placement: "left",
|
||
class: "cursor-pointer"
|
||
}, {
|
||
title: withCtx(() => [
|
||
createVNode("span", null, toDisplayString(unref(get)(val, props2.valueName)), 1)
|
||
]),
|
||
default: withCtx(() => [
|
||
createVNode("div", { class: "truncate max-w-40" }, toDisplayString(unref(get)(val, props2.valueName)), 1)
|
||
]),
|
||
_: 2
|
||
}, 1024)) : (openBlock(), createBlock("div", { key: 1 }, toDisplayString(unref(get)(val, props2.valueName)), 1))
|
||
];
|
||
}
|
||
}),
|
||
_: 2
|
||
}, _parent2, _scopeId));
|
||
});
|
||
_push2(`<!--]-->`);
|
||
} else {
|
||
return [
|
||
(openBlock(true), createBlock(Fragment, null, renderList(props2.items, (val, i) => {
|
||
return openBlock(), createBlock(_component_a_select_option, {
|
||
key: i,
|
||
label: unref(get)(val, props2.valueName),
|
||
value: unref(get)(val, props2.keyName)
|
||
}, {
|
||
default: withCtx(() => [
|
||
props2.hasTooltip ? (openBlock(), createBlock(_component_a_tooltip, {
|
||
key: 0,
|
||
placement: "left",
|
||
class: "cursor-pointer"
|
||
}, {
|
||
title: withCtx(() => [
|
||
createVNode("span", null, toDisplayString(unref(get)(val, props2.valueName)), 1)
|
||
]),
|
||
default: withCtx(() => [
|
||
createVNode("div", { class: "truncate max-w-40" }, toDisplayString(unref(get)(val, props2.valueName)), 1)
|
||
]),
|
||
_: 2
|
||
}, 1024)) : (openBlock(), createBlock("div", { key: 1 }, toDisplayString(unref(get)(val, props2.valueName)), 1))
|
||
]),
|
||
_: 2
|
||
}, 1032, ["label", "value"]);
|
||
}), 128))
|
||
];
|
||
}
|
||
}),
|
||
_: 1
|
||
}, _parent));
|
||
_push(`</div>`);
|
||
};
|
||
}
|
||
});
|
||
const _sfc_setup = _sfc_main.setup;
|
||
_sfc_main.setup = (props2, ctx) => {
|
||
const ssrContext = useSSRContext();
|
||
(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/BasicPacks/BasicSelect.vue");
|
||
return _sfc_setup ? _sfc_setup(props2, ctx) : void 0;
|
||
};
|
||
const BasicSelect = Object.assign(_sfc_main, { __name: "BasicPacksBasicSelect" });
|
||
|
||
export { BasicSelect as B, Select as S, SelectOption as a };
|
||
//# sourceMappingURL=BasicSelect-C1ZHPvy4.mjs.map
|