@rotki/ui-library 2.21.0 → 2.22.1

package/dist/components/tables/data-table-styles.d.ts

@@ -1,4 +1,3 @@
-export { getAlignClass } from '../../components/tables/table-props.js';
 export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
     outlined: {
         true: {
@@ -40,6 +39,16 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
             tr: string;
         };
     };
+    mobile: {
+        true: {
+            wrapper: string;
+            scroller: string;
+            table: string;
+            tbody: string;
+            tr: string;
+            td: string;
+        };
+    };
 }, {
     wrapper: string;
     scroller: string;
@@ -91,6 +100,16 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
             tr: string;
         };
     };
+    mobile: {
+        true: {
+            wrapper: string;
+            scroller: string;
+            table: string;
+            tbody: string;
+            tr: string;
+            td: string;
+        };
+    };
 }, {
     wrapper: string;
     scroller: string;
@@ -142,6 +161,16 @@ export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
             tr: string;
         };
     };
+    mobile: {
+        true: {
+            wrapper: string;
+            scroller: string;
+            table: string;
+            tbody: string;
+            tr: string;
+            td: string;
+        };
+    };
 }, {
     wrapper: string;
     scroller: string;

package/dist/components/tables/data-table-styles.js

@@ -1,5 +1,4 @@
 import { tv } from "../../utils/tv.js";
-import "./table-props.js";
 //#region src/components/tables/data-table-styles.ts
 var dataTableStyles = tv({
 	slots: {
@@ -27,7 +26,15 @@ var dataTableStyles = tv({
 			empty: { tr: "hover:bg-transparent" },
 			expandable: { tr: "bg-[#f9fafb] hover:bg-[#f9fafb] dark:bg-[#121212] dark:hover:bg-[#121212]" },
 			group: { tr: "bg-black/[0.02] dark:bg-white/[0.02]" }
-		}
+		},
+		mobile: { true: {
+			wrapper: "divide-y-0 border-0 rounded-none overflow-visible",
+			scroller: "overflow-visible [clip-path:none]",
+			table: "block min-w-0 max-w-none w-full whitespace-normal divide-y-0 border-0",
+			tbody: "block divide-y-0",
+			tr: "block",
+			td: "block px-4 py-2"
+		} }
 	}
 });
 //#endregion

package/dist/components/tables/data-table-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport { getAlignClass } from '@/components/tables/table-props';\n\nexport const dataTableStyles = tv({\n  slots: {\n    wrapper: 'relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-hidden',\n    scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)]',\n    table: 'min-w-full table-fixed divide-y divide-black/[0.12] dark:divide-white/[0.12] whitespace-nowrap mx-auto my-0 max-w-fit relative border-black/[0.12] dark:border-white/[0.12]',\n    tbody: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n    tr: 'hover:bg-black/[0.04] dark:hover:bg-white/[0.04]',\n    td: 'p-4 text-rui-text text-body-2 [text-wrap:initial]',\n    checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n    tbodyLoader: 'text-center',\n    tbodyLoaderContent: 'flex items-center justify-center min-h-56 py-8',\n  },\n  variants: {\n    outlined: {\n      true: { wrapper: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { wrapper: 'rounded-[.25rem]' },\n      md: { wrapper: 'rounded-[.75rem]' },\n      lg: { wrapper: 'rounded-[1rem]' },\n    },\n    dense: {\n      true: { td: 'py-[0.38rem]' },\n    },\n    striped: {\n      true: { tbody: 'even:[&>tr]:bg-rui-grey-50 dark:even:[&>tr]:bg-rui-grey-900' },\n    },\n    rowVariant: {\n      selected: { tr: 'bg-rui-primary/[0.08] dark:bg-rui-dark-primary/[0.08]' },\n      empty: { tr: 'hover:bg-transparent' },\n      expandable: { tr: 'bg-[#f9fafb] hover:bg-[#f9fafb] dark:bg-[#121212] dark:hover:bg-[#121212]' },\n      group: { tr: 'bg-black/[0.02] dark:bg-white/[0.02]' },\n    },\n  },\n});\n"],"mappings":";;;AAIA,IAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,SAAS;EACT,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;EACJ,IAAI;EACJ,UAAU;EACV,aAAa;EACb,oBAAoB;EACrB;CACD,UAAU;EACR,UAAU,EACR,MAAM,EAAE,SAAS,uDAAuD,EACzE;EACD,SAAS;GACP,IAAI,EAAE,SAAS,oBAAoB;GACnC,IAAI,EAAE,SAAS,oBAAoB;GACnC,IAAI,EAAE,SAAS,kBAAkB;GAClC;EACD,OAAO,EACL,MAAM,EAAE,IAAI,gBAAgB,EAC7B;EACD,SAAS,EACP,MAAM,EAAE,OAAO,+DAA+D,EAC/E;EACD,YAAY;GACV,UAAU,EAAE,IAAI,yDAAyD;GACzE,OAAO,EAAE,IAAI,wBAAwB;GACrC,YAAY,EAAE,IAAI,6EAA6E;GAC/F,OAAO,EAAE,IAAI,wCAAwC;GACtD;EACF;CACF,CAAC"}
+{"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const dataTableStyles = tv({\n  slots: {\n    wrapper: 'relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-hidden',\n    scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)]',\n    table: 'min-w-full table-fixed divide-y divide-black/[0.12] dark:divide-white/[0.12] whitespace-nowrap mx-auto my-0 max-w-fit relative border-black/[0.12] dark:border-white/[0.12]',\n    tbody: 'divide-y divide-black/[0.12] dark:divide-white/[0.12]',\n    tr: 'hover:bg-black/[0.04] dark:hover:bg-white/[0.04]',\n    td: 'p-4 text-rui-text text-body-2 [text-wrap:initial]',\n    checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n    tbodyLoader: 'text-center',\n    tbodyLoaderContent: 'flex items-center justify-center min-h-56 py-8',\n  },\n  variants: {\n    outlined: {\n      true: { wrapper: 'border border-black/[0.12] dark:border-white/[0.12]' },\n    },\n    rounded: {\n      sm: { wrapper: 'rounded-[.25rem]' },\n      md: { wrapper: 'rounded-[.75rem]' },\n      lg: { wrapper: 'rounded-[1rem]' },\n    },\n    dense: {\n      true: { td: 'py-[0.38rem]' },\n    },\n    striped: {\n      true: { tbody: 'even:[&>tr]:bg-rui-grey-50 dark:even:[&>tr]:bg-rui-grey-900' },\n    },\n    rowVariant: {\n      selected: { tr: 'bg-rui-primary/[0.08] dark:bg-rui-dark-primary/[0.08]' },\n      empty: { tr: 'hover:bg-transparent' },\n      expandable: { tr: 'bg-[#f9fafb] hover:bg-[#f9fafb] dark:bg-[#121212] dark:hover:bg-[#121212]' },\n      group: { tr: 'bg-black/[0.02] dark:bg-white/[0.02]' },\n    },\n    mobile: {\n      true: {\n        wrapper: 'divide-y-0 border-0 rounded-none overflow-visible',\n        scroller: 'overflow-visible [clip-path:none]',\n        table: 'block min-w-0 max-w-none w-full whitespace-normal divide-y-0 border-0',\n        tbody: 'block divide-y-0',\n        tr: 'block',\n        td: 'block px-4 py-2',\n      },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,kBAAkB,GAAG;CAChC,OAAO;EACL,SAAS;EACT,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;EACJ,IAAI;EACJ,UAAU;EACV,aAAa;EACb,oBAAoB;CACtB;CACA,UAAU;EACR,UAAU,EACR,MAAM,EAAE,SAAS,sDAAsD,EACzE;EACA,SAAS;GACP,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,iBAAiB;EAClC;EACA,OAAO,EACL,MAAM,EAAE,IAAI,eAAe,EAC7B;EACA,SAAS,EACP,MAAM,EAAE,OAAO,8DAA8D,EAC/E;EACA,YAAY;GACV,UAAU,EAAE,IAAI,wDAAwD;GACxE,OAAO,EAAE,IAAI,uBAAuB;GACpC,YAAY,EAAE,IAAI,4EAA4E;GAC9F,OAAO,EAAE,IAAI,uCAAuC;EACtD;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;AACF,CAAC"}

package/dist/components/tables/table-props.d.ts

@@ -4,6 +4,11 @@ export declare const TableAlign: {
     readonly end: "end";
 };
 export type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];
+export declare const GroupExpandButtonPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+export type GroupExpandButtonPosition = (typeof GroupExpandButtonPosition)[keyof typeof GroupExpandButtonPosition];
 export declare const SortDirection: {
     readonly asc: "asc";
     readonly desc: "desc";

package/dist/components/tables/table-props.js

@@ -4,6 +4,10 @@ var TableAlign = {
 	center: "center",
 	end: "end"
 };
+var GroupExpandButtonPosition = {
+	start: "start",
+	end: "end"
+};
 var SortDirection = {
 	asc: "asc",
 	desc: "desc"
@@ -34,6 +38,6 @@ function getSortButtonAlignClass(align = TableAlign.start) {
 	return align === TableAlign.center ? "ml-6" : void 0;
 }
 //#endregion
-export { SortDirection, TableAlign, getAlignClass, getSortButtonAlignClass };
+export { GroupExpandButtonPosition, SortDirection, TableAlign, getAlignClass, getSortButtonAlignClass };
 
 //# sourceMappingURL=table-props.js.map

package/dist/components/tables/table-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-props.js","names":[],"sources":["../../../src/components/tables/table-props.ts"],"sourcesContent":["export const TableAlign = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];\n\nexport const SortDirection = {\n  asc: 'asc',\n  desc: 'desc',\n} as const;\n\nexport type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];\n\nconst ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'text-left rtl:text-right',\n  [TableAlign.center]: 'text-center',\n  [TableAlign.end]: 'text-right rtl:text-left',\n};\n\nconst SORTABLE_ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'pl-3',\n  [TableAlign.center]: 'px-3',\n  [TableAlign.end]: 'pr-3',\n};\n\n/**\n * Returns alignment Tailwind classes for a table cell.\n * When sortable, adds reduced padding for the sort button.\n */\nexport function getAlignClass(align: TableAlign = TableAlign.start, sortable?: boolean): string {\n  const classes = ALIGN_CLASSES[align];\n  if (sortable)\n    return `${classes} ${SORTABLE_ALIGN_CLASSES[align]}`;\n  return classes;\n}\n\n/**\n * Returns extra class for sort button when column is center-aligned.\n */\nexport function getSortButtonAlignClass(align: TableAlign = TableAlign.start): string | undefined {\n  return align === TableAlign.center ? 'ml-6' : undefined;\n}\n"],"mappings":";AAAA,IAAa,aAAa;CACxB,OAAO;CACP,QAAQ;CACR,KAAK;CACN;AAID,IAAa,gBAAgB;CAC3B,KAAK;CACL,MAAM;CACP;AAID,IAAM,gBAA4C;EAC/C,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;CACnB;AAED,IAAM,yBAAqD;EACxD,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;CACnB;;;;;AAMD,SAAgB,cAAc,QAAoB,WAAW,OAAO,UAA4B;CAC9F,MAAM,UAAU,cAAc;AAC9B,KAAI,SACF,QAAO,GAAG,QAAQ,GAAG,uBAAuB;AAC9C,QAAO;;;;;AAMT,SAAgB,wBAAwB,QAAoB,WAAW,OAA2B;AAChG,QAAO,UAAU,WAAW,SAAS,SAAS,KAAA"}
+{"version":3,"file":"table-props.js","names":[],"sources":["../../../src/components/tables/table-props.ts"],"sourcesContent":["export const TableAlign = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];\n\nexport const GroupExpandButtonPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type GroupExpandButtonPosition = (typeof GroupExpandButtonPosition)[keyof typeof GroupExpandButtonPosition];\n\nexport const SortDirection = {\n  asc: 'asc',\n  desc: 'desc',\n} as const;\n\nexport type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];\n\nconst ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'text-left rtl:text-right',\n  [TableAlign.center]: 'text-center',\n  [TableAlign.end]: 'text-right rtl:text-left',\n};\n\nconst SORTABLE_ALIGN_CLASSES: Record<TableAlign, string> = {\n  [TableAlign.start]: 'pl-3',\n  [TableAlign.center]: 'px-3',\n  [TableAlign.end]: 'pr-3',\n};\n\n/**\n * Returns alignment Tailwind classes for a table cell.\n * When sortable, adds reduced padding for the sort button.\n */\nexport function getAlignClass(align: TableAlign = TableAlign.start, sortable?: boolean): string {\n  const classes = ALIGN_CLASSES[align];\n  if (sortable)\n    return `${classes} ${SORTABLE_ALIGN_CLASSES[align]}`;\n  return classes;\n}\n\n/**\n * Returns extra class for sort button when column is center-aligned.\n */\nexport function getSortButtonAlignClass(align: TableAlign = TableAlign.start): string | undefined {\n  return align === TableAlign.center ? 'ml-6' : undefined;\n}\n"],"mappings":";AAAA,IAAa,aAAa;CACxB,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,4BAA4B;CACvC,OAAO;CACP,KAAK;AACP;AAIA,IAAa,gBAAgB;CAC3B,KAAK;CACL,MAAM;AACR;AAIA,IAAM,gBAA4C;EAC/C,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;AAEA,IAAM,yBAAqD;EACxD,WAAW,QAAQ;EACnB,WAAW,SAAS;EACpB,WAAW,MAAM;AACpB;;;;;AAMA,SAAgB,cAAc,QAAoB,WAAW,OAAO,UAA4B;CAC9F,MAAM,UAAU,cAAc;CAC9B,IAAI,UACF,OAAO,GAAG,QAAQ,GAAG,uBAAuB;CAC9C,OAAO;AACT;;;;AAKA,SAAgB,wBAAwB,QAAoB,WAAW,OAA2B;CAChG,OAAO,UAAU,WAAW,SAAS,SAAS,KAAA;AAChD"}

package/dist/components/tables/use-pagination-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-pagination-navigation.js","names":[],"sources":["../../../src/components/tables/use-pagination-navigation.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';\nimport type { TableOptions } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\ninterface LimitEntry { limit: number }\n\ninterface PageRange { page: number; text: string }\n\nexport interface TablePaginationData {\n  page: number;\n  total: number;\n  limit: number;\n  limits?: number[];\n}\n\nexport interface UsePaginationNavigationReturn {\n  limits: ComputedRef<LimitEntry[]>;\n  currentLimit: WritableComputedRef<number>;\n  pages: ComputedRef<number>;\n  ranges: ComputedRef<PageRange[]>;\n  indicatorText: ComputedRef<string>;\n  currentRange: WritableComputedRef<number>;\n  useInputJump: ComputedRef<boolean>;\n  hasPrev: ComputedRef<boolean>;\n  hasNext: ComputedRef<boolean>;\n  onPrev: () => void;\n  onNext: () => void;\n  onFirst: () => void;\n  onLast: () => void;\n}\n\nexport function usePaginationNavigation(\n  // eslint-disable-next-line @rotki/composable-input-flexibility\n  modelValue: Ref<TablePaginationData>,\n  tableDefaults: TableOptions,\n  rangesThreshold: MaybeRefOrGetter<number> = 500,\n): UsePaginationNavigationReturn {\n  const limits = computed<LimitEntry[]>(() =>\n    (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n  );\n\n  const currentLimit = computed<number>({\n    get: () => get(modelValue).limit,\n    set: limit =>\n      set(modelValue, {\n        ...get(modelValue),\n        limit,\n        page: 1,\n      }),\n  });\n\n  const pages = computed<number>(() => {\n    const { limit, total } = get(modelValue);\n    if (!total)\n      return 0;\n\n    return Math.ceil(total / limit);\n  });\n\n  function pageRangeText(page: number): string {\n    const { limit, total } = get(modelValue);\n    const start = (page - 1) * limit + 1;\n    const end = Math.min(page * limit, total);\n    return `${formatInteger(start)} - ${formatInteger(end)}`;\n  }\n\n  const useInputJump = computed<boolean>(() => {\n    const threshold = toValue(rangesThreshold);\n    return threshold > 0 && get(pages) > threshold;\n  });\n\n  const ranges = computed<PageRange[]>(() => {\n    if (get(useInputJump))\n      return [];\n\n    return Array.from({ length: get(pages) }, (_, i) => {\n      const page = i + 1;\n      return { page, text: pageRangeText(page) };\n    });\n  });\n\n  const indicatorText = computed<string>(() => {\n    const { total } = get(modelValue);\n    if (get(useInputJump))\n      return `of ${formatInteger(get(pages))}`;\n\n    return total ? `of ${formatInteger(total)}` : `0 of 0`;\n  });\n\n  const currentRange = computed<number>({\n    get: () => get(modelValue).page,\n    set: page =>\n      set(modelValue, {\n        ...get(modelValue),\n        page,\n      }),\n  });\n\n  const hasPrev = computed<boolean>(() => get(modelValue).page > 1);\n  const hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\n  function goToPage(page: number): void {\n    set(currentRange, page);\n  }\n\n  function onPrev(): void {\n    if (get(hasPrev))\n      goToPage(get(modelValue).page - 1);\n  }\n\n  function onNext(): void {\n    if (get(hasNext))\n      goToPage(get(modelValue).page + 1);\n  }\n\n  function onFirst(): void {\n    if (get(hasPrev))\n      goToPage(1);\n  }\n\n  function onLast(): void {\n    if (get(hasNext))\n      goToPage(get(pages));\n  }\n\n  return {\n    limits,\n    currentLimit,\n    pages,\n    ranges,\n    indicatorText,\n    currentRange,\n    useInputJump,\n    hasPrev,\n    hasNext,\n    onPrev,\n    onNext,\n    onFirst,\n    onLast,\n  };\n}\n"],"mappings":";;;;AA+BA,SAAgB,wBAEd,YACA,eACA,kBAA4C,KACb;CAC/B,MAAM,SAAS,gBACZ,IAAI,WAAW,CAAC,UAAU,IAAI,cAAc,OAAO,EAAE,KAAI,WAAU,EAAE,OAAO,EAAE,CAChF;CAED,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,WAAW,CAAC;EAC3B,MAAK,UACH,IAAI,YAAY;GACd,GAAG,IAAI,WAAW;GAClB;GACA,MAAM;GACP,CAAA;EACJ,CAAC;CAEF,MAAM,QAAQ,eAAuB;EACnC,MAAM,EAAE,OAAO,UAAU,IAAI,WAAW;AACxC,MAAI,CAAC,MACH,QAAO;AAET,SAAO,KAAK,KAAK,QAAQ,MAAM;GAC/B;CAEF,SAAS,cAAc,MAAsB;EAC3C,MAAM,EAAE,OAAO,UAAU,IAAI,WAAW;EACxC,MAAM,SAAS,OAAO,KAAK,QAAQ;EACnC,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,MAAM;AACzC,SAAO,GAAG,cAAc,MAAM,CAAC,KAAK,cAAc,IAAI;;CAGxD,MAAM,eAAe,eAAwB;EAC3C,MAAM,YAAY,QAAQ,gBAAgB;AAC1C,SAAO,YAAY,KAAK,IAAI,MAAM,GAAG;GACrC;CAEF,MAAM,SAAS,eAA4B;AACzC,MAAI,IAAI,aAAa,CACnB,QAAO,EAAE;AAEX,SAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,MAAM,EAAE,GAAG,GAAG,MAAM;GAClD,MAAM,OAAO,IAAI;AACjB,UAAO;IAAE;IAAM,MAAM,cAAc,KAAA;IAAO;IAC1C;GACF;CAEF,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,EAAE,UAAU,IAAI,WAAW;AACjC,MAAI,IAAI,aAAa,CACnB,QAAO,MAAM,cAAc,IAAI,MAAM,CAAC;AAExC,SAAO,QAAQ,MAAM,cAAc,MAAM,KAAK;GAC9C;CAEF,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,WAAW,CAAC;EAC3B,MAAK,SACH,IAAI,YAAY;GACd,GAAG,IAAI,WAAW;GAClB;GACD,CAAA;EACJ,CAAC;CAEF,MAAM,UAAU,eAAwB,IAAI,WAAW,CAAC,OAAO,EAAE;CACjE,MAAM,UAAU,eAAwB,IAAI,MAAM,GAAG,IAAI,WAAW,CAAC,KAAK;CAE1E,SAAS,SAAS,MAAoB;AACpC,MAAI,cAAc,KAAK;;CAGzB,SAAS,SAAe;AACtB,MAAI,IAAI,QAAQ,CACd,UAAS,IAAI,WAAW,CAAC,OAAO,EAAE;;CAGtC,SAAS,SAAe;AACtB,MAAI,IAAI,QAAQ,CACd,UAAS,IAAI,WAAW,CAAC,OAAO,EAAE;;CAGtC,SAAS,UAAgB;AACvB,MAAI,IAAI,QAAQ,CACd,UAAS,EAAE;;CAGf,SAAS,SAAe;AACtB,MAAI,IAAI,QAAQ,CACd,UAAS,IAAI,MAAM,CAAC;;AAGxB,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-pagination-navigation.js","names":[],"sources":["../../../src/components/tables/use-pagination-navigation.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';\nimport type { TableOptions } from '@/composables/defaults/table';\nimport { formatInteger } from '@/utils/helpers';\n\ninterface LimitEntry { limit: number }\n\ninterface PageRange { page: number; text: string }\n\nexport interface TablePaginationData {\n  page: number;\n  total: number;\n  limit: number;\n  limits?: number[];\n}\n\nexport interface UsePaginationNavigationReturn {\n  limits: ComputedRef<LimitEntry[]>;\n  currentLimit: WritableComputedRef<number>;\n  pages: ComputedRef<number>;\n  ranges: ComputedRef<PageRange[]>;\n  indicatorText: ComputedRef<string>;\n  currentRange: WritableComputedRef<number>;\n  useInputJump: ComputedRef<boolean>;\n  hasPrev: ComputedRef<boolean>;\n  hasNext: ComputedRef<boolean>;\n  onPrev: () => void;\n  onNext: () => void;\n  onFirst: () => void;\n  onLast: () => void;\n}\n\nexport function usePaginationNavigation(\n  // eslint-disable-next-line @rotki/composable-input-flexibility\n  modelValue: Ref<TablePaginationData>,\n  tableDefaults: TableOptions,\n  rangesThreshold: MaybeRefOrGetter<number> = 500,\n): UsePaginationNavigationReturn {\n  const limits = computed<LimitEntry[]>(() =>\n    (get(modelValue).limits ?? get(tableDefaults.limits)).map(limit => ({ limit })),\n  );\n\n  const currentLimit = computed<number>({\n    get: () => get(modelValue).limit,\n    set: limit =>\n      set(modelValue, {\n        ...get(modelValue),\n        limit,\n        page: 1,\n      }),\n  });\n\n  const pages = computed<number>(() => {\n    const { limit, total } = get(modelValue);\n    if (!total)\n      return 0;\n\n    return Math.ceil(total / limit);\n  });\n\n  function pageRangeText(page: number): string {\n    const { limit, total } = get(modelValue);\n    const start = (page - 1) * limit + 1;\n    const end = Math.min(page * limit, total);\n    return `${formatInteger(start)} - ${formatInteger(end)}`;\n  }\n\n  const useInputJump = computed<boolean>(() => {\n    const threshold = toValue(rangesThreshold);\n    return threshold > 0 && get(pages) > threshold;\n  });\n\n  const ranges = computed<PageRange[]>(() => {\n    if (get(useInputJump))\n      return [];\n\n    return Array.from({ length: get(pages) }, (_, i) => {\n      const page = i + 1;\n      return { page, text: pageRangeText(page) };\n    });\n  });\n\n  const indicatorText = computed<string>(() => {\n    const { total } = get(modelValue);\n    if (get(useInputJump))\n      return `of ${formatInteger(get(pages))}`;\n\n    return total ? `of ${formatInteger(total)}` : `0 of 0`;\n  });\n\n  const currentRange = computed<number>({\n    get: () => get(modelValue).page,\n    set: page =>\n      set(modelValue, {\n        ...get(modelValue),\n        page,\n      }),\n  });\n\n  const hasPrev = computed<boolean>(() => get(modelValue).page > 1);\n  const hasNext = computed<boolean>(() => get(pages) > get(modelValue).page);\n\n  function goToPage(page: number): void {\n    set(currentRange, page);\n  }\n\n  function onPrev(): void {\n    if (get(hasPrev))\n      goToPage(get(modelValue).page - 1);\n  }\n\n  function onNext(): void {\n    if (get(hasNext))\n      goToPage(get(modelValue).page + 1);\n  }\n\n  function onFirst(): void {\n    if (get(hasPrev))\n      goToPage(1);\n  }\n\n  function onLast(): void {\n    if (get(hasNext))\n      goToPage(get(pages));\n  }\n\n  return {\n    limits,\n    currentLimit,\n    pages,\n    ranges,\n    indicatorText,\n    currentRange,\n    useInputJump,\n    hasPrev,\n    hasNext,\n    onPrev,\n    onNext,\n    onFirst,\n    onLast,\n  };\n}\n"],"mappings":";;;;AA+BA,SAAgB,wBAEd,YACA,eACA,kBAA4C,KACb;CAC/B,MAAM,SAAS,gBACZ,IAAI,UAAU,CAAC,CAAC,UAAU,IAAI,cAAc,MAAM,EAAA,CAAG,KAAI,WAAU,EAAE,MAAM,EAAE,CAChF;CAEA,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,UACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;GACA,MAAM;EACR,CAAC;CACL,CAAC;CAED,MAAM,QAAQ,eAAuB;EACnC,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,IAAI,CAAC,OACH,OAAO;EAET,OAAO,KAAK,KAAK,QAAQ,KAAK;CAChC,CAAC;CAED,SAAS,cAAc,MAAsB;EAC3C,MAAM,EAAE,OAAO,UAAU,IAAI,UAAU;EACvC,MAAM,SAAS,OAAO,KAAK,QAAQ;EACnC,MAAM,MAAM,KAAK,IAAI,OAAO,OAAO,KAAK;EACxC,OAAO,GAAG,cAAc,KAAK,EAAE,KAAK,cAAc,GAAG;CACvD;CAEA,MAAM,eAAe,eAAwB;EAC3C,MAAM,YAAY,QAAQ,eAAe;EACzC,OAAO,YAAY,KAAK,IAAI,KAAK,IAAI;CACvC,CAAC;CAED,MAAM,SAAS,eAA4B;EACzC,IAAI,IAAI,YAAY,GAClB,OAAO,CAAC;EAEV,OAAO,MAAM,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,IAAI,GAAG,MAAM;GAClD,MAAM,OAAO,IAAI;GACjB,OAAO;IAAE;IAAM,MAAM,cAAc,IAAI;GAAE;EAC3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,eAAuB;EAC3C,MAAM,EAAE,UAAU,IAAI,UAAU;EAChC,IAAI,IAAI,YAAY,GAClB,OAAO,MAAM,cAAc,IAAI,KAAK,CAAC;EAEvC,OAAO,QAAQ,MAAM,cAAc,KAAK,MAAM;CAChD,CAAC;CAED,MAAM,eAAe,SAAiB;EACpC,WAAW,IAAI,UAAU,CAAC,CAAC;EAC3B,MAAK,SACH,IAAI,YAAY;GACd,GAAG,IAAI,UAAU;GACjB;EACF,CAAC;CACL,CAAC;CAED,MAAM,UAAU,eAAwB,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CAChE,MAAM,UAAU,eAAwB,IAAI,KAAK,IAAI,IAAI,UAAU,CAAC,CAAC,IAAI;CAEzE,SAAS,SAAS,MAAoB;EACpC,IAAI,cAAc,IAAI;CACxB;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,UAAU,CAAC,CAAC,OAAO,CAAC;CACrC;CAEA,SAAS,UAAgB;EACvB,IAAI,IAAI,OAAO,GACb,SAAS,CAAC;CACd;CAEA,SAAS,SAAe;EACtB,IAAI,IAAI,OAAO,GACb,SAAS,IAAI,KAAK,CAAC;CACvB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/components/tabs/tab/RuiTab.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ import { useTabLink } from "./use-tab-link.js";
 import { computed, createBlock, createSlots, defineComponent, mergeProps, openBlock, renderSlot, unref, useId, useSlots, withCtx } from "vue";
 import { get } from "@vueuse/shared";
 //#region src/components/tabs/tab/RuiTab.vue?vue&type=script&setup=true&lang.ts
-var RuiTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTab",
 	inheritAttrs: false,
 	__name: "RuiTab",

package/dist/components/tabs/tab/RuiTab.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTab.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { TabAlignment, TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  /** @deprecated Use `classNames.active` instead */\n  activeClass?: string;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  /** @deprecated No longer used — vue-router's `useLink` handles route matching internally */\n  exactPath?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  activeClass = '',\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst tab = tv({\n  base: 'min-w-[5.625rem] max-w-[22.5rem] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0 !px-4',\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: '',\n      // `min-h` instead of `h`: keep the 48px floor so simple text tabs\n      // match horizontal layout, but let tabs grow to fit richer content\n      // (logo + label, multi-line text) instead of clipping against the\n      // scroll container's `overflow-auto`.\n      [TabLayout.vertical]: '!min-h-[3rem] w-full max-w-none',\n    },\n    align: {\n      start: 'justify-start text-left rtl:justify-end rtl:text-right',\n      center: 'justify-center text-center',\n      end: 'justify-end text-right rtl:justify-start rtl:text-left',\n    },\n    grow: {\n      true: 'grow max-w-none',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n    active: {\n      true: '',\n      false: '',\n    },\n    indicatorPosition: {\n      start: '',\n      end: '',\n    },\n  },\n  compoundVariants: [\n    // Horizontal active indicator (bottom/top border)\n    { active: true, layout: TabLayout.horizontal, indicatorPosition: 'end', class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:bottom-0 after:left-0 after:border-b-2` },\n    { active: true, layout: TabLayout.horizontal, indicatorPosition: 'start', class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:top-0 after:left-0 after:border-b-2` },\n    // Vertical active indicator (right/left border)\n    { active: true, layout: TabLayout.vertical, indicatorPosition: 'end', class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:right-0 after:left-auto after:border-r-2` },\n    { active: true, layout: TabLayout.vertical, indicatorPosition: 'start', class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:left-0 after:right-auto after:border-r-2` },\n  ],\n  defaultVariants: { layout: TabLayout.horizontal, align: 'center', indicatorPosition: 'end', active: false },\n});\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\n\nfunction onClick(event?: MouseEvent): void {\n  emit('click', value);\n  if (navigate && get(isSelf) && event)\n    navigate(event);\n}\n</script>\n\n<template>\n  <RuiButton\n    :class=\"[\n      tab({ layout, align, indicatorPosition, grow, disabled, active: isEffectivelyActive }),\n      isEffectivelyActive && (classNames?.active ?? activeClass),\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"disabled\"\n    :href=\"isLink && !isSelf ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    :tag=\"isLink ? 'a' : undefined\"\n    :no-outline=\"isLink\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    tabindex=\"-1\"\n    hide-focus-indicator\n    variant=\"text\"\n    v-bind=\"$attrs\"\n    @click=\"disabled ? undefined : onClick($event)\"\n  >\n    <template\n      v-if=\"slots.prepend\"\n      #prepend\n    >\n      <slot name=\"prepend\" />\n    </template>\n    <slot />\n    <template\n      v-if=\"slots.append\"\n      #append\n    >\n      <slot name=\"append\" />\n    </template>\n  </RuiButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,OAAO;EAIb,MAAM,QAAQ,UAIV;EAEJ,MAAM,MAAM,GAAG;GACb,MAAM;GACN,UAAU;IACR,QAAQ;MACL,UAAU,aAAa;MAKvB,UAAU,WAAW;KACvB;IACD,OAAO;KACL,OAAO;KACP,QAAQ;KACR,KAAK;KACN;IACD,MAAM,EACJ,MAAM,mBACP;IACD,UAAU,EACR,MAAM,sBACP;IACD,QAAQ;KACN,MAAM;KACN,OAAO;KACR;IACD,mBAAmB;KACjB,OAAO;KACP,KAAK;;IAER;GACD,kBAAkB;IAEhB;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAY,mBAAmB;KAAO,OAAO;KAA8H;IAC7M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAY,mBAAmB;KAAS,OAAO;KAA2H;IAE5M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAU,mBAAmB;KAAO,OAAO;KAAgI;IAC7M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAU,mBAAmB;KAAS,OAAO;;IAChF;GACD,iBAAiB;IAAE,QAAQ,UAAU;IAAY,OAAO;IAAU,mBAAmB;IAAO,QAAQ;;GACrG,CAAC;EAEF,MAAM,EAAE,eAAe,MAAM,UAAU,UAAU,WAAW,WAAW;GACrE,YAAY,QAAA;GACZ,UAAU,QAAA;GACV,aAAa,QAAA;GACd,CAAC;EAEF,MAAM,SAAS,eAA0B,QAAA,WAAW,UAAU,WAAW,UAAU,WAAW;EAC9F,MAAM,SAAS,eAAwB,QAAA,WAAW,QAAQ;EAC1D,MAAM,sBAAsB,eAAwB,QAAA,UAAU,IAAI,cAAc,CAAC;EAEjF,SAAS,QAAQ,OAA0B;AACzC,QAAK,SAAS,QAAA,MAAM;AACpB,OAAI,YAAY,IAAI,OAAO,IAAI,MAC7B,UAAS,MAAM;;;uBAKjB,YAoCY,mBApCZ,WAoCY;IAnCT,OAAK,CAAU,MAAA,IAAG,CAAA;KAAA,QAAG,MAAA,OAAM;KAAA,OAAE,QAAA;KAAK,mBAAE,QAAA;KAAiB,MAAE,QAAA;KAAI,UAAE,QAAA;KAAQ,QAAU,MAAA,oBAAA;KAAmB,CAAA,EAAW,MAAA,oBAAmB,KAAK,QAAA,YAAY,UAAU,QAAA,aAAA;IAI3J,mBAAiB,MAAA,oBAAmB,IAAI,KAAA;IACxC,cAAY,QAAA;IACZ,2BAAyB,QAAA;IACzB,iBAAe,QAAA,YAAY,KAAA;IAC3B,OAAO,MAAA,oBAAmB,GAAG,QAAA,QAAQ,KAAA;IACrC,UAAU,QAAA;IACV,MAAM,MAAA,OAAM,IAAA,CAAK,MAAA,OAAM,GAAG,MAAA,SAAQ,GAAG,KAAA;IACrC,QAAQ,MAAA,OAAM,GAAG,QAAA,SAAS,KAAA;IAC1B,KAAK,MAAA,OAAM,GAAA,MAAS,KAAA;IACpB,cAAY,MAAA,OAAM;IACnB,MAAK;IACJ,iBAAe,MAAA,oBAAmB;IACnC,UAAS;IACT,wBAAA;IACA,SAAQ;MACAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,KAAA,IAAY,QAAQ,OAAM,GAAA,CAAA,EAAA,YAAA;2BAQrC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;OALA,MAAM,UAAA;UACX;sBAEsB,CAAvB,WAAuB,KAAA,QAAA,UAAA,CAAA,CAAA;;eAIjB,MAAM,SAAA;UACX;sBAEqB,CAAtB,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiTab.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab/RuiTab.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { RouteLocationRaw } from 'vue-router';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { TabAlignment, TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { tv } from '@/utils/tv';\n\nexport interface RuiTabClassNames {\n  root?: VueClassValue;\n  active?: VueClassValue;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  disabled?: boolean;\n  grow?: boolean;\n  value?: number | string;\n  active?: boolean;\n  classNames?: RuiTabClassNames;\n  /** @deprecated Use `classNames.active` instead */\n  activeClass?: string;\n  link?: boolean;\n  target?: string;\n  to?: RouteLocationRaw;\n  exact?: boolean;\n  /** @deprecated No longer used — vue-router's `useLink` handles route matching internally */\n  exactPath?: boolean;\n  vertical?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTab',\n  inheritAttrs: false,\n});\n\nconst {\n  color,\n  disabled = false,\n  grow = false,\n  value = useId(),\n  active = false,\n  classNames,\n  activeClass = '',\n  link = false,\n  to = '',\n  target = '_self',\n  exact = false,\n  vertical = false,\n  align = TabAlignment.center,\n  indicatorPosition = TabIndicatorPosition.end,\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  click: [value: string | number];\n}>();\n\nconst slots = defineSlots<{\n  default?: (props?: object) => any;\n  prepend?: (props?: object) => any;\n  append?: (props?: object) => any;\n}>();\n\nconst tab = tv({\n  base: 'min-w-[5.625rem] max-w-[22.5rem] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0 !px-4',\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: '',\n      // `min-h` instead of `h`: keep the 48px floor so simple text tabs\n      // match horizontal layout, but let tabs grow to fit richer content\n      // (logo + label, multi-line text) instead of clipping against the\n      // scroll container's `overflow-auto`.\n      [TabLayout.vertical]: '!min-h-[3rem] w-full max-w-none',\n    },\n    align: {\n      start: 'justify-start text-left rtl:justify-end rtl:text-right',\n      center: 'justify-center text-center',\n      end: 'justify-end text-right rtl:justify-start rtl:text-left',\n    },\n    grow: {\n      true: 'grow max-w-none',\n    },\n    disabled: {\n      true: 'cursor-not-allowed',\n    },\n    active: {\n      true: '',\n      false: '',\n    },\n    indicatorPosition: {\n      start: '',\n      end: '',\n    },\n  },\n  compoundVariants: [\n    // Horizontal active indicator (bottom/top border)\n    { active: true, layout: TabLayout.horizontal, indicatorPosition: 'end', class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:bottom-0 after:left-0 after:border-b-2` },\n    { active: true, layout: TabLayout.horizontal, indicatorPosition: 'start', class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:top-0 after:left-0 after:border-b-2` },\n    // Vertical active indicator (right/left border)\n    { active: true, layout: TabLayout.vertical, indicatorPosition: 'end', class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:right-0 after:left-auto after:border-r-2` },\n    { active: true, layout: TabLayout.vertical, indicatorPosition: 'start', class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:left-0 after:right-auto after:border-r-2` },\n  ],\n  defaultVariants: { layout: TabLayout.horizontal, align: 'center', indicatorPosition: 'end', active: false },\n});\n\nconst { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({\n  link: () => link,\n  to: () => to,\n  exact: () => exact,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst isSelf = computed<boolean>(() => target === '_self');\nconst isEffectivelyActive = computed<boolean>(() => active || get(isRouteActive));\n\nfunction onClick(event?: MouseEvent): void {\n  emit('click', value);\n  if (navigate && get(isSelf) && event)\n    navigate(event);\n}\n</script>\n\n<template>\n  <RuiButton\n    :class=\"[\n      tab({ layout, align, indicatorPosition, grow, disabled, active: isEffectivelyActive }),\n      isEffectivelyActive && (classNames?.active ?? activeClass),\n    ]\"\n    :data-active-tab=\"isEffectivelyActive || undefined\"\n    :data-align=\"align\"\n    :data-indicator-position=\"indicatorPosition\"\n    :data-vertical=\"vertical || undefined\"\n    :color=\"isEffectivelyActive ? color : undefined\"\n    :disabled=\"disabled\"\n    :href=\"isLink && !isSelf ? linkHref : undefined\"\n    :target=\"isLink ? target : undefined\"\n    :tag=\"isLink ? 'a' : undefined\"\n    :no-outline=\"isLink\"\n    role=\"tab\"\n    :aria-selected=\"isEffectivelyActive\"\n    tabindex=\"-1\"\n    hide-focus-indicator\n    variant=\"text\"\n    v-bind=\"$attrs\"\n    @click=\"disabled ? undefined : onClick($event)\"\n  >\n    <template\n      v-if=\"slots.prepend\"\n      #prepend\n    >\n      <slot name=\"prepend\" />\n    </template>\n    <slot />\n    <template\n      v-if=\"slots.append\"\n      #append\n    >\n      <slot name=\"append\" />\n    </template>\n  </RuiButton>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;EAMd,MAAM,MAAM,GAAG;GACb,MAAM;GACN,UAAU;IACR,QAAQ;MACL,UAAU,aAAa;MAKvB,UAAU,WAAW;IACxB;IACA,OAAO;KACL,OAAO;KACP,QAAQ;KACR,KAAK;IACP;IACA,MAAM,EACJ,MAAM,kBACR;IACA,UAAU,EACR,MAAM,qBACR;IACA,QAAQ;KACN,MAAM;KACN,OAAO;IACT;IACA,mBAAmB;KACjB,OAAO;KACP,KAAK;IACP;GACF;GACA,kBAAkB;IAEhB;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAY,mBAAmB;KAAO,OAAO;IAA6H;IAC5M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAY,mBAAmB;KAAS,OAAO;IAA0H;IAE3M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAU,mBAAmB;KAAO,OAAO;IAA+H;IAC5M;KAAE,QAAQ;KAAM,QAAQ,UAAU;KAAU,mBAAmB;KAAS,OAAO;IAA+H;GAChN;GACA,iBAAiB;IAAE,QAAQ,UAAU;IAAY,OAAO;IAAU,mBAAmB;IAAO,QAAQ;GAAM;EAC5G,CAAC;EAED,MAAM,EAAE,eAAe,MAAM,UAAU,UAAU,WAAW,WAAW;GACrE,YAAY,QAAA;GACZ,UAAU,QAAA;GACV,aAAa,QAAA;EACf,CAAC;EAED,MAAM,SAAS,eAA0B,QAAA,WAAW,UAAU,WAAW,UAAU,UAAU;EAC7F,MAAM,SAAS,eAAwB,QAAA,WAAW,OAAO;EACzD,MAAM,sBAAsB,eAAwB,QAAA,UAAU,IAAI,aAAa,CAAC;EAEhF,SAAS,QAAQ,OAA0B;GACzC,KAAK,SAAS,QAAA,KAAK;GACnB,IAAI,YAAY,IAAI,MAAM,KAAK,OAC7B,SAAS,KAAK;EAClB;;uBAIE,YAoCY,mBApCZ,WAoCY;IAnCT,OAAK,CAAU,MAAA,GAAA,CAAG,CAAA;KAAA,QAAG,MAAA,MAAA;KAAM,OAAE,QAAA;KAAK,mBAAE,QAAA;KAAiB,MAAE,QAAA;KAAI,UAAE,QAAA;KAAQ,QAAU,MAAA,mBAAA;IAAmB,CAAA,GAAW,MAAA,mBAAA,MAAwB,QAAA,YAAY,UAAU,QAAA,YAAA;IAI3J,mBAAiB,MAAA,mBAAA,KAAuB,KAAA;IACxC,cAAY,QAAA;IACZ,2BAAyB,QAAA;IACzB,iBAAe,QAAA,YAAY,KAAA;IAC3B,OAAO,MAAA,mBAAA,IAAsB,QAAA,QAAQ,KAAA;IACrC,UAAU,QAAA;IACV,MAAM,MAAA,MAAA,KAAM,CAAK,MAAA,MAAA,IAAS,MAAA,QAAA,IAAW,KAAA;IACrC,QAAQ,MAAA,MAAA,IAAS,QAAA,SAAS,KAAA;IAC1B,KAAK,MAAA,MAAA,IAAM,MAAS,KAAA;IACpB,cAAY,MAAA,MAAA;IACb,MAAK;IACJ,iBAAe,MAAA,mBAAA;IAChB,UAAS;IACT,wBAAA;IACA,SAAQ;MACAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,WAAW,KAAA,IAAY,QAAQ,MAAM,GAAA,CAAA,GAAA,YAAA;2BAQrC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;OALA,MAAM,UAAA;UACX;sBAEsB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;eAIjB,MAAM,SAAA;UACX;sBAEqB,CAAtB,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA"}

package/dist/components/tabs/tab/use-tab-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tab-link.js","names":[],"sources":["../../../../src/components/tabs/tab/use-tab-link.ts"],"sourcesContent":["import { type ComputedRef, getCurrentInstance, type MaybeRefOrGetter } from 'vue';\nimport { type RouteLocationRaw, useLink } from 'vue-router';\n\ninterface UseTabLinkOptions {\n  /** Whether this tab is a link tab */\n  link: MaybeRefOrGetter<boolean>;\n  /** The route location to navigate to */\n  to: MaybeRefOrGetter<RouteLocationRaw>;\n  /** Whether to match the route exactly */\n  exact: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabLinkReturn {\n  /** Whether the link is active based on the current route */\n  isRouteActive: ComputedRef<boolean>;\n  /** The resolved href for the link */\n  href: ComputedRef<string | undefined>;\n  /** Navigate to the link's route */\n  navigate: ((event?: MouseEvent) => void) | undefined;\n  /** Whether this tab has link behavior */\n  isLink: boolean;\n}\n\n/**\n * Composable that integrates vue-router's `useLink` for link-based tabs.\n * Only activates when `link` is true, a router is available, and `to` is provided.\n */\nexport function useTabLink({ link, to, exact }: UseTabLinkOptions): UseTabLinkReturn {\n  const hasRouter = !!getCurrentInstance()?.appContext.config.globalProperties.$router;\n  const isLink = toValue(link) && hasRouter && !!toValue(to);\n\n  if (!isLink) {\n    return {\n      isRouteActive: computed<boolean>(() => false),\n      href: computed<string | undefined>(() => undefined),\n      navigate: undefined,\n      isLink: false,\n    };\n  }\n\n  const linkState = useLink({ to: computed<RouteLocationRaw>(() => toValue(to)) });\n\n  return {\n    isRouteActive: computed<boolean>(() => toValue(exact) ? get(linkState.isExactActive) : get(linkState.isActive)),\n    href: computed<string | undefined>(() => get(linkState.href)),\n    navigate: (event?: MouseEvent) => linkState.navigate(event as MouseEvent),\n    isLink: true,\n  };\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgB,WAAW,EAAE,MAAM,IAAI,SAA8C;CACnF,MAAM,YAAY,CAAC,CAAC,oBAAoB,EAAE,WAAW,OAAO,iBAAiB;AAG7E,KAAI,EAFW,QAAQ,KAAK,IAAI,aAAa,CAAC,CAAC,QAAQ,GAAG,EAGxD,QAAO;EACL,eAAe,eAAwB,MAAM;EAC7C,MAAM,eAAmC,KAAA,EAAU;EACnD,UAAU,KAAA;EACV,QAAQ;EACT;CAGH,MAAM,YAAY,QAAQ,EAAE,IAAI,eAAiC,QAAQ,GAAG,CAAC,EAAE,CAAC;AAEhF,QAAO;EACL,eAAe,eAAwB,QAAQ,MAAM,GAAG,IAAI,UAAU,cAAc,GAAG,IAAI,UAAU,SAAS,CAAC;EAC/G,MAAM,eAAmC,IAAI,UAAU,KAAK,CAAC;EAC7D,WAAW,UAAuB,UAAU,SAAS,MAAoB;EACzE,QAAQ;EACT"}
+{"version":3,"file":"use-tab-link.js","names":[],"sources":["../../../../src/components/tabs/tab/use-tab-link.ts"],"sourcesContent":["import { type ComputedRef, getCurrentInstance, type MaybeRefOrGetter } from 'vue';\nimport { type RouteLocationRaw, useLink } from 'vue-router';\n\ninterface UseTabLinkOptions {\n  /** Whether this tab is a link tab */\n  link: MaybeRefOrGetter<boolean>;\n  /** The route location to navigate to */\n  to: MaybeRefOrGetter<RouteLocationRaw>;\n  /** Whether to match the route exactly */\n  exact: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabLinkReturn {\n  /** Whether the link is active based on the current route */\n  isRouteActive: ComputedRef<boolean>;\n  /** The resolved href for the link */\n  href: ComputedRef<string | undefined>;\n  /** Navigate to the link's route */\n  navigate: ((event?: MouseEvent) => void) | undefined;\n  /** Whether this tab has link behavior */\n  isLink: boolean;\n}\n\n/**\n * Composable that integrates vue-router's `useLink` for link-based tabs.\n * Only activates when `link` is true, a router is available, and `to` is provided.\n */\nexport function useTabLink({ link, to, exact }: UseTabLinkOptions): UseTabLinkReturn {\n  const hasRouter = !!getCurrentInstance()?.appContext.config.globalProperties.$router;\n  const isLink = toValue(link) && hasRouter && !!toValue(to);\n\n  if (!isLink) {\n    return {\n      isRouteActive: computed<boolean>(() => false),\n      href: computed<string | undefined>(() => undefined),\n      navigate: undefined,\n      isLink: false,\n    };\n  }\n\n  const linkState = useLink({ to: computed<RouteLocationRaw>(() => toValue(to)) });\n\n  return {\n    isRouteActive: computed<boolean>(() => toValue(exact) ? get(linkState.isExactActive) : get(linkState.isActive)),\n    href: computed<string | undefined>(() => get(linkState.href)),\n    navigate: (event?: MouseEvent) => linkState.navigate(event as MouseEvent),\n    isLink: true,\n  };\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgB,WAAW,EAAE,MAAM,IAAI,SAA8C;CACnF,MAAM,YAAY,CAAC,CAAC,mBAAmB,CAAC,EAAE,WAAW,OAAO,iBAAiB;CAG7E,IAAI,EAFW,QAAQ,IAAI,KAAK,aAAa,CAAC,CAAC,QAAQ,EAAE,IAGvD,OAAO;EACL,eAAe,eAAwB,KAAK;EAC5C,MAAM,eAAmC,KAAA,CAAS;EAClD,UAAU,KAAA;EACV,QAAQ;CACV;CAGF,MAAM,YAAY,QAAQ,EAAE,IAAI,eAAiC,QAAQ,EAAE,CAAC,EAAE,CAAC;CAE/E,OAAO;EACL,eAAe,eAAwB,QAAQ,KAAK,IAAI,IAAI,UAAU,aAAa,IAAI,IAAI,UAAU,QAAQ,CAAC;EAC9G,MAAM,eAAmC,IAAI,UAAU,IAAI,CAAC;EAC5D,WAAW,UAAuB,UAAU,SAAS,KAAmB;EACxE,QAAQ;CACV;AACF"}

package/dist/components/tabs/tab-item/RuiTabItem.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ var _hoisted_3 = {
 	key: 0,
 	class: "hidden"
 };
-var RuiTabItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTabItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTabItem",
 	__name: "RuiTabItem",
 	props: {

package/dist/components/tabs/tab-item/RuiTabItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tab-item/RuiTabItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  active?: boolean;\n  value?: number | string;\n  eager?: boolean;\n  reverse?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTabItem',\n});\n\nconst { active = false, value, eager = false, reverse = false } = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n</script>\n\n<template>\n  <div\n    role=\"tabpanel\"\n    class=\"w-full\"\n    :data-value=\"value\"\n    :data-active=\"active || undefined\"\n  >\n    <Transition\n      :enter-from-class=\"`opacity-0 ${reverse ? '-translate-x-8' : 'translate-x-8'}`\"\n      :leave-to-class=\"`opacity-0 !h-0 overflow-hidden ${\n        reverse ? 'translate-x-8' : '-translate-x-8'\n      }`\"\n      enter-active-class=\"w-full transform duration-300 transition\"\n      enter-to-class=\"opacity-100 translate-x-0\"\n      leave-active-class=\"w-full transform duration-300 transition !h-0 overflow-hidden\"\n      leave-from-class=\"opacity-100 translate-x-0 !h-0 overflow-hidden\"\n    >\n      <div\n        v-if=\"active\"\n        class=\"w-full\"\n      >\n        <slot />\n      </div>\n    </Transition>\n    <div\n      v-if=\"eager && !active\"\n      class=\"hidden\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoBE,mBA6BM,OAAA;IA5BJ,MAAK;IACL,OAAM;IACL,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;OAExB,YAgBa,YAAA;IAfV,oBAAgB,aAAe,QAAA,UAAO,mBAAA;IACtC,kBAAc,kCAA6C,QAAA,UAAO,kBAAA;IAGnE,sBAAmB;IACnB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;;2BAOX,CAJE,QAAA,UAAA,WAAA,EADR,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA;;kDAIJ,QAAA,SAAK,CAAK,QAAA,UAAA,WAAA,EADlB,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,GAAA,WAAA"}
+{"version":3,"file":"RuiTabItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tab-item/RuiTabItem.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nexport interface Props {\n  active?: boolean;\n  value?: number | string;\n  eager?: boolean;\n  reverse?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiTabItem',\n});\n\nconst { active = false, value, eager = false, reverse = false } = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n</script>\n\n<template>\n  <div\n    role=\"tabpanel\"\n    class=\"w-full\"\n    :data-value=\"value\"\n    :data-active=\"active || undefined\"\n  >\n    <Transition\n      :enter-from-class=\"`opacity-0 ${reverse ? '-translate-x-8' : 'translate-x-8'}`\"\n      :leave-to-class=\"`opacity-0 !h-0 overflow-hidden ${\n        reverse ? 'translate-x-8' : '-translate-x-8'\n      }`\"\n      enter-active-class=\"w-full transform duration-300 transition\"\n      enter-to-class=\"opacity-100 translate-x-0\"\n      leave-active-class=\"w-full transform duration-300 transition !h-0 overflow-hidden\"\n      leave-from-class=\"opacity-100 translate-x-0 !h-0 overflow-hidden\"\n    >\n      <div\n        v-if=\"active\"\n        class=\"w-full\"\n      >\n        <slot />\n      </div>\n    </Transition>\n    <div\n      v-if=\"eager && !active\"\n      class=\"hidden\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAoBE,mBA6BM,OAAA;IA5BJ,MAAK;IACL,OAAM;IACL,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;OAExB,YAgBa,YAAA;IAfV,oBAAgB,aAAe,QAAA,UAAO,mBAAA;IACtC,kBAAc,kCAA6C,QAAA,UAAO,kBAAA;IAGnE,sBAAmB;IACnB,kBAAe;IACf,sBAAmB;IACnB,oBAAiB;;2BAOX,CAJE,QAAA,UAAA,UAAA,GADR,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;;kDAIJ,QAAA,SAAK,CAAK,QAAA,UAAA,UAAA,GADlB,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/components/tabs/tab-items/RuiTabItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.js","names":[],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n// Default matches RuiTabs' `defineModel<... >({ default: 0 })`. Without a\n// default, consumers that bind both components to the same ref (e.g.\n// `v-model=\"item.modelValue\"` on both RuiTabs and RuiTabItems, where the\n// ref starts as `undefined`) leave RuiTabItems with `modelValue === undefined`.\n// The `active = modelValue === value` check then fails for every tab — the\n// panel renders but stays height:0, so e2e `toHaveText` and `toBeVisible`\n// assertions pass the element but see no content.\nconst modelValue = defineModel<T>({ default: 0 as T });\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTabItems.js","names":[],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n// Default matches RuiTabs' `defineModel<... >({ default: 0 })`. Without a\n// default, consumers that bind both components to the same ref (e.g.\n// `v-model=\"item.modelValue\"` on both RuiTabs and RuiTabItems, where the\n// ref starts as `undefined`) leave RuiTabItems with `modelValue === undefined`.\n// The `active = modelValue === value` check then fails for every tab — the\n// panel renders but stays height:0, so e2e `toHaveText` and `toBeVisible`\n// assertions pass the element but see no content.\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js

@@ -2,12 +2,12 @@ import { Fragment, computed, createBlock, createElementBlock, createElementVNode
 import { useElementSize } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/tabs/tab-items/RuiTabItems.vue?vue&type=script&setup=true&lang.ts
-var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTabItems",
 	inheritAttrs: false,
 	__name: "RuiTabItems",
 	props: {
-		"modelValue": { default: 0 },
+		"modelValue": { default: () => 0 },
 		"modelModifiers": {}
 	},
 	emits: ["update:modelValue"],

package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n// Default matches RuiTabs' `defineModel<... >({ default: 0 })`. Without a\n// default, consumers that bind both components to the same ref (e.g.\n// `v-model=\"item.modelValue\"` on both RuiTabs and RuiTabItems, where the\n// ref starts as `undefined`) leave RuiTabItems with `modelValue === undefined`.\n// The `active = modelValue === value` check then fails for every tab — the\n// panel renders but stays height:0, so e2e `toHaveText` and `toBeVisible`\n// assertions pass the element but see no content.\nconst modelValue = defineModel<T>({ default: 0 as T });\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,aAAa,SAAc,SAAA,aAAqB;EAEtD,MAAM,QAAQ,UAAU;EAExB,MAAM,UAAU,IAAa,MAAM;EACnC,MAAM,YAAY,IAAY,GAAG;EACjC,MAAM,cAAc,IAAY,GAAG;EACnC,MAAM,QAAQ,eAA+B,QAAQ;EAErD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,MAAM;EAErD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,WAAW,IAAI,EAAE,CAEF;GAEzC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;AAElC,QADe,MAAI,WAAW,KAAK,OACvB;AACV,iBAAY;AACZ,SAAI,UAAU,MAAI,UAAU,EAAE;AAC5B,YAAI,SAAS,QAAQ,MAAI,UAAU,CAAC;AACpC,YAAI,WAAW,MAAM;;;AAIzB,WAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;;KAEV;KACD;AAEF,OAAI,CAAC,UACH,OAAI,WAAW,GAAG;AAEpB,UAAO;IACP;EAIF,SAAS,gBAAgB,UAA4B;AACnD,UAAO,SACJ,SAAS,SAAS;AACjB,QAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,SAAS,EACnF,QAAO,gBAAgB,KAAK,SAAS,OAAO,QAAQ,CAAC;AAEvD,WAAO,CAAC,KAAK;KACd,CACA,MAAM;;AAGX,QAAM,YAAY,UAAU;AAC1B,kBAAe;AACb,UAAI,aAAa,MAAM;KACvB;IACF;;uBAIA,mBAcM,OAdN,WAcM;IAbJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,YAAW,CAAA,KAAA;MACxBA,KAAAA,OAAM,EAAA,CAEd,mBAQM,OAAA;aARG;IAAJ,KAAI;yBACP,mBAME,UAAA,MAAA,WAJqB,MAAA,SAAQ,GAArB,OAAO,MAAC;wBAFlB,YAME,wBALK,MAAK,EAAA;KAET,KAAK;KACL,SAAS,MAAA,QAAO;KAChB,QAAQ,MAAM,MAAA,YAAA"}
+{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n// Default matches RuiTabs' `defineModel<... >({ default: 0 })`. Without a\n// default, consumers that bind both components to the same ref (e.g.\n// `v-model=\"item.modelValue\"` on both RuiTabs and RuiTabItems, where the\n// ref starts as `undefined`) leave RuiTabItems with `modelValue === undefined`.\n// The `active = modelValue === value` check then fails for every tab — the\n// panel renders but stays height:0, so e2e `toHaveText` and `toBeVisible`\n// assertions pass the element but see no content.\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAeA,MAAM,aAAa,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,UAAU,IAAa,KAAK;EAClC,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,MAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,MAAI,SAAS,GAAG;MAC5B,MAAI,SAAS,QAAQ,MAAI,SAAS,CAAC;MACnC,MAAI,WAAW,KAAK;KACtB;IACF;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,MAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;EAID,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,MAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;uBAIC,mBAcM,OAdN,WAcM;IAbJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,WAAA,EAAW,IAAA;MACxBA,KAAAA,MAAM,GAAA,CAEd,mBAQM,OAAA;aARG;IAAJ,KAAI;yBACP,mBAME,UAAA,MAAA,WAJqB,MAAA,QAAA,IAAb,OAAO,MAAC;wBAFlB,YAME,wBALK,KAAK,GAAA;KAET,KAAK;KACL,SAAS,MAAA,OAAA;KACT,QAAQ,MAAM,MAAA,WAAA"}

package/dist/components/tabs/tab-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-props.js","names":[],"sources":["../../../src/components/tabs/tab-props.ts"],"sourcesContent":["export const TabAlignment = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TabAlignment = (typeof TabAlignment)[keyof typeof TabAlignment];\n\nexport const TabIndicatorPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type TabIndicatorPosition = (typeof TabIndicatorPosition)[keyof typeof TabIndicatorPosition];\n\nexport interface RouteMatchOptions {\n  exactPath?: boolean;\n  exact?: boolean;\n}\n\nexport const TabLayout = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\n\nexport type TabLayout = (typeof TabLayout)[keyof typeof TabLayout];\n"],"mappings":";AAAA,IAAa,eAAe;CAC1B,OAAO;CACP,QAAQ;CACR,KAAK;CACN;AAID,IAAa,uBAAuB;CAClC,OAAO;CACP,KAAK;CACN;AASD,IAAa,YAAY;CACvB,YAAY;CACZ,UAAU;CACX"}
+{"version":3,"file":"tab-props.js","names":[],"sources":["../../../src/components/tabs/tab-props.ts"],"sourcesContent":["export const TabAlignment = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TabAlignment = (typeof TabAlignment)[keyof typeof TabAlignment];\n\nexport const TabIndicatorPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type TabIndicatorPosition = (typeof TabIndicatorPosition)[keyof typeof TabIndicatorPosition];\n\nexport interface RouteMatchOptions {\n  exactPath?: boolean;\n  exact?: boolean;\n}\n\nexport const TabLayout = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\n\nexport type TabLayout = (typeof TabLayout)[keyof typeof TabLayout];\n"],"mappings":";AAAA,IAAa,eAAe;CAC1B,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,uBAAuB;CAClC,OAAO;CACP,KAAK;AACP;AASA,IAAa,YAAY;CACvB,YAAY;CACZ,UAAU;AACZ"}

package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js

@@ -9,10 +9,10 @@ import { watchImmediate } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/tabs/tabs/RuiTabs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-vertical"];
-var RuiTabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTabs",
 	__name: "RuiTabs",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		color: {},
 		vertical: {
 			type: Boolean,

package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n// Default 0 (first tab) matches the existing internal fallback on line 163.\n// Providing a default narrows the `update:modelValue` emit payload from\n// `value?: number | string` to `value: number | string`, so consumers can\n// type their handler signatures without undefined unions.\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n// Default 0 (first tab) matches the existing internal fallback on line 163.\n// Providing a default narrows the `update:modelValue` emit payload from\n// `value?: number | string` to `value: number | string`, so consumers can\n// type their handler signatures without undefined unions.\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/tabs/tabs/use-tab-routing.js

@@ -38,6 +38,6 @@ function useTabRouting({ onRouteChange }) {
 	};
 }
 //#endregion
-export { useTabRouting };
+export { isRouteLocation, useTabRouting };
 
 //# sourceMappingURL=use-tab-routing.js.map

package/dist/components/tabs/tabs/use-tab-routing.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tab-routing.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-routing.ts"],"sourcesContent":["import type { RouteMatchOptions } from '@/components/tabs/tab-props';\nimport { type RouteLocationRaw, useRoute, useRouter } from 'vue-router';\n\ninterface UseTabRoutingOptions {\n  /** Callback invoked when the route changes, to re-sync the active tab */\n  onRouteChange: () => void;\n}\n\ninterface UseTabRoutingReturn {\n  /** Whether vue-router is available in the app context */\n  hasRouter: boolean;\n  /**\n   * Resolves a route location and returns its full path, or undefined\n   * if the router is not available or the value is not a valid route location.\n   */\n  resolveRoute: (to: unknown) => string | undefined;\n  /**\n   * Checks whether a given path matches the current route.\n   * Supports exact path, exact route, and prefix matching.\n   */\n  isPathMatch: (path: string, options: RouteMatchOptions) => boolean;\n}\n\nexport function isRouteLocation(value: unknown): value is RouteLocationRaw {\n  return typeof value === 'string' || (typeof value === 'object' && value !== null);\n}\n\n/**\n * Composable that manages vue-router integration for the RuiTabs component.\n * Provides route resolution and path matching utilities, and watches for\n * route changes to notify the parent component.\n */\nexport function useTabRouting({ onRouteChange }: UseTabRoutingOptions): UseTabRoutingReturn {\n  const hasRouter = getCurrentInstance()?.appContext.config.globalProperties.$router !== undefined;\n\n  if (!hasRouter) {\n    return {\n      hasRouter,\n      resolveRoute: () => undefined,\n      isPathMatch: () => false,\n    };\n  }\n\n  const route = useRoute();\n  const router = useRouter();\n\n  function resolveRoute(to: unknown): string | undefined {\n    if (!isRouteLocation(to))\n      return undefined;\n\n    return router.resolve(to).fullPath;\n  }\n\n  function isPathMatch(\n    path: string,\n    { exactPath, exact }: RouteMatchOptions,\n  ): boolean {\n    const currentRoute = route.fullPath;\n\n    if (exactPath)\n      return currentRoute === path;\n\n    const base = typeof window !== 'undefined' ? window.location.origin : 'http://localhost';\n    const routeWithoutQueryParams = new URL(path, base).pathname;\n\n    if (exact)\n      return currentRoute === routeWithoutQueryParams;\n\n    return currentRoute.startsWith(routeWithoutQueryParams);\n  }\n\n  watch(route, onRouteChange);\n\n  return {\n    hasRouter,\n    resolveRoute,\n    isPathMatch,\n  };\n}\n"],"mappings":";;;AAuBA,SAAgB,gBAAgB,OAA2C;AACzE,QAAO,OAAO,UAAU,YAAa,OAAO,UAAU,YAAY,UAAU;;;;;;;AAQ9E,SAAgB,cAAc,EAAE,iBAA4D;CAC1F,MAAM,YAAY,oBAAoB,EAAE,WAAW,OAAO,iBAAiB,YAAY,KAAA;AAEvF,KAAI,CAAC,UACH,QAAO;EACL;EACA,oBAAoB,KAAA;EACpB,mBAAmB;EACpB;CAGH,MAAM,QAAQ,UAAU;CACxB,MAAM,SAAS,WAAW;CAE1B,SAAS,aAAa,IAAiC;AACrD,MAAI,CAAC,gBAAgB,GAAG,CACtB,QAAO,KAAA;AAET,SAAO,OAAO,QAAQ,GAAG,CAAC;;CAG5B,SAAS,YACP,MACA,EAAE,WAAW,SACJ;EACT,MAAM,eAAe,MAAM;AAE3B,MAAI,UACF,QAAO,iBAAiB;EAE1B,MAAM,OAAO,OAAO,WAAW,cAAc,OAAO,SAAS,SAAS;EACtE,MAAM,0BAA0B,IAAI,IAAI,MAAM,KAAK,CAAC;AAEpD,MAAI,MACF,QAAO,iBAAiB;AAE1B,SAAO,aAAa,WAAW,wBAAwB;;AAGzD,OAAM,OAAO,cAAc;AAE3B,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"use-tab-routing.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-routing.ts"],"sourcesContent":["import type { RouteMatchOptions } from '@/components/tabs/tab-props';\nimport { type RouteLocationRaw, useRoute, useRouter } from 'vue-router';\n\ninterface UseTabRoutingOptions {\n  /** Callback invoked when the route changes, to re-sync the active tab */\n  onRouteChange: () => void;\n}\n\ninterface UseTabRoutingReturn {\n  /** Whether vue-router is available in the app context */\n  hasRouter: boolean;\n  /**\n   * Resolves a route location and returns its full path, or undefined\n   * if the router is not available or the value is not a valid route location.\n   */\n  resolveRoute: (to: unknown) => string | undefined;\n  /**\n   * Checks whether a given path matches the current route.\n   * Supports exact path, exact route, and prefix matching.\n   */\n  isPathMatch: (path: string, options: RouteMatchOptions) => boolean;\n}\n\nexport function isRouteLocation(value: unknown): value is RouteLocationRaw {\n  return typeof value === 'string' || (typeof value === 'object' && value !== null);\n}\n\n/**\n * Composable that manages vue-router integration for the RuiTabs component.\n * Provides route resolution and path matching utilities, and watches for\n * route changes to notify the parent component.\n */\nexport function useTabRouting({ onRouteChange }: UseTabRoutingOptions): UseTabRoutingReturn {\n  const hasRouter = getCurrentInstance()?.appContext.config.globalProperties.$router !== undefined;\n\n  if (!hasRouter) {\n    return {\n      hasRouter,\n      resolveRoute: () => undefined,\n      isPathMatch: () => false,\n    };\n  }\n\n  const route = useRoute();\n  const router = useRouter();\n\n  function resolveRoute(to: unknown): string | undefined {\n    if (!isRouteLocation(to))\n      return undefined;\n\n    return router.resolve(to).fullPath;\n  }\n\n  function isPathMatch(\n    path: string,\n    { exactPath, exact }: RouteMatchOptions,\n  ): boolean {\n    const currentRoute = route.fullPath;\n\n    if (exactPath)\n      return currentRoute === path;\n\n    const base = typeof window !== 'undefined' ? window.location.origin : 'http://localhost';\n    const routeWithoutQueryParams = new URL(path, base).pathname;\n\n    if (exact)\n      return currentRoute === routeWithoutQueryParams;\n\n    return currentRoute.startsWith(routeWithoutQueryParams);\n  }\n\n  watch(route, onRouteChange);\n\n  return {\n    hasRouter,\n    resolveRoute,\n    isPathMatch,\n  };\n}\n"],"mappings":";;;AAuBA,SAAgB,gBAAgB,OAA2C;CACzE,OAAO,OAAO,UAAU,YAAa,OAAO,UAAU,YAAY,UAAU;AAC9E;;;;;;AAOA,SAAgB,cAAc,EAAE,iBAA4D;CAC1F,MAAM,YAAY,mBAAmB,CAAC,EAAE,WAAW,OAAO,iBAAiB,YAAY,KAAA;CAEvF,IAAI,CAAC,WACH,OAAO;EACL;EACA,oBAAoB,KAAA;EACpB,mBAAmB;CACrB;CAGF,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,UAAU;CAEzB,SAAS,aAAa,IAAiC;EACrD,IAAI,CAAC,gBAAgB,EAAE,GACrB,OAAO,KAAA;EAET,OAAO,OAAO,QAAQ,EAAE,CAAC,CAAC;CAC5B;CAEA,SAAS,YACP,MACA,EAAE,WAAW,SACJ;EACT,MAAM,eAAe,MAAM;EAE3B,IAAI,WACF,OAAO,iBAAiB;EAE1B,MAAM,OAAO,OAAO,WAAW,cAAc,OAAO,SAAS,SAAS;EACtE,MAAM,0BAA0B,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC;EAEpD,IAAI,OACF,OAAO,iBAAiB;EAE1B,OAAO,aAAa,WAAW,uBAAuB;CACxD;CAEA,MAAM,OAAO,aAAa;CAE1B,OAAO;EACL;EACA;EACA;CACF;AACF"}

package/dist/components/tabs/tabs/use-tab-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n  /** The scrollable bar container element */\n  bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** The wrapper element containing the tab buttons */\n  wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** Getter for the current vertical orientation state */\n  vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n  showArrows: Readonly<Ref<boolean>>;\n  prevArrowDisabled: ComputedRef<boolean>;\n  nextArrowDisabled: ComputedRef<boolean>;\n  onPrevSliderClick: () => void;\n  onNextSliderClick: () => void;\n  keepActiveTabVisible: () => void;\n}\n\n/**\n * Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n  const showArrows = shallowRef<boolean>(false);\n\n  const { width: barWidth, height: barHeight } = useElementSize(bar);\n  const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n  const { top, bottom, left, right } = toRefs(arrivedState);\n\n  function checkOverflow(): void {\n    const elem = get(wrapper);\n    const barElem = get(bar);\n    if (!elem || !barElem) {\n      set(showArrows, false);\n      return;\n    }\n\n    const overflows = toValue(vertical)\n      ? elem.scrollHeight > barElem.offsetHeight\n      : elem.scrollWidth > barElem.offsetWidth;\n\n    set(showArrows, overflows);\n  }\n\n  useResizeObserver(bar, checkOverflow);\n  useResizeObserver(wrapper, () => {\n    checkOverflow();\n    keepActiveTabVisible();\n  });\n\n  const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n  const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n  function scrollToActiveTab(): void {\n    if (!get(showArrows))\n      return;\n\n    const elem = get(wrapper);\n    const barElem = get(bar);\n\n    if (!elem || !barElem)\n      return;\n\n    const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n    if (!activeTab)\n      return;\n\n    const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n    const childTop = activeTab.offsetTop - elem.offsetTop;\n\n    barElem.scrollTo({\n      left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n      top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n      behavior: 'smooth',\n    });\n  }\n\n  function keepActiveTabVisible(): void {\n    nextTick(scrollToActiveTab);\n  }\n\n  function onPrevSliderClick(): void {\n    if (!toValue(vertical))\n      set(x, get(x) - get(barWidth));\n    else\n      set(y, get(y) - get(barHeight));\n  }\n\n  function onNextSliderClick(): void {\n    if (!toValue(vertical))\n      set(x, get(x) + get(barWidth));\n    else\n      set(y, get(y) + get(barHeight));\n  }\n\n  return {\n    showArrows: readonly(showArrows),\n    prevArrowDisabled,\n    nextArrowDisabled,\n    onPrevSliderClick,\n    onNextSliderClick,\n    keepActiveTabVisible,\n  };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,MAAM;CAE7C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,IAAI;CAClE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,UAAU,CAAC;CACrE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,aAAa;CAEzD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,QAAQ;EACzB,MAAM,UAAU,MAAI,IAAI;AACxB,MAAI,CAAC,QAAQ,CAAC,SAAS;AACrB,SAAI,YAAY,MAAM;AACtB;;AAOF,QAAI,YAJc,QAAQ,SAAS,GAC/B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ,YAEL;;AAG5B,mBAAkB,KAAK,cAAc;AACrC,mBAAkB,eAAe;AAC/B,iBAAe;AACf,wBAAsB;GACtB;CAEF,MAAM,oBAAoB,eAAwB,QAAQ,SAAS,GAAG,MAAI,IAAI,GAAG,MAAI,KAAK,CAAC;CAE3F,MAAM,oBAAoB,eAAwB,QAAQ,SAAS,GAAG,MAAI,OAAO,GAAG,MAAI,MAAM,CAAC;CAE/F,SAAS,oBAA0B;AACjC,MAAI,CAAC,MAAI,WAAW,CAClB;EAEF,MAAM,OAAO,MAAI,QAAQ;EACzB,MAAM,UAAU,MAAI,IAAI;AAExB,MAAI,CAAC,QAAQ,CAAC,QACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,oBAAoB;AAEtE,MAAI,CAAC,UACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;AAE5C,UAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,UAAU,EAAE,YAAY,UAAU,cAAc,QAAQ,YAAY;GAChH,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,SAAS,EAAE,WAAW,UAAU,eAAe,QAAQ,aAAa;GAC9G,UAAU;GACX,CAAC;;CAGJ,SAAS,uBAA6B;AACpC,WAAS,kBAAkB;;CAG7B,SAAS,oBAA0B;AACjC,MAAI,CAAC,QAAQ,SAAS,CACpB,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,SAAS,CAAC;MAE9B,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,UAAU,CAAC;;CAGnC,SAAS,oBAA0B;AACjC,MAAI,CAAC,QAAQ,SAAS,CACpB,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,SAAS,CAAC;MAE9B,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,UAAU,CAAC;;AAGnC,QAAO;EACL,YAAY,SAAS,WAAW;EAChC;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n  /** The scrollable bar container element */\n  bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** The wrapper element containing the tab buttons */\n  wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** Getter for the current vertical orientation state */\n  vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n  showArrows: Readonly<Ref<boolean>>;\n  prevArrowDisabled: ComputedRef<boolean>;\n  nextArrowDisabled: ComputedRef<boolean>;\n  onPrevSliderClick: () => void;\n  onNextSliderClick: () => void;\n  keepActiveTabVisible: () => void;\n}\n\n/**\n * Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n  const showArrows = shallowRef<boolean>(false);\n\n  const { width: barWidth, height: barHeight } = useElementSize(bar);\n  const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n  const { top, bottom, left, right } = toRefs(arrivedState);\n\n  function checkOverflow(): void {\n    const elem = get(wrapper);\n    const barElem = get(bar);\n    if (!elem || !barElem) {\n      set(showArrows, false);\n      return;\n    }\n\n    const overflows = toValue(vertical)\n      ? elem.scrollHeight > barElem.offsetHeight\n      : elem.scrollWidth > barElem.offsetWidth;\n\n    set(showArrows, overflows);\n  }\n\n  useResizeObserver(bar, checkOverflow);\n  useResizeObserver(wrapper, () => {\n    checkOverflow();\n    keepActiveTabVisible();\n  });\n\n  const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n  const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n  function scrollToActiveTab(): void {\n    if (!get(showArrows))\n      return;\n\n    const elem = get(wrapper);\n    const barElem = get(bar);\n\n    if (!elem || !barElem)\n      return;\n\n    const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n    if (!activeTab)\n      return;\n\n    const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n    const childTop = activeTab.offsetTop - elem.offsetTop;\n\n    barElem.scrollTo({\n      left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n      top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n      behavior: 'smooth',\n    });\n  }\n\n  function keepActiveTabVisible(): void {\n    nextTick(scrollToActiveTab);\n  }\n\n  function onPrevSliderClick(): void {\n    if (!toValue(vertical))\n      set(x, get(x) - get(barWidth));\n    else\n      set(y, get(y) - get(barHeight));\n  }\n\n  function onNextSliderClick(): void {\n    if (!toValue(vertical))\n      set(x, get(x) + get(barWidth));\n    else\n      set(y, get(y) + get(barHeight));\n  }\n\n  return {\n    showArrows: readonly(showArrows),\n    prevArrowDisabled,\n    nextArrowDisabled,\n    onPrevSliderClick,\n    onNextSliderClick,\n    keepActiveTabVisible,\n  };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,MAAI,YAAY,KAAK;GACrB;EACF;EAMA,MAAI,YAJc,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ,WAEN;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,GAAG,IAAI,MAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,MAAM,IAAI,MAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,MAAI,UAAU,GACjB;EAEF,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -19,9 +19,9 @@ var _hoisted_5 = ["aria-label"];
 var _hoisted_6 = ["aria-selected", "onClick"];
 var FULL_CIRCLE = 360;
 var TWELVE_HOURS = 12;
-var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "RuiTimePicker",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		accuracy: { default: () => TimeAccuracy.MINUTE },
 		borderless: {
 			type: Boolean,