2929 lines
95 KiB
JavaScript
2929 lines
95 KiB
JavaScript
import {
|
|
BORDER_HORIZONTAL_WIDTH,
|
|
ElTag,
|
|
MINIMUM_INPUT_WIDTH,
|
|
cAF,
|
|
defaultProps,
|
|
escapeStringRegexp,
|
|
rAF,
|
|
tagProps,
|
|
useCalcInputWidth,
|
|
useProps
|
|
} from "./chunk-LZ2AJP2V.js";
|
|
import {
|
|
ClickOutside
|
|
} from "./chunk-SSCO4CCM.js";
|
|
import {
|
|
BAR_MAP,
|
|
Ee,
|
|
ElTooltip,
|
|
useTooltipContentProps
|
|
} from "./chunk-7F6Y7TML.js";
|
|
import {
|
|
EVENT_CODE,
|
|
getEventCode
|
|
} from "./chunk-BUVJOKYK.js";
|
|
import {
|
|
isFirefox,
|
|
useComposition,
|
|
useFocusController
|
|
} from "./chunk-6KKRONM6.js";
|
|
import {
|
|
mutable
|
|
} from "./chunk-VJPYMOVT.js";
|
|
import {
|
|
useEmptyValues,
|
|
useEmptyValuesProps
|
|
} from "./chunk-22HKH5YS.js";
|
|
import {
|
|
useLocale
|
|
} from "./chunk-APPTXKCZ.js";
|
|
import {
|
|
ValidateComponentsMap,
|
|
iconPropType
|
|
} from "./chunk-R665FMDM.js";
|
|
import {
|
|
ElIcon
|
|
} from "./chunk-3DJYPQW6.js";
|
|
import {
|
|
CHANGE_EVENT,
|
|
UPDATE_MODEL_EVENT,
|
|
useAriaProps
|
|
} from "./chunk-6VHTGKN7.js";
|
|
import {
|
|
useFormItem,
|
|
useFormItemInputId,
|
|
useId
|
|
} from "./chunk-DIGHH22S.js";
|
|
import {
|
|
isClient,
|
|
isIOS,
|
|
useDebounceFn,
|
|
useEventListener,
|
|
useFormSize,
|
|
useResizeObserver,
|
|
useSizeProp
|
|
} from "./chunk-FYPMSKES.js";
|
|
import {
|
|
debugWarn,
|
|
isBoolean,
|
|
isEmpty,
|
|
isNumber,
|
|
isUndefined
|
|
} from "./chunk-UFIWN4M6.js";
|
|
import {
|
|
_export_sfc
|
|
} from "./chunk-MUJDDH7P.js";
|
|
import {
|
|
buildProp,
|
|
buildProps,
|
|
definePropType,
|
|
findLastIndex_default,
|
|
get_default,
|
|
isEqual_default,
|
|
memoize_default,
|
|
useNamespace,
|
|
withInstall
|
|
} from "./chunk-R2OGZABH.js";
|
|
import {
|
|
arrow_down_default,
|
|
circle_close_default
|
|
} from "./chunk-3C23FNYW.js";
|
|
import {
|
|
Fragment,
|
|
computed,
|
|
createBaseVNode,
|
|
createBlock,
|
|
createCommentVNode,
|
|
createElementBlock,
|
|
createSlots,
|
|
createTextVNode,
|
|
createVNode,
|
|
defineComponent,
|
|
getCurrentInstance,
|
|
guardReactiveProps,
|
|
h,
|
|
inject,
|
|
mergeProps,
|
|
nextTick,
|
|
onActivated,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
onUpdated,
|
|
openBlock,
|
|
provide,
|
|
reactive,
|
|
ref,
|
|
renderList,
|
|
renderSlot,
|
|
resolveComponent,
|
|
resolveDirective,
|
|
resolveDynamicComponent,
|
|
toRaw,
|
|
toRefs,
|
|
unref,
|
|
vModelText,
|
|
vShow,
|
|
watch,
|
|
watchEffect,
|
|
withCtx,
|
|
withDirectives,
|
|
withKeys,
|
|
withModifiers
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import {
|
|
hasOwn,
|
|
init_shared_esm_bundler,
|
|
isArray,
|
|
isFunction,
|
|
isObject,
|
|
isString,
|
|
normalizeClass,
|
|
normalizeProps,
|
|
normalizeStyle,
|
|
toDisplayString
|
|
} from "./chunk-OWZYVOTZ.js";
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/group-item.mjs
|
|
var _sfc_main = defineComponent({
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
style: {
|
|
type: Object
|
|
},
|
|
height: Number
|
|
},
|
|
setup() {
|
|
const ns = useNamespace("select");
|
|
return {
|
|
ns
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(_ctx.ns.be("group", "title")),
|
|
style: normalizeStyle({ ..._ctx.style, lineHeight: `${_ctx.height}px` })
|
|
}, toDisplayString(_ctx.item.label), 7);
|
|
}
|
|
var GroupItem = _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "group-item.vue"]]);
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/useOption.mjs
|
|
function useOption(props2, { emit }) {
|
|
return {
|
|
hoverItem: () => {
|
|
if (!props2.disabled) {
|
|
emit("hover", props2.index);
|
|
}
|
|
},
|
|
selectOptionClick: () => {
|
|
if (!props2.disabled) {
|
|
emit("select", props2.item, props2.index);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/defaults.mjs
|
|
var selectV2Props = buildProps({
|
|
allowCreate: Boolean,
|
|
autocomplete: {
|
|
type: definePropType(String),
|
|
default: "none"
|
|
},
|
|
automaticDropdown: Boolean,
|
|
clearable: Boolean,
|
|
clearIcon: {
|
|
type: iconPropType,
|
|
default: circle_close_default
|
|
},
|
|
effect: {
|
|
type: definePropType(String),
|
|
default: "light"
|
|
},
|
|
collapseTags: Boolean,
|
|
collapseTagsTooltip: Boolean,
|
|
maxCollapseTags: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
defaultFirstOption: Boolean,
|
|
disabled: Boolean,
|
|
estimatedOptionHeight: {
|
|
type: Number,
|
|
default: void 0
|
|
},
|
|
filterable: Boolean,
|
|
filterMethod: {
|
|
type: definePropType(Function)
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 274
|
|
},
|
|
itemHeight: {
|
|
type: Number,
|
|
default: 34
|
|
},
|
|
id: String,
|
|
loading: Boolean,
|
|
loadingText: String,
|
|
modelValue: {
|
|
type: definePropType([Array, String, Number, Boolean, Object]),
|
|
default: void 0
|
|
},
|
|
multiple: Boolean,
|
|
multipleLimit: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
name: String,
|
|
noDataText: String,
|
|
noMatchText: String,
|
|
remoteMethod: {
|
|
type: definePropType(Function)
|
|
},
|
|
reserveKeyword: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
options: {
|
|
type: definePropType(Array),
|
|
required: true
|
|
},
|
|
placeholder: {
|
|
type: String
|
|
},
|
|
teleported: useTooltipContentProps.teleported,
|
|
persistent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
popperClass: useTooltipContentProps.popperClass,
|
|
popperStyle: useTooltipContentProps.popperStyle,
|
|
popperOptions: {
|
|
type: definePropType(Object),
|
|
default: () => ({})
|
|
},
|
|
remote: Boolean,
|
|
debounce: {
|
|
type: Number,
|
|
default: 300
|
|
},
|
|
size: useSizeProp,
|
|
props: {
|
|
type: definePropType(Object),
|
|
default: () => defaultProps
|
|
},
|
|
valueKey: {
|
|
type: String,
|
|
default: "value"
|
|
},
|
|
scrollbarAlwaysOn: Boolean,
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
offset: {
|
|
type: Number,
|
|
default: 12
|
|
},
|
|
showArrow: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
placement: {
|
|
type: definePropType(String),
|
|
values: Ee,
|
|
default: "bottom-start"
|
|
},
|
|
fallbackPlacements: {
|
|
type: definePropType(Array),
|
|
default: ["bottom-start", "top-start", "right", "left"]
|
|
},
|
|
tagType: { ...tagProps.type, default: "info" },
|
|
tagEffect: { ...tagProps.effect, default: "light" },
|
|
tabindex: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
appendTo: useTooltipContentProps.appendTo,
|
|
fitInputWidth: {
|
|
type: [Boolean, Number],
|
|
default: true,
|
|
validator(val) {
|
|
return isBoolean(val) || isNumber(val);
|
|
}
|
|
},
|
|
suffixIcon: {
|
|
type: iconPropType,
|
|
default: arrow_down_default
|
|
},
|
|
...useEmptyValuesProps,
|
|
...useAriaProps(["ariaLabel"])
|
|
});
|
|
var optionV2Props = buildProps({
|
|
data: Array,
|
|
disabled: Boolean,
|
|
hovering: Boolean,
|
|
item: {
|
|
type: definePropType(Object),
|
|
required: true
|
|
},
|
|
index: Number,
|
|
style: Object,
|
|
selected: Boolean,
|
|
created: Boolean
|
|
});
|
|
var selectV2Emits = {
|
|
[UPDATE_MODEL_EVENT]: (val) => true,
|
|
[CHANGE_EVENT]: (val) => true,
|
|
"remove-tag": (val) => true,
|
|
"visible-change": (visible) => true,
|
|
focus: (evt) => evt instanceof FocusEvent,
|
|
blur: (evt) => evt instanceof FocusEvent,
|
|
clear: () => true
|
|
};
|
|
var optionV2Emits = {
|
|
hover: (index) => isNumber(index),
|
|
select: (val, index) => true
|
|
};
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/token.mjs
|
|
var selectV2InjectionKey = Symbol("ElSelectV2Injection");
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/option-item.mjs
|
|
var _sfc_main2 = defineComponent({
|
|
props: optionV2Props,
|
|
emits: optionV2Emits,
|
|
setup(props2, { emit }) {
|
|
const select = inject(selectV2InjectionKey);
|
|
const ns = useNamespace("select");
|
|
const { hoverItem, selectOptionClick } = useOption(props2, { emit });
|
|
const { getLabel } = useProps(select.props);
|
|
const contentId = select.contentId;
|
|
return {
|
|
ns,
|
|
contentId,
|
|
hoverItem,
|
|
selectOptionClick,
|
|
getLabel
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render2(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("li", {
|
|
id: `${_ctx.contentId}-${_ctx.index}`,
|
|
role: "option",
|
|
"aria-selected": _ctx.selected,
|
|
"aria-disabled": _ctx.disabled || void 0,
|
|
style: normalizeStyle(_ctx.style),
|
|
class: normalizeClass([
|
|
_ctx.ns.be("dropdown", "item"),
|
|
_ctx.ns.is("selected", _ctx.selected),
|
|
_ctx.ns.is("disabled", _ctx.disabled),
|
|
_ctx.ns.is("created", _ctx.created),
|
|
_ctx.ns.is("hovering", _ctx.hovering)
|
|
]),
|
|
onMousemove: _ctx.hoverItem,
|
|
onClick: withModifiers(_ctx.selectOptionClick, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "default", {
|
|
item: _ctx.item,
|
|
index: _ctx.index,
|
|
disabled: _ctx.disabled
|
|
}, () => [
|
|
createBaseVNode("span", null, toDisplayString(_ctx.getLabel(_ctx.item)), 1)
|
|
])
|
|
], 46, ["id", "aria-selected", "aria-disabled", "onMousemove", "onClick"]);
|
|
}
|
|
var OptionItem = _export_sfc(_sfc_main2, [["render", _sfc_render2], ["__file", "option-item.vue"]]);
|
|
|
|
// ../node_modules/.pnpm/memoize-one@6.0.0/node_modules/memoize-one/dist/memoize-one.esm.js
|
|
var safeIsNaN = Number.isNaN || function ponyfill(value) {
|
|
return typeof value === "number" && value !== value;
|
|
};
|
|
function isEqual(first, second) {
|
|
if (first === second) {
|
|
return true;
|
|
}
|
|
if (safeIsNaN(first) && safeIsNaN(second)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
function areInputsEqual(newInputs, lastInputs) {
|
|
if (newInputs.length !== lastInputs.length) {
|
|
return false;
|
|
}
|
|
for (var i = 0; i < newInputs.length; i++) {
|
|
if (!isEqual(newInputs[i], lastInputs[i])) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
function memoizeOne(resultFn, isEqual2) {
|
|
if (isEqual2 === void 0) {
|
|
isEqual2 = areInputsEqual;
|
|
}
|
|
var cache2 = null;
|
|
function memoized() {
|
|
var newArgs = [];
|
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
newArgs[_i] = arguments[_i];
|
|
}
|
|
if (cache2 && cache2.lastThis === this && isEqual2(newArgs, cache2.lastArgs)) {
|
|
return cache2.lastResult;
|
|
}
|
|
var lastResult = resultFn.apply(this, newArgs);
|
|
cache2 = {
|
|
lastResult,
|
|
lastArgs: newArgs,
|
|
lastThis: this
|
|
};
|
|
return lastResult;
|
|
}
|
|
memoized.clear = function clear() {
|
|
cache2 = null;
|
|
};
|
|
return memoized;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/hooks/use-cache.mjs
|
|
var useCache = () => {
|
|
const vm = getCurrentInstance();
|
|
const props2 = vm.proxy.$props;
|
|
return computed(() => {
|
|
const _getItemStyleCache = (_, __, ___) => ({});
|
|
return props2.perfMode ? memoize_default(_getItemStyleCache) : memoizeOne(_getItemStyleCache);
|
|
});
|
|
};
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/defaults.mjs
|
|
var DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
|
|
var ITEM_RENDER_EVT = "itemRendered";
|
|
var SCROLL_EVT = "scroll";
|
|
var FORWARD = "forward";
|
|
var BACKWARD = "backward";
|
|
var AUTO_ALIGNMENT = "auto";
|
|
var SMART_ALIGNMENT = "smart";
|
|
var START_ALIGNMENT = "start";
|
|
var CENTERED_ALIGNMENT = "center";
|
|
var END_ALIGNMENT = "end";
|
|
var HORIZONTAL = "horizontal";
|
|
var VERTICAL = "vertical";
|
|
var LTR = "ltr";
|
|
var RTL = "rtl";
|
|
var RTL_OFFSET_NAG = "negative";
|
|
var RTL_OFFSET_POS_ASC = "positive-ascending";
|
|
var RTL_OFFSET_POS_DESC = "positive-descending";
|
|
var ScrollbarSizeKey = {
|
|
[HORIZONTAL]: "height",
|
|
[VERTICAL]: "width"
|
|
};
|
|
var ScrollbarDirKey = {
|
|
[HORIZONTAL]: "left",
|
|
[VERTICAL]: "top"
|
|
};
|
|
var SCROLLBAR_MIN_SIZE = 20;
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/hooks/use-wheel.mjs
|
|
var LayoutKeys = {
|
|
[HORIZONTAL]: "deltaX",
|
|
[VERTICAL]: "deltaY"
|
|
};
|
|
var useWheel = ({ atEndEdge, atStartEdge, layout: layout2 }, onWheelDelta) => {
|
|
let frameHandle;
|
|
let offset = 0;
|
|
const hasReachedEdge = (offset2) => {
|
|
const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value;
|
|
return edgeReached;
|
|
};
|
|
const onWheel = (e) => {
|
|
cAF(frameHandle);
|
|
const newOffset = e[LayoutKeys[layout2.value]];
|
|
if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset))
|
|
return;
|
|
offset += newOffset;
|
|
if (!isFirefox()) {
|
|
e.preventDefault();
|
|
}
|
|
frameHandle = rAF(() => {
|
|
onWheelDelta(offset);
|
|
offset = 0;
|
|
});
|
|
};
|
|
return {
|
|
hasReachedEdge,
|
|
onWheel
|
|
};
|
|
};
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/props.mjs
|
|
var itemSize = buildProp({
|
|
type: definePropType([Number, Function]),
|
|
required: true
|
|
});
|
|
var estimatedItemSize = buildProp({
|
|
type: Number
|
|
});
|
|
var cache = buildProp({
|
|
type: Number,
|
|
default: 2
|
|
});
|
|
var direction = buildProp({
|
|
type: String,
|
|
values: ["ltr", "rtl"],
|
|
default: "ltr"
|
|
});
|
|
var initScrollOffset = buildProp({
|
|
type: Number,
|
|
default: 0
|
|
});
|
|
var total = buildProp({
|
|
type: Number,
|
|
required: true
|
|
});
|
|
var layout = buildProp({
|
|
type: String,
|
|
values: ["horizontal", "vertical"],
|
|
default: VERTICAL
|
|
});
|
|
var virtualizedProps = buildProps({
|
|
className: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
containerElement: {
|
|
type: definePropType([String, Object]),
|
|
default: "div"
|
|
},
|
|
data: {
|
|
type: definePropType(Array),
|
|
default: () => mutable([])
|
|
},
|
|
direction,
|
|
height: {
|
|
type: [String, Number],
|
|
required: true
|
|
},
|
|
innerElement: {
|
|
type: [String, Object],
|
|
default: "div"
|
|
},
|
|
innerProps: {
|
|
type: definePropType(Object),
|
|
default: () => ({})
|
|
},
|
|
style: {
|
|
type: definePropType([Object, String, Array])
|
|
},
|
|
useIsScrolling: Boolean,
|
|
width: {
|
|
type: [Number, String],
|
|
required: false
|
|
},
|
|
perfMode: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
scrollbarAlwaysOn: Boolean
|
|
});
|
|
var virtualizedListProps = buildProps({
|
|
cache,
|
|
estimatedItemSize,
|
|
layout,
|
|
initScrollOffset,
|
|
total,
|
|
itemSize,
|
|
...virtualizedProps
|
|
});
|
|
var scrollbarSize = {
|
|
type: Number,
|
|
default: 6
|
|
};
|
|
var startGap = { type: Number, default: 0 };
|
|
var endGap = { type: Number, default: 2 };
|
|
var virtualizedGridProps = buildProps({
|
|
columnCache: cache,
|
|
columnWidth: itemSize,
|
|
estimatedColumnWidth: estimatedItemSize,
|
|
estimatedRowHeight: estimatedItemSize,
|
|
initScrollLeft: initScrollOffset,
|
|
initScrollTop: initScrollOffset,
|
|
itemKey: {
|
|
type: definePropType(Function),
|
|
default: ({
|
|
columnIndex,
|
|
rowIndex
|
|
}) => `${rowIndex}:${columnIndex}`
|
|
},
|
|
rowCache: cache,
|
|
rowHeight: itemSize,
|
|
totalColumn: total,
|
|
totalRow: total,
|
|
hScrollbarSize: scrollbarSize,
|
|
vScrollbarSize: scrollbarSize,
|
|
scrollbarStartGap: startGap,
|
|
scrollbarEndGap: endGap,
|
|
role: String,
|
|
...virtualizedProps
|
|
});
|
|
var virtualizedScrollbarProps = buildProps({
|
|
alwaysOn: Boolean,
|
|
class: String,
|
|
layout,
|
|
total,
|
|
ratio: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
clientSize: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
scrollFrom: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
scrollbarSize,
|
|
startGap,
|
|
endGap,
|
|
visible: Boolean
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/utils.mjs
|
|
var getScrollDir = (prev, cur) => prev < cur ? FORWARD : BACKWARD;
|
|
var isHorizontal = (dir) => dir === LTR || dir === RTL || dir === HORIZONTAL;
|
|
var isRTL = (dir) => dir === RTL;
|
|
var cachedRTLResult = null;
|
|
function getRTLOffsetType(recalculate = false) {
|
|
if (cachedRTLResult === null || recalculate) {
|
|
const outerDiv = document.createElement("div");
|
|
const outerStyle = outerDiv.style;
|
|
outerStyle.width = "50px";
|
|
outerStyle.height = "50px";
|
|
outerStyle.overflow = "scroll";
|
|
outerStyle.direction = "rtl";
|
|
const innerDiv = document.createElement("div");
|
|
const innerStyle = innerDiv.style;
|
|
innerStyle.width = "100px";
|
|
innerStyle.height = "100px";
|
|
outerDiv.appendChild(innerDiv);
|
|
document.body.appendChild(outerDiv);
|
|
if (outerDiv.scrollLeft > 0) {
|
|
cachedRTLResult = RTL_OFFSET_POS_DESC;
|
|
} else {
|
|
outerDiv.scrollLeft = 1;
|
|
if (outerDiv.scrollLeft === 0) {
|
|
cachedRTLResult = RTL_OFFSET_NAG;
|
|
} else {
|
|
cachedRTLResult = RTL_OFFSET_POS_ASC;
|
|
}
|
|
}
|
|
document.body.removeChild(outerDiv);
|
|
return cachedRTLResult;
|
|
}
|
|
return cachedRTLResult;
|
|
}
|
|
function renderThumbStyle({ move, size, bar }, layout2) {
|
|
const style = {};
|
|
const translate = `translate${bar.axis}(${move}px)`;
|
|
style[bar.size] = size;
|
|
style.transform = translate;
|
|
if (layout2 === "horizontal") {
|
|
style.height = "100%";
|
|
} else {
|
|
style.width = "100%";
|
|
}
|
|
return style;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/components/scrollbar.mjs
|
|
var ScrollBar = defineComponent({
|
|
name: "ElVirtualScrollBar",
|
|
props: virtualizedScrollbarProps,
|
|
emits: ["scroll", "start-move", "stop-move"],
|
|
setup(props2, { emit }) {
|
|
const GAP = computed(() => props2.startGap + props2.endGap);
|
|
const nsVirtualScrollbar = useNamespace("virtual-scrollbar");
|
|
const nsScrollbar = useNamespace("scrollbar");
|
|
const trackRef = ref();
|
|
const thumbRef = ref();
|
|
let frameHandle = null;
|
|
let onselectstartStore = null;
|
|
const state = reactive({
|
|
isDragging: false,
|
|
traveled: 0
|
|
});
|
|
const bar = computed(() => BAR_MAP[props2.layout]);
|
|
const trackSize = computed(() => props2.clientSize - unref(GAP));
|
|
const trackStyle = computed(() => ({
|
|
position: "absolute",
|
|
width: `${HORIZONTAL === props2.layout ? trackSize.value : props2.scrollbarSize}px`,
|
|
height: `${HORIZONTAL === props2.layout ? props2.scrollbarSize : trackSize.value}px`,
|
|
[ScrollbarDirKey[props2.layout]]: "2px",
|
|
right: "2px",
|
|
bottom: "2px",
|
|
borderRadius: "4px"
|
|
}));
|
|
const thumbSize = computed(() => {
|
|
const ratio = props2.ratio;
|
|
if (ratio >= 100) {
|
|
return Number.POSITIVE_INFINITY;
|
|
}
|
|
if (ratio >= 50) {
|
|
return ratio * trackSize.value / 100;
|
|
}
|
|
const SCROLLBAR_MAX_SIZE = trackSize.value / 3;
|
|
return Math.floor(Math.min(Math.max(ratio * trackSize.value / 100, SCROLLBAR_MIN_SIZE), SCROLLBAR_MAX_SIZE));
|
|
});
|
|
const thumbStyle = computed(() => {
|
|
if (!Number.isFinite(thumbSize.value)) {
|
|
return {
|
|
display: "none"
|
|
};
|
|
}
|
|
const thumb = `${thumbSize.value}px`;
|
|
const style = renderThumbStyle({
|
|
bar: bar.value,
|
|
size: thumb,
|
|
move: state.traveled
|
|
}, props2.layout);
|
|
return style;
|
|
});
|
|
const totalSteps = computed(() => Math.ceil(props2.clientSize - thumbSize.value - unref(GAP)));
|
|
const attachEvents = () => {
|
|
window.addEventListener("mousemove", onMouseMove);
|
|
window.addEventListener("mouseup", onMouseUp);
|
|
const thumbEl = unref(thumbRef);
|
|
if (!thumbEl)
|
|
return;
|
|
onselectstartStore = document.onselectstart;
|
|
document.onselectstart = () => false;
|
|
thumbEl.addEventListener("touchmove", onMouseMove, { passive: true });
|
|
thumbEl.addEventListener("touchend", onMouseUp);
|
|
};
|
|
const detachEvents = () => {
|
|
window.removeEventListener("mousemove", onMouseMove);
|
|
window.removeEventListener("mouseup", onMouseUp);
|
|
document.onselectstart = onselectstartStore;
|
|
onselectstartStore = null;
|
|
const thumbEl = unref(thumbRef);
|
|
if (!thumbEl)
|
|
return;
|
|
thumbEl.removeEventListener("touchmove", onMouseMove);
|
|
thumbEl.removeEventListener("touchend", onMouseUp);
|
|
};
|
|
const onThumbMouseDown = (e) => {
|
|
e.stopImmediatePropagation();
|
|
if (e.ctrlKey || [1, 2].includes(e.button)) {
|
|
return;
|
|
}
|
|
state.isDragging = true;
|
|
state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
|
|
emit("start-move");
|
|
attachEvents();
|
|
};
|
|
const onMouseUp = () => {
|
|
state.isDragging = false;
|
|
state[bar.value.axis] = 0;
|
|
emit("stop-move");
|
|
detachEvents();
|
|
};
|
|
const onMouseMove = (e) => {
|
|
const { isDragging } = state;
|
|
if (!isDragging)
|
|
return;
|
|
if (!thumbRef.value || !trackRef.value)
|
|
return;
|
|
const prevPage = state[bar.value.axis];
|
|
if (!prevPage)
|
|
return;
|
|
cAF(frameHandle);
|
|
const offset = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
|
|
const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage;
|
|
const distance = offset - thumbClickPosition;
|
|
frameHandle = rAF(() => {
|
|
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
|
|
emit("scroll", distance, totalSteps.value);
|
|
});
|
|
};
|
|
const clickTrackHandler = (e) => {
|
|
const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
|
|
const thumbHalf = thumbRef.value[bar.value.offset] / 2;
|
|
const distance = offset - thumbHalf;
|
|
state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
|
|
emit("scroll", distance, totalSteps.value);
|
|
};
|
|
watch(() => props2.scrollFrom, (v) => {
|
|
if (state.isDragging)
|
|
return;
|
|
state.traveled = Math.ceil(v * totalSteps.value);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
detachEvents();
|
|
});
|
|
return () => {
|
|
return h("div", {
|
|
role: "presentation",
|
|
ref: trackRef,
|
|
class: [
|
|
nsVirtualScrollbar.b(),
|
|
props2.class,
|
|
(props2.alwaysOn || state.isDragging) && "always-on"
|
|
],
|
|
style: trackStyle.value,
|
|
onMousedown: withModifiers(clickTrackHandler, ["stop", "prevent"]),
|
|
onTouchstartPrevent: onThumbMouseDown
|
|
}, h("div", {
|
|
ref: thumbRef,
|
|
class: nsScrollbar.e("thumb"),
|
|
style: thumbStyle.value,
|
|
onMousedown: onThumbMouseDown
|
|
}, []));
|
|
};
|
|
}
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/builders/build-list.mjs
|
|
init_shared_esm_bundler();
|
|
var createList = ({
|
|
name,
|
|
getOffset,
|
|
getItemSize,
|
|
getItemOffset,
|
|
getEstimatedTotalSize: getEstimatedTotalSize2,
|
|
getStartIndexForOffset,
|
|
getStopIndexForStartIndex,
|
|
initCache,
|
|
clearCache,
|
|
validateProps
|
|
}) => {
|
|
return defineComponent({
|
|
name: name != null ? name : "ElVirtualList",
|
|
props: virtualizedListProps,
|
|
emits: [ITEM_RENDER_EVT, SCROLL_EVT],
|
|
setup(props2, { emit, expose }) {
|
|
validateProps(props2);
|
|
const instance = getCurrentInstance();
|
|
const ns = useNamespace("vl");
|
|
const dynamicSizeCache = ref(initCache(props2, instance));
|
|
const getItemStyleCache = useCache();
|
|
const windowRef = ref();
|
|
const innerRef = ref();
|
|
const scrollbarRef = ref();
|
|
const states = ref({
|
|
isScrolling: false,
|
|
scrollDir: "forward",
|
|
scrollOffset: isNumber(props2.initScrollOffset) ? props2.initScrollOffset : 0,
|
|
updateRequested: false,
|
|
isScrollbarDragging: false,
|
|
scrollbarAlwaysOn: props2.scrollbarAlwaysOn
|
|
});
|
|
const itemsToRender = computed(() => {
|
|
const { total: total2, cache: cache2 } = props2;
|
|
const { isScrolling, scrollDir, scrollOffset } = unref(states);
|
|
if (total2 === 0) {
|
|
return [0, 0, 0, 0];
|
|
}
|
|
const startIndex = getStartIndexForOffset(props2, scrollOffset, unref(dynamicSizeCache));
|
|
const stopIndex = getStopIndexForStartIndex(props2, startIndex, scrollOffset, unref(dynamicSizeCache));
|
|
const cacheBackward = !isScrolling || scrollDir === BACKWARD ? Math.max(1, cache2) : 1;
|
|
const cacheForward = !isScrolling || scrollDir === FORWARD ? Math.max(1, cache2) : 1;
|
|
return [
|
|
Math.max(0, startIndex - cacheBackward),
|
|
Math.max(0, Math.min(total2 - 1, stopIndex + cacheForward)),
|
|
startIndex,
|
|
stopIndex
|
|
];
|
|
});
|
|
const estimatedTotalSize = computed(() => getEstimatedTotalSize2(props2, unref(dynamicSizeCache)));
|
|
const _isHorizontal = computed(() => isHorizontal(props2.layout));
|
|
const windowStyle = computed(() => [
|
|
{
|
|
position: "relative",
|
|
[`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
|
|
WebkitOverflowScrolling: "touch",
|
|
willChange: "transform"
|
|
},
|
|
{
|
|
direction: props2.direction,
|
|
height: isNumber(props2.height) ? `${props2.height}px` : props2.height,
|
|
width: isNumber(props2.width) ? `${props2.width}px` : props2.width
|
|
},
|
|
props2.style
|
|
]);
|
|
const innerStyle = computed(() => {
|
|
const size = unref(estimatedTotalSize);
|
|
const horizontal = unref(_isHorizontal);
|
|
return {
|
|
height: horizontal ? "100%" : `${size}px`,
|
|
pointerEvents: unref(states).isScrolling ? "none" : void 0,
|
|
width: horizontal ? `${size}px` : "100%"
|
|
};
|
|
});
|
|
const clientSize = computed(() => _isHorizontal.value ? props2.width : props2.height);
|
|
const { onWheel } = useWheel({
|
|
atStartEdge: computed(() => states.value.scrollOffset <= 0),
|
|
atEndEdge: computed(() => states.value.scrollOffset >= estimatedTotalSize.value),
|
|
layout: computed(() => props2.layout)
|
|
}, (offset) => {
|
|
var _a, _b;
|
|
(_b = (_a = scrollbarRef.value).onMouseUp) == null ? void 0 : _b.call(_a);
|
|
scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value));
|
|
});
|
|
useEventListener(windowRef, "wheel", onWheel, {
|
|
passive: false
|
|
});
|
|
const emitEvents = () => {
|
|
const { total: total2 } = props2;
|
|
if (total2 > 0) {
|
|
const [cacheStart, cacheEnd, visibleStart, visibleEnd] = unref(itemsToRender);
|
|
emit(ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
|
|
}
|
|
const { scrollDir, scrollOffset, updateRequested } = unref(states);
|
|
emit(SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
|
|
};
|
|
const scrollVertically = (e) => {
|
|
const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
|
|
const _states = unref(states);
|
|
if (_states.scrollOffset === scrollTop) {
|
|
return;
|
|
}
|
|
const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
|
|
states.value = {
|
|
..._states,
|
|
isScrolling: true,
|
|
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
|
|
scrollOffset,
|
|
updateRequested: false
|
|
};
|
|
nextTick(resetIsScrolling);
|
|
};
|
|
const scrollHorizontally = (e) => {
|
|
const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
|
|
const _states = unref(states);
|
|
if (_states.scrollOffset === scrollLeft) {
|
|
return;
|
|
}
|
|
const { direction: direction2 } = props2;
|
|
let scrollOffset = scrollLeft;
|
|
if (direction2 === RTL) {
|
|
switch (getRTLOffsetType()) {
|
|
case RTL_OFFSET_NAG: {
|
|
scrollOffset = -scrollLeft;
|
|
break;
|
|
}
|
|
case RTL_OFFSET_POS_DESC: {
|
|
scrollOffset = scrollWidth - clientWidth - scrollLeft;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
|
|
states.value = {
|
|
..._states,
|
|
isScrolling: true,
|
|
scrollDir: getScrollDir(_states.scrollOffset, scrollOffset),
|
|
scrollOffset,
|
|
updateRequested: false
|
|
};
|
|
nextTick(resetIsScrolling);
|
|
};
|
|
const onScroll = (e) => {
|
|
unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e);
|
|
emitEvents();
|
|
};
|
|
const onScrollbarScroll = (distanceToGo, totalSteps) => {
|
|
const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
|
|
scrollTo(Math.min(estimatedTotalSize.value - clientSize.value, offset));
|
|
};
|
|
const scrollTo = (offset) => {
|
|
offset = Math.max(offset, 0);
|
|
if (offset === unref(states).scrollOffset) {
|
|
return;
|
|
}
|
|
states.value = {
|
|
...unref(states),
|
|
scrollOffset: offset,
|
|
scrollDir: getScrollDir(unref(states).scrollOffset, offset),
|
|
updateRequested: true
|
|
};
|
|
nextTick(resetIsScrolling);
|
|
};
|
|
const scrollToItem = (idx, alignment = AUTO_ALIGNMENT) => {
|
|
const { scrollOffset } = unref(states);
|
|
idx = Math.max(0, Math.min(idx, props2.total - 1));
|
|
scrollTo(getOffset(props2, idx, alignment, scrollOffset, unref(dynamicSizeCache)));
|
|
};
|
|
const getItemStyle = (idx) => {
|
|
const { direction: direction2, itemSize: itemSize2, layout: layout2 } = props2;
|
|
const itemStyleCache = getItemStyleCache.value(clearCache && itemSize2, clearCache && layout2, clearCache && direction2);
|
|
let style;
|
|
if (hasOwn(itemStyleCache, String(idx))) {
|
|
style = itemStyleCache[idx];
|
|
} else {
|
|
const offset = getItemOffset(props2, idx, unref(dynamicSizeCache));
|
|
const size = getItemSize(props2, idx, unref(dynamicSizeCache));
|
|
const horizontal = unref(_isHorizontal);
|
|
const isRtl = direction2 === RTL;
|
|
const offsetHorizontal = horizontal ? offset : 0;
|
|
itemStyleCache[idx] = style = {
|
|
position: "absolute",
|
|
left: isRtl ? void 0 : `${offsetHorizontal}px`,
|
|
right: isRtl ? `${offsetHorizontal}px` : void 0,
|
|
top: !horizontal ? `${offset}px` : 0,
|
|
height: !horizontal ? `${size}px` : "100%",
|
|
width: horizontal ? `${size}px` : "100%"
|
|
};
|
|
}
|
|
return style;
|
|
};
|
|
const resetIsScrolling = () => {
|
|
states.value.isScrolling = false;
|
|
nextTick(() => {
|
|
getItemStyleCache.value(-1, null, null);
|
|
});
|
|
};
|
|
const resetScrollTop = () => {
|
|
const window2 = windowRef.value;
|
|
if (window2) {
|
|
window2.scrollTop = 0;
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
if (!isClient)
|
|
return;
|
|
const { initScrollOffset: initScrollOffset2 } = props2;
|
|
const windowElement = unref(windowRef);
|
|
if (isNumber(initScrollOffset2) && windowElement) {
|
|
if (unref(_isHorizontal)) {
|
|
windowElement.scrollLeft = initScrollOffset2;
|
|
} else {
|
|
windowElement.scrollTop = initScrollOffset2;
|
|
}
|
|
}
|
|
emitEvents();
|
|
});
|
|
onUpdated(() => {
|
|
const { direction: direction2, layout: layout2 } = props2;
|
|
const { scrollOffset, updateRequested } = unref(states);
|
|
const windowElement = unref(windowRef);
|
|
if (updateRequested && windowElement) {
|
|
if (layout2 === HORIZONTAL) {
|
|
if (direction2 === RTL) {
|
|
switch (getRTLOffsetType()) {
|
|
case RTL_OFFSET_NAG: {
|
|
windowElement.scrollLeft = -scrollOffset;
|
|
break;
|
|
}
|
|
case RTL_OFFSET_POS_ASC: {
|
|
windowElement.scrollLeft = scrollOffset;
|
|
break;
|
|
}
|
|
default: {
|
|
const { clientWidth, scrollWidth } = windowElement;
|
|
windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
windowElement.scrollLeft = scrollOffset;
|
|
}
|
|
} else {
|
|
windowElement.scrollTop = scrollOffset;
|
|
}
|
|
}
|
|
});
|
|
onActivated(() => {
|
|
unref(windowRef).scrollTop = unref(states).scrollOffset;
|
|
});
|
|
const api = {
|
|
ns,
|
|
clientSize,
|
|
estimatedTotalSize,
|
|
windowStyle,
|
|
windowRef,
|
|
innerRef,
|
|
innerStyle,
|
|
itemsToRender,
|
|
scrollbarRef,
|
|
states,
|
|
getItemStyle,
|
|
onScroll,
|
|
onScrollbarScroll,
|
|
onWheel,
|
|
scrollTo,
|
|
scrollToItem,
|
|
resetScrollTop
|
|
};
|
|
expose({
|
|
windowRef,
|
|
innerRef,
|
|
getItemStyleCache,
|
|
scrollTo,
|
|
scrollToItem,
|
|
resetScrollTop,
|
|
states
|
|
});
|
|
return api;
|
|
},
|
|
render(ctx) {
|
|
var _a;
|
|
const {
|
|
$slots,
|
|
className,
|
|
clientSize,
|
|
containerElement,
|
|
data,
|
|
getItemStyle,
|
|
innerElement,
|
|
itemsToRender,
|
|
innerStyle,
|
|
layout: layout2,
|
|
total: total2,
|
|
onScroll,
|
|
onScrollbarScroll,
|
|
states,
|
|
useIsScrolling,
|
|
windowStyle,
|
|
ns
|
|
} = ctx;
|
|
const [start, end] = itemsToRender;
|
|
const Container = resolveDynamicComponent(containerElement);
|
|
const Inner = resolveDynamicComponent(innerElement);
|
|
const children = [];
|
|
if (total2 > 0) {
|
|
for (let i = start; i <= end; i++) {
|
|
children.push(h(Fragment, { key: i }, (_a = $slots.default) == null ? void 0 : _a.call($slots, {
|
|
data,
|
|
index: i,
|
|
isScrolling: useIsScrolling ? states.isScrolling : void 0,
|
|
style: getItemStyle(i)
|
|
})));
|
|
}
|
|
}
|
|
const InnerNode = [
|
|
h(Inner, mergeProps(ctx.innerProps, {
|
|
style: innerStyle,
|
|
ref: "innerRef"
|
|
}), !isString(Inner) ? {
|
|
default: () => children
|
|
} : children)
|
|
];
|
|
const scrollbar = h(ScrollBar, {
|
|
ref: "scrollbarRef",
|
|
clientSize,
|
|
layout: layout2,
|
|
onScroll: onScrollbarScroll,
|
|
ratio: clientSize * 100 / this.estimatedTotalSize,
|
|
scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
|
|
total: total2,
|
|
alwaysOn: states.scrollbarAlwaysOn
|
|
});
|
|
const listContainer = h(Container, {
|
|
class: [ns.e("window"), className],
|
|
style: windowStyle,
|
|
onScroll,
|
|
ref: "windowRef",
|
|
key: 0
|
|
}, !isString(Container) ? { default: () => [InnerNode] } : [InnerNode]);
|
|
return h("div", {
|
|
key: 0,
|
|
class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
|
|
}, [listContainer, scrollbar]);
|
|
}
|
|
});
|
|
};
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/components/fixed-size-list.mjs
|
|
var FixedSizeList = createList({
|
|
name: "ElFixedSizeList",
|
|
getItemOffset: ({ itemSize: itemSize2 }, index) => index * itemSize2,
|
|
getItemSize: ({ itemSize: itemSize2 }) => itemSize2,
|
|
getEstimatedTotalSize: ({ total: total2, itemSize: itemSize2 }) => itemSize2 * total2,
|
|
getOffset: ({ height, total: total2, itemSize: itemSize2, layout: layout2, width }, index, alignment, scrollOffset) => {
|
|
const size = isHorizontal(layout2) ? width : height;
|
|
const lastItemOffset = Math.max(0, total2 * itemSize2 - size);
|
|
const maxOffset = Math.min(lastItemOffset, index * itemSize2);
|
|
const minOffset = Math.max(0, (index + 1) * itemSize2 - size);
|
|
if (alignment === SMART_ALIGNMENT) {
|
|
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
|
|
alignment = AUTO_ALIGNMENT;
|
|
} else {
|
|
alignment = CENTERED_ALIGNMENT;
|
|
}
|
|
}
|
|
switch (alignment) {
|
|
case START_ALIGNMENT: {
|
|
return maxOffset;
|
|
}
|
|
case END_ALIGNMENT: {
|
|
return minOffset;
|
|
}
|
|
case CENTERED_ALIGNMENT: {
|
|
const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
|
|
if (middleOffset < Math.ceil(size / 2)) {
|
|
return 0;
|
|
} else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
|
|
return lastItemOffset;
|
|
} else {
|
|
return middleOffset;
|
|
}
|
|
}
|
|
case AUTO_ALIGNMENT:
|
|
default: {
|
|
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
|
|
return scrollOffset;
|
|
} else if (scrollOffset < minOffset) {
|
|
return minOffset;
|
|
} else {
|
|
return maxOffset;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getStartIndexForOffset: ({ total: total2, itemSize: itemSize2 }, offset) => Math.max(0, Math.min(total2 - 1, Math.floor(offset / itemSize2))),
|
|
getStopIndexForStartIndex: ({ height, total: total2, itemSize: itemSize2, layout: layout2, width }, startIndex, scrollOffset) => {
|
|
const offset = startIndex * itemSize2;
|
|
const size = isHorizontal(layout2) ? width : height;
|
|
const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize2);
|
|
return Math.max(0, Math.min(total2 - 1, startIndex + numVisibleItems - 1));
|
|
},
|
|
initCache() {
|
|
return void 0;
|
|
},
|
|
clearCache: true,
|
|
validateProps() {
|
|
}
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/virtual-list/src/components/dynamic-size-list.mjs
|
|
var getItemFromCache = (props2, index, listCache) => {
|
|
const { itemSize: itemSize2 } = props2;
|
|
const { items, lastVisitedIndex } = listCache;
|
|
if (index > lastVisitedIndex) {
|
|
let offset = 0;
|
|
if (lastVisitedIndex >= 0) {
|
|
const item = items[lastVisitedIndex];
|
|
offset = item.offset + item.size;
|
|
}
|
|
for (let i = lastVisitedIndex + 1; i <= index; i++) {
|
|
const size = itemSize2(i);
|
|
items[i] = {
|
|
offset,
|
|
size
|
|
};
|
|
offset += size;
|
|
}
|
|
listCache.lastVisitedIndex = index;
|
|
}
|
|
return items[index];
|
|
};
|
|
var findItem = (props2, listCache, offset) => {
|
|
const { items, lastVisitedIndex } = listCache;
|
|
const lastVisitedOffset = lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0;
|
|
if (lastVisitedOffset >= offset) {
|
|
return bs(props2, listCache, 0, lastVisitedIndex, offset);
|
|
}
|
|
return es(props2, listCache, Math.max(0, lastVisitedIndex), offset);
|
|
};
|
|
var bs = (props2, listCache, low, high, offset) => {
|
|
while (low <= high) {
|
|
const mid = low + Math.floor((high - low) / 2);
|
|
const currentOffset = getItemFromCache(props2, mid, listCache).offset;
|
|
if (currentOffset === offset) {
|
|
return mid;
|
|
} else if (currentOffset < offset) {
|
|
low = mid + 1;
|
|
} else if (currentOffset > offset) {
|
|
high = mid - 1;
|
|
}
|
|
}
|
|
return Math.max(0, low - 1);
|
|
};
|
|
var es = (props2, listCache, index, offset) => {
|
|
const { total: total2 } = props2;
|
|
let exponent = 1;
|
|
while (index < total2 && getItemFromCache(props2, index, listCache).offset < offset) {
|
|
index += exponent;
|
|
exponent *= 2;
|
|
}
|
|
return bs(props2, listCache, Math.floor(index / 2), Math.min(index, total2 - 1), offset);
|
|
};
|
|
var getEstimatedTotalSize = ({ total: total2 }, { items, estimatedItemSize: estimatedItemSize2, lastVisitedIndex }) => {
|
|
let totalSizeOfMeasuredItems = 0;
|
|
if (lastVisitedIndex >= total2) {
|
|
lastVisitedIndex = total2 - 1;
|
|
}
|
|
if (lastVisitedIndex >= 0) {
|
|
const item = items[lastVisitedIndex];
|
|
totalSizeOfMeasuredItems = item.offset + item.size;
|
|
}
|
|
const numUnmeasuredItems = total2 - lastVisitedIndex - 1;
|
|
const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize2;
|
|
return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
|
|
};
|
|
var DynamicSizeList = createList({
|
|
name: "ElDynamicSizeList",
|
|
getItemOffset: (props2, index, listCache) => getItemFromCache(props2, index, listCache).offset,
|
|
getItemSize: (_, index, { items }) => items[index].size,
|
|
getEstimatedTotalSize,
|
|
getOffset: (props2, index, alignment, scrollOffset, listCache) => {
|
|
const { height, layout: layout2, width } = props2;
|
|
const size = isHorizontal(layout2) ? width : height;
|
|
const item = getItemFromCache(props2, index, listCache);
|
|
const estimatedTotalSize = getEstimatedTotalSize(props2, listCache);
|
|
const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset));
|
|
const minOffset = Math.max(0, item.offset - size + item.size);
|
|
if (alignment === SMART_ALIGNMENT) {
|
|
if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
|
|
alignment = AUTO_ALIGNMENT;
|
|
} else {
|
|
alignment = CENTERED_ALIGNMENT;
|
|
}
|
|
}
|
|
switch (alignment) {
|
|
case START_ALIGNMENT: {
|
|
return maxOffset;
|
|
}
|
|
case END_ALIGNMENT: {
|
|
return minOffset;
|
|
}
|
|
case CENTERED_ALIGNMENT: {
|
|
return Math.round(minOffset + (maxOffset - minOffset) / 2);
|
|
}
|
|
case AUTO_ALIGNMENT:
|
|
default: {
|
|
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
|
|
return scrollOffset;
|
|
} else if (scrollOffset < minOffset) {
|
|
return minOffset;
|
|
} else {
|
|
return maxOffset;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getStartIndexForOffset: (props2, offset, listCache) => findItem(props2, listCache, offset),
|
|
getStopIndexForStartIndex: (props2, startIndex, scrollOffset, listCache) => {
|
|
const { height, total: total2, layout: layout2, width } = props2;
|
|
const size = isHorizontal(layout2) ? width : height;
|
|
const item = getItemFromCache(props2, startIndex, listCache);
|
|
const maxOffset = scrollOffset + size;
|
|
let offset = item.offset + item.size;
|
|
let stopIndex = startIndex;
|
|
while (stopIndex < total2 - 1 && offset < maxOffset) {
|
|
stopIndex++;
|
|
offset += getItemFromCache(props2, stopIndex, listCache).size;
|
|
}
|
|
return stopIndex;
|
|
},
|
|
initCache({ estimatedItemSize: estimatedItemSize2 = DEFAULT_DYNAMIC_LIST_ITEM_SIZE }, instance) {
|
|
const cache2 = {
|
|
items: {},
|
|
estimatedItemSize: estimatedItemSize2,
|
|
lastVisitedIndex: -1
|
|
};
|
|
cache2.clearCacheAfterIndex = (index, forceUpdate = true) => {
|
|
var _a, _b;
|
|
cache2.lastVisitedIndex = Math.min(cache2.lastVisitedIndex, index - 1);
|
|
(_a = instance.exposed) == null ? void 0 : _a.getItemStyleCache(-1);
|
|
if (forceUpdate) {
|
|
(_b = instance.proxy) == null ? void 0 : _b.$forceUpdate();
|
|
}
|
|
};
|
|
return cache2;
|
|
},
|
|
clearCache: false,
|
|
validateProps: ({ itemSize: itemSize2 }) => {
|
|
}
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/select-dropdown.mjs
|
|
init_shared_esm_bundler();
|
|
var props = {
|
|
loading: Boolean,
|
|
data: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
hoveringIndex: Number,
|
|
width: Number,
|
|
id: String,
|
|
ariaLabel: String
|
|
};
|
|
var ElSelectMenu = defineComponent({
|
|
name: "ElSelectDropdown",
|
|
props,
|
|
setup(props2, {
|
|
slots,
|
|
expose
|
|
}) {
|
|
const select = inject(selectV2InjectionKey);
|
|
const ns = useNamespace("select");
|
|
const {
|
|
getLabel,
|
|
getValue,
|
|
getDisabled
|
|
} = useProps(select.props);
|
|
const cachedHeights = ref([]);
|
|
const listRef = ref();
|
|
const size = computed(() => props2.data.length);
|
|
watch(() => size.value, () => {
|
|
var _a, _b;
|
|
(_b = (_a = select.tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
});
|
|
const isSized = computed(() => isUndefined(select.props.estimatedOptionHeight));
|
|
const listProps = computed(() => {
|
|
if (isSized.value) {
|
|
return {
|
|
itemSize: select.props.itemHeight
|
|
};
|
|
}
|
|
return {
|
|
estimatedSize: select.props.estimatedOptionHeight,
|
|
itemSize: (idx) => cachedHeights.value[idx]
|
|
};
|
|
});
|
|
const contains = (arr = [], target) => {
|
|
const {
|
|
props: {
|
|
valueKey
|
|
}
|
|
} = select;
|
|
if (!isObject(target)) {
|
|
return arr.includes(target);
|
|
}
|
|
return arr && arr.some((item) => {
|
|
return toRaw(get_default(item, valueKey)) === get_default(target, valueKey);
|
|
});
|
|
};
|
|
const isEqual2 = (selected, target) => {
|
|
if (!isObject(target)) {
|
|
return selected === target;
|
|
} else {
|
|
const {
|
|
valueKey
|
|
} = select.props;
|
|
return get_default(selected, valueKey) === get_default(target, valueKey);
|
|
}
|
|
};
|
|
const isItemSelected = (modelValue, target) => {
|
|
if (select.props.multiple) {
|
|
return contains(modelValue, getValue(target));
|
|
}
|
|
return isEqual2(modelValue, getValue(target));
|
|
};
|
|
const isItemDisabled = (modelValue, selected) => {
|
|
const {
|
|
disabled,
|
|
multiple,
|
|
multipleLimit
|
|
} = select.props;
|
|
return disabled || !selected && (multiple ? multipleLimit > 0 && modelValue.length >= multipleLimit : false);
|
|
};
|
|
const isItemHovering = (target) => props2.hoveringIndex === target;
|
|
const scrollToItem = (index) => {
|
|
const list = listRef.value;
|
|
if (list) {
|
|
list.scrollToItem(index);
|
|
}
|
|
};
|
|
const resetScrollTop = () => {
|
|
const list = listRef.value;
|
|
if (list) {
|
|
list.resetScrollTop();
|
|
}
|
|
};
|
|
const exposed = {
|
|
listRef,
|
|
isSized,
|
|
isItemDisabled,
|
|
isItemHovering,
|
|
isItemSelected,
|
|
scrollToItem,
|
|
resetScrollTop
|
|
};
|
|
expose(exposed);
|
|
const Item = (itemProps) => {
|
|
const {
|
|
index,
|
|
data,
|
|
style
|
|
} = itemProps;
|
|
const sized = unref(isSized);
|
|
const {
|
|
itemSize: itemSize2,
|
|
estimatedSize
|
|
} = unref(listProps);
|
|
const {
|
|
modelValue
|
|
} = select.props;
|
|
const {
|
|
onSelect,
|
|
onHover
|
|
} = select;
|
|
const item = data[index];
|
|
if (item.type === "Group") {
|
|
return createVNode(GroupItem, {
|
|
"item": item,
|
|
"style": style,
|
|
"height": sized ? itemSize2 : estimatedSize
|
|
}, null);
|
|
}
|
|
const isSelected = isItemSelected(modelValue, item);
|
|
const isDisabled = isItemDisabled(modelValue, isSelected);
|
|
const isHovering = isItemHovering(index);
|
|
return createVNode(OptionItem, mergeProps(itemProps, {
|
|
"selected": isSelected,
|
|
"disabled": getDisabled(item) || isDisabled,
|
|
"created": !!item.created,
|
|
"hovering": isHovering,
|
|
"item": item,
|
|
"onSelect": onSelect,
|
|
"onHover": onHover
|
|
}), {
|
|
default: (props3) => {
|
|
var _a;
|
|
return ((_a = slots.default) == null ? void 0 : _a.call(slots, props3)) || createVNode("span", null, [getLabel(item)]);
|
|
}
|
|
});
|
|
};
|
|
const {
|
|
onKeyboardNavigate,
|
|
onKeyboardSelect
|
|
} = select;
|
|
const onForward = () => {
|
|
onKeyboardNavigate("forward");
|
|
};
|
|
const onBackward = () => {
|
|
onKeyboardNavigate("backward");
|
|
};
|
|
const onKeydown = (e) => {
|
|
const code = getEventCode(e);
|
|
const {
|
|
tab,
|
|
esc,
|
|
down,
|
|
up,
|
|
enter,
|
|
numpadEnter
|
|
} = EVENT_CODE;
|
|
if ([esc, down, up, enter, numpadEnter].includes(code)) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
switch (code) {
|
|
case tab:
|
|
case esc:
|
|
break;
|
|
case down:
|
|
onForward();
|
|
break;
|
|
case up:
|
|
onBackward();
|
|
break;
|
|
case enter:
|
|
case numpadEnter:
|
|
onKeyboardSelect();
|
|
break;
|
|
}
|
|
};
|
|
return () => {
|
|
var _a, _b, _c, _d;
|
|
const {
|
|
data,
|
|
width
|
|
} = props2;
|
|
const {
|
|
height,
|
|
multiple,
|
|
scrollbarAlwaysOn
|
|
} = select.props;
|
|
const isScrollbarAlwaysOn = computed(() => {
|
|
return isIOS ? true : scrollbarAlwaysOn;
|
|
});
|
|
const List = unref(isSized) ? FixedSizeList : DynamicSizeList;
|
|
return createVNode("div", {
|
|
"class": [ns.b("dropdown"), ns.is("multiple", multiple)],
|
|
"style": {
|
|
width: `${width}px`
|
|
}
|
|
}, [(_a = slots.header) == null ? void 0 : _a.call(slots), ((_b = slots.loading) == null ? void 0 : _b.call(slots)) || ((_c = slots.empty) == null ? void 0 : _c.call(slots)) || createVNode(List, mergeProps({
|
|
"ref": listRef
|
|
}, unref(listProps), {
|
|
"className": ns.be("dropdown", "list"),
|
|
"scrollbarAlwaysOn": isScrollbarAlwaysOn.value,
|
|
"data": data,
|
|
"height": height,
|
|
"width": width,
|
|
"total": data.length,
|
|
"innerElement": "ul",
|
|
"innerProps": {
|
|
id: props2.id,
|
|
role: "listbox",
|
|
"aria-label": props2.ariaLabel,
|
|
"aria-orientation": "vertical"
|
|
},
|
|
"onKeydown": onKeydown
|
|
}), {
|
|
default: (props3) => createVNode(Item, props3, null)
|
|
}), (_d = slots.footer) == null ? void 0 : _d.call(slots)]);
|
|
};
|
|
}
|
|
});
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/useAllowCreate.mjs
|
|
function useAllowCreate(props2, states) {
|
|
const { aliasProps, getLabel, getValue } = useProps(props2);
|
|
const createOptionCount = ref(0);
|
|
const cachedSelectedOption = ref();
|
|
const enableAllowCreateMode = computed(() => {
|
|
return props2.allowCreate && props2.filterable;
|
|
});
|
|
watch(() => props2.options, (options) => {
|
|
const optionLabelsSet = new Set(options.map((option) => getLabel(option)));
|
|
states.createdOptions = states.createdOptions.filter((createdOption) => !optionLabelsSet.has(getLabel(createdOption)));
|
|
});
|
|
function hasExistingOption(query) {
|
|
const hasOption = (option) => getLabel(option) === query;
|
|
return props2.options && props2.options.some(hasOption) || states.createdOptions.some(hasOption);
|
|
}
|
|
function selectNewOption(option) {
|
|
if (!enableAllowCreateMode.value) {
|
|
return;
|
|
}
|
|
if (props2.multiple && option.created) {
|
|
createOptionCount.value++;
|
|
} else {
|
|
cachedSelectedOption.value = option;
|
|
}
|
|
}
|
|
function createNewOption(query) {
|
|
if (enableAllowCreateMode.value) {
|
|
if (query && query.length > 0) {
|
|
if (hasExistingOption(query)) {
|
|
states.createdOptions = states.createdOptions.filter((createdOption) => getLabel(createdOption) !== states.previousQuery);
|
|
return;
|
|
}
|
|
const newOption = {
|
|
[aliasProps.value.value]: query,
|
|
[aliasProps.value.label]: query,
|
|
created: true,
|
|
[aliasProps.value.disabled]: false
|
|
};
|
|
if (states.createdOptions.length >= createOptionCount.value) {
|
|
states.createdOptions[createOptionCount.value] = newOption;
|
|
} else {
|
|
states.createdOptions.push(newOption);
|
|
}
|
|
} else {
|
|
if (props2.multiple) {
|
|
states.createdOptions.length = createOptionCount.value;
|
|
} else {
|
|
const selectedOption = cachedSelectedOption.value;
|
|
states.createdOptions.length = 0;
|
|
if (selectedOption && selectedOption.created) {
|
|
states.createdOptions.push(selectedOption);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function removeNewOption(option) {
|
|
if (!enableAllowCreateMode.value || !option || !option.created || option.created && props2.reserveKeyword && states.inputValue === getLabel(option)) {
|
|
return;
|
|
}
|
|
const idx = states.createdOptions.findIndex((it) => getValue(it) === getValue(option));
|
|
if (~idx) {
|
|
states.createdOptions.splice(idx, 1);
|
|
createOptionCount.value--;
|
|
}
|
|
}
|
|
function clearAllNewOption() {
|
|
if (enableAllowCreateMode.value) {
|
|
states.createdOptions.length = 0;
|
|
createOptionCount.value = 0;
|
|
}
|
|
}
|
|
return {
|
|
createNewOption,
|
|
removeNewOption,
|
|
selectNewOption,
|
|
clearAllNewOption
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/useSelect.mjs
|
|
init_shared_esm_bundler();
|
|
var useSelect = (props2, emit) => {
|
|
const { t } = useLocale();
|
|
const nsSelect = useNamespace("select");
|
|
const nsInput = useNamespace("input");
|
|
const { form: elForm, formItem: elFormItem } = useFormItem();
|
|
const { inputId } = useFormItemInputId(props2, {
|
|
formItemContext: elFormItem
|
|
});
|
|
const { aliasProps, getLabel, getValue, getDisabled, getOptions } = useProps(props2);
|
|
const { valueOnClear, isEmptyValue } = useEmptyValues(props2);
|
|
const states = reactive({
|
|
inputValue: "",
|
|
cachedOptions: [],
|
|
createdOptions: [],
|
|
hoveringIndex: -1,
|
|
inputHovering: false,
|
|
selectionWidth: 0,
|
|
collapseItemWidth: 0,
|
|
previousQuery: null,
|
|
previousValue: void 0,
|
|
selectedLabel: "",
|
|
menuVisibleOnFocus: false,
|
|
isBeforeHide: false
|
|
});
|
|
const popperSize = ref(-1);
|
|
const debouncing = ref(false);
|
|
const selectRef = ref();
|
|
const selectionRef = ref();
|
|
const tooltipRef = ref();
|
|
const tagTooltipRef = ref();
|
|
const inputRef = ref();
|
|
const prefixRef = ref();
|
|
const suffixRef = ref();
|
|
const menuRef = ref();
|
|
const tagMenuRef = ref();
|
|
const collapseItemRef = ref();
|
|
const {
|
|
isComposing,
|
|
handleCompositionStart,
|
|
handleCompositionEnd,
|
|
handleCompositionUpdate
|
|
} = useComposition({
|
|
afterComposition: (e) => onInput(e)
|
|
});
|
|
const selectDisabled = computed(() => props2.disabled || !!(elForm == null ? void 0 : elForm.disabled));
|
|
const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
|
|
disabled: selectDisabled,
|
|
afterFocus() {
|
|
if (props2.automaticDropdown && !expanded.value) {
|
|
expanded.value = true;
|
|
states.menuVisibleOnFocus = true;
|
|
}
|
|
},
|
|
beforeBlur(event) {
|
|
var _a, _b;
|
|
return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event));
|
|
},
|
|
afterBlur() {
|
|
var _a;
|
|
expanded.value = false;
|
|
states.menuVisibleOnFocus = false;
|
|
if (props2.validateEvent) {
|
|
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur").catch((err) => debugWarn(err));
|
|
}
|
|
}
|
|
});
|
|
const allOptions = computed(() => filterOptions(""));
|
|
const hasOptions = computed(() => {
|
|
if (props2.loading)
|
|
return false;
|
|
return props2.options.length > 0 || states.createdOptions.length > 0;
|
|
});
|
|
const filteredOptions = ref([]);
|
|
const expanded = ref(false);
|
|
const needStatusIcon = computed(() => {
|
|
var _a;
|
|
return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
|
|
});
|
|
const popupHeight = computed(() => {
|
|
const totalHeight = filteredOptions.value.length * props2.itemHeight;
|
|
return totalHeight > props2.height ? props2.height : totalHeight;
|
|
});
|
|
const hasModelValue = computed(() => {
|
|
return props2.multiple ? isArray(props2.modelValue) && props2.modelValue.length > 0 : !isEmptyValue(props2.modelValue);
|
|
});
|
|
const showClearBtn = computed(() => {
|
|
return props2.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
|
|
});
|
|
const iconComponent = computed(() => props2.remote && props2.filterable ? "" : props2.suffixIcon);
|
|
const iconReverse = computed(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
|
|
const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
|
|
const validateIcon = computed(() => {
|
|
if (!validateState.value)
|
|
return;
|
|
return ValidateComponentsMap[validateState.value];
|
|
});
|
|
const debounce = computed(() => props2.remote ? props2.debounce : 0);
|
|
const isRemoteSearchEmpty = computed(() => props2.remote && !states.inputValue && !hasOptions.value);
|
|
const emptyText = computed(() => {
|
|
if (props2.loading) {
|
|
return props2.loadingText || t("el.select.loading");
|
|
} else {
|
|
if (props2.filterable && states.inputValue && hasOptions.value && filteredOptions.value.length === 0) {
|
|
return props2.noMatchText || t("el.select.noMatch");
|
|
}
|
|
if (!hasOptions.value) {
|
|
return props2.noDataText || t("el.select.noData");
|
|
}
|
|
}
|
|
return null;
|
|
});
|
|
const isFilterMethodValid = computed(() => props2.filterable && isFunction(props2.filterMethod));
|
|
const isRemoteMethodValid = computed(() => props2.filterable && props2.remote && isFunction(props2.remoteMethod));
|
|
const filterOptions = (query) => {
|
|
const regexp = new RegExp(escapeStringRegexp(query), "i");
|
|
const isValidOption = (o) => {
|
|
if (isFilterMethodValid.value || isRemoteMethodValid.value)
|
|
return true;
|
|
return query ? regexp.test(getLabel(o) || "") : true;
|
|
};
|
|
if (props2.loading) {
|
|
return [];
|
|
}
|
|
return [...states.createdOptions, ...props2.options].reduce((all, item) => {
|
|
const options = getOptions(item);
|
|
if (isArray(options)) {
|
|
const filtered = options.filter(isValidOption);
|
|
if (filtered.length > 0) {
|
|
all.push({
|
|
label: getLabel(item),
|
|
type: "Group"
|
|
}, ...filtered);
|
|
}
|
|
} else if (props2.remote || isValidOption(item)) {
|
|
all.push(item);
|
|
}
|
|
return all;
|
|
}, []);
|
|
};
|
|
const updateOptions = () => {
|
|
filteredOptions.value = filterOptions(states.inputValue);
|
|
};
|
|
const allOptionsValueMap = computed(() => {
|
|
const valueMap = /* @__PURE__ */ new Map();
|
|
allOptions.value.forEach((option, index) => {
|
|
valueMap.set(getValueKey(getValue(option)), { option, index });
|
|
});
|
|
return valueMap;
|
|
});
|
|
const filteredOptionsValueMap = computed(() => {
|
|
const valueMap = /* @__PURE__ */ new Map();
|
|
filteredOptions.value.forEach((option, index) => {
|
|
valueMap.set(getValueKey(getValue(option)), { option, index });
|
|
});
|
|
return valueMap;
|
|
});
|
|
const optionsAllDisabled = computed(() => filteredOptions.value.every((option) => getDisabled(option)));
|
|
const selectSize = useFormSize();
|
|
const collapseTagSize = computed(() => selectSize.value === "small" ? "small" : "default");
|
|
const calculatePopperSize = () => {
|
|
var _a;
|
|
if (isNumber(props2.fitInputWidth)) {
|
|
popperSize.value = props2.fitInputWidth;
|
|
return;
|
|
}
|
|
const width = ((_a = selectRef.value) == null ? void 0 : _a.offsetWidth) || 200;
|
|
if (!props2.fitInputWidth && hasOptions.value) {
|
|
nextTick(() => {
|
|
popperSize.value = Math.max(width, calculateLabelMaxWidth());
|
|
});
|
|
} else {
|
|
popperSize.value = width;
|
|
}
|
|
};
|
|
const calculateLabelMaxWidth = () => {
|
|
var _a, _b;
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const selector = nsSelect.be("dropdown", "item");
|
|
const dom = ((_b = (_a = menuRef.value) == null ? void 0 : _a.listRef) == null ? void 0 : _b.innerRef) || document;
|
|
const dropdownItemEl = dom.querySelector(`.${selector}`);
|
|
if (dropdownItemEl === null || ctx === null)
|
|
return 0;
|
|
const style = getComputedStyle(dropdownItemEl);
|
|
const padding = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight);
|
|
ctx.font = `bold ${style.font.replace(new RegExp(`\\b${style.fontWeight}\\b`), "")}`;
|
|
const maxWidth = filteredOptions.value.reduce((max, option) => {
|
|
const metrics = ctx.measureText(getLabel(option));
|
|
return Math.max(metrics.width, max);
|
|
}, 0);
|
|
return maxWidth + padding;
|
|
};
|
|
const getGapWidth = () => {
|
|
if (!selectionRef.value)
|
|
return 0;
|
|
const style = window.getComputedStyle(selectionRef.value);
|
|
return Number.parseFloat(style.gap || "6px");
|
|
};
|
|
const tagStyle = computed(() => {
|
|
const gapWidth = getGapWidth();
|
|
const inputSlotWidth = props2.filterable ? gapWidth + MINIMUM_INPUT_WIDTH : 0;
|
|
const maxWidth = collapseItemRef.value && props2.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth;
|
|
return { maxWidth: `${maxWidth}px` };
|
|
});
|
|
const collapseTagStyle = computed(() => {
|
|
return { maxWidth: `${states.selectionWidth}px` };
|
|
});
|
|
const shouldShowPlaceholder = computed(() => {
|
|
if (isArray(props2.modelValue)) {
|
|
return props2.modelValue.length === 0 && !states.inputValue;
|
|
}
|
|
return props2.filterable ? !states.inputValue : true;
|
|
});
|
|
const currentPlaceholder = computed(() => {
|
|
var _a;
|
|
const _placeholder = (_a = props2.placeholder) != null ? _a : t("el.select.placeholder");
|
|
return props2.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
|
|
});
|
|
const popperRef = computed(() => {
|
|
var _a, _b;
|
|
return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
|
|
});
|
|
const indexRef = computed(() => {
|
|
if (props2.multiple) {
|
|
const len = props2.modelValue.length;
|
|
if (props2.modelValue.length > 0 && filteredOptionsValueMap.value.has(props2.modelValue[len - 1])) {
|
|
const { index } = filteredOptionsValueMap.value.get(props2.modelValue[len - 1]);
|
|
return index;
|
|
}
|
|
} else {
|
|
if (!isEmptyValue(props2.modelValue) && filteredOptionsValueMap.value.has(props2.modelValue)) {
|
|
const { index } = filteredOptionsValueMap.value.get(props2.modelValue);
|
|
return index;
|
|
}
|
|
}
|
|
return -1;
|
|
});
|
|
const dropdownMenuVisible = computed({
|
|
get() {
|
|
return expanded.value && (props2.loading || !isRemoteSearchEmpty.value) && (!debouncing.value || !isEmpty(states.previousQuery));
|
|
},
|
|
set(val) {
|
|
expanded.value = val;
|
|
}
|
|
});
|
|
const showTagList = computed(() => {
|
|
if (!props2.multiple) {
|
|
return [];
|
|
}
|
|
return props2.collapseTags ? states.cachedOptions.slice(0, props2.maxCollapseTags) : states.cachedOptions;
|
|
});
|
|
const collapseTagList = computed(() => {
|
|
if (!props2.multiple) {
|
|
return [];
|
|
}
|
|
return props2.collapseTags ? states.cachedOptions.slice(props2.maxCollapseTags) : [];
|
|
});
|
|
const {
|
|
createNewOption,
|
|
removeNewOption,
|
|
selectNewOption,
|
|
clearAllNewOption
|
|
} = useAllowCreate(props2, states);
|
|
const toggleMenu = () => {
|
|
if (selectDisabled.value)
|
|
return;
|
|
if (states.menuVisibleOnFocus) {
|
|
states.menuVisibleOnFocus = false;
|
|
} else {
|
|
expanded.value = !expanded.value;
|
|
}
|
|
};
|
|
const onInputChange = () => {
|
|
if (states.inputValue.length > 0 && !expanded.value) {
|
|
expanded.value = true;
|
|
}
|
|
createNewOption(states.inputValue);
|
|
nextTick(() => {
|
|
handleQueryChange(states.inputValue);
|
|
});
|
|
};
|
|
const debouncedOnInputChange = useDebounceFn(() => {
|
|
onInputChange();
|
|
debouncing.value = false;
|
|
}, debounce);
|
|
const handleQueryChange = (val) => {
|
|
if (states.previousQuery === val || isComposing.value) {
|
|
return;
|
|
}
|
|
states.previousQuery = val;
|
|
if (props2.filterable && isFunction(props2.filterMethod)) {
|
|
props2.filterMethod(val);
|
|
} else if (props2.filterable && props2.remote && isFunction(props2.remoteMethod)) {
|
|
props2.remoteMethod(val);
|
|
}
|
|
if (props2.defaultFirstOption && (props2.filterable || props2.remote) && filteredOptions.value.length) {
|
|
nextTick(checkDefaultFirstOption);
|
|
} else {
|
|
nextTick(updateHoveringIndex);
|
|
}
|
|
};
|
|
const checkDefaultFirstOption = () => {
|
|
const optionsInDropdown = filteredOptions.value.filter((n) => !n.disabled && n.type !== "Group");
|
|
const userCreatedOption = optionsInDropdown.find((n) => n.created);
|
|
const firstOriginOption = optionsInDropdown[0];
|
|
states.hoveringIndex = getValueIndex(filteredOptions.value, userCreatedOption || firstOriginOption);
|
|
};
|
|
const emitChange = (val) => {
|
|
if (!isEqual_default(props2.modelValue, val)) {
|
|
emit(CHANGE_EVENT, val);
|
|
}
|
|
};
|
|
const update = (val) => {
|
|
emit(UPDATE_MODEL_EVENT, val);
|
|
emitChange(val);
|
|
states.previousValue = props2.multiple ? String(val) : val;
|
|
nextTick(() => {
|
|
if (props2.multiple && isArray(props2.modelValue)) {
|
|
const cachedOptions = states.cachedOptions.slice();
|
|
const selectedOptions = props2.modelValue.map((value) => getOption(value, cachedOptions));
|
|
if (!isEqual_default(states.cachedOptions, selectedOptions)) {
|
|
states.cachedOptions = selectedOptions;
|
|
}
|
|
} else {
|
|
initStates(true);
|
|
}
|
|
});
|
|
};
|
|
const getValueIndex = (arr = [], value) => {
|
|
if (!isObject(value)) {
|
|
return arr.indexOf(value);
|
|
}
|
|
const valueKey = props2.valueKey;
|
|
let index = -1;
|
|
arr.some((item, i) => {
|
|
if (get_default(item, valueKey) === get_default(value, valueKey)) {
|
|
index = i;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
return index;
|
|
};
|
|
const getValueKey = (item) => {
|
|
return isObject(item) ? get_default(item, props2.valueKey) : item;
|
|
};
|
|
const handleResize = () => {
|
|
calculatePopperSize();
|
|
};
|
|
const resetSelectionWidth = () => {
|
|
states.selectionWidth = Number.parseFloat(window.getComputedStyle(selectionRef.value).width);
|
|
};
|
|
const resetCollapseItemWidth = () => {
|
|
states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
|
|
};
|
|
const updateTooltip = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const updateTagTooltip = () => {
|
|
var _a, _b;
|
|
(_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
|
};
|
|
const onSelect = (option) => {
|
|
const optionValue = getValue(option);
|
|
if (props2.multiple) {
|
|
let selectedOptions = props2.modelValue.slice();
|
|
const index = getValueIndex(selectedOptions, optionValue);
|
|
if (index > -1) {
|
|
selectedOptions = [
|
|
...selectedOptions.slice(0, index),
|
|
...selectedOptions.slice(index + 1)
|
|
];
|
|
states.cachedOptions.splice(index, 1);
|
|
removeNewOption(option);
|
|
} else if (props2.multipleLimit <= 0 || selectedOptions.length < props2.multipleLimit) {
|
|
selectedOptions = [...selectedOptions, optionValue];
|
|
states.cachedOptions.push(option);
|
|
selectNewOption(option);
|
|
}
|
|
update(selectedOptions);
|
|
if (option.created) {
|
|
handleQueryChange("");
|
|
}
|
|
if (props2.filterable && !props2.reserveKeyword) {
|
|
states.inputValue = "";
|
|
}
|
|
} else {
|
|
states.selectedLabel = getLabel(option);
|
|
!isEqual_default(props2.modelValue, optionValue) && update(optionValue);
|
|
expanded.value = false;
|
|
selectNewOption(option);
|
|
if (!option.created) {
|
|
clearAllNewOption();
|
|
}
|
|
}
|
|
focus();
|
|
};
|
|
const deleteTag = (event, option) => {
|
|
let selectedOptions = props2.modelValue.slice();
|
|
const index = getValueIndex(selectedOptions, getValue(option));
|
|
if (index > -1 && !selectDisabled.value) {
|
|
selectedOptions = [
|
|
...props2.modelValue.slice(0, index),
|
|
...props2.modelValue.slice(index + 1)
|
|
];
|
|
states.cachedOptions.splice(index, 1);
|
|
update(selectedOptions);
|
|
emit("remove-tag", getValue(option));
|
|
removeNewOption(option);
|
|
}
|
|
event.stopPropagation();
|
|
focus();
|
|
};
|
|
const focus = () => {
|
|
var _a;
|
|
(_a = inputRef.value) == null ? void 0 : _a.focus();
|
|
};
|
|
const blur = () => {
|
|
var _a;
|
|
if (expanded.value) {
|
|
expanded.value = false;
|
|
nextTick(() => {
|
|
var _a2;
|
|
return (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
|
|
});
|
|
return;
|
|
}
|
|
(_a = inputRef.value) == null ? void 0 : _a.blur();
|
|
};
|
|
const handleEsc = () => {
|
|
if (states.inputValue.length > 0) {
|
|
states.inputValue = "";
|
|
} else {
|
|
expanded.value = false;
|
|
}
|
|
};
|
|
const getLastNotDisabledIndex = (value) => findLastIndex_default(value, (it) => !states.cachedOptions.some((option) => getValue(option) === it && getDisabled(option)));
|
|
const handleDel = (e) => {
|
|
const code = getEventCode(e);
|
|
if (!props2.multiple)
|
|
return;
|
|
if (code === EVENT_CODE.delete)
|
|
return;
|
|
if (states.inputValue.length === 0) {
|
|
e.preventDefault();
|
|
const selected = props2.modelValue.slice();
|
|
const lastNotDisabledIndex = getLastNotDisabledIndex(selected);
|
|
if (lastNotDisabledIndex < 0)
|
|
return;
|
|
const removeTagValue = selected[lastNotDisabledIndex];
|
|
selected.splice(lastNotDisabledIndex, 1);
|
|
const option = states.cachedOptions[lastNotDisabledIndex];
|
|
states.cachedOptions.splice(lastNotDisabledIndex, 1);
|
|
removeNewOption(option);
|
|
update(selected);
|
|
emit("remove-tag", removeTagValue);
|
|
}
|
|
};
|
|
const handleClear = () => {
|
|
let emptyValue;
|
|
if (isArray(props2.modelValue)) {
|
|
emptyValue = [];
|
|
} else {
|
|
emptyValue = valueOnClear.value;
|
|
}
|
|
states.selectedLabel = "";
|
|
expanded.value = false;
|
|
update(emptyValue);
|
|
emit("clear");
|
|
clearAllNewOption();
|
|
focus();
|
|
};
|
|
const onKeyboardNavigate = (direction2, hoveringIndex = void 0) => {
|
|
const options = filteredOptions.value;
|
|
if (!["forward", "backward"].includes(direction2) || selectDisabled.value || options.length <= 0 || optionsAllDisabled.value || isComposing.value) {
|
|
return;
|
|
}
|
|
if (!expanded.value) {
|
|
return toggleMenu();
|
|
}
|
|
if (isUndefined(hoveringIndex)) {
|
|
hoveringIndex = states.hoveringIndex;
|
|
}
|
|
let newIndex = -1;
|
|
if (direction2 === "forward") {
|
|
newIndex = hoveringIndex + 1;
|
|
if (newIndex >= options.length) {
|
|
newIndex = 0;
|
|
}
|
|
} else if (direction2 === "backward") {
|
|
newIndex = hoveringIndex - 1;
|
|
if (newIndex < 0 || newIndex >= options.length) {
|
|
newIndex = options.length - 1;
|
|
}
|
|
}
|
|
const option = options[newIndex];
|
|
if (getDisabled(option) || option.type === "Group") {
|
|
return onKeyboardNavigate(direction2, newIndex);
|
|
} else {
|
|
states.hoveringIndex = newIndex;
|
|
scrollToItem(newIndex);
|
|
}
|
|
};
|
|
const onKeyboardSelect = () => {
|
|
if (!expanded.value) {
|
|
return toggleMenu();
|
|
} else if (~states.hoveringIndex && filteredOptions.value[states.hoveringIndex]) {
|
|
onSelect(filteredOptions.value[states.hoveringIndex]);
|
|
}
|
|
};
|
|
const onHoverOption = (idx) => {
|
|
states.hoveringIndex = idx != null ? idx : -1;
|
|
};
|
|
const updateHoveringIndex = () => {
|
|
if (!props2.multiple) {
|
|
states.hoveringIndex = filteredOptions.value.findIndex((item) => {
|
|
return getValueKey(getValue(item)) === getValueKey(props2.modelValue);
|
|
});
|
|
} else {
|
|
states.hoveringIndex = filteredOptions.value.findIndex((item) => props2.modelValue.some((modelValue) => getValueKey(modelValue) === getValueKey(getValue(item))));
|
|
}
|
|
};
|
|
const onInput = (event) => {
|
|
states.inputValue = event.target.value;
|
|
if (props2.remote) {
|
|
debouncing.value = true;
|
|
debouncedOnInputChange();
|
|
} else {
|
|
return onInputChange();
|
|
}
|
|
};
|
|
const handleClickOutside = (event) => {
|
|
expanded.value = false;
|
|
if (isFocused.value) {
|
|
const _event = new FocusEvent("blur", event);
|
|
handleBlur(_event);
|
|
}
|
|
};
|
|
const handleMenuEnter = () => {
|
|
states.isBeforeHide = false;
|
|
return nextTick(() => {
|
|
if (~indexRef.value) {
|
|
scrollToItem(states.hoveringIndex);
|
|
}
|
|
});
|
|
};
|
|
const scrollToItem = (index) => {
|
|
menuRef.value.scrollToItem(index);
|
|
};
|
|
const getOption = (value, cachedOptions) => {
|
|
const selectValue = getValueKey(value);
|
|
if (allOptionsValueMap.value.has(selectValue)) {
|
|
const { option } = allOptionsValueMap.value.get(selectValue);
|
|
return option;
|
|
}
|
|
if (cachedOptions && cachedOptions.length) {
|
|
const option = cachedOptions.find((option2) => getValueKey(getValue(option2)) === selectValue);
|
|
if (option) {
|
|
return option;
|
|
}
|
|
}
|
|
return {
|
|
[aliasProps.value.value]: value,
|
|
[aliasProps.value.label]: value
|
|
};
|
|
};
|
|
const getIndex = (option) => {
|
|
var _a, _b;
|
|
return (_b = (_a = allOptionsValueMap.value.get(getValue(option))) == null ? void 0 : _a.index) != null ? _b : -1;
|
|
};
|
|
const initStates = (needUpdateSelectedLabel = false) => {
|
|
if (props2.multiple) {
|
|
if (props2.modelValue.length > 0) {
|
|
const cachedOptions = states.cachedOptions.slice();
|
|
states.cachedOptions.length = 0;
|
|
states.previousValue = props2.modelValue.toString();
|
|
for (const value of props2.modelValue) {
|
|
const option = getOption(value, cachedOptions);
|
|
states.cachedOptions.push(option);
|
|
}
|
|
} else {
|
|
states.cachedOptions = [];
|
|
states.previousValue = void 0;
|
|
}
|
|
} else {
|
|
if (hasModelValue.value) {
|
|
states.previousValue = props2.modelValue;
|
|
const options = filteredOptions.value;
|
|
const selectedItemIndex = options.findIndex((option) => getValueKey(getValue(option)) === getValueKey(props2.modelValue));
|
|
if (~selectedItemIndex) {
|
|
states.selectedLabel = getLabel(options[selectedItemIndex]);
|
|
} else {
|
|
if (!states.selectedLabel || needUpdateSelectedLabel) {
|
|
states.selectedLabel = getValueKey(props2.modelValue);
|
|
}
|
|
}
|
|
} else {
|
|
states.selectedLabel = "";
|
|
states.previousValue = void 0;
|
|
}
|
|
}
|
|
clearAllNewOption();
|
|
calculatePopperSize();
|
|
};
|
|
watch(() => props2.fitInputWidth, () => {
|
|
calculatePopperSize();
|
|
});
|
|
watch(expanded, (val) => {
|
|
if (val) {
|
|
if (!props2.persistent) {
|
|
calculatePopperSize();
|
|
}
|
|
handleQueryChange("");
|
|
} else {
|
|
states.inputValue = "";
|
|
states.previousQuery = null;
|
|
states.isBeforeHide = true;
|
|
createNewOption("");
|
|
}
|
|
emit("visible-change", val);
|
|
});
|
|
watch(() => props2.modelValue, (val, oldVal) => {
|
|
var _a;
|
|
const isValEmpty = !val || isArray(val) && val.length === 0;
|
|
if (isValEmpty || props2.multiple && !isEqual_default(val.toString(), states.previousValue) || !props2.multiple && getValueKey(val) !== getValueKey(states.previousValue)) {
|
|
initStates(true);
|
|
}
|
|
if (!isEqual_default(val, oldVal) && props2.validateEvent) {
|
|
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err));
|
|
}
|
|
}, {
|
|
deep: true
|
|
});
|
|
watch(() => props2.options, () => {
|
|
const input = inputRef.value;
|
|
if (!input || input && document.activeElement !== input) {
|
|
initStates();
|
|
}
|
|
}, {
|
|
deep: true,
|
|
flush: "post"
|
|
});
|
|
watch(() => filteredOptions.value, () => {
|
|
calculatePopperSize();
|
|
return menuRef.value && nextTick(menuRef.value.resetScrollTop);
|
|
});
|
|
watchEffect(() => {
|
|
if (states.isBeforeHide)
|
|
return;
|
|
updateOptions();
|
|
});
|
|
watchEffect(() => {
|
|
const { valueKey, options } = props2;
|
|
const duplicateValue = /* @__PURE__ */ new Map();
|
|
for (const item of options) {
|
|
const optionValue = getValue(item);
|
|
let v = optionValue;
|
|
if (isObject(v)) {
|
|
v = get_default(optionValue, valueKey);
|
|
}
|
|
if (duplicateValue.get(v)) {
|
|
debugWarn("ElSelectV2", `The option values you provided seem to be duplicated, which may cause some problems, please check.`);
|
|
break;
|
|
} else {
|
|
duplicateValue.set(v, true);
|
|
}
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
initStates();
|
|
});
|
|
useResizeObserver(selectRef, handleResize);
|
|
useResizeObserver(selectionRef, resetSelectionWidth);
|
|
useResizeObserver(menuRef, updateTooltip);
|
|
useResizeObserver(wrapperRef, updateTooltip);
|
|
useResizeObserver(tagMenuRef, updateTagTooltip);
|
|
useResizeObserver(collapseItemRef, resetCollapseItemWidth);
|
|
return {
|
|
inputId,
|
|
collapseTagSize,
|
|
currentPlaceholder,
|
|
expanded,
|
|
emptyText,
|
|
popupHeight,
|
|
debounce,
|
|
allOptions,
|
|
allOptionsValueMap,
|
|
filteredOptions,
|
|
iconComponent,
|
|
iconReverse,
|
|
tagStyle,
|
|
collapseTagStyle,
|
|
popperSize,
|
|
dropdownMenuVisible,
|
|
hasModelValue,
|
|
shouldShowPlaceholder,
|
|
selectDisabled,
|
|
selectSize,
|
|
needStatusIcon,
|
|
showClearBtn,
|
|
states,
|
|
isFocused,
|
|
nsSelect,
|
|
nsInput,
|
|
inputRef,
|
|
menuRef,
|
|
tagMenuRef,
|
|
tooltipRef,
|
|
tagTooltipRef,
|
|
selectRef,
|
|
wrapperRef,
|
|
selectionRef,
|
|
prefixRef,
|
|
suffixRef,
|
|
collapseItemRef,
|
|
popperRef,
|
|
validateState,
|
|
validateIcon,
|
|
showTagList,
|
|
collapseTagList,
|
|
debouncedOnInputChange,
|
|
deleteTag,
|
|
getLabel,
|
|
getValue,
|
|
getDisabled,
|
|
getValueKey,
|
|
getIndex,
|
|
handleClear,
|
|
handleClickOutside,
|
|
handleDel,
|
|
handleEsc,
|
|
focus,
|
|
blur,
|
|
handleMenuEnter,
|
|
handleResize,
|
|
resetSelectionWidth,
|
|
updateTooltip,
|
|
updateTagTooltip,
|
|
updateOptions,
|
|
toggleMenu,
|
|
scrollTo: scrollToItem,
|
|
onInput,
|
|
onKeyboardNavigate,
|
|
onKeyboardSelect,
|
|
onSelect,
|
|
onHover: onHoverOption,
|
|
handleCompositionStart,
|
|
handleCompositionEnd,
|
|
handleCompositionUpdate
|
|
};
|
|
};
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/src/select.mjs
|
|
init_shared_esm_bundler();
|
|
var _sfc_main3 = defineComponent({
|
|
name: "ElSelectV2",
|
|
components: {
|
|
ElSelectMenu,
|
|
ElTag,
|
|
ElTooltip,
|
|
ElIcon
|
|
},
|
|
directives: { ClickOutside },
|
|
props: selectV2Props,
|
|
emits: selectV2Emits,
|
|
setup(props2, { emit }) {
|
|
const modelValue = computed(() => {
|
|
const { modelValue: rawModelValue, multiple } = props2;
|
|
const fallback = multiple ? [] : void 0;
|
|
if (isArray(rawModelValue)) {
|
|
return multiple ? rawModelValue : fallback;
|
|
}
|
|
return multiple ? fallback : rawModelValue;
|
|
});
|
|
const API = useSelect(reactive({
|
|
...toRefs(props2),
|
|
modelValue
|
|
}), emit);
|
|
const { calculatorRef, inputStyle } = useCalcInputWidth();
|
|
const contentId = useId();
|
|
provide(selectV2InjectionKey, {
|
|
props: reactive({
|
|
...toRefs(props2),
|
|
height: API.popupHeight,
|
|
modelValue
|
|
}),
|
|
expanded: API.expanded,
|
|
tooltipRef: API.tooltipRef,
|
|
contentId,
|
|
onSelect: API.onSelect,
|
|
onHover: API.onHover,
|
|
onKeyboardNavigate: API.onKeyboardNavigate,
|
|
onKeyboardSelect: API.onKeyboardSelect
|
|
});
|
|
const selectedLabel = computed(() => {
|
|
if (!props2.multiple) {
|
|
return API.states.selectedLabel;
|
|
}
|
|
return API.states.cachedOptions.map((i) => API.getLabel(i));
|
|
});
|
|
return {
|
|
...API,
|
|
modelValue,
|
|
selectedLabel,
|
|
calculatorRef,
|
|
inputStyle,
|
|
contentId,
|
|
BORDER_HORIZONTAL_WIDTH
|
|
};
|
|
}
|
|
});
|
|
function _sfc_render3(_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_tag = resolveComponent("el-tag");
|
|
const _component_el_tooltip = resolveComponent("el-tooltip");
|
|
const _component_el_icon = resolveComponent("el-icon");
|
|
const _component_el_select_menu = resolveComponent("el-select-menu");
|
|
const _directive_click_outside = resolveDirective("click-outside");
|
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
ref: "selectRef",
|
|
class: normalizeClass([_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]),
|
|
onMouseenter: ($event) => _ctx.states.inputHovering = true,
|
|
onMouseleave: ($event) => _ctx.states.inputHovering = false
|
|
}, [
|
|
createVNode(_component_el_tooltip, {
|
|
ref: "tooltipRef",
|
|
visible: _ctx.dropdownMenuVisible,
|
|
teleported: _ctx.teleported,
|
|
"popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
|
|
"popper-style": _ctx.popperStyle,
|
|
"gpu-acceleration": false,
|
|
"stop-popper-mouse-event": false,
|
|
"popper-options": _ctx.popperOptions,
|
|
"fallback-placements": _ctx.fallbackPlacements,
|
|
effect: _ctx.effect,
|
|
placement: _ctx.placement,
|
|
pure: "",
|
|
transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
|
|
trigger: "click",
|
|
persistent: _ctx.persistent,
|
|
"append-to": _ctx.appendTo,
|
|
"show-arrow": _ctx.showArrow,
|
|
offset: _ctx.offset,
|
|
onBeforeShow: _ctx.handleMenuEnter,
|
|
onHide: ($event) => _ctx.states.isBeforeHide = false
|
|
}, {
|
|
default: withCtx(() => {
|
|
var _a, _b;
|
|
return [
|
|
createBaseVNode("div", {
|
|
ref: "wrapperRef",
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("wrapper"),
|
|
_ctx.nsSelect.is("focused", _ctx.isFocused),
|
|
_ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
|
|
_ctx.nsSelect.is("filterable", _ctx.filterable),
|
|
_ctx.nsSelect.is("disabled", _ctx.selectDisabled)
|
|
]),
|
|
onClick: withModifiers(_ctx.toggleMenu, ["prevent"])
|
|
}, [
|
|
_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
ref: "prefixRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("prefix"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
], 2)) : createCommentVNode("v-if", true),
|
|
createBaseVNode("div", {
|
|
ref: "selectionRef",
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selection"),
|
|
_ctx.nsSelect.is("near", _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.modelValue.length)
|
|
])
|
|
}, [
|
|
_ctx.multiple ? renderSlot(_ctx.$slots, "tag", {
|
|
key: 0,
|
|
data: _ctx.states.cachedOptions,
|
|
deleteTag: _ctx.deleteTag,
|
|
selectDisabled: _ctx.selectDisabled
|
|
}, () => [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.showTagList, (item) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.getValueKey(_ctx.getValue(item)),
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
closable: !_ctx.selectDisabled && !_ctx.getDisabled(item),
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
style: normalizeStyle(_ctx.tagStyle),
|
|
onClose: ($event) => _ctx.deleteTag($event, item)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
index: _ctx.getIndex(item),
|
|
label: _ctx.getLabel(item),
|
|
value: _ctx.getValue(item)
|
|
}, () => [
|
|
createTextVNode(toDisplayString(_ctx.getLabel(item)), 1)
|
|
])
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
|
|
], 2);
|
|
}), 128)),
|
|
_ctx.collapseTags && _ctx.modelValue.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
|
|
key: 0,
|
|
ref: "tagTooltipRef",
|
|
disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
|
|
"fallback-placements": ["bottom", "top", "right", "left"],
|
|
effect: _ctx.effect,
|
|
placement: "bottom",
|
|
"popper-class": _ctx.popperClass,
|
|
"popper-style": _ctx.popperStyle,
|
|
teleported: _ctx.teleported
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
ref: "collapseItemRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
closable: false,
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
style: normalizeStyle(_ctx.collapseTagStyle),
|
|
"disable-transitions": ""
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, " + " + toDisplayString(_ctx.modelValue.length - _ctx.maxCollapseTags), 3)
|
|
]),
|
|
_: 1
|
|
}, 8, ["size", "type", "effect", "style"])
|
|
], 2)
|
|
]),
|
|
content: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
ref: "tagMenuRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("selection"))
|
|
}, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.collapseTagList, (selected) => {
|
|
return openBlock(), createElementBlock("div", {
|
|
key: _ctx.getValueKey(_ctx.getValue(selected)),
|
|
class: normalizeClass(_ctx.nsSelect.e("selected-item"))
|
|
}, [
|
|
createVNode(_component_el_tag, {
|
|
class: "in-tooltip",
|
|
closable: !_ctx.selectDisabled && !_ctx.getDisabled(selected),
|
|
size: _ctx.collapseTagSize,
|
|
type: _ctx.tagType,
|
|
effect: _ctx.tagEffect,
|
|
"disable-transitions": "",
|
|
onClose: ($event) => _ctx.deleteTag($event, selected)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("span", {
|
|
class: normalizeClass(_ctx.nsSelect.e("tags-text"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "label", {
|
|
index: _ctx.getIndex(selected),
|
|
label: _ctx.getLabel(selected),
|
|
value: _ctx.getValue(selected)
|
|
}, () => [
|
|
createTextVNode(toDisplayString(_ctx.getLabel(selected)), 1)
|
|
])
|
|
], 2)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["closable", "size", "type", "effect", "onClose"])
|
|
], 2);
|
|
}), 128))
|
|
], 2)
|
|
]),
|
|
_: 3
|
|
}, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported"])) : createCommentVNode("v-if", true)
|
|
]) : createCommentVNode("v-if", true),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selected-item"),
|
|
_ctx.nsSelect.e("input-wrapper"),
|
|
_ctx.nsSelect.is("hidden", !_ctx.filterable)
|
|
])
|
|
}, [
|
|
withDirectives(createBaseVNode("input", {
|
|
id: _ctx.inputId,
|
|
ref: "inputRef",
|
|
"onUpdate:modelValue": ($event) => _ctx.states.inputValue = $event,
|
|
style: normalizeStyle(_ctx.inputStyle),
|
|
autocomplete: _ctx.autocomplete,
|
|
tabindex: _ctx.tabindex,
|
|
"aria-autocomplete": "none",
|
|
"aria-haspopup": "listbox",
|
|
autocapitalize: "off",
|
|
"aria-expanded": _ctx.expanded,
|
|
"aria-label": _ctx.ariaLabel,
|
|
class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
|
|
disabled: _ctx.selectDisabled,
|
|
role: "combobox",
|
|
"aria-controls": _ctx.contentId,
|
|
"aria-activedescendant": _ctx.states.hoveringIndex >= 0 ? `${_ctx.contentId}-${_ctx.states.hoveringIndex}` : "",
|
|
readonly: !_ctx.filterable,
|
|
spellcheck: "false",
|
|
type: "text",
|
|
name: _ctx.name,
|
|
onInput: _ctx.onInput,
|
|
onCompositionstart: _ctx.handleCompositionStart,
|
|
onCompositionupdate: _ctx.handleCompositionUpdate,
|
|
onCompositionend: _ctx.handleCompositionEnd,
|
|
onKeydown: [
|
|
withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("backward"), ["stop", "prevent"]), ["up"]),
|
|
withKeys(withModifiers(($event) => _ctx.onKeyboardNavigate("forward"), ["stop", "prevent"]), ["down"]),
|
|
withKeys(withModifiers(_ctx.onKeyboardSelect, ["stop", "prevent"]), ["enter"]),
|
|
withKeys(withModifiers(_ctx.handleEsc, ["stop", "prevent"]), ["esc"]),
|
|
withKeys(withModifiers(_ctx.handleDel, ["stop"]), ["delete"])
|
|
],
|
|
onClick: withModifiers(_ctx.toggleMenu, ["stop"])
|
|
}, null, 46, ["id", "onUpdate:modelValue", "autocomplete", "tabindex", "aria-expanded", "aria-label", "disabled", "aria-controls", "aria-activedescendant", "readonly", "name", "onInput", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown", "onClick"]), [
|
|
[vModelText, _ctx.states.inputValue]
|
|
]),
|
|
_ctx.filterable ? (openBlock(), createElementBlock("span", {
|
|
key: 0,
|
|
ref: "calculatorRef",
|
|
"aria-hidden": "true",
|
|
class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
|
|
textContent: toDisplayString(_ctx.states.inputValue)
|
|
}, null, 10, ["textContent"])) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
_ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("selected-item"),
|
|
_ctx.nsSelect.e("placeholder"),
|
|
_ctx.nsSelect.is("transparent", !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue)
|
|
])
|
|
}, [
|
|
_ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
|
|
key: 0,
|
|
index: (_b = (_a = _ctx.allOptionsValueMap.get(_ctx.modelValue)) == null ? void 0 : _a.index) != null ? _b : -1,
|
|
label: _ctx.currentPlaceholder,
|
|
value: _ctx.modelValue
|
|
}, () => [
|
|
createBaseVNode("span", null, toDisplayString(_ctx.currentPlaceholder), 1)
|
|
]) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.currentPlaceholder), 1))
|
|
], 2)) : createCommentVNode("v-if", true)
|
|
], 2),
|
|
createBaseVNode("div", {
|
|
ref: "suffixRef",
|
|
class: normalizeClass(_ctx.nsSelect.e("suffix"))
|
|
}, [
|
|
_ctx.iconComponent ? withDirectives((openBlock(), createBlock(_component_el_icon, {
|
|
key: 0,
|
|
class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsInput.e("icon"), _ctx.iconReverse])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])), [
|
|
[vShow, !_ctx.showClearBtn]
|
|
]) : createCommentVNode("v-if", true),
|
|
_ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 1,
|
|
class: normalizeClass([
|
|
_ctx.nsSelect.e("caret"),
|
|
_ctx.nsInput.e("icon"),
|
|
_ctx.nsSelect.e("clear")
|
|
]),
|
|
onClick: withModifiers(_ctx.handleClear, ["prevent", "stop"])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
|
|
_ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
|
|
key: 2,
|
|
class: normalizeClass([
|
|
_ctx.nsInput.e("icon"),
|
|
_ctx.nsInput.e("validateIcon"),
|
|
_ctx.nsInput.is("loading", _ctx.validateState === "validating")
|
|
])
|
|
}, {
|
|
default: withCtx(() => [
|
|
(openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"])) : createCommentVNode("v-if", true)
|
|
], 2)
|
|
], 10, ["onClick"])
|
|
];
|
|
}),
|
|
content: withCtx(() => [
|
|
createVNode(_component_el_select_menu, {
|
|
id: _ctx.contentId,
|
|
ref: "menuRef",
|
|
data: _ctx.filteredOptions,
|
|
width: _ctx.popperSize - _ctx.BORDER_HORIZONTAL_WIDTH,
|
|
"hovering-index": _ctx.states.hoveringIndex,
|
|
"scrollbar-always-on": _ctx.scrollbarAlwaysOn,
|
|
"aria-label": _ctx.ariaLabel
|
|
}, createSlots({
|
|
default: withCtx((scope) => [
|
|
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(scope)))
|
|
]),
|
|
_: 2
|
|
}, [
|
|
_ctx.$slots.header ? {
|
|
name: "header",
|
|
fn: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "header")
|
|
], 10, ["onClick"])
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.loading && _ctx.loading ? {
|
|
name: "loading",
|
|
fn: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "loading")
|
|
], 2)
|
|
])
|
|
} : _ctx.loading || _ctx.filteredOptions.length === 0 ? {
|
|
name: "empty",
|
|
fn: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
|
|
}, [
|
|
renderSlot(_ctx.$slots, "empty", {}, () => [
|
|
createBaseVNode("span", null, toDisplayString(_ctx.emptyText), 1)
|
|
])
|
|
], 2)
|
|
])
|
|
} : void 0,
|
|
_ctx.$slots.footer ? {
|
|
name: "footer",
|
|
fn: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
|
|
onClick: withModifiers(() => {
|
|
}, ["stop"])
|
|
}, [
|
|
renderSlot(_ctx.$slots, "footer")
|
|
], 10, ["onClick"])
|
|
])
|
|
} : void 0
|
|
]), 1032, ["id", "data", "width", "hovering-index", "scrollbar-always-on", "aria-label"])
|
|
]),
|
|
_: 3
|
|
}, 8, ["visible", "teleported", "popper-class", "popper-style", "popper-options", "fallback-placements", "effect", "placement", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow", "onHide"])
|
|
], 42, ["onMouseenter", "onMouseleave"])), [
|
|
[_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
|
|
]);
|
|
}
|
|
var Select = _export_sfc(_sfc_main3, [["render", _sfc_render3], ["__file", "select.vue"]]);
|
|
|
|
// ../node_modules/.pnpm/element-plus@2.11.7_vue@3.5.24_typescript@5.9.3_/node_modules/element-plus/es/components/select-v2/index.mjs
|
|
var ElSelectV2 = withInstall(Select);
|
|
|
|
export {
|
|
selectV2InjectionKey,
|
|
useCache,
|
|
DEFAULT_DYNAMIC_LIST_ITEM_SIZE,
|
|
ITEM_RENDER_EVT,
|
|
SCROLL_EVT,
|
|
FORWARD,
|
|
BACKWARD,
|
|
AUTO_ALIGNMENT,
|
|
SMART_ALIGNMENT,
|
|
START_ALIGNMENT,
|
|
CENTERED_ALIGNMENT,
|
|
END_ALIGNMENT,
|
|
RTL,
|
|
RTL_OFFSET_NAG,
|
|
RTL_OFFSET_POS_ASC,
|
|
RTL_OFFSET_POS_DESC,
|
|
useWheel,
|
|
virtualizedProps,
|
|
virtualizedListProps,
|
|
virtualizedGridProps,
|
|
virtualizedScrollbarProps,
|
|
getScrollDir,
|
|
isRTL,
|
|
getRTLOffsetType,
|
|
ScrollBar,
|
|
FixedSizeList,
|
|
DynamicSizeList,
|
|
ElSelectV2
|
|
};
|
|
//# sourceMappingURL=chunk-D4Z6ZKNZ.js.map
|