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

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

@@ -1,6 +1,6 @@
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { useElementSize, useResizeObserver, useScroll } from "../../../vendor/@vueuse/core/dist/index.js";
 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,
@@ -12,26 +12,26 @@ function useTabScroll({ bar, wrapper, vertical }) {
 	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);
+		const elem = get(wrapper);
+		const barElem = get(bar);
 		if (!elem || !barElem) {
-			set$1(showArrows, false);
+			set(showArrows, false);
 			return;
 		}
 		const overflows = toValue(vertical) ? elem.scrollHeight > barElem.offsetHeight : elem.scrollWidth > barElem.offsetWidth;
-		set$1(showArrows, overflows);
+		set(showArrows, overflows);
 	}
 	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));
+	const prevArrowDisabled = computed(() => toValue(vertical) ? get(top) : get(left));
+	const nextArrowDisabled = computed(() => toValue(vertical) ? get(bottom) : get(right));
 	function scrollToActiveTab() {
-		if (!get$1(showArrows)) return;
-		const elem = get$1(wrapper);
-		const barElem = get$1(bar);
+		if (!get(showArrows)) return;
+		const elem = get(wrapper);
+		const barElem = get(bar);
 		if (!elem || !barElem) return;
 		const activeTab = elem.querySelector("[data-active-tab]");
 		if (!activeTab) return;
@@ -47,12 +47,12 @@ function useTabScroll({ bar, wrapper, vertical }) {
 		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));
+		if (!toValue(vertical)) set(x, get(x) - get(barWidth));
+		else set(y, get(y) - get(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));
+		if (!toValue(vertical)) set(x, get(x) + get(barWidth));
+		else set(y, get(y) + get(barHeight));
 	}
 	return {
 		showArrows: readonly(showArrows),

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

@@ -1 +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,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,MAAI,YAAY,KAAK;GACrB;EACF;EAEA,MAAM,YAAY,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ;EAE/B,MAAI,YAAY,SAAS;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,GAAG,IAAI,MAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,MAAI,MAAM,IAAI,MAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,MAAI,UAAU,GACjB;EAEF,MAAM,OAAO,MAAI,OAAO;EACxB,MAAM,UAAU,MAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,QAAQ,CAAC;OAE7B,MAAI,GAAG,MAAI,CAAC,IAAI,MAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"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,KAAK;CAE5C,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,eAAe,GAAG;CACjE,MAAM,EAAE,cAAc,GAAG,MAAM,UAAU,KAAK,EAAE,UAAU,SAAS,CAAC;CACpE,MAAM,EAAE,KAAK,QAAQ,MAAM,UAAU,OAAO,YAAY;CAExD,SAAS,gBAAsB;EAC7B,MAAM,OAAO,IAAI,OAAO;EACxB,MAAM,UAAU,IAAI,GAAG;EACvB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,IAAI,YAAY,KAAK;GACrB;EACF;EAEA,MAAM,YAAY,QAAQ,QAAQ,IAC9B,KAAK,eAAe,QAAQ,eAC5B,KAAK,cAAc,QAAQ;EAE/B,IAAI,YAAY,SAAS;CAC3B;CAEA,kBAAkB,KAAK,aAAa;CACpC,kBAAkB,eAAe;EAC/B,cAAc;EACd,qBAAqB;CACvB,CAAC;CAED,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC;CAE1F,MAAM,oBAAoB,eAAwB,QAAQ,QAAQ,IAAI,IAAI,MAAM,IAAI,IAAI,KAAK,CAAC;CAE9F,SAAS,oBAA0B;EACjC,IAAI,CAAC,IAAI,UAAU,GACjB;EAEF,MAAM,OAAO,IAAI,OAAO;EACxB,MAAM,UAAU,IAAI,GAAG;EAEvB,IAAI,CAAC,QAAQ,CAAC,SACZ;EAEF,MAAM,YAAY,KAAK,cAA2B,mBAAmB;EAErE,IAAI,CAAC,WACH;EAEF,MAAM,YAAY,UAAU,aAAa,KAAK;EAC9C,MAAM,WAAW,UAAU,YAAY,KAAK;EAE5C,QAAQ,SAAS;GACf,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,YAAY,SAAS,GAAG,YAAY,UAAU,cAAc,QAAQ,WAAW;GAC/G,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ,WAAW,QAAQ,GAAG,WAAW,UAAU,eAAe,QAAQ,YAAY;GAC7G,UAAU;EACZ,CAAC;CACH;CAEA,SAAS,uBAA6B;EACpC,SAAS,iBAAiB;CAC5B;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;OAE7B,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;CAClC;CAEA,SAAS,oBAA0B;EACjC,IAAI,CAAC,QAAQ,QAAQ,GACnB,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC;OAE7B,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;CAClC;CAEA,OAAO;EACL,YAAY,SAAS,UAAU;EAC/B;EACA;EACA;EACA;EACA;CACF;AACF"}

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

@@ -1 +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":""}
+{"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=\"ui.time()\">\n        <button\n          type=\"button\"\n          aria-label=\"Select hours\"\n          :aria-pressed=\"editMode === 'hour'\"\n          :class=\"ui.digit({ active: editMode === 'hour' })\"\n          @click=\"editMode = 'hour'\"\n        >\n          {{ formatValue(displayHour) }}\n        </button>\n        <div :class=\"ui.separator()\">\n          :\n        </div>\n        <button\n          type=\"button\"\n          aria-label=\"Select minutes\"\n          :aria-pressed=\"editMode === 'minute'\"\n          :class=\"ui.digit({ active: editMode === 'minute' })\"\n          @click=\"editMode = 'minute'\"\n        >\n          {{ formatValue(selectedMinute) }}\n        </button>\n        <div\n          v-if=\"showSecond\"\n          :class=\"ui.separator()\"\n        >\n          :\n        </div>\n        <button\n          v-if=\"showSecond\"\n          type=\"button\"\n          aria-label=\"Select seconds\"\n          :aria-pressed=\"editMode === 'second'\"\n          :class=\"ui.digit({ active: editMode === 'second' })\"\n          @click=\"editMode = 'second'\"\n        >\n          {{ formatValue(selectedSecond) }}\n        </button>\n\n        <div\n          v-if=\"showMillisecond\"\n          :class=\"ui.separator({ class: 'text-lg' })\"\n        >\n          .\n        </div>\n\n        <button\n          v-if=\"showMillisecond\"\n          type=\"button\"\n          aria-label=\"Select milliseconds\"\n          :aria-pressed=\"editMode === 'millisecond'\"\n          :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n          @click=\"editMode = 'millisecond'\"\n        >\n          {{ formatValue(selectedMillisecond, 3) }}\n        </button>\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Toggle AM/PM\"\n        :class=\"ui.period()\"\n        @click=\"toggleAmPm()\"\n      >\n        {{ period }}\n      </button>\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":""}

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

@@ -1,20 +1,13 @@
 import { assert } from "../../utils/assert.js";
+import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { timePickerStyles } from "./time-picker-styles.js";
 import { TimeAccuracy } from "../../consts/time-accuracy.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
-import { isDefined } from "@vueuse/core";
-import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/time-picker/RuiTimePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "flex justify-center items-center gap-1" };
-var _hoisted_2 = {
-	key: 0,
-	class: "text-2xl font-semibold"
-};
-var _hoisted_3 = {
-	key: 2,
-	class: "text-lg font-semibold"
-};
-var _hoisted_4 = { class: "text-xl" };
+var _hoisted_1 = ["aria-pressed"];
+var _hoisted_2 = ["aria-pressed"];
+var _hoisted_3 = ["aria-pressed"];
+var _hoisted_4 = ["aria-pressed"];
 var _hoisted_5 = ["aria-label"];
 var _hoisted_6 = ["aria-selected", "onClick"];
 var FULL_CIRCLE = 360;
@@ -73,25 +66,25 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const clockFace = useTemplateRef("clockFace");
 		const showSecond = computed(() => __props.accuracy === TimeAccuracy.SECOND || __props.accuracy === TimeAccuracy.MILLISECOND);
 		const showMillisecond = computed(() => __props.accuracy === TimeAccuracy.MILLISECOND);
-		const period = computed(() => isDefined(selectedHour) && get$1(selectedHour) >= TWELVE_HOURS ? "PM" : "AM");
+		const period = computed(() => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? "PM" : "AM");
 		const displayHour = computed(() => {
 			if (!isDefined(selectedHour)) return;
-			const hour = get$1(selectedHour) % TWELVE_HOURS;
+			const hour = get(selectedHour) % TWELVE_HOURS;
 			return hour === 0 ? TWELVE_HOURS : hour;
 		});
 		const editedValue = computed(() => {
-			const mode = get$1(editMode);
-			if (mode === "hour") return get$1(displayHour);
-			else if (mode === "minute") return get$1(selectedMinute);
-			else if (mode === "second") return get$1(selectedSecond);
-			else return get$1(selectedMillisecond);
+			const mode = get(editMode);
+			if (mode === "hour") return get(displayHour);
+			else if (mode === "minute") return get(selectedMinute);
+			else if (mode === "second") return get(selectedSecond);
+			else return get(selectedMillisecond);
 		});
 		const displayClockHandCircle = computed(() => {
-			const mode = get$1(editMode);
+			const mode = get(editMode);
 			if (mode === "hour" || !isDefined(editedValue)) return false;
 			else {
 				const interval = intervals[mode];
-				return get$1(editedValue) % interval !== 0;
+				return get(editedValue) % interval !== 0;
 			}
 		});
 		const dotStyle = computed(() => ({
@@ -106,14 +99,14 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				top: "14%",
 				left: "50%",
 				transformOrigin: "bottom center",
-				transform: `translateX(-50%) rotate(${get$1(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get$1(editMode)])}deg)`,
+				transform: `translateX(-50%) rotate(${get(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get(editMode)])}deg)`,
 				zIndex: 10
 			};
 		});
 		const clockHandCircleStyle = computed(() => {
 			if (!isDefined(editedValue)) return {};
 			const radius = "38%";
-			const radians = get$1(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get$1(editMode)]) * Math.PI / 180;
+			const radians = get(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get(editMode)]) * Math.PI / 180;
 			const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);
 			return {
 				position: "absolute",
@@ -127,7 +120,7 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			};
 		});
 		const clockNumbers = computed(() => {
-			const mode = get$1(editMode);
+			const mode = get(editMode);
 			const interval = intervals[mode];
 			const total = totalItemsPerMode[mode];
 			const numbers = generateNumbers(total, interval);
@@ -135,16 +128,16 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			return numbers;
 		});
 		function getModelHours() {
-			return isDefined(modelValue) ? new Date(get$1(modelValue)).getHours() : void 0;
+			return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : void 0;
 		}
 		function getModelMinutes() {
-			return isDefined(modelValue) ? new Date(get$1(modelValue)).getMinutes() : void 0;
+			return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : void 0;
 		}
 		function getModelSeconds() {
-			return [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND].includes(__props.accuracy) && isDefined(modelValue) ? new Date(get$1(modelValue)).getSeconds() : void 0;
+			return [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND].includes(__props.accuracy) && isDefined(modelValue) ? new Date(get(modelValue)).getSeconds() : void 0;
 		}
 		function getModelMilliseconds() {
-			return __props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get$1(modelValue)).getMilliseconds() : void 0;
+			return __props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get(modelValue)).getMilliseconds() : void 0;
 		}
 		function generateNumbers(total, interval) {
 			const numbers = [];
@@ -156,7 +149,7 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		}
 		function numberStyle(num) {
 			const radius = "38%";
-			const radians = (num * (FULL_CIRCLE / totalItemsPerMode[get$1(editMode)]) - 90) * Math.PI / 180;
+			const radians = (num * (FULL_CIRCLE / totalItemsPerMode[get(editMode)]) - 90) * Math.PI / 180;
 			const x = 50 + parseFloat(radius) * Math.cos(radians);
 			return {
 				top: `${50 + parseFloat(radius) * Math.sin(radians)}%`,
@@ -166,25 +159,25 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		}
 		function isSelectedNumber(num) {
 			if (!isDefined(editedValue)) return false;
-			const mode = get$1(editMode);
-			if (mode === "hour") return get$1(displayHour) === num;
+			const mode = get(editMode);
+			if (mode === "hour") return get(displayHour) === num;
 			else {
-				const value = get$1(editedValue);
+				const value = get(editedValue);
 				const interval = intervals[mode];
 				return value === num || value % interval === 0 && value === num;
 			}
 		}
 		function toggleAmPm() {
 			if (!isDefined(selectedHour)) return;
-			if (get$1(selectedHour) < TWELVE_HOURS) set$1(selectedHour, get$1(selectedHour) + TWELVE_HOURS);
-			else set$1(selectedHour, get$1(selectedHour) - TWELVE_HOURS);
+			if (get(selectedHour) < TWELVE_HOURS) set(selectedHour, get(selectedHour) + TWELVE_HOURS);
+			else set(selectedHour, get(selectedHour) - TWELVE_HOURS);
 			updateModelValue();
 		}
 		function startDrag(event) {
 			event.preventDefault();
-			set$1(isDragging, true);
+			set(isDragging, true);
 			if (!isDefined(clockFace)) return;
-			const rect = get$1(clockFace).getBoundingClientRect();
+			const rect = get(clockFace).getBoundingClientRect();
 			const centerX = rect.left + rect.width / 2;
 			const centerY = rect.top + rect.height / 2;
 			let rafId = null;
@@ -193,21 +186,21 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				const y = clientY - centerY;
 				let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
 				if (angle < 0) angle += FULL_CIRCLE;
-				const mode = get$1(editMode);
+				const mode = get(editMode);
 				const unit = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];
 				if (mode === "hour") {
 					let hour = unit;
 					if (hour === 0) hour = TWELVE_HOURS;
-					if (get$1(period) === "PM" && hour < TWELVE_HOURS) hour += TWELVE_HOURS;
-					else if (get$1(period) === "AM" && hour === TWELVE_HOURS) hour = 0;
-					set$1(selectedHour, hour);
-				} else if (mode === "minute") set$1(selectedMinute, unit);
-				else if (mode === "second") set$1(selectedSecond, unit);
-				else set$1(selectedMillisecond, unit);
+					if (get(period) === "PM" && hour < TWELVE_HOURS) hour += TWELVE_HOURS;
+					else if (get(period) === "AM" && hour === TWELVE_HOURS) hour = 0;
+					set(selectedHour, hour);
+				} else if (mode === "minute") set(selectedMinute, unit);
+				else if (mode === "second") set(selectedSecond, unit);
+				else set(selectedMillisecond, unit);
 				updateModelValue();
 			};
 			const handleMove = (moveEvent) => {
-				if (!get$1(isDragging)) return;
+				if (!get(isDragging)) return;
 				if (rafId !== null) return;
 				let clientX;
 				let clientY;
@@ -230,14 +223,14 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 					cancelAnimationFrame(rafId);
 					rafId = null;
 				}
-				set$1(isDragging, false);
+				set(isDragging, false);
 				document.removeEventListener("mousemove", handleMove);
 				document.removeEventListener("touchmove", handleMove);
 				document.removeEventListener("mouseup", handleEnd);
 				document.removeEventListener("touchend", handleEnd);
-				if (get$1(editMode) === "hour") set$1(editMode, "minute");
-				else if (get$1(showSecond) && get$1(editMode) === "minute") set$1(editMode, "second");
-				else if (get$1(showMillisecond) && get$1(editMode) === "second") set$1(editMode, "millisecond");
+				if (get(editMode) === "hour") set(editMode, "minute");
+				else if (get(showSecond) && get(editMode) === "minute") set(editMode, "second");
+				else if (get(showMillisecond) && get(editMode) === "second") set(editMode, "millisecond");
 			};
 			document.addEventListener("mousemove", handleMove);
 			document.addEventListener("touchmove", handleMove);
@@ -258,89 +251,98 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			applyMove(clientX, clientY);
 		}
 		function selectByClick(num) {
-			const mode = get$1(editMode);
+			const mode = get(editMode);
 			if (mode === "hour") {
 				let newHour = num;
-				if (get$1(period) === "PM" && newHour < TWELVE_HOURS) newHour += TWELVE_HOURS;
-				set$1(selectedHour, newHour);
-				set$1(editMode, "minute");
+				if (get(period) === "PM" && newHour < TWELVE_HOURS) newHour += TWELVE_HOURS;
+				set(selectedHour, newHour);
+				set(editMode, "minute");
 			} else if (mode === "minute") {
-				set$1(selectedMinute, num);
-				if (get$1(showSecond)) set$1(editMode, "second");
+				set(selectedMinute, num);
+				if (get(showSecond)) set(editMode, "second");
 			} else if (mode === "second") {
-				set$1(selectedSecond, num);
-				if (get$1(showMillisecond)) set$1(editMode, "millisecond");
-			} else if (mode === "millisecond") set$1(selectedMillisecond, num);
+				set(selectedSecond, num);
+				if (get(showMillisecond)) set(editMode, "millisecond");
+			} else if (mode === "millisecond") set(selectedMillisecond, num);
 			updateModelValue();
 		}
 		function updateModelValue() {
 			if (!(isDefined(selectedHour) && isDefined(selectedMinute))) return;
 			nextTick(() => {
-				const date = isDefined(modelValue) ? new Date(get$1(modelValue)) : /* @__PURE__ */ new Date();
-				date.setHours(get$1(selectedHour));
-				date.setMinutes(get$1(selectedMinute));
-				date.setSeconds(get$1(selectedSecond) ?? 0);
-				date.setMilliseconds(get$1(selectedMillisecond) ?? 0);
-				set$1(modelValue, date);
+				const date = isDefined(modelValue) ? new Date(get(modelValue)) : /* @__PURE__ */ new Date();
+				date.setHours(get(selectedHour));
+				date.setMinutes(get(selectedMinute));
+				date.setSeconds(get(selectedSecond) ?? 0);
+				date.setMilliseconds(get(selectedMillisecond) ?? 0);
+				set(modelValue, date);
 			});
 		}
 		watch(modelValue, () => {
-			set$1(selectedHour, getModelHours());
-			set$1(selectedMinute, getModelMinutes());
-			set$1(selectedSecond, getModelSeconds());
-			set$1(selectedMillisecond, getModelMilliseconds());
+			set(selectedHour, getModelHours());
+			set(selectedMinute, getModelMinutes());
+			set(selectedSecond, getModelSeconds());
+			set(selectedMillisecond, getModelMilliseconds());
 		});
 		onMounted(() => {
-			set$1(selectedHour, getModelHours());
-			set$1(selectedMinute, getModelMinutes());
-			set$1(selectedSecond, getModelSeconds());
-			set$1(selectedMillisecond, getModelMilliseconds());
+			set(selectedHour, getModelHours());
+			set(selectedMinute, getModelMinutes());
+			set(selectedSecond, getModelSeconds());
+			set(selectedMillisecond, getModelMilliseconds());
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				role: "group",
 				"aria-label": "Time picker",
 				class: normalizeClass(unref(ui).root({ bordered: !__props.borderless }))
-			}, [createElementVNode("div", { class: normalizeClass(unref(ui).digitalDisplay()) }, [createElementVNode("div", _hoisted_1, [
-				createElementVNode("div", {
-					role: "button",
+			}, [createElementVNode("div", { class: normalizeClass(unref(ui).digitalDisplay()) }, [createElementVNode("div", { class: normalizeClass(unref(ui).time()) }, [
+				createElementVNode("button", {
+					type: "button",
 					"aria-label": "Select hours",
+					"aria-pressed": editMode.value === "hour",
 					class: normalizeClass(unref(ui).digit({ active: editMode.value === "hour" })),
 					onClick: _cache[0] || (_cache[0] = ($event) => editMode.value = "hour")
-				}, toDisplayString(formatValue(displayHour.value)), 3),
-				_cache[7] || (_cache[7] = createElementVNode("div", { class: "text-2xl font-semibold" }, " : ", -1)),
-				createElementVNode("div", {
-					role: "button",
+				}, toDisplayString(formatValue(displayHour.value)), 11, _hoisted_1),
+				createElementVNode("div", { class: normalizeClass(unref(ui).separator()) }, " : ", 2),
+				createElementVNode("button", {
+					type: "button",
 					"aria-label": "Select minutes",
+					"aria-pressed": editMode.value === "minute",
 					class: normalizeClass(unref(ui).digit({ active: editMode.value === "minute" })),
 					onClick: _cache[1] || (_cache[1] = ($event) => editMode.value = "minute")
-				}, toDisplayString(formatValue(selectedMinute.value)), 3),
-				showSecond.value ? (openBlock(), createElementBlock("div", _hoisted_2, " : ")) : createCommentVNode("", true),
+				}, toDisplayString(formatValue(selectedMinute.value)), 11, _hoisted_2),
 				showSecond.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(ui).separator())
+				}, " : ", 2)) : createCommentVNode("", true),
+				showSecond.value ? (openBlock(), createElementBlock("button", {
 					key: 1,
-					role: "button",
+					type: "button",
 					"aria-label": "Select seconds",
+					"aria-pressed": editMode.value === "second",
 					class: normalizeClass(unref(ui).digit({ active: editMode.value === "second" })),
 					onClick: _cache[2] || (_cache[2] = ($event) => editMode.value = "second")
-				}, toDisplayString(formatValue(selectedSecond.value)), 3)) : createCommentVNode("", true),
-				showMillisecond.value ? (openBlock(), createElementBlock("div", _hoisted_3, " . ")) : createCommentVNode("", true),
+				}, toDisplayString(formatValue(selectedSecond.value)), 11, _hoisted_3)) : createCommentVNode("", true),
 				showMillisecond.value ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(ui).separator({ class: "text-lg" }))
+				}, " . ", 2)) : createCommentVNode("", true),
+				showMillisecond.value ? (openBlock(), createElementBlock("button", {
 					key: 3,
-					role: "button",
+					type: "button",
 					"aria-label": "Select milliseconds",
+					"aria-pressed": editMode.value === "millisecond",
 					class: normalizeClass(unref(ui).digit({
 						active: editMode.value === "millisecond",
-						class: "!text-lg"
+						class: "text-lg"
 					})),
 					onClick: _cache[3] || (_cache[3] = ($event) => editMode.value = "millisecond")
-				}, toDisplayString(formatValue(selectedMillisecond.value, 3)), 3)) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_4, [createElementVNode("div", {
-					role: "button",
-					"aria-label": "Toggle AM/PM",
-					class: "rui-time-picker-period cursor-pointer",
-					onClick: _cache[4] || (_cache[4] = ($event) => toggleAmPm())
-				}, toDisplayString(period.value), 1)])
-			])], 2), createElementVNode("div", {
+				}, toDisplayString(formatValue(selectedMillisecond.value, 3)), 11, _hoisted_4)) : createCommentVNode("", true)
+			], 2), createElementVNode("button", {
+				type: "button",
+				"aria-label": "Toggle AM/PM",
+				class: normalizeClass(unref(ui).period()),
+				onClick: _cache[4] || (_cache[4] = ($event) => toggleAmPm())
+			}, toDisplayString(period.value), 3)], 2), createElementVNode("div", {
 				ref_key: "clockFace",
 				ref: clockFace,
 				role: "listbox",