@rotki/ui-library 2.15.0 → 2.16.1

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

@@ -0,0 +1,208 @@
+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 { 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";
+//#region src/components/tabs/tabs/RuiTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-vertical"];
+var RuiTabs_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiTabs",
+	__name: "RuiTabs",
+	props: /* @__PURE__ */ mergeModels({
+		color: {},
+		vertical: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		grow: {
+			type: Boolean,
+			default: false
+		},
+		align: { default: "center" },
+		indicatorPosition: { default: "end" }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const modelValue = useModel(__props, "modelValue");
+		const internalModelValue = ref();
+		const bar = useTemplateRef("bar");
+		const wrapper = useTemplateRef("wrapper");
+		const tabs = tv({
+			slots: {
+				root: "",
+				arrow: "",
+				bar: "no-scrollbar max-h-full overflow-auto",
+				wrapper: "h-full inline-flex max-w-none"
+			},
+			variants: {
+				layout: {
+					[TabLayout.horizontal]: {
+						root: "flex h-fit",
+						arrow: "h-[3rem] w-10",
+						bar: "h-[3rem]",
+						wrapper: ""
+					},
+					[TabLayout.vertical]: {
+						root: "inline-flex flex-col",
+						arrow: "min-h-[3rem] w-full",
+						bar: "",
+						wrapper: "flex-col h-auto"
+					}
+				},
+				wide: { true: {
+					bar: "w-full",
+					wrapper: "min-w-full"
+				} }
+			},
+			defaultVariants: { layout: TabLayout.horizontal }
+		});
+		const slots = useSlots();
+		const { showArrows, prevArrowDisabled, nextArrowDisabled, onPrevSliderClick, onNextSliderClick, keepActiveTabVisible } = useTabScroll({
+			bar,
+			wrapper,
+			vertical: () => __props.vertical
+		});
+		const { resolveRoute, isPathMatch } = useTabRouting({ onRouteChange: () => applyNewValue(true) });
+		const layout = computed(() => __props.vertical ? TabLayout.vertical : TabLayout.horizontal);
+		const ui = computed(() => tabs({
+			layout: get$1(layout),
+			wide: __props.vertical || __props.grow
+		}));
+		const children = computed(() => {
+			const tabs = getChildrenTabs(slots.default?.() ?? []);
+			const currentModelValue = get$1(internalModelValue);
+			const inheritedProps = {
+				color: __props.color,
+				grow: __props.grow,
+				disabled: __props.disabled,
+				vertical: __props.vertical,
+				align: __props.align,
+				indicatorPosition: __props.indicatorPosition
+			};
+			return tabs.map((tab, index) => {
+				let tabValue = tab.props?.value ?? index;
+				if (tab.props?.link !== false && tab.props?.to) tabValue = tab.props.to;
+				const active = currentModelValue === tabValue;
+				return {
+					...tab,
+					props: {
+						value: tabValue,
+						active,
+						...inheritedProps,
+						...tab.props
+					}
+				};
+			});
+		});
+		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();
+		}
+		function updateModelValue(newModelValue) {
+			set$1(modelValue, newModelValue);
+			set$1(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
+			};
+		}
+		function resolveActiveValue(onlyLink) {
+			const enabledChildren = get$1(children).filter((child) => !child.props?.disabled);
+			if (enabledChildren.length === 0) return void 0;
+			let result = get$1(modelValue) || 0;
+			enabledChildren.forEach((child, index) => {
+				const tabProps = getTabRouteProps(child.props);
+				if (!onlyLink && index === 0 && tabProps.value) result = tabProps.value;
+				const fullPath = resolveRoute(tabProps.to);
+				if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps)) result = fullPath;
+			});
+			return result;
+		}
+		function applyNewValue(onlyLink = false) {
+			const value = resolveActiveValue(onlyLink);
+			if (value !== void 0) updateModelValue(value);
+			keepActiveTabVisible();
+		}
+		watchImmediate(() => get$1(modelValue), (modelValue) => {
+			set$1(internalModelValue, modelValue);
+		});
+		watch(internalModelValue, () => {
+			keepActiveTabVisible();
+		});
+		onMounted(() => {
+			if (get$1(modelValue) !== void 0) return;
+			applyNewValue();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(ui).root()),
+				"data-vertical": __props.vertical || void 0
+			}, [
+				unref(showArrows) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).arrow())
+				}, [createVNode(RuiButton_default, {
+					class: "w-full h-full !rounded-none",
+					variant: "text",
+					color: __props.color,
+					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),
+				createElementVNode("div", {
+					ref_key: "bar",
+					ref: bar,
+					class: normalizeClass(unref(ui).bar())
+				}, [createElementVNode("div", {
+					ref_key: "wrapper",
+					ref: wrapper,
+					role: "tablist",
+					"data-id": "tabs-wrapper",
+					class: normalizeClass(unref(ui).wrapper())
+				}, [(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),
+				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,
+					disabled: unref(nextArrowDisabled),
+					onClick: _cache[2] || (_cache[2] = ($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)
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiTabs_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiTabs.vue_vue_type_script_setup_true_lang.js.map

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

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

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

@@ -0,0 +1,28 @@
+import type { RouteMatchOptions } from '../../../components/tabs/tab-props.js';
+import { type RouteLocationRaw } from 'vue-router';
+interface UseTabRoutingOptions {
+    /** Callback invoked when the route changes, to re-sync the active tab */
+    onRouteChange: () => void;
+}
+interface UseTabRoutingReturn {
+    /** Whether vue-router is available in the app context */
+    hasRouter: boolean;
+    /**
+     * Resolves a route location and returns its full path, or undefined
+     * if the router is not available or the value is not a valid route location.
+     */
+    resolveRoute: (to: unknown) => string | undefined;
+    /**
+     * Checks whether a given path matches the current route.
+     * Supports exact path, exact route, and prefix matching.
+     */
+    isPathMatch: (path: string, options: RouteMatchOptions) => boolean;
+}
+export declare function isRouteLocation(value: unknown): value is RouteLocationRaw;
+/**
+ * Composable that manages vue-router integration for the RuiTabs component.
+ * Provides route resolution and path matching utilities, and watches for
+ * route changes to notify the parent component.
+ */
+export declare function useTabRouting({ onRouteChange }: UseTabRoutingOptions): UseTabRoutingReturn;
+export {};

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

@@ -0,0 +1,43 @@
+import { getCurrentInstance, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+//#region src/components/tabs/tabs/use-tab-routing.ts
+function isRouteLocation(value) {
+	return typeof value === "string" || typeof value === "object" && value !== null;
+}
+/**
+* Composable that manages vue-router integration for the RuiTabs component.
+* Provides route resolution and path matching utilities, and watches for
+* route changes to notify the parent component.
+*/
+function useTabRouting({ onRouteChange }) {
+	const hasRouter = getCurrentInstance()?.appContext.config.globalProperties.$router !== void 0;
+	if (!hasRouter) return {
+		hasRouter,
+		resolveRoute: () => void 0,
+		isPathMatch: () => false
+	};
+	const route = useRoute();
+	const router = useRouter();
+	function resolveRoute(to) {
+		if (!isRouteLocation(to)) return void 0;
+		return router.resolve(to).fullPath;
+	}
+	function isPathMatch(path, { exactPath, 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;
+		return currentRoute.startsWith(routeWithoutQueryParams);
+	}
+	watch(route, onRouteChange);
+	return {
+		hasRouter,
+		resolveRoute,
+		isPathMatch
+	};
+}
+//#endregion
+export { useTabRouting };
+
+//# sourceMappingURL=use-tab-routing.js.map

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

@@ -0,0 +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;AACzE,QAAO,OAAO,UAAU,YAAa,OAAO,UAAU,YAAY,UAAU;;;;;;;AAQ9E,SAAgB,cAAc,EAAE,iBAA4D;CAC1F,MAAM,YAAY,oBAAoB,EAAE,WAAW,OAAO,iBAAiB,YAAY,KAAA;AAEvF,KAAI,CAAC,UACH,QAAO;EACL;EACA,oBAAoB,KAAA;EACpB,mBAAmB;EACpB;CAGH,MAAM,QAAQ,UAAU;CACxB,MAAM,SAAS,WAAW;CAE1B,SAAS,aAAa,IAAiC;AACrD,MAAI,CAAC,gBAAgB,GAAG,CACtB,QAAO,KAAA;AAET,SAAO,OAAO,QAAQ,GAAG,CAAC;;CAG5B,SAAS,YACP,MACA,EAAE,WAAW,SACJ;EACT,MAAM,eAAe,MAAM;AAE3B,MAAI,UACF,QAAO,iBAAiB;EAE1B,MAAM,OAAO,OAAO,WAAW,cAAc,OAAO,SAAS,SAAS;EACtE,MAAM,0BAA0B,IAAI,IAAI,MAAM,KAAK,CAAC;AAEpD,MAAI,MACF,QAAO,iBAAiB;AAE1B,SAAO,aAAa,WAAW,wBAAwB;;AAGzD,OAAM,OAAO,cAAc;AAE3B,QAAO;EACL;EACA;EACA;EACD"}

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

@@ -0,0 +1,23 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+interface UseTabScrollOptions {
+    /** The scrollable bar container element */
+    bar: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** The wrapper element containing the tab buttons */
+    wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;
+    /** Getter for the current vertical orientation state */
+    vertical: MaybeRefOrGetter<boolean>;
+}
+interface UseTabScrollReturn {
+    showArrows: Readonly<Ref<boolean>>;
+    prevArrowDisabled: ComputedRef<boolean>;
+    nextArrowDisabled: ComputedRef<boolean>;
+    onPrevSliderClick: () => void;
+    onNextSliderClick: () => void;
+    keepActiveTabVisible: () => void;
+}
+/**
+ * Composable that manages tab scroll behavior, overflow arrow visibility,
+ * and active tab auto-scrolling for the RuiTabs component.
+ */
+export declare function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn;
+export {};

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

@@ -0,0 +1,68 @@
+import { computed, nextTick, readonly, shallowRef, toRefs, toValue } from "vue";
+import { useElementSize, useResizeObserver, useScroll } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/components/tabs/tabs/use-tab-scroll.ts
+/**
+* Composable that manages tab scroll behavior, overflow arrow visibility,
+* and active tab auto-scrolling for the RuiTabs component.
+*/
+function useTabScroll({ bar, wrapper, vertical }) {
+	const showArrows = shallowRef(false);
+	const { width: barWidth, height: barHeight } = useElementSize(bar);
+	const { arrivedState, x, y } = useScroll(bar, { behavior: "smooth" });
+	const { top, bottom, left, right } = toRefs(arrivedState);
+	function checkOverflow() {
+		const elem = get$1(wrapper);
+		const barElem = get$1(bar);
+		if (!elem || !barElem) {
+			set$1(showArrows, false);
+			return;
+		}
+		set$1(showArrows, toValue(vertical) ? elem.scrollHeight > barElem.offsetHeight : elem.scrollWidth > barElem.offsetWidth);
+	}
+	useResizeObserver(bar, checkOverflow);
+	useResizeObserver(wrapper, () => {
+		checkOverflow();
+		keepActiveTabVisible();
+	});
+	const prevArrowDisabled = computed(() => toValue(vertical) ? get$1(top) : get$1(left));
+	const nextArrowDisabled = computed(() => toValue(vertical) ? get$1(bottom) : get$1(right));
+	function scrollToActiveTab() {
+		if (!get$1(showArrows)) return;
+		const elem = get$1(wrapper);
+		const barElem = get$1(bar);
+		if (!elem || !barElem) return;
+		const activeTab = elem.querySelector("[data-active-tab]");
+		if (!activeTab) return;
+		const childLeft = activeTab.offsetLeft - elem.offsetLeft;
+		const childTop = activeTab.offsetTop - elem.offsetTop;
+		barElem.scrollTo({
+			left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),
+			top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),
+			behavior: "smooth"
+		});
+	}
+	function keepActiveTabVisible() {
+		nextTick(scrollToActiveTab);
+	}
+	function onPrevSliderClick() {
+		if (!toValue(vertical)) set$1(x, get$1(x) - get$1(barWidth));
+		else set$1(y, get$1(y) - get$1(barHeight));
+	}
+	function onNextSliderClick() {
+		if (!toValue(vertical)) set$1(x, get$1(x) + get$1(barWidth));
+		else set$1(y, get$1(y) + get$1(barHeight));
+	}
+	return {
+		showArrows: readonly(showArrows),
+		prevArrowDisabled,
+		nextArrowDisabled,
+		onPrevSliderClick,
+		onNextSliderClick,
+		keepActiveTabVisible
+	};
+}
+//#endregion
+export { useTabScroll };
+
+//# sourceMappingURL=use-tab-scroll.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tab-scroll.js","names":[],"sources":["../../../../src/components/tabs/tabs/use-tab-scroll.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';\n\ninterface UseTabScrollOptions {\n  /** The scrollable bar container element */\n  bar: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** The wrapper element containing the tab buttons */\n  wrapper: Readonly<ShallowRef<HTMLDivElement | null>>;\n  /** Getter for the current vertical orientation state */\n  vertical: MaybeRefOrGetter<boolean>;\n}\n\ninterface UseTabScrollReturn {\n  showArrows: Readonly<Ref<boolean>>;\n  prevArrowDisabled: ComputedRef<boolean>;\n  nextArrowDisabled: ComputedRef<boolean>;\n  onPrevSliderClick: () => void;\n  onNextSliderClick: () => void;\n  keepActiveTabVisible: () => void;\n}\n\n/**\n * Composable that manages tab scroll behavior, overflow arrow visibility,\n * and active tab auto-scrolling for the RuiTabs component.\n */\nexport function useTabScroll({ bar, wrapper, vertical }: UseTabScrollOptions): UseTabScrollReturn {\n  const showArrows = shallowRef<boolean>(false);\n\n  const { width: barWidth, height: barHeight } = useElementSize(bar);\n  const { arrivedState, x, y } = useScroll(bar, { behavior: 'smooth' });\n  const { top, bottom, left, right } = toRefs(arrivedState);\n\n  function checkOverflow(): void {\n    const elem = get(wrapper);\n    const barElem = get(bar);\n    if (!elem || !barElem) {\n      set(showArrows, false);\n      return;\n    }\n\n    const overflows = toValue(vertical)\n      ? elem.scrollHeight > barElem.offsetHeight\n      : elem.scrollWidth > barElem.offsetWidth;\n\n    set(showArrows, overflows);\n  }\n\n  useResizeObserver(bar, checkOverflow);\n  useResizeObserver(wrapper, () => {\n    checkOverflow();\n    keepActiveTabVisible();\n  });\n\n  const prevArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(top) : get(left));\n\n  const nextArrowDisabled = computed<boolean>(() => toValue(vertical) ? get(bottom) : get(right));\n\n  function scrollToActiveTab(): void {\n    if (!get(showArrows))\n      return;\n\n    const elem = get(wrapper);\n    const barElem = get(bar);\n\n    if (!elem || !barElem)\n      return;\n\n    const activeTab = elem.querySelector<HTMLElement>('[data-active-tab]');\n\n    if (!activeTab)\n      return;\n\n    const childLeft = activeTab.offsetLeft - elem.offsetLeft;\n    const childTop = activeTab.offsetTop - elem.offsetTop;\n\n    barElem.scrollTo({\n      left: Math.max(Math.min(barElem.scrollLeft, childLeft), childLeft + activeTab.offsetWidth - barElem.offsetWidth),\n      top: Math.max(Math.min(barElem.scrollTop, childTop), childTop + activeTab.offsetHeight - barElem.offsetHeight),\n      behavior: 'smooth',\n    });\n  }\n\n  function keepActiveTabVisible(): void {\n    nextTick(scrollToActiveTab);\n  }\n\n  function onPrevSliderClick(): void {\n    if (!toValue(vertical))\n      set(x, get(x) - get(barWidth));\n    else\n      set(y, get(y) - get(barHeight));\n  }\n\n  function onNextSliderClick(): void {\n    if (!toValue(vertical))\n      set(x, get(x) + get(barWidth));\n    else\n      set(y, get(y) + get(barHeight));\n  }\n\n  return {\n    showArrows: readonly(showArrows),\n    prevArrowDisabled,\n    nextArrowDisabled,\n    onPrevSliderClick,\n    onNextSliderClick,\n    keepActiveTabVisible,\n  };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,aAAa,EAAE,KAAK,SAAS,YAAqD;CAChG,MAAM,aAAa,WAAoB,MAAM;CAE7C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,IAAI;CAClE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,UAAU,CAAC;CACrE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,aAAa;CAEzD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,QAAQ;EACzB,MAAM,UAAU,MAAI,IAAI;AACxB,MAAI,CAAC,QAAQ,CAAC,SAAS;AACrB,SAAI,YAAY,MAAM;AACtB;;AAOF,QAAI,YAJc,QAAQ,SAAS,GAC/B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ,YAEL;;AAG5B,mBAAkB,KAAK,cAAc;AACrC,mBAAkB,eAAe;AAC/B,iBAAe;AACf,wBAAsB;GACtB;CAEF,MAAM,oBAAoB,eAAwB,QAAQ,SAAS,GAAG,MAAI,IAAI,GAAG,MAAI,KAAK,CAAC;CAE3F,MAAM,oBAAoB,eAAwB,QAAQ,SAAS,GAAG,MAAI,OAAO,GAAG,MAAI,MAAM,CAAC;CAE/F,SAAS,oBAA0B;AACjC,MAAI,CAAC,MAAI,WAAW,CAClB;EAEF,MAAM,OAAO,MAAI,QAAQ;EACzB,MAAM,UAAU,MAAI,IAAI;AAExB,MAAI,CAAC,QAAQ,CAAC,QACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,oBAAoB;AAEtE,MAAI,CAAC,UACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;AAE5C,UAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,UAAU,EAAE,YAAY,UAAU,cAAc,QAAQ,YAAY;GAChH,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,SAAS,EAAE,WAAW,UAAU,eAAe,QAAQ,aAAa;GAC9G,UAAU;GACX,CAAC;;CAGJ,SAAS,uBAA6B;AACpC,WAAS,kBAAkB;;CAG7B,SAAS,oBAA0B;AACjC,MAAI,CAAC,QAAQ,SAAS,CACpB,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,SAAS,CAAC;MAE9B,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,UAAU,CAAC;;CAGnC,SAAS,oBAA0B;AACjC,MAAI,CAAC,QAAQ,SAAS,CACpB,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,SAAS,CAAC;MAE9B,OAAI,GAAG,MAAI,EAAE,GAAG,MAAI,UAAU,CAAC;;AAGnC,QAAO;EACL,YAAY,SAAS,WAAW;EAChC;EACA;EACA;EACA;EACA;EACD"}

package/dist/components/time-picker/RuiTimePicker.js

@@ -0,0 +1,7 @@
+import RuiTimePicker_vue_vue_type_script_setup_true_lang_default from "./RuiTimePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/time-picker/RuiTimePicker.vue
+var RuiTimePicker_default = RuiTimePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiTimePicker_default as default };
+
+//# sourceMappingURL=RuiTimePicker.js.map

package/dist/components/time-picker/RuiTimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiTimePicker.js","names":[],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n  accuracy?: TimeAccuracy;\n  borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n  hour: 12,\n  minute: 60,\n  second: 60,\n  millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n  hour: 1,\n  minute: 5,\n  second: 5,\n  millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n  () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n  isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n  if (!isDefined(selectedHour)) {\n    return undefined;\n  }\n  const hourValue = get(selectedHour);\n  const hour = hourValue % TWELVE_HOURS;\n  return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour);\n  }\n  else if (mode === 'minute') {\n    return get(selectedMinute);\n  }\n  else if (mode === 'second') {\n    return get(selectedSecond);\n  }\n  else {\n    return get(selectedMillisecond);\n  }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n  const mode = get(editMode);\n  if (mode === 'hour' || !isDefined(editedValue)) {\n    return false;\n  }\n  else {\n    const interval = intervals[mode];\n    const value = get(editedValue);\n    return value % interval !== 0;\n  }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  return {\n    height: '36%',\n    top: '14%',\n    left: '50%',\n    transformOrigin: 'bottom center',\n    transform: `translateX(-50%) rotate(${angle}deg)`,\n    zIndex: 10,\n  };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n  if (!isDefined(editedValue)) {\n    return {};\n  }\n  const radius = '38%';\n  const currentValue = get(editedValue);\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n  const radians = (angle * Math.PI) / 180;\n\n  const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n  const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n  return {\n    position: 'absolute',\n    top: `${y}%`,\n    left: `${x}%`,\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 11,\n  };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n  const mode = get(editMode);\n  const interval = intervals[mode];\n  const total = totalItemsPerMode[mode];\n  const numbers = generateNumbers(total, interval);\n  if (mode === 'hour') {\n    numbers[0] = 12;\n  }\n  return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n  return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n    ? new Date(get(modelValue)).getMilliseconds()\n    : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n  const numbers: number[] = [];\n  for (let i = 0; i < total; i += interval) {\n    numbers.push(i);\n  }\n  return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n  return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n  const radius = '38%';\n  const totalItems = totalItemsPerMode[get(editMode)];\n  const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n  const radians = (angle * Math.PI) / 180;\n  const x = 50 + parseFloat(radius) * Math.cos(radians);\n  const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n  return {\n    top: `${y}%`,\n    left: `${x}%`,\n    transform: 'translate(-50%, -50%)',\n  };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n  if (!isDefined(editedValue)) {\n    return false;\n  }\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    return get(displayHour) === num;\n  }\n  else {\n    const value = get(editedValue);\n    const interval = intervals[mode];\n    return value === num || (value % interval === 0 && value === num);\n  }\n}\n\nfunction toggleAmPm(): void {\n  if (!isDefined(selectedHour)) {\n    return;\n  }\n  if (get(selectedHour) < TWELVE_HOURS) {\n    set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n  }\n  else {\n    set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n  }\n\n  updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n  event.preventDefault();\n  set(isDragging, true);\n\n  if (!isDefined(clockFace))\n    return;\n\n  const rect = get(clockFace).getBoundingClientRect();\n  const centerX = rect.left + rect.width / 2;\n  const centerY = rect.top + rect.height / 2;\n  let rafId: number | null = null;\n\n  const applyMove = (clientX: number, clientY: number): void => {\n    const x = clientX - centerX;\n    const y = clientY - centerY;\n\n    let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n    if (angle < 0)\n      angle += FULL_CIRCLE;\n\n    const mode = get(editMode);\n    const unit =\n      Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour = unit;\n      if (hour === 0)\n        hour = TWELVE_HOURS;\n\n      if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n        hour += TWELVE_HOURS;\n      }\n      else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n        hour = 0;\n      }\n\n      set(selectedHour, hour);\n    }\n    else if (mode === 'minute') {\n      set(selectedMinute, unit);\n    }\n    else if (mode === 'second') {\n      set(selectedSecond, unit);\n    }\n    else {\n      set(selectedMillisecond, unit);\n    }\n\n    updateModelValue();\n  };\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n    if (!get(isDragging))\n      return;\n\n    if (rafId !== null)\n      return;\n\n    let clientX: number;\n    let clientY: number;\n\n    if ('touches' in moveEvent) {\n      const touch = moveEvent.touches[0];\n      assert(touch);\n      clientX = touch.clientX;\n      clientY = touch.clientY;\n    }\n    else {\n      clientX = moveEvent.clientX;\n      clientY = moveEvent.clientY;\n    }\n\n    rafId = requestAnimationFrame(() => {\n      applyMove(clientX, clientY);\n      rafId = null;\n    });\n  };\n\n  const handleEnd = (): void => {\n    if (rafId !== null) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n    set(isDragging, false);\n    document.removeEventListener('mousemove', handleMove);\n    document.removeEventListener('touchmove', handleMove);\n    document.removeEventListener('mouseup', handleEnd);\n    document.removeEventListener('touchend', handleEnd);\n\n    if (get(editMode) === 'hour') {\n      set(editMode, 'minute');\n    }\n    else if (get(showSecond) && get(editMode) === 'minute') {\n      set(editMode, 'second');\n    }\n    else if (get(showMillisecond) && get(editMode) === 'second') {\n      set(editMode, 'millisecond');\n    }\n  };\n\n  document.addEventListener('mousemove', handleMove);\n  document.addEventListener('touchmove', handleMove);\n  document.addEventListener('mouseup', handleEnd);\n  document.addEventListener('touchend', handleEnd);\n\n  // Apply initial position synchronously for immediate feedback\n  const initialEvent = event;\n  let clientX: number;\n  let clientY: number;\n  if ('touches' in initialEvent) {\n    const touch = initialEvent.touches[0];\n    assert(touch);\n    clientX = touch.clientX;\n    clientY = touch.clientY;\n  }\n  else {\n    clientX = initialEvent.clientX;\n    clientY = initialEvent.clientY;\n  }\n  applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n  const mode = get(editMode);\n  if (mode === 'hour') {\n    let newHour = num;\n\n    if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n      newHour += TWELVE_HOURS;\n    }\n\n    set(selectedHour, newHour);\n    set(editMode, 'minute');\n  }\n  else if (mode === 'minute') {\n    set(selectedMinute, num);\n    if (get(showSecond))\n      set(editMode, 'second');\n  }\n  else if (mode === 'second') {\n    set(selectedSecond, num);\n    if (get(showMillisecond)) {\n      set(editMode, 'millisecond');\n    }\n  }\n  else if (mode === 'millisecond') {\n    set(selectedMillisecond, num);\n  }\n\n  updateModelValue();\n}\n\nfunction updateModelValue(): void {\n  if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n    return;\n  }\n  nextTick(() => {\n    const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n    date.setHours(get(selectedHour));\n    date.setMinutes(get(selectedMinute));\n    date.setSeconds(get(selectedSecond) ?? 0);\n    date.setMilliseconds(get(selectedMillisecond) ?? 0);\n    set(modelValue, date);\n  });\n}\n\nwatch(\n  modelValue,\n  () => {\n    set(selectedHour, getModelHours());\n    set(selectedMinute, getModelMinutes());\n    set(selectedSecond, getModelSeconds());\n    set(selectedMillisecond, getModelMilliseconds());\n  },\n);\n\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"ui.root({ bordered: !borderless })\"\n  >\n    <div :class=\"ui.digitalDisplay()\">\n      <div class=\"flex justify-center items-center gap-1\">\n        <div\n          role=\"button\"\n          aria-label=\"Select hours\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </div>\n        <div class=\"text-2xl font-semibold\">\n          :\n        </div>\n        <div\n          role=\"button\"\n          aria-label=\"Select minutes\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </div>\n        <div\n          v-if=\"showSecond\"\n          class=\"text-2xl font-semibold\"\n        >\n          :\n        </div>\n        <div\n          v-if=\"showSecond\"\n          role=\"button\"\n          aria-label=\"Select seconds\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </div>\n\n        <div\n          v-if=\"showMillisecond\"\n          class=\"text-lg font-semibold\"\n        >\n          .\n        </div>\n\n        <div\n          v-if=\"showMillisecond\"\n          role=\"button\"\n          aria-label=\"Select milliseconds\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: '!text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </div>\n        <div class=\"text-xl\">\n          <div\n            role=\"button\"\n            aria-label=\"Toggle AM/PM\"\n            class=\"rui-time-picker-period cursor-pointer\"\n            @click=\"toggleAmPm()\"\n          >\n            {{ period }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      ref=\"clockFace\"\n      role=\"listbox\"\n      :aria-label=\"`Select ${editMode}`\"\n      :class=\"ui.clockFace()\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"ui.centerDot()\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"ui.clockHand()\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"ui.clockHandCircle()\"\n        :style=\"clockHandCircleStyle\"\n      />\n\n      <div\n        v-for=\"num in clockNumbers\"\n        :key=\"`num-${num}`\"\n        role=\"option\"\n        :aria-selected=\"isSelectedNumber(num)\"\n        :class=\"[\n          ui.clockNumber({ selected: isSelectedNumber(num) }),\n          `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n        ]\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}