@rotki/ui-library 2.23.5 → 2.25.0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n// Default 0 (first tab) matches the existing internal fallback on line 163.\n// Providing a default narrows the `update:modelValue` emit payload from\n// `value?: number | string` to `value: number | string`, so consumers can\n// type their handler signatures without undefined unions.\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// 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":""}
+{"version":3,"file":"RuiTabs.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 import type { ContextColorsType } from '../../../consts/colors.js';
-import { type TabAlignment, type TabIndicatorPosition } from '../../../components/tabs/tab-props.js';
+import { type TabAlignment, type TabIndicatorPosition } from '../tab-props.js';
 export interface Props {
     color?: ContextColorsType;
     vertical?: boolean;
@@ -10,6 +10,11 @@ export interface Props {
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
+    /**
+     * The selected tab, defaulting to the first one. The default also narrows the
+     * `update:modelValue` payload to `number | string`, so a consumer's handler
+     * needs no undefined in its signature.
+     */
     modelValue?: number | string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

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

@@ -34,6 +34,11 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	}),
 	emits: ["update:modelValue"],
 	setup(__props) {
+		/**
+		* The selected tab, defaulting to the first one. The default also narrows the
+		* `update:modelValue` payload to `number | string`, so a consumer's handler
+		* needs no undefined in its signature.
+		*/
 		const modelValue = useModel(__props, "modelValue");
 		const internalModelValue = ref();
 		const bar = useTemplateRef("bar");
@@ -105,6 +110,13 @@ var RuiTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				};
 			});
 		});
+		/**
+		* Unwraps the fragments a `v-for` in the slot produces, so only tabs come
+		* back.
+		*
+		* @param children - the slot's vnodes
+		* @returns the tabs among them
+		*/
 		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));

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n// Default 0 (first tab) matches the existing internal fallback on line 163.\n// Providing a default narrows the `update:modelValue` emit payload from\n// `value?: number | string` to `value: number | string`, so consumers can\n// type their handler signatures without undefined unions.\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n// 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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"}
+{"version":3,"file":"RuiTabs.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/tabs/tabs/RuiTabs.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode, type VNode } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { type TabAlignment, type TabIndicatorPosition, TabLayout } from '@/components/tabs/tab-props';\nimport { useTabRouting } from '@/components/tabs/tabs/use-tab-routing';\nimport { useTabScroll } from '@/components/tabs/tabs/use-tab-scroll';\nimport { tv } from '@/utils/tv';\n\ntype ChildNode = VNode & { props: Record<string, any> };\n\ninterface ResolvedTabProps {\n  value?: string | number;\n  to?: unknown;\n  link?: boolean;\n  exact?: boolean;\n  exactPath?: boolean;\n}\n\nexport interface Props {\n  color?: ContextColorsType;\n  vertical?: boolean;\n  disabled?: boolean;\n  grow?: boolean;\n  align?: TabAlignment;\n  indicatorPosition?: TabIndicatorPosition;\n}\n\ndefineOptions({\n  name: 'RuiTabs',\n});\n\n/**\n * The selected tab, defaulting to the first one. The default also narrows the\n * `update:modelValue` payload to `number | string`, so a consumer's handler\n * needs no undefined in its signature.\n */\nconst modelValue = defineModel<number | string>({ default: 0 });\n\nconst {\n  color,\n  vertical = false,\n  disabled = false,\n  grow = false,\n  align = 'center',\n  indicatorPosition = 'end',\n} = defineProps<Props>();\n\nconst internalModelValue = ref<string | number>();\nconst bar = useTemplateRef<HTMLDivElement>('bar');\nconst wrapper = useTemplateRef<HTMLDivElement>('wrapper');\n\nconst tabs = tv({\n  slots: {\n    root: '',\n    arrow: '',\n    bar: 'no-scrollbar max-h-full overflow-auto',\n    wrapper: 'h-full inline-flex max-w-none',\n  },\n  variants: {\n    layout: {\n      [TabLayout.horizontal]: {\n        root: 'flex h-fit',\n        arrow: 'h-[3rem] w-10',\n        bar: 'h-[3rem]',\n        wrapper: '',\n      },\n      [TabLayout.vertical]: {\n        root: 'inline-flex flex-col',\n        arrow: 'min-h-[3rem] w-full',\n        bar: '',\n        wrapper: 'flex-col h-auto',\n      },\n    },\n    wide: {\n      true: {\n        bar: 'w-full',\n        wrapper: 'min-w-full',\n      },\n    },\n  },\n  defaultVariants: { layout: TabLayout.horizontal },\n});\n\nconst slots = useSlots();\n\nconst {\n  showArrows,\n  prevArrowDisabled,\n  nextArrowDisabled,\n  onPrevSliderClick,\n  onNextSliderClick,\n  keepActiveTabVisible,\n} = useTabScroll({ bar, wrapper, vertical: () => vertical });\n\nconst { resolveRoute, isPathMatch } = useTabRouting({\n  onRouteChange: () => applyNewValue(true),\n});\n\nconst layout = computed<TabLayout>(() => vertical ? TabLayout.vertical : TabLayout.horizontal);\nconst ui = computed<ReturnType<typeof tabs>>(() => tabs({ layout: get(layout), wide: vertical || grow }));\n\nconst children = computed<ChildNode[]>(() => {\n  const slotContent = slots.default?.() ?? [];\n\n  const tabs = getChildrenTabs(slotContent);\n\n  const currentModelValue = get(internalModelValue);\n  const inheritedProps = {\n    color,\n    grow,\n    disabled,\n    vertical,\n    align,\n    indicatorPosition,\n  };\n\n  return tabs.map((tab, index) => {\n    let tabValue = tab.props?.value ?? index;\n    if (tab.props?.link !== false && tab.props?.to)\n      tabValue = tab.props.to;\n\n    const active = currentModelValue === tabValue;\n    return {\n      ...tab,\n      props: {\n        value: tabValue,\n        active,\n        ...inheritedProps,\n        ...tab.props,\n      },\n    };\n  });\n});\n\n/**\n * Unwraps the fragments a `v-for` in the slot produces, so only tabs come\n * back.\n *\n * @param children - the slot's vnodes\n * @returns the tabs among them\n */\nfunction getChildrenTabs(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildrenTabs(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nfunction updateModelValue(newModelValue: string | number): void {\n  set(modelValue, newModelValue);\n  set(internalModelValue, newModelValue);\n}\n\nfunction getTabRouteProps(props: Record<string, unknown>): ResolvedTabProps {\n  return {\n    value: typeof props.value === 'string' || typeof props.value === 'number' ? props.value : undefined,\n    to: props.to ?? undefined,\n    link: typeof props.link === 'boolean' ? props.link : undefined,\n    exact: typeof props.exact === 'boolean' ? props.exact : undefined,\n    exactPath: typeof props.exactPath === 'boolean' ? props.exactPath : undefined,\n  };\n}\n\nfunction resolveActiveValue(onlyLink: boolean): string | number | undefined {\n  const enabledChildren = get(children).filter(child => !child.props?.disabled);\n  if (enabledChildren.length === 0)\n    return undefined;\n\n  let result: string | number = get(modelValue) || 0;\n  enabledChildren.forEach((child, index) => {\n    const tabProps = getTabRouteProps(child.props);\n    if (!onlyLink && index === 0 && tabProps.value)\n      result = tabProps.value;\n\n    const fullPath = resolveRoute(tabProps.to);\n\n    if (tabProps.link !== false && fullPath && isPathMatch(fullPath, tabProps))\n      result = fullPath;\n  });\n  return result;\n}\n\nfunction applyNewValue(onlyLink = false): void {\n  const value = resolveActiveValue(onlyLink);\n  if (value !== undefined)\n    updateModelValue(value);\n\n  keepActiveTabVisible();\n}\n\nwatchImmediate(() => get(modelValue), (modelValue) => {\n  set(internalModelValue, modelValue);\n});\n\nwatch(internalModelValue, () => {\n  keepActiveTabVisible();\n});\n\nonMounted(() => {\n  if (get(modelValue) !== undefined)\n    return;\n\n  applyNewValue();\n});\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    :data-vertical=\"vertical || undefined\"\n  >\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"prevArrowDisabled\"\n        @click=\"onPrevSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-up' : 'lu-chevron-left'\" />\n      </RuiButton>\n    </div>\n    <div\n      ref=\"bar\"\n      :class=\"ui.bar()\"\n    >\n      <div\n        ref=\"wrapper\"\n        role=\"tablist\"\n        data-id=\"tabs-wrapper\"\n        :class=\"ui.wrapper()\"\n      >\n        <Component\n          :is=\"child\"\n          v-for=\"(child, i) in children\"\n          :key=\"i\"\n          @click=\"updateModelValue($event)\"\n        />\n      </div>\n    </div>\n    <div\n      v-if=\"showArrows\"\n      :class=\"ui.arrow()\"\n    >\n      <RuiButton\n        class=\"w-full h-full !rounded-none\"\n        variant=\"text\"\n        :color=\"color\"\n        :disabled=\"nextArrowDisabled\"\n        @click=\"onNextSliderClick()\"\n      >\n        <RuiIcon :name=\"vertical ? 'lu-chevron-down' : 'lu-chevron-right'\" />\n      </RuiButton>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import type { RouteMatchOptions } from '../../../components/tabs/tab-props.js';
+import type { RouteMatchOptions } from '../tab-props.js';
 import { type RouteLocationRaw } from 'vue-router';
 interface UseTabRoutingOptions {
     /** Callback invoked when the route changes, to re-sync the active tab */

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.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":"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"}
+{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.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":"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"}

package/dist/components/time-picker/time-picker-styles.d.ts

@@ -48,7 +48,7 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
     clockHand: string;
     clockHandCircle: string;
     clockNumber: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     bordered: {
         true: {
             root: string;
@@ -73,4 +73,4 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
     clockHand: string;
     clockHandCircle: string;
     clockNumber: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/composables/colors/index.d.ts

@@ -1,3 +1,3 @@
-export { afterBorderColorMap, beforeBgColorMap, bgColorMap, borderColorMap, darkLightTextColorMap, textColorMap, } from '../../composables/colors/common';
-export { getTextInputColorClasses, getTextInputValidationClasses } from '../../composables/colors/text-input';
-export type { TextInputColorClasses, TextInputValidationClasses } from '../../composables/colors/text-input';
+export { afterBorderColorMap, beforeBgColorMap, bgColorMap, borderColorMap, darkLightTextColorMap, textColorMap, } from './common';
+export { getTextInputColorClasses, getTextInputValidationClasses } from './text-input';
+export type { TextInputColorClasses, TextInputValidationClasses } from './text-input';

package/dist/composables/dropdown-menu.d.ts

@@ -47,7 +47,7 @@ export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoSelect
     getIdentifier: (item: TItem) => any;
     getText: (item: TItem) => string | undefined;
     groupedOptions: globalThis.ComputedRef<DropdownOptionGroup<TItem>[]>;
-    highlightedIndex: Ref<number, number>;
+    modelHighlightedIndex: Ref<number, number>;
     isActiveItem: (item: TItem) => boolean;
     isGrouped: globalThis.ComputedRef<boolean>;
     isItemDisabled: (item: TItem) => boolean;
@@ -61,7 +61,7 @@ export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoSelect
         item: TItem;
     }>;
     toggle: (state?: boolean) => void;
-    userNavigated: globalThis.ShallowRef<boolean>;
+    modelUserNavigated: globalThis.ShallowRef<boolean>;
     valueKey: globalThis.ComputedRef<TItem | TItem[] | TItem[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>][] | NonNullable<TItem>[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>] | undefined>;
     wrapperProps: globalThis.ComputedRef<{
         style: {

package/dist/composables/dropdown-menu.js

@@ -4,8 +4,10 @@ import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/composables/dropdown-menu.ts
 function useDropdownOptionProperty({ keyAttr, textAttr }) {
 	function getText(item) {
-		if (textAttr) if (typeof textAttr === "function") return textAttr(item);
-		else return item[textAttr]?.toString();
+		if (textAttr) {
+			if (typeof textAttr === "function") return textAttr(item);
+			else return item[textAttr]?.toString();
+		}
 		return item?.toString();
 	}
 	function getIdentifier(item) {
@@ -84,8 +86,8 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		if (!keyAttr || !selected) return selected;
 		return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
 	});
-	const highlightedIndex = ref(get$1(autoSelectFirst) ? 0 : -1);
-	const userNavigated = shallowRef(false);
+	const modelHighlightedIndex = ref(get$1(autoSelectFirst) ? 0 : -1);
+	const modelUserNavigated = shallowRef(false);
 	const optionWidthBounds = computed(() => {
 		let min = 0;
 		let max = 0;
@@ -128,7 +130,7 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		get$1(_menuRef)?.querySelector("[data-highlighted=\"true\"]")?.scrollIntoView({ block: "nearest" });
 	}
 	async function adjustScrollByHighlightedIndex() {
-		const index = get$1(highlightedIndex);
+		const index = get$1(modelHighlightedIndex);
 		if (index === -1) return;
 		await nextTick();
 		if (get$1(_menuRef)?.querySelector("[data-highlighted=\"true\"]")) {
@@ -144,55 +146,56 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		const val = get$1(value);
 		if (Array.isArray(val) && val.length > 0 || val !== null && val !== void 0) {
 			const index = get$1(options).findIndex(isActiveItem);
-			if (index > -1) set$1(highlightedIndex, index);
+			if (index > -1) set$1(modelHighlightedIndex, index);
 		}
 		await adjustScrollByHighlightedIndex();
 	}
 	watch([isOpen, () => toValue(disabled)], async ([open, _]) => {
 		await updateOpen(open);
 	});
-	watch(highlightedIndex, async () => {
+	watch(modelHighlightedIndex, async () => {
 		await adjustScrollByHighlightedIndex();
 	});
 	watch(options, async () => {
-		set$1(userNavigated, false);
-		if (get$1(highlightedIndex) !== -1) if (get$1(autoSelectFirst)) {
-			set$1(highlightedIndex, 0);
-			await adjustScrollByHighlightedIndex();
-		} else {
-			set$1(highlightedIndex, -1);
-			scrollTo(0);
-		}
-		else scrollTo(0);
+		set$1(modelUserNavigated, false);
+		if (get$1(modelHighlightedIndex) !== -1) {
+			if (get$1(autoSelectFirst)) {
+				set$1(modelHighlightedIndex, 0);
+				await adjustScrollByHighlightedIndex();
+			} else {
+				set$1(modelHighlightedIndex, -1);
+				scrollTo(0);
+			}
+		} else scrollTo(0);
 	});
 	watch(isOpen, (open) => {
-		if (!open) set$1(userNavigated, false);
+		if (!open) set$1(modelUserNavigated, false);
 	});
 	const moveHighlight = (up) => {
 		if (!get$1(isOpen)) {
 			toggle(true);
 			return;
 		}
-		set$1(userNavigated, true);
+		set$1(modelUserNavigated, true);
 		const items = get$1(options);
 		const total = items.length;
 		if (total === 0) return;
 		const move = up ? -1 : 1;
-		let position = get$1(highlightedIndex);
+		let position = get$1(modelHighlightedIndex);
 		for (let step = 0; step < total; step++) {
 			position += move;
 			if (position >= total) position = 0;
 			else if (position < 0) position = total - 1;
 			const candidate = items[position];
 			if (candidate !== void 0 && !isItemDisabled(candidate)) {
-				set$1(highlightedIndex, position);
+				set$1(modelHighlightedIndex, position);
 				return;
 			}
 		}
 	};
 	const applyHighlighted = () => {
 		if (!setValue || !get$1(isOpen)) return;
-		const highlightedIndexVal = get$1(highlightedIndex);
+		const highlightedIndexVal = get$1(modelHighlightedIndex);
 		if (highlightedIndexVal === -1) return;
 		const entry = get$1(options)[highlightedIndexVal];
 		if (entry !== void 0 && !isItemDisabled(entry)) setValue(entry);
@@ -203,7 +206,7 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		getIdentifier,
 		getText,
 		groupedOptions,
-		highlightedIndex,
+		modelHighlightedIndex,
 		isActiveItem,
 		isGrouped,
 		isItemDisabled,
@@ -214,7 +217,7 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 		optionsWithSelectedHidden: options,
 		renderedData,
 		toggle,
-		userNavigated,
+		modelUserNavigated,
 		valueKey,
 		wrapperProps
 	};

package/dist/composables/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\nexport type GroupBy<TItem> = keyof TItem | ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = keyof TItem | ((item: TItem) => boolean);\n\nexport interface DropdownOptionGroup<TItem> {\n  group: string;\n  items: TItem[];\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: MaybeRefOrGetter<TItem[]>;\n  dense?: MaybeRefOrGetter<boolean>;\n  disabled?: MaybeRefOrGetter<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n  isOpen?: Ref<boolean>;\n  getText?: (item: TItem) => string | undefined;\n  getIdentifier?: (item: TItem) => any;\n  groupBy?: MaybeRefOrGetter<GroupBy<TItem> | undefined>;\n  itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> | undefined>;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n      else return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(\n    item: TItem,\n  ): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nfunction toSelectedArray<TItem>(val: TItem | TItem[] | undefined): TItem[] {\n  if (Array.isArray(val))\n    return val;\n  if (val !== null && val !== undefined)\n    return [val];\n  return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoSelectFirst,\n  dense,\n  disabled = false,\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = 48,\n  keyAttr,\n  menuRef: _menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n  groupBy,\n  itemDisabled,\n}: DropdownOptions<TValue, TItem>) {\n  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n  const getText = externalGetText ?? defaultGetText;\n\n  const activeIdentifiers = computed<Set<any>>(() => {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n    const identifiers = new Set<any>();\n    for (const item of selected) {\n      identifiers.add(getIdentifier(item));\n    }\n    return identifiers;\n  });\n\n  function isActiveItem(item: TItem): boolean {\n    return get(activeIdentifiers).has(getIdentifier(item));\n  }\n\n  const options = computed<TItem[]>(() => {\n    const options = toValue(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  function getGroupKey(item: TItem): string {\n    const group = toValue(groupBy);\n    if (!group)\n      return '';\n\n    if (typeof group === 'function')\n      return group(item);\n\n    return String(item[group] ?? '');\n  }\n\n  function isItemDisabled(item: TItem): boolean {\n    const itemDisabledValue = toValue(itemDisabled);\n    if (!itemDisabledValue)\n      return false;\n\n    if (typeof itemDisabledValue === 'function')\n      return itemDisabledValue(item);\n\n    return Boolean(item[itemDisabledValue]);\n  }\n\n  const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n  const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n    if (!get(isGrouped))\n      return [];\n\n    const buckets = new Map<string, TItem[]>();\n    for (const item of get(options)) {\n      const key = getGroupKey(item);\n      const list = buckets.get(key);\n      if (list)\n        list.push(item);\n      else\n        buckets.set(key, [item]);\n    }\n\n    return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n    itemHeight,\n    overscan,\n  });\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const highlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n  const userNavigated = shallowRef<boolean>(false);\n\n  const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n    let min = 0;\n    let max = 0;\n    for (const option of get(options)) {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (min === 0 && max === 0) {\n        min = length;\n        max = length;\n      }\n      else if (length < min) {\n        min = length;\n      }\n      else if (length > max) {\n        max = length;\n      }\n    }\n    return { min, max };\n  });\n\n  const menuWidth = computed<string>(() => {\n    const { min, max } = get(optionWidthBounds);\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = toValue(dense) ? 12 : 13;\n    const difference = max - min;\n\n    function computeValue(width: number): string {\n      const additionalWidths =\n        (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(max);\n\n    return computeValue(min + difference / 2);\n  });\n\n  function toggle(state: boolean = false): void {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n\n    if (selected.length === 0)\n      return -1;\n\n    const itemId = getIdentifier(item);\n    return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n  }\n\n  function scrollHighlightedIntoView(): void {\n    get(_menuRef)\n      ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n      ?.scrollIntoView({ block: 'nearest' });\n  }\n\n  async function adjustScrollByHighlightedIndex(): Promise<void> {\n    const index = get(highlightedIndex);\n    if (index === -1)\n      return;\n\n    await nextTick();\n    if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n      scrollHighlightedIntoView();\n      return;\n    }\n\n    // Highlighted item is outside the virtual list's rendered window —\n    // kick the virtual scroll to render it, then nudge it fully into view.\n    scrollTo(index);\n    await nextTick();\n    scrollHighlightedIntoView();\n  }\n\n  async function updateOpen(open: boolean): Promise<void> {\n    if (!open)\n      return;\n\n    const val = get(value);\n\n    // Set highlighted index to active item\n    if ((Array.isArray(val) && val.length > 0) || (val !== null && val !== undefined)) {\n      const index = get(options).findIndex(isActiveItem);\n      if (index > -1)\n        set(highlightedIndex, index);\n    }\n\n    await adjustScrollByHighlightedIndex();\n  }\n\n  watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(highlightedIndex, async () => {\n    await adjustScrollByHighlightedIndex();\n  });\n\n  watch(options, async () => {\n    set(userNavigated, false);\n    if (get(highlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(highlightedIndex, 0);\n        await adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(highlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  watch(isOpen, (open) => {\n    if (!open)\n      set(userNavigated, false);\n  });\n\n  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    set(userNavigated, true);\n\n    const items = get(options);\n    const total = items.length;\n    if (total === 0)\n      return;\n\n    const move = up ? -1 : 1;\n    let position = get(highlightedIndex);\n\n    for (let step = 0; step < total; step++) {\n      position += move;\n      if (position >= total)\n        position = 0;\n      else if (position < 0)\n        position = total - 1;\n\n      const candidate = items[position];\n      if (candidate !== undefined && !isItemDisabled(candidate)) {\n        set(highlightedIndex, position);\n        return;\n      }\n    }\n  };\n\n  const applyHighlighted = (): void => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(highlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options)[highlightedIndexVal];\n    if (entry !== undefined && !isItemDisabled(entry))\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    groupedOptions,\n    highlightedIndex,\n    isActiveItem,\n    isGrouped,\n    isItemDisabled,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    userNavigated,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\nexport type GroupBy<TItem> = keyof TItem | ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = keyof TItem | ((item: TItem) => boolean);\n\nexport interface DropdownOptionGroup<TItem> {\n  group: string;\n  items: TItem[];\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: MaybeRefOrGetter<TItem[]>;\n  dense?: MaybeRefOrGetter<boolean>;\n  disabled?: MaybeRefOrGetter<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n  isOpen?: Ref<boolean>;\n  getText?: (item: TItem) => string | undefined;\n  getIdentifier?: (item: TItem) => any;\n  groupBy?: MaybeRefOrGetter<GroupBy<TItem> | undefined>;\n  itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> | undefined>;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n      else return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(\n    item: TItem,\n  ): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nfunction toSelectedArray<TItem>(val: TItem | TItem[] | undefined): TItem[] {\n  if (Array.isArray(val))\n    return val;\n  if (val !== null && val !== undefined)\n    return [val];\n  return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoSelectFirst,\n  dense,\n  disabled = false,\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = 48,\n  keyAttr,\n  menuRef: _menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n  groupBy,\n  itemDisabled,\n}: DropdownOptions<TValue, TItem>) {\n  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n  const getText = externalGetText ?? defaultGetText;\n\n  const activeIdentifiers = computed<Set<any>>(() => {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n    const identifiers = new Set<any>();\n    for (const item of selected) {\n      identifiers.add(getIdentifier(item));\n    }\n    return identifiers;\n  });\n\n  function isActiveItem(item: TItem): boolean {\n    return get(activeIdentifiers).has(getIdentifier(item));\n  }\n\n  const options = computed<TItem[]>(() => {\n    const options = toValue(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  function getGroupKey(item: TItem): string {\n    const group = toValue(groupBy);\n    if (!group)\n      return '';\n\n    if (typeof group === 'function')\n      return group(item);\n\n    return String(item[group] ?? '');\n  }\n\n  function isItemDisabled(item: TItem): boolean {\n    const itemDisabledValue = toValue(itemDisabled);\n    if (!itemDisabledValue)\n      return false;\n\n    if (typeof itemDisabledValue === 'function')\n      return itemDisabledValue(item);\n\n    return Boolean(item[itemDisabledValue]);\n  }\n\n  const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n  const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n    if (!get(isGrouped))\n      return [];\n\n    const buckets = new Map<string, TItem[]>();\n    for (const item of get(options)) {\n      const key = getGroupKey(item);\n      const list = buckets.get(key);\n      if (list)\n        list.push(item);\n      else\n        buckets.set(key, [item]);\n    }\n\n    return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n    itemHeight,\n    overscan,\n  });\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n  const modelUserNavigated = shallowRef<boolean>(false);\n\n  const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n    let min = 0;\n    let max = 0;\n    for (const option of get(options)) {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (min === 0 && max === 0) {\n        min = length;\n        max = length;\n      }\n      else if (length < min) {\n        min = length;\n      }\n      else if (length > max) {\n        max = length;\n      }\n    }\n    return { min, max };\n  });\n\n  const menuWidth = computed<string>(() => {\n    const { min, max } = get(optionWidthBounds);\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = toValue(dense) ? 12 : 13;\n    const difference = max - min;\n\n    function computeValue(width: number): string {\n      const additionalWidths =\n        (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(max);\n\n    return computeValue(min + difference / 2);\n  });\n\n  function toggle(state: boolean = false): void {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n\n    if (selected.length === 0)\n      return -1;\n\n    const itemId = getIdentifier(item);\n    return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n  }\n\n  function scrollHighlightedIntoView(): void {\n    get(_menuRef)\n      ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n      ?.scrollIntoView({ block: 'nearest' });\n  }\n\n  async function adjustScrollByHighlightedIndex(): Promise<void> {\n    const index = get(modelHighlightedIndex);\n    if (index === -1)\n      return;\n\n    await nextTick();\n    if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n      scrollHighlightedIntoView();\n      return;\n    }\n\n    // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n    scrollTo(index);\n    await nextTick();\n    scrollHighlightedIntoView();\n  }\n\n  async function updateOpen(open: boolean): Promise<void> {\n    if (!open)\n      return;\n\n    const val = get(value);\n\n    // Set highlighted index to active item\n    if ((Array.isArray(val) && val.length > 0) || (val !== null && val !== undefined)) {\n      const index = get(options).findIndex(isActiveItem);\n      if (index > -1)\n        set(modelHighlightedIndex, index);\n    }\n\n    await adjustScrollByHighlightedIndex();\n  }\n\n  watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(modelHighlightedIndex, async () => {\n    await adjustScrollByHighlightedIndex();\n  });\n\n  watch(options, async () => {\n    set(modelUserNavigated, false);\n    if (get(modelHighlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(modelHighlightedIndex, 0);\n        await adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(modelHighlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  watch(isOpen, (open) => {\n    if (!open)\n      set(modelUserNavigated, false);\n  });\n\n  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    set(modelUserNavigated, true);\n\n    const items = get(options);\n    const total = items.length;\n    if (total === 0)\n      return;\n\n    const move = up ? -1 : 1;\n    let position = get(modelHighlightedIndex);\n\n    for (let step = 0; step < total; step++) {\n      position += move;\n      if (position >= total)\n        position = 0;\n      else if (position < 0)\n        position = total - 1;\n\n      const candidate = items[position];\n      if (candidate !== undefined && !isItemDisabled(candidate)) {\n        set(modelHighlightedIndex, position);\n        return;\n      }\n    }\n  };\n\n  const applyHighlighted = (): void => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(modelHighlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options)[highlightedIndexVal];\n    if (entry !== undefined && !isItemDisabled(entry))\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    groupedOptions,\n    modelHighlightedIndex,\n    isActiveItem,\n    isGrouped,\n    isItemDisabled,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    modelUserNavigated,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/floating.d.ts

@@ -23,20 +23,20 @@ export declare const Strategy: {
 };
 export type Strategy = (typeof Strategy)[keyof typeof Strategy];
 export interface FloatingOptions {
-    /** Preferred placement relative to the reference element. @default Placement.bottom */
+    /** Preferred placement relative to the reference element; defaults to `Placement.bottom`. */
     placement?: Placement;
-    /** CSS positioning strategy. @default Strategy.absolute */
+    /** CSS positioning strategy; defaults to `Strategy.absolute`. */
     strategy?: Strategy;
-    /** Main-axis and/or cross-axis offset from the reference element. @default 2 */
+    /** Main-axis and/or cross-axis offset from the reference element; defaults to 2. */
     offset?: number | {
         mainAxis?: number;
         crossAxis?: number;
     };
-    /** Whether to flip to the opposite side when overflowing. @default true */
+    /** Whether to flip to the opposite side when overflowing; defaults to true. */
     flip?: boolean;
-    /** Padding from viewport edges for shift middleware. @default 8 */
+    /** Padding from viewport edges for shift middleware; defaults to 8. */
     shiftPadding?: number;
-    /** Whether to auto-update position on scroll/resize. @default true */
+    /** Whether to auto-update position on scroll/resize; defaults to true. */
     autoUpdate?: boolean | {
         scroll?: boolean;
         resize?: boolean;
@@ -46,8 +46,7 @@ export interface FloatingOptions {
      * it never overflows the window. Exposes the measured space as the
      * `--rui-floating-max-height` custom property on the floating element; the
      * content is responsible for consuming it by capping its own max-height to
-     * that variable and scrolling internally.
-     * @default false
+     * that variable and scrolling internally. Defaults to false.
      */
     size?: boolean;
 }

package/dist/composables/floating.js

@@ -48,17 +48,21 @@ function buildSizeMiddleware(padding) {
 		}
 	});
 }
-function buildMiddleware(opts, arrowEl) {
-	const mw = [];
+/**
+* The offset middleware, from either the shorthand distance or the per-axis
+* form, falling back to the default distance on the main axis.
+*/
+function buildOffsetMiddleware(opts) {
 	const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;
-	if (typeof off === "number") mw.push(offset(off));
-	else {
-		const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === "number" ? DEFAULT_FLOATING_OPTIONS.offset : 0;
-		mw.push(offset({
-			mainAxis: off.mainAxis ?? defaultOffset,
-			crossAxis: off.crossAxis ?? 0
-		}));
-	}
+	if (typeof off === "number") return offset(off);
+	const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === "number" ? DEFAULT_FLOATING_OPTIONS.offset : 0;
+	return offset({
+		mainAxis: off.mainAxis ?? defaultOffset,
+		crossAxis: off.crossAxis ?? 0
+	});
+}
+function buildMiddleware(opts, arrowEl) {
+	const mw = [buildOffsetMiddleware(opts)];
 	if (opts.flip !== false) mw.push(flip());
 	mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding }));
 	if (arrowEl) mw.push(arrow({
@@ -148,13 +152,14 @@ function useFloating(options, disabled = false, openDelay = 0, closeDelay = 0, v
 		const { popoverEl, referenceEl } = elements;
 		const autoUpdateOpt = toValue(options).autoUpdate ?? DEFAULT_FLOATING_OPTIONS.autoUpdate;
 		if (autoUpdateOpt === false) return;
-		cleanupAutoUpdate = autoUpdate(referenceEl, popoverEl, () => {
-			updatePosition().catch(() => {});
-		}, typeof autoUpdateOpt === "object" ? {
+		const autoUpdateOptions = typeof autoUpdateOpt === "object" ? {
 			ancestorResize: autoUpdateOpt.resize ?? true,
 			ancestorScroll: autoUpdateOpt.scroll ?? true,
 			elementResize: true
-		} : void 0);
+		} : void 0;
+		cleanupAutoUpdate = autoUpdate(referenceEl, popoverEl, () => {
+			updatePosition().catch(() => {});
+		}, autoUpdateOptions);
 	}
 	function stopAutoUpdate() {
 		cleanupAutoUpdate?.();