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

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

@@ -1,14 +1,18 @@
+import { get, set, watchImmediate } from "../../../vendor/@vueuse/shared/dist/index.js";
 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 { watchImmediate } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
+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";
 //#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 +31,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 +48,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,21 +191,36 @@ 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({
-			layout: get$1(layout),
-			wide: __props.vertical || __props.grow
+			variant: __props.variant,
+			layout: get(layout),
+			indicatorPosition: __props.indicatorPosition,
+			color: __props.color,
+			wide: __props.vertical || __props.grow,
+			animated: get(animated)
 		}));
 		const children = computed(() => {
 			const tabs = getChildrenTabs(slots.default?.() ?? []);
-			const currentModelValue = get$1(internalModelValue);
+			const currentModelValue = get(internalModelValue);
 			const inheritedProps = {
 				color: __props.color,
 				grow: __props.grow,
 				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;
@@ -124,22 +251,21 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			}).flat();
 		}
 		function updateModelValue(newModelValue) {
-			set$1(modelValue, newModelValue);
-			set$1(internalModelValue, newModelValue);
+			set(modelValue, newModelValue);
+			set(internalModelValue, newModelValue);
 		}
 		function getTabRouteProps(props) {
 			return {
 				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) {
-			const enabledChildren = get$1(children).filter((child) => !child.props?.disabled);
+			const enabledChildren = get(children).filter((child) => !child.props?.disabled);
 			if (enabledChildren.length === 0) return void 0;
-			let result = get$1(modelValue) || 0;
+			let result = get(modelValue) || 0;
 			enabledChildren.forEach((child, index) => {
 				const tabProps = getTabRouteProps(child.props);
 				if (!onlyLink && index === 0 && tabProps.value) result = tabProps.value;
@@ -153,14 +279,20 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			if (value !== void 0) updateModelValue(value);
 			keepActiveTabVisible();
 		}
-		watchImmediate(() => get$1(modelValue), (modelValue) => {
-			set$1(internalModelValue, modelValue);
+		watchImmediate(() => get(modelValue), (modelValue) => {
+			set(internalModelValue, modelValue);
 		});
 		watch(internalModelValue, () => {
 			keepActiveTabVisible();
 		});
+		watch(() => [
+			__props.vertical,
+			__props.variant,
+			__props.grow,
+			__props.align
+		], () => nextTick(updateIndicator), { flush: "post" });
 		onMounted(() => {
-			if (get$1(modelValue) !== void 0) return;
+			if (get(modelValue) !== void 0) return;
 			applyNewValue();
 		});
 		return (_ctx, _cache) => {
@@ -172,44 +304,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);
 		};
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n/**\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":"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"}
+{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout, 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":"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"}

package/dist/components/tabs/tabs/use-tab-indicator.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { TabVariant } from '../tab-props.js';
+interface UseTabIndicatorOptions {
+    /** The scrolling bar, the indicator's positioning context */
+    bar: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** The tablist inside the bar */
+    wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** Whether the tabs run top to bottom, so the underline follows their height */
+    vertical: MaybeRefOrGetter<boolean>;
+    /** The bar's look, which decides whether the indicator is a line or a pill */
+    variant: MaybeRefOrGetter<TabVariant>;
+}
+interface UseTabIndicatorReturn {
+    /** The indicator's box, or undefined while no tab is active */
+    style: ComputedRef<CSSProperties | undefined>;
+    /** False until the first placement, so the indicator appears in place rather than sliding in */
+    animated: Readonly<Ref<boolean>>;
+    update: () => void;
+}
+/**
+ * Tracks the active tab's box so one indicator can slide between tabs. It lives
+ * in the bar, next to the tablist, so it scrolls with the tabs while the
+ * tablist holds only tabs. The underline takes the tab's span along the bar;
+ * the segmented pill takes its whole box.
+ */
+export declare function useTabIndicator({ bar, wrapper, vertical, variant }: UseTabIndicatorOptions): UseTabIndicatorReturn;
+export {};

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

@@ -0,0 +1,67 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useMutationObserver, useResizeObserver } from "../../../vendor/@vueuse/core/dist/index.js";
+import { TabVariant } from "../tab-props.js";
+import { computed, onMounted, readonly, shallowRef, toValue } from "vue";
+//#region src/components/tabs/tabs/use-tab-indicator.ts
+/**
+* Tracks the active tab's box so one indicator can slide between tabs. It lives
+* in the bar, next to the tablist, so it scrolls with the tabs while the
+* tablist holds only tabs. The underline takes the tab's span along the bar;
+* the segmented pill takes its whole box.
+*/
+function useTabIndicator({ bar, wrapper, vertical, variant }) {
+	const rect = shallowRef();
+	const animated = shallowRef(false);
+	function update() {
+		const tab = get(bar)?.querySelector("[role=tab][data-active-tab]");
+		if (!tab) {
+			set(rect, void 0);
+			return;
+		}
+		set(rect, {
+			left: tab.offsetLeft,
+			top: tab.offsetTop,
+			width: tab.offsetWidth,
+			height: tab.offsetHeight
+		});
+		if (!get(animated)) requestAnimationFrame(() => set(animated, true));
+	}
+	const style = computed(() => {
+		const box = get(rect);
+		if (!box) return void 0;
+		const px = (value) => `${value}px`;
+		if (toValue(variant) === TabVariant.segmented) return {
+			left: px(box.left),
+			top: px(box.top),
+			width: px(box.width),
+			height: px(box.height)
+		};
+		return toValue(vertical) ? {
+			top: px(box.top),
+			height: px(box.height)
+		} : {
+			left: px(box.left),
+			width: px(box.width)
+		};
+	});
+	useResizeObserver(wrapper, update);
+	useMutationObserver(wrapper, update, {
+		subtree: true,
+		attributes: true,
+		attributeFilter: ["data-active-tab"],
+		childList: true
+	});
+	onMounted(() => {
+		update();
+		document.fonts?.ready.then(update).catch(() => {});
+	});
+	return {
+		style,
+		animated: readonly(animated),
+		update
+	};
+}
+//#endregion
+export { useTabIndicator };
+
+//# sourceMappingURL=use-tab-indicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-indicator.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-indicator.ts"],"sourcesContent":["import type { ComputedRef, CSSProperties, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\nimport { TabVariant } from '@/components/tabs/tab-props';\n\ninterface UseTabIndicatorOptions {\n  /** The scrolling bar, the indicator's positioning context */\n  bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** The tablist inside the bar */\n  wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** Whether the tabs run top to bottom, so the underline follows their height */\n  vertical: MaybeRefOrGetter<boolean>;\n  /** The bar's look, which decides whether the indicator is a line or a pill */\n  variant: MaybeRefOrGetter<TabVariant>;\n}\n\ninterface UseTabIndicatorReturn {\n  /** The indicator's box, or undefined while no tab is active */\n  style: ComputedRef<CSSProperties | undefined>;\n  /** False until the first placement, so the indicator appears in place rather than sliding in */\n  animated: Readonly<Ref<boolean>>;\n  update: () => void;\n}\n\ninterface TabRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Tracks the active tab's box so one indicator can slide between tabs. It lives\n * in the bar, next to the tablist, so it scrolls with the tabs while the\n * tablist holds only tabs. The underline takes the tab's span along the bar;\n * the segmented pill takes its whole box.\n */\nexport function useTabIndicator({ bar, wrapper, vertical, variant }: UseTabIndicatorOptions): UseTabIndicatorReturn {\n  const rect = shallowRef<TabRect>();\n  const animated = shallowRef<boolean>(false);\n\n  function update(): void {\n    const tab = get(bar)?.querySelector<HTMLElement>('[role=tab][data-active-tab]');\n    if (!tab) {\n      set(rect, undefined);\n      return;\n    }\n\n    set(rect, { left: tab.offsetLeft, top: tab.offsetTop, width: tab.offsetWidth, height: tab.offsetHeight });\n\n    if (!get(animated))\n      requestAnimationFrame(() => set(animated, true));\n  }\n\n  const style = computed<CSSProperties | undefined>(() => {\n    const box = get(rect);\n    if (!box)\n      return undefined;\n\n    const px = (value: number): string => `${value}px`;\n    if (toValue(variant) === TabVariant.segmented)\n      return { left: px(box.left), top: px(box.top), width: px(box.width), height: px(box.height) };\n\n    return toValue(vertical)\n      ? { top: px(box.top), height: px(box.height) }\n      : { left: px(box.left), width: px(box.width) };\n  });\n\n  useResizeObserver(wrapper, update);\n  useMutationObserver(wrapper, update, { subtree: true, attributes: true, attributeFilter: ['data-active-tab'], childList: true });\n\n  onMounted(() => {\n    update();\n    // a web font that loads later changes every label's width\n    document.fonts?.ready.then(update).catch(() => {});\n  });\n\n  return { style, animated: readonly(animated), update };\n}\n"],"mappings":";;;;;;;;;;;AAmCA,SAAgB,gBAAgB,EAAE,KAAK,SAAS,UAAU,WAA0D;CAClH,MAAM,OAAO,WAAoB;CACjC,MAAM,WAAW,WAAoB,KAAK;CAE1C,SAAS,SAAe;EACtB,MAAM,MAAM,IAAI,GAAG,CAAC,EAAE,cAA2B,6BAA6B;EAC9E,IAAI,CAAC,KAAK;GACR,IAAI,MAAM,KAAA,CAAS;GACnB;EACF;EAEA,IAAI,MAAM;GAAE,MAAM,IAAI;GAAY,KAAK,IAAI;GAAW,OAAO,IAAI;GAAa,QAAQ,IAAI;EAAa,CAAC;EAExG,IAAI,CAAC,IAAI,QAAQ,GACf,4BAA4B,IAAI,UAAU,IAAI,CAAC;CACnD;CAEA,MAAM,QAAQ,eAA0C;EACtD,MAAM,MAAM,IAAI,IAAI;EACpB,IAAI,CAAC,KACH,OAAO,KAAA;EAET,MAAM,MAAM,UAA0B,GAAG,MAAM;EAC/C,IAAI,QAAQ,OAAO,MAAM,WAAW,WAClC,OAAO;GAAE,MAAM,GAAG,IAAI,IAAI;GAAG,KAAK,GAAG,IAAI,GAAG;GAAG,OAAO,GAAG,IAAI,KAAK;GAAG,QAAQ,GAAG,IAAI,MAAM;EAAE;EAE9F,OAAO,QAAQ,QAAQ,IACnB;GAAE,KAAK,GAAG,IAAI,GAAG;GAAG,QAAQ,GAAG,IAAI,MAAM;EAAE,IAC3C;GAAE,MAAM,GAAG,IAAI,IAAI;GAAG,OAAO,GAAG,IAAI,KAAK;EAAE;CACjD,CAAC;CAED,kBAAkB,SAAS,MAAM;CACjC,oBAAoB,SAAS,QAAQ;EAAE,SAAS;EAAM,YAAY;EAAM,iBAAiB,CAAC,iBAAiB;EAAG,WAAW;CAAK,CAAC;CAE/H,gBAAgB;EACd,OAAO;EAEP,SAAS,OAAO,MAAM,KAAK,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC;CACnD,CAAC;CAED,OAAO;EAAE;EAAO,UAAU,SAAS,QAAQ;EAAG;CAAO;AACvD"}

package/dist/components/tabs/tabs/use-tab-keyboard.d.ts

@@ -0,0 +1,17 @@
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+interface UseTabKeyboardOptions {
+    /** The tablist element */
+    wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** Whether the tabs run top to bottom, which moves with the up and down arrows */
+    vertical: MaybeRefOrGetter<boolean>;
+}
+interface UseTabKeyboardReturn {
+    onKeydown: (event: KeyboardEvent) => void;
+}
+/**
+ * The WAI-ARIA tabs keys: the arrows along the bar move to the next or
+ * previous enabled tab and select it, Home and End jump to the ends. Selecting
+ * goes through a click, so a link tab navigates as it would with the mouse.
+ */
+export declare function useTabKeyboard({ wrapper, vertical }: UseTabKeyboardOptions): UseTabKeyboardReturn;
+export {};

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

@@ -0,0 +1,57 @@
+import { get } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { toValue } from "vue";
+//#region src/components/tabs/tabs/use-tab-keyboard.ts
+/**
+* The index a key moves to among `count` tabs, wrapping at both ends.
+*
+* @param step - -1 or 1 for the arrows, or `first` and `last` for Home and End
+* @param current - the focused tab's index
+* @param count - the number of enabled tabs
+* @returns the index to move to
+*/
+function targetIndex(step, current, count) {
+	if (step === "first") return 0;
+	if (step === "last") return count - 1;
+	return (current + step + count) % count;
+}
+/**
+* The WAI-ARIA tabs keys: the arrows along the bar move to the next or
+* previous enabled tab and select it, Home and End jump to the ends. Selecting
+* goes through a click, so a link tab navigates as it would with the mouse.
+*/
+function useTabKeyboard({ wrapper, vertical }) {
+	function steps(list) {
+		if (toValue(vertical)) return {
+			ArrowUp: -1,
+			ArrowDown: 1,
+			Home: "first",
+			End: "last"
+		};
+		const rtl = getComputedStyle(list).direction === "rtl";
+		return {
+			ArrowLeft: rtl ? 1 : -1,
+			ArrowRight: rtl ? -1 : 1,
+			Home: "first",
+			End: "last"
+		};
+	}
+	function onKeydown(event) {
+		const list = get(wrapper);
+		const step = list ? steps(list)[event.key] : void 0;
+		if (!list || step === void 0) return;
+		const enabled = [...list.querySelectorAll("[role=tab]:not([disabled]):not([aria-disabled=true])")];
+		const focused = event.target;
+		const current = focused instanceof HTMLElement ? enabled.indexOf(focused) : -1;
+		if (current === -1) return;
+		const tab = enabled[targetIndex(step, current, enabled.length)];
+		if (!tab) return;
+		event.preventDefault();
+		tab.focus();
+		tab.click();
+	}
+	return { onKeydown };
+}
+//#endregion
+export { useTabKeyboard };
+
+//# sourceMappingURL=use-tab-keyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-keyboard.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-keyboard.ts"],"sourcesContent":["import type { MaybeRefOrGetter, ShallowRef } from 'vue';\n\ninterface UseTabKeyboardOptions {\n  /** The tablist element */\n  wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** Whether the tabs run top to bottom, which moves with the up and down arrows */\n  vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabKeyboardReturn {\n  onKeydown: (event: KeyboardEvent) => void;\n}\n\n/**\n * The index a key moves to among `count` tabs, wrapping at both ends.\n *\n * @param step - -1 or 1 for the arrows, or `first` and `last` for Home and End\n * @param current - the focused tab's index\n * @param count - the number of enabled tabs\n * @returns the index to move to\n */\nfunction targetIndex(step: -1 | 1 | 'first' | 'last', current: number, count: number): number {\n  if (step === 'first')\n    return 0;\n  if (step === 'last')\n    return count - 1;\n  return (current + step + count) % count;\n}\n\n/**\n * The WAI-ARIA tabs keys: the arrows along the bar move to the next or\n * previous enabled tab and select it, Home and End jump to the ends. Selecting\n * goes through a click, so a link tab navigates as it would with the mouse.\n */\nexport function useTabKeyboard({ wrapper, vertical }: UseTabKeyboardOptions): UseTabKeyboardReturn {\n  function steps(list: HTMLElement): Record<string, -1 | 1 | 'first' | 'last'> {\n    if (toValue(vertical))\n      return { ArrowUp: -1, ArrowDown: 1, Home: 'first', End: 'last' };\n\n    const rtl = getComputedStyle(list).direction === 'rtl';\n    return { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1, Home: 'first', End: 'last' };\n  }\n\n  function onKeydown(event: KeyboardEvent): void {\n    const list = get(wrapper);\n    const step = list ? steps(list)[event.key] : undefined;\n    if (!list || step === undefined)\n      return;\n\n    const enabled = [...list.querySelectorAll<HTMLElement>('[role=tab]:not([disabled]):not([aria-disabled=true])')];\n    // the key lands on the focused tab\n    const focused = event.target;\n    const current = focused instanceof HTMLElement ? enabled.indexOf(focused) : -1;\n    if (current === -1)\n      return;\n\n    const tab = enabled[targetIndex(step, current, enabled.length)];\n    if (!tab)\n      return;\n\n    event.preventDefault();\n    tab.focus();\n    tab.click();\n  }\n\n  return { onKeydown };\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAS,YAAY,MAAiC,SAAiB,OAAuB;CAC5F,IAAI,SAAS,SACX,OAAO;CACT,IAAI,SAAS,QACX,OAAO,QAAQ;CACjB,QAAQ,UAAU,OAAO,SAAS;AACpC;;;;;;AAOA,SAAgB,eAAe,EAAE,SAAS,YAAyD;CACjG,SAAS,MAAM,MAA8D;EAC3E,IAAI,QAAQ,QAAQ,GAClB,OAAO;GAAE,SAAS;GAAI,WAAW;GAAG,MAAM;GAAS,KAAK;EAAO;EAEjE,MAAM,MAAM,iBAAiB,IAAI,CAAC,CAAC,cAAc;EACjD,OAAO;GAAE,WAAW,MAAM,IAAI;GAAI,YAAY,MAAM,KAAK;GAAG,MAAM;GAAS,KAAK;EAAO;CACzF;CAEA,SAAS,UAAU,OAA4B;EAC7C,MAAM,OAAO,IAAI,OAAO;EACxB,MAAM,OAAO,OAAO,MAAM,IAAI,CAAC,CAAC,MAAM,OAAO,KAAA;EAC7C,IAAI,CAAC,QAAQ,SAAS,KAAA,GACpB;EAEF,MAAM,UAAU,CAAC,GAAG,KAAK,iBAA8B,sDAAsD,CAAC;EAE9G,MAAM,UAAU,MAAM;EACtB,MAAM,UAAU,mBAAmB,cAAc,QAAQ,QAAQ,OAAO,IAAI;EAC5E,IAAI,YAAY,IACd;EAEF,MAAM,MAAM,QAAQ,YAAY,MAAM,SAAS,QAAQ,MAAM;EAC7D,IAAI,CAAC,KACH;EAEF,MAAM,eAAe;EACrB,IAAI,MAAM;EACV,IAAI,MAAM;CACZ;CAEA,OAAO,EAAE,UAAU;AACrB"}

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

@@ -22,9 +22,8 @@ function useTabRouting({ onRouteChange }) {
 		if (!isRouteLocation(to)) return void 0;
 		return router.resolve(to).fullPath;
 	}
-	function isPathMatch(path, { exactPath, exact }) {
+	function isPathMatch(path, { exact }) {
 		const currentRoute = route.fullPath;
-		if (exactPath) return currentRoute === path;
 		const base = typeof window !== "undefined" ? window.location.origin : "http://localhost";
 		const routeWithoutQueryParams = new URL(path, base).pathname;
 		if (exact) return currentRoute === routeWithoutQueryParams;

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

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