eco-vue-js 0.26.19 → 0.26.21

package/dist/components/Select/WSelectAsync.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,8 @@
-import { useIsMobile } from "../../utils/mobile.js";
-import { useComponentStates } from "../../utils/useComponentStates.js";
-import WInputSuggest_default from "../Input/WInputSuggest.vue.js";
-import SelectAsyncList_default from "./components/SelectAsyncList.vue.js";
-import "../../utils/useDefaultQuery.js";
+import { getDefinedProps, useDeferred } from "./models/useDeferred.js";
+import SelectDeferred_default from "./components/SelectDeferred.vue.js";
 import SelectAsyncPrefix_default from "./components/SelectAsyncPrefix.vue.js";
-import { computed, createBlock, createCommentVNode, createSlots, defineComponent, effectScope, guardReactiveProps, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, resolveDynamicComponent, shallowRef, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
-import { keepPreviousData, useQueryClient } from "@tanstack/vue-query";
+import SelectAsyncBase_default from "./components/SelectAsyncBase.vue.js";
+import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
 //#region src/components/Select/WSelectAsync.vue?vue&type=script&setup=true&lang.ts
 var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
@@ -15,16 +12,16 @@ var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		useQueryFnPrefix: {},
 		queryParamsOptions: {},
 		searchField: {},
+		valueGetter: {
+			type: Function,
+			default: (data) => data.id
+		},
 		previewData: {},
 		valueQueryKey: { default: "id__in" },
 		prefixText: {},
 		prefixMax: { default: 8 },
 		reverse: { type: Boolean },
 		modelValue: {},
-		valueGetter: {
-			type: Function,
-			default: (data) => data.id
-		},
 		useQueryFnDefault: {},
 		emptyStub: { default: "No match" },
 		disableClear: { type: Boolean },
@@ -36,6 +33,7 @@ var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		lazy: { type: Boolean },
 		placeholderEmpty: {},
 		cursorSelected: { type: Boolean },
+		deferred: { type: Boolean },
 		mobileTitle: {},
 		persist: { type: Boolean },
 		closeOnClear: { type: Boolean },
@@ -114,181 +112,65 @@ var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		"focus",
 		"blur"
 	],
-	setup(__props, { expose: __expose, emit: __emit }) {
+	setup(__props, { expose: __expose }) {
 		const props = __props;
-		const emit = __emit;
-		const { isReadonly, isDisabled } = useComponentStates(props);
-		const { isMobile } = useIsMobile();
-		const isOpen = ref(false);
-		const inputRef = useTemplateRef("input");
-		const listRef = useTemplateRef("list");
-		const focused = ref(false);
-		const isFetchingPrefix = ref(false);
-		const search = ref("");
-		const loadingCreate = ref(false);
-		const knownData = /* @__PURE__ */ new Map();
-		const queryFnKeys = /* @__PURE__ */ new WeakMap();
-		let queryFnKeyLast = 0;
-		const getQueryFnKey = (useQueryFn) => {
-			if (!queryFnKeys.has(useQueryFn)) queryFnKeys.set(useQueryFn, ++queryFnKeyLast);
-			return queryFnKeys.get(useQueryFn);
-		};
-		const isDisabledComputed = computed(() => props.loading || isReadonly.value || isDisabled.value);
-		const isModelValueSearch = computed(() => !!search.value && props.modelValue?.includes(search.value));
-		const queryParams = computed(() => ({
-			...props.queryParamsOptions,
-			[props.searchField ?? "search"]: search.value
-		}));
-		const queryParamsFirstPage = computed(() => ({
-			...queryParams.value,
-			size: 24,
-			page: 1
-		}));
-		const queryEnabled = computed(() => props.lazy ? isOpen.value : true);
-		const queryClient = useQueryClient();
-		const firstPageData = shallowRef();
-		watch(() => props.useQueryFnOptions, (useQueryFn, _, onCleanup) => {
-			const scope = effectScope();
-			scope.run(() => {
-				const { data } = useQueryFn(queryParamsFirstPage, { enabled: queryEnabled }, queryClient);
-				watch(data, (value) => firstPageData.value = value, { immediate: true });
-			});
-			onCleanup(() => scope.stop());
-		}, { immediate: true });
-		const hasSearchOption = computed(() => {
-			if (props.createdData?.some((option) => props.valueGetter(option) === search.value)) return true;
-			return firstPageData.value?.results.some((option) => props.valueGetter(option) === search.value);
-		});
-		const close = () => {
-			isOpen.value = false;
-			focused.value = false;
-			if (props.searchModel && search.value && !isModelValueSearch.value) {
-				const optionExact = firstPageData.value?.results.find((option) => props.valueGetter(option) === search.value);
-				if (optionExact) select(props.valueGetter(optionExact), optionExact);
-				else if (search.value) create(search.value);
-				else if (props.modelValue?.length) {
-					const last = props.modelValue[props.modelValue.length - 1];
-					unselect(last, firstPageData.value?.results.find((option) => props.valueGetter(option) === last));
-				}
-			}
-			search.value = "";
+		const selectComponentRef = useTemplateRef("selectComponent");
+		const { isDeferred, deferredField, activate, focus } = useDeferred(props, () => selectComponentRef.value?.focus());
+		const getOption = (value) => {
+			return [...props.createdData ?? [], ...props.previewData ?? []].find((option) => props.valueGetter(option) === value);
 		};
-		let deletePressTimeout = null;
-		const captureDoubleDelete = () => {
-			if (!props.modelValue?.length || search.value.length) return;
-			if (deletePressTimeout) {
-				const last = props.modelValue[props.modelValue.length - 1];
-				unselect(last, firstPageData.value?.results.find((option) => props.valueGetter(option) === last));
-				clearTimeout(deletePressTimeout);
-				deletePressTimeout = null;
-			} else deletePressTimeout = setTimeout(() => {
-				deletePressTimeout = null;
-			}, 500);
-		};
-		const select = (item, data) => {
-			if (isDisabledComputed.value) return;
-			knownData.set(String(item), data);
-			emit("select", item, data);
-			search.value = "";
-		};
-		const unselect = (item, data) => {
-			if (isDisabledComputed.value) return;
-			emit("unselect", item, data);
-			search.value = "";
-		};
-		const create = async (value) => {
-			if (isDisabledComputed.value) return;
-			if (!props.createOption) return;
-			loadingCreate.value = true;
-			const option = await props.createOption(value);
-			if (option) {
-				select(props.valueGetter(option), option);
-				search.value = "";
-			}
-			loadingCreate.value = false;
-		};
-		const updateSelected = (value) => {
-			if (isDisabledComputed.value) return;
-			emit("update:model-value", value);
-			search.value = "";
-		};
-		const focus = () => {
-			inputRef.value?.focus();
-		};
-		const blur = () => {
-			inputRef.value?.blur();
-		};
-		const closeMenu = () => {
-			inputRef.value?.close();
-		};
-		const setSearch = (value) => {
-			search.value = value;
-		};
-		if (props.useQueryFnDefault) {
-			const { data: defaultData } = props.useQueryFnDefault(void 0, { enabled: computed(() => !props.disabled) });
-			watch(defaultData, (value) => {
-				if (value && props.modelValue?.length === 0) {
-					select(props.valueGetter(value), value);
-					emit("init-model");
-				}
-			}, { immediate: true });
-		}
-		watch(() => props.modelValue, async () => {
-			await nextTick();
-			if (props.seamless) inputRef.value?.scrollToInput();
+		const hasPreview = computed(() => {
+			if (!props.modelValue?.length) return true;
+			return props.modelValue.length <= props.prefixMax && props.modelValue.every((value) => getOption(value) !== void 0);
 		});
+		const knownData = /* @__PURE__ */ new Map();
 		__expose({
 			focus,
-			blur,
-			close: closeMenu,
-			setSearch
+			blur: () => selectComponentRef.value?.blur(),
+			close: () => selectComponentRef.value?.close(),
+			setSearch: (value) => selectComponentRef.value?.setSearch(value)
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(WInputSuggest_default, mergeProps({ ref: "input" }, {
-				...props,
-				modelValue: search.value,
-				placeholder: !focused.value && !__props.modelValue?.length ? __props.placeholderEmpty ?? __props.placeholder : __props.placeholder,
-				loading: __props.loading || isFetchingPrefix.value || loadingCreate.value,
-				hideInput: !__props.modelValue?.length ? __props.hideInput && !isOpen.value : unref(isMobile) ? !focused.value : !isOpen.value,
-				filterValue: __props.filterValue === void 0 ? __props.modelValue : __props.filterValue
-			}, {
-				class: _ctx.$attrs.class,
-				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => !__props.loading && !isFetchingPrefix.value && (search.value = $event ?? "")),
-				"onKeypress:enter": _cache[3] || (_cache[3] = withModifiers(($event) => listRef.value?.selectCursor(), ["stop", "prevent"])),
-				"onKeypress:up": _cache[4] || (_cache[4] = withModifiers(($event) => listRef.value?.cursorUp(), ["prevent"])),
-				"onKeypress:down": _cache[5] || (_cache[5] = withModifiers(($event) => listRef.value?.cursorDown(), ["prevent"])),
-				"onKeypress:delete": captureDoubleDelete,
-				onOpen: _cache[6] || (_cache[6] = ($event) => isOpen.value = true),
-				onClose: close,
-				onFocus: _cache[7] || (_cache[7] = ($event) => {
-					focused.value = true;
-					_ctx.$emit("focus", $event);
-				}),
-				onBlur: _cache[8] || (_cache[8] = ($event) => {
-					focused.value = false;
-					_ctx.$emit("blur", $event);
-				})
-			}), createSlots({
-				prefix: withCtx(({ unclickable }) => [(__props.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? renderSlot(_ctx.$slots, "prefix", normalizeProps(guardReactiveProps({ modelValue: __props.modelValue ?? [] })), () => [(openBlock(), createBlock(SelectAsyncPrefix_default, {
-					key: getQueryFnKey(__props.useQueryFnPrefix ?? __props.useQueryFnOptions),
+			return unref(isDeferred) ? (openBlock(), createBlock(SelectDeferred_default, {
+				key: 0,
+				"model-value": __props.modelValue ?? [],
+				"get-option": getOption,
+				field: unref(deferredField),
+				"option-component": __props.optionComponent,
+				"option-component-props": __props.optionComponentProps,
+				placeholder: __props.placeholder,
+				"placeholder-empty": __props.placeholderEmpty,
+				name: __props.name,
+				size: __props.size,
+				"no-wrap": __props.noWrap,
+				"border-class": __props.borderClass,
+				"hide-input": __props.hideInput,
+				loading: __props.loading,
+				class: normalizeClass(_ctx.$attrs.class),
+				onActivate: unref(activate)
+			}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+				name: "option",
+				fn: withCtx((scope) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(scope)))]),
+				key: "0"
+			} : void 0, _ctx.$slots.prefix || !hasPreview.value ? {
+				name: "chips",
+				fn: withCtx(({ readonly: readonlyChips, disabled: disabledChips }) => [_ctx.$slots.prefix ? renderSlot(_ctx.$slots, "prefix", { modelValue: __props.modelValue ?? [] }, void 0, void 0, 0) : (openBlock(), createBlock(SelectAsyncPrefix_default, {
+					key: 1,
 					"use-query-fn": __props.useQueryFnPrefix ?? __props.useQueryFnOptions,
 					"model-value": __props.modelValue ?? [],
-					disabled: unref(isDisabled),
-					loading: __props.loading || isFetchingPrefix.value,
+					disabled: disabledChips,
+					loading: __props.loading,
 					"option-component": __props.optionComponent,
 					"option-component-props": __props.optionComponentProps,
-					"disable-clear": __props.disableClear || unref(isReadonly) || __props.seamless && !focused.value || __props.modelValue?.length === 0,
+					"disable-clear": true,
 					"preview-data": __props.previewData,
 					"created-data": __props.createdData,
 					"value-getter": __props.valueGetter,
 					"value-query-key": __props.valueQueryKey,
-					readonly: unref(isReadonly),
+					readonly: readonlyChips,
 					"prefix-text": __props.prefixText,
 					"prefix-max": __props.prefixMax,
-					"known-data": unref(knownData),
-					onUnselect: unselect,
-					"onUpdate:fetching": _cache[0] || (_cache[0] = ($event) => isFetchingPrefix.value = $event),
-					"onUpdate:modelValue": updateSelected
+					"known-data": unref(knownData)
 				}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
 					name: "option",
 					fn: withCtx(({ option, index, skeleton: skeletonOption }) => [renderSlot(_ctx.$slots, "option", {
@@ -307,7 +189,6 @@ var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					"loading",
 					"option-component",
 					"option-component-props",
-					"disable-clear",
 					"preview-data",
 					"created-data",
 					"value-getter",
@@ -316,72 +197,35 @@ var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					"prefix-text",
 					"prefix-max",
 					"known-data"
-				]))], void 0, 0) : createCommentVNode("", true)]),
-				content: withCtx(() => [(openBlock(), createBlock(SelectAsyncList_default, {
-					key: getQueryFnKey(__props.useQueryFnOptions),
-					ref: "list",
-					"model-value": __props.modelValue ?? [],
-					"use-query-fn": __props.useQueryFnOptions,
-					"query-params": queryParams.value,
-					loading: __props.loading || isFetchingPrefix.value,
-					disabled: isDisabledComputed.value,
-					"empty-stub": !search.value && __props.emptyStub ? __props.emptyStub : void 0,
-					"allow-create": __props.createOption && (!hasSearchOption.value || isModelValueSearch.value),
-					"hide-option-icon": __props.hideOptionIcon,
-					"value-getter": __props.valueGetter,
-					"loading-create": loadingCreate.value,
-					"query-options": { placeholderData: unref(keepPreviousData) },
-					search: search.value,
-					reverse: __props.reverse,
-					"scroll-selected": isOpen.value,
-					"cursor-selected": __props.cursorSelected,
-					onSelect: select,
-					onUnselect: unselect,
-					"onCreate:option": _cache[1] || (_cache[1] = ($event) => create(search.value))
-				}, createSlots({
-					default: withCtx(({ option, selected, skeleton: skeletonList, index }) => [renderSlot(_ctx.$slots, "option", {
-						option,
-						selected,
-						skeleton: skeletonList,
-						model: false,
-						search: search.value,
-						index
-					}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.optionComponent), mergeProps(__props.optionComponentProps, {
-						option,
-						selected,
-						skeleton: skeletonList,
-						model: false,
-						search: search.value
-					}), null, 16, [
-						"option",
-						"selected",
-						"skeleton",
-						"search"
-					]))])]),
-					_: 2
-				}, [_ctx.$slots.content ? {
-					name: "content",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
-					key: "0"
-				} : void 0]), 1032, [
-					"model-value",
-					"use-query-fn",
-					"query-params",
-					"loading",
-					"disabled",
-					"empty-stub",
-					"allow-create",
-					"hide-option-icon",
-					"value-getter",
-					"loading-create",
-					"query-options",
-					"search",
-					"reverse",
-					"scroll-selected",
-					"cursor-selected"
 				]))]),
-				_: 2
-			}, [
+				key: "1"
+			} : void 0]), 1032, [
+				"model-value",
+				"field",
+				"option-component",
+				"option-component-props",
+				"placeholder",
+				"placeholder-empty",
+				"name",
+				"size",
+				"no-wrap",
+				"border-class",
+				"hide-input",
+				"loading",
+				"class",
+				"onActivate"
+			])) : (openBlock(), createBlock(SelectAsyncBase_default, mergeProps({
+				key: 1,
+				ref: "selectComponent"
+			}, unref(getDefinedProps)(props), {
+				class: _ctx.$attrs.class,
+				onSelect: _cache[0] || (_cache[0] = (value, data) => _ctx.$emit("select", value, data)),
+				onUnselect: _cache[1] || (_cache[1] = (value, data) => _ctx.$emit("unselect", value, data)),
+				"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:model-value", $event)),
+				onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("focus", $event)),
+				onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("blur", $event)),
+				onInitModel: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("init-model"))
+			}), createSlots({ _: 2 }, [
 				_ctx.$slots.title ? {
 					name: "title",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "title")]),
@@ -392,12 +236,27 @@ var WSelectAsync_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "subtitle")]),
 					key: "1"
 				} : void 0,
+				_ctx.$slots.option ? {
+					name: "option",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(scope)))]),
+					key: "2"
+				} : void 0,
 				_ctx.$slots.right ? {
 					name: "right",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "right")]),
-					key: "2"
+					key: "3"
+				} : void 0,
+				_ctx.$slots.content ? {
+					name: "content",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
+					key: "4"
+				} : void 0,
+				_ctx.$slots.prefix ? {
+					name: "prefix",
+					fn: withCtx((scope) => [renderSlot(_ctx.$slots, "prefix", normalizeProps(guardReactiveProps(scope)))]),
+					key: "5"
 				} : void 0
-			]), 1040, ["class"]);
+			]), 1040, ["class"]));
 		};
 	}
 });

package/dist/components/Select/WSelectAsyncSingle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WSelectAsyncSingle.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelectAsyncSingle.vue"],"names":[],"mappings":"AAkEA;AAoJA,OAAO,KAAK,EAAC,sBAAsB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAU/G,QAAA,MAAM,YAAY,GAAK,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,SAAS,OAAO,GAAG,KAAK,EAAE,UAAU,SAAS,gBAAgB,GAAG,IAAI,EAC/N,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;WAmPO,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,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;QA3LT,iCAAiC;gBACzB,MAAM,IAAI;QAClB,+CAA+C;mBACpC,MAAM,IAAI;QACrB,yCAAyC;gBACjC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;QAC9C,0HAA0H;iBACjH,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;QAC7D,yDAAyD;kBAC/C,MAAM,IAAI;QACpB,mCAAmC;iBAC1B,MAAM,IAAI;;;YApDf,oBAAoB,qEAAyB,IAAI,GAAG,SAAS,GAAG,IAAI;YAEpE,YAAY,GAAG,IAAI;YAEnB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAE7C,MAAM,SAAS,UAAU,GAAG,IAAI;;EAkOlC,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"}
+{"version":3,"file":"WSelectAsyncSingle.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelectAsyncSingle.vue"],"names":[],"mappings":"AA4IA;AA2OA,OAAO,KAAK,EAAC,sBAAsB,EAAE,gBAAgB,EAAE,qBAAqB,EAA8B,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAY3I,QAAA,MAAM,YAAY,GAAK,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,SAAS,OAAO,GAAG,KAAK,EAAE,UAAU,SAAS,gBAAgB,GAAG,IAAI,EAC/N,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+YO,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,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;QA5UT,iCAAiC;gBACzB,MAAM,IAAI;QAClB,+CAA+C;mBACpC,MAAM,IAAI;QACrB,yCAAyC;gBACjC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;QAC9C,0HAA0H;iBACjH,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;QAC7D,yDAAyD;kBAC/C,MAAM,IAAI;QACpB,mCAAmC;iBAC1B,MAAM,IAAI;;;YA5Df,oBAAoB,qEAAyB,IAAI,GAAG,SAAS,GAAG,IAAI;YAEpE,YAAY,GAAG,IAAI;YAEnB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAE7C,MAAM,SAAS,UAAU,GAAG,IAAI;;EA2XlC,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"}

package/dist/components/Select/WSelectAsyncSingle.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,10 @@
 import { useClearValue } from "../../utils/useClearValue.js";
+import { useDeferred } from "./models/useDeferred.js";
 import { useCloseOnPick } from "./models/useCloseOnPick.js";
-import WSelectAsync_default from "./WSelectAsync.vue.js";
-import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toRef, unref, useTemplateRef, watch, withCtx } from "vue";
+import SelectDeferred_default from "./components/SelectDeferred.vue.js";
+import SelectAsyncPrefix_default from "./components/SelectAsyncPrefix.vue.js";
+import SelectAsyncBase_default from "./components/SelectAsyncBase.vue.js";
+import { computed, createBlock, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toRef, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region src/components/Select/WSelectAsyncSingle.vue?vue&type=script&setup=true&lang.ts
 var WSelectAsyncSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
@@ -16,11 +19,14 @@ var WSelectAsyncSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		useQueryFnPrefix: {},
 		queryParamsOptions: {},
 		searchField: {},
-		valueQueryKey: {},
+		valueGetter: {
+			type: Function,
+			default: (data) => data.id
+		},
+		valueQueryKey: { default: "id__in" },
 		prefixText: {},
-		prefixMax: {},
+		prefixMax: { default: 8 },
 		reverse: { type: Boolean },
-		valueGetter: {},
 		useQueryFnDefault: {},
 		emptyStub: {},
 		hidePrefix: { type: Boolean },
@@ -29,6 +35,7 @@ var WSelectAsyncSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		searchModel: { type: Boolean },
 		lazy: { type: Boolean },
 		placeholderEmpty: {},
+		deferred: { type: Boolean },
 		mobileTitle: {},
 		persist: { type: Boolean },
 		closeOnClear: { type: Boolean },
@@ -111,6 +118,12 @@ var WSelectAsyncSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const selectComponentRef = useTemplateRef("selectComponent");
 		const getClearValue = useClearValue(props);
 		const arrayValue = computed(() => props.modelValue ? [props.modelValue] : []);
+		const { isDeferred, deferredField, activate, focus } = useDeferred(props, () => selectComponentRef.value?.focus());
+		const getOption = (value) => {
+			return [props.createdData, props.previewData].find((option) => option !== void 0 && props.valueGetter(option) === value);
+		};
+		const hasPreview = computed(() => arrayValue.value.every((value) => getOption(value) !== void 0));
+		const knownData = /* @__PURE__ */ new Map();
 		const closeOnPick = useCloseOnPick(() => props.embedded ?? false, () => selectComponentRef.value?.close());
 		const updateModelValue = (value, data) => {
 			emit("update:model-value", value, data);
@@ -119,16 +132,99 @@ var WSelectAsyncSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 		const blur = () => {
 			selectComponentRef.value?.blur();
 		};
-		const focus = () => {
-			selectComponentRef.value?.focus();
-		};
 		watch(toRef(props, "modelValue"), blur);
 		__expose({
 			blur,
 			focus
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(WSelectAsync_default, mergeProps({ ref: "selectComponent" }, {
+			return unref(isDeferred) ? (openBlock(), createBlock(SelectDeferred_default, {
+				key: 0,
+				"model-value": arrayValue.value,
+				"get-option": getOption,
+				field: unref(deferredField),
+				"option-component": __props.optionComponent,
+				"option-component-props": __props.optionComponentProps,
+				placeholder: __props.placeholder,
+				"placeholder-empty": __props.placeholderEmpty,
+				name: __props.name,
+				size: __props.size,
+				"no-wrap": __props.noWrap,
+				"border-class": __props.borderClass,
+				"hide-input": __props.hideInput,
+				loading: __props.loading,
+				class: normalizeClass(_ctx.$attrs.class),
+				onActivate: unref(activate)
+			}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+				name: "option",
+				fn: withCtx((scope) => [renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps(scope)))]),
+				key: "0"
+			} : void 0, _ctx.$slots.prefix || !hasPreview.value ? {
+				name: "chips",
+				fn: withCtx(({ readonly: readonlyChips, disabled: disabledChips }) => [_ctx.$slots.prefix ? renderSlot(_ctx.$slots, "prefix", {}, void 0, void 0, 0) : (openBlock(), createBlock(SelectAsyncPrefix_default, {
+					key: 1,
+					"use-query-fn": __props.useQueryFnPrefix ?? __props.useQueryFnOptions,
+					"model-value": arrayValue.value,
+					disabled: disabledChips,
+					loading: __props.loading,
+					"option-component": __props.optionComponent,
+					"option-component-props": __props.optionComponentProps,
+					"disable-clear": true,
+					"preview-data": __props.previewData === void 0 ? void 0 : [__props.previewData],
+					"created-data": __props.createdData === void 0 ? void 0 : [__props.createdData],
+					"value-getter": __props.valueGetter,
+					"value-query-key": __props.valueQueryKey,
+					readonly: readonlyChips,
+					"prefix-text": __props.prefixText,
+					"prefix-max": __props.prefixMax,
+					"known-data": unref(knownData)
+				}, createSlots({ _: 2 }, [_ctx.$slots.option ? {
+					name: "option",
+					fn: withCtx(({ option, index, skeleton: skeletonOption }) => [renderSlot(_ctx.$slots, "option", {
+						option,
+						index,
+						selected: true,
+						model: true,
+						skeleton: skeletonOption,
+						search: void 0
+					})]),
+					key: "0"
+				} : void 0]), 1032, [
+					"use-query-fn",
+					"model-value",
+					"disabled",
+					"loading",
+					"option-component",
+					"option-component-props",
+					"preview-data",
+					"created-data",
+					"value-getter",
+					"value-query-key",
+					"readonly",
+					"prefix-text",
+					"prefix-max",
+					"known-data"
+				]))]),
+				key: "1"
+			} : void 0]), 1032, [
+				"model-value",
+				"field",
+				"option-component",
+				"option-component-props",
+				"placeholder",
+				"placeholder-empty",
+				"name",
+				"size",
+				"no-wrap",
+				"border-class",
+				"hide-input",
+				"loading",
+				"class",
+				"onActivate"
+			])) : (openBlock(), createBlock(SelectAsyncBase_default, mergeProps({
+				key: 1,
+				ref: "selectComponent"
+			}, {
 				...props,
 				modelValue: arrayValue.value,
 				disableClear: !__props.allowClear,
@@ -178,7 +274,7 @@ var WSelectAsyncSingle_vue_vue_type_script_setup_true_lang_default = /*@__PURE__
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "prefix")]),
 					key: "5"
 				} : void 0
-			]), 1040, ["class"]);
+			]), 1040, ["class"]));
 		};
 	}
 });

package/dist/components/Select/WSelectSingle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WSelectSingle.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelectSingle.vue"],"names":[],"mappings":"AAkEA;AAuJA,OAAO,KAAK,EAAC,gBAAgB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAE1G,OAAO,EAAC,KAAK,KAAK,EAAyC,MAAM,KAAK,CAAA;AAQtE,QAAA,MAAM,YAAY,GAAK,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,kBAAkB,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,SAAS,OAAO,GAAG,KAAK,EAAE,UAAU,SAAS,gBAAgB,GAAG,IAAI,EACtO,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;WA8PO,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,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;QAnMT,iCAAiC;gBACzB,MAAM,KAAK,EAAE;QACrB,+CAA+C;mBACpC,MAAM,KAAK,EAAE;QACxB,yCAAyC;gBACjC,MAAM,KAAK,EAAE;QACrB,mCAAmC;iBAC1B,MAAM,KAAK,EAAE;QACtB,0HAA0H;iBACjH,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,EAAE;QAChE,yDAAyD;kBAC/C,MAAM,KAAK,EAAE;;;YAvDnB,oBAAoB,qEAAyB,IAAI,GAAG,SAAS,GAAG,IAAI;YAEpE,4BAA4B,SAAS,MAAM,GAAG,SAAS,GAAG,IAAI;YAE9D,YAAY,GAAG,IAAI;YAEnB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAE7C,MAAM,SAAS,UAAU,GAAG,IAAI;;EA2OlC,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"}
+{"version":3,"file":"WSelectSingle.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelectSingle.vue"],"names":[],"mappings":"AAuGA;AAgMA,OAAO,KAAK,EAAC,gBAAgB,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAE1G,OAAO,EAAC,KAAK,KAAK,EAAyC,MAAM,KAAK,CAAA;AAStE,QAAA,MAAM,YAAY,GAAK,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,kBAAkB,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,EAAE,UAAU,SAAS,OAAO,GAAG,KAAK,EAAE,UAAU,SAAS,gBAAgB,GAAG,IAAI,EACtO,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;WAmVO,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,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;QArRT,iCAAiC;gBACzB,MAAM,KAAK,EAAE;QACrB,+CAA+C;mBACpC,MAAM,KAAK,EAAE;QACxB,yCAAyC;gBACjC,MAAM,KAAK,EAAE;QACrB,mCAAmC;iBAC1B,MAAM,KAAK,EAAE;QACtB,0HAA0H;iBACjH,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,EAAE;QAChE,yDAAyD;kBAC/C,MAAM,KAAK,EAAE;;;YA1DnB,oBAAoB,qEAAyB,IAAI,GAAG,SAAS,GAAG,IAAI;YAEpE,4BAA4B,SAAS,MAAM,GAAG,SAAS,GAAG,IAAI;YAE9D,YAAY,GAAG,IAAI;YAEnB,OAAO,SAAS,UAAU,GAAG,SAAS,GAAG,IAAI;YAE7C,MAAM,SAAS,UAAU,GAAG,IAAI;;EAgUlC,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"}