npm - @rotki/ui-library - Versions diffs - 2.27.0 → 3.0.0-beta.1 - Mend

@rotki/ui-library 2.27.0 → 3.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (391) hide show

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

	@@ -1 +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 const dataTableStyles = tv({\n slots: {\n // `clip`, not `hidden`: a ~~hidden-overflow~~ ~~flex~~ item ~~may shrink~~ below its rows ~~and~~ ~~hide~~ ~~them~~\n wrapper: 'relative ~~divide~~-y ~~divide~~-~~black/[~~0~~.12]~~ ~~dark~~:~~divide~~-~~white/[0.12]~~ overflow-clip',\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: '[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]',\n checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n tbodyLoader: 'text-center',\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: {},\n false: {},\n },\n // `:where()` keeps ~~the~~ ~~stripe~~ below every row state (selected, hover, expanded, group)\n striped: {\n true: { tbody: '[:where(&>tr:nth-child(even))]:bg-rui-~~grey~~-50 dark:[:where(&>tr:nth-child(even))]: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 // ~~`!border-t-0`~~ ~~drops~~ the ~~divider~~ so the ~~panel~~ ~~joins~~ ~~the~~ ~~row~~ ~~that~~ ~~opened~~ it\n expandable: { tr: 'bg-rui-~~grey~~-50 hover:bg-rui-~~grey~~-50 dark:bg-white/[0.03] dark:hover:bg-white/[0.03] !border-t-0' },\n expandedParent: { tr: 'bg-rui-~~grey~~-50 dark:bg-white/[0.03]' },\n group: { tr: 'bg-rui-~~grey~~-100 dark:bg-white/[0.05]' },\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 A fixed row height keeps a row of plain text as tall as one holding an\n * icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`\n * (`py-0` is common) still wins at any stylesheet order, and each density\n * sets its own because the class merger cannot dedupe these.\n */\n compoundVariants: [\n { dense: false, mobile: false, class: { td: '[:where(&)]:py-3 [:where(&)]:h-~~[3.25rem]~~' } },\n { dense: true, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-9' } },\n ],\n defaultVariants: {\n dense: false,\n mobile: false,\n },\n});\n"],"mappings":"~~;;AAEA~~,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;~~EACT~~,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;~~EACJ~~,IAAI;EACJ,UAAU;EACV,aAAa;~~CACf~~;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;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EAEA,SAAS,EACP,MAAM,EAAE,OAAO,~~oGAAoG,EACrH~~;EACA,YAAY;GACV,UAAU,EAAE,IAAI,~~wDAAwD~~;~~GACxE~~,OAAO,EAAE,IAAI,uBAAuB;GAEpC,YAAY,EAAE,IAAI,~~kGAAkG~~;~~GACpH~~,gBAAgB,EAAE,IAAI,~~sCAAsC~~;~~GAC5D~~,OAAO,EAAE,IAAI,~~uCAAuC~~;~~EACtD~~;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;;;;;;;CAOA,kBAAkB,~~CAChB~~;EAAE,OAAO;EAAO,QAAQ;EAAO,OAAO,EAAE,IAAI,~~2CAA2C~~;CAAE,~~GACzF~~;EAAE,OAAO;EAAM,QAAQ;EAAO,OAAO,EAAE,IAAI,mCAAmC;CAAE,CAClF;CACA,iBAAiB;EACf,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}
1	+ {"version":3,"file":"data-table-styles.js","names":[],"sources":["../../../src/components/tables/data-table-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/** A 2px primary rail down the left edge of an open row and its panel; out of flow, so the cell keeps its padding. /\nconst OPEN_ROW_RAIL = '[&>td:first-child]:relative [&>td:first-child]:before:absolute [&>td:first-child]:before:inset-y-0 [&>td:first-child]:before:left-0 [&>td:first-child]:before:w-0.5 [&>td:first-child]:before:bg-rui-primary';\n\n/\n The band of an open row inside another table's panel: a step darker than the outer band, so the two\n * levels never share a grey while the rows between them keep the plain surface.\n /\nconst NESTED_BAND = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:bg-white/[0.14]';\n\n/\n Header and pagination of a nested table, stepped by depth to stand off the band around them (about\n * 1.12:1 or more) as well as their own rows: past the lighter band one panel deep, short of the darker\n * band two deep. Nested bars never stick, so the tint can be translucent over the table's own surface.\n /\nexport const NESTED_BAR = '[[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.13] dark:[[data-id=row-expanded]_&]:bg-white/[0.16] [[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-rui-neutral-950/[0.06] dark:[[data-id=row-expanded]_[data-id=row-expanded]_&]:bg-white/[0.07]';\n\nexport const dataTableStyles = tv({\n slots: {\n // `clip`, not `hidden`, which may shrink the item below its rows; its own surface reads the same anywhere\n wrapper: 'relative between:border-t between:border-b-0 between:border-rui-divider overflow-clip bg-rui-surface',\n // focusable only while it scrolls with nothing to tab to (useKeyboardScroll), ring drawn inside\n scroller: 'overflow-x-auto overflow-y-hidden [clip-path:inset(0_0_0_0)] outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n table: 'min-w-full table-fixed between:border-t between:border-b-0 between:border-rui-divider whitespace-nowrap mx-auto my-0 max-w-fit relative border-rui-divider',\n tbody: 'between:border-t between:border-b-0 between:border-rui-divider',\n tr: 'hover:bg-rui-hover',\n // numbers line up in columns; no slashed zero, which in Inter reads as a second, monospace font beside zero-free values\n td: '[:where(&)]:px-4 text-rui-text text-body-2 tabular-nums [text-wrap:initial]',\n checkbox: 'px-2 w-[3.625rem] max-w-[3.625rem] [&_label]:ml-0',\n tbodyLoader: 'text-center',\n // tinted like the column header, the pair framing the body; opaque, so rows scroll behind a stuck bar\n pagination: `bg-rui-surface-muted ${NESTED_BAR}`,\n },\n variants: {\n sticky: {\n true: { pagination: 'sticky bottom-0 z-rui-raised' },\n },\n outlined: {\n true: { wrapper: 'border border-rui-divider' },\n },\n rounded: {\n sm: { wrapper: 'rounded-rui-sm' },\n md: { wrapper: 'rounded-rui-card' },\n lg: { wrapper: 'rounded-rui-lg' },\n },\n dense: {\n true: {},\n false: {},\n },\n // a translucent tint under the hover one; `:where()` keeps it below every row state (selected, hover, expanded, group)\n striped: {\n true: { tbody: '[:where(&>tr:nth-child(even))]:bg-rui-neutral-950/[0.03] dark:[:where(&>tr:nth-child(even))]:bg-white/[0.04]' },\n },\n rowVariant: {\n selected: { tr: 'bg-rui-primary-soft' },\n empty: { tr: 'hover:bg-transparent' },\n // a grey band darker than the header so the two never match, a step darker again inside another panel\n expandable: { tr: `bg-rui-neutral-950/[0.07] hover:bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] dark:hover:bg-white/[0.09] ${NESTED_BAND} [[data-id=row-expanded]_&]:hover:bg-rui-neutral-950/[0.11] dark:[[data-id=row-expanded]_&]:hover:bg-white/[0.14] ${OPEN_ROW_RAIL} !border-t-0` },\n expandedParent: { tr: `bg-rui-neutral-950/[0.07] dark:bg-white/[0.09] ${NESTED_BAND} ${OPEN_ROW_RAIL}` },\n group: { tr: 'bg-rui-neutral-100 dark:bg-white/[0.05]' },\n },\n mobile: {\n true: {\n wrapper: 'between:border-t-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 between:border-t-0 border-0',\n tbody: 'block between:border-t-0',\n tr: 'block',\n td: 'block px-4 py-2',\n },\n },\n },\n /\n A fixed row height keeps a row of plain text as tall as one holding an\n * icon button. Padding and floor sit in `:where()` so a consumer's `cellClass`\n * (`py-0` is common) still wins at any stylesheet order, and each density\n * sets its own because the class merger cannot dedupe these.\n */\n compoundVariants: [\n // a 4px inset under the height floor fits a 36px button in a 44px row (a 28px one in a dense 36px row)\n { dense: false, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-11' } },\n { dense: true, mobile: false, class: { td: '[:where(&)]:py-1 [:where(&)]:h-9' } },\n ],\n defaultVariants: {\n dense: false,\n mobile: false,\n },\n});\n"],"mappings":";;;AAGA,IAAM,gBAAgB;;;;;AAMtB,IAAM,cAAc;;;;;;AAOpB,IAAa,aAAa;AAE1B,IAAa,kBAAkB,GAAG;CAChC,OAAO;EAEL,SAAS;EAET,UAAU;EACV,OAAO;EACP,OAAO;EACP,IAAI;EAEJ,IAAI;EACJ,UAAU;EACV,aAAa;EAEb,YAAY,wBAAwB;CACtC;CACA,UAAU;EACR,QAAQ,EACN,MAAM,EAAE,YAAY,+BAA+B,EACrD;EACA,UAAU,EACR,MAAM,EAAE,SAAS,4BAA4B,EAC/C;EACA,SAAS;GACP,IAAI,EAAE,SAAS,iBAAiB;GAChC,IAAI,EAAE,SAAS,mBAAmB;GAClC,IAAI,EAAE,SAAS,iBAAiB;EAClC;EACA,OAAO;GACL,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EAEA,SAAS,EACP,MAAM,EAAE,OAAO,+GAA+G,EAChI;EACA,YAAY;GACV,UAAU,EAAE,IAAI,sBAAsB;GACtC,OAAO,EAAE,IAAI,uBAAuB;GAEpC,YAAY,EAAE,IAAI,6GAA6G,YAAY,oHAAoH,cAAc,cAAc;GAC3R,gBAAgB,EAAE,IAAI,kDAAkD,YAAY,GAAG,gBAAgB;GACvG,OAAO,EAAE,IAAI,0CAA0C;EACzD;EACA,QAAQ,EACN,MAAM;GACJ,SAAS;GACT,UAAU;GACV,OAAO;GACP,OAAO;GACP,IAAI;GACJ,IAAI;EACN,EACF;CACF;;;;;;;CAOA,kBAAkB,CAEhB;EAAE,OAAO;EAAO,QAAQ;EAAO,OAAO,EAAE,IAAI,oCAAoC;CAAE,GAClF;EAAE,OAAO;EAAM,QAAQ;EAAO,OAAO,EAAE,IAAI,mCAAmC;CAAE,CAClF;CACA,iBAAiB;EACf,OAAO;EACP,QAAQ;CACV;AACF,CAAC"}

package/dist/components/tables/table_no_data_placeholder.js CHANGED Viewed

@@ -1,5 +1,5 @@
 //#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";
+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='%23e4e4e7'/%3e%3cg%20fill='%23f4f4f5'%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='%23f4f4f5'/%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='%23e4e4e7'/%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='%23e4e4e7'/%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.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%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.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%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='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23f4f4f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23fafafa'/%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 };

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

	@@ -1 +1 @@
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"}
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='%23e4e4e7'/%3e%3cg%20fill='%23f4f4f5'%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='%23f4f4f5'/%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='%23e4e4e7'/%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='%23e4e4e7'/%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.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%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.0352941%200%200%200%200%200.0352941%200%200%200%200%200.0431373%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='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23f4f4f5'/%3e%3c/linearGradient%3e%3clinearGradient%20id='D'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23e4e4e7'/%3e%3cstop%20offset='1'%20stop-color='%23fafafa'/%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 CHANGED Viewed

@@ -1,5 +1,5 @@
 //#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";
+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='%233f3f46'/%3e%3cg%20fill='%2327272a'%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='%2327272a'/%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='%233f3f46'/%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='%2318181b'%20stroke='%233f3f46'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%2318181b'/%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='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%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 };

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

	@@ -1 +1 @@
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"}
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='%233f3f46'/%3e%3cg%20fill='%2327272a'%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='%2327272a'/%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='%233f3f46'/%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='%2318181b'%20stroke='%233f3f46'/%3e%3c/g%3e%3crect%20x='60'%20y='76'%20width='32'%20height='32'%20rx='16'%20fill='%2318181b'/%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='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%3e%3c/linearGradient%3e%3clinearGradient%20id='C'%20x1='76'%20y1='37.154'%20x2='123.359'%20y2='46.583'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2352525b'/%3e%3cstop%20offset='1'%20stop-color='%2327272a'/%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/tabs/tab/RuiTab.js.map CHANGED Viewed

	@@ -1 +1 @@
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 // ~~`min-h`~~ ~~keeps~~ the ~~48px~~ ~~floor~~ of ~~the~~ ~~horizontal~~ ~~layout~~ ~~while~~ ~~letting~~ ~~richer~~ ~~content~~ ~~grow~~ ~~instead~~ of ~~clipping~~\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":""}
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 { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn, 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 link?: boolean;\n target?: string;\n to?: RouteLocationRaw;\n exact?: boolean;\n vertical?: boolean;\n align?: TabAlignment;\n indicatorPosition?: TabIndicatorPosition;\n variant?: TabVariant;\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 link = false,\n to = '',\n target = '_self',\n exact = false,\n vertical = false,\n align = TabAlignment.center,\n indicatorPosition = TabIndicatorPosition.end,\n variant = TabVariant.underline,\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\n/*\n A tab is a plain button or link: RuiTabs draws the active indicator, so a tab\n * only sets its label color, and its hover fill. On the underline bar the fill\n * hugs the label rather than the 40px cell, so the bar stays calm.\n */\nconst tab = tv({\n slots: {\n root: [\n 'group relative inline-flex shrink-0 items-center whitespace-nowrap rounded-rui-control',\n 'text-sm font-medium text-rui-text-secondary transition-colors duration-150 [--rui-icon-size:1rem]',\n // inset, since the scrolling bar would clip a ring drawn outside the tab\n 'outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n ].join(' '),\n content: 'inline-flex items-center gap-2 rounded-rui-control transition-colors duration-150',\n },\n variants: {\n variant: {\n [TabVariant.underline]: { root: 'px-1', content: 'h-8 px-2' },\n // above the sliding pill, which RuiTabs renders behind the tabs\n [TabVariant.segmented]: { root: 'z-1 h-8 px-3' },\n },\n layout: {\n [TabLayout.horizontal]: {},\n [TabLayout.vertical]: { root: 'w-full' },\n },\n align: {\n start: { root: 'justify-start text-left rtl:justify-end rtl:text-right' },\n center: { root: 'justify-center text-center' },\n end: { root: 'justify-end text-right rtl:justify-start rtl:text-left' },\n },\n grow: {\n true: { root: 'grow' },\n },\n active: {\n true: { root: 'text-rui-text' },\n false: {},\n },\n disabled: {\n true: { root: 'cursor-not-allowed text-rui-text-disabled' },\n false: { root: 'cursor-pointer hover:text-rui-text' },\n },\n },\n compoundVariants: [\n { variant: TabVariant.underline, layout: TabLayout.horizontal, class: { root: 'h-10' } },\n { variant: TabVariant.underline, layout: TabLayout.horizontal, disabled: false, class: { content: 'group-hover:bg-rui-hover' } },\n // a vertical list fills the whole row on hover and keeps that fill on the selected row\n { variant: TabVariant.underline, layout: TabLayout.vertical, class: { root: 'min-h-9 px-3', content: 'h-auto px-0 py-2' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, disabled: false, class: { root: 'hover:bg-rui-hover' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, active: true, class: { root: 'bg-rui-hover' } },\n ],\n defaultVariants: {\n variant: TabVariant.underline,\n layout: TabLayout.horizontal,\n align: 'center',\n active: false,\n disabled: false,\n },\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));\nconst ui = computed<ReturnType<typeof tab>>(() => tab({\n variant,\n layout: get(layout),\n align,\n grow,\n disabled,\n active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n emit('click', value);\n if (navigate && get(isSelf))\n navigate(event);\n}\n</script>\n\n<template>\n <component\n :is=\"isLink ? 'a' : 'button'\"\n :type=\"isLink ? undefined : 'button'\"\n :class=\"[\n ui.root({ class: cn(classNames?.root) }),\n isEffectivelyActive && classNames?.active,\n ]\"\n :data-active-tab=\"isEffectivelyActive \|\| undefined\"\n :data-align=\"align\"\n :data-indicator-position=\"indicatorPosition\"\n :data-vertical=\"vertical \|\| undefined\"\n :data-variant=\"variant\"\n :data-color=\"isEffectivelyActive ? color : undefined\"\n :disabled=\"isLink ? undefined : disabled\"\n :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n :target=\"isLink ? target : undefined\"\n role=\"tab\"\n :aria-selected=\"isEffectivelyActive\"\n :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n v-bind=\"$attrs\"\n @click=\"onClick($event)\"\n >\n <span :class=\"ui.content()\">\n <slot\n v-if=\"slots.prepend\"\n name=\"prepend\"\n />\n <slot />\n <slot\n v-if=\"slots.append\"\n name=\"append\"\n />\n </span>\n </component>\n</template>\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 import type { RouteLocationRaw } from 'vue-router';
 import type { ContextColorsType } from '../../../consts/colors.js';
 import type { VueClassValue } from '../../../types/class-value';
-import { TabAlignment, TabIndicatorPosition } from '../tab-props.js';
+import { TabAlignment, TabIndicatorPosition, TabVariant } from '../tab-props.js';
 export interface RuiTabClassNames {
     root?: VueClassValue;
     active?: VueClassValue;
@@ -13,17 +13,14 @@ export interface Props {
     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?: TabAlignment;
     indicatorPosition?: TabIndicatorPosition;
+    variant?: TabVariant;
 }
 type __VLS_Slots = {
     default?: (props?: object) => any;

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

@@ -1,8 +1,7 @@
-import { tv } from "../../../utils/tv.js";
-import RuiButton_default from "../../buttons/button/RuiButton.js";
-import { TabAlignment, TabIndicatorPosition, TabLayout } from "../tab-props.js";
+import { cn, tv } from "../../../utils/tv.js";
+import { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from "../tab-props.js";
 import { useTabLink } from "./use-tab-link.js";
-import { computed, createBlock, createSlots, defineComponent, mergeProps, openBlock, renderSlot, unref, useId, useSlots, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, 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({
@@ -25,7 +24,6 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			default: false
 		},
 		classNames: {},
-		activeClass: { default: "" },
 		link: {
 			type: Boolean,
 			default: false
@@ -36,72 +34,98 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 			type: Boolean,
 			default: false
 		},
-		exactPath: { type: Boolean },
 		vertical: {
 			type: Boolean,
 			default: false
 		},
 		align: { default: () => TabAlignment.center },
-		indicatorPosition: { default: () => TabIndicatorPosition.end }
+		indicatorPosition: { default: () => TabIndicatorPosition.end },
+		variant: { default: () => TabVariant.underline }
 	},
 	emits: ["click"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const slots = useSlots();
+		/**
+		* A tab is a plain button or link: RuiTabs draws the active indicator, so a tab
+		* only sets its label color, and its hover fill. On the underline bar the fill
+		* hugs the label rather than the 40px cell, so the bar stays calm.
+		*/
 		const tab = tv({
-			base: "min-w-[5.625rem] max-w-[22.5rem] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0 !px-4",
+			slots: {
+				root: [
+					"group relative inline-flex shrink-0 items-center whitespace-nowrap rounded-rui-control",
+					"text-sm font-medium text-rui-text-secondary transition-colors duration-150 [--rui-icon-size:1rem]",
+					"outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2"
+				].join(" "),
+				content: "inline-flex items-center gap-2 rounded-rui-control transition-colors duration-150"
+			},
 			variants: {
+				variant: {
+					[TabVariant.underline]: {
+						root: "px-1",
+						content: "h-8 px-2"
+					},
+					[TabVariant.segmented]: { root: "z-1 h-8 px-3" }
+				},
 				layout: {
-					[TabLayout.horizontal]: "",
-					[TabLayout.vertical]: "!min-h-[3rem] w-full max-w-none"
+					[TabLayout.horizontal]: {},
+					[TabLayout.vertical]: { root: "w-full" }
 				},
 				align: {
-					start: "justify-start text-left rtl:justify-end rtl:text-right",
-					center: "justify-center text-center",
-					end: "justify-end text-right rtl:justify-start rtl:text-left"
+					start: { root: "justify-start text-left rtl:justify-end rtl:text-right" },
+					center: { root: "justify-center text-center" },
+					end: { root: "justify-end text-right rtl:justify-start rtl:text-left" }
 				},
-				grow: { true: "grow max-w-none" },
-				disabled: { true: "cursor-not-allowed" },
+				grow: { true: { root: "grow" } },
 				active: {
-					true: "",
-					false: ""
+					true: { root: "text-rui-text" },
+					false: {}
 				},
-				indicatorPosition: {
-					start: "",
-					end: ""
+				disabled: {
+					true: { root: "cursor-not-allowed text-rui-text-disabled" },
+					false: { root: "cursor-pointer hover:text-rui-text" }
 				}
 			},
 			compoundVariants: [
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					class: { root: "h-10" }
 				},
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					disabled: false,
+					class: { content: "group-hover:bg-rui-hover" }
 				},
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					class: {
+						root: "min-h-9 px-3",
+						content: "h-auto px-0 py-2"
+					}
 				},
 				{
-					active: true,
+					variant: TabVariant.underline,
 					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`
+					disabled: false,
+					class: { root: "hover:bg-rui-hover" }
+				},
+				{
+					variant: TabVariant.underline,
+					layout: TabLayout.vertical,
+					active: true,
+					class: { root: "bg-rui-hover" }
 				}
 			],
 			defaultVariants: {
+				variant: TabVariant.underline,
 				layout: TabLayout.horizontal,
 				align: "center",
-				indicatorPosition: "end",
-				active: false
+				active: false,
+				disabled: false
 			}
 		});
 		const { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({
@@ -112,59 +136,61 @@ var RuiTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCom
 		const layout = computed(() => __props.vertical ? TabLayout.vertical : TabLayout.horizontal);
 		const isSelf = computed(() => __props.target === "_self");
 		const isEffectivelyActive = computed(() => __props.active || get(isRouteActive));
+		const ui = computed(() => tab({
+			variant: __props.variant,
+			layout: get(layout),
+			align: __props.align,
+			grow: __props.grow,
+			disabled: __props.disabled,
+			active: get(isEffectivelyActive)
+		}));
 		function onClick(event) {
+			if (__props.disabled) {
+				event.preventDefault();
+				return;
+			}
 			emit("click", __props.value);
-			if (navigate && get(isSelf) && event) navigate(event);
+			if (navigate && get(isSelf)) navigate(event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(RuiButton_default, mergeProps({
-				class: [unref(tab)({
-					layout: unref(layout),
-					align: __props.align,
-					indicatorPosition: __props.indicatorPosition,
-					grow: __props.grow,
-					disabled: __props.disabled,
-					active: unref(isEffectivelyActive)
-				}), unref(isEffectivelyActive) && (__props.classNames?.active ?? __props.activeClass)],
+			return openBlock(), createBlock(resolveDynamicComponent(unref(isLink) ? "a" : "button"), mergeProps({
+				type: unref(isLink) ? void 0 : "button",
+				class: [unref(ui).root({ class: unref(cn)(__props.classNames?.root) }), unref(isEffectivelyActive) && __props.classNames?.active],
 				"data-active-tab": unref(isEffectivelyActive) || void 0,
 				"data-align": __props.align,
 				"data-indicator-position": __props.indicatorPosition,
 				"data-vertical": __props.vertical || void 0,
-				color: unref(isEffectivelyActive) ? __props.color : void 0,
-				disabled: __props.disabled,
-				href: unref(isLink) && !unref(isSelf) ? unref(linkHref) : void 0,
+				"data-variant": __props.variant,
+				"data-color": unref(isEffectivelyActive) ? __props.color : void 0,
+				disabled: unref(isLink) ? void 0 : __props.disabled,
+				"aria-disabled": unref(isLink) && __props.disabled ? "true" : void 0,
+				href: unref(isLink) && !unref(isSelf) && !__props.disabled ? unref(linkHref) : void 0,
 				target: unref(isLink) ? __props.target : void 0,
-				tag: unref(isLink) ? "a" : void 0,
-				"no-outline": unref(isLink),
 				role: "tab",
 				"aria-selected": unref(isEffectivelyActive),
-				tabindex: "-1",
-				"hide-focus-indicator": "",
-				variant: "text"
-			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => __props.disabled ? void 0 : onClick($event)) }), createSlots({
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-				_: 2
-			}, [slots.prepend ? {
-				name: "prepend",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
-				key: "0"
-			} : void 0, slots.append ? {
-				name: "append",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
-				key: "1"
-			} : void 0]), 1040, [
+				tabindex: unref(isEffectivelyActive) && !__props.disabled ? 0 : -1
+			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => onClick($event)) }), {
+				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(ui).content()) }, [
+					slots.prepend ? renderSlot(_ctx.$slots, "prepend", {}, void 0, void 0, 0) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "default"),
+					slots.append ? renderSlot(_ctx.$slots, "append", {}, void 0, void 0, 1) : createCommentVNode("", true)
+				], 2)]),
+				_: 3
+			}, 16, [
+				"type",
 				"class",
 				"data-active-tab",
 				"data-align",
 				"data-indicator-position",
 				"data-vertical",
-				"color",
+				"data-variant",
+				"data-color",
 				"disabled",
+				"aria-disabled",
 				"href",
 				"target",
-				"tag",
-				"no-outline",
-				"aria-selected"
+				"aria-selected",
+				"tabindex"
 			]);
 		};
 	}

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

	@@ -1 +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`~~ ~~keeps~~ the ~~48px~~ ~~floor~~ of ~~the~~ ~~horizontal~~ ~~layout~~ ~~while~~ ~~letting~~ ~~richer~~ ~~content~~ ~~grow~~ ~~instead~~ of ~~clipping~~\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;~~MAEvB~~,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;;GAIE,OAAA,UAAA,GAAA,~~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;GACAA,~~GAAAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,~~QAAA,WAAW,KAAA,IAAY,~~QAAQ,MAAM,GAAA,CAAA,GAAA~~,YAAA~~;~~IAQ7C~~,SAAA,~~cAAQ~~,~~CAAR~~,~~WAAQ~~,~~KAAA,~~QAAA,~~SAAA~~,~~CAAA~~,~~CAAA;;GALA~~,~~GAAA~~,CAAA,~~MAAM~~,~~UAAA~~;~~IACX~~,~~MAAA;IAED~~,~~IAAA~~,~~cAAuB~~,~~CAAvB,WAAuB,~~KAAA,QAAA,~~SAAA~~,CAAA,~~CAAA;;GAIjB~~,~~IAAA~~,KAAA,GAAA,~~MAAM~~,~~SAAA;IACX~~,~~MAAA;IAED~~,IAAA,~~cAAsB~~,~~CAAtB~~,~~WAAsB,~~KAAA,QAAA,QAAA,CAAA,CAAA"}
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 { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabLink } from '@/components/tabs/tab/use-tab-link';\nimport { cn, 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 link?: boolean;\n target?: string;\n to?: RouteLocationRaw;\n exact?: boolean;\n vertical?: boolean;\n align?: TabAlignment;\n indicatorPosition?: TabIndicatorPosition;\n variant?: TabVariant;\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 link = false,\n to = '',\n target = '_self',\n exact = false,\n vertical = false,\n align = TabAlignment.center,\n indicatorPosition = TabIndicatorPosition.end,\n variant = TabVariant.underline,\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\n/*\n A tab is a plain button or link: RuiTabs draws the active indicator, so a tab\n * only sets its label color, and its hover fill. On the underline bar the fill\n * hugs the label rather than the 40px cell, so the bar stays calm.\n */\nconst tab = tv({\n slots: {\n root: [\n 'group relative inline-flex shrink-0 items-center whitespace-nowrap rounded-rui-control',\n 'text-sm font-medium text-rui-text-secondary transition-colors duration-150 [--rui-icon-size:1rem]',\n // inset, since the scrolling bar would clip a ring drawn outside the tab\n 'outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n ].join(' '),\n content: 'inline-flex items-center gap-2 rounded-rui-control transition-colors duration-150',\n },\n variants: {\n variant: {\n [TabVariant.underline]: { root: 'px-1', content: 'h-8 px-2' },\n // above the sliding pill, which RuiTabs renders behind the tabs\n [TabVariant.segmented]: { root: 'z-1 h-8 px-3' },\n },\n layout: {\n [TabLayout.horizontal]: {},\n [TabLayout.vertical]: { root: 'w-full' },\n },\n align: {\n start: { root: 'justify-start text-left rtl:justify-end rtl:text-right' },\n center: { root: 'justify-center text-center' },\n end: { root: 'justify-end text-right rtl:justify-start rtl:text-left' },\n },\n grow: {\n true: { root: 'grow' },\n },\n active: {\n true: { root: 'text-rui-text' },\n false: {},\n },\n disabled: {\n true: { root: 'cursor-not-allowed text-rui-text-disabled' },\n false: { root: 'cursor-pointer hover:text-rui-text' },\n },\n },\n compoundVariants: [\n { variant: TabVariant.underline, layout: TabLayout.horizontal, class: { root: 'h-10' } },\n { variant: TabVariant.underline, layout: TabLayout.horizontal, disabled: false, class: { content: 'group-hover:bg-rui-hover' } },\n // a vertical list fills the whole row on hover and keeps that fill on the selected row\n { variant: TabVariant.underline, layout: TabLayout.vertical, class: { root: 'min-h-9 px-3', content: 'h-auto px-0 py-2' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, disabled: false, class: { root: 'hover:bg-rui-hover' } },\n { variant: TabVariant.underline, layout: TabLayout.vertical, active: true, class: { root: 'bg-rui-hover' } },\n ],\n defaultVariants: {\n variant: TabVariant.underline,\n layout: TabLayout.horizontal,\n align: 'center',\n active: false,\n disabled: false,\n },\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));\nconst ui = computed<ReturnType<typeof tab>>(() => tab({\n variant,\n layout: get(layout),\n align,\n grow,\n disabled,\n active: get(isEffectivelyActive),\n}));\n\nfunction onClick(event: MouseEvent): void {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n emit('click', value);\n if (navigate && get(isSelf))\n navigate(event);\n}\n</script>\n\n<template>\n <component\n :is=\"isLink ? 'a' : 'button'\"\n :type=\"isLink ? undefined : 'button'\"\n :class=\"[\n ui.root({ class: cn(classNames?.root) }),\n isEffectivelyActive && classNames?.active,\n ]\"\n :data-active-tab=\"isEffectivelyActive \|\| undefined\"\n :data-align=\"align\"\n :data-indicator-position=\"indicatorPosition\"\n :data-vertical=\"vertical \|\| undefined\"\n :data-variant=\"variant\"\n :data-color=\"isEffectivelyActive ? color : undefined\"\n :disabled=\"isLink ? undefined : disabled\"\n :aria-disabled=\"isLink && disabled ? 'true' : undefined\"\n :href=\"isLink && !isSelf && !disabled ? linkHref : undefined\"\n :target=\"isLink ? target : undefined\"\n role=\"tab\"\n :aria-selected=\"isEffectivelyActive\"\n :tabindex=\"isEffectivelyActive && !disabled ? 0 : -1\"\n v-bind=\"$attrs\"\n @click=\"onClick($event)\"\n >\n <span :class=\"ui.content()\">\n <slot\n v-if=\"slots.prepend\"\n name=\"prepend\"\n />\n <slot />\n <slot\n v-if=\"slots.append\"\n name=\"append\"\n />\n </span>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,MAAM,OAAO;EAIb,MAAM,QAAQ,SAAA;;;;;;EAWd,MAAM,MAAM,GAAG;GACb,OAAO;IACL,MAAM;KACJ;KACA;KAEA;IACF,CAAC,CAAC,KAAK,GAAG;IACV,SAAS;GACX;GACA,UAAU;IACR,SAAS;MACN,WAAW,YAAY;MAAE,MAAM;MAAQ,SAAS;KAAW;MAE3D,WAAW,YAAY,EAAE,MAAM,eAAe;IACjD;IACA,QAAQ;MACL,UAAU,aAAa,CAAC;MACxB,UAAU,WAAW,EAAE,MAAM,SAAS;IACzC;IACA,OAAO;KACL,OAAO,EAAE,MAAM,yDAAyD;KACxE,QAAQ,EAAE,MAAM,6BAA6B;KAC7C,KAAK,EAAE,MAAM,yDAAyD;IACxE;IACA,MAAM,EACJ,MAAM,EAAE,MAAM,OAAO,EACvB;IACA,QAAQ;KACN,MAAM,EAAE,MAAM,gBAAgB;KAC9B,OAAO,CAAC;IACV;IACA,UAAU;KACR,MAAM,EAAE,MAAM,4CAA4C;KAC1D,OAAO,EAAE,MAAM,qCAAqC;IACtD;GACF;GACA,kBAAkB;IAChB;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAY,OAAO,EAAE,MAAM,OAAO;IAAE;IACvF;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAY,UAAU;KAAO,OAAO,EAAE,SAAS,2BAA2B;IAAE;IAE/H;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAU,OAAO;MAAE,MAAM;MAAgB,SAAS;KAAmB;IAAE;IAC1H;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAU,UAAU;KAAO,OAAO,EAAE,MAAM,qBAAqB;IAAE;IACpH;KAAE,SAAS,WAAW;KAAW,QAAQ,UAAU;KAAU,QAAQ;KAAM,OAAO,EAAE,MAAM,eAAe;IAAE;GAC7G;GACA,iBAAiB;IACf,SAAS,WAAW;IACpB,QAAQ,UAAU;IAClB,OAAO;IACP,QAAQ;IACR,UAAU;GACZ;EACF,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;EAChF,MAAM,KAAK,eAAuC,IAAI;GACpD,SAAM,QAAA;GACN,QAAQ,IAAI,MAAM;GAClB,OAAI,QAAA;GACJ,MAAG,QAAA;GACH,UAAO,QAAA;GACP,QAAQ,IAAI,mBAAmB;EACjC,CAAC,CAAC;EAEF,SAAS,QAAQ,OAAyB;GACxC,IAAI,QAAA,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GAEA,KAAK,SAAS,QAAA,KAAK;GACnB,IAAI,YAAY,IAAI,MAAM,GACxB,SAAS,KAAK;EAClB;;GAIE,OAAA,UAAA,GAAA,YAkCY,wBAjCL,MAAA,MAAA,IAAM,MAAA,QAAA,GADb,WAkCY;IAhCT,MAAM,MAAA,MAAA,IAAS,KAAA,IAAS;IACxB,OAAK,CAAU,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAU,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,IAAI,EAAA,CAAA,GAAY,MAAA,mBAAA,KAAuB,QAAA,YAAY,MAAA;IAIlG,mBAAiB,MAAA,mBAAA,KAAuB,KAAA;IACxC,cAAY,QAAA;IACZ,2BAAyB,QAAA;IACzB,iBAAe,QAAA,YAAY,KAAA;IAC3B,gBAAc,QAAA;IACd,cAAY,MAAA,mBAAA,IAAsB,QAAA,QAAQ,KAAA;IAC1C,UAAU,MAAA,MAAA,IAAS,KAAA,IAAY,QAAA;IAC/B,iBAAe,MAAA,MAAA,KAAU,QAAA,WAAQ,SAAY,KAAA;IAC7C,MAAM,MAAA,MAAA,KAAM,CAAK,MAAA,MAAA,KAAM,CAAK,QAAA,WAAW,MAAA,QAAA,IAAW,KAAA;IAClD,QAAQ,MAAA,MAAA,IAAS,QAAA,SAAS,KAAA;IAC3B,MAAK;IACJ,iBAAe,MAAA,mBAAA;IACf,UAAU,MAAA,mBAAA,KAAmB,CAAK,QAAA,WAAQ,IAAA;GACnCA,GAAAA,KAAAA,QAAM,EACb,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAQ,MAAM,GAAA,CAAA,GAAA;IAEtB,SAAA,cAUO,CAVP,mBAUO,QAAA,EAVA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA,EAAA,GAAA;KAEd,MAAM,UADd,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KACF,WAAQ,KAAA,QAAA,SAAA;KAEA,MAAM,SADd,WAGE,KAAA,QAAA,UAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RuiTabItem.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":""}
1	+ {"version":3,"file":"RuiTabItem.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}\n\ndefineOptions({\n name: 'RuiTabItem',\n});\n\nconst { active = false, value, eager = 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 <!-- the new panel fades in while the old one collapses at once, rather than Material's sideways swipe -->\n <Transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"w-full transition-opacity duration-150 ease-out motion-reduce:transition-none\"\n enter-to-class=\"opacity-100\"\n leave-active-class=\"w-full 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":""}

package/dist/components/tabs/tab-item/RuiTabItem.vue.d.ts CHANGED Viewed

@@ -2,7 +2,6 @@ export interface Props {
     active?: boolean;
     value?: number | string;
     eager?: boolean;
-    reverse?: boolean;
 }
 type __VLS_Slots = {
     default?: () => any;

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

@@ -21,10 +21,6 @@ var RuiTabItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		eager: {
 			type: Boolean,
 			default: false
-		},
-		reverse: {
-			type: Boolean,
-			default: false
 		}
 	},
 	setup(__props) {
@@ -35,16 +31,14 @@ var RuiTabItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				"data-value": __props.value,
 				"data-active": __props.active || void 0
 			}, [createVNode(Transition, {
-				"enter-from-class": `opacity-0 ${__props.reverse ? "-translate-x-8" : "translate-x-8"}`,
-				"leave-to-class": `opacity-0 !h-0 overflow-hidden ${__props.reverse ? "translate-x-8" : "-translate-x-8"}`,
-				"enter-active-class": "w-full transform duration-300 transition",
-				"enter-to-class": "opacity-100 translate-x-0",
-				"leave-active-class": "w-full transform duration-300 transition !h-0 overflow-hidden",
-				"leave-from-class": "opacity-100 translate-x-0 !h-0 overflow-hidden"
+				"enter-from-class": "opacity-0",
+				"enter-active-class": "w-full transition-opacity duration-150 ease-out motion-reduce:transition-none",
+				"enter-to-class": "opacity-100",
+				"leave-active-class": "w-full h-0! overflow-hidden"
 			}, {
 				default: withCtx(() => [__props.active ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)]),
 				_: 3
-			}, 8, ["enter-from-class", "leave-to-class"]), __props.eager && !__props.active ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)], 8, _hoisted_1);
+			}), __props.eager && !__props.active ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)], 8, _hoisted_1);
 		};
 	}
 });

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

	@@ -1 +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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoBE~~,OAAA,UAAA,GAAA,~~mBA6BM~~,OAAA;~~IA5BJ~~,MAAK;IACL,OAAM;IACL,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;~~GAExB~~,GAAA,CAAA,~~YAgBa~~,YAAA;~~IAfV~~,~~oBAAgB,aAAe,QAAA,UAAO,mBAAA~~;~~IACtC~~,~~kBAAc,kCAA6C,QAAA,UAAO,kBAAA;IAGnE,~~sBAAmB;IACnB,kBAAe;IACf,sBAAmB~~;IACnB,oBAAiB~~;;~~IAEjB~~,SAAA,cAKM,CAJE,QAAA,UADR,UAAA,GAAA,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;;GAIJ,~~GAAA,GAAA,~~CAAA,~~oBAAA,gBAAA,CAAA,~~GAAA,QAAA,SAAK,CAAK,QAAA,UADlB,UAAA,GAAA,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,GAAA,UAAA"}
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}\n\ndefineOptions({\n name: 'RuiTabItem',\n});\n\nconst { active = false, value, eager = 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 <!-- the new panel fades in while the old one collapses at once, rather than Material's sideways swipe -->\n <Transition\n enter-from-class=\"opacity-0\"\n enter-active-class=\"w-full transition-opacity duration-150 ease-out motion-reduce:transition-none\"\n enter-to-class=\"opacity-100\"\n leave-active-class=\"w-full 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAmBE,OAAA,UAAA,GAAA,mBA0BM,OAAA;IAzBJ,MAAK;IACL,OAAM;IACL,cAAY,QAAA;IACZ,eAAa,QAAA,UAAU,KAAA;GAGxB,GAAA,CAAA,YAYa,YAAA;IAXX,oBAAiB;IACjB,sBAAmB;IACnB,kBAAe;IACf,sBAAmB;;IAEnB,SAAA,cAKM,CAJE,QAAA,UADR,UAAA,GAAA,mBAKM,OALN,YAKM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;;GAIJ,CAAA,GAAA,QAAA,SAAK,CAAK,QAAA,UADlB,UAAA,GAAA,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 CHANGED Viewed

	@@ -1 +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/*\n The tab whose panel is showing.\n \n The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n /\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/\n Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n \n @param children - the slot's vnodes\n * @returns the tab items among them\n */\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":""}
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/*\n The tab whose panel is showing.\n \n The default matches RuiTabs. Without one, binding both components to the\n * same ref that starts as `undefined` leaves this component with\n * `modelValue === undefined`, so the `active = modelValue === value` check\n * fails for every tab: the panel renders but stays at height 0, which reads as\n * an element with no content.\n /\nconst modelValue = defineModel<T>({ default: () => 0 as T });\n\nconst slots = useSlots();\n\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(currIndex, index);\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/\n Unwraps the fragments a `v-for` in the slot produces, so only tab items come\n * back.\n \n @param children - the slot's vnodes\n * @returns the tab items among them\n */\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-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none\"\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 :active=\"i === activeIndex\"\n />\n </div>\n </div>\n</template>\n"],"mappings":""}