@wfrog/vc-ui 1.11.10 → 1.11.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/dist/es/chunk/Bw0Rhd-r.mjs +110 -0
  2. package/dist/es/chunk/CqTdDZkE.mjs +31 -0
  3. package/dist/es/chunk/{DAnWZLYj.mjs → CzWfBa_8.mjs} +96 -2
  4. package/dist/es/chunk/D229kQ56.mjs +28 -0
  5. package/dist/es/chunk/{Cxx_YWUC.mjs → DcouM6gM.mjs} +6 -548
  6. package/dist/es/chunk/Fo0dZYnz.mjs +128 -0
  7. package/dist/es/chunk/KanuIcmc.mjs +412 -0
  8. package/dist/es/chunk/{B71xEPfK.mjs → uuUHUjSk.mjs} +4 -35
  9. package/dist/es/components/backbottom/backbottom.mjs +3 -2
  10. package/dist/es/components/button/button.mjs +4 -5
  11. package/dist/es/components/choice/choice.mjs +4 -4
  12. package/dist/es/components/choice/index.css +1 -1
  13. package/dist/es/components/color-switch/color-switch.mjs +73 -1046
  14. package/dist/es/components/color-switch/index.css +1 -1
  15. package/dist/es/components/cropper/cropper.mjs +11 -117
  16. package/dist/es/components/cropper/index.css +1 -1
  17. package/dist/es/components/currency/currency.mjs +4 -5
  18. package/dist/es/components/daterange-picker/daterange-picker.mjs +8 -6253
  19. package/dist/es/components/dialog/dialog.mjs +7 -400
  20. package/dist/es/components/dialog/index.css +1 -1
  21. package/dist/es/components/dialog-camera-upload/dialog-camera-upload.mjs +10 -11
  22. package/dist/es/components/dialog-map-point/dialog-map-point.mjs +4 -3
  23. package/dist/es/components/dialog-upload-images/dialog-upload-images.mjs +9 -1374
  24. package/dist/es/components/dialog-upload-images/index.css +1 -1
  25. package/dist/es/components/drag-verify/drag-verify.mjs +3 -2
  26. package/dist/es/components/drawer/drawer.mjs +10 -352
  27. package/dist/es/components/drawer/index.css +1 -1
  28. package/dist/es/components/easy-pagination/easy-pagination.mjs +3 -2
  29. package/dist/es/components/explorer/explorer.mjs +3 -3
  30. package/dist/es/components/explorer-column-table/explorer-column-table.mjs +5 -7
  31. package/dist/es/components/explorer-column-table/index.css +1 -1
  32. package/dist/es/components/explorer-container/explorer-container.d.ts +1 -1
  33. package/dist/es/components/explorer-container/explorer-container.mjs +4 -3
  34. package/dist/es/components/explorer-filter/explorer-filter.mjs +5 -4
  35. package/dist/es/components/explorer-footer/explorer-footer.mjs +4 -8
  36. package/dist/es/components/explorer-form/explorer-form.mjs +4 -3
  37. package/dist/es/components/explorer-list/explorer-list.mjs +5 -4
  38. package/dist/es/components/explorer-modal-form/explorer-modal-form.mjs +4 -3
  39. package/dist/es/components/explorer-panel/explorer-panel.mjs +3 -3
  40. package/dist/es/components/explorer-query/explorer-query.mjs +9 -2201
  41. package/dist/es/components/explorer-query/index.css +1 -1
  42. package/dist/es/components/explorer-table/explorer-table.mjs +5 -8
  43. package/dist/es/components/explorer-tools/explorer-tools.mjs +13 -264
  44. package/dist/es/components/explorer-tools/index.css +1 -1
  45. package/dist/es/components/explorer-tree/explorer-tree.mjs +4 -5
  46. package/dist/es/components/icon-picker/icon-picker.mjs +8 -12
  47. package/dist/es/components/image/image.mjs +4 -4
  48. package/dist/es/components/info-tooltip/info-tooltip.mjs +336 -4
  49. package/dist/es/components/input/input.mjs +3 -2
  50. package/dist/es/components/input-number/input-number.mjs +3 -3
  51. package/dist/es/components/pca-picker/index.css +1 -1
  52. package/dist/es/components/pca-picker/pca-picker.mjs +443 -601
  53. package/dist/es/components/screenfull/screenfull.mjs +4 -3
  54. package/dist/es/components/scrollbar/scrollbar.mjs +3 -2
  55. package/dist/es/components/select/select.mjs +3 -5
  56. package/dist/es/components/single-player/index.css +1 -1
  57. package/dist/es/components/single-player/single-player.mjs +10 -1087
  58. package/dist/es/components/splitter/splitter.mjs +3 -3
  59. package/dist/es/components/splitter-panel/splitter-panel.mjs +3 -3
  60. package/dist/es/components/switch/index.css +1 -1
  61. package/dist/es/components/switch/switch.mjs +9 -395
  62. package/dist/es/components/tags/tags.mjs +7 -9
  63. package/dist/es/components/text-ellipsis/text-ellipsis.mjs +3 -3
  64. package/dist/es/components/thousand-input/thousand-input.mjs +33 -1
  65. package/dist/es/components/tinymce/tinymce.mjs +4 -3
  66. package/dist/es/components/transfer/transfer.mjs +3 -4
  67. package/dist/es/components/transfer-panel/transfer-panel.mjs +5 -4
  68. package/dist/es/components/tree-picker/popover-cascader.css +1 -1
  69. package/dist/es/components/tree-picker/tree-picker.mjs +5 -10
  70. package/dist/es/index.mjs +1 -1
  71. package/dist/index.css +13 -40
  72. package/package.json +1 -1
  73. package/dist/es/chunk/B-rxnVJv.mjs +0 -3
  74. package/dist/es/chunk/B5HpgPRt.mjs +0 -69
  75. package/dist/es/chunk/BBhZKpIc.mjs +0 -2179
  76. package/dist/es/chunk/BDcsaNYa.mjs +0 -59
  77. package/dist/es/chunk/BTSSEFfD.mjs +0 -319
  78. package/dist/es/chunk/BTpNRPQW.mjs +0 -55
  79. package/dist/es/chunk/BVBK1U57.mjs +0 -96
  80. package/dist/es/chunk/Bc6yUGLs.mjs +0 -45
  81. package/dist/es/chunk/BjVI1XMz.mjs +0 -40
  82. package/dist/es/chunk/BlzQCBDu.mjs +0 -5741
  83. package/dist/es/chunk/BpJKnxlF.mjs +0 -476
  84. package/dist/es/chunk/Brp-qSBw.mjs +0 -2003
  85. package/dist/es/chunk/BunQI8Jb.mjs +0 -390
  86. package/dist/es/chunk/C0XgBrDz.mjs +0 -775
  87. package/dist/es/chunk/C0pTANRX.mjs +0 -109
  88. package/dist/es/chunk/CBMjhoFP.mjs +0 -101
  89. package/dist/es/chunk/CBiNtNvQ.mjs +0 -242
  90. package/dist/es/chunk/CBlJeNBO.mjs +0 -890
  91. package/dist/es/chunk/CCVL_Zj-.mjs +0 -427
  92. package/dist/es/chunk/CEl4MyfJ.mjs +0 -252
  93. package/dist/es/chunk/CJK5_jsA.mjs +0 -53
  94. package/dist/es/chunk/CKOcwq5V.mjs +0 -44
  95. package/dist/es/chunk/COs9dJZa.mjs +0 -66
  96. package/dist/es/chunk/CPt6MxJW.mjs +0 -375
  97. package/dist/es/chunk/CVqW0jzp.mjs +0 -107
  98. package/dist/es/chunk/CccIsEqA.mjs +0 -128
  99. package/dist/es/chunk/CjLR27-a.mjs +0 -582
  100. package/dist/es/chunk/CoGexPPD.mjs +0 -2192
  101. package/dist/es/chunk/CsLIbnzG.mjs +0 -64
  102. package/dist/es/chunk/Ct6q2FXg.mjs +0 -5
  103. package/dist/es/chunk/Cuq5meQh.mjs +0 -184
  104. package/dist/es/chunk/CvYIOfT1.mjs +0 -23
  105. package/dist/es/chunk/CxHJBf4l.mjs +0 -31
  106. package/dist/es/chunk/CzdaOBtA.mjs +0 -66
  107. package/dist/es/chunk/D0QTifnI.mjs +0 -54
  108. package/dist/es/chunk/D1QnA2iT.mjs +0 -229
  109. package/dist/es/chunk/D3AvJlVX.mjs +0 -188
  110. package/dist/es/chunk/D9Lr0Bzb.mjs +0 -1136
  111. package/dist/es/chunk/DCkPv0hy.mjs +0 -29
  112. package/dist/es/chunk/DRwwUUhy.mjs +0 -49
  113. package/dist/es/chunk/DX-2VRY2.mjs +0 -836
  114. package/dist/es/chunk/DZ2oTFad.mjs +0 -687
  115. package/dist/es/chunk/D_bou1py.mjs +0 -55
  116. package/dist/es/chunk/Da199A5L.mjs +0 -314
  117. package/dist/es/chunk/DbhQlaOz.mjs +0 -94
  118. package/dist/es/chunk/Dgu95mOy.mjs +0 -237
  119. package/dist/es/chunk/DhGOsWxx.mjs +0 -6
  120. package/dist/es/chunk/Dm_Sj5aH.mjs +0 -487
  121. package/dist/es/chunk/Dmi-1GRO.mjs +0 -163
  122. package/dist/es/chunk/DodoD9a9.mjs +0 -52
  123. package/dist/es/chunk/DrrVDcwm.mjs +0 -955
  124. package/dist/es/chunk/Du_zJ1Fz.mjs +0 -49
  125. package/dist/es/chunk/DxxbB5jY.mjs +0 -34
  126. package/dist/es/chunk/Gk1J52Yw.mjs +0 -207
  127. package/dist/es/chunk/NsldgdCh.mjs +0 -704
  128. package/dist/es/chunk/V6KjsUQN.mjs +0 -35
  129. package/dist/es/chunk/eEsLFV3s.mjs +0 -76
  130. package/dist/es/chunk/fqiLhk0V.mjs +0 -2065
  131. package/dist/es/chunk/nxVM7re4.mjs +0 -35
  132. package/dist/es/chunk/s7HLrANj.mjs +0 -215
  133. package/dist/es/chunk/vPhxogl3.mjs +0 -19
  134. package/dist/es/components/icon/icon2.mjs +0 -27
@@ -1,2179 +0,0 @@
1
- import { ref, watch, inject, computed, getCurrentInstance, toRaw, defineComponent, withDirectives, createElementBlock, openBlock, withModifiers, normalizeClass, renderSlot, createElementVNode, toDisplayString, vShow, unref, toRefs, reactive, onBeforeUnmount, nextTick, normalizeStyle, createCommentVNode, onMounted, useSlots, watchEffect, provide, isVNode, shallowRef, resolveComponent, resolveDirective, mergeProps, toHandlerKey, createVNode, withCtx, createBlock, Fragment, renderList, createTextVNode, vModelText, resolveDynamicComponent } from 'vue';
2
- import { u as useTooltipContentProps, E as Ee, a as ElTooltip } from './CoGexPPD.mjs';
3
- import { s as scrollbarEmits, E as ElScrollbar } from './CjLR27-a.mjs';
4
- import { t as tagProps, E as ElTag } from './Dmi-1GRO.mjs';
5
- import { E as ElIcon } from './D0QTifnI.mjs';
6
- import { i as isEqual } from './B71xEPfK.mjs';
7
- import { g as get, u as useLocale } from './CEl4MyfJ.mjs';
8
- import { b as buildProps, t as throwError, j as isObject, u as useNamespace, a as debugWarn, c as isArray, f as isFunction, g as isPlainObject, i as isString, d as definePropType } from './Gk1J52Yw.mjs';
9
- import { c as castArray } from './CKOcwq5V.mjs';
10
- import { _ as _export_sfc, w as withInstall, a as withNoopInstall } from './V6KjsUQN.mjs';
11
- import { u as useId } from './nxVM7re4.mjs';
12
- import { useResizeObserver, isIOS, isClient, useDebounceFn, useMutationObserver } from '@vueuse/core';
13
- import { s as scrollIntoView } from './CccIsEqA.mjs';
14
- import { u as useFormItem, b as useFormItemInputId, a as useFormDisabled, c as useFormSize } from './CBMjhoFP.mjs';
15
- import { a as useEmptyValues, u as useEmptyValuesProps } from './COs9dJZa.mjs';
16
- import { a as useComposition, u as useFocusController } from './CVqW0jzp.mjs';
17
- import { V as ValidateComponentsMap, i as iconPropType } from '../components/icon/icon2.mjs';
18
- import { a as isEmpty, c as isUndefined, b as isNumber, i as isNil } from './Bc6yUGLs.mjs';
19
- import { g as getEventCode, E as EVENT_CODE } from './BTpNRPQW.mjs';
20
- import { U as UPDATE_MODEL_EVENT, C as CHANGE_EVENT } from './Ct6q2FXg.mjs';
21
- import { b as baseIteratee } from './D1QnA2iT.mjs';
22
- import { c as clamp } from './BDcsaNYa.mjs';
23
- import { ArrowDown, CircleClose } from '@element-plus/icons-vue';
24
- import { u as useSizeProp } from './vPhxogl3.mjs';
25
- import { u as useAriaProps } from './BunQI8Jb.mjs';
26
- import { C as ClickOutside } from './eEsLFV3s.mjs';
27
- import { f as flattedChildren } from './DRwwUUhy.mjs';
28
-
29
- /**
30
- * The base implementation of `_.findIndex` and `_.findLastIndex` without
31
- * support for iteratee shorthands.
32
- *
33
- * @private
34
- * @param {Array} array The array to inspect.
35
- * @param {Function} predicate The function invoked per iteration.
36
- * @param {number} fromIndex The index to search from.
37
- * @param {boolean} [fromRight] Specify iterating from right to left.
38
- * @returns {number} Returns the index of the matched value, else `-1`.
39
- */
40
- function baseFindIndex(array, predicate, fromIndex, fromRight) {
41
- array.length;
42
- var index = fromIndex + (1 );
43
-
44
- while ((index-- )) {
45
- if (predicate(array[index], index, array)) {
46
- return index;
47
- }
48
- }
49
- return -1;
50
- }
51
-
52
- /**
53
- * This method is like `_.findIndex` except that it iterates over elements
54
- * of `collection` from right to left.
55
- *
56
- * @static
57
- * @memberOf _
58
- * @since 2.0.0
59
- * @category Array
60
- * @param {Array} array The array to inspect.
61
- * @param {Function} [predicate=_.identity] The function invoked per iteration.
62
- * @param {number} [fromIndex=array.length-1] The index to search from.
63
- * @returns {number} Returns the index of the found element, else `-1`.
64
- * @example
65
- *
66
- * var users = [
67
- * { 'user': 'barney', 'active': true },
68
- * { 'user': 'fred', 'active': false },
69
- * { 'user': 'pebbles', 'active': false }
70
- * ];
71
- *
72
- * _.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
73
- * // => 2
74
- *
75
- * // The `_.matches` iteratee shorthand.
76
- * _.findLastIndex(users, { 'user': 'barney', 'active': true });
77
- * // => 0
78
- *
79
- * // The `_.matchesProperty` iteratee shorthand.
80
- * _.findLastIndex(users, ['active', false]);
81
- * // => 2
82
- *
83
- * // The `_.property` iteratee shorthand.
84
- * _.findLastIndex(users, 'active');
85
- * // => 0
86
- */
87
- function findLastIndex(array, predicate, fromIndex) {
88
- var length = array == null ? 0 : array.length;
89
- if (!length) {
90
- return -1;
91
- }
92
- var index = length - 1;
93
- return baseFindIndex(array, baseIteratee(predicate), index);
94
- }
95
-
96
- const defaultProps = {
97
- label: "label",
98
- value: "value",
99
- disabled: "disabled",
100
- options: "options"
101
- };
102
- function useProps(props) {
103
- const aliasProps = ref({ ...defaultProps, ...props.props });
104
- let cache = { ...props.props };
105
- watch(
106
- () => props.props,
107
- (val) => {
108
- if (!isEqual(val, cache)) {
109
- aliasProps.value = { ...defaultProps, ...val };
110
- cache = { ...val };
111
- }
112
- },
113
- { deep: true }
114
- );
115
- const getLabel = (option) => get(option, aliasProps.value.label);
116
- const getValue = (option) => get(option, aliasProps.value.value);
117
- const getDisabled = (option) => get(option, aliasProps.value.disabled);
118
- const getOptions = (option) => get(option, aliasProps.value.options);
119
- return {
120
- aliasProps,
121
- getLabel,
122
- getValue,
123
- getDisabled,
124
- getOptions
125
- };
126
- }
127
-
128
- const selectGroupKey = Symbol("ElSelectGroup");
129
- const selectKey = Symbol("ElSelect");
130
-
131
- const COMPONENT_NAME$1 = "ElOption";
132
- const optionProps = buildProps({
133
- value: {
134
- type: [String, Number, Boolean, Object],
135
- required: true
136
- },
137
- label: {
138
- type: [String, Number]
139
- },
140
- created: Boolean,
141
- disabled: Boolean
142
- });
143
-
144
- const escapeStringRegexp = (string = "") => string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
145
-
146
- function useOption(props, states) {
147
- const select = inject(selectKey);
148
- if (!select) {
149
- throwError(COMPONENT_NAME$1, "usage: <el-select><el-option /></el-select/>");
150
- }
151
- const selectGroup = inject(selectGroupKey, { disabled: false });
152
- const itemSelected = computed(() => {
153
- return contains(castArray(select.props.modelValue), props.value);
154
- });
155
- const limitReached = computed(() => {
156
- var _a;
157
- if (select.props.multiple) {
158
- const modelValue = castArray((_a = select.props.modelValue) != null ? _a : []);
159
- return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
160
- } else {
161
- return false;
162
- }
163
- });
164
- const currentLabel = computed(() => {
165
- var _a;
166
- return (_a = props.label) != null ? _a : isObject(props.value) ? "" : props.value;
167
- });
168
- const currentValue = computed(() => {
169
- return props.value || props.label || "";
170
- });
171
- const isDisabled = computed(() => {
172
- return props.disabled || states.groupDisabled || limitReached.value;
173
- });
174
- const instance = getCurrentInstance();
175
- const contains = (arr = [], target) => {
176
- if (!isObject(props.value)) {
177
- return arr && arr.includes(target);
178
- } else {
179
- const valueKey = select.props.valueKey;
180
- return arr && arr.some((item) => {
181
- return toRaw(get(item, valueKey)) === get(target, valueKey);
182
- });
183
- }
184
- };
185
- const hoverItem = () => {
186
- if (!isDisabled.value) {
187
- select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
188
- }
189
- };
190
- const updateOption = (query) => {
191
- const regexp = new RegExp(escapeStringRegexp(query), "i");
192
- states.visible = regexp.test(String(currentLabel.value)) || props.created;
193
- };
194
- watch(
195
- () => currentLabel.value,
196
- () => {
197
- if (!props.created && !select.props.remote)
198
- select.setSelected();
199
- }
200
- );
201
- watch(
202
- () => props.value,
203
- (val, oldVal) => {
204
- const { remote, valueKey } = select.props;
205
- const shouldUpdate = remote ? val !== oldVal : !isEqual(val, oldVal);
206
- if (shouldUpdate) {
207
- select.onOptionDestroy(oldVal, instance.proxy);
208
- select.onOptionCreate(instance.proxy);
209
- }
210
- if (!props.created && !remote) {
211
- if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
212
- return;
213
- }
214
- select.setSelected();
215
- }
216
- }
217
- );
218
- watch(
219
- () => selectGroup.disabled,
220
- () => {
221
- states.groupDisabled = selectGroup.disabled;
222
- },
223
- { immediate: true }
224
- );
225
- return {
226
- select,
227
- currentLabel,
228
- currentValue,
229
- itemSelected,
230
- isDisabled,
231
- hoverItem,
232
- updateOption
233
- };
234
- }
235
-
236
- const _sfc_main$3 = defineComponent({
237
- name: COMPONENT_NAME$1,
238
- componentName: COMPONENT_NAME$1,
239
- props: optionProps,
240
- setup(props) {
241
- const ns = useNamespace("select");
242
- const id = useId();
243
- const containerKls = computed(() => [
244
- ns.be("dropdown", "item"),
245
- ns.is("disabled", unref(isDisabled)),
246
- ns.is("selected", unref(itemSelected)),
247
- ns.is("hovering", unref(hover))
248
- ]);
249
- const states = reactive({
250
- index: -1,
251
- groupDisabled: false,
252
- visible: true,
253
- hover: false
254
- });
255
- const {
256
- currentLabel,
257
- itemSelected,
258
- isDisabled,
259
- select,
260
- hoverItem,
261
- updateOption
262
- } = useOption(props, states);
263
- const { visible, hover } = toRefs(states);
264
- const vm = getCurrentInstance().proxy;
265
- select.onOptionCreate(vm);
266
- onBeforeUnmount(() => {
267
- const key = vm.value;
268
- nextTick(() => {
269
- const { selected: selectedOptions } = select.states;
270
- const doesSelected = selectedOptions.some((item) => {
271
- return item.value === vm.value;
272
- });
273
- if (select.states.cachedOptions.get(key) === vm && !doesSelected) {
274
- select.states.cachedOptions.delete(key);
275
- }
276
- });
277
- select.onOptionDestroy(key, vm);
278
- });
279
- function selectOptionClick() {
280
- if (!isDisabled.value) {
281
- select.handleOptionSelect(vm);
282
- }
283
- }
284
- return {
285
- ns,
286
- id,
287
- containerKls,
288
- currentLabel,
289
- itemSelected,
290
- isDisabled,
291
- select,
292
- visible,
293
- hover,
294
- states,
295
- hoverItem,
296
- updateOption,
297
- selectOptionClick
298
- };
299
- }
300
- });
301
- const _hoisted_1$1 = ["id", "aria-disabled", "aria-selected"];
302
- function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
303
- return withDirectives((openBlock(), createElementBlock("li", {
304
- id: _ctx.id,
305
- class: normalizeClass(_ctx.containerKls),
306
- role: "option",
307
- "aria-disabled": _ctx.isDisabled || void 0,
308
- "aria-selected": _ctx.itemSelected,
309
- onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.hoverItem && _ctx.hoverItem(...args)),
310
- onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.selectOptionClick && _ctx.selectOptionClick(...args), ["stop"]))
311
- }, [
312
- renderSlot(_ctx.$slots, "default", {}, () => [
313
- createElementVNode(
314
- "span",
315
- null,
316
- toDisplayString(_ctx.currentLabel),
317
- 1
318
- )
319
- ])
320
- ], 42, _hoisted_1$1)), [
321
- [vShow, _ctx.visible]
322
- ]);
323
- }
324
- var Option = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/option.vue"]]);
325
-
326
- const MINIMUM_INPUT_WIDTH = 11;
327
- const BORDER_HORIZONTAL_WIDTH = 2;
328
-
329
- const _sfc_main$2 = defineComponent({
330
- name: "ElSelectDropdown",
331
- componentName: "ElSelectDropdown",
332
- setup() {
333
- const select = inject(selectKey);
334
- const ns = useNamespace("select");
335
- const popperClass = computed(() => select.props.popperClass);
336
- const isMultiple = computed(() => select.props.multiple);
337
- const isFitInputWidth = computed(() => select.props.fitInputWidth);
338
- const minWidth = ref("");
339
- function updateMinWidth() {
340
- var _a;
341
- const offsetWidth = (_a = select.selectRef) == null ? void 0 : _a.offsetWidth;
342
- if (offsetWidth) {
343
- minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`;
344
- } else {
345
- minWidth.value = "";
346
- }
347
- }
348
- onMounted(() => {
349
- updateMinWidth();
350
- useResizeObserver(select.selectRef, updateMinWidth);
351
- });
352
- return {
353
- ns,
354
- minWidth,
355
- popperClass,
356
- isMultiple,
357
- isFitInputWidth
358
- };
359
- }
360
- });
361
- function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
362
- return openBlock(), createElementBlock(
363
- "div",
364
- {
365
- class: normalizeClass([_ctx.ns.b("dropdown"), _ctx.ns.is("multiple", _ctx.isMultiple), _ctx.popperClass]),
366
- style: normalizeStyle({ [_ctx.isFitInputWidth ? "width" : "minWidth"]: _ctx.minWidth })
367
- },
368
- [
369
- _ctx.$slots.header ? (openBlock(), createElementBlock(
370
- "div",
371
- {
372
- key: 0,
373
- class: normalizeClass(_ctx.ns.be("dropdown", "header"))
374
- },
375
- [
376
- renderSlot(_ctx.$slots, "header")
377
- ],
378
- 2
379
- )) : createCommentVNode("v-if", true),
380
- renderSlot(_ctx.$slots, "default"),
381
- _ctx.$slots.footer ? (openBlock(), createElementBlock(
382
- "div",
383
- {
384
- key: 1,
385
- class: normalizeClass(_ctx.ns.be("dropdown", "footer"))
386
- },
387
- [
388
- renderSlot(_ctx.$slots, "footer")
389
- ],
390
- 2
391
- )) : createCommentVNode("v-if", true)
392
- ],
393
- 6
394
- );
395
- }
396
- var ElSelectMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/select-dropdown.vue"]]);
397
-
398
- const useSelect = (props, emit) => {
399
- const { t } = useLocale();
400
- const slots = useSlots();
401
- const contentId = useId();
402
- const nsSelect = useNamespace("select");
403
- const nsInput = useNamespace("input");
404
- const states = reactive({
405
- inputValue: "",
406
- options: /* @__PURE__ */ new Map(),
407
- cachedOptions: /* @__PURE__ */ new Map(),
408
- optionValues: [],
409
- selected: [],
410
- selectionWidth: 0,
411
- collapseItemWidth: 0,
412
- selectedLabel: "",
413
- hoveringIndex: -1,
414
- previousQuery: null,
415
- inputHovering: false,
416
- menuVisibleOnFocus: false,
417
- isBeforeHide: false
418
- });
419
- const selectRef = ref();
420
- const selectionRef = ref();
421
- const tooltipRef = ref();
422
- const tagTooltipRef = ref();
423
- const inputRef = ref();
424
- const prefixRef = ref();
425
- const suffixRef = ref();
426
- const menuRef = ref();
427
- const tagMenuRef = ref();
428
- const collapseItemRef = ref();
429
- const scrollbarRef = ref();
430
- const expanded = ref(false);
431
- const hoverOption = ref();
432
- const debouncing = ref(false);
433
- const { form, formItem } = useFormItem();
434
- const { inputId } = useFormItemInputId(props, {
435
- formItemContext: formItem
436
- });
437
- const { valueOnClear, isEmptyValue } = useEmptyValues(props);
438
- const {
439
- isComposing,
440
- handleCompositionStart,
441
- handleCompositionUpdate,
442
- handleCompositionEnd
443
- } = useComposition({
444
- afterComposition: (e) => onInput(e)
445
- });
446
- const selectDisabled = useFormDisabled();
447
- const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
448
- disabled: selectDisabled,
449
- afterFocus() {
450
- if (props.automaticDropdown && !expanded.value) {
451
- expanded.value = true;
452
- states.menuVisibleOnFocus = true;
453
- }
454
- },
455
- beforeBlur(event) {
456
- var _a, _b;
457
- return ((_a = tooltipRef.value) == null ? void 0 : _a.isFocusInsideContent(event)) || ((_b = tagTooltipRef.value) == null ? void 0 : _b.isFocusInsideContent(event));
458
- },
459
- afterBlur() {
460
- var _a;
461
- expanded.value = false;
462
- states.menuVisibleOnFocus = false;
463
- if (props.validateEvent) {
464
- (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn(err));
465
- }
466
- }
467
- });
468
- const hasModelValue = computed(() => {
469
- return isArray(props.modelValue) ? props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
470
- });
471
- const needStatusIcon = computed(() => {
472
- var _a;
473
- return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
474
- });
475
- const showClearBtn = computed(() => {
476
- return props.clearable && !selectDisabled.value && hasModelValue.value && (isFocused.value || states.inputHovering);
477
- });
478
- const iconComponent = computed(
479
- () => props.remote && props.filterable && !props.remoteShowSuffix ? "" : props.suffixIcon
480
- );
481
- const iconReverse = computed(
482
- () => nsSelect.is("reverse", !!(iconComponent.value && expanded.value))
483
- );
484
- const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
485
- const validateIcon = computed(
486
- () => validateState.value && ValidateComponentsMap[validateState.value]
487
- );
488
- const debounce = computed(() => props.remote ? props.debounce : 0);
489
- const isRemoteSearchEmpty = computed(
490
- () => props.remote && !states.inputValue && states.options.size === 0
491
- );
492
- const emptyText = computed(() => {
493
- if (props.loading) {
494
- return props.loadingText || t("el.select.loading");
495
- } else {
496
- if (props.filterable && states.inputValue && states.options.size > 0 && filteredOptionsCount.value === 0) {
497
- return props.noMatchText || t("el.select.noMatch");
498
- }
499
- if (states.options.size === 0) {
500
- return props.noDataText || t("el.select.noData");
501
- }
502
- }
503
- return null;
504
- });
505
- const filteredOptionsCount = computed(
506
- () => optionsArray.value.filter((option) => option.visible).length
507
- );
508
- const optionsArray = computed(() => {
509
- const list = Array.from(states.options.values());
510
- const newList = [];
511
- states.optionValues.forEach((item) => {
512
- const index = list.findIndex((i) => i.value === item);
513
- if (index > -1) {
514
- newList.push(list[index]);
515
- }
516
- });
517
- return newList.length >= list.length ? newList : list;
518
- });
519
- const cachedOptionsArray = computed(
520
- () => Array.from(states.cachedOptions.values())
521
- );
522
- const showNewOption = computed(() => {
523
- const hasExistingOption = optionsArray.value.filter((option) => {
524
- return !option.created;
525
- }).some((option) => {
526
- return option.currentLabel === states.inputValue;
527
- });
528
- return props.filterable && props.allowCreate && states.inputValue !== "" && !hasExistingOption;
529
- });
530
- const updateOptions = () => {
531
- if (props.filterable && isFunction(props.filterMethod))
532
- return;
533
- if (props.filterable && props.remote && isFunction(props.remoteMethod))
534
- return;
535
- optionsArray.value.forEach((option) => {
536
- var _a;
537
- (_a = option.updateOption) == null ? void 0 : _a.call(option, states.inputValue);
538
- });
539
- };
540
- const selectSize = useFormSize();
541
- const collapseTagSize = computed(
542
- () => ["small"].includes(selectSize.value) ? "small" : "default"
543
- );
544
- const dropdownMenuVisible = computed({
545
- get() {
546
- return expanded.value && (props.loading || !isRemoteSearchEmpty.value || props.remote && !!slots.empty) && (!debouncing.value || !isEmpty(states.previousQuery));
547
- },
548
- set(val) {
549
- expanded.value = val;
550
- }
551
- });
552
- const shouldShowPlaceholder = computed(() => {
553
- if (props.multiple && !isUndefined(props.modelValue)) {
554
- return castArray(props.modelValue).length === 0 && !states.inputValue;
555
- }
556
- const value = isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
557
- return props.filterable || isUndefined(value) ? !states.inputValue : true;
558
- });
559
- const currentPlaceholder = computed(() => {
560
- var _a;
561
- const _placeholder = (_a = props.placeholder) != null ? _a : t("el.select.placeholder");
562
- return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
563
- });
564
- const mouseEnterEventName = computed(() => isIOS ? null : "mouseenter");
565
- watch(
566
- () => props.modelValue,
567
- (val, oldVal) => {
568
- if (props.multiple) {
569
- if (props.filterable && !props.reserveKeyword) {
570
- states.inputValue = "";
571
- handleQueryChange("");
572
- }
573
- }
574
- setSelected();
575
- if (!isEqual(val, oldVal) && props.validateEvent) {
576
- formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
577
- }
578
- },
579
- {
580
- flush: "post",
581
- deep: true
582
- }
583
- );
584
- watch(
585
- () => expanded.value,
586
- (val) => {
587
- if (val) {
588
- handleQueryChange(states.inputValue);
589
- } else {
590
- states.inputValue = "";
591
- states.previousQuery = null;
592
- states.isBeforeHide = true;
593
- }
594
- }
595
- );
596
- watch(
597
- () => states.options.entries(),
598
- () => {
599
- if (!isClient)
600
- return;
601
- setSelected();
602
- if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
603
- checkDefaultFirstOption();
604
- }
605
- },
606
- {
607
- flush: "post"
608
- }
609
- );
610
- watch([() => states.hoveringIndex, optionsArray], ([val]) => {
611
- if (isNumber(val) && val > -1) {
612
- hoverOption.value = optionsArray.value[val] || {};
613
- } else {
614
- hoverOption.value = {};
615
- }
616
- optionsArray.value.forEach((option) => {
617
- option.hover = hoverOption.value === option;
618
- });
619
- });
620
- watchEffect(() => {
621
- if (states.isBeforeHide)
622
- return;
623
- updateOptions();
624
- });
625
- const handleQueryChange = (val) => {
626
- if (states.previousQuery === val || isComposing.value) {
627
- return;
628
- }
629
- states.previousQuery = val;
630
- if (props.filterable && isFunction(props.filterMethod)) {
631
- props.filterMethod(val);
632
- } else if (props.filterable && props.remote && isFunction(props.remoteMethod)) {
633
- props.remoteMethod(val);
634
- }
635
- if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptionsCount.value) {
636
- nextTick(checkDefaultFirstOption);
637
- } else {
638
- nextTick(updateHoveringIndex);
639
- }
640
- };
641
- const checkDefaultFirstOption = () => {
642
- const optionsInDropdown = optionsArray.value.filter(
643
- (n) => n.visible && !n.disabled && !n.states.groupDisabled
644
- );
645
- const userCreatedOption = optionsInDropdown.find((n) => n.created);
646
- const firstOriginOption = optionsInDropdown[0];
647
- const valueList = optionsArray.value.map((item) => item.value);
648
- states.hoveringIndex = getValueIndex(
649
- valueList,
650
- userCreatedOption || firstOriginOption
651
- );
652
- };
653
- const setSelected = () => {
654
- if (!props.multiple) {
655
- const value = isArray(props.modelValue) ? props.modelValue[0] : props.modelValue;
656
- const option = getOption(value);
657
- states.selectedLabel = option.currentLabel;
658
- states.selected = [option];
659
- return;
660
- } else {
661
- states.selectedLabel = "";
662
- }
663
- const result = [];
664
- if (!isUndefined(props.modelValue)) {
665
- castArray(props.modelValue).forEach((value) => {
666
- result.push(getOption(value));
667
- });
668
- }
669
- states.selected = result;
670
- };
671
- const getOption = (value) => {
672
- let option;
673
- const isObjectValue = isPlainObject(value);
674
- for (let i = states.cachedOptions.size - 1; i >= 0; i--) {
675
- const cachedOption = cachedOptionsArray.value[i];
676
- const isEqualValue = isObjectValue ? get(cachedOption.value, props.valueKey) === get(value, props.valueKey) : cachedOption.value === value;
677
- if (isEqualValue) {
678
- option = {
679
- index: optionsArray.value.filter((opt) => !opt.created).indexOf(cachedOption),
680
- value,
681
- currentLabel: cachedOption.currentLabel,
682
- get isDisabled() {
683
- return cachedOption.isDisabled;
684
- }
685
- };
686
- break;
687
- }
688
- }
689
- if (option)
690
- return option;
691
- const label = isObjectValue ? value.label : value != null ? value : "";
692
- const newOption = {
693
- index: -1,
694
- value,
695
- currentLabel: label
696
- };
697
- return newOption;
698
- };
699
- const updateHoveringIndex = () => {
700
- const length = states.selected.length;
701
- if (length > 0) {
702
- const lastOption = states.selected[length - 1];
703
- states.hoveringIndex = optionsArray.value.findIndex(
704
- (item) => getValueKey(lastOption) === getValueKey(item)
705
- );
706
- } else {
707
- states.hoveringIndex = -1;
708
- }
709
- };
710
- const resetSelectionWidth = () => {
711
- states.selectionWidth = Number.parseFloat(
712
- window.getComputedStyle(selectionRef.value).width
713
- );
714
- };
715
- const resetCollapseItemWidth = () => {
716
- states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
717
- };
718
- const updateTooltip = () => {
719
- var _a, _b;
720
- (_b = (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
721
- };
722
- const updateTagTooltip = () => {
723
- var _a, _b;
724
- (_b = (_a = tagTooltipRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
725
- };
726
- const onInputChange = () => {
727
- if (states.inputValue.length > 0 && !expanded.value) {
728
- expanded.value = true;
729
- }
730
- handleQueryChange(states.inputValue);
731
- };
732
- const onInput = (event) => {
733
- states.inputValue = event.target.value;
734
- if (props.remote) {
735
- debouncing.value = true;
736
- debouncedOnInputChange();
737
- } else {
738
- return onInputChange();
739
- }
740
- };
741
- const debouncedOnInputChange = useDebounceFn(() => {
742
- onInputChange();
743
- debouncing.value = false;
744
- }, debounce);
745
- const emitChange = (val) => {
746
- if (!isEqual(props.modelValue, val)) {
747
- emit(CHANGE_EVENT, val);
748
- }
749
- };
750
- const getLastNotDisabledIndex = (value) => findLastIndex(value, (it) => {
751
- const option = states.cachedOptions.get(it);
752
- return !(option == null ? void 0 : option.disabled) && !(option == null ? void 0 : option.states.groupDisabled);
753
- });
754
- const deletePrevTag = (e) => {
755
- const code = getEventCode(e);
756
- if (!props.multiple)
757
- return;
758
- if (code === EVENT_CODE.delete)
759
- return;
760
- if (e.target.value.length <= 0) {
761
- const value = castArray(props.modelValue).slice();
762
- const lastNotDisabledIndex = getLastNotDisabledIndex(value);
763
- if (lastNotDisabledIndex < 0)
764
- return;
765
- const removeTagValue = value[lastNotDisabledIndex];
766
- value.splice(lastNotDisabledIndex, 1);
767
- emit(UPDATE_MODEL_EVENT, value);
768
- emitChange(value);
769
- emit("remove-tag", removeTagValue);
770
- }
771
- };
772
- const deleteTag = (event, tag) => {
773
- const index = states.selected.indexOf(tag);
774
- if (index > -1 && !selectDisabled.value) {
775
- const value = castArray(props.modelValue).slice();
776
- value.splice(index, 1);
777
- emit(UPDATE_MODEL_EVENT, value);
778
- emitChange(value);
779
- emit("remove-tag", tag.value);
780
- }
781
- event.stopPropagation();
782
- focus();
783
- };
784
- const deleteSelected = (event) => {
785
- event.stopPropagation();
786
- const value = props.multiple ? [] : valueOnClear.value;
787
- if (props.multiple) {
788
- for (const item of states.selected) {
789
- if (item.isDisabled)
790
- value.push(item.value);
791
- }
792
- }
793
- emit(UPDATE_MODEL_EVENT, value);
794
- emitChange(value);
795
- states.hoveringIndex = -1;
796
- expanded.value = false;
797
- emit("clear");
798
- focus();
799
- };
800
- const handleOptionSelect = (option) => {
801
- var _a;
802
- if (props.multiple) {
803
- const value = castArray((_a = props.modelValue) != null ? _a : []).slice();
804
- const optionIndex = getValueIndex(value, option);
805
- if (optionIndex > -1) {
806
- value.splice(optionIndex, 1);
807
- } else if (props.multipleLimit <= 0 || value.length < props.multipleLimit) {
808
- value.push(option.value);
809
- }
810
- emit(UPDATE_MODEL_EVENT, value);
811
- emitChange(value);
812
- if (option.created) {
813
- handleQueryChange("");
814
- }
815
- if (props.filterable && !props.reserveKeyword) {
816
- states.inputValue = "";
817
- }
818
- } else {
819
- !isEqual(props.modelValue, option.value) && emit(UPDATE_MODEL_EVENT, option.value);
820
- emitChange(option.value);
821
- expanded.value = false;
822
- }
823
- focus();
824
- if (expanded.value)
825
- return;
826
- nextTick(() => {
827
- scrollToOption(option);
828
- });
829
- };
830
- const getValueIndex = (arr, option) => {
831
- if (isUndefined(option))
832
- return -1;
833
- if (!isObject(option.value))
834
- return arr.indexOf(option.value);
835
- return arr.findIndex((item) => {
836
- return isEqual(get(item, props.valueKey), getValueKey(option));
837
- });
838
- };
839
- const scrollToOption = (option) => {
840
- var _a, _b, _c, _d, _e;
841
- const targetOption = isArray(option) ? option[option.length - 1] : option;
842
- let target = null;
843
- if (!isNil(targetOption == null ? void 0 : targetOption.value)) {
844
- const options = optionsArray.value.filter(
845
- (item) => item.value === targetOption.value
846
- );
847
- if (options.length > 0) {
848
- target = options[0].$el;
849
- }
850
- }
851
- if (tooltipRef.value && target) {
852
- const menu = (_d = (_c = (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef) == null ? void 0 : _c.querySelector) == null ? void 0 : _d.call(
853
- _c,
854
- `.${nsSelect.be("dropdown", "wrap")}`
855
- );
856
- if (menu) {
857
- scrollIntoView(menu, target);
858
- }
859
- }
860
- (_e = scrollbarRef.value) == null ? void 0 : _e.handleScroll();
861
- };
862
- const onOptionCreate = (vm) => {
863
- states.options.set(vm.value, vm);
864
- states.cachedOptions.set(vm.value, vm);
865
- };
866
- const onOptionDestroy = (key, vm) => {
867
- if (states.options.get(key) === vm) {
868
- states.options.delete(key);
869
- }
870
- };
871
- const popperRef = computed(() => {
872
- var _a, _b;
873
- return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
874
- });
875
- const handleMenuEnter = () => {
876
- states.isBeforeHide = false;
877
- nextTick(() => {
878
- var _a;
879
- (_a = scrollbarRef.value) == null ? void 0 : _a.update();
880
- scrollToOption(states.selected);
881
- });
882
- };
883
- const focus = () => {
884
- var _a;
885
- (_a = inputRef.value) == null ? void 0 : _a.focus();
886
- };
887
- const blur = () => {
888
- var _a;
889
- if (expanded.value) {
890
- expanded.value = false;
891
- nextTick(() => {
892
- var _a2;
893
- return (_a2 = inputRef.value) == null ? void 0 : _a2.blur();
894
- });
895
- return;
896
- }
897
- (_a = inputRef.value) == null ? void 0 : _a.blur();
898
- };
899
- const handleClearClick = (event) => {
900
- deleteSelected(event);
901
- };
902
- const handleClickOutside = (event) => {
903
- expanded.value = false;
904
- if (isFocused.value) {
905
- const _event = new FocusEvent("blur", event);
906
- nextTick(() => handleBlur(_event));
907
- }
908
- };
909
- const handleEsc = () => {
910
- if (states.inputValue.length > 0) {
911
- states.inputValue = "";
912
- } else {
913
- expanded.value = false;
914
- }
915
- };
916
- const toggleMenu = (event) => {
917
- var _a;
918
- if (selectDisabled.value || props.filterable && expanded.value && event && !((_a = suffixRef.value) == null ? void 0 : _a.contains(event.target)))
919
- return;
920
- if (isIOS)
921
- states.inputHovering = true;
922
- if (states.menuVisibleOnFocus) {
923
- states.menuVisibleOnFocus = false;
924
- } else {
925
- expanded.value = !expanded.value;
926
- }
927
- };
928
- const selectOption = () => {
929
- if (!expanded.value) {
930
- toggleMenu();
931
- } else {
932
- const option = optionsArray.value[states.hoveringIndex];
933
- if (option && !option.isDisabled) {
934
- handleOptionSelect(option);
935
- }
936
- }
937
- };
938
- const getValueKey = (item) => {
939
- return isObject(item.value) ? get(item.value, props.valueKey) : item.value;
940
- };
941
- const optionsAllDisabled = computed(
942
- () => optionsArray.value.filter((option) => option.visible).every((option) => option.isDisabled)
943
- );
944
- const showTagList = computed(() => {
945
- if (!props.multiple) {
946
- return [];
947
- }
948
- return props.collapseTags ? states.selected.slice(0, props.maxCollapseTags) : states.selected;
949
- });
950
- const collapseTagList = computed(() => {
951
- if (!props.multiple) {
952
- return [];
953
- }
954
- return props.collapseTags ? states.selected.slice(props.maxCollapseTags) : [];
955
- });
956
- const navigateOptions = (direction) => {
957
- if (!expanded.value) {
958
- expanded.value = true;
959
- return;
960
- }
961
- if (states.options.size === 0 || filteredOptionsCount.value === 0 || isComposing.value)
962
- return;
963
- if (!optionsAllDisabled.value) {
964
- if (direction === "next") {
965
- states.hoveringIndex++;
966
- if (states.hoveringIndex === states.options.size) {
967
- states.hoveringIndex = 0;
968
- }
969
- } else if (direction === "prev") {
970
- states.hoveringIndex--;
971
- if (states.hoveringIndex < 0) {
972
- states.hoveringIndex = states.options.size - 1;
973
- }
974
- }
975
- const option = optionsArray.value[states.hoveringIndex];
976
- if (option.isDisabled || !option.visible) {
977
- navigateOptions(direction);
978
- }
979
- nextTick(() => scrollToOption(hoverOption.value));
980
- }
981
- };
982
- const findFocusableIndex = (arr, start, step, len) => {
983
- for (let i = start; i >= 0 && i < len; i += step) {
984
- const obj = arr[i];
985
- if (!(obj == null ? void 0 : obj.isDisabled) && (obj == null ? void 0 : obj.visible)) {
986
- return i;
987
- }
988
- }
989
- return null;
990
- };
991
- const focusOption = (targetIndex, mode) => {
992
- var _a;
993
- const len = states.options.size;
994
- if (len === 0)
995
- return;
996
- const start = clamp(targetIndex, 0, len - 1);
997
- const options = optionsArray.value;
998
- const direction = mode === "up" ? -1 : 1;
999
- const newIndex = (_a = findFocusableIndex(options, start, direction, len)) != null ? _a : findFocusableIndex(options, start - direction, -direction, len);
1000
- if (newIndex != null) {
1001
- states.hoveringIndex = newIndex;
1002
- nextTick(() => scrollToOption(hoverOption.value));
1003
- }
1004
- };
1005
- const handleKeydown = (e) => {
1006
- const code = getEventCode(e);
1007
- let isPreventDefault = true;
1008
- switch (code) {
1009
- case EVENT_CODE.up:
1010
- navigateOptions("prev");
1011
- break;
1012
- case EVENT_CODE.down:
1013
- navigateOptions("next");
1014
- break;
1015
- case EVENT_CODE.enter:
1016
- case EVENT_CODE.numpadEnter:
1017
- if (!isComposing.value) {
1018
- selectOption();
1019
- }
1020
- break;
1021
- case EVENT_CODE.esc:
1022
- handleEsc();
1023
- break;
1024
- case EVENT_CODE.backspace:
1025
- isPreventDefault = false;
1026
- deletePrevTag(e);
1027
- return;
1028
- case EVENT_CODE.home:
1029
- if (!expanded.value)
1030
- return;
1031
- focusOption(0, "down");
1032
- break;
1033
- case EVENT_CODE.end:
1034
- if (!expanded.value)
1035
- return;
1036
- focusOption(states.options.size - 1, "up");
1037
- break;
1038
- case EVENT_CODE.pageUp:
1039
- if (!expanded.value)
1040
- return;
1041
- focusOption(states.hoveringIndex - 10, "up");
1042
- break;
1043
- case EVENT_CODE.pageDown:
1044
- if (!expanded.value)
1045
- return;
1046
- focusOption(states.hoveringIndex + 10, "down");
1047
- break;
1048
- default:
1049
- isPreventDefault = false;
1050
- break;
1051
- }
1052
- if (isPreventDefault) {
1053
- e.preventDefault();
1054
- e.stopPropagation();
1055
- }
1056
- };
1057
- const getGapWidth = () => {
1058
- if (!selectionRef.value)
1059
- return 0;
1060
- const style = window.getComputedStyle(selectionRef.value);
1061
- return Number.parseFloat(style.gap || "6px");
1062
- };
1063
- const tagStyle = computed(() => {
1064
- const gapWidth = getGapWidth();
1065
- const inputSlotWidth = props.filterable ? gapWidth + MINIMUM_INPUT_WIDTH : 0;
1066
- const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth - inputSlotWidth : states.selectionWidth - inputSlotWidth;
1067
- return { maxWidth: `${maxWidth}px` };
1068
- });
1069
- const collapseTagStyle = computed(() => {
1070
- return { maxWidth: `${states.selectionWidth}px` };
1071
- });
1072
- const popupScroll = (data) => {
1073
- emit("popup-scroll", data);
1074
- };
1075
- useResizeObserver(selectionRef, resetSelectionWidth);
1076
- useResizeObserver(wrapperRef, updateTooltip);
1077
- useResizeObserver(tagMenuRef, updateTagTooltip);
1078
- useResizeObserver(collapseItemRef, resetCollapseItemWidth);
1079
- let stop;
1080
- watch(
1081
- () => dropdownMenuVisible.value,
1082
- (newVal) => {
1083
- if (newVal) {
1084
- stop = useResizeObserver(menuRef, updateTooltip).stop;
1085
- } else {
1086
- stop == null ? void 0 : stop();
1087
- stop = void 0;
1088
- }
1089
- emit("visible-change", newVal);
1090
- }
1091
- );
1092
- onMounted(() => {
1093
- setSelected();
1094
- });
1095
- return {
1096
- inputId,
1097
- contentId,
1098
- nsSelect,
1099
- nsInput,
1100
- states,
1101
- isFocused,
1102
- expanded,
1103
- optionsArray,
1104
- hoverOption,
1105
- selectSize,
1106
- filteredOptionsCount,
1107
- updateTooltip,
1108
- updateTagTooltip,
1109
- debouncedOnInputChange,
1110
- onInput,
1111
- deletePrevTag,
1112
- deleteTag,
1113
- deleteSelected,
1114
- handleOptionSelect,
1115
- scrollToOption,
1116
- hasModelValue,
1117
- shouldShowPlaceholder,
1118
- currentPlaceholder,
1119
- mouseEnterEventName,
1120
- needStatusIcon,
1121
- showClearBtn,
1122
- iconComponent,
1123
- iconReverse,
1124
- validateState,
1125
- validateIcon,
1126
- showNewOption,
1127
- updateOptions,
1128
- collapseTagSize,
1129
- setSelected,
1130
- selectDisabled,
1131
- emptyText,
1132
- handleCompositionStart,
1133
- handleCompositionUpdate,
1134
- handleCompositionEnd,
1135
- handleKeydown,
1136
- onOptionCreate,
1137
- onOptionDestroy,
1138
- handleMenuEnter,
1139
- focus,
1140
- blur,
1141
- handleClearClick,
1142
- handleClickOutside,
1143
- handleEsc,
1144
- toggleMenu,
1145
- selectOption,
1146
- getValueKey,
1147
- navigateOptions,
1148
- dropdownMenuVisible,
1149
- showTagList,
1150
- collapseTagList,
1151
- popupScroll,
1152
- getOption,
1153
- tagStyle,
1154
- collapseTagStyle,
1155
- popperRef,
1156
- inputRef,
1157
- tooltipRef,
1158
- tagTooltipRef,
1159
- prefixRef,
1160
- suffixRef,
1161
- selectRef,
1162
- wrapperRef,
1163
- selectionRef,
1164
- scrollbarRef,
1165
- menuRef,
1166
- tagMenuRef,
1167
- collapseItemRef
1168
- };
1169
- };
1170
-
1171
- var ElOptions = defineComponent({
1172
- name: "ElOptions",
1173
- setup(_, { slots }) {
1174
- const select = inject(selectKey);
1175
- let cachedValueList = [];
1176
- return () => {
1177
- var _a, _b;
1178
- const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
1179
- const valueList = [];
1180
- function filterOptions(children2) {
1181
- if (!isArray(children2))
1182
- return;
1183
- children2.forEach((item) => {
1184
- var _a2, _b2, _c, _d;
1185
- const name = (_a2 = (item == null ? void 0 : item.type) || {}) == null ? void 0 : _a2.name;
1186
- if (name === "ElOptionGroup") {
1187
- filterOptions(
1188
- !isString(item.children) && !isArray(item.children) && isFunction((_b2 = item.children) == null ? void 0 : _b2.default) ? (_c = item.children) == null ? void 0 : _c.default() : item.children
1189
- );
1190
- } else if (name === "ElOption") {
1191
- valueList.push((_d = item.props) == null ? void 0 : _d.value);
1192
- } else if (isArray(item.children)) {
1193
- filterOptions(item.children);
1194
- }
1195
- });
1196
- }
1197
- if (children.length) {
1198
- filterOptions((_b = children[0]) == null ? void 0 : _b.children);
1199
- }
1200
- if (!isEqual(valueList, cachedValueList)) {
1201
- cachedValueList = valueList;
1202
- if (select) {
1203
- select.states.optionValues = valueList;
1204
- }
1205
- }
1206
- return children;
1207
- };
1208
- }
1209
- });
1210
-
1211
- const selectProps = buildProps({
1212
- name: String,
1213
- id: String,
1214
- modelValue: {
1215
- type: definePropType([
1216
- Array,
1217
- String,
1218
- Number,
1219
- Boolean,
1220
- Object
1221
- ]),
1222
- default: void 0
1223
- },
1224
- autocomplete: {
1225
- type: String,
1226
- default: "off"
1227
- },
1228
- automaticDropdown: Boolean,
1229
- size: useSizeProp,
1230
- effect: {
1231
- type: definePropType(String),
1232
- default: "light"
1233
- },
1234
- disabled: {
1235
- type: Boolean,
1236
- default: void 0
1237
- },
1238
- clearable: Boolean,
1239
- filterable: Boolean,
1240
- allowCreate: Boolean,
1241
- loading: Boolean,
1242
- popperClass: {
1243
- type: String,
1244
- default: ""
1245
- },
1246
- popperStyle: {
1247
- type: definePropType([String, Object])
1248
- },
1249
- popperOptions: {
1250
- type: definePropType(Object),
1251
- default: () => ({})
1252
- },
1253
- remote: Boolean,
1254
- debounce: {
1255
- type: Number,
1256
- default: 300
1257
- },
1258
- loadingText: String,
1259
- noMatchText: String,
1260
- noDataText: String,
1261
- remoteMethod: {
1262
- type: definePropType(Function)
1263
- },
1264
- filterMethod: {
1265
- type: definePropType(Function)
1266
- },
1267
- multiple: Boolean,
1268
- multipleLimit: {
1269
- type: Number,
1270
- default: 0
1271
- },
1272
- placeholder: {
1273
- type: String
1274
- },
1275
- defaultFirstOption: Boolean,
1276
- reserveKeyword: {
1277
- type: Boolean,
1278
- default: true
1279
- },
1280
- valueKey: {
1281
- type: String,
1282
- default: "value"
1283
- },
1284
- collapseTags: Boolean,
1285
- collapseTagsTooltip: Boolean,
1286
- maxCollapseTags: {
1287
- type: Number,
1288
- default: 1
1289
- },
1290
- teleported: useTooltipContentProps.teleported,
1291
- persistent: {
1292
- type: Boolean,
1293
- default: true
1294
- },
1295
- clearIcon: {
1296
- type: iconPropType,
1297
- default: CircleClose
1298
- },
1299
- fitInputWidth: Boolean,
1300
- suffixIcon: {
1301
- type: iconPropType,
1302
- default: ArrowDown
1303
- },
1304
- tagType: { ...tagProps.type, default: "info" },
1305
- tagEffect: { ...tagProps.effect, default: "light" },
1306
- validateEvent: {
1307
- type: Boolean,
1308
- default: true
1309
- },
1310
- remoteShowSuffix: Boolean,
1311
- showArrow: {
1312
- type: Boolean,
1313
- default: true
1314
- },
1315
- offset: {
1316
- type: Number,
1317
- default: 12
1318
- },
1319
- placement: {
1320
- type: definePropType(String),
1321
- values: Ee,
1322
- default: "bottom-start"
1323
- },
1324
- fallbackPlacements: {
1325
- type: definePropType(Array),
1326
- default: ["bottom-start", "top-start", "right", "left"]
1327
- },
1328
- tabindex: {
1329
- type: [String, Number],
1330
- default: 0
1331
- },
1332
- appendTo: useTooltipContentProps.appendTo,
1333
- options: {
1334
- type: definePropType(Array)
1335
- },
1336
- props: {
1337
- type: definePropType(Object),
1338
- default: () => defaultProps
1339
- },
1340
- ...useEmptyValuesProps,
1341
- ...useAriaProps(["ariaLabel"])
1342
- });
1343
- ({
1344
- "popup-scroll": scrollbarEmits.scroll});
1345
-
1346
- const _sfc_main$1 = defineComponent({
1347
- name: "ElOptionGroup",
1348
- componentName: "ElOptionGroup",
1349
- props: {
1350
- label: String,
1351
- disabled: Boolean
1352
- },
1353
- setup(props) {
1354
- const ns = useNamespace("select");
1355
- const groupRef = ref();
1356
- const instance = getCurrentInstance();
1357
- const children = ref([]);
1358
- provide(
1359
- selectGroupKey,
1360
- reactive({
1361
- ...toRefs(props)
1362
- })
1363
- );
1364
- const visible = computed(
1365
- () => children.value.some((option) => option.visible === true)
1366
- );
1367
- const isOption = (node) => {
1368
- var _a;
1369
- return node.type.name === "ElOption" && !!((_a = node.component) == null ? void 0 : _a.proxy);
1370
- };
1371
- const flattedChildren = (node) => {
1372
- const nodes = castArray(node);
1373
- const children2 = [];
1374
- nodes.forEach((child) => {
1375
- var _a;
1376
- if (!isVNode(child))
1377
- return;
1378
- if (isOption(child)) {
1379
- children2.push(child.component.proxy);
1380
- } else if (isArray(child.children) && child.children.length) {
1381
- children2.push(...flattedChildren(child.children));
1382
- } else if ((_a = child.component) == null ? void 0 : _a.subTree) {
1383
- children2.push(...flattedChildren(child.component.subTree));
1384
- }
1385
- });
1386
- return children2;
1387
- };
1388
- const updateChildren = () => {
1389
- children.value = flattedChildren(instance.subTree);
1390
- };
1391
- onMounted(() => {
1392
- updateChildren();
1393
- });
1394
- useMutationObserver(groupRef, updateChildren, {
1395
- attributes: true,
1396
- subtree: true,
1397
- childList: true
1398
- });
1399
- return {
1400
- groupRef,
1401
- visible,
1402
- ns
1403
- };
1404
- }
1405
- });
1406
- function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
1407
- return withDirectives((openBlock(), createElementBlock(
1408
- "ul",
1409
- {
1410
- ref: "groupRef",
1411
- class: normalizeClass(_ctx.ns.be("group", "wrap"))
1412
- },
1413
- [
1414
- createElementVNode(
1415
- "li",
1416
- {
1417
- class: normalizeClass(_ctx.ns.be("group", "title"))
1418
- },
1419
- toDisplayString(_ctx.label),
1420
- 3
1421
- ),
1422
- createElementVNode("li", null, [
1423
- createElementVNode(
1424
- "ul",
1425
- {
1426
- class: normalizeClass(_ctx.ns.b("group"))
1427
- },
1428
- [
1429
- renderSlot(_ctx.$slots, "default")
1430
- ],
1431
- 2
1432
- )
1433
- ])
1434
- ],
1435
- 2
1436
- )), [
1437
- [vShow, _ctx.visible]
1438
- ]);
1439
- }
1440
- var OptionGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/option-group.vue"]]);
1441
-
1442
- function useCalcInputWidth() {
1443
- const calculatorRef = shallowRef();
1444
- const calculatorWidth = ref(0);
1445
- const inputStyle = computed(() => ({
1446
- minWidth: `${Math.max(calculatorWidth.value, MINIMUM_INPUT_WIDTH)}px`
1447
- }));
1448
- const resetCalculatorWidth = () => {
1449
- var _a, _b;
1450
- calculatorWidth.value = (_b = (_a = calculatorRef.value) == null ? void 0 : _a.getBoundingClientRect().width) != null ? _b : 0;
1451
- };
1452
- useResizeObserver(calculatorRef, resetCalculatorWidth);
1453
- return {
1454
- calculatorRef,
1455
- calculatorWidth,
1456
- inputStyle
1457
- };
1458
- }
1459
-
1460
- const COMPONENT_NAME = "ElSelect";
1461
- const warnHandlerMap = /* @__PURE__ */ new WeakMap();
1462
- const createSelectWarnHandler = (appContext) => {
1463
- return (...args) => {
1464
- var _a, _b;
1465
- const message = args[0];
1466
- if (!message || message.includes(
1467
- 'Slot "default" invoked outside of the render function'
1468
- ) && ((_a = args[2]) == null ? void 0 : _a.includes("ElTreeSelect")))
1469
- return;
1470
- const original = (_b = warnHandlerMap.get(appContext)) == null ? void 0 : _b.originalWarnHandler;
1471
- if (original) {
1472
- original(...args);
1473
- return;
1474
- }
1475
- console.warn(...args);
1476
- };
1477
- };
1478
- const getWarnHandlerRecord = (appContext) => {
1479
- let record = warnHandlerMap.get(appContext);
1480
- if (!record) {
1481
- record = {
1482
- originalWarnHandler: appContext.config.warnHandler,
1483
- handler: createSelectWarnHandler(appContext),
1484
- count: 0
1485
- };
1486
- warnHandlerMap.set(appContext, record);
1487
- }
1488
- return record;
1489
- };
1490
- const _sfc_main = defineComponent({
1491
- name: COMPONENT_NAME,
1492
- componentName: COMPONENT_NAME,
1493
- components: {
1494
- ElSelectMenu,
1495
- ElOption: Option,
1496
- ElOptions,
1497
- ElOptionGroup: OptionGroup,
1498
- ElTag,
1499
- ElScrollbar,
1500
- ElTooltip,
1501
- ElIcon
1502
- },
1503
- directives: { ClickOutside },
1504
- props: selectProps,
1505
- emits: [
1506
- UPDATE_MODEL_EVENT,
1507
- CHANGE_EVENT,
1508
- "remove-tag",
1509
- "clear",
1510
- "visible-change",
1511
- "focus",
1512
- "blur",
1513
- "popup-scroll"
1514
- ],
1515
- setup(props, { emit, slots }) {
1516
- const instance = getCurrentInstance();
1517
- const warnRecord = getWarnHandlerRecord(instance.appContext);
1518
- warnRecord.count += 1;
1519
- instance.appContext.config.warnHandler = warnRecord.handler;
1520
- const modelValue = computed(() => {
1521
- const { modelValue: rawModelValue, multiple } = props;
1522
- const fallback = multiple ? [] : void 0;
1523
- if (isArray(rawModelValue)) {
1524
- return multiple ? rawModelValue : fallback;
1525
- }
1526
- return multiple ? fallback : rawModelValue;
1527
- });
1528
- const _props = reactive({
1529
- ...toRefs(props),
1530
- modelValue
1531
- });
1532
- const API = useSelect(_props, emit);
1533
- const { calculatorRef, inputStyle } = useCalcInputWidth();
1534
- const { getLabel, getValue, getOptions, getDisabled } = useProps(props);
1535
- const getOptionProps = (option) => ({
1536
- label: getLabel(option),
1537
- value: getValue(option),
1538
- disabled: getDisabled(option)
1539
- });
1540
- const flatTreeSelectData = (data) => {
1541
- return data.reduce((acc, item) => {
1542
- acc.push(item);
1543
- if (item.children && item.children.length > 0) {
1544
- acc.push(...flatTreeSelectData(item.children));
1545
- }
1546
- return acc;
1547
- }, []);
1548
- };
1549
- const manuallyRenderSlots = (vnodes) => {
1550
- const children = flattedChildren(vnodes || []);
1551
- children.forEach((item) => {
1552
- var _a;
1553
- if (isObject(item) && (item.type.name === "ElOption" || item.type.name === "ElTree")) {
1554
- const _name = item.type.name;
1555
- if (_name === "ElTree") {
1556
- const treeData = ((_a = item.props) == null ? void 0 : _a.data) || [];
1557
- const flatData = flatTreeSelectData(treeData);
1558
- flatData.forEach((treeItem) => {
1559
- treeItem.currentLabel = treeItem.label || (isObject(treeItem.value) ? "" : treeItem.value);
1560
- API.onOptionCreate(treeItem);
1561
- });
1562
- } else if (_name === "ElOption") {
1563
- const obj = { ...item.props };
1564
- obj.currentLabel = obj.label || (isObject(obj.value) ? "" : obj.value);
1565
- API.onOptionCreate(obj);
1566
- }
1567
- }
1568
- });
1569
- };
1570
- watch(
1571
- () => {
1572
- var _a;
1573
- return [(_a = slots.default) == null ? void 0 : _a.call(slots), modelValue.value];
1574
- },
1575
- () => {
1576
- var _a;
1577
- if (props.persistent || API.expanded.value) {
1578
- return;
1579
- }
1580
- API.states.options.clear();
1581
- manuallyRenderSlots((_a = slots.default) == null ? void 0 : _a.call(slots));
1582
- },
1583
- {
1584
- immediate: true
1585
- }
1586
- );
1587
- provide(
1588
- selectKey,
1589
- reactive({
1590
- props: _props,
1591
- states: API.states,
1592
- selectRef: API.selectRef,
1593
- optionsArray: API.optionsArray,
1594
- setSelected: API.setSelected,
1595
- handleOptionSelect: API.handleOptionSelect,
1596
- onOptionCreate: API.onOptionCreate,
1597
- onOptionDestroy: API.onOptionDestroy
1598
- })
1599
- );
1600
- const selectedLabel = computed(() => {
1601
- if (!props.multiple) {
1602
- return API.states.selectedLabel;
1603
- }
1604
- return API.states.selected.map((i) => i.currentLabel);
1605
- });
1606
- onBeforeUnmount(() => {
1607
- const record = warnHandlerMap.get(instance.appContext);
1608
- if (!record)
1609
- return;
1610
- record.count -= 1;
1611
- if (record.count <= 0) {
1612
- instance.appContext.config.warnHandler = record.originalWarnHandler;
1613
- warnHandlerMap.delete(instance.appContext);
1614
- }
1615
- });
1616
- return {
1617
- ...API,
1618
- modelValue,
1619
- selectedLabel,
1620
- calculatorRef,
1621
- inputStyle,
1622
- getLabel,
1623
- getValue,
1624
- getOptions,
1625
- getDisabled,
1626
- getOptionProps
1627
- };
1628
- }
1629
- });
1630
- const _hoisted_1 = ["id", "name", "disabled", "autocomplete", "tabindex", "readonly", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label"];
1631
- const _hoisted_2 = ["textContent"];
1632
- const _hoisted_3 = { key: 1 };
1633
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
1634
- const _component_el_tag = resolveComponent("el-tag");
1635
- const _component_el_tooltip = resolveComponent("el-tooltip");
1636
- const _component_el_icon = resolveComponent("el-icon");
1637
- const _component_el_option = resolveComponent("el-option");
1638
- const _component_el_option_group = resolveComponent("el-option-group");
1639
- const _component_el_options = resolveComponent("el-options");
1640
- const _component_el_scrollbar = resolveComponent("el-scrollbar");
1641
- const _component_el_select_menu = resolveComponent("el-select-menu");
1642
- const _directive_click_outside = resolveDirective("click-outside");
1643
- return withDirectives((openBlock(), createElementBlock(
1644
- "div",
1645
- mergeProps({
1646
- ref: "selectRef",
1647
- class: [_ctx.nsSelect.b(), _ctx.nsSelect.m(_ctx.selectSize)]
1648
- }, {
1649
- [toHandlerKey(_ctx.mouseEnterEventName)]: _cache[11] || (_cache[11] = ($event) => _ctx.states.inputHovering = true)
1650
- }, {
1651
- onMouseleave: _cache[12] || (_cache[12] = ($event) => _ctx.states.inputHovering = false)
1652
- }),
1653
- [
1654
- createVNode(_component_el_tooltip, {
1655
- ref: "tooltipRef",
1656
- visible: _ctx.dropdownMenuVisible,
1657
- placement: _ctx.placement,
1658
- teleported: _ctx.teleported,
1659
- "popper-class": [_ctx.nsSelect.e("popper"), _ctx.popperClass],
1660
- "popper-style": _ctx.popperStyle,
1661
- "popper-options": _ctx.popperOptions,
1662
- "fallback-placements": _ctx.fallbackPlacements,
1663
- effect: _ctx.effect,
1664
- pure: "",
1665
- trigger: "click",
1666
- transition: `${_ctx.nsSelect.namespace.value}-zoom-in-top`,
1667
- "stop-popper-mouse-event": false,
1668
- "gpu-acceleration": false,
1669
- persistent: _ctx.persistent,
1670
- "append-to": _ctx.appendTo,
1671
- "show-arrow": _ctx.showArrow,
1672
- offset: _ctx.offset,
1673
- onBeforeShow: _ctx.handleMenuEnter,
1674
- onHide: _cache[10] || (_cache[10] = ($event) => _ctx.states.isBeforeHide = false)
1675
- }, {
1676
- default: withCtx(() => {
1677
- var _a;
1678
- return [
1679
- createElementVNode(
1680
- "div",
1681
- {
1682
- ref: "wrapperRef",
1683
- class: normalizeClass([
1684
- _ctx.nsSelect.e("wrapper"),
1685
- _ctx.nsSelect.is("focused", _ctx.isFocused),
1686
- _ctx.nsSelect.is("hovering", _ctx.states.inputHovering),
1687
- _ctx.nsSelect.is("filterable", _ctx.filterable),
1688
- _ctx.nsSelect.is("disabled", _ctx.selectDisabled)
1689
- ]),
1690
- onClick: _cache[7] || (_cache[7] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["prevent"]))
1691
- },
1692
- [
1693
- _ctx.$slots.prefix ? (openBlock(), createElementBlock(
1694
- "div",
1695
- {
1696
- key: 0,
1697
- ref: "prefixRef",
1698
- class: normalizeClass(_ctx.nsSelect.e("prefix"))
1699
- },
1700
- [
1701
- renderSlot(_ctx.$slots, "prefix")
1702
- ],
1703
- 2
1704
- )) : createCommentVNode("v-if", true),
1705
- createElementVNode(
1706
- "div",
1707
- {
1708
- ref: "selectionRef",
1709
- class: normalizeClass([
1710
- _ctx.nsSelect.e("selection"),
1711
- _ctx.nsSelect.is(
1712
- "near",
1713
- _ctx.multiple && !_ctx.$slots.prefix && !!_ctx.states.selected.length
1714
- )
1715
- ])
1716
- },
1717
- [
1718
- _ctx.multiple ? renderSlot(_ctx.$slots, "tag", {
1719
- key: 0,
1720
- data: _ctx.states.selected,
1721
- deleteTag: _ctx.deleteTag,
1722
- selectDisabled: _ctx.selectDisabled
1723
- }, () => [
1724
- (openBlock(true), createElementBlock(
1725
- Fragment,
1726
- null,
1727
- renderList(_ctx.showTagList, (item) => {
1728
- return openBlock(), createElementBlock(
1729
- "div",
1730
- {
1731
- key: _ctx.getValueKey(item),
1732
- class: normalizeClass(_ctx.nsSelect.e("selected-item"))
1733
- },
1734
- [
1735
- createVNode(_component_el_tag, {
1736
- closable: !_ctx.selectDisabled && !item.isDisabled,
1737
- size: _ctx.collapseTagSize,
1738
- type: _ctx.tagType,
1739
- effect: _ctx.tagEffect,
1740
- "disable-transitions": "",
1741
- style: normalizeStyle(_ctx.tagStyle),
1742
- onClose: ($event) => _ctx.deleteTag($event, item)
1743
- }, {
1744
- default: withCtx(() => [
1745
- createElementVNode(
1746
- "span",
1747
- {
1748
- class: normalizeClass(_ctx.nsSelect.e("tags-text"))
1749
- },
1750
- [
1751
- renderSlot(_ctx.$slots, "label", {
1752
- index: item.index,
1753
- label: item.currentLabel,
1754
- value: item.value
1755
- }, () => [
1756
- createTextVNode(
1757
- toDisplayString(item.currentLabel),
1758
- 1
1759
- )
1760
- ])
1761
- ],
1762
- 2
1763
- )
1764
- ]),
1765
- _: 2
1766
- }, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
1767
- ],
1768
- 2
1769
- );
1770
- }),
1771
- 128
1772
- )),
1773
- _ctx.collapseTags && _ctx.states.selected.length > _ctx.maxCollapseTags ? (openBlock(), createBlock(_component_el_tooltip, {
1774
- key: 0,
1775
- ref: "tagTooltipRef",
1776
- disabled: _ctx.dropdownMenuVisible || !_ctx.collapseTagsTooltip,
1777
- "fallback-placements": ["bottom", "top", "right", "left"],
1778
- effect: _ctx.effect,
1779
- placement: "bottom",
1780
- "popper-class": _ctx.popperClass,
1781
- "popper-style": _ctx.popperStyle,
1782
- teleported: _ctx.teleported,
1783
- "popper-options": _ctx.popperOptions
1784
- }, {
1785
- default: withCtx(() => [
1786
- createElementVNode(
1787
- "div",
1788
- {
1789
- ref: "collapseItemRef",
1790
- class: normalizeClass(_ctx.nsSelect.e("selected-item"))
1791
- },
1792
- [
1793
- createVNode(_component_el_tag, {
1794
- closable: false,
1795
- size: _ctx.collapseTagSize,
1796
- type: _ctx.tagType,
1797
- effect: _ctx.tagEffect,
1798
- "disable-transitions": "",
1799
- style: normalizeStyle(_ctx.collapseTagStyle)
1800
- }, {
1801
- default: withCtx(() => [
1802
- createElementVNode(
1803
- "span",
1804
- {
1805
- class: normalizeClass(_ctx.nsSelect.e("tags-text"))
1806
- },
1807
- " + " + toDisplayString(_ctx.states.selected.length - _ctx.maxCollapseTags),
1808
- 3
1809
- )
1810
- ]),
1811
- _: 1
1812
- }, 8, ["size", "type", "effect", "style"])
1813
- ],
1814
- 2
1815
- )
1816
- ]),
1817
- content: withCtx(() => [
1818
- createElementVNode(
1819
- "div",
1820
- {
1821
- ref: "tagMenuRef",
1822
- class: normalizeClass(_ctx.nsSelect.e("selection"))
1823
- },
1824
- [
1825
- (openBlock(true), createElementBlock(
1826
- Fragment,
1827
- null,
1828
- renderList(_ctx.collapseTagList, (item) => {
1829
- return openBlock(), createElementBlock(
1830
- "div",
1831
- {
1832
- key: _ctx.getValueKey(item),
1833
- class: normalizeClass(_ctx.nsSelect.e("selected-item"))
1834
- },
1835
- [
1836
- createVNode(_component_el_tag, {
1837
- class: "in-tooltip",
1838
- closable: !_ctx.selectDisabled && !item.isDisabled,
1839
- size: _ctx.collapseTagSize,
1840
- type: _ctx.tagType,
1841
- effect: _ctx.tagEffect,
1842
- "disable-transitions": "",
1843
- onClose: ($event) => _ctx.deleteTag($event, item)
1844
- }, {
1845
- default: withCtx(() => [
1846
- createElementVNode(
1847
- "span",
1848
- {
1849
- class: normalizeClass(_ctx.nsSelect.e("tags-text"))
1850
- },
1851
- [
1852
- renderSlot(_ctx.$slots, "label", {
1853
- index: item.index,
1854
- label: item.currentLabel,
1855
- value: item.value
1856
- }, () => [
1857
- createTextVNode(
1858
- toDisplayString(item.currentLabel),
1859
- 1
1860
- )
1861
- ])
1862
- ],
1863
- 2
1864
- )
1865
- ]),
1866
- _: 2
1867
- }, 1032, ["closable", "size", "type", "effect", "onClose"])
1868
- ],
1869
- 2
1870
- );
1871
- }),
1872
- 128
1873
- ))
1874
- ],
1875
- 2
1876
- )
1877
- ]),
1878
- _: 3
1879
- }, 8, ["disabled", "effect", "popper-class", "popper-style", "teleported", "popper-options"])) : createCommentVNode("v-if", true)
1880
- ]) : createCommentVNode("v-if", true),
1881
- createElementVNode(
1882
- "div",
1883
- {
1884
- class: normalizeClass([
1885
- _ctx.nsSelect.e("selected-item"),
1886
- _ctx.nsSelect.e("input-wrapper"),
1887
- _ctx.nsSelect.is("hidden", !_ctx.filterable || _ctx.selectDisabled)
1888
- ])
1889
- },
1890
- [
1891
- withDirectives(createElementVNode("input", {
1892
- id: _ctx.inputId,
1893
- ref: "inputRef",
1894
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.states.inputValue = $event),
1895
- type: "text",
1896
- name: _ctx.name,
1897
- class: normalizeClass([_ctx.nsSelect.e("input"), _ctx.nsSelect.is(_ctx.selectSize)]),
1898
- disabled: _ctx.selectDisabled,
1899
- autocomplete: _ctx.autocomplete,
1900
- style: normalizeStyle(_ctx.inputStyle),
1901
- tabindex: _ctx.tabindex,
1902
- role: "combobox",
1903
- readonly: !_ctx.filterable,
1904
- spellcheck: "false",
1905
- "aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
1906
- "aria-controls": _ctx.contentId,
1907
- "aria-expanded": _ctx.dropdownMenuVisible,
1908
- "aria-label": _ctx.ariaLabel,
1909
- "aria-autocomplete": "none",
1910
- "aria-haspopup": "listbox",
1911
- onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
1912
- onCompositionstart: _cache[2] || (_cache[2] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
1913
- onCompositionupdate: _cache[3] || (_cache[3] = (...args) => _ctx.handleCompositionUpdate && _ctx.handleCompositionUpdate(...args)),
1914
- onCompositionend: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args)),
1915
- onInput: _cache[5] || (_cache[5] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
1916
- onClick: _cache[6] || (_cache[6] = withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
1917
- }, null, 46, _hoisted_1), [
1918
- [vModelText, _ctx.states.inputValue]
1919
- ]),
1920
- _ctx.filterable ? (openBlock(), createElementBlock("span", {
1921
- key: 0,
1922
- ref: "calculatorRef",
1923
- "aria-hidden": "true",
1924
- class: normalizeClass(_ctx.nsSelect.e("input-calculator")),
1925
- textContent: toDisplayString(_ctx.states.inputValue)
1926
- }, null, 10, _hoisted_2)) : createCommentVNode("v-if", true)
1927
- ],
1928
- 2
1929
- ),
1930
- _ctx.shouldShowPlaceholder ? (openBlock(), createElementBlock(
1931
- "div",
1932
- {
1933
- key: 1,
1934
- class: normalizeClass([
1935
- _ctx.nsSelect.e("selected-item"),
1936
- _ctx.nsSelect.e("placeholder"),
1937
- _ctx.nsSelect.is(
1938
- "transparent",
1939
- !_ctx.hasModelValue || _ctx.expanded && !_ctx.states.inputValue
1940
- )
1941
- ])
1942
- },
1943
- [
1944
- _ctx.hasModelValue ? renderSlot(_ctx.$slots, "label", {
1945
- key: 0,
1946
- index: _ctx.getOption(_ctx.modelValue).index,
1947
- label: _ctx.currentPlaceholder,
1948
- value: _ctx.modelValue
1949
- }, () => [
1950
- createElementVNode(
1951
- "span",
1952
- null,
1953
- toDisplayString(_ctx.currentPlaceholder),
1954
- 1
1955
- )
1956
- ]) : (openBlock(), createElementBlock(
1957
- "span",
1958
- _hoisted_3,
1959
- toDisplayString(_ctx.currentPlaceholder),
1960
- 1
1961
- ))
1962
- ],
1963
- 2
1964
- )) : createCommentVNode("v-if", true)
1965
- ],
1966
- 2
1967
- ),
1968
- createElementVNode(
1969
- "div",
1970
- {
1971
- ref: "suffixRef",
1972
- class: normalizeClass(_ctx.nsSelect.e("suffix"))
1973
- },
1974
- [
1975
- _ctx.iconComponent && !_ctx.showClearBtn ? (openBlock(), createBlock(_component_el_icon, {
1976
- key: 0,
1977
- class: normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
1978
- }, {
1979
- default: withCtx(() => [
1980
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.iconComponent)))
1981
- ]),
1982
- _: 1
1983
- }, 8, ["class"])) : createCommentVNode("v-if", true),
1984
- _ctx.showClearBtn && _ctx.clearIcon ? (openBlock(), createBlock(_component_el_icon, {
1985
- key: 1,
1986
- class: normalizeClass([
1987
- _ctx.nsSelect.e("caret"),
1988
- _ctx.nsSelect.e("icon"),
1989
- _ctx.nsSelect.e("clear")
1990
- ]),
1991
- onClick: _ctx.handleClearClick
1992
- }, {
1993
- default: withCtx(() => [
1994
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
1995
- ]),
1996
- _: 1
1997
- }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
1998
- _ctx.validateState && _ctx.validateIcon && _ctx.needStatusIcon ? (openBlock(), createBlock(_component_el_icon, {
1999
- key: 2,
2000
- class: normalizeClass([
2001
- _ctx.nsInput.e("icon"),
2002
- _ctx.nsInput.e("validateIcon"),
2003
- _ctx.nsInput.is("loading", _ctx.validateState === "validating")
2004
- ])
2005
- }, {
2006
- default: withCtx(() => [
2007
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.validateIcon)))
2008
- ]),
2009
- _: 1
2010
- }, 8, ["class"])) : createCommentVNode("v-if", true)
2011
- ],
2012
- 2
2013
- )
2014
- ],
2015
- 2
2016
- )
2017
- ];
2018
- }),
2019
- content: withCtx(() => [
2020
- createVNode(
2021
- _component_el_select_menu,
2022
- { ref: "menuRef" },
2023
- {
2024
- default: withCtx(() => [
2025
- _ctx.$slots.header ? (openBlock(), createElementBlock(
2026
- "div",
2027
- {
2028
- key: 0,
2029
- class: normalizeClass(_ctx.nsSelect.be("dropdown", "header")),
2030
- onClick: _cache[8] || (_cache[8] = withModifiers(() => {
2031
- }, ["stop"]))
2032
- },
2033
- [
2034
- renderSlot(_ctx.$slots, "header")
2035
- ],
2036
- 2
2037
- )) : createCommentVNode("v-if", true),
2038
- withDirectives(createVNode(_component_el_scrollbar, {
2039
- id: _ctx.contentId,
2040
- ref: "scrollbarRef",
2041
- tag: "ul",
2042
- "wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
2043
- "view-class": _ctx.nsSelect.be("dropdown", "list"),
2044
- class: normalizeClass([_ctx.nsSelect.is("empty", _ctx.filteredOptionsCount === 0)]),
2045
- role: "listbox",
2046
- "aria-label": _ctx.ariaLabel,
2047
- "aria-orientation": "vertical",
2048
- onScroll: _ctx.popupScroll
2049
- }, {
2050
- default: withCtx(() => [
2051
- _ctx.showNewOption ? (openBlock(), createBlock(_component_el_option, {
2052
- key: 0,
2053
- value: _ctx.states.inputValue,
2054
- created: true
2055
- }, null, 8, ["value"])) : createCommentVNode("v-if", true),
2056
- createVNode(_component_el_options, null, {
2057
- default: withCtx(() => [
2058
- renderSlot(_ctx.$slots, "default", {}, () => [
2059
- (openBlock(true), createElementBlock(
2060
- Fragment,
2061
- null,
2062
- renderList(_ctx.options, (option, index) => {
2063
- var _a;
2064
- return openBlock(), createElementBlock(
2065
- Fragment,
2066
- { key: index },
2067
- [
2068
- ((_a = _ctx.getOptions(option)) == null ? void 0 : _a.length) ? (openBlock(), createBlock(_component_el_option_group, {
2069
- key: 0,
2070
- label: _ctx.getLabel(option),
2071
- disabled: _ctx.getDisabled(option)
2072
- }, {
2073
- default: withCtx(() => [
2074
- (openBlock(true), createElementBlock(
2075
- Fragment,
2076
- null,
2077
- renderList(_ctx.getOptions(option), (item) => {
2078
- return openBlock(), createBlock(
2079
- _component_el_option,
2080
- mergeProps({
2081
- key: _ctx.getValue(item)
2082
- }, { ref_for: true }, _ctx.getOptionProps(item)),
2083
- null,
2084
- 16
2085
- );
2086
- }),
2087
- 128
2088
- ))
2089
- ]),
2090
- _: 2
2091
- }, 1032, ["label", "disabled"])) : (openBlock(), createBlock(
2092
- _component_el_option,
2093
- mergeProps({
2094
- key: 1,
2095
- ref_for: true
2096
- }, _ctx.getOptionProps(option)),
2097
- null,
2098
- 16
2099
- ))
2100
- ],
2101
- 64
2102
- );
2103
- }),
2104
- 128
2105
- ))
2106
- ])
2107
- ]),
2108
- _: 3
2109
- })
2110
- ]),
2111
- _: 3
2112
- }, 8, ["id", "wrap-class", "view-class", "class", "aria-label", "onScroll"]), [
2113
- [vShow, _ctx.states.options.size > 0 && !_ctx.loading]
2114
- ]),
2115
- _ctx.$slots.loading && _ctx.loading ? (openBlock(), createElementBlock(
2116
- "div",
2117
- {
2118
- key: 1,
2119
- class: normalizeClass(_ctx.nsSelect.be("dropdown", "loading"))
2120
- },
2121
- [
2122
- renderSlot(_ctx.$slots, "loading")
2123
- ],
2124
- 2
2125
- )) : _ctx.loading || _ctx.filteredOptionsCount === 0 ? (openBlock(), createElementBlock(
2126
- "div",
2127
- {
2128
- key: 2,
2129
- class: normalizeClass(_ctx.nsSelect.be("dropdown", "empty"))
2130
- },
2131
- [
2132
- renderSlot(_ctx.$slots, "empty", {}, () => [
2133
- createElementVNode(
2134
- "span",
2135
- null,
2136
- toDisplayString(_ctx.emptyText),
2137
- 1
2138
- )
2139
- ])
2140
- ],
2141
- 2
2142
- )) : createCommentVNode("v-if", true),
2143
- _ctx.$slots.footer ? (openBlock(), createElementBlock(
2144
- "div",
2145
- {
2146
- key: 3,
2147
- class: normalizeClass(_ctx.nsSelect.be("dropdown", "footer")),
2148
- onClick: _cache[9] || (_cache[9] = withModifiers(() => {
2149
- }, ["stop"]))
2150
- },
2151
- [
2152
- renderSlot(_ctx.$slots, "footer")
2153
- ],
2154
- 2
2155
- )) : createCommentVNode("v-if", true)
2156
- ]),
2157
- _: 3
2158
- },
2159
- 512
2160
- )
2161
- ]),
2162
- _: 3
2163
- }, 8, ["visible", "placement", "teleported", "popper-class", "popper-style", "popper-options", "fallback-placements", "effect", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow"])
2164
- ],
2165
- 16
2166
- )), [
2167
- [_directive_click_outside, _ctx.handleClickOutside, _ctx.popperRef]
2168
- ]);
2169
- }
2170
- var Select = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/select/src/select.vue"]]);
2171
-
2172
- const ElSelect = withInstall(Select, {
2173
- Option,
2174
- OptionGroup
2175
- });
2176
- const ElOption = withNoopInstall(Option);
2177
- withNoopInstall(OptionGroup);
2178
-
2179
- export { ElSelect as E, ElOption as a };