eco-vue-js 0.26.19 → 0.26.21
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.
- package/dist/assets/icons/IconSpinner.js +1 -1
- package/dist/components/DatePicker/WDatePicker.vue.d.ts.map +1 -1
- package/dist/components/DatePicker/WDatePicker.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/DatePicker/components/CalendarValue.vue.d.ts +0 -1
- package/dist/components/DatePicker/components/CalendarValue.vue.d.ts.map +1 -1
- package/dist/components/DatePicker/components/CalendarValue.vue_vue_type_script_setup_true_lang.js +2 -6
- package/dist/components/Dismissable/WDismissable.vue.d.ts.map +1 -1
- package/dist/components/Dismissable/WDismissable.vue_vue_type_script_setup_true_lang.js +3 -2
- package/dist/components/FilePicker/components/FilePickerSvg.vue.d.ts.map +1 -1
- package/dist/components/FilePicker/components/FilePickerSvg.vue_vue_type_script_setup_true_lang.js +4 -14
- package/dist/components/Input/WInputAsync.vue.d.ts.map +1 -1
- package/dist/components/Input/WInputAsync.vue_vue_type_script_setup_true_lang.js +2 -1
- package/dist/components/Nav/WNavItem.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/Select/WSelect.vue.d.ts +3 -3
- package/dist/components/Select/WSelect.vue.d.ts.map +1 -1
- package/dist/components/Select/WSelect.vue_vue_type_script_setup_true_lang.js +84 -362
- package/dist/components/Select/WSelectAsync.vue.d.ts +3 -3
- package/dist/components/Select/WSelectAsync.vue.d.ts.map +1 -1
- package/dist/components/Select/WSelectAsync.vue_vue_type_script_setup_true_lang.js +96 -237
- package/dist/components/Select/WSelectAsyncSingle.vue.d.ts.map +1 -1
- package/dist/components/Select/WSelectAsyncSingle.vue_vue_type_script_setup_true_lang.js +106 -10
- package/dist/components/Select/WSelectSingle.vue.d.ts.map +1 -1
- package/dist/components/Select/WSelectSingle.vue_vue_type_script_setup_true_lang.js +61 -8
- package/dist/components/Select/WSelectStringified.vue_vue_type_script_setup_true_lang.js +2 -0
- package/dist/components/Select/components/SelectAsyncBase.vue.d.ts +54 -0
- package/dist/components/Select/components/SelectAsyncBase.vue.d.ts.map +1 -0
- package/dist/components/Select/components/SelectAsyncBase.vue.js +5 -0
- package/dist/components/Select/components/SelectAsyncBase.vue_vue_type_script_setup_true_lang.js +406 -0
- package/dist/components/Select/components/SelectBase.vue.d.ts +52 -0
- package/dist/components/Select/components/SelectBase.vue.d.ts.map +1 -0
- package/dist/components/Select/components/SelectBase.vue.js +5 -0
- package/dist/components/Select/components/SelectBase.vue_vue_type_script_setup_true_lang.js +495 -0
- package/dist/components/Select/components/SelectDeferred.vue.d.ts +29 -0
- package/dist/components/Select/components/SelectDeferred.vue.d.ts.map +1 -0
- package/dist/components/Select/components/SelectDeferred.vue.js +5 -0
- package/dist/components/Select/components/SelectDeferred.vue_vue_type_script_setup_true_lang.js +166 -0
- package/dist/components/Select/models/useDeferred.d.ts +22 -0
- package/dist/components/Select/models/useDeferred.d.ts.map +1 -0
- package/dist/components/Select/models/useDeferred.js +69 -0
- package/dist/components/Select/types.d.ts +21 -3
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Shine/WShine.vue.d.ts.map +1 -1
- package/dist/components/Shine/WShine.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/Shine/WShineEffect.vue.d.ts.map +1 -1
- package/dist/components/Shine/WShineEffect.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/Spinner/WSpinner.vue.d.ts.map +1 -1
- package/dist/components/Spinner/WSpinner.vue.js +1 -1
- package/dist/components/Tabs/WTabs.vue_vue_type_script_setup_true_lang.js +4 -4
- package/dist/components/Uniform/use/useUniformModel.d.ts.map +1 -1
- package/dist/components/Uniform/use/useUniformModel.js +3 -2
- package/dist/components/Uniform/utils/utils.js +2 -2
- package/dist/main.js +2 -2
- package/dist/utils/useRouteTitle.d.ts +2 -2
- package/dist/utils/useRouteTitle.d.ts.map +1 -1
- package/dist/utils/useRouteTitle.js +3 -3
- package/dist/utils/utils.d.ts +3 -0
- package/dist/utils/utils.d.ts.map +1 -1
- package/dist/utils/utils.js +5 -2
- package/docs/components/select.md +67 -5
- package/docs/llms.txt +1 -1
- package/package.json +1 -1
- package/tailwind-base/base.css +1 -0
- package/tailwind-base/css/animations.css +10 -0
- package/tailwind-base/css/reduced-motion.css +15 -0
|
@@ -0,0 +1,495 @@
|
|
|
1
|
+
import { debounce } from "../../../utils/utils.js";
|
|
2
|
+
import { useIsMobile } from "../../../utils/mobile.js";
|
|
3
|
+
import { useComponentStates } from "../../../utils/useComponentStates.js";
|
|
4
|
+
import { ApiError } from "../../../utils/api.js";
|
|
5
|
+
import WInputSuggest_default from "../../Input/WInputSuggest.vue.js";
|
|
6
|
+
import SelectOption_default from "./SelectOption.vue.js";
|
|
7
|
+
import { useScrollSelected } from "../models/useScrollSelected.js";
|
|
8
|
+
import SelectOptionPrefix_default from "./SelectOptionPrefix.vue.js";
|
|
9
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRef, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
|
|
10
|
+
//#region src/components/Select/components/SelectBase.vue?vue&type=script&setup=true&lang.ts
|
|
11
|
+
var _hoisted_1 = { role: "listbox" };
|
|
12
|
+
var _hoisted_2 = {
|
|
13
|
+
key: 1,
|
|
14
|
+
class: "text-description w-option w-option-padding-y flex items-center"
|
|
15
|
+
};
|
|
16
|
+
var _hoisted_3 = {
|
|
17
|
+
key: 1,
|
|
18
|
+
class: "w-select-option first:pt---w-select-option-padding last:pb---w-select-option-padding text-description"
|
|
19
|
+
};
|
|
20
|
+
var _hoisted_4 = { class: "w-option flex cursor-default select-none items-center" };
|
|
21
|
+
var SelectBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
22
|
+
inheritAttrs: false,
|
|
23
|
+
__name: "SelectBase",
|
|
24
|
+
props: {
|
|
25
|
+
modelValue: {},
|
|
26
|
+
valueGetter: {},
|
|
27
|
+
searchFn: {},
|
|
28
|
+
useQueryFnDefault: {},
|
|
29
|
+
useFirstDefault: { type: Boolean },
|
|
30
|
+
emptyStub: {},
|
|
31
|
+
disableClear: { type: Boolean },
|
|
32
|
+
hidePrefix: { type: Boolean },
|
|
33
|
+
createOption: {},
|
|
34
|
+
filterOptions: {},
|
|
35
|
+
hideOptionIcon: { type: Boolean },
|
|
36
|
+
createdData: {},
|
|
37
|
+
searchModel: { type: Boolean },
|
|
38
|
+
lazy: { type: Boolean },
|
|
39
|
+
placeholderEmpty: {},
|
|
40
|
+
cursorSelected: { type: Boolean },
|
|
41
|
+
previewData: {},
|
|
42
|
+
deferred: { type: Boolean },
|
|
43
|
+
mobileTitle: {},
|
|
44
|
+
persist: { type: Boolean },
|
|
45
|
+
closeOnClear: { type: Boolean },
|
|
46
|
+
static: { type: Boolean },
|
|
47
|
+
hideToggle: { type: Boolean },
|
|
48
|
+
type: {},
|
|
49
|
+
textarea: { type: Boolean },
|
|
50
|
+
resize: { type: Boolean },
|
|
51
|
+
placeholder: {},
|
|
52
|
+
icon: {},
|
|
53
|
+
size: {},
|
|
54
|
+
maxLength: {},
|
|
55
|
+
maxSizeKb: {},
|
|
56
|
+
step: {},
|
|
57
|
+
min: {},
|
|
58
|
+
max: {},
|
|
59
|
+
name: {},
|
|
60
|
+
autocomplete: {},
|
|
61
|
+
autofocus: { type: [Boolean, Number] },
|
|
62
|
+
readonly: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
default: void 0
|
|
65
|
+
},
|
|
66
|
+
disabledActions: { type: Boolean },
|
|
67
|
+
loading: { type: Boolean },
|
|
68
|
+
spellcheck: { type: Boolean },
|
|
69
|
+
customBackspaceHandle: { type: Boolean },
|
|
70
|
+
textSecure: { type: Boolean },
|
|
71
|
+
placeholderSecure: { type: Boolean },
|
|
72
|
+
allowPaste: { type: Boolean },
|
|
73
|
+
hideInput: { type: Boolean },
|
|
74
|
+
noWrap: { type: Boolean },
|
|
75
|
+
textTransparent: { type: Boolean },
|
|
76
|
+
textParts: {},
|
|
77
|
+
rich: { type: Boolean },
|
|
78
|
+
toolbarActions: {},
|
|
79
|
+
borderClass: {},
|
|
80
|
+
explicit: { type: Boolean },
|
|
81
|
+
title: {},
|
|
82
|
+
titleIcon: {},
|
|
83
|
+
description: {},
|
|
84
|
+
errorMessage: {},
|
|
85
|
+
tooltipText: {},
|
|
86
|
+
mono: { type: Boolean },
|
|
87
|
+
hasChanges: { type: Boolean },
|
|
88
|
+
skeleton: {
|
|
89
|
+
type: Boolean,
|
|
90
|
+
default: void 0
|
|
91
|
+
},
|
|
92
|
+
disabled: {
|
|
93
|
+
type: Boolean,
|
|
94
|
+
default: void 0
|
|
95
|
+
},
|
|
96
|
+
required: { type: Boolean },
|
|
97
|
+
noMargin: { type: Boolean },
|
|
98
|
+
allowCopy: { type: Boolean },
|
|
99
|
+
leftError: { type: Boolean },
|
|
100
|
+
filterField: {},
|
|
101
|
+
filterValue: {},
|
|
102
|
+
subgrid: { type: Boolean },
|
|
103
|
+
seamless: { type: Boolean },
|
|
104
|
+
topText: { type: Boolean },
|
|
105
|
+
allowDropFile: { type: Boolean },
|
|
106
|
+
hideTitle: { type: Boolean },
|
|
107
|
+
embedded: { type: Boolean },
|
|
108
|
+
horizontalAlign: {},
|
|
109
|
+
dropdownClass: {},
|
|
110
|
+
optionComponent: {},
|
|
111
|
+
optionComponentProps: {},
|
|
112
|
+
useQueryFnOptions: {},
|
|
113
|
+
queryParamsOptions: {},
|
|
114
|
+
options: {}
|
|
115
|
+
},
|
|
116
|
+
emits: [
|
|
117
|
+
"select",
|
|
118
|
+
"unselect",
|
|
119
|
+
"focus",
|
|
120
|
+
"blur",
|
|
121
|
+
"update:query-options-error",
|
|
122
|
+
"init-model"
|
|
123
|
+
],
|
|
124
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
125
|
+
const props = __props;
|
|
126
|
+
const emit = __emit;
|
|
127
|
+
const { isReadonly, isDisabled } = useComponentStates(props);
|
|
128
|
+
const { isMobile } = useIsMobile();
|
|
129
|
+
const isOpen = ref(false);
|
|
130
|
+
const optionRef = useTemplateRef("option");
|
|
131
|
+
const inputRef = useTemplateRef("input");
|
|
132
|
+
const cursor = ref(0);
|
|
133
|
+
const isCursorLocked = ref(false);
|
|
134
|
+
const search = ref("");
|
|
135
|
+
const { isScrollSelected, takeSelected } = useScrollSelected(() => isOpen.value, () => search.value);
|
|
136
|
+
const isModelValueSearch = computed(() => !!search.value && props.modelValue?.includes(search.value));
|
|
137
|
+
const searchPrepared = computed(() => isModelValueSearch.value ? "" : search.value.trim().toLocaleLowerCase());
|
|
138
|
+
const queryEnabled = computed(() => props.lazy ? isOpen.value : true);
|
|
139
|
+
const { data, isFetching, error: queryError } = props.useQueryFnOptions ? props.useQueryFnOptions(toRef(() => props.queryParamsOptions), { enabled: queryEnabled }) : {
|
|
140
|
+
data: toRef(props, "options"),
|
|
141
|
+
isFetching: ref(false),
|
|
142
|
+
error: ref(void 0)
|
|
143
|
+
};
|
|
144
|
+
const createdOptions = ref([]);
|
|
145
|
+
const optionsPrepared = computed(() => !data.value || isFetching.value ? [] : props.filterOptions ? data.value.filter((option) => props.filterOptions?.(option) ?? true) : data.value);
|
|
146
|
+
const optionsWithCreated = computed(() => {
|
|
147
|
+
if (!props.createdData && !props.previewData) {
|
|
148
|
+
if (!createdOptions.value.length) return optionsPrepared.value;
|
|
149
|
+
else return [...optionsPrepared.value, ...createdOptions.value].filter((option, index, array) => array.findIndex((item) => props.valueGetter(item) === props.valueGetter(option)) === index);
|
|
150
|
+
}
|
|
151
|
+
return [
|
|
152
|
+
...optionsPrepared.value,
|
|
153
|
+
...props.createdData ?? [],
|
|
154
|
+
...props.previewData ?? [],
|
|
155
|
+
...createdOptions.value
|
|
156
|
+
].filter((option, index, array) => array.findIndex((item) => props.valueGetter(item) === props.valueGetter(option)) === index);
|
|
157
|
+
});
|
|
158
|
+
const optionsFiltered = computed(() => searchPrepared.value === "" ? optionsWithCreated.value : optionsWithCreated.value.filter((option) => props.searchFn(option, searchPrepared.value)));
|
|
159
|
+
const lastIndex = computed(() => props.createOption ? optionsFiltered.value.length : optionsFiltered.value.length - 1);
|
|
160
|
+
const focused = ref(false);
|
|
161
|
+
const loadingOptionIndex = ref(null);
|
|
162
|
+
const loadingCreate = ref(false);
|
|
163
|
+
const isDisabledComputed = computed(() => props.loading || isReadonly.value || isDisabled.value);
|
|
164
|
+
const hasCreateOption = computed(() => props.createOption && !isFetching.value && (!optionsFiltered.value.some((option) => props.valueGetter(option) === search.value) || isModelValueSearch.value));
|
|
165
|
+
const close = () => {
|
|
166
|
+
if (props.searchModel && focused.value && !isModelValueSearch.value) {
|
|
167
|
+
const optionExact = optionsFiltered.value.find((option) => props.valueGetter(option) === search.value);
|
|
168
|
+
if (optionExact) select(props.valueGetter(optionExact), optionExact);
|
|
169
|
+
else if (search.value && !loadingCreate.value) create(search.value);
|
|
170
|
+
else if (props.modelValue?.length) {
|
|
171
|
+
const last = props.modelValue[props.modelValue.length - 1];
|
|
172
|
+
unselect(last, optionsWithCreated.value.find((option) => props.valueGetter(option) === last));
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
isOpen.value = false;
|
|
176
|
+
focused.value = false;
|
|
177
|
+
search.value = "";
|
|
178
|
+
};
|
|
179
|
+
const setLoadingOptionIndex = (value) => {
|
|
180
|
+
if (isDisabledComputed.value) return;
|
|
181
|
+
loadingOptionIndex.value = value;
|
|
182
|
+
};
|
|
183
|
+
const unlockCursor = debounce(() => {
|
|
184
|
+
isCursorLocked.value = false;
|
|
185
|
+
}, 50);
|
|
186
|
+
const lockCursor = () => {
|
|
187
|
+
isCursorLocked.value = true;
|
|
188
|
+
unlockCursor();
|
|
189
|
+
};
|
|
190
|
+
const setCursor = (value) => {
|
|
191
|
+
if (isCursorLocked.value) return;
|
|
192
|
+
cursor.value = value;
|
|
193
|
+
};
|
|
194
|
+
const cursorUp = () => {
|
|
195
|
+
if (isDisabledComputed.value) return;
|
|
196
|
+
lockCursor();
|
|
197
|
+
cursor.value = !optionsFiltered.value.length ? 0 : cursor.value < 1 ? lastIndex.value : cursor.value - 1;
|
|
198
|
+
};
|
|
199
|
+
const cursorDown = () => {
|
|
200
|
+
if (isDisabledComputed.value) return;
|
|
201
|
+
lockCursor();
|
|
202
|
+
cursor.value = !optionsFiltered.value.length ? 0 : cursor.value >= lastIndex.value ? 0 : cursor.value + 1;
|
|
203
|
+
};
|
|
204
|
+
const selectCursor = () => {
|
|
205
|
+
if (isDisabledComputed.value) return;
|
|
206
|
+
if (cursor.value === optionsFiltered.value.length) {
|
|
207
|
+
if (search.value && props.createOption) create(search.value);
|
|
208
|
+
return;
|
|
209
|
+
}
|
|
210
|
+
const option = cursor.value !== -1 ? optionsFiltered.value[cursor.value] : void 0;
|
|
211
|
+
if (!(option ? props.valueGetter(option) : void 0)) return;
|
|
212
|
+
setLoadingOptionIndex(cursor.value);
|
|
213
|
+
optionRef.value?.forEach((item) => item?.toggleCursor());
|
|
214
|
+
};
|
|
215
|
+
const scrollToSelected = (index, scroll) => {
|
|
216
|
+
if (takeSelected(scroll) && props.cursorSelected) cursor.value = index;
|
|
217
|
+
};
|
|
218
|
+
let deletePressTimeout = null;
|
|
219
|
+
const captureDoubleDelete = () => {
|
|
220
|
+
if (!props.modelValue?.length || search.value.length) return;
|
|
221
|
+
if (deletePressTimeout) {
|
|
222
|
+
const last = props.modelValue[props.modelValue.length - 1];
|
|
223
|
+
unselect(last, optionsWithCreated.value.find((option) => props.valueGetter(option) === last));
|
|
224
|
+
clearTimeout(deletePressTimeout);
|
|
225
|
+
deletePressTimeout = null;
|
|
226
|
+
} else deletePressTimeout = setTimeout(() => {
|
|
227
|
+
deletePressTimeout = null;
|
|
228
|
+
}, 500);
|
|
229
|
+
};
|
|
230
|
+
const select = (item, data) => {
|
|
231
|
+
if (isDisabledComputed.value) return;
|
|
232
|
+
isScrollSelected.value = false;
|
|
233
|
+
emit("select", item, data);
|
|
234
|
+
search.value = "";
|
|
235
|
+
};
|
|
236
|
+
const unselect = (item, data) => {
|
|
237
|
+
if (isDisabledComputed.value) return;
|
|
238
|
+
isScrollSelected.value = false;
|
|
239
|
+
emit("unselect", item, data);
|
|
240
|
+
search.value = "";
|
|
241
|
+
const index = createdOptions.value.findIndex((option) => props.valueGetter(option) === item);
|
|
242
|
+
if (index !== -1) createdOptions.value.splice(index, 1);
|
|
243
|
+
};
|
|
244
|
+
const create = async (value) => {
|
|
245
|
+
if (isDisabledComputed.value) return;
|
|
246
|
+
if (!props.createOption) return;
|
|
247
|
+
loadingCreate.value = true;
|
|
248
|
+
const option = await props.createOption(value);
|
|
249
|
+
if (option) {
|
|
250
|
+
createdOptions.value.push(option);
|
|
251
|
+
setLoadingOptionIndex(optionsFiltered.value.length);
|
|
252
|
+
select(props.valueGetter(option), option);
|
|
253
|
+
search.value = "";
|
|
254
|
+
}
|
|
255
|
+
loadingCreate.value = false;
|
|
256
|
+
};
|
|
257
|
+
const focus = () => {
|
|
258
|
+
inputRef.value?.focus();
|
|
259
|
+
};
|
|
260
|
+
const blur = () => {
|
|
261
|
+
focused.value = false;
|
|
262
|
+
inputRef.value?.blur();
|
|
263
|
+
};
|
|
264
|
+
const closeMenu = () => {
|
|
265
|
+
inputRef.value?.close();
|
|
266
|
+
};
|
|
267
|
+
const setSearch = (value) => {
|
|
268
|
+
search.value = value;
|
|
269
|
+
};
|
|
270
|
+
watch(isModelValueSearch, async (value) => {
|
|
271
|
+
if (!value) return;
|
|
272
|
+
await nextTick();
|
|
273
|
+
const index = optionsFiltered.value.findIndex((item) => props.valueGetter(item) === search.value);
|
|
274
|
+
if (index !== -1) {
|
|
275
|
+
cursor.value = index;
|
|
276
|
+
optionRef.value?.find((item) => item?.index === index)?.scrollIntoView();
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
if (props.useQueryFnDefault) {
|
|
280
|
+
const { data: defaultData } = props.useQueryFnDefault(void 0, { enabled: computed(() => !props.disabled) });
|
|
281
|
+
watch(defaultData, (value) => {
|
|
282
|
+
if (value && props.modelValue?.length === 0) {
|
|
283
|
+
select(props.valueGetter(value), value);
|
|
284
|
+
emit("init-model");
|
|
285
|
+
}
|
|
286
|
+
}, { immediate: true });
|
|
287
|
+
}
|
|
288
|
+
if (props.useFirstDefault) watch(data, (value) => {
|
|
289
|
+
if (value && props.modelValue?.length === 0 && value[0]) {
|
|
290
|
+
select(props.valueGetter(value[0]), value[0]);
|
|
291
|
+
emit("init-model");
|
|
292
|
+
}
|
|
293
|
+
}, { immediate: true });
|
|
294
|
+
watch(() => props.modelValue, async (value, oldValue) => {
|
|
295
|
+
await nextTick();
|
|
296
|
+
if (props.seamless) inputRef.value?.scrollToInput();
|
|
297
|
+
if (!createdOptions.value.length || !oldValue || !value) return;
|
|
298
|
+
for (const valueItem of oldValue.filter((item) => !value.includes(item))) {
|
|
299
|
+
const index = createdOptions.value.findIndex((option) => props.valueGetter(option) === valueItem);
|
|
300
|
+
if (index !== -1) createdOptions.value.splice(index, 1);
|
|
301
|
+
}
|
|
302
|
+
});
|
|
303
|
+
watch(queryError, (error) => {
|
|
304
|
+
if (error instanceof ApiError && error.response?.data?.detail) emit("update:query-options-error", error.response.data.detail);
|
|
305
|
+
else emit("update:query-options-error", void 0);
|
|
306
|
+
}, { immediate: true });
|
|
307
|
+
watch(() => optionsFiltered.value.length, (length) => {
|
|
308
|
+
if (length < cursor.value) cursor.value = length;
|
|
309
|
+
});
|
|
310
|
+
__expose({
|
|
311
|
+
focus,
|
|
312
|
+
blur,
|
|
313
|
+
close: closeMenu,
|
|
314
|
+
setSearch
|
|
315
|
+
});
|
|
316
|
+
return (_ctx, _cache) => {
|
|
317
|
+
return openBlock(), createBlock(WInputSuggest_default, mergeProps({ ref: "input" }, {
|
|
318
|
+
...props,
|
|
319
|
+
modelValue: search.value,
|
|
320
|
+
placeholder: !focused.value && !__props.modelValue?.length ? __props.placeholderEmpty ?? __props.placeholder : __props.placeholder,
|
|
321
|
+
loading: __props.loading || unref(isFetching) || loadingCreate.value,
|
|
322
|
+
hideInput: !__props.modelValue?.length ? __props.hideInput && !isOpen.value : unref(isMobile) ? !focused.value : !isOpen.value,
|
|
323
|
+
filterValue: __props.filterValue === void 0 ? __props.modelValue : __props.filterValue
|
|
324
|
+
}, {
|
|
325
|
+
class: _ctx.$attrs.class,
|
|
326
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => !__props.loading && !unref(isFetching) && (search.value = $event ?? "")),
|
|
327
|
+
"onKeypress:enter": withModifiers(selectCursor, ["stop", "prevent"]),
|
|
328
|
+
"onKeypress:up": withModifiers(cursorUp, ["prevent"]),
|
|
329
|
+
"onKeypress:down": withModifiers(cursorDown, ["prevent"]),
|
|
330
|
+
"onKeypress:delete": captureDoubleDelete,
|
|
331
|
+
onOpen: _cache[3] || (_cache[3] = ($event) => isOpen.value = true),
|
|
332
|
+
onClose: close,
|
|
333
|
+
onFocus: _cache[4] || (_cache[4] = ($event) => {
|
|
334
|
+
focused.value = true;
|
|
335
|
+
_ctx.$emit("focus", $event);
|
|
336
|
+
}),
|
|
337
|
+
onBlur: _cache[5] || (_cache[5] = ($event) => {
|
|
338
|
+
focused.value = false;
|
|
339
|
+
_ctx.$emit("blur", $event);
|
|
340
|
+
})
|
|
341
|
+
}), createSlots({
|
|
342
|
+
prefix: withCtx(({ unclickable }) => [(__props.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? renderSlot(_ctx.$slots, "prefix", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.modelValue, (value, index) => {
|
|
343
|
+
return openBlock(), createBlock(SelectOptionPrefix_default, {
|
|
344
|
+
key: value,
|
|
345
|
+
option: optionsWithCreated.value.find((item) => __props.valueGetter(item) === value),
|
|
346
|
+
"option-component": __props.optionComponent,
|
|
347
|
+
"option-component-props": __props.optionComponentProps,
|
|
348
|
+
index,
|
|
349
|
+
loading: __props.loading || unref(isFetching),
|
|
350
|
+
disabled: unref(isDisabled),
|
|
351
|
+
readonly: unref(isReadonly),
|
|
352
|
+
"disable-clear": __props.disableClear || unref(isReadonly) || __props.seamless && !focused.value || __props.modelValue?.length === 0,
|
|
353
|
+
search: value,
|
|
354
|
+
class: normalizeClass({
|
|
355
|
+
"cursor-pointer": !unref(isDisabled) && !unref(isReadonly),
|
|
356
|
+
"cursor-not-allowed opacity-50": unref(isDisabled)
|
|
357
|
+
}),
|
|
358
|
+
onUnselect: ($event) => unselect(value, $event)
|
|
359
|
+
}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
|
|
360
|
+
name: "option",
|
|
361
|
+
fn: withCtx((optionScope) => [renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, optionScope, {
|
|
362
|
+
selected: true,
|
|
363
|
+
model: true,
|
|
364
|
+
index,
|
|
365
|
+
skeleton: __props.skeleton ?? false
|
|
366
|
+
}))]),
|
|
367
|
+
key: "0"
|
|
368
|
+
} : void 0]), 1032, [
|
|
369
|
+
"option",
|
|
370
|
+
"option-component",
|
|
371
|
+
"option-component-props",
|
|
372
|
+
"index",
|
|
373
|
+
"loading",
|
|
374
|
+
"disabled",
|
|
375
|
+
"readonly",
|
|
376
|
+
"disable-clear",
|
|
377
|
+
"search",
|
|
378
|
+
"class",
|
|
379
|
+
"onUnselect"
|
|
380
|
+
]);
|
|
381
|
+
}), 128))], void 0, 0) : createCommentVNode("", true)]),
|
|
382
|
+
content: withCtx(() => [createElementVNode("div", _hoisted_1, [
|
|
383
|
+
renderSlot(_ctx.$slots, "content"),
|
|
384
|
+
hasCreateOption.value ? (openBlock(), createBlock(SelectOption_default, {
|
|
385
|
+
key: 0,
|
|
386
|
+
index: optionsFiltered.value.length,
|
|
387
|
+
"is-selected": false,
|
|
388
|
+
"is-cursor": cursor.value === optionsFiltered.value.length,
|
|
389
|
+
loading: (loadingCreate.value || loadingOptionIndex.value === optionsFiltered.value.length) && __props.loading,
|
|
390
|
+
scroll: isCursorLocked.value,
|
|
391
|
+
"hide-option-icon": __props.hideOptionIcon,
|
|
392
|
+
disabled: !search.value || isModelValueSearch.value,
|
|
393
|
+
class: "first:pt---w-select-option-padding last:pb---w-select-option-padding",
|
|
394
|
+
onSelect: _cache[0] || (_cache[0] = ($event) => create(search.value)),
|
|
395
|
+
onMouseenter: _cache[1] || (_cache[1] = ($event) => setCursor(optionsFiltered.value.length))
|
|
396
|
+
}, {
|
|
397
|
+
prefix: withCtx(() => [..._cache[6] || (_cache[6] = [createElementVNode("div", { class: "w-option w-option-padding-y flex items-center self-start pr-2" }, " New: ", -1)])]),
|
|
398
|
+
default: withCtx(() => [search.value && !isModelValueSearch.value ? renderSlot(_ctx.$slots, "option", {
|
|
399
|
+
option: void 0,
|
|
400
|
+
search: search.value,
|
|
401
|
+
selected: false,
|
|
402
|
+
model: false,
|
|
403
|
+
index: void 0,
|
|
404
|
+
skeleton: false
|
|
405
|
+
}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.optionComponent), mergeProps(__props.optionComponentProps, {
|
|
406
|
+
option: null,
|
|
407
|
+
search: search.value,
|
|
408
|
+
selected: false,
|
|
409
|
+
model: false
|
|
410
|
+
}), null, 16, ["search"]))], void 0, 0) : (openBlock(), createElementBlock("div", _hoisted_2, " Start typing.. "))]),
|
|
411
|
+
_: 3
|
|
412
|
+
}, 8, [
|
|
413
|
+
"index",
|
|
414
|
+
"is-cursor",
|
|
415
|
+
"loading",
|
|
416
|
+
"scroll",
|
|
417
|
+
"hide-option-icon",
|
|
418
|
+
"disabled"
|
|
419
|
+
])) : createCommentVNode("", true),
|
|
420
|
+
unref(isFetching) || !optionsFiltered.value.length && !isModelValueSearch.value && (!__props.createOption || optionsWithCreated.value.length) ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, toDisplayString(unref(isFetching) ? "Loading.." : !search.value && __props.emptyStub ? __props.emptyStub : search.value ? "No match" : "Nothing to show"), 1)])) : createCommentVNode("", true),
|
|
421
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(optionsFiltered.value, (option, index) => {
|
|
422
|
+
return openBlock(), createBlock(SelectOption_default, {
|
|
423
|
+
key: __props.valueGetter(option),
|
|
424
|
+
ref_for: true,
|
|
425
|
+
ref: "option",
|
|
426
|
+
index,
|
|
427
|
+
"is-selected": __props.modelValue?.includes(__props.valueGetter(option)) ?? false,
|
|
428
|
+
"is-cursor": index === cursor.value,
|
|
429
|
+
loading: loadingOptionIndex.value === index && __props.loading,
|
|
430
|
+
scroll: isCursorLocked.value,
|
|
431
|
+
"scroll-selected": unref(isScrollSelected),
|
|
432
|
+
"hide-option-icon": __props.hideOptionIcon,
|
|
433
|
+
class: "first:pt---w-select-option-padding last:pb---w-select-option-padding",
|
|
434
|
+
onSelect: ($event) => {
|
|
435
|
+
select(__props.valueGetter(option), option);
|
|
436
|
+
setLoadingOptionIndex(index);
|
|
437
|
+
},
|
|
438
|
+
onUnselect: ($event) => {
|
|
439
|
+
unselect(__props.valueGetter(option), option);
|
|
440
|
+
setLoadingOptionIndex(index);
|
|
441
|
+
},
|
|
442
|
+
onMouseenter: ($event) => setCursor(index),
|
|
443
|
+
"onScroll:selected": ($event) => scrollToSelected(index, $event)
|
|
444
|
+
}, {
|
|
445
|
+
default: withCtx(({ selected }) => [renderSlot(_ctx.$slots, "option", {
|
|
446
|
+
option,
|
|
447
|
+
selected,
|
|
448
|
+
model: false,
|
|
449
|
+
index,
|
|
450
|
+
skeleton: false,
|
|
451
|
+
search: search.value
|
|
452
|
+
}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.optionComponent), mergeProps({ ref_for: true }, __props.optionComponentProps, {
|
|
453
|
+
option,
|
|
454
|
+
selected,
|
|
455
|
+
model: false
|
|
456
|
+
}), null, 16, ["option", "selected"]))])]),
|
|
457
|
+
_: 2
|
|
458
|
+
}, 1032, [
|
|
459
|
+
"index",
|
|
460
|
+
"is-selected",
|
|
461
|
+
"is-cursor",
|
|
462
|
+
"loading",
|
|
463
|
+
"scroll",
|
|
464
|
+
"scroll-selected",
|
|
465
|
+
"hide-option-icon",
|
|
466
|
+
"onSelect",
|
|
467
|
+
"onUnselect",
|
|
468
|
+
"onMouseenter",
|
|
469
|
+
"onScroll:selected"
|
|
470
|
+
]);
|
|
471
|
+
}), 128))
|
|
472
|
+
])]),
|
|
473
|
+
_: 2
|
|
474
|
+
}, [
|
|
475
|
+
_ctx.$slots.title ? {
|
|
476
|
+
name: "title",
|
|
477
|
+
fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
|
|
478
|
+
key: "0"
|
|
479
|
+
} : void 0,
|
|
480
|
+
_ctx.$slots.subtitle ? {
|
|
481
|
+
name: "subtitle",
|
|
482
|
+
fn: withCtx(() => [renderSlot(_ctx.$slots, "subtitle")]),
|
|
483
|
+
key: "1"
|
|
484
|
+
} : void 0,
|
|
485
|
+
_ctx.$slots.right ? {
|
|
486
|
+
name: "right",
|
|
487
|
+
fn: withCtx(() => [renderSlot(_ctx.$slots, "right")]),
|
|
488
|
+
key: "2"
|
|
489
|
+
} : void 0
|
|
490
|
+
]), 1040, ["class"]);
|
|
491
|
+
};
|
|
492
|
+
}
|
|
493
|
+
});
|
|
494
|
+
//#endregion
|
|
495
|
+
export { SelectBase_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { SelectDeferredProps, SelectOptionComponent, SelectOptionProps } from '../types';
|
|
2
|
+
declare const __VLS_export: <Model extends number | string, Data extends DefaultData, OptionComponent extends SelectOptionComponent<Data>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<SelectDeferredProps<Model, Data, OptionComponent> & {
|
|
4
|
+
onActivate?: (() => any) | undefined;
|
|
5
|
+
}> & (typeof globalThis extends {
|
|
6
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
7
|
+
} ? P : {});
|
|
8
|
+
expose: (exposed: {}) => void;
|
|
9
|
+
attrs: any;
|
|
10
|
+
slots: {
|
|
11
|
+
option?: (props: PartialNot<SelectOptionProps<Data>>) => void;
|
|
12
|
+
/** Replaces the chips, for a select that renders them on its own. */
|
|
13
|
+
chips?: (props: {
|
|
14
|
+
readonly: boolean;
|
|
15
|
+
disabled: boolean | undefined;
|
|
16
|
+
}) => void;
|
|
17
|
+
};
|
|
18
|
+
emit: (e: "activate") => void;
|
|
19
|
+
}>) => import('vue').VNode & {
|
|
20
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
21
|
+
};
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
|
24
|
+
type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
25
|
+
[K in keyof T]: T[K];
|
|
26
|
+
} : {
|
|
27
|
+
[K in keyof T as K]: T[K];
|
|
28
|
+
}) & {};
|
|
29
|
+
//# sourceMappingURL=SelectDeferred.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectDeferred.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectDeferred.vue"],"names":[],"mappings":"AAgKA;AAiNA,OAAO,KAAK,EAAC,mBAAmB,EAAE,qBAAqB,EAAE,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAU3F,QAAA,MAAM,YAAY,GAAK,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EAClI,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA+dO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;;KAAmC,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;iBA/cA,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;QAC7D,qEAAqE;gBAC7D,CAAC,KAAK,EAAE;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAA;SAAC,KAAK,IAAI;;cAPvE,UAAU,KAAG,IAAI;EAwdnB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import SelectDeferred_vue_vue_type_script_setup_true_lang_default from "./SelectDeferred.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region src/components/Select/components/SelectDeferred.vue
|
|
3
|
+
var SelectDeferred_default = SelectDeferred_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { SelectDeferred_default as default };
|