eco-vue-js 0.5.17 → 0.5.19

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

@@ -38,13 +38,20 @@ declare const _default: <Item extends string | number = string>(__VLS_props: {
     allowCreate?: boolean | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
-    slots: {
-        option?(_: {
-            option: string;
+    slots: Readonly<{
+        option?: ((props: {
+            option: Item | string;
             selected: boolean;
             model: boolean;
-        }): any;
-        right?(_: {}): any;
+        }) => void) | undefined;
+        right?: (() => void) | undefined;
+    }> & {
+        option?: ((props: {
+            option: Item | string;
+            selected: boolean;
+            model: boolean;
+        }) => void) | undefined;
+        right?: (() => void) | undefined;
     };
     emit: {
         (e: 'select', item: Item): void;
@@ -101,13 +108,20 @@ declare const _default: <Item extends string | number = string>(__VLS_props: {
         blur: () => void;
     }>): void;
     attrs: any;
-    slots: {
-        option?(_: {
-            option: string;
+    slots: Readonly<{
+        option?: ((props: {
+            option: Item | string;
+            selected: boolean;
+            model: boolean;
+        }) => void) | undefined;
+        right?: (() => void) | undefined;
+    }> & {
+        option?: ((props: {
+            option: Item | string;
             selected: boolean;
             model: boolean;
-        }): any;
-        right?(_: {}): any;
+        }) => void) | undefined;
+        right?: (() => void) | undefined;
     };
     emit: {
         (e: 'select', item: Item): void;
@@ -164,13 +178,20 @@ declare const _default: <Item extends string | number = string>(__VLS_props: {
             blur: () => void;
         }>): void;
         attrs: any;
-        slots: {
-            option?(_: {
-                option: string;
+        slots: Readonly<{
+            option?: ((props: {
+                option: Item | string;
+                selected: boolean;
+                model: boolean;
+            }) => void) | undefined;
+            right?: (() => void) | undefined;
+        }> & {
+            option?: ((props: {
+                option: Item | string;
                 selected: boolean;
                 model: boolean;
-            }): any;
-            right?(_: {}): any;
+            }) => void) | undefined;
+            right?: (() => void) | undefined;
         };
         emit: {
             (e: 'select', item: Item): void;

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":"AA2KA;AAEA,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,KAAK,CAAA;;;YA2nB/D,MAAM;;;;;;;;gBADF,IAAI,EAAE;;;;;;;;;;;;;;;aAET,IAAI,EAAE;;;gBAOsB,IAAI;;;;;;;;;;WAwBpC,GAAG;;;;;;YAtEoB,GAAG;uBACL,GAAG;;;YA1iBzB,QAAQ,QAAQ,IAAI,GAAG,IAAI;YAC3B,UAAU,QAAQ,IAAI,GAAG,IAAI;YAC7B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;;OAymBiC,IAAI;;;gBA/BjE,MAAM;;;;;;;;oBADF,IAAI,EAAE;;;;;;;;;;;;;;;iBAET,IAAI,EAAE;;;oBAOsB,IAAI;;;;;;;;;;;;;SAuB4B,IAAI;WACpE,GAAG;;;;;;YAtEoB,GAAG;uBACL,GAAG;;;YA1iBzB,QAAQ,QAAQ,IAAI,GAAG,IAAI;YAC3B,UAAU,QAAQ,IAAI,GAAG,IAAI;YAC7B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;;;;;oBA0kB5B,MAAM;;;;;;;;wBADF,IAAI,EAAE;;;;;;;;;;;;;;;qBAET,IAAI,EAAE;;;wBAOsB,IAAI;;;;;;;;;;;;;aAuB4B,IAAI;eACpE,GAAG;;;;;;gBAtEoB,GAAG;2BACL,GAAG;;;gBA1iBzB,QAAQ,QAAQ,IAAI,GAAG,IAAI;gBAC3B,UAAU,QAAQ,IAAI,GAAG,IAAI;gBAC7B,eAAe,SAAS,MAAM,GAAG,IAAI;gBACrC,eAAe,SAAS,MAAM,GAAG,IAAI;gBACrC,OAAO,SAAS,UAAU,GAAG,IAAI;gBACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;AAzCtC,wBAwpB2E"}
+{"version":3,"file":"WSelect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Select/WSelect.vue"],"names":[],"mappings":"AAyIA;AAEA,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,KAAK,CAAA;;;YAyiB/D,MAAM;;;;;;;;gBADF,IAAI,EAAE;;;;;;;;;;;;;;;aAET,IAAI,EAAE;;;gBAOsB,IAAI;;;;;;;;;;WAwBpC,GAAG;;0BA1YS;YACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;YACrB,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;uBACI,IAAI;;0BALD;YACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;YACrB,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;uBACI,IAAI;;;YAxJd,QAAQ,QAAQ,IAAI,GAAG,IAAI;YAC3B,UAAU,QAAQ,IAAI,GAAG,IAAI;YAC7B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;;OAuhBiC,IAAI;;;gBA/BjE,MAAM;;;;;;;;oBADF,IAAI,EAAE;;;;;;;;;;;;;;;iBAET,IAAI,EAAE;;;oBAOsB,IAAI;;;;;;;;;;;;;SAuB4B,IAAI;WACpE,GAAG;;0BA1YS;YACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;YACrB,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;uBACI,IAAI;;0BALD;YACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;YACrB,QAAQ,EAAE,OAAO,CAAA;YACjB,KAAK,EAAE,OAAO,CAAA;SACf,KAAK,IAAI;uBACI,IAAI;;;YAxJd,QAAQ,QAAQ,IAAI,GAAG,IAAI;YAC3B,UAAU,QAAQ,IAAI,GAAG,IAAI;YAC7B,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,OAAO,SAAS,UAAU,GAAG,IAAI;YACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;;;;;oBAwf5B,MAAM;;;;;;;;wBADF,IAAI,EAAE;;;;;;;;;;;;;;;qBAET,IAAI,EAAE;;;wBAOsB,IAAI;;;;;;;;;;;;;aAuB4B,IAAI;eACpE,GAAG;;8BA1YS;gBACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;gBACrB,QAAQ,EAAE,OAAO,CAAA;gBACjB,KAAK,EAAE,OAAO,CAAA;aACf,KAAK,IAAI;2BACI,IAAI;;8BALD;gBACf,MAAM,EAAE,IAAI,GAAG,MAAM,CAAA;gBACrB,QAAQ,EAAE,OAAO,CAAA;gBACjB,KAAK,EAAE,OAAO,CAAA;aACf,KAAK,IAAI;2BACI,IAAI;;;gBAxJd,QAAQ,QAAQ,IAAI,GAAG,IAAI;gBAC3B,UAAU,QAAQ,IAAI,GAAG,IAAI;gBAC7B,eAAe,SAAS,MAAM,GAAG,IAAI;gBACrC,eAAe,SAAS,MAAM,GAAG,IAAI;gBACrC,OAAO,SAAS,UAAU,GAAG,IAAI;gBACjC,MAAM,SAAS,UAAU,GAAG,IAAI;;;;AAzCtC,wBAskB2E"}

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

@@ -1,18 +1,16 @@
-import { defineComponent, ref, computed, watch, toRef, nextTick, openBlock, createBlock, unref, withModifiers, createSlots, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, resolveDynamicComponent, createVNode, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
-import _sfc_main$2 from './components/SelectOption.vue.js';
-import IconCancel from '../../assets/icons/default/IconCancel.svg.js';
+import { defineComponent, ref, computed, watch, toRef, nextTick, openBlock, createBlock, unref, withModifiers, createSlots, withCtx, createElementBlock, Fragment, renderList, renderSlot, createCommentVNode, createElementVNode, toDisplayString, resolveDynamicComponent } from 'vue';
+import _sfc_main$3 from './components/SelectOption.vue.js';
+import _sfc_main$2 from './components/SelectOptionPrefix.vue.js';
 import { getIsMobile } from '../../utils/mobile.js';
 import { debounce } from '../../utils/utils.js';
 import _sfc_main$1 from '../Input/WInputSuggest.vue.js';
 
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = {
+const _hoisted_1 = {
   key: 0,
   class: "py-2 px-[1.0625rem] first:pt-4 last:pb-4"
 };
-const _hoisted_4 = { class: "select-none cursor-default w-select-field sm-not:px-3" };
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "w-select-field pr-2 sm-not:px-3" }, " Create: ", -1);
+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({
   __name: "WSelect",
   props: {
@@ -173,85 +171,53 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         icon: _ctx.icon,
         mono: _ctx.mono,
         autofocus: _ctx.autofocus,
-        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => !_ctx.loading && _ctx.$emit("update:search", $event ?? "")),
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => !_ctx.loading && _ctx.$emit("update:search", $event ?? "")),
         "onKeypress:enter": withModifiers(selectCursor, ["stop", "prevent"]),
         "onKeypress:up": withModifiers(cursorUp, ["prevent"]),
         "onKeypress:down": withModifiers(cursorDown, ["prevent"]),
         "onKeypress:delete": captureDoubleDelete,
-        onOpen: _cache[5] || (_cache[5] = ($event) => isOpen.value = true),
-        onClose: _cache[6] || (_cache[6] = ($event) => {
+        onOpen: _cache[3] || (_cache[3] = ($event) => isOpen.value = true),
+        onClose: _cache[4] || (_cache[4] = ($event) => {
           close();
           _ctx.$emit("update:search", "");
         }),
-        onFocus: _cache[7] || (_cache[7] = ($event) => {
+        onFocus: _cache[5] || (_cache[5] = ($event) => {
           focused.value = true;
           _ctx.$emit("focus", $event);
         }),
-        onBlur: _cache[8] || (_cache[8] = ($event) => {
+        onBlur: _cache[6] || (_cache[6] = ($event) => {
           focused.value = false;
           _ctx.$emit("blur", $event);
         })
       }, createSlots({
         prefix: withCtx(({ unclickable }) => [
           (_ctx.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.modelValue, (option) => {
-            return openBlock(), createElementBlock("div", {
+            return openBlock(), createBlock(_sfc_main$2, {
               key: option,
-              class: normalizeClass(["relative flex overflow-hidden items-center text-description group/model", {
-                "cursor-pointer": !_ctx.disabled,
-                "cursor-not-allowed opacity-50": _ctx.disabled
-              }])
-            }, [
-              renderSlot(_ctx.$slots, "option", {
-                option,
-                selected: true,
-                model: true
-              }, () => [
-                _ctx.optionComponent ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), {
-                  key: 0,
+              option,
+              "option-component": _ctx.optionComponent,
+              loading: _ctx.loading,
+              disabled: _ctx.disabled,
+              "disable-clear": _ctx.disableClear,
+              onUnselect: ($event) => unselect(option)
+            }, {
+              option: withCtx(() => [
+                renderSlot(_ctx.$slots, "option", {
                   option,
                   selected: true,
                   model: true
-                }, {
-                  default: withCtx(() => [
-                    !_ctx.disableClear ? (openBlock(), createElementBlock("button", {
-                      key: 0,
-                      class: normalizeClass(["relative flex square-5 rounded-full -my-1 -mr-2 ml-1 items-center justify-center outline-none", {
-                        "cursor-not-allowed": _ctx.disabled,
-                        "cursor-progress": _ctx.loading,
-                        "cursor-pointer w-ripple w-ripple-hover ": !_ctx.loading && !_ctx.disabled
-                      }]),
-                      onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
-                      }, ["stop", "prevent"])),
-                      onClick: withModifiers(($event) => !_ctx.loading && unselect(option), ["stop", "prevent"])
-                    }, [
-                      createVNode(unref(IconCancel), { class: "square-3" })
-                    ], 42, _hoisted_1)) : createCommentVNode("", true)
-                  ]),
-                  _: 2
-                }, 1032, ["option"])) : createCommentVNode("", true)
+                })
               ]),
-              !_ctx.optionComponent && !_ctx.disableClear ? (openBlock(), createElementBlock("button", {
-                key: 0,
-                class: normalizeClass(["relative flex square-5 rounded-full items-center justify-center outline-none", {
-                  "cursor-not-allowed": _ctx.disabled,
-                  "cursor-progress": _ctx.loading,
-                  "cursor-pointer w-ripple w-ripple-hover ": !_ctx.loading && !_ctx.disabled
-                }]),
-                onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
-                }, ["stop", "prevent"])),
-                onClick: withModifiers(($event) => !_ctx.loading && unselect(option), ["stop", "prevent"])
-              }, [
-                createVNode(unref(IconCancel), { class: "square-3" })
-              ], 42, _hoisted_2)) : createCommentVNode("", true)
-            ], 2);
+              _: 2
+            }, 1032, ["option", "option-component", "loading", "disabled", "disable-clear", "onUnselect"]);
           }), 128)) : createCommentVNode("", true)
         ]),
         content: withCtx(() => [
-          !_ctx.options.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            createElementVNode("div", _hoisted_4, toDisplayString(_ctx.emptyStub ?? "No match"), 1)
+          !_ctx.options.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) => {
-            return openBlock(), createBlock(_sfc_main$2, {
+            return openBlock(), createBlock(_sfc_main$3, {
               key: option,
               "is-selected": _ctx.modelValue.includes(option),
               "is-cursor": index === cursor.value,
@@ -285,7 +251,7 @@ 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$2, {
+          _ctx.allowCreate && _ctx.search !== "" ? (openBlock(), createBlock(_sfc_main$3, {
             key: 1,
             "is-selected": false,
             "is-cursor": cursor.value === _ctx.options.length,
@@ -293,11 +259,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             scroll: isCursorLocked.value,
             "hide-option-icon": _ctx.hideOptionIcon,
             class: "first:pt-4 last:pb-4",
-            onSelect: _cache[2] || (_cache[2] = ($event) => createOption(_ctx.search)),
-            onMouseenter: _cache[3] || (_cache[3] = ($event) => setCursor(_ctx.options.length))
+            onSelect: _cache[0] || (_cache[0] = ($event) => createOption(_ctx.search)),
+            onMouseenter: _cache[1] || (_cache[1] = ($event) => setCursor(_ctx.options.length))
           }, {
             default: withCtx(() => [
-              _hoisted_5,
+              _hoisted_3,
               renderSlot(_ctx.$slots, "option", {
                 option: _ctx.search,
                 selected: false,

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

@@ -37,7 +37,7 @@ declare const _default: <Item extends string | number, AllowClear extends boolea
     attrs: any;
     slots: {
         option?(_: {
-            option: string;
+            option: string | Item;
             selected: boolean;
             model: boolean;
         }): any;
@@ -92,7 +92,7 @@ declare const _default: <Item extends string | number, AllowClear extends boolea
     attrs: any;
     slots: {
         option?(_: {
-            option: string;
+            option: string | Item;
             selected: boolean;
             model: boolean;
         }): any;
@@ -148,7 +148,7 @@ declare const _default: <Item extends string | number, AllowClear extends boolea
         attrs: any;
         slots: {
             option?(_: {
-                option: string;
+                option: string | Item;
                 selected: boolean;
                 model: boolean;
             }): any;

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

@@ -0,0 +1,63 @@
+import type { Component } from 'vue';
+declare const _default: <Item extends string | number = string>(__VLS_props: {
+    option: Item;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    onUnselect?: (() => any) | undefined;
+    optionComponent?: Component<{
+        option: Item;
+        selected?: boolean | undefined;
+        model?: boolean | undefined;
+    }> | undefined;
+    disableClear?: boolean | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        option?(_: {}): any;
+    };
+    emit: (e: 'unselect') => void;
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        option: Item;
+        disabled?: boolean | undefined;
+        loading?: boolean | undefined;
+        onUnselect?: (() => any) | undefined;
+        optionComponent?: Component<{
+            option: Item;
+            selected?: boolean | undefined;
+            model?: boolean | undefined;
+        }> | undefined;
+        disableClear?: boolean | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        option?(_: {}): any;
+    };
+    emit: (e: 'unselect') => void;
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            option: Item;
+            disabled?: boolean | undefined;
+            loading?: boolean | undefined;
+            onUnselect?: (() => any) | undefined;
+            optionComponent?: Component<{
+                option: Item;
+                selected?: boolean | undefined;
+                model?: boolean | undefined;
+            }> | undefined;
+            disableClear?: boolean | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: {
+            option?(_: {}): any;
+        };
+        emit: (e: 'unselect') => void;
+    } | undefined;
+};
+export default _default;
+//# sourceMappingURL=SelectOptionPrefix.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionPrefix.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/components/SelectOptionPrefix.vue"],"names":[],"mappings":"AAgDA;AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,KAAK,CAAA;;YAwLxB,IAAI;;;;;gBACyB,IAAI;;;;;;WAWpC,GAAG;;wBA7BkB,GAAG;;cApJzB,UAAU,KAAG,IAAI;yCAgLP,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;gBAX/C,IAAI;;;;;oBACyB,IAAI;;;;;;oBAU3B,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;wBA7BkB,GAAG;;cApJzB,UAAU,KAAG,IAAI;;;;;;oBAqKb,IAAI;;;;;wBACyB,IAAI;;;;;;wBAU3B,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;;4BA7BkB,GAAG;;kBApJzB,UAAU,KAAG,IAAI;;;AAfvB,wBAqM2E"}

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

@@ -0,0 +1,65 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, withCtx, withModifiers, createVNode, unref, createCommentVNode } from 'vue';
+import IconCancel from '../../../assets/icons/default/IconCancel.svg.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SelectOptionPrefix",
+  props: {
+    option: {},
+    optionComponent: {},
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    disableClear: { type: Boolean }
+  },
+  emits: ["unselect"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["relative grid grid-cols-[1fr,auto] items-center text-description group/model", {
+          "cursor-pointer": !_ctx.disabled,
+          "cursor-not-allowed opacity-50": _ctx.disabled
+        }])
+      }, [
+        renderSlot(_ctx.$slots, "option", {}, () => [
+          _ctx.optionComponent ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), {
+            key: 0,
+            option: _ctx.option,
+            selected: true,
+            model: true
+          }, {
+            default: withCtx(() => [
+              !_ctx.disableClear ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                class: normalizeClass(["relative flex square-5 rounded-full -my-1 -mr-2 ml-1 items-center justify-center outline-none", {
+                  "cursor-not-allowed": _ctx.disabled,
+                  "cursor-progress": _ctx.loading,
+                  "cursor-pointer w-ripple w-ripple-hover ": !_ctx.loading && !_ctx.disabled
+                }]),
+                onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["stop", "prevent"])),
+                onClick: _cache[1] || (_cache[1] = withModifiers(($event) => !_ctx.loading && _ctx.$emit("unselect"), ["stop", "prevent"]))
+              }, [
+                createVNode(unref(IconCancel), { class: "square-3" })
+              ], 34)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["option"])) : createCommentVNode("", true)
+        ]),
+        !_ctx.optionComponent && !_ctx.disableClear ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          class: normalizeClass(["relative flex square-5 rounded-full items-center justify-center outline-none", {
+            "cursor-not-allowed": _ctx.disabled,
+            "cursor-progress": _ctx.loading,
+            "cursor-pointer w-ripple w-ripple-hover ": !_ctx.loading && !_ctx.disabled
+          }]),
+          onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+          }, ["stop", "prevent"])),
+          onClick: _cache[3] || (_cache[3] = withModifiers(($event) => !_ctx.loading && _ctx.$emit("unselect"), ["stop", "prevent"]))
+        }, [
+          createVNode(unref(IconCancel), { class: "square-3" })
+        ], 34)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Select/components/SelectOptionPrefix.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './SelectOptionPrefix.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/Tabs/WTabs.vue.d.ts

@@ -1,6 +1,7 @@
 import { type VNode } from 'vue';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     names?: string[] | undefined;
+    icons?: SVGComponent[] | Record<number, SVGComponent> | undefined;
     slots?: VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[] | undefined;
@@ -20,6 +21,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     "update:has-changes": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     names?: string[] | undefined;
+    icons?: SVGComponent[] | Record<number, SVGComponent> | undefined;
     slots?: VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[] | undefined;

package/dist/components/Tabs/WTabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/WTabs.vue"],"names":[],"mappings":"AAkFA;AAEA,OAAO,EAAkC,KAAK,KAAK,EAAoD,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwYlH,wBAaG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"WTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/WTabs.vue"],"names":[],"mappings":"AA2FA;AAEA,OAAO,EAAkC,KAAK,KAAK,EAAoD,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwZlH,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/Tabs/WTabs.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, computed, ref, reactive, inject, watch, onMounted, onUnmounted, openBlock, createElementBlock, Fragment, renderList, normalizeClass, unref, createElementVNode, createTextVNode, toDisplayString, createVNode, Transition, withCtx, createCommentVNode, normalizeStyle, TransitionGroup, createBlock, resolveDynamicComponent, nextTick } from 'vue';
+import { defineComponent, useSlots, computed, ref, reactive, inject, watch, onMounted, onUnmounted, openBlock, createElementBlock, Fragment, renderList, normalizeClass, unref, createElementVNode, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, Transition, withCtx, normalizeStyle, TransitionGroup, nextTick } from 'vue';
 import _sfc_main$1 from './components/TabItem.vue.js';
 import _sfc_main$2 from '../Form/WForm.vue.js';
 import { throttle, debounce } from '../../utils/utils.js';
@@ -7,14 +7,15 @@ import { wTabItemListener, wTabItemUnlistener } from './models/injection.js';
 const _hoisted_1 = { class: "mb-8" };
 const _hoisted_2 = {
   key: 0,
-  class: "relative flex mb-4 sm-not:-px--inner-margin"
+  class: "relative flex mb-4 sm-not:-px--inner-margin overflow-x-auto overscroll-x-contain no-scrollbar snap-x snap-always snap-mandatory"
 };
 const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "relative" };
+const _hoisted_4 = { class: "relative whitespace-nowrap px-4" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WTabs",
   props: {
     names: {},
+    icons: {},
     slots: {},
     lessTransitions: { type: Boolean },
     initTab: {}
@@ -102,6 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(current, (value) => {
       emit("update:current", value);
       updateIndicator();
+      button.value[value]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
     }, { immediate: true });
     watch(hasChanges, (value) => {
       emit("update:has-changes", value);
@@ -130,7 +132,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ref_key: "button",
               ref: button,
               key: index,
-              class: normalizeClass(["flex-1 font-semibold flex items-center justify-center h-10 cursor-pointer relative w-ripple w-ripple-hover select-none transition-colors duration-500 outline-none", {
+              class: normalizeClass(["flex-1 font-semibold flex items-center justify-center h-10 cursor-pointer snap-center relative w-ripple w-ripple-hover select-none transition-colors duration-500 outline-none", {
                 "text-description": current.value !== index && isValidMap[index] !== false,
                 "text-primary-default dark:text-primary-dark": current.value === index && isValidMap[index] !== false,
                 "text-negative dark:text-negative-dark": isValidMap[index] === false
@@ -138,7 +140,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onClick: ($event) => unref(switchTab)(index)
             }, [
               createElementVNode("div", _hoisted_4, [
-                createTextVNode(toDisplayString(_ctx.names[index]) + " ", 1),
+                _ctx.icons?.[index] ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icons?.[index]), {
+                  key: 0,
+                  class: "inline -mt-1"
+                })) : createCommentVNode("", true),
+                createTextVNode(" " + toDisplayString(_ctx.names[index]) + " ", 1),
                 createVNode(Transition, {
                   "enter-active-class": "transition-opacity",
                   "leave-active-class": "transition-opacity",

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.5.17",
+  "version": "0.5.19",
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",