eco-vue-js 0.8.43 → 0.9.1

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"}

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

@@ -1,13 +1,13 @@
-import { defineComponent, useTemplateRef, watch, toRef, nextTick, withDirectives, openBlock, createElementBlock, renderSlot, vShow } from 'vue';
+import { defineComponent, useTemplateRef, watch, nextTick, withDirectives, openBlock, createElementBlock, renderSlot, vShow } from 'vue';
 import { useTabItemActiveListener } from '../use/useTabItemActiveListener.js';
 
 const _hoisted_1 = { ref: "element" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TabItem",
   props: {
-    isActive: { type: Boolean }
+    active: { type: Boolean }
   },
-  emits: ["update:height"],
+  emits: ["update:height", "update:active"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -17,7 +17,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!elementRef.value) return;
       emit("update:height", elementRef.value.offsetHeight);
     };
-    watch(toRef(props, "isActive"), async (value) => {
+    watch(() => props.active, async (value) => {
+      if (value) emit("update:active");
       if (value) await nextTick();
       emitHeight();
       if (value) callListeners();
@@ -29,7 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
         renderSlot(_ctx.$slots, "default")
       ], 512)), [
-        [vShow, _ctx.isActive]
+        [vShow, _ctx.active]
       ]);
     };
   }

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

@@ -0,0 +1,58 @@
+import { CSSProperties } from 'vue';
+declare function __VLS_template(): {
+    slots: {
+        title?(_: {}): any;
+        suffix?(_: {}): any;
+        right?(_: {}): any;
+    };
+    refs: {
+        button: HTMLButtonElement;
+    };
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    active: boolean;
+    index: number;
+    hasError: boolean;
+    hasChanges: boolean;
+    title: string;
+    icon: SVGComponent | undefined;
+    side?: boolean;
+}, {
+    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, import('vue').PublicProps, 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;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    button: HTMLButtonElement;
+}, 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=TabTitleButton.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabTitleButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabTitleButton.vue"],"names":[],"mappings":"AA8IA,OAAO,EAAC,KAAK,aAAa,EAA6C,MAAM,KAAK,CAAA;AA0FlF,iBAAS,cAAc;;uBA4HI,GAAG;wBACD,GAAG;uBACJ,GAAG;;;;;WAUjB,OAAO,IAA6B;EAEjD;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA7OX,OAAO;WACR,MAAM;cACH,OAAO;gBACL,OAAO;WACZ,MAAM;UACP,YAAY,GAAG,SAAS;WACvB,OAAO;;;;;;;cAgP8B,MAAM;;aAAU,MAAM;;;YAtP1D,OAAO;WACR,MAAM;cACH,OAAO;gBACL,OAAO;WACZ,MAAM;UACP,YAAY,GAAG,SAAS;WACvB,OAAO;;;;;cAgP8B,MAAM;;aAAU,MAAM;;;;OAIlE,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/components/TabTitleButton.vue.js

@@ -0,0 +1,125 @@
+import { defineComponent, useTemplateRef, watch, nextTick, onMounted, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, createBlock, Suspense, withCtx, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+
+const _hoisted_1 = { class: "whitespace-nowrap px-4" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TabTitleButton",
+  props: {
+    active: { type: Boolean },
+    index: {},
+    hasError: { type: Boolean },
+    hasChanges: { type: Boolean },
+    title: {},
+    icon: {},
+    side: { type: Boolean }
+  },
+  emits: ["click", "update:indicator-style", "update:scroll-position"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const buttonRef = useTemplateRef("button");
+    const updateIndicator = () => {
+      if (!props.active) return;
+      if (!buttonRef.value || !buttonRef.value.offsetWidth) return;
+      if (props.side) {
+        emit("update:indicator-style", {
+          height: buttonRef.value.offsetHeight + "px",
+          top: buttonRef.value.offsetTop + "px",
+          left: "0",
+          width: "0.25rem"
+        });
+      } else {
+        emit("update:indicator-style", {
+          width: buttonRef.value.offsetWidth + "px",
+          left: buttonRef.value.offsetLeft + "px",
+          bottom: "0",
+          height: "0.25rem"
+        });
+      }
+    };
+    const updateScrollPosition = () => {
+      if (!props.active) return;
+      if (!buttonRef.value || !buttonRef.value.offsetWidth) return;
+      if (props.side) {
+        emit("update:scroll-position", { top: buttonRef.value.offsetTop });
+      } else {
+        emit("update:scroll-position", { left: buttonRef.value.offsetLeft });
+      }
+    };
+    const update = () => {
+      updateIndicator();
+      updateScrollPosition();
+    };
+    watch(() => props.active, () => {
+      update();
+    });
+    watch(() => props.index, () => {
+      nextTick(update);
+    });
+    onMounted(() => {
+      document.fonts.ready.then(() => {
+        update();
+      });
+    });
+    __expose({
+      update
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        ref: "button",
+        class: "text-description grid cursor-pointer select-none snap-center grid-cols-[1fr,auto] font-semibold outline-none transition-colors duration-500",
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["w-ripple w-ripple-hover relative", {
+            "text-primary-default dark:text-primary-dark": _ctx.active && !_ctx.hasError,
+            "text-negative dark:text-negative-dark": _ctx.hasError
+          }])
+        }, [
+          _ctx.$slots.title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(["flex items-center", {
+              "h-10 justify-center text-center": !_ctx.side,
+              "py-3 text-start": _ctx.side
+            }])
+          }, [
+            createElementVNode("div", _hoisted_1, [
+              _ctx.icon !== void 0 ? (openBlock(), createBlock(Suspense, { key: 0 }, {
+                fallback: withCtx(() => _cache[1] || (_cache[1] = [
+                  createElementVNode("svg", { class: "square-5 -mt-1 inline" }, [
+                    createElementVNode("g")
+                  ], -1)
+                ])),
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { class: "square-5 -mt-1 inline" }))
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              createTextVNode(" " + toDisplayString(_ctx.title) + " ", 1),
+              renderSlot(_ctx.$slots, "suffix")
+            ])
+          ], 2)),
+          createVNode(Transition, {
+            "enter-active-class": "transition-opacity",
+            "leave-active-class": "transition-opacity",
+            "enter-from-class": "opacity-0",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: withCtx(() => [
+              _ctx.hasChanges ? (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": !_ctx.hasError,
+                  "bg-negative dark:bg-negative-dark": _ctx.hasError
+                }])
+              }, null, 2)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ], 2),
+        renderSlot(_ctx.$slots, "right")
+      ], 512);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

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