@rotki/ui-library 2.14.1 → 2.16.0

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

@@ -0,0 +1,175 @@
+import { tv } from "../../../utils/tv.js";
+import RuiButton_default from "../../buttons/button/RuiButton.js";
+import { TabAlignment, TabIndicatorPosition, TabLayout } from "../tab-props.js";
+import { useTabLink } from "./use-tab-link.js";
+import { computed, createBlock, createSlots, defineComponent, mergeProps, openBlock, renderSlot, unref, useId, useSlots, withCtx } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/tabs/tab/RuiTab.vue?vue&type=script&setup=true&lang.ts
+var RuiTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTab",
+	inheritAttrs: false,
+	__name: "RuiTab",
+	props: {
+		color: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		grow: {
+			type: Boolean,
+			default: false
+		},
+		value: { default: () => useId() },
+		active: {
+			type: Boolean,
+			default: false
+		},
+		classNames: {},
+		activeClass: { default: "" },
+		link: {
+			type: Boolean,
+			default: false
+		},
+		target: { default: "_self" },
+		to: { default: "" },
+		exact: {
+			type: Boolean,
+			default: false
+		},
+		exactPath: { type: Boolean },
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		align: { default: () => TabAlignment.center },
+		indicatorPosition: { default: () => TabIndicatorPosition.end }
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const tab = tv({
+			base: "min-w-[5.625rem] max-w-[22.5rem] flex items-center rounded-none cursor-pointer relative whitespace-nowrap shrink-0 !px-4",
+			variants: {
+				layout: {
+					[TabLayout.horizontal]: "",
+					[TabLayout.vertical]: "!h-[3rem] w-full max-w-none"
+				},
+				align: {
+					start: "justify-start text-left rtl:justify-end rtl:text-right",
+					center: "justify-center text-center",
+					end: "justify-end text-right rtl:justify-start rtl:text-left"
+				},
+				grow: { true: "grow max-w-none" },
+				disabled: { true: "cursor-not-allowed" },
+				active: {
+					true: "",
+					false: ""
+				},
+				indicatorPosition: {
+					start: "",
+					end: ""
+				}
+			},
+			compoundVariants: [
+				{
+					active: true,
+					layout: TabLayout.horizontal,
+					indicatorPosition: "end",
+					class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:bottom-0 after:left-0 after:border-b-2`
+				},
+				{
+					active: true,
+					layout: TabLayout.horizontal,
+					indicatorPosition: "start",
+					class: `after:content-[''] after:absolute after:border-current after:h-0 after:w-full after:top-0 after:left-0 after:border-b-2`
+				},
+				{
+					active: true,
+					layout: TabLayout.vertical,
+					indicatorPosition: "end",
+					class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:right-0 after:left-auto after:border-r-2`
+				},
+				{
+					active: true,
+					layout: TabLayout.vertical,
+					indicatorPosition: "start",
+					class: `after:content-[''] after:absolute after:border-current after:h-full after:w-0 after:left-0 after:right-auto after:border-r-2`
+				}
+			],
+			defaultVariants: {
+				layout: TabLayout.horizontal,
+				align: "center",
+				indicatorPosition: "end",
+				active: false
+			}
+		});
+		const { isRouteActive, href: linkHref, navigate, isLink } = useTabLink({
+			link: () => __props.link,
+			to: () => __props.to,
+			exact: () => __props.exact
+		});
+		const layout = computed(() => __props.vertical ? TabLayout.vertical : TabLayout.horizontal);
+		const isSelf = computed(() => __props.target === "_self");
+		const isEffectivelyActive = computed(() => __props.active || get(isRouteActive));
+		function onClick(event) {
+			emit("click", __props.value);
+			if (navigate && get(isSelf) && event) navigate(event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(RuiButton_default, mergeProps({
+				class: [unref(tab)({
+					layout: unref(layout),
+					align: __props.align,
+					indicatorPosition: __props.indicatorPosition,
+					grow: __props.grow,
+					disabled: __props.disabled,
+					active: unref(isEffectivelyActive)
+				}), unref(isEffectivelyActive) && (__props.classNames?.active ?? __props.activeClass)],
+				"data-active-tab": unref(isEffectivelyActive) || void 0,
+				"data-align": __props.align,
+				"data-indicator-position": __props.indicatorPosition,
+				"data-vertical": __props.vertical || void 0,
+				color: unref(isEffectivelyActive) ? __props.color : void 0,
+				disabled: __props.disabled,
+				href: unref(isLink) && !unref(isSelf) ? unref(linkHref) : void 0,
+				target: unref(isLink) ? __props.target : void 0,
+				tag: unref(isLink) ? "a" : void 0,
+				"no-outline": unref(isLink),
+				role: "tab",
+				"aria-selected": unref(isEffectivelyActive),
+				tabindex: "-1",
+				"hide-focus-indicator": "",
+				variant: "text"
+			}, _ctx.$attrs, { onClick: _cache[0] || (_cache[0] = ($event) => __props.disabled ? void 0 : onClick($event)) }), createSlots({
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 2
+			}, [slots.prepend ? {
+				name: "prepend",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+				key: "0"
+			} : void 0, slots.append ? {
+				name: "append",
+				fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+				key: "1"
+			} : void 0]), 1040, [
+				"class",
+				"data-active-tab",
+				"data-align",
+				"data-indicator-position",
+				"data-vertical",
+				"color",
+				"disabled",
+				"href",
+				"target",
+				"tag",
+				"no-outline",
+				"aria-selected"
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiTab_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTab.vue_vue_type_script_setup_true_lang.js.map

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

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

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

@@ -0,0 +1,26 @@
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+interface UseTabLinkOptions {
+    /** Whether this tab is a link tab */
+    link: MaybeRefOrGetter<boolean>;
+    /** The route location to navigate to */
+    to: MaybeRefOrGetter<RouteLocationRaw>;
+    /** Whether to match the route exactly */
+    exact: MaybeRefOrGetter<boolean>;
+}
+interface UseTabLinkReturn {
+    /** Whether the link is active based on the current route */
+    isRouteActive: ComputedRef<boolean>;
+    /** The resolved href for the link */
+    href: ComputedRef<string | undefined>;
+    /** Navigate to the link's route */
+    navigate: ((event?: MouseEvent) => void) | undefined;
+    /** Whether this tab has link behavior */
+    isLink: boolean;
+}
+/**
+ * Composable that integrates vue-router's `useLink` for link-based tabs.
+ * Only activates when `link` is true, a router is available, and `to` is provided.
+ */
+export declare function useTabLink({ link, to, exact }: UseTabLinkOptions): UseTabLinkReturn;
+export {};

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

@@ -0,0 +1,28 @@
+import { computed, getCurrentInstance, toValue } from "vue";
+import { get } from "@vueuse/shared";
+import { useLink } from "vue-router";
+//#region src/components/tabs/tab/use-tab-link.ts
+/**
+* Composable that integrates vue-router's `useLink` for link-based tabs.
+* Only activates when `link` is true, a router is available, and `to` is provided.
+*/
+function useTabLink({ link, to, exact }) {
+	const hasRouter = !!getCurrentInstance()?.appContext.config.globalProperties.$router;
+	if (!(toValue(link) && hasRouter && !!toValue(to))) return {
+		isRouteActive: computed(() => false),
+		href: computed(() => void 0),
+		navigate: void 0,
+		isLink: false
+	};
+	const linkState = useLink({ to: computed(() => toValue(to)) });
+	return {
+		isRouteActive: computed(() => toValue(exact) ? get(linkState.isExactActive) : get(linkState.isActive)),
+		href: computed(() => get(linkState.href)),
+		navigate: (event) => linkState.navigate(event),
+		isLink: true
+	};
+}
+//#endregion
+export { useTabLink };
+
+//# sourceMappingURL=use-tab-link.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { Transition, createCommentVNode, createElementBlock, createVNode, defineComponent, openBlock, renderSlot, withCtx } from "vue";
+//#region src/components/tabs/tab-item/RuiTabItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-value", "data-active"];
+var _hoisted_2 = {
+	key: 0,
+	class: "w-full"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "hidden"
+};
+var RuiTabItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTabItem",
+	__name: "RuiTabItem",
+	props: {
+		active: {
+			type: Boolean,
+			default: false
+		},
+		value: {},
+		eager: {
+			type: Boolean,
+			default: false
+		},
+		reverse: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				role: "tabpanel",
+				class: "w-full",
+				"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"
+			}, {
+				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);
+		};
+	}
+});
+//#endregion
+export { RuiTabItem_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTabItem.vue_vue_type_script_setup_true_lang.js.map

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

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

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

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

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

@@ -0,0 +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\nconst modelValue = defineModel<T>();\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,76 @@
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, isVNode, mergeProps, nextTick, openBlock, ref, renderList, resolveDynamicComponent, unref, useModel, useSlots, useTemplateRef, watch } from "vue";
+import { useElementSize } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/tabs/tab-items/RuiTabItems.vue?vue&type=script&setup=true&lang.ts
+var RuiTabItems_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTabItems",
+	inheritAttrs: false,
+	__name: "RuiTabItems",
+	props: {
+		"modelValue": {},
+		"modelModifiers": {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const slots = useSlots();
+		const reverse = ref(false);
+		const currIndex = ref(-1);
+		const activeIndex = ref(-1);
+		const inner = useTemplateRef("inner");
+		const { height: innerHeight } = useElementSize(inner);
+		const children = computed(() => {
+			const tabs = getChildrenTabs(slots.default?.() ?? []);
+			let anyActive = false;
+			const children = tabs.map((tab, index) => {
+				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);
+					}
+				}
+				return {
+					...tab,
+					props: {
+						value,
+						...tab.props
+					}
+				};
+			});
+			if (!anyActive) set$1(currIndex, -1);
+			return children;
+		});
+		function getChildrenTabs(children) {
+			return children.flatMap((item) => {
+				if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0) return getChildrenTabs(item.children.filter(isVNode));
+				return [item];
+			}).flat();
+		}
+		watch(currIndex, (index) => {
+			nextTick(() => {
+				set$1(activeIndex, index);
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				class: "grow transition-all overflow-hidden",
+				style: { height: `${unref(innerHeight)}px` }
+			}, _ctx.$attrs), [createElementVNode("div", {
+				ref_key: "inner",
+				ref: inner
+			}, [(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"]);
+			}), 128))], 512)], 16);
+		};
+	}
+});
+//#endregion
+export { RuiTabItems_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTabItems.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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\nconst modelValue = defineModel<T>();\n\nconst slots = useSlots();\n\nconst reverse = ref<boolean>(false);\nconst currIndex = ref<number>(-1);\nconst activeIndex = ref<number>(-1);\nconst inner = useTemplateRef<HTMLDivElement>('inner');\n\nconst { height: innerHeight } = useElementSize(inner);\n\nconst children = computed<VNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  let anyActive = false;\n  const children = tabs.map((tab, index) => {\n    const value = tab.props?.value ?? index;\n    const active = get(modelValue) === value;\n    if (active) {\n      anyActive = true;\n      if (index !== get(currIndex)) {\n        set(reverse, index < get(currIndex));\n        set(currIndex, index);\n      }\n    }\n\n    return {\n      ...tab,\n      props: {\n        value,\n        ...tab.props,\n      },\n    };\n  });\n\n  if (!anyActive)\n    set(currIndex, -1);\n\n  return children;\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTabItem only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildrenTabs(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nwatch(currIndex, (index) => {\n  nextTick(() => {\n    set(activeIndex, index);\n  });\n});\n</script>\n\n<template>\n  <div\n    class=\"grow transition-all overflow-hidden\"\n    :style=\"{ height: `${innerHeight}px` }\"\n    v-bind=\"$attrs\"\n  >\n    <div ref=\"inner\">\n      <Component\n        :is=\"child\"\n        v-for=\"(child, i) in children\"\n        :key=\"i\"\n        :reverse=\"reverse\"\n        :active=\"i === activeIndex\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAQA,MAAM,aAAa,SAAc,SAAA,aAAE;EAEnC,MAAM,QAAQ,UAAU;EAExB,MAAM,UAAU,IAAa,MAAM;EACnC,MAAM,YAAY,IAAY,GAAG;EACjC,MAAM,cAAc,IAAY,GAAG;EACnC,MAAM,QAAQ,eAA+B,QAAQ;EAErD,MAAM,EAAE,QAAQ,gBAAgB,eAAe,MAAM;EAErD,MAAM,WAAW,eAAwB;GAGvC,MAAM,OAAO,gBAFO,MAAM,WAAW,IAAI,EAAE,CAEF;GAEzC,IAAI,YAAY;GAChB,MAAM,WAAW,KAAK,KAAK,KAAK,UAAU;IACxC,MAAM,QAAQ,IAAI,OAAO,SAAS;AAElC,QADe,MAAI,WAAW,KAAK,OACvB;AACV,iBAAY;AACZ,SAAI,UAAU,MAAI,UAAU,EAAE;AAC5B,YAAI,SAAS,QAAQ,MAAI,UAAU,CAAC;AACpC,YAAI,WAAW,MAAM;;;AAIzB,WAAO;KACL,GAAG;KACH,OAAO;MACL;MACA,GAAG,IAAI;;KAEV;KACD;AAEF,OAAI,CAAC,UACH,OAAI,WAAW,GAAG;AAEpB,UAAO;IACP;EAIF,SAAS,gBAAgB,UAA4B;AACnD,UAAO,SACJ,SAAS,SAAS;AACjB,QAAI,KAAK,SAAS,YAAY,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,SAAS,EACnF,QAAO,gBAAgB,KAAK,SAAS,OAAO,QAAQ,CAAC;AAEvD,WAAO,CAAC,KAAK;KACd,CACA,MAAM;;AAGX,QAAM,YAAY,UAAU;AAC1B,kBAAe;AACb,UAAI,aAAa,MAAM;KACvB;IACF;;uBAIA,mBAcM,OAdN,WAcM;IAbJ,OAAM;IACL,OAAK,EAAA,QAAA,GAAe,MAAA,YAAW,CAAA,KAAA;MACxBA,KAAAA,OAAM,EAAA,CAEd,mBAQM,OAAA;aARG;IAAJ,KAAI;yBACP,mBAME,UAAA,MAAA,WAJqB,MAAA,SAAQ,GAArB,OAAO,MAAC;wBAFlB,YAME,wBALK,MAAK,EAAA;KAET,KAAK;KACL,SAAS,MAAA,QAAO;KAChB,QAAQ,MAAM,MAAA,YAAA"}

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

@@ -0,0 +1,20 @@
+export declare const TabAlignment: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};
+export type TabAlignment = (typeof TabAlignment)[keyof typeof TabAlignment];
+export declare const TabIndicatorPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+export type TabIndicatorPosition = (typeof TabIndicatorPosition)[keyof typeof TabIndicatorPosition];
+export interface RouteMatchOptions {
+    exactPath?: boolean;
+    exact?: boolean;
+}
+export declare const TabLayout: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+export type TabLayout = (typeof TabLayout)[keyof typeof TabLayout];

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

@@ -0,0 +1,18 @@
+//#region src/components/tabs/tab-props.ts
+var TabAlignment = {
+	start: "start",
+	center: "center",
+	end: "end"
+};
+var TabIndicatorPosition = {
+	start: "start",
+	end: "end"
+};
+var TabLayout = {
+	horizontal: "horizontal",
+	vertical: "vertical"
+};
+//#endregion
+export { TabAlignment, TabIndicatorPosition, TabLayout };
+
+//# sourceMappingURL=tab-props.js.map

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

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

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

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

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

@@ -0,0 +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\nconst modelValue = defineModel<number | string>();\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiTab only\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,11 +1,12 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
+import { type TabAlignment, type TabIndicatorPosition } from '../../../components/tabs/tab-props.js';
 export interface Props {
     color?: ContextColorsType;
     vertical?: boolean;
     disabled?: boolean;
     grow?: boolean;
-    align?: 'start' | 'center' | 'end';
-    indicatorPosition?: 'start' | 'end';
+    align?: TabAlignment;
+    indicatorPosition?: TabIndicatorPosition;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {