@rotki/ui-library 2.14.1 → 2.16.0

package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTablePagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tables/RuiTablePagination.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiMenuSelect from '@/components/forms/select/RuiMenuSelect.vue';\nimport RuiTextField from '@/components/forms/text-field/RuiTextField.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TablePaginationData, usePaginationNavigation } from '@/components/tables/use-pagination-navigation';\nimport { useTable } from '@/composables/defaults/table';\nimport { tv } from '@/utils/tv';\n\nexport type { TablePaginationData };\n\nexport interface Props {\n  dense?: boolean;\n  disablePerPage?: boolean;\n  loading?: boolean;\n  /**\n   * Maximum number of pages before the jump-to-page dropdown is replaced\n   * with a numeric input. Set to `0` to always use the input, or a very\n   * large number to always use the dropdown. Defaults to `500` — past that\n   * materialising the full range list stalls the main thread.\n   */\n  rangesThreshold?: number;\n}\n\nconst modelValue = defineModel<TablePaginationData>({ required: true });\n\nconst {\n  dense = false,\n  loading = false,\n  disablePerPage = false,\n  rangesThreshold = 500,\n} = defineProps<Props>();\n\nconst paginationStyles = tv({\n  slots: {\n    wrapper: 'relative flex flex-wrap items-center justify-end gap-x-4 gap-y-0',\n    limit: 'flex items-center space-x-2 text-caption',\n    ranges: 'flex items-center space-x-2 text-caption pr-2',\n    pageInput: 'w-20',\n    sectionLabel: 'text-rui-text-secondary whitespace-nowrap py-3',\n    indicator: 'text-rui-text text-caption whitespace-nowrap',\n    navigation: 'flex items-center',\n  },\n  variants: {\n    dense: {\n      true: {\n        wrapper: 'gap-x-2',\n      },\n    },\n  },\n});\n\nconst ui = computed<ReturnType<typeof paginationStyles>>(() => paginationStyles({ dense }));\n\nconst tableDefaults = useTable();\n\nconst {\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} = usePaginationNavigation(modelValue, tableDefaults, () => rangesThreshold);\n\nconst pageDraft = ref<string>(String(get(currentRange)));\n\nwatch(currentRange, (value) => {\n  set(pageDraft, String(value));\n});\n\nfunction commitPageInput(): void {\n  const parsed = Number.parseInt(get(pageDraft), 10);\n  const maxPage = get(pages);\n  if (!Number.isFinite(parsed) || maxPage === 0) {\n    set(pageDraft, String(get(currentRange)));\n    return;\n  }\n  const clamped = Math.min(Math.max(parsed, 1), maxPage);\n  if (clamped !== get(currentRange))\n    set(currentRange, clamped);\n  set(pageDraft, String(clamped));\n}\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <div\n      :class=\"ui.limit()\"\n      data-id=\"table-pagination-limit-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">Rows per page:</span>\n      <RuiMenuSelect\n        v-model=\"currentLimit\"\n        :options=\"limits\"\n        :disabled=\"loading || disablePerPage\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"limit\"\n        key-attr=\"limit\"\n        text-attr=\"limit\"\n        hide-details\n        dense\n        data-id=\"table-pagination-limit\"\n      />\n    </div>\n    <div\n      :class=\"ui.ranges()\"\n      data-id=\"table-pagination-ranges-section\"\n    >\n      <span :class=\"ui.sectionLabel()\">{{ useInputJump ? 'Page' : 'Items #' }}</span>\n      <RuiTextField\n        v-if=\"useInputJump\"\n        v-model=\"pageDraft\"\n        :disabled=\"loading\"\n        :class=\"ui.pageInput()\"\n        type=\"number\"\n        min=\"1\"\n        :max=\"pages\"\n        inputmode=\"numeric\"\n        hide-details\n        dense\n        variant=\"outlined\"\n        data-id=\"table-pagination-ranges-input\"\n        @blur=\"commitPageInput()\"\n        @keydown.enter=\"commitPageInput()\"\n      />\n      <RuiMenuSelect\n        v-else-if=\"ranges.length > 0\"\n        v-model=\"currentRange\"\n        :options=\"ranges\"\n        :disabled=\"loading\"\n        label-class=\"!text-xs !min-h-8\"\n        name=\"ranges\"\n        key-attr=\"page\"\n        text-attr=\"text\"\n        hide-details\n        dense\n        data-id=\"table-pagination-ranges\"\n      />\n      <span :class=\"ui.indicator()\">\n        {{ indicatorText }}\n      </span>\n    </div>\n    <div\n      :class=\"ui.navigation()\"\n      data-id=\"table-pagination-navigation\"\n    >\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-first\"\n        @click=\"onFirst()\"\n      >\n        <RuiIcon name=\"lu-chevrons-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasPrev || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-prev\"\n        @click=\"onPrev()\"\n      >\n        <RuiIcon name=\"lu-chevron-left\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-next\"\n        @click=\"onNext()\"\n      >\n        <RuiIcon name=\"lu-chevron-right\" />\n      </RuiButton>\n      <RuiButton\n        :size=\"dense ? 'sm' : undefined\"\n        :disabled=\"!hasNext || loading\"\n        variant=\"text\"\n        icon\n        data-id=\"table-pagination-last\"\n        @click=\"onLast()\"\n      >\n        <RuiIcon name=\"lu-chevrons-right\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,155 @@
+export { getAlignClass } from '../../components/tables/table-props.js';
+export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
+    outlined: {
+        true: {
+            wrapper: string;
+        };
+    };
+    rounded: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    dense: {
+        true: {
+            td: string;
+        };
+    };
+    striped: {
+        true: {
+            tbody: string;
+        };
+    };
+    rowVariant: {
+        selected: {
+            tr: string;
+        };
+        empty: {
+            tr: string;
+        };
+        expandable: {
+            tr: string;
+        };
+        group: {
+            tr: string;
+        };
+    };
+}, {
+    wrapper: string;
+    scroller: string;
+    table: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    checkbox: string;
+    tbodyLoader: string;
+    tbodyLoaderContent: string;
+}, undefined, {
+    outlined: {
+        true: {
+            wrapper: string;
+        };
+    };
+    rounded: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    dense: {
+        true: {
+            td: string;
+        };
+    };
+    striped: {
+        true: {
+            tbody: string;
+        };
+    };
+    rowVariant: {
+        selected: {
+            tr: string;
+        };
+        empty: {
+            tr: string;
+        };
+        expandable: {
+            tr: string;
+        };
+        group: {
+            tr: string;
+        };
+    };
+}, {
+    wrapper: string;
+    scroller: string;
+    table: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    checkbox: string;
+    tbodyLoader: string;
+    tbodyLoaderContent: string;
+}, import("tailwind-variants").TVReturnType<{
+    outlined: {
+        true: {
+            wrapper: string;
+        };
+    };
+    rounded: {
+        sm: {
+            wrapper: string;
+        };
+        md: {
+            wrapper: string;
+        };
+        lg: {
+            wrapper: string;
+        };
+    };
+    dense: {
+        true: {
+            td: string;
+        };
+    };
+    striped: {
+        true: {
+            tbody: string;
+        };
+    };
+    rowVariant: {
+        selected: {
+            tr: string;
+        };
+        empty: {
+            tr: string;
+        };
+        expandable: {
+            tr: string;
+        };
+        group: {
+            tr: string;
+        };
+    };
+}, {
+    wrapper: string;
+    scroller: string;
+    table: string;
+    tbody: string;
+    tr: string;
+    td: string;
+    checkbox: string;
+    tbodyLoader: string;
+    tbodyLoaderContent: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,36 @@
+import { tv } from "../../utils/tv.js";
+import "./table-props.js";
+//#region src/components/tables/data-table-styles.ts
+var dataTableStyles = tv({
+	slots: {
+		wrapper: "relative divide-y divide-black/[0.12] dark:divide-white/[0.12] overflow-hidden",
+		scroller: "overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)]",
+		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]",
+		tbody: "divide-y divide-black/[0.12] dark:divide-white/[0.12]",
+		tr: "hover:bg-black/[0.04] dark:hover:bg-white/[0.04]",
+		td: "p-4 text-rui-text text-body-2 [text-wrap:initial]",
+		checkbox: "px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0",
+		tbodyLoader: "text-center",
+		tbodyLoaderContent: "flex items-center justify-center min-h-56 py-8"
+	},
+	variants: {
+		outlined: { true: { wrapper: "border border-black/[0.12] dark:border-white/[0.12]" } },
+		rounded: {
+			sm: { wrapper: "rounded-[.25rem]" },
+			md: { wrapper: "rounded-[.75rem]" },
+			lg: { wrapper: "rounded-[1rem]" }
+		},
+		dense: { true: { td: "py-[0.38rem]" } },
+		striped: { true: { tbody: "even:[&>tr]:bg-rui-grey-50 dark:even:[&>tr]:bg-rui-grey-900" } },
+		rowVariant: {
+			selected: { tr: "bg-rui-primary/[0.08] dark:bg-rui-dark-primary/[0.08]" },
+			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]" }
+		}
+	}
+});
+//#endregion
+export { dataTableStyles };
+
+//# sourceMappingURL=data-table-styles.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+export declare const TableAlign: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};
+export type TableAlign = (typeof TableAlign)[keyof typeof TableAlign];
+export declare const SortDirection: {
+    readonly asc: "asc";
+    readonly desc: "desc";
+};
+export type SortDirection = (typeof SortDirection)[keyof typeof SortDirection];
+/**
+ * Returns alignment Tailwind classes for a table cell.
+ * When sortable, adds reduced padding for the sort button.
+ */
+export declare function getAlignClass(align?: TableAlign, sortable?: boolean): string;
+/**
+ * Returns extra class for sort button when column is center-aligned.
+ */
+export declare function getSortButtonAlignClass(align?: TableAlign): string | undefined;

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

@@ -0,0 +1,39 @@
+//#region src/components/tables/table-props.ts
+var TableAlign = {
+	start: "start",
+	center: "center",
+	end: "end"
+};
+var SortDirection = {
+	asc: "asc",
+	desc: "desc"
+};
+var ALIGN_CLASSES = {
+	[TableAlign.start]: "text-left rtl:text-right",
+	[TableAlign.center]: "text-center",
+	[TableAlign.end]: "text-right rtl:text-left"
+};
+var SORTABLE_ALIGN_CLASSES = {
+	[TableAlign.start]: "pl-3",
+	[TableAlign.center]: "px-3",
+	[TableAlign.end]: "pr-3"
+};
+/**
+* Returns alignment Tailwind classes for a table cell.
+* When sortable, adds reduced padding for the sort button.
+*/
+function getAlignClass(align = TableAlign.start, sortable) {
+	const classes = ALIGN_CLASSES[align];
+	if (sortable) return `${classes} ${SORTABLE_ALIGN_CLASSES[align]}`;
+	return classes;
+}
+/**
+* Returns extra class for sort button when column is center-aligned.
+*/
+function getSortButtonAlignClass(align = TableAlign.start) {
+	return align === TableAlign.center ? "ml-6" : void 0;
+}
+//#endregion
+export { SortDirection, TableAlign, getAlignClass, getSortButtonAlignClass };
+
+//# sourceMappingURL=table-props.js.map

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

@@ -0,0 +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"}

package/dist/components/tables/table_no_data_placeholder.js

@@ -0,0 +1,6 @@
+//#region src/components/tables/table_no_data_placeholder.svg
+var table_no_data_placeholder_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23eaeaeb'/%3e%3cg%20fill='%23f2f2f3'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cg%20filter='url(%23B)'%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23C)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23D)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%23f2f2f3'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23eaeaeb'/%3e%3c/g%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23E)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23fafafa'%20stroke='%23eaeaeb'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23000'%20fill-opacity='.3'/%3e%3cg%20clip-path='url(%23F)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='B'%20x='14'%20y='0'%20width='124'%20height='130.19'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='A'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'%20result='C'/%3e%3cfeOffset%20dy='8'/%3e%3cfeGaussianBlur%20stdDeviation='4'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.03%200'/%3e%3cfeBlend%20in2='A'%20result='C'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'/%3e%3cfeOffset%20dy='20'/%3e%3cfeGaussianBlur%20stdDeviation='12'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.08%200'/%3e%3cfeBlend%20in2='C'/%3e%3cfeBlend%20in='SourceGraphic'/%3e%3c/filter%3e%3clinearGradient%20id='C'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23dee1e8'/%3e%3cstop%20offset='1'%20stop-color='%23eff1f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e7ec'/%3e%3cstop%20offset='1'%20stop-color='%23f2f4f7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='E'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='F'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+//#endregion
+export { table_no_data_placeholder_default as default };
+
+//# sourceMappingURL=table_no_data_placeholder.js.map

package/dist/components/tables/table_no_data_placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_no_data_placeholder.js","names":[],"sources":["../../../src/components/tables/table_no_data_placeholder.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23eaeaeb'/%3e%3cg%20fill='%23f2f2f3'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cg%20filter='url(%23B)'%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23C)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23D)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%23f2f2f3'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23eaeaeb'/%3e%3c/g%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23E)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23fafafa'%20stroke='%23eaeaeb'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23000'%20fill-opacity='.3'/%3e%3cg%20clip-path='url(%23F)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='B'%20x='14'%20y='0'%20width='124'%20height='130.19'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='A'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'%20result='C'/%3e%3cfeOffset%20dy='8'/%3e%3cfeGaussianBlur%20stdDeviation='4'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.03%200'/%3e%3cfeBlend%20in2='A'%20result='C'/%3e%3cfeColorMatrix%20in='SourceAlpha'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200'%20result='B'/%3e%3cfeMorphology%20radius='4'%20in='SourceAlpha'/%3e%3cfeOffset%20dy='20'/%3e%3cfeGaussianBlur%20stdDeviation='12'/%3e%3cfeComposite%20in2='B'%20operator='out'/%3e%3cfeColorMatrix%20values='0%200%200%200%200.0627451%200%200%200%200%200.0941176%200%200%200%200%200.156863%200%200%200%200.08%200'/%3e%3cfeBlend%20in2='C'/%3e%3cfeBlend%20in='SourceGraphic'/%3e%3c/filter%3e%3clinearGradient%20id='C'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23dee1e8'/%3e%3cstop%20offset='1'%20stop-color='%23eff1f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e7ec'/%3e%3cstop%20offset='1'%20stop-color='%23f2f4f7'/%3e%3c/linearGradient%3e%3clinearGradient%20id='E'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='F'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"mappings":";AAAA,IAAA,oCAAe"}

package/dist/components/tables/table_no_data_placeholder_dark.js

@@ -0,0 +1,6 @@
+//#region src/components/tables/table_no_data_placeholder_dark.svg
+var table_no_data_placeholder_dark_default = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23333741'/%3e%3cg%20fill='%231f242f'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23B)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23C)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%231f242f'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23333741'/%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23D)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23161b26'%20stroke='%23333741'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23161b26'/%3e%3cg%20clip-path='url(%23E)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='B'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='E'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+//#endregion
+export { table_no_data_placeholder_dark_default as default };
+
+//# sourceMappingURL=table_no_data_placeholder_dark.js.map

package/dist/components/tables/table_no_data_placeholder_dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table_no_data_placeholder_dark.js","names":[],"sources":["../../../src/components/tables/table_no_data_placeholder_dark.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='152'%20height='124'%20fill='none'%3e%3ccircle%20cx='76'%20cy='58'%20r='52'%20fill='%23333741'/%3e%3cg%20fill='%231f242f'%3e%3ccircle%20cx='21'%20cy='25'%20r='5'/%3e%3ccircle%20cx='18'%20cy='109'%20r='7'/%3e%3ccircle%20cx='145'%20cy='41'%20r='7'/%3e%3ccircle%20cx='134'%20cy='14'%20r='4'/%3e%3c/g%3e%3cpath%20d='M76%2036.063l4.536-1.9-4.535%201.932V90.19l41.795-17.514V18.557l.204-.085-.204-.09v-.091l-.104.045L76.33%200%2034%2018.031l.2.086-.2%2053.899%2042%2018.141V36.063z'%20fill='%23fafafa'/%3e%3cpath%20d='M76%2036.063v54.095L34%2072.017l.2-53.899L76%2036.063z'%20fill='url(%23B)'/%3e%3cpath%20d='M76.001%2036.095V90.19l41.796-17.514V18.29L76.001%2036.095z'%20fill='url(%23C)'/%3e%3cpath%20d='M76%2036.063l42-17.592L76.33%200%2034%2018.031l42%2018.031z'%20fill='%231f242f'/%3e%3cpath%20d='M49.832%2011.287l41.84%2018.211.38%2013.271%2011.706-4.83-.354-13.355L60.327%206.817l-10.495%204.47z'%20fill='%23333741'/%3e%3cmask%20id='A'%20maskUnits='userSpaceOnUse'%20x='52'%20y='68'%20width='48'%20height='48'%20mask-type='alpha'%3e%3cpath%20transform='translate(52%2068)'%20fill='url(%23D)'%20d='M0%200h48v48H0z'/%3e%3c/mask%3e%3cg%20mask='url(%23A)'%3e%3ccircle%20cx='76'%20cy='92'%20r='23.5'%20fill='%23161b26'%20stroke='%23333741'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%23161b26'/%3e%3cg%20clip-path='url(%23E)'%3e%3cpath%20d='M76%2088.667V92m0%203.333h.008M84.334%2092c0%204.602-3.731%208.333-8.333%208.333s-8.333-3.73-8.333-8.333%203.731-8.333%208.333-8.333%208.333%203.731%208.333%208.333z'%20stroke='%23fff'%20stroke-width='1.67'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient%20id='B'%20x1='34'%20y1='72.289'%20x2='50.587'%20y2='27.367'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233b4354'/%3e%3cstop%20offset='1'%20stop-color='%231f242f'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='24'%20y1='0'%20x2='24'%20y2='48'%20gradientUnits='userSpaceOnUse'%3e%3cstop/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3cclipPath%20id='E'%3e%3cpath%20fill='%23fff'%20transform='translate(66%2082)'%20d='M0%200h20v20H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e\""],"mappings":";AAAA,IAAA,yCAAe"}

package/dist/components/tables/use-pagination-navigation.d.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref, WritableComputedRef } from 'vue';
+import type { TableOptions } from '../../composables/defaults/table.js';
+interface LimitEntry {
+    limit: number;
+}
+interface PageRange {
+    page: number;
+    text: string;
+}
+export interface TablePaginationData {
+    page: number;
+    total: number;
+    limit: number;
+    limits?: number[];
+}
+export interface UsePaginationNavigationReturn {
+    limits: ComputedRef<LimitEntry[]>;
+    currentLimit: WritableComputedRef<number>;
+    pages: ComputedRef<number>;
+    ranges: ComputedRef<PageRange[]>;
+    indicatorText: ComputedRef<string>;
+    currentRange: WritableComputedRef<number>;
+    useInputJump: ComputedRef<boolean>;
+    hasPrev: ComputedRef<boolean>;
+    hasNext: ComputedRef<boolean>;
+    onPrev: () => void;
+    onNext: () => void;
+    onFirst: () => void;
+    onLast: () => void;
+}
+export declare function usePaginationNavigation(modelValue: Ref<TablePaginationData>, tableDefaults: TableOptions, rangesThreshold?: MaybeRefOrGetter<number>): UsePaginationNavigationReturn;
+export {};

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

@@ -0,0 +1,88 @@
+import { formatInteger } from "../../utils/helpers.js";
+import { computed, toValue } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/components/tables/use-pagination-navigation.ts
+function usePaginationNavigation(modelValue, tableDefaults, rangesThreshold = 500) {
+	const limits = computed(() => (get(modelValue).limits ?? get(tableDefaults.limits)).map((limit) => ({ limit })));
+	const currentLimit = computed({
+		get: () => get(modelValue).limit,
+		set: (limit) => set(modelValue, {
+			...get(modelValue),
+			limit,
+			page: 1
+		})
+	});
+	const pages = computed(() => {
+		const { limit, total } = get(modelValue);
+		if (!total) return 0;
+		return Math.ceil(total / limit);
+	});
+	function pageRangeText(page) {
+		const { limit, total } = get(modelValue);
+		const start = (page - 1) * limit + 1;
+		const end = Math.min(page * limit, total);
+		return `${formatInteger(start)} - ${formatInteger(end)}`;
+	}
+	const useInputJump = computed(() => {
+		const threshold = toValue(rangesThreshold);
+		return threshold > 0 && get(pages) > threshold;
+	});
+	const ranges = computed(() => {
+		if (get(useInputJump)) return [];
+		return Array.from({ length: get(pages) }, (_, i) => {
+			const page = i + 1;
+			return {
+				page,
+				text: pageRangeText(page)
+			};
+		});
+	});
+	const indicatorText = computed(() => {
+		const { total } = get(modelValue);
+		if (get(useInputJump)) return `of ${formatInteger(get(pages))}`;
+		return total ? `of ${formatInteger(total)}` : `0 of 0`;
+	});
+	const currentRange = computed({
+		get: () => get(modelValue).page,
+		set: (page) => set(modelValue, {
+			...get(modelValue),
+			page
+		})
+	});
+	const hasPrev = computed(() => get(modelValue).page > 1);
+	const hasNext = computed(() => get(pages) > get(modelValue).page);
+	function goToPage(page) {
+		set(currentRange, page);
+	}
+	function onPrev() {
+		if (get(hasPrev)) goToPage(get(modelValue).page - 1);
+	}
+	function onNext() {
+		if (get(hasNext)) goToPage(get(modelValue).page + 1);
+	}
+	function onFirst() {
+		if (get(hasPrev)) goToPage(1);
+	}
+	function onLast() {
+		if (get(hasNext)) goToPage(get(pages));
+	}
+	return {
+		limits,
+		currentLimit,
+		pages,
+		ranges,
+		indicatorText,
+		currentRange,
+		useInputJump,
+		hasPrev,
+		hasNext,
+		onPrev,
+		onNext,
+		onFirst,
+		onLast
+	};
+}
+//#endregion
+export { usePaginationNavigation };
+
+//# sourceMappingURL=use-pagination-navigation.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+import RuiTab_vue_vue_type_script_setup_true_lang_default from "./RuiTab.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tabs/tab/RuiTab.vue
+var RuiTab_default = RuiTab_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiTab_default as default };
+
+//# sourceMappingURL=RuiTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTab.js","names":[],"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      [TabLayout.vertical]: '!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":""}

package/dist/components/tabs/tab/RuiTab.vue.d.ts

@@ -1,20 +1,29 @@
+import type { RouteLocationRaw } from 'vue-router';
 import type { ContextColorsType } from '../../../consts/colors.js';
-import { type RouteLocationRaw } from 'vue-router';
+import type { VueClassValue } from '../../../types/class-value';
+import { TabAlignment, TabIndicatorPosition } from '../../../components/tabs/tab-props.js';
+export interface RuiTabClassNames {
+    root?: VueClassValue;
+    active?: VueClassValue;
+}
 export interface Props {
     color?: ContextColorsType;
     disabled?: boolean;
     grow?: boolean;
     value?: number | string;
     active?: boolean;
+    classNames?: RuiTabClassNames;
+    /** @deprecated Use `classNames.active` instead */
     activeClass?: string;
     link?: boolean;
     target?: string;
     to?: RouteLocationRaw;
     exact?: boolean;
+    /** @deprecated No longer used — vue-router's `useLink` handles route matching internally */
     exactPath?: boolean;
     vertical?: boolean;
-    align?: 'start' | 'center' | 'end';
-    indicatorPosition?: 'start' | 'end';
+    align?: TabAlignment;
+    indicatorPosition?: TabIndicatorPosition;
 }
 type __VLS_Slots = {
     default?: (props?: object) => any;