eco-vue-js 0.8.42 → 0.9.0

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

@@ -1,15 +1,15 @@
-import { VNode, nextTick } from 'vue';
+import { CSSProperties, VNode, nextTick } from 'vue';
 import { default as WForm } from '../Form/WForm.vue';
 declare const _default: import('vue').DefineComponent<{
-    names?: string[] | Record<number, string>;
-    namesForm?: string[] | Record<number, string>;
-    icons?: SVGComponent[] | Record<number, SVGComponent>;
     customSlots?: VNode[];
     lessTransitions?: boolean;
     initTab?: number;
     side?: boolean;
     disableMinHeight?: boolean;
+    noHeader?: boolean;
+    switchToNew?: boolean;
 }, {
+    updateCurrent: (value: string) => void;
     updateIndex: (value: number) => void;
     next: () => void;
     previous: () => void;
@@ -20,28 +20,143 @@ declare const _default: import('vue').DefineComponent<{
     initModel: (index: number) => ReturnType<ComponentInstance<typeof WForm>["initModel"]>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:has-changes": (value: boolean) => any;
-    "update:current": (value: number) => any;
+    "update:current": (value: string) => any;
+    "update:current-index": (value: number) => any;
+    "update:current-title": (value: string) => any;
+    "update:tabs-length": (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<{
-    names?: string[] | Record<number, string>;
-    namesForm?: string[] | Record<number, string>;
-    icons?: SVGComponent[] | Record<number, SVGComponent>;
     customSlots?: VNode[];
     lessTransitions?: boolean;
     initTab?: number;
     side?: boolean;
     disableMinHeight?: boolean;
+    noHeader?: boolean;
+    switchToNew?: boolean;
 }> & Readonly<{
     "onUpdate:has-changes"?: ((value: boolean) => any) | undefined;
-    "onUpdate:current"?: ((value: number) => any) | undefined;
+    "onUpdate:current"?: ((value: string) => any) | undefined;
+    "onUpdate:current-index"?: ((value: number) => any) | undefined;
+    "onUpdate:current-title"?: ((value: string) => any) | undefined;
+    "onUpdate:tabs-length"?: ((value: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     buttonContainer: HTMLDivElement;
-    button: HTMLButtonElement;
+    button: (({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly active: boolean;
+            readonly index: number;
+            readonly hasError: boolean;
+            readonly hasChanges: boolean;
+            readonly title: string;
+            readonly icon: SVGComponent | undefined;
+            readonly side?: boolean | undefined;
+            readonly onClick?: ((value: MouseEvent) => any) | undefined;
+            readonly "onUpdate:indicator-style"?: ((value: CSSProperties) => any) | undefined;
+            readonly "onUpdate:scroll-position"?: ((value: {
+                left: number;
+            } | {
+                top: number;
+            }) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            button: HTMLButtonElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "click", value: MouseEvent) => void) & ((event: "update:indicator-style", value: CSSProperties) => void) & ((event: "update:scroll-position", value: {
+            left: number;
+        } | {
+            top: number;
+        }) => void);
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            active: boolean;
+            index: number;
+            hasError: boolean;
+            hasChanges: boolean;
+            title: string;
+            icon: SVGComponent | undefined;
+            side?: boolean;
+        }> & Readonly<{
+            onClick?: ((value: MouseEvent) => any) | undefined;
+            "onUpdate:indicator-style"?: ((value: CSSProperties) => any) | undefined;
+            "onUpdate:scroll-position"?: ((value: {
+                left: number;
+            } | {
+                top: number;
+            }) => any) | undefined;
+        }>, {
+            update: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            click: (value: MouseEvent) => any;
+            "update:indicator-style": (value: CSSProperties) => any;
+            "update:scroll-position": (value: {
+                left: number;
+            } | {
+                top: number;
+            }) => any;
+        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{}> & Omit<Readonly<{
+        active: boolean;
+        index: number;
+        hasError: boolean;
+        hasChanges: boolean;
+        title: string;
+        icon: SVGComponent | undefined;
+        side?: boolean;
+    }> & Readonly<{
+        onClick?: ((value: MouseEvent) => any) | undefined;
+        "onUpdate:indicator-style"?: ((value: CSSProperties) => any) | undefined;
+        "onUpdate:scroll-position"?: ((value: {
+            left: number;
+        } | {
+            top: number;
+        }) => any) | undefined;
+    }>, "update"> & import('vue').ShallowUnwrapRef<{
+        update: () => void;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            title?(_: {}): any;
+            suffix?(_: {}): any;
+            right?(_: {}): any;
+        };
+    }) | null)[];
     tabItem: (({
         $: import('vue').ComponentInternalInstance;
         $data: {};
         $props: {
-            readonly isActive: boolean;
+            readonly active: boolean;
             readonly "onUpdate:height"?: ((value: number) => any) | undefined;
+            readonly "onUpdate:active"?: (() => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
         $attrs: {
             [x: string]: unknown;
@@ -57,16 +172,18 @@ declare const _default: import('vue').DefineComponent<{
         $root: import('vue').ComponentPublicInstance | null;
         $parent: import('vue').ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: (event: "update:height", value: number) => void;
+        $emit: ((event: "update:height", value: number) => void) & ((event: "update:active") => void);
         $el: any;
         $options: import('vue').ComponentOptionsBase<Readonly<{
-            isActive: boolean;
+            active: boolean;
         }> & Readonly<{
             "onUpdate:height"?: ((value: number) => any) | undefined;
+            "onUpdate:active"?: (() => any) | undefined;
         }>, {
             emitHeight: () => void;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
             "update:height": (value: number) => any;
+            "update:active": () => any;
         }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -88,9 +205,10 @@ declare const _default: import('vue').DefineComponent<{
         $nextTick: typeof nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
     } & Readonly<{}> & Omit<Readonly<{
-        isActive: boolean;
+        active: boolean;
     }> & Readonly<{
         "onUpdate:height"?: ((value: number) => any) | undefined;
+        "onUpdate:active"?: (() => any) | undefined;
     }>, "emitHeight"> & import('vue').ShallowUnwrapRef<{
         emitHeight: () => void;
     }> & {} & import('vue').ComponentCustomProperties & {} & {

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":"AA6QA,OAAO,EAAC,KAAK,KAAK,EAAoB,QAAQ,EAAyE,MAAM,KAAK,CAAA;AAElI,OAAO,KAAK,MAAM,6BAA6B,CAAA;;YAUrC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;gBAC7B,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;YACrC,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;kBACvC,KAAK,EAAE;sBACH,OAAO;cACf,MAAM;WACT,OAAO;uBACK,OAAO;;yBA0CA,MAAM;gBAajB,IAAI;oBAIA,IAAI;sBAkCA,MAAM,6GAAqE,UAAU,CAAC,iBAAiB,CAAC,OAAO,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;wBAIhI,MAAM;;UAAuE,UAAU,CAAC,iBAAiB,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;uBAIvI,MAAM,KAAsE,UAAU,CAAC,iBAAiB,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC;;;;;YA5GpJ,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;gBAC7B,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;YACrC,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;kBACvC,KAAK,EAAE;sBACH,OAAO;cACf,MAAM;WACT,OAAO;uBACK,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6VW,GAAG,8CAEvC,GAAG,yBAAyB,GAAG,6DACN,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAHQ,GAAG,8CAEvC,GAAG,yBAAyB,GAAG,6DACN,GAAG;;;;;;;;;;;;;;;;;;;;;AAuF/B,wBAYG"}
+{"version":3,"file":"WTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/WTabs.vue"],"names":[],"mappings":"AAsSA,OAAO,EAAC,KAAK,aAAa,EAAkB,KAAK,KAAK,EAAoB,QAAQ,EAAyE,MAAM,KAAK,CAAA;AAEtK,OAAO,KAAK,MAAM,6BAA6B,CAAA;;kBAW/B,KAAK,EAAE;sBACH,OAAO;cACf,MAAM;WACT,OAAO;uBACK,OAAO;eACf,OAAO;kBACJ,OAAO;;2BA6DO,MAAM;yBAMR,MAAM;gBAcjB,IAAI;oBAIA,IAAI;sBAUA,MAAM,6GAAqE,UAAU,CAAC,iBAAiB,CAAC,OAAO,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;wBAIhI,MAAM;;UAAuE,UAAU,CAAC,iBAAiB,CAAC,OAAO,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC;uBAIvI,MAAM,KAAsE,UAAU,CAAC,iBAAiB,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC;;;;;;;;kBA7G9I,KAAK,EAAE;sBACH,OAAO;cACf,MAAM;WACT,OAAO;uBACK,OAAO;eACf,OAAO;kBACJ,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsW4B,GAAG,8CAErB,GAAG,yBACnB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAHP,GAAG,8CAErB,GAAG,yBACnB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAHP,GAAG,8CAErB,GAAG,yBACnB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;AAqJ1D,wBAeG"}

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

@@ -1,84 +1,77 @@
-import { defineComponent, useSlots, computed, ref, useTemplateRef, reactive, inject, watch, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, Fragment, renderList, unref, createElementVNode, createBlock, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, Transition, withCtx, normalizeStyle, TransitionGroup, nextTick } from 'vue';
-import _sfc_main$2 from '../Form/WForm.vue.js';
+import { defineComponent, useSlots, useTemplateRef, computed, ref, reactive, inject, watch, onMounted, onUnmounted, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, unref, createSlots, withCtx, resolveDynamicComponent, createElementVNode, normalizeStyle, createCommentVNode, createVNode, TransitionGroup, nextTick } from 'vue';
+import _sfc_main$3 from '../Form/WForm.vue.js';
 import { throttle, debounce } from '../../utils/utils.js';
-import _sfc_main$1 from './components/TabItem.vue.js';
+import _sfc_main$2 from './components/TabItem.vue.js';
+import _sfc_main$1 from './components/TabTitleButton.vue.js';
 import { wTabItemListener, wTabItemUnlistener } from './models/injection.js';
 
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "relative whitespace-nowrap px-4" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "WTabs",
   props: {
-    names: {},
-    namesForm: {},
-    icons: {},
     customSlots: {},
     lessTransitions: { type: Boolean },
     initTab: {},
     side: { type: Boolean },
-    disableMinHeight: { type: Boolean }
+    disableMinHeight: { type: Boolean },
+    noHeader: { type: Boolean },
+    switchToNew: { type: Boolean }
   },
-  emits: ["update:current", "update:has-changes"],
+  emits: ["update:current", "update:current-index", "update:has-changes", "update:current-title", "update:tabs-length"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
-    const defaultSlots = computed(() => (props.customSlots ?? slots.default?.() ?? []).filter((item) => typeof item.type !== "symbol"));
-    const current = ref(props.initTab ?? 0);
+    const buttonContainerRef = useTemplateRef("buttonContainer");
+    const defaultSlots = computed(() => {
+      const result = [];
+      (props.customSlots ?? slots.default?.() ?? []).forEach((item) => {
+        if (Array.isArray(item.children)) result.push(...item.children);
+        if (typeof item.type === "symbol") return;
+        result.push(item);
+      });
+      return result;
+    });
+    const defaultSlotsKeys = computed(() => defaultSlots.value.map((item) => item.props?.name));
+    const current = ref(defaultSlotsKeys.value[props.initTab ?? 0]);
+    const currentIndex = computed(() => defaultSlotsKeys.value.indexOf(current.value));
     const isDirect = ref(true);
     const buttonRef = useTemplateRef("button");
     const indicatorStyle = ref(void 0);
     const minHeight = ref(0);
     const tabItemRef = useTemplateRef("tabItem");
     const formRef = useTemplateRef("form");
-    const buttonContainerRef = useTemplateRef("buttonContainer");
     const isValidMap = reactive({});
     const hasChangesMap = reactive({});
     const hasChanges = computed(() => Object.values(hasChangesMap).includes(true));
-    const updateIsValidMap = (index, value) => {
-      isValidMap[index] = value;
+    const updateIsValidMap = (key, value) => {
+      isValidMap[key] = value;
       nextTick().then(() => {
-        if (value === false && isValidMap[current.value] !== false) switchTab(index);
+        if (value === false && isValidMap[current.value] !== false) switchTab(key);
       });
     };
-    const switchTab = throttle((index) => {
-      if (current.value === index) return;
-      updateIndex(index);
+    const switchTab = throttle((key) => {
+      if (current.value === key) return;
+      updateCurrent(key);
     }, 200);
+    const updateCurrent = (value) => {
+      tabItemRef.value?.[currentIndex.value]?.emitHeight?.();
+      setCurrentDebounced(value);
+    };
     const updateIndex = (value) => {
-      tabItemRef.value?.[current.value]?.emitHeight?.();
-      setIndexDebounced(value);
+      tabItemRef.value?.[currentIndex.value]?.emitHeight?.();
+      setCurrentDebounced(defaultSlotsKeys.value[value]);
     };
-    const setIndexDebounced = debounce((value) => {
-      if (current.value === value || value < 0 || value > defaultSlots.value.length - 1) return;
-      isDirect.value = current.value < value;
+    const setCurrentDebounced = debounce((value) => {
+      if (current.value === value || !defaultSlotsKeys.value.includes(value)) return;
+      if (!defaultSlots.value[defaultSlotsKeys.value.indexOf(value)].children?.default) return;
+      isDirect.value = defaultSlotsKeys.value.indexOf(current.value) < defaultSlotsKeys.value.indexOf(value);
       current.value = value;
     }, 100);
     const next = () => {
-      switchTab(current.value + 1);
+      switchTab(defaultSlotsKeys.value[currentIndex.value + 1]);
     };
     const previous = () => {
-      switchTab(current.value - 1);
-    };
-    const updateIndicator = () => {
-      if (!props.names) return;
-      const element = buttonRef.value?.[current.value];
-      if (!element || !element.offsetWidth) return;
-      if (props.side) {
-        indicatorStyle.value = {
-          height: element.offsetHeight + "px",
-          top: element.offsetTop + "px",
-          left: "0",
-          width: "0.25rem"
-        };
-      } else {
-        indicatorStyle.value = {
-          width: element.offsetWidth + "px",
-          left: element.offsetLeft + "px",
-          bottom: "0",
-          height: "0.25rem"
-        };
-      }
+      switchTab(defaultSlotsKeys.value[currentIndex.value - 1]);
     };
     const updateHeight = (value) => {
       if (minHeight.value >= value) return;
@@ -93,30 +86,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const initModel = (index, ...args) => {
       return formRef.value?.[index]?.initModel(...args);
     };
+    const updateIndicator = () => {
+      buttonRef.value?.forEach((item) => item?.update());
+    };
+    const updateScrollPosition = (value) => {
+      if (!buttonContainerRef.value) return;
+      if (props.side) {
+        if (buttonContainerRef.value.scrollHeight <= buttonContainerRef.value.offsetHeight) return;
+        buttonContainerRef.value.scrollTo({ top: ((value.top ?? 0) - buttonContainerRef.value.offsetTop) / 2, behavior: "smooth" });
+      } else {
+        if (buttonContainerRef.value.scrollWidth <= buttonContainerRef.value.offsetWidth) return;
+        buttonContainerRef.value.scrollTo({ left: ((value.left ?? 0) - buttonContainerRef.value.offsetLeft) / 2, behavior: "smooth" });
+      }
+    };
     const tabItemListenerInjected = inject(wTabItemListener, null);
     const tabItemUnlistenerInjected = inject(wTabItemUnlistener, null);
     watch(current, (value) => {
       emit("update:current", value);
-      updateIndicator();
-      if (buttonContainerRef.value && buttonRef.value?.[value]) {
-        if (props.side) {
-          buttonContainerRef.value.scrollTo({ top: (buttonRef.value[value].offsetTop - buttonContainerRef.value.offsetTop) / 2, behavior: "smooth" });
-        } else {
-          buttonContainerRef.value.scrollTo({ left: (buttonRef.value[value].offsetLeft - buttonContainerRef.value.offsetLeft) / 2, behavior: "smooth" });
-        }
-      }
+    }, { immediate: true });
+    watch(currentIndex, (value) => {
+      emit("update:current-index", value);
     }, { immediate: true });
     watch(hasChanges, (value) => {
       emit("update:has-changes", value);
     }, { immediate: true });
+    watch(defaultSlotsKeys, (newValue, oldValue) => {
+      const newIndex = newValue.findIndex((item) => !oldValue.includes(item));
+      if (props.switchToNew && newIndex !== -1) {
+        switchTab(newValue[newIndex]);
+        return;
+      }
+      if (!newValue.includes(current.value)) {
+        switchTab(newValue[oldValue.indexOf(current.value) - 1]);
+        return;
+      }
+    });
+    watch(defaultSlotsKeys, (value) => {
+      emit("update:tabs-length", value.length);
+    }, { immediate: true });
     onMounted(() => {
-      updateIndicator();
       tabItemListenerInjected?.(updateIndicator);
     });
     onUnmounted(() => {
       tabItemUnlistenerInjected?.(updateIndicator);
     });
     __expose({
+      updateCurrent,
       updateIndex,
       next,
       previous,
@@ -131,52 +146,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "grid grid-cols-[auto,1fr] items-start": _ctx.side
         }])
       }, [
-        _ctx.names ? (openBlock(), createElementBlock("div", {
+        !_ctx.noHeader ? (openBlock(), createElementBlock("div", {
           key: 0,
           ref: "buttonContainer",
           class: normalizeClass(["no-scrollbar relative flex snap-x snap-mandatory snap-always overflow-x-auto overscroll-x-contain", {
             "flex-col": _ctx.side
           }])
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(defaultSlots.value, (_, index) => {
-            return openBlock(), createElementBlock("button", {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(defaultSlots.value, (slot, index) => {
+            return openBlock(), createBlock(_sfc_main$1, {
+              key: slot.props?.name,
               ref_for: true,
               ref: "button",
-              key: index,
-              class: normalizeClass(["w-ripple w-ripple-hover relative flex flex-1 cursor-pointer select-none snap-center items-center font-semibold outline-none transition-colors duration-500", {
-                "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,
-                "h-10 justify-center text-center": !_ctx.side,
-                "py-3 pr-4 text-start": _ctx.side
-              }]),
-              onClick: ($event) => unref(switchTab)(index)
-            }, [
-              createElementVNode("div", _hoisted_2, [
-                _ctx.icons?.[index] ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icons?.[index]), {
-                  key: 0,
-                  class: "-mt-1 inline"
-                })) : createCommentVNode("", true),
-                createTextVNode(" " + toDisplayString(_ctx.names[index]) + " ", 1),
-                createVNode(Transition, {
-                  "enter-active-class": "transition-opacity",
-                  "leave-active-class": "transition-opacity",
-                  "enter-from-class": "opacity-0",
-                  "leave-to-class": "opacity-0"
-                }, {
-                  default: withCtx(() => [
-                    hasChangesMap[index] ? (openBlock(), createElementBlock("div", {
-                      key: 0,
-                      class: normalizeClass(["square-2 absolute right-0 top-0 rounded-full transition-colors duration-500", {
-                        "bg-info dark:bg-info-dark": isValidMap[index] !== false,
-                        "bg-negative dark:bg-negative-dark": isValidMap[index] === false
-                      }])
-                    }, null, 2)) : createCommentVNode("", true)
-                  ]),
-                  _: 2
-                }, 1024)
-              ])
-            ], 10, _hoisted_1);
+              active: current.value === slot.props?.name,
+              index,
+              title: slot.props?.title,
+              icon: slot.props?.icon,
+              "has-changes": hasChangesMap[slot.props?.name] === true,
+              "has-error": isValidMap[slot.props?.name] === false,
+              side: _ctx.side,
+              "onUpdate:indicatorStyle": _cache[0] || (_cache[0] = ($event) => indicatorStyle.value = $event),
+              "onUpdate:scrollPosition": updateScrollPosition,
+              onClick: ($event) => unref(switchTab)(slot.props?.name)
+            }, createSlots({ _: 2 }, [
+              slot.children?.title ? {
+                name: "title",
+                fn: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(slot.children?.title)))
+                ]),
+                key: "0"
+              } : void 0,
+              slot.children?.suffix ? {
+                name: "suffix",
+                fn: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(slot.children?.suffix)))
+                ]),
+                key: "1"
+              } : void 0,
+              slot.children?.right ? {
+                name: "right",
+                fn: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(slot.children?.right)))
+                ]),
+                key: "2"
+              } : void 0
+            ]), 1032, ["active", "index", "title", "icon", "has-changes", "has-error", "side", "onClick"]);
           }), 128)),
           createElementVNode("div", {
             class: normalizeClass(["absolute rounded-sm duration-500", {
@@ -199,32 +213,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "leave-to-class": _ctx.lessTransitions || _ctx.side ? "opacity-0" : "translate-x-[calc((100%+var(--inner-margin))*var(--direction-factor)*-1)]"
           }, {
             default: withCtx(() => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(defaultSlots.value, (slot, index) => {
-                return openBlock(), createBlock(_sfc_main$1, {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(defaultSlots.value, (slot) => {
+                return openBlock(), createBlock(_sfc_main$2, {
                   ref_for: true,
                   ref: "tabItem",
-                  key: index,
-                  "is-active": index === current.value,
+                  key: slot.props?.name,
+                  active: slot.props?.name === current.value,
                   class: "width-full",
-                  "onUpdate:height": _cache[0] || (_cache[0] = ($event) => !_ctx.disableMinHeight && updateHeight($event))
+                  "onUpdate:height": _cache[1] || (_cache[1] = ($event) => !_ctx.disableMinHeight && updateHeight($event)),
+                  "onUpdate:active": ($event) => _ctx.$emit("update:current-title", slot.props?.title)
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$2, {
+                    createVNode(_sfc_main$3, {
                       ref_for: true,
                       ref: "form",
-                      name: _ctx.namesForm?.[index] ?? index.toString(),
-                      title: _ctx.names?.[index],
-                      "onUpdate:isValid": ($event) => updateIsValidMap(index, $event),
-                      "onUpdate:hasChanges": ($event) => hasChangesMap[index] = $event
+                      name: slot.props?.name,
+                      title: slot.props?.title,
+                      "onUpdate:isValid": ($event) => updateIsValidMap(slot.props?.name, $event),
+                      "onUpdate:hasChanges": ($event) => hasChangesMap[slot.props?.name] = $event
                     }, {
                       default: withCtx(() => [
-                        (openBlock(), createBlock(resolveDynamicComponent(slot)))
+                        (openBlock(), createBlock(resolveDynamicComponent(slot.children?.default)))
                       ]),
                       _: 2
                     }, 1032, ["name", "title", "onUpdate:isValid", "onUpdate:hasChanges"])
                   ]),
                   _: 2
-                }, 1032, ["is-active"]);
+                }, 1032, ["active", "onUpdate:active"]);
               }), 128))
             ]),
             _: 1

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

@@ -0,0 +1,33 @@
+declare function __VLS_template(): {
+    slots: Readonly<{
+        default?: () => void;
+        title?: () => void;
+        suffix?: () => void;
+        right?: () => void;
+    }> & {
+        default?: () => void;
+        title?: () => void;
+        suffix?: () => void;
+        right?: () => void;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    title: string;
+    name: string;
+    icon?: SVGComponent;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    title: string;
+    name: string;
+    icon?: SVGComponent;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=WTabsItem.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WTabsItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/WTabsItem.vue"],"names":[],"mappings":"AAuCA,iBAAS,cAAc;;kBAVX,MAAM,IAAI;gBACZ,MAAM,IAAI;iBACT,MAAM,IAAI;gBACX,MAAM,IAAI;;kBAHR,MAAM,IAAI;gBACZ,MAAM,IAAI;iBACT,MAAM,IAAI;gBACX,MAAM,IAAI;;;WAsCN,OAAO,IAA6B;EAEjD;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;WA3DZ,MAAM;UACP,MAAM;WACL,YAAY;;WAFZ,MAAM;UACP,MAAM;WACL,YAAY;iGA+DnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

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

@@ -0,0 +1,17 @@
+import { defineComponent, renderSlot } from 'vue';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WTabsItem",
+  props: {
+    title: {},
+    name: {},
+    icon: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Tabs/WTabsItem.vue2.js

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

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

@@ -9,15 +9,17 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{
-    isActive: boolean;
+    active: boolean;
 }, {
     emitHeight: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:height": (value: number) => any;
+    "update:active": () => any;
 }, string, import('vue').PublicProps, Readonly<{
-    isActive: boolean;
+    active: boolean;
 }> & Readonly<{
     "onUpdate:height"?: ((value: number) => any) | undefined;
+    "onUpdate:active"?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     element: HTMLDivElement;
 }, any>;

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

@@ -1 +1 @@
-{"version":3,"file":"TabItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabItem.vue"],"names":[],"mappings":"AA4FA,iBAAS,cAAc;;yBA6BM,GAAG;;;;;WAUlB,OAAO,IAA6B;EAEjD;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;cA7FT,OAAO;;sBAYI,IAAI;;;;cAZf,OAAO;;;;;OAwGjB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TabItem.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabItem.vue"],"names":[],"mappings":"AAmGA,iBAAS,cAAc;;yBA6BM,GAAG;;;;;WAUlB,OAAO,IAA6B;EAEjD;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YAlGX,OAAO;;sBAaM,IAAI;;;;;YAbjB,OAAO;;;;;;OA8Gf,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}