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

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

@@ -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":""}
+{"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

@@ -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

@@ -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

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

@@ -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":""}
+{"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":""}

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

@@ -23,7 +23,6 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		*/
 		const modelValue = useModel(__props, "modelValue");
 		const slots = useSlots();
-		const reverse = ref(false);
 		const currIndex = ref(-1);
 		const activeIndex = ref(-1);
 		const inner = useTemplateRef("inner");
@@ -35,10 +34,7 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				const value = tab.props?.value ?? index;
 				if (get$1(modelValue) === value) {
 					anyActive = true;
-					if (index !== get$1(currIndex)) {
-						set$1(reverse, index < get$1(currIndex));
-						set$1(currIndex, index);
-					}
+					if (index !== get$1(currIndex)) set$1(currIndex, index);
 				}
 				return {
 					...tab,
@@ -71,7 +67,7 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({
-				class: "grow transition-all overflow-hidden",
+				class: "grow transition-[height] duration-200 ease-out overflow-hidden motion-reduce:transition-none",
 				style: { height: `${unref(innerHeight)}px` }
 			}, _ctx.$attrs), [createElementVNode("div", {
 				ref_key: "inner",
@@ -79,9 +75,8 @@ var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (child, i) => {
 				return openBlock(), createBlock(resolveDynamicComponent(child), {
 					key: i,
-					reverse: unref(reverse),
 					active: i === unref(activeIndex)
-				}, null, 8, ["reverse", "active"]);
+				}, null, 8, ["active"]);
 			}), 128))], 512)], 16);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n/**\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":";;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAa,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,UAAU,IAAa,KAAK;EAClC,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,MAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,MAAI,SAAS,GAAG;MAC5B,MAAI,SAAS,QAAQ,MAAI,SAAS,CAAC;MACnC,MAAI,WAAW,KAAK;KACtB;IACF;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,MAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;;;;;;;;EASD,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,MAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAcM,OAdN,WAcM;IAbJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,WAAA,EAAW,IAAA;GACxBA,GAAAA,KAAAA,MAAM,GAAA,CAEd,mBAQM,OAAA;IARG,SAAA;IAAJ,KAAI;GACP,GAAA,EAAA,UAAA,IAAA,GAAA,mBAME,UAAA,MAAA,WAJqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAME,wBALK,KAAK,GAAA;KAET,KAAK;KACL,SAAS,MAAA,OAAA;KACT,QAAQ,MAAM,MAAA,WAAA"}
+{"version":3,"file":"RuiTabItems.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../../src/components/tabs/tab-items/RuiTabItems.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport { Fragment, isVNode } from 'vue';\n\ndefineOptions({\n  name: 'RuiTabItems',\n  inheritAttrs: false,\n});\n\n/**\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":";;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAa,SAAc,SAAA,YAA0B;EAE3D,MAAM,QAAQ,SAAS;EAEvB,MAAM,YAAY,IAAY,EAAE;EAChC,MAAM,cAAc,IAAY,EAAE;EAClC,MAAM,QAAQ,eAA+B,OAAO;EAEpD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;EAEpD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,UAAU,KAAK,CAAC,CAEF;GAExC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;IAElC,IADe,MAAI,UAAU,MAAM,OACvB;KACV,YAAY;KACZ,IAAI,UAAU,MAAI,SAAS,GACzB,MAAI,WAAW,KAAK;IACxB;IAEA,OAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;KACT;IACF;GACF,CAAC;GAED,IAAI,CAAC,WACH,MAAI,WAAW,EAAE;GAEnB,OAAO;EACT,CAAC;;;;;;;;EASD,SAAS,gBAAgB,UAA4B;GACnD,OAAO,SACJ,SAAS,SAAS;IACjB,IAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS,GACnF,OAAO,gBAAgB,KAAK,SAAS,OAAO,OAAO,CAAC;IAEtD,OAAO,CAAC,IAAI;GACd,CAAC,CAAA,CACA,KAAK;EACV;EAEA,MAAM,YAAY,UAAU;GAC1B,eAAe;IACb,MAAI,aAAa,KAAK;GACxB,CAAC;EACH,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAaM,OAbN,WAaM;IAZJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,WAAA,EAAW,IAAA;GACxBA,GAAAA,KAAAA,MAAM,GAAA,CAEd,mBAOM,OAAA;IAPG,SAAA;IAAJ,KAAI;GACP,GAAA,EAAA,UAAA,IAAA,GAAA,mBAKE,UAAA,MAAA,WAHqB,MAAA,QAAA,IAAb,OAAO,MAAC;IAFlB,OAAA,UAAA,GAAA,YAKE,wBAJK,KAAK,GAAA;KAET,KAAK;KACL,QAAQ,MAAM,MAAA,WAAA"}

package/dist/components/tabs/tab-props.d.ts

@@ -9,8 +9,14 @@ export declare const TabIndicatorPosition: {
     readonly end: "end";
 };
 export type TabIndicatorPosition = (typeof TabIndicatorPosition)[keyof typeof TabIndicatorPosition];
+export declare const TabVariant: {
+    /** Labels on a divider track, the active one marked by a sliding line: page and section tabs */
+    readonly underline: "underline";
+    /** A raised pill sliding on a sunken track: a few short options that switch a view in place */
+    readonly segmented: "segmented";
+};
+export type TabVariant = (typeof TabVariant)[keyof typeof TabVariant];
 export interface RouteMatchOptions {
-    exactPath?: boolean;
     exact?: boolean;
 }
 export declare const TabLayout: {

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

@@ -8,11 +8,17 @@ var TabIndicatorPosition = {
 	start: "start",
 	end: "end"
 };
+var TabVariant = {
+	/** Labels on a divider track, the active one marked by a sliding line: page and section tabs */
+	underline: "underline",
+	/** A raised pill sliding on a sunken track: a few short options that switch a view in place */
+	segmented: "segmented"
+};
 var TabLayout = {
 	horizontal: "horizontal",
 	vertical: "vertical"
 };
 //#endregion
-export { TabAlignment, TabIndicatorPosition, TabLayout };
+export { TabAlignment, TabIndicatorPosition, TabLayout, TabVariant };
 
 //# sourceMappingURL=tab-props.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-props.js","names":[],"sources":["../../../src/components/tabs/tab-props.ts"],"sourcesContent":["export const TabAlignment = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TabAlignment = (typeof TabAlignment)[keyof typeof TabAlignment];\n\nexport const TabIndicatorPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type TabIndicatorPosition = (typeof TabIndicatorPosition)[keyof typeof TabIndicatorPosition];\n\nexport interface RouteMatchOptions {\n  exactPath?: boolean;\n  exact?: boolean;\n}\n\nexport const TabLayout = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\n\nexport type TabLayout = (typeof TabLayout)[keyof typeof TabLayout];\n"],"mappings":";AAAA,IAAa,eAAe;CAC1B,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,uBAAuB;CAClC,OAAO;CACP,KAAK;AACP;AASA,IAAa,YAAY;CACvB,YAAY;CACZ,UAAU;AACZ"}
+{"version":3,"file":"tab-props.js","names":[],"sources":["../../../src/components/tabs/tab-props.ts"],"sourcesContent":["export const TabAlignment = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n} as const;\n\nexport type TabAlignment = (typeof TabAlignment)[keyof typeof TabAlignment];\n\nexport const TabIndicatorPosition = {\n  start: 'start',\n  end: 'end',\n} as const;\n\nexport type TabIndicatorPosition = (typeof TabIndicatorPosition)[keyof typeof TabIndicatorPosition];\n\nexport const TabVariant = {\n  /** Labels on a divider track, the active one marked by a sliding line: page and section tabs */\n  underline: 'underline',\n  /** A raised pill sliding on a sunken track: a few short options that switch a view in place */\n  segmented: 'segmented',\n} as const;\n\nexport type TabVariant = (typeof TabVariant)[keyof typeof TabVariant];\n\nexport interface RouteMatchOptions {\n  exact?: boolean;\n}\n\nexport const TabLayout = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\n\nexport type TabLayout = (typeof TabLayout)[keyof typeof TabLayout];\n"],"mappings":";AAAA,IAAa,eAAe;CAC1B,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAIA,IAAa,uBAAuB;CAClC,OAAO;CACP,KAAK;AACP;AAIA,IAAa,aAAa;;CAExB,WAAW;;CAEX,WAAW;AACb;AAQA,IAAa,YAAY;CACvB,YAAY;CACZ,UAAU;AACZ"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiTabs.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout, TabVariant } from '@/components/tabs/tab-props';\nimport { useTabIndicator } from '@/components/tabs/tabs/use-tab-indicator';\nimport { useTabKeyboard } from '@/components/tabs/tabs/use-tab-keyboard';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n  variant?: TabVariant;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n  variant = TabVariant.underline,\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\nconst barTabindex = useKeyboardScroll(bar);\n\n/**\n * The bar. The underline variant draws its 1px track as a `before` line along\n * the whole root, so the arrows sit on it too, and the 2px indicator, a layer\n * above, covers it under the active tab.\n */\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: 'flex shrink-0 items-center justify-center',\n    // a tab stop only when it scrolls with every tab disabled (useKeyboardScroll)\n    bar: 'no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    wrapper: 'inline-flex max-w-none',\n    indicator: 'pointer-events-none absolute',\n  },\n  variants: {\n    variant: {\n      [TabVariant.underline]: {\n        root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,\n        indicator: 'z-1 bg-rui-primary',\n      },\n      [TabVariant.segmented]: {\n        // neutral-200, not 100: on a near-white page (`#fafafa`) the lighter track all but disappeared\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800',\n        wrapper: 'gap-0.5',\n        indicator: 'rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700',\n      },\n    },\n    layout: {\n      [TabLayout.horizontal]: { root: 'flex h-fit', arrow: 'w-8' },\n      [TabLayout.vertical]: { root: 'inline-flex flex-col', arrow: 'h-8 w-full', wrapper: 'flex-col w-full' },\n    },\n    indicatorPosition: {\n      start: {},\n      end: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n    wide: {\n      true: { bar: 'w-full', wrapper: 'min-w-full' },\n      false: {},\n    },\n    animated: {\n      true: { indicator: 'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end', class: { root: 'before:inset-x-0 before:bottom-0 before:h-px', indicator: 'bottom-0 h-0.5 rounded-t-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'start', class: { root: 'before:inset-x-0 before:top-0 before:h-px', indicator: 'top-0 h-0.5 rounded-b-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'end', class: { root: 'before:inset-y-0 before:right-0 before:w-px', indicator: 'right-0 w-0.5 rounded-l-full' } },\n    { variant: TabVariant.underline, layout: TabLayout.vertical, indicatorPosition: 'start', class: { root: 'before:inset-y-0 before:left-0 before:w-px', indicator: 'left-0 w-0.5 rounded-r-full' } },\n    // the underline track spans its row, while a segmented control hugs its options unless it grows\n    { variant: TabVariant.segmented, layout: TabLayout.horizontal, wide: false, class: { root: 'w-fit max-w-full' } },\n    // `color` picks the underline's color; the segmented pill stays a neutral surface\n    { variant: TabVariant.underline, color: 'secondary', class: { indicator: 'bg-rui-secondary' } },\n    { variant: TabVariant.underline, color: 'error', class: { indicator: 'bg-rui-error' } },\n    { variant: TabVariant.underline, color: 'warning', class: { indicator: 'bg-rui-warning' } },\n    { variant: TabVariant.underline, color: 'info', class: { indicator: 'bg-rui-info' } },\n    { variant: TabVariant.underline, color: 'success', class: { indicator: 'bg-rui-success' } },\n  ],\n  defaultVariants: { variant: TabVariant.underline, layout: TabLayout.horizontal, indicatorPosition: 'end' },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst { onKeydown } = useTabKeyboard({ wrapper, vertical: () => vertical });\n\nconst { style: indicatorStyle, animated, update: updateIndicator } = useTabIndicator({\n  bar,\n  wrapper,\n  vertical: () => vertical,\n  variant: () => variant,\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({\n  variant,\n  layout: get(layout),\n  indicatorPosition,\n  color,\n  wide: vertical || grow,\n  animated: get(animated),\n}));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n    variant,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nwatch(() => [vertical, variant, grow, align], () => nextTick(updateIndicator), { flush: 'post' });\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        variant=\"text\"\n        icon\n        size=\"sm\"\n        tabindex=\"-1\"\n        aria-label=\"Scroll tabs back\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n      :tabindex=\"barTabindex\"\n    >\n      <span\n        v-if=\"indicatorStyle\"\n        aria-hidden=\"true\"\n        data-id=\"tabs-indicator\"\n        :class=\"ui.indicator()\"\n        :style=\"indicatorStyle\"\n      />\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :aria-orientation=\"vertical ? 'vertical' : undefined\"\n        :class=\"ui.wrapper()\"\n        @keydown=\"onKeydown($event)\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        variant=\"text\"\n        icon\n        size=\"sm\"\n        tabindex=\"-1\"\n        aria-label=\"Scroll tabs forward\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/tabs/tabs/RuiTabs.vue.d.ts

@@ -1,5 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
-import { type TabAlignment, type TabIndicatorPosition } from '../tab-props.js';
+import { type TabAlignment, type TabIndicatorPosition, TabVariant } from '../tab-props.js';
 export interface Props {
     color?: ContextColorsType;
     vertical?: boolean;
@@ -7,6 +7,7 @@ export interface Props {
     grow?: boolean;
     align?: TabAlignment;
     indicatorPosition?: TabIndicatorPosition;
+    variant?: TabVariant;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {

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

@@ -1,14 +1,19 @@
 import { tv } from "../../../utils/tv.js";
 import RuiIcon_default from "../../icons/RuiIcon.js";
 import RuiButton_default from "../../buttons/button/RuiButton.js";
-import { TabLayout } from "../tab-props.js";
+import { useKeyboardScroll } from "../../../composables/keyboard-scroll.js";
+import { TabLayout, TabVariant } from "../tab-props.js";
+import { useTabIndicator } from "./use-tab-indicator.js";
+import { useTabKeyboard } from "./use-tab-keyboard.js";
 import { useTabRouting } from "./use-tab-routing.js";
 import { useTabScroll } from "./use-tab-scroll.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isVNode, mergeModels, normalizeClass, onMounted, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isVNode, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import { watchImmediate } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/tabs/tabs/RuiTabs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-vertical"];
+var _hoisted_2 = ["tabindex"];
+var _hoisted_3 = ["aria-orientation"];
 var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiTabs",
 	__name: "RuiTabs",
@@ -27,7 +32,8 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			default: false
 		},
 		align: { default: "center" },
-		indicatorPosition: { default: "end" }
+		indicatorPosition: { default: "end" },
+		variant: { default: () => TabVariant.underline }
 	}, {
 		"modelValue": { default: 0 },
 		"modelModifiers": {}
@@ -43,34 +49,141 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const internalModelValue = ref();
 		const bar = useTemplateRef("bar");
 		const wrapper = useTemplateRef("wrapper");
+		const barTabindex = useKeyboardScroll(bar);
+		/**
+		* The bar. The underline variant draws its 1px track as a `before` line along
+		* the whole root, so the arrows sit on it too, and the 2px indicator, a layer
+		* above, covers it under the active tab.
+		*/
 		const tabs = tv({
 			slots: {
 				root: "",
-				arrow: "",
-				bar: "no-scrollbar max-h-full overflow-auto",
-				wrapper: "h-full inline-flex max-w-none"
+				arrow: "flex shrink-0 items-center justify-center",
+				bar: "no-scrollbar relative max-h-full overflow-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
+				wrapper: "inline-flex max-w-none",
+				indicator: "pointer-events-none absolute"
 			},
 			variants: {
+				variant: {
+					[TabVariant.underline]: {
+						root: `relative before:pointer-events-none before:absolute before:bg-rui-divider before:content-['']`,
+						indicator: "z-1 bg-rui-primary"
+					},
+					[TabVariant.segmented]: {
+						root: "rounded-rui-panel bg-rui-neutral-200 p-0.5 dark:bg-rui-neutral-800",
+						wrapper: "gap-0.5",
+						indicator: "rounded-rui-control bg-rui-surface shadow-rui-control dark:bg-rui-neutral-700"
+					}
+				},
 				layout: {
 					[TabLayout.horizontal]: {
 						root: "flex h-fit",
-						arrow: "h-[3rem] w-10",
-						bar: "h-[3rem]",
-						wrapper: ""
+						arrow: "w-8"
 					},
 					[TabLayout.vertical]: {
 						root: "inline-flex flex-col",
-						arrow: "min-h-[3rem] w-full",
-						bar: "",
-						wrapper: "flex-col h-auto"
+						arrow: "h-8 w-full",
+						wrapper: "flex-col w-full"
 					}
 				},
-				wide: { true: {
-					bar: "w-full",
-					wrapper: "min-w-full"
-				} }
+				indicatorPosition: {
+					start: {},
+					end: {}
+				},
+				color: {
+					primary: {},
+					secondary: {},
+					error: {},
+					warning: {},
+					info: {},
+					success: {}
+				},
+				wide: {
+					true: {
+						bar: "w-full",
+						wrapper: "min-w-full"
+					},
+					false: {}
+				},
+				animated: {
+					true: { indicator: "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none" },
+					false: {}
+				}
 			},
-			defaultVariants: { layout: TabLayout.horizontal }
+			compoundVariants: [
+				{
+					variant: TabVariant.underline,
+					layout: TabLayout.horizontal,
+					indicatorPosition: "end",
+					class: {
+						root: "before:inset-x-0 before:bottom-0 before:h-px",
+						indicator: "bottom-0 h-0.5 rounded-t-full"
+					}
+				},
+				{
+					variant: TabVariant.underline,
+					layout: TabLayout.horizontal,
+					indicatorPosition: "start",
+					class: {
+						root: "before:inset-x-0 before:top-0 before:h-px",
+						indicator: "top-0 h-0.5 rounded-b-full"
+					}
+				},
+				{
+					variant: TabVariant.underline,
+					layout: TabLayout.vertical,
+					indicatorPosition: "end",
+					class: {
+						root: "before:inset-y-0 before:right-0 before:w-px",
+						indicator: "right-0 w-0.5 rounded-l-full"
+					}
+				},
+				{
+					variant: TabVariant.underline,
+					layout: TabLayout.vertical,
+					indicatorPosition: "start",
+					class: {
+						root: "before:inset-y-0 before:left-0 before:w-px",
+						indicator: "left-0 w-0.5 rounded-r-full"
+					}
+				},
+				{
+					variant: TabVariant.segmented,
+					layout: TabLayout.horizontal,
+					wide: false,
+					class: { root: "w-fit max-w-full" }
+				},
+				{
+					variant: TabVariant.underline,
+					color: "secondary",
+					class: { indicator: "bg-rui-secondary" }
+				},
+				{
+					variant: TabVariant.underline,
+					color: "error",
+					class: { indicator: "bg-rui-error" }
+				},
+				{
+					variant: TabVariant.underline,
+					color: "warning",
+					class: { indicator: "bg-rui-warning" }
+				},
+				{
+					variant: TabVariant.underline,
+					color: "info",
+					class: { indicator: "bg-rui-info" }
+				},
+				{
+					variant: TabVariant.underline,
+					color: "success",
+					class: { indicator: "bg-rui-success" }
+				}
+			],
+			defaultVariants: {
+				variant: TabVariant.underline,
+				layout: TabLayout.horizontal,
+				indicatorPosition: "end"
+			}
 		});
 		const slots = useSlots();
 		const { showArrows, prevArrowDisabled, nextArrowDisabled, onPrevSliderClick, onNextSliderClick, keepActiveTabVisible } = useTabScroll({
@@ -79,10 +192,24 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			vertical: () => __props.vertical
 		});
 		const { resolveRoute, isPathMatch } = useTabRouting({ onRouteChange: () => applyNewValue(true) });
+		const { onKeydown } = useTabKeyboard({
+			wrapper,
+			vertical: () => __props.vertical
+		});
+		const { style: indicatorStyle, animated, update: updateIndicator } = useTabIndicator({
+			bar,
+			wrapper,
+			vertical: () => __props.vertical,
+			variant: () => __props.variant
+		});
 		const layout = computed(() => __props.vertical ? TabLayout.vertical : TabLayout.horizontal);
 		const ui = computed(() => tabs({
+			variant: __props.variant,
 			layout: get$1(layout),
-			wide: __props.vertical || __props.grow
+			indicatorPosition: __props.indicatorPosition,
+			color: __props.color,
+			wide: __props.vertical || __props.grow,
+			animated: get$1(animated)
 		}));
 		const children = computed(() => {
 			const tabs = getChildrenTabs(slots.default?.() ?? []);
@@ -93,7 +220,8 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				disabled: __props.disabled,
 				vertical: __props.vertical,
 				align: __props.align,
-				indicatorPosition: __props.indicatorPosition
+				indicatorPosition: __props.indicatorPosition,
+				variant: __props.variant
 			};
 			return tabs.map((tab, index) => {
 				let tabValue = tab.props?.value ?? index;
@@ -132,8 +260,7 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				value: typeof props.value === "string" || typeof props.value === "number" ? props.value : void 0,
 				to: props.to ?? void 0,
 				link: typeof props.link === "boolean" ? props.link : void 0,
-				exact: typeof props.exact === "boolean" ? props.exact : void 0,
-				exactPath: typeof props.exactPath === "boolean" ? props.exactPath : void 0
+				exact: typeof props.exact === "boolean" ? props.exact : void 0
 			};
 		}
 		function resolveActiveValue(onlyLink) {
@@ -159,6 +286,12 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		watch(internalModelValue, () => {
 			keepActiveTabVisible();
 		});
+		watch(() => [
+			__props.vertical,
+			__props.variant,
+			__props.grow,
+			__props.align
+		], () => nextTick(updateIndicator), { flush: "post" });
 		onMounted(() => {
 			if (get$1(modelValue) !== void 0) return;
 			applyNewValue();
@@ -172,44 +305,57 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					key: 0,
 					class: normalizeClass(unref(ui).arrow())
 				}, [createVNode(RuiButton_default, {
-					class: "w-full h-full !rounded-none",
 					variant: "text",
-					color: __props.color,
+					icon: "",
+					size: "sm",
+					tabindex: "-1",
+					"aria-label": "Scroll tabs back",
 					disabled: unref(prevArrowDisabled),
 					onClick: _cache[0] || (_cache[0] = ($event) => unref(onPrevSliderClick)())
 				}, {
 					default: withCtx(() => [createVNode(RuiIcon_default, { name: __props.vertical ? "lu-chevron-up" : "lu-chevron-left" }, null, 8, ["name"])]),
 					_: 1
-				}, 8, ["color", "disabled"])], 2)) : createCommentVNode("", true),
+				}, 8, ["disabled"])], 2)) : createCommentVNode("", true),
 				createElementVNode("div", {
 					ref_key: "bar",
 					ref: bar,
-					class: normalizeClass(unref(ui).bar())
-				}, [createElementVNode("div", {
+					class: normalizeClass(unref(ui).bar()),
+					tabindex: unref(barTabindex)
+				}, [unref(indicatorStyle) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"aria-hidden": "true",
+					"data-id": "tabs-indicator",
+					class: normalizeClass(unref(ui).indicator()),
+					style: normalizeStyle(unref(indicatorStyle))
+				}, null, 6)) : createCommentVNode("", true), createElementVNode("div", {
 					ref_key: "wrapper",
 					ref: wrapper,
 					role: "tablist",
 					"data-id": "tabs-wrapper",
-					class: normalizeClass(unref(ui).wrapper())
+					"aria-orientation": __props.vertical ? "vertical" : void 0,
+					class: normalizeClass(unref(ui).wrapper()),
+					onKeydown: _cache[2] || (_cache[2] = ($event) => unref(onKeydown)($event))
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (child, i) => {
 					return openBlock(), createBlock(resolveDynamicComponent(child), {
 						key: i,
 						onClick: _cache[1] || (_cache[1] = ($event) => updateModelValue($event))
 					});
-				}), 128))], 2)], 2),
+				}), 128))], 42, _hoisted_3)], 10, _hoisted_2),
 				unref(showArrows) ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					class: normalizeClass(unref(ui).arrow())
 				}, [createVNode(RuiButton_default, {
-					class: "w-full h-full !rounded-none",
 					variant: "text",
-					color: __props.color,
+					icon: "",
+					size: "sm",
+					tabindex: "-1",
+					"aria-label": "Scroll tabs forward",
 					disabled: unref(nextArrowDisabled),
-					onClick: _cache[2] || (_cache[2] = ($event) => unref(onNextSliderClick)())
+					onClick: _cache[3] || (_cache[3] = ($event) => unref(onNextSliderClick)())
 				}, {
 					default: withCtx(() => [createVNode(RuiIcon_default, { name: __props.vertical ? "lu-chevron-down" : "lu-chevron-right" }, null, 8, ["name"])]),
 					_: 1
-				}, 8, ["color", "disabled"])], 2)) : createCommentVNode("", true)
+				}, 8, ["disabled"])], 2)) : createCommentVNode("", true)
 			], 10, _hoisted_1);
 		};
 	}