eco-vue-js 0.7.3 → 0.8.1

package/dist/components/Notify/components/NotifyCard.vue.d.ts

@@ -1,46 +1,20 @@
 import { NotifyType } from '../models/NotifyType';
 import { LinkProps } from '../../../types/types';
-
-interface Props extends LinkProps {
+interface Props extends Partial<LinkProps> {
     title: string;
     caption?: string;
     userInput?: string;
     type: NotifyType;
     count: number;
 }
-declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    caption: undefined;
-    userInput: undefined;
-    to: undefined;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "click:close": () => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    caption: undefined;
-    userInput: undefined;
-    to: undefined;
-}>>> & {
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "click:close": () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     "onClick:close"?: (() => any) | undefined;
-}, {
+}>, {
     caption: string;
     to: import('vue-router').RouterLinkProps["to"];
     userInput: string;
-}, {}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 //# sourceMappingURL=NotifyCard.vue.d.ts.map

package/dist/components/Notify/components/NotifyCard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotifyCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Notify/components/NotifyCard.vue"],"names":[],"mappings":"AA6HA,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAA;AAS/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAI5C,UAAU,KAAM,SAAQ,SAAS;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;;;;;;;;;;;;;;aAJW,MAAM;;eACJ,MAAM;;AA+QpB,wBAOG;AAOH,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAC7C,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KAAC,CAAC,GACvC,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAEN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC;AAExD,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"NotifyCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Notify/components/NotifyCard.vue"],"names":[],"mappings":"AA6HA,OAAO,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAA;AAS/C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,eAAe,CAAA;AAI5C,UAAU,KAAM,SAAQ,OAAO,CAAC,SAAS,CAAC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd;;;;;;aAJW,MAAM;;eACJ,MAAM;;AAmPpB,wBAUG"}

package/dist/components/Notify/models/types.d.ts

@@ -1,6 +1,5 @@
 import { LinkProps } from '../../../types/types';
 import { NotifyType } from './NotifyType';
-
 export interface NotifyConfig extends Partial<LinkProps> {
     title: string;
     caption?: string;

package/dist/components/Select/WSelect.vue.d.ts

@@ -1,31 +1,29 @@
 import { SelectProps, SelectOptionComponent } from './types';
-
-declare const _default: <Option extends string | number, OptionComponent extends SelectOptionComponent<Option>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
-        onFocus?: ((value: FocusEvent) => any) | undefined;
+declare const _default: <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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSelect?: ((item: Model) => any) | undefined;
+        readonly onBlur?: ((value: FocusEvent) => any) | undefined;
+        readonly onFocus?: ((value: FocusEvent) => any) | undefined;
+        readonly onUnselect?: ((item: Model) => any) | undefined;
+        readonly "onCreate:option"?: ((value: string) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
+        onSelect?: ((item: Model) => any) | undefined;
         onBlur?: ((value: FocusEvent) => any) | undefined;
-        onSelect?: ((item: Option) => any) | undefined;
-        onUnselect?: ((item: Option) => any) | undefined;
-        "onUpdate:search"?: ((value: string) => any) | undefined;
-        "onCreate:option"?: ((value: string) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
         onFocus?: ((value: FocusEvent) => any) | undefined;
-        onBlur?: ((value: FocusEvent) => any) | undefined;
-        onSelect?: ((item: Option) => any) | undefined;
-        onUnselect?: ((item: Option) => any) | undefined;
-        "onUpdate:search"?: ((value: string) => any) | undefined;
+        onUnselect?: ((item: Model) => any) | undefined;
         "onCreate:option"?: ((value: string) => any) | undefined;
-    }, never>, "onFocus" | "onBlur" | "onSelect" | "onUnselect" | "onUpdate:search" | "onCreate:option"> & SelectProps<Option, OptionComponent>> & import('vue').PublicProps;
+    }>, never>, "onFocus" | "onBlur" | "onSelect" | "onUnselect" | "onCreate:option"> & SelectProps<Model, Data, OptionComponent>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         focus: () => void;
         blur: () => void;
     }>): void;
     attrs: any;
-    slots: ReturnType<() => Readonly<{
+    slots: Readonly<{
         title?: () => void;
         subtitle?: () => void;
         option?: (props: {
-            option: Option | string;
+            option: Data | string;
+            index?: number;
             selected: boolean;
             model: boolean;
         }) => void;
@@ -34,27 +32,27 @@ declare const _default: <Option extends string | number, OptionComponent extends
         title?: () => void;
         subtitle?: () => void;
         option?: (props: {
-            option: Option | string;
+            option: Data | string;
+            index?: number;
             selected: boolean;
             model: boolean;
         }) => void;
         right?: () => void;
-    }>;
+    };
     emit: {
-        (e: "select", item: Option): void;
-        (e: "unselect", item: Option): void;
-        (e: "update:search", value: string): void;
+        (e: "select", item: Model): void;
+        (e: "unselect", item: Model): void;
         (e: "create:option", value: string): void;
         (e: "focus", value: FocusEvent): void;
         (e: "blur", value: FocusEvent): void;
-    } & {};
+    };
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
-type __VLS_Prettify<T> = {
+type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
 //# sourceMappingURL=WSelect.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"WSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Select/WSelect.vue"],"names":[],"mappings":"AAgUA,OAAO,KAAK,EAAC,WAAW,EAAE,qBAAqB,EAA6B,MAAM,SAAS,CAAA;yBAG1E,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,eAAe,SAAS,qBAAqB,CAAC,MAAM,CAAC,eACxF,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBACvF,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0lBxD,cAAc,CAAC;;;;;;;;;;;;;;+IAAyD,CAAC,4BAA2B;oBAC3F,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,GAAG,IAAI;WACpE,GAAG;WACH,UAAU;gBAjcV,MAAM,IAAI;mBACP,MAAM,IAAI;iBACZ,CAAC,KAAK,EAAE;YACf,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;YACvB,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;gBACF,MAAM,IAAI;;gBAPV,MAAM,IAAI;mBACP,MAAM,IAAI;iBACZ,CAAC,KAAK,EAAE;YACf,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;YACvB,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;gBACF,MAAM,IAAI;MA0buB;UAClC;YArlBH,QAAQ,QAAQ,MAAM,GAAG,IAAI;YAC7B,UAAU,QAAQ,MAAM,GAAG,IAAI;YAC/B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;UAglBK;;;;YAGC,OAAO,CAAC,OAAO,WAAW,CAAC;;AApmBvE,wBAomB4E;AAM5E,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Select/WSelect.vue"],"names":[],"mappings":"AAgVA,OAAO,KAAK,EAAC,WAAW,EAAE,qBAAqB,EAA6B,MAAM,SAAS,CAAA;yBAG1E,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,eAC/G,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA0lBxD,mBAAmB,CAAC;;;;;;;;;;;;iIAAyD,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;gBApbH,MAAM,IAAI;mBACP,MAAM,IAAI;iBACZ,CAAC,KAAK,EAAE;YACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;YACrB,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;gBACF,MAAM,IAAI;;gBARV,MAAM,IAAI;mBACP,MAAM,IAAI;iBACZ,CAAC,KAAK,EAAE;YACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;YACrB,KAAK,CAAC,EAAE,MAAM,CAAA;YACd,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;gBACF,MAAM,IAAI;;;YAvKd,QAAQ,QAAQ,KAAK,GAAG,IAAI;YAC5B,UAAU,QAAQ,KAAK,GAAG,IAAI;YAC9B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;;YAolBM,OAAO,CAAC,OAAO,WAAW,CAAC;;AApmBvE,wBAomB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/Select/WSelect.vue.js

@@ -10,14 +10,14 @@ const _hoisted_1 = {
   class: "py-2 px-[1.0625rem] first:pt-4 last:pb-4"
 };
 const _hoisted_2 = { class: "select-none cursor-default w-select-field sm-not:px-3" };
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "w-select-field pr-2 sm-not:px-3" }, " Create: ", -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "WSelect",
   props: {
     modelValue: {},
-    search: {},
-    options: {},
+    useQueryFnOptions: {},
+    valueGetter: { type: Function },
+    searchFn: { type: Function },
     emptyStub: {},
     disableClear: { type: Boolean },
     hidePrefix: { type: Boolean },
@@ -62,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     optionComponent: {},
     optionComponentProps: {}
   },
-  emits: ["select", "unselect", "update:search", "create:option", "focus", "blur"],
+  emits: ["select", "unselect", "create:option", "focus", "blur"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -70,11 +70,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const input = ref();
     const cursor = ref(-1);
     const isCursorLocked = ref(false);
-    const lastIndex = computed(() => props.allowCreate ? props.options.length : props.options.length - 1);
+    const search = ref("");
+    const { data, isLoading } = props.useQueryFnOptions();
+    const filteredOptions = computed(() => !data.value ? [] : search.value === "" ? data.value : data.value.filter((option) => props.searchFn(option, search.value)));
+    const lastIndex = computed(() => props.allowCreate ? filteredOptions.value.length : filteredOptions.value.length - 1);
     const isMobile = getIsMobile();
     const focused = ref(false);
     const loadingOptionIndex = ref(null);
     const isDisabled = computed(() => props.loading || props.readonly || props.disabled);
+    const prefixList = computed(() => props.modelValue.map((value) => data.value?.find((item) => props.valueGetter(item) === value)).filter((item) => item !== void 0));
     const close = () => {
       isOpen.value = false;
       focused.value = false;
@@ -97,27 +101,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const cursorUp = () => {
       if (isDisabled.value) return;
       lockCursor();
-      cursor.value = !props.options.length ? 0 : cursor.value < 1 ? lastIndex.value : cursor.value - 1;
+      cursor.value = !filteredOptions.value.length ? 0 : cursor.value < 1 ? lastIndex.value : cursor.value - 1;
     };
     const cursorDown = () => {
       if (isDisabled.value) return;
       lockCursor();
-      cursor.value = !props.options.length ? 0 : cursor.value >= lastIndex.value ? 0 : cursor.value + 1;
+      cursor.value = !filteredOptions.value.length ? 0 : cursor.value >= lastIndex.value ? 0 : cursor.value + 1;
     };
     const selectCursor = () => {
       if (isDisabled.value) return;
-      const value = cursor.value !== -1 ? props.options[cursor.value] : void 0;
+      const value = cursor.value !== -1 ? props.valueGetter(filteredOptions.value[cursor.value]) : void 0;
       if (value) {
         setLoadingOptionIndex(cursor.value);
         if (props.modelValue.includes(value)) unselect(value);
         else select(value);
       } else {
-        if (props.search) createOption(props.search);
+        if (search.value) createOption(search.value);
       }
     };
     let deletePressTimeout = null;
     const captureDoubleDelete = () => {
-      if (!props.modelValue.length || props.search.length) return;
+      if (!props.modelValue.length || search.value.length) return;
       if (deletePressTimeout) {
         unselect(props.modelValue[props.modelValue.length - 1]);
         clearTimeout(deletePressTimeout);
@@ -131,16 +135,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const select = (item) => {
       if (isDisabled.value) return;
       emit("select", item);
+      search.value = "";
     };
     const unselect = (item) => {
       if (isDisabled.value) return;
       emit("unselect", item);
+      search.value = "";
     };
     const createOption = (item) => {
       if (isDisabled.value) return;
       if (!props.allowCreate) return;
-      setLoadingOptionIndex(props.options.length);
+      setLoadingOptionIndex(filteredOptions.value.length);
       emit("create:option", item);
+      search.value = "";
     };
     const focus = () => {
       input.value?.focus();
@@ -162,11 +169,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: input
       }, {
         ...props,
-        modelValue: _ctx.search,
-        hideInput: _ctx.modelValue.length === 0 ? false : unref(isMobile) ? !focused.value : !isOpen.value
+        modelValue: search.value,
+        hideInput: _ctx.modelValue.length === 0 ? false : unref(isMobile) ? !focused.value : !isOpen.value,
+        loading: _ctx.loading || unref(isLoading)
       }, {
         class: _ctx.$attrs.class,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => !_ctx.loading && _ctx.$emit("update:search", $event ?? "")),
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => !_ctx.loading && !unref(isLoading) && (search.value = $event ?? "")),
         "onKeypress:enter": withModifiers(selectCursor, ["stop", "prevent"]),
         "onKeypress:up": withModifiers(cursorUp, ["prevent"]),
         "onKeypress:down": withModifiers(cursorDown, ["prevent"]),
@@ -174,7 +182,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onOpen: _cache[3] || (_cache[3] = ($event) => isOpen.value = true),
         onClose: _cache[4] || (_cache[4] = ($event) => {
           close();
-          _ctx.$emit("update:search", "");
+          search.value = "";
         }),
         onFocus: _cache[5] || (_cache[5] = ($event) => {
           focused.value = true;
@@ -186,47 +194,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         })
       }), createSlots({
         prefix: withCtx(({ unclickable }) => [
-          (_ctx.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.modelValue, (option) => {
+          (_ctx.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(prefixList.value, (option, index) => {
             return openBlock(), createBlock(_sfc_main$2, {
-              key: option,
+              key: _ctx.valueGetter(option),
               option,
               "option-component": _ctx.optionComponent,
               "option-component-props": _ctx.optionComponentProps,
-              loading: _ctx.loading,
+              index,
+              loading: _ctx.loading || unref(isLoading),
               disabled: _ctx.disabled,
               "disable-clear": _ctx.disableClear,
-              onUnselect: ($event) => unselect(option)
+              onUnselect: ($event) => unselect(_ctx.valueGetter(option))
             }, {
               option: withCtx(() => [
                 renderSlot(_ctx.$slots, "option", {
                   option,
                   selected: true,
-                  model: true
+                  model: true,
+                  index
                 })
               ]),
               _: 2
-            }, 1032, ["option", "option-component", "option-component-props", "loading", "disabled", "disable-clear", "onUnselect"]);
+            }, 1032, ["option", "option-component", "option-component-props", "index", "loading", "disabled", "disable-clear", "onUnselect"]);
           }), 128)) : createCommentVNode("", true)
         ]),
         content: withCtx(() => [
-          !_ctx.options.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          !filteredOptions.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
             createElementVNode("div", _hoisted_2, toDisplayString(_ctx.emptyStub ?? "No match"), 1)
           ])) : createCommentVNode("", true),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option, index) => {
             return openBlock(), createBlock(_sfc_main$3, {
-              key: option,
-              "is-selected": _ctx.modelValue.includes(option),
+              key: _ctx.valueGetter(option),
+              "is-selected": _ctx.modelValue.includes(_ctx.valueGetter(option)),
               "is-cursor": index === cursor.value,
               loading: loadingOptionIndex.value === index && _ctx.loading,
               scroll: isCursorLocked.value,
               "hide-option-icon": _ctx.hideOptionIcon,
               class: "first:pt-4 last:pb-4",
               onSelect: ($event) => {
-                select(option);
+                select(_ctx.valueGetter(option));
                 setLoadingOptionIndex(index);
               },
               onUnselect: ($event) => {
-                unselect(option);
+                unselect(_ctx.valueGetter(option));
                 setLoadingOptionIndex(index);
               },
               onMouseenter: ($event) => setCursor(index)
@@ -237,7 +247,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   selected,
                   model: false
                 }, () => [
-                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps(_ctx.optionComponentProps, {
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps({ ref_for: true }, _ctx.optionComponentProps, {
                     option,
                     selected,
                     model: false
@@ -247,28 +257,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 2
             }, 1032, ["is-selected", "is-cursor", "loading", "scroll", "hide-option-icon", "onSelect", "onUnselect", "onMouseenter"]);
           }), 128)),
-          _ctx.allowCreate && _ctx.search !== "" ? (openBlock(), createBlock(_sfc_main$3, {
+          _ctx.allowCreate && search.value !== "" ? (openBlock(), createBlock(_sfc_main$3, {
             key: 1,
             "is-selected": false,
-            "is-cursor": cursor.value === _ctx.options.length,
-            loading: loadingOptionIndex.value === _ctx.options.length && _ctx.loading,
+            "is-cursor": cursor.value === filteredOptions.value.length,
+            loading: loadingOptionIndex.value === filteredOptions.value.length && _ctx.loading,
             scroll: isCursorLocked.value,
             "hide-option-icon": _ctx.hideOptionIcon,
             class: "first:pt-4 last:pb-4",
-            onSelect: _cache[0] || (_cache[0] = ($event) => createOption(_ctx.search)),
-            onMouseenter: _cache[1] || (_cache[1] = ($event) => setCursor(_ctx.options.length))
+            onSelect: _cache[0] || (_cache[0] = ($event) => createOption(search.value)),
+            onMouseenter: _cache[1] || (_cache[1] = ($event) => setCursor(filteredOptions.value.length))
           }, {
-            prefix: withCtx(() => [
-              _hoisted_3
-            ]),
+            prefix: withCtx(() => _cache[7] || (_cache[7] = [
+              createElementVNode("span", { class: "w-select-field pr-2 sm-not:px-3" }, " Create: ", -1)
+            ])),
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "option", {
-                option: _ctx.search,
+                option: search.value,
                 selected: false,
                 model: false
               }, () => [
                 (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), mergeProps(_ctx.optionComponentProps, {
-                  option: _ctx.search,
+                  option: search.value,
                   selected: false,
                   model: false
                 }), null, 16, ["option"]))

package/dist/components/Select/WSelectAsync.vue.d.ts

@@ -1,30 +1,28 @@
 import { SelectAsyncProps, SelectOptionComponent } from './types';
-
-declare const _default: <Model extends number | string, Data extends DefaultData, ApiError, QueryParams, OptionComponent extends SelectOptionComponent<Data>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
+declare const _default: <Model extends number | string, Data extends DefaultData, QueryParams, 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_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSelect?: ((item: Model) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: Model[]) => any) | undefined;
+        readonly onUnselect?: ((item: Model) => any) | undefined;
+        readonly "onCreate:option"?: ((value: string) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
         onSelect?: ((item: Model) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Model[]) => any) | undefined;
         onUnselect?: ((item: Model) => any) | undefined;
-        "onUpdate:search"?: ((value: string) => any) | undefined;
         "onCreate:option"?: ((value: string) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
-        onSelect?: ((item: Model) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: Model[]) => any) | undefined;
-        onUnselect?: ((item: Model) => any) | undefined;
-        "onUpdate:search"?: ((value: string) => any) | undefined;
-        "onCreate:option"?: ((value: string) => any) | undefined;
-    }, never>, "onSelect" | "onUpdate:modelValue" | "onUnselect" | "onUpdate:search" | "onCreate:option"> & SelectAsyncProps<Model, Data, ApiError, QueryParams, OptionComponent>> & import('vue').PublicProps;
+    }>, never>, "onSelect" | "onUpdate:modelValue" | "onUnselect" | "onCreate:option"> & SelectAsyncProps<Model, Data, QueryParams, OptionComponent>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         focus: () => void;
         blur: () => void;
     }>): void;
     attrs: any;
-    slots: ReturnType<() => Readonly<{
+    slots: Readonly<{
         title?: () => void;
         subtitle?: () => void;
         right?: (props: Record<string, never>) => void;
         option?: (props: {
             option: Data | null;
+            index?: number;
             selected: boolean;
             skeleton: boolean;
             model: boolean;
@@ -35,25 +33,25 @@ declare const _default: <Model extends number | string, Data extends DefaultData
         right?: (props: Record<string, never>) => void;
         option?: (props: {
             option: Data | null;
+            index?: number;
             selected: boolean;
             skeleton: boolean;
             model: boolean;
         }) => void;
-    }>;
+    };
     emit: {
         (e: "select", item: Model): void;
         (e: "unselect", item: Model): void;
-        (e: "update:search", value: string): void;
         (e: "update:modelValue", value: Model[]): void;
         (e: "create:option", value: string): void;
-    } & {};
+    };
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }> & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;
-type __VLS_Prettify<T> = {
+type __VLS_PrettifyLocal<T> = {
     [K in keyof T]: T[K];
 } & {};
 //# sourceMappingURL=WSelectAsync.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"WSelectAsync.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Select/WSelectAsync.vue"],"names":[],"mappings":"AAwOA,OAAO,KAAK,EAAC,gBAAgB,EAAE,qBAAqB,EAA6B,MAAM,SAAS,CAAA;yBAG/E,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,eACtI,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBACvF,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA+fxD,cAAc,CAAC;;;;;;;;;;;;iLAAyD,CAAC,4BAA2B;oBAC3F,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,GAAG,IAAI;WACpE,GAAG;WACH,UAAU;gBA5ZV,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE;YAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAC,KAAK,IAAI;;gBAH7F,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE;YAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAC,KAAK,IAAI;MAyZ5D;UAClC;YAnfH,QAAQ,QAAQ,KAAK,GAAG,IAAI;YAC5B,UAAU,QAAQ,KAAK,GAAG,IAAI;YAC9B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,mBAAmB,SAAS,KAAK,EAAE,GAAG,IAAI;YAC1C,eAAe,SAAS,MAAM,GAAG,IAAI;UA+eA;;;;YAGC,OAAO,CAAC,OAAO,WAAW,CAAC;;AAzgBvE,wBAygB4E;AAY5E,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"WSelectAsync.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Select/WSelectAsync.vue"],"names":[],"mappings":"AAiPA,OAAO,KAAK,EAAC,gBAAgB,EAAE,qBAAqB,EAA6B,MAAM,SAAS,CAAA;yBAG/E,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,WAAW,EAAE,eAAe,SAAS,qBAAqB,CAAC,IAAI,CAAC,eAC5H,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,cAClD,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,iBAC5F,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;WA8fxD,mBAAmB,CAAC;;;;;;;;;;oJAAyD,CAAC,4BAA2B;oBAChG,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,GAAG,IAAI;WACpE,GAAG;;gBAlZH,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE;YAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAC,KAAK,IAAI;;gBAH7G,MAAM,IAAI;mBACP,MAAM,IAAI;gBACb,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI;iBACrC,CAAC,KAAK,EAAE;YAAC,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,QAAQ,EAAE,OAAO,CAAC;YAAC,KAAK,EAAE,OAAO,CAAA;SAAC,KAAK,IAAI;;;YAjGjH,QAAQ,QAAQ,KAAK,GAAG,IAAI;YAC5B,UAAU,QAAQ,KAAK,GAAG,IAAI;YAC9B,mBAAmB,SAAS,KAAK,EAAE,GAAG,IAAI;YAC1C,eAAe,SAAS,MAAM,GAAG,IAAI;;;;;YAkfC,OAAO,CAAC,OAAO,WAAW,CAAC;;AAxgBvE,wBAwgB4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

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

@@ -8,17 +8,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "WSelectAsync",
   props: {
-    useQueryFn: {},
+    useQueryFnOptions: {},
     useQueryFnPrefix: {},
     isInvalidPage: {},
     queryParams: {},
     previewData: {},
     createdData: {},
-    valueGetter: { type: Function, default: (data) => data.id },
     valueQueryKey: { default: "id__in" },
     queryOptions: {},
     modelValue: {},
-    search: {},
+    valueGetter: { type: Function, default: (data) => data.id },
     emptyStub: { default: "No match" },
     disableClear: { type: Boolean },
     hidePrefix: { type: Boolean },
@@ -63,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     optionComponent: {},
     optionComponentProps: {}
   },
-  emits: ["select", "unselect", "update:search", "update:modelValue", "create:option"],
+  emits: ["select", "unselect", "update:modelValue", "create:option"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -73,6 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isMobile = getIsMobile();
     const focused = ref(false);
     const isFetchingPrefix = ref(false);
+    const search = ref("");
     const isDisabled = computed(() => props.loading || props.readonly || props.disabled);
     const close = () => {
       isOpen.value = false;
@@ -80,7 +80,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     let deletePressTimeout = null;
     const captureDoubleDelete = () => {
-      if (!props.modelValue.length || props.search.length) return;
+      if (!props.modelValue.length || search.value.length) return;
       if (deletePressTimeout) {
         unselect(props.modelValue[props.modelValue.length - 1]);
         clearTimeout(deletePressTimeout);
@@ -94,18 +94,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const select = (item) => {
       if (isDisabled.value) return;
       emit("select", item);
+      search.value = "";
     };
     const unselect = (item) => {
       if (isDisabled.value) return;
       emit("unselect", item);
+      search.value = "";
     };
     const create = () => {
       if (isDisabled.value) return;
-      emit("create:option", props.search);
+      emit("create:option", search.value);
+      search.value = "";
     };
     const updateSelected = (value) => {
       if (isDisabled.value) return;
       emit("update:modelValue", value);
+      search.value = "";
     };
     const focus = () => {
       input.value?.focus();
@@ -127,12 +131,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: input
       }, {
         ...props,
-        modelValue: _ctx.search,
+        modelValue: search.value,
         loading: _ctx.loading || isFetchingPrefix.value,
         hideInput: unref(isMobile) ? !focused.value : !isOpen.value
       }, {
         class: _ctx.$attrs.class,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => !_ctx.loading && !isFetchingPrefix.value && _ctx.$emit("update:search", $event ?? "")),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => !_ctx.loading && !isFetchingPrefix.value && (search.value = $event ?? "")),
         "onKeypress:enter": _cache[2] || (_cache[2] = withModifiers(($event) => list.value?.selectCursor(), ["stop", "prevent"])),
         "onKeypress:up": _cache[3] || (_cache[3] = withModifiers(($event) => list.value?.cursorUp(), ["prevent"])),
         "onKeypress:down": _cache[4] || (_cache[4] = withModifiers(($event) => list.value?.cursorDown(), ["prevent"])),
@@ -140,7 +144,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onOpen: _cache[5] || (_cache[5] = ($event) => isOpen.value = true),
         onClose: _cache[6] || (_cache[6] = ($event) => {
           close();
-          _ctx.$emit("update:search", "");
+          search.value = "";
         }),
         onFocus: _cache[7] || (_cache[7] = ($event) => focused.value = true),
         onBlur: _cache[8] || (_cache[8] = ($event) => focused.value = false)
@@ -148,7 +152,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         prefix: withCtx(({ unclickable }) => [
           (_ctx.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? (openBlock(), createBlock(_sfc_main$2, {
             key: 0,
-            "use-query-fn": _ctx.useQueryFnPrefix ?? _ctx.useQueryFn,
+            "use-query-fn": _ctx.useQueryFnPrefix ?? _ctx.useQueryFnOptions,
             "model-value": _ctx.modelValue,
             disabled: _ctx.disabled,
             loading: _ctx.loading || isFetchingPrefix.value,
@@ -166,9 +170,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }),
             "onUpdate:modelValue": updateSelected
           }, {
-            default: withCtx(({ option, skeleton: skeletonPrefix }) => [
+            default: withCtx(({ option, skeleton: skeletonPrefix, index }) => [
               renderSlot(_ctx.$slots, "option", {
                 option,
+                index,
                 selected: true,
                 model: true,
                 skeleton: skeletonPrefix
@@ -182,13 +187,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "list",
             ref: list,
             "model-value": _ctx.modelValue,
-            "use-query-fn": _ctx.useQueryFn,
-            "query-params": _ctx.queryParams,
+            "use-query-fn": _ctx.useQueryFnOptions,
+            "query-params": { ..._ctx.queryParams, search: search.value },
             "is-invalid-page": _ctx.isInvalidPage,
             loading: _ctx.loading || isFetchingPrefix.value,
             disabled: isDisabled.value,
             "empty-stub": _ctx.emptyStub,
-            "allow-create": _ctx.allowCreate && _ctx.search !== "",
+            "allow-create": _ctx.allowCreate && search.value !== "",
             "hide-option-icon": _ctx.hideOptionIcon,
             "value-getter": _ctx.valueGetter,
             "query-options": _ctx.queryOptions,
@@ -209,7 +214,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   selected,
                   skeleton: skeletonList,
                   model: false,
-                  search: _ctx.search
+                  search: search.value
                 }), null, 16, ["option", "selected", "skeleton", "search"]))
               ])
             ]),