@rotki/ui-library 2.12.2 → 2.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"RuiTimePicker.vue2.js","sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\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 props = withDefaults(defineProps<RuiTimePickerProps>(), {\n  accuracy: TimeAccuracy.MINUTE,\n  borderless: false,\n});\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>(() => props.accuracy === TimeAccuracy.SECOND || props.accuracy === TimeAccuracy.MILLISECOND);\nconst showMillisecond = computed<boolean>(() => props.accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM');\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() {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes() {\n  return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds() {\n  const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n  return acceptedAccuracy.includes(props.accuracy) && isDefined(modelValue)\n    ? new Date(get(modelValue)).getSeconds()\n    : undefined;\n}\n\nfunction getModelMilliseconds() {\n  return props.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\n    ? value.toString().padStart(padding, '0')\n    : '-'.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() {\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) {\n  event.preventDefault();\n  set(isDragging, true);\n\n  const handleMove = (moveEvent: MouseEvent | TouchEvent) => {\n    if (!get(isDragging) || !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\n    let clientX, clientY;\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    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 = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n    if (mode === 'hour') {\n      let hour;\n\n      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 handleEnd = (): void => {\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  handleMove(event);\n}\n\nfunction selectByClick(num: number) {\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() {\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\nonMounted(() => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n});\n\nwatch(modelValue, () => {\n  set(selectedHour, getModelHours());\n  set(selectedMinute, getModelMinutes());\n  set(selectedSecond, getModelSeconds());\n  set(selectedMillisecond, getModelMilliseconds());\n}, { deep: true });\n</script>\n\n<template>\n  <div\n    role=\"group\"\n    aria-label=\"Time picker\"\n    :class=\"{\n      [$style['rui-timepicker']]: true,\n      [$style.bordered]: !borderless,\n    }\"\n  >\n    <div :class=\"$style['rui-digital-display']\">\n      <div class=\"flex justify-center items-center gap-1\">\n        <div\n          role=\"button\"\n          aria-label=\"Select hours\"\n          :class=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'hour',\n          }\"\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=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'minute',\n          }\"\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=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'second',\n          }\"\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=\"!text-lg\"\n          :class=\"{\n            [$style.active]: editMode === 'millisecond',\n            [$style['rui-digit']]: true,\n          }\"\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=\"$style['rui-clock-face']\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"$style['rui-center-dot']\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"$style['rui-clock-hand']\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"$style['rui-clock-hand-circle']\"\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          [$style['rui-clock-number']]: true,\n          [$style['is-selected']]: isSelectedNumber(num),\n          [`rui-${editMode}-${num.toString().padStart(2, '0')}`]: true,\n        }\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.rui-timepicker {\n  @apply bg-white overflow-hidden text-rui-text p-3;\n\n  &.bordered {\n    @apply rounded-md shadow-sm border border-rui-grey-200;\n  }\n}\n\n.rui-digital-display {\n  @apply mb-2 text-center;\n}\n\n.rui-digit {\n  @apply text-2xl font-semibold cursor-pointer;\n\n  &.active {\n    @apply text-rui-primary;\n  }\n}\n\n.rui-clock-face {\n  @apply relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200;\n}\n\n.rui-center-dot {\n  @apply absolute rounded-full bg-rui-primary w-3 h-3;\n}\n\n.rui-clock-hand {\n  @apply absolute w-[1.5px] bg-rui-primary rounded-full;\n}\n\n.rui-clock-hand-circle {\n  @apply absolute border-2 border-rui-primary;\n}\n\n.rui-clock-number {\n  @apply absolute text-center text-sm font-medium w-8 h-8 flex items-center justify-center hover:bg-rui-primary-lighter cursor-pointer rounded-full;\n\n  &.is-selected {\n    @apply bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold;\n  }\n}\n\n:global(.dark) {\n  .rui-timepicker {\n    @apply bg-rui-grey-900;\n\n    &.bordered {\n      @apply border-rui-grey-800;\n    }\n  }\n\n  .rui-clock-face {\n    @apply border-rui-grey-800;\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","$style","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"RuiTimePicker.vue2.js","sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\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 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=\"{\n      [$style['rui-timepicker']]: true,\n      [$style.bordered]: !borderless,\n    }\"\n  >\n    <div :class=\"$style['rui-digital-display']\">\n      <div class=\"flex justify-center items-center gap-1\">\n        <div\n          role=\"button\"\n          aria-label=\"Select hours\"\n          :class=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'hour',\n          }\"\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=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'minute',\n          }\"\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=\"{\n            [$style['rui-digit']]: true,\n            [$style.active]: editMode === 'second',\n          }\"\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=\"!text-lg\"\n          :class=\"{\n            [$style.active]: editMode === 'millisecond',\n            [$style['rui-digit']]: true,\n          }\"\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=\"$style['rui-clock-face']\"\n      @mousedown=\"startDrag($event)\"\n      @touchstart=\"startDrag($event)\"\n    >\n      <div\n        :class=\"$style['rui-center-dot']\"\n        :style=\"dotStyle\"\n      />\n\n      <div\n        :class=\"$style['rui-clock-hand']\"\n        :style=\"clockHandStyle\"\n      />\n\n      <div\n        v-if=\"displayClockHandCircle\"\n        :class=\"$style['rui-clock-hand-circle']\"\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          [$style['rui-clock-number']]: true,\n          [$style['is-selected']]: isSelectedNumber(num),\n          [`rui-${editMode}-${num.toString().padStart(2, '0')}`]: true,\n        }\"\n        :style=\"numberStyle(num)\"\n        @click=\"selectByClick(num)\"\n      >\n        {{ num }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.rui-timepicker {\n  @apply bg-white overflow-hidden text-rui-text p-3;\n\n  &.bordered {\n    @apply rounded-md shadow-sm border border-rui-grey-200;\n  }\n}\n\n.rui-digital-display {\n  @apply mb-2 text-center;\n}\n\n.rui-digit {\n  @apply text-2xl font-semibold cursor-pointer;\n\n  &.active {\n    @apply text-rui-primary;\n  }\n}\n\n.rui-clock-face {\n  @apply relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200;\n}\n\n.rui-center-dot {\n  @apply absolute rounded-full bg-rui-primary w-3 h-3;\n}\n\n.rui-clock-hand {\n  @apply absolute w-[1.5px] bg-rui-primary rounded-full;\n}\n\n.rui-clock-hand-circle {\n  @apply absolute border-2 border-rui-primary;\n}\n\n.rui-clock-number {\n  @apply absolute text-center text-sm font-medium w-8 h-8 flex items-center justify-center hover:bg-rui-primary-lighter cursor-pointer rounded-full;\n\n  &.is-selected {\n    @apply bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold;\n  }\n}\n\n:global(.dark) {\n  .rui-timepicker {\n    @apply bg-rui-grey-900;\n\n    &.bordered {\n      @apply border-rui-grey-800;\n    }\n  }\n\n  .rui-clock-face {\n    @apply border-rui-grey-800;\n  }\n}\n</style>\n"],"names":["_useModel","clientX","clientY","_createElementBlock","_normalizeClass","$style","_createElementVNode","_toDisplayString","_Fragment","_renderList","_normalizeStyle"],"mappings":"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"}

package/dist/composables/breakpoint.js

@@ -12,20 +12,15 @@ function useBreakpoint() {
   const breakpoints = useBreakpoints(breakpointList);
   const getKeys = Object.keys;
   const list = getKeys(breakpointList);
-  const rawSizes = list.map(
-    (breakpoint, index) => {
-      if (index < list.length - 1) {
-        const nextBreakpoint = list[index + 1];
-        assert(nextBreakpoint);
-        return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];
-      }
-      return [breakpoint, breakpoints[breakpoint]];
+  const rawSizes = list.map((breakpoint, index) => {
+    if (index < list.length - 1) {
+      const nextBreakpoint = list[index + 1];
+      assert(nextBreakpoint);
+      return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];
     }
-  );
-  const sizes = rawSizes.map(([breakpoint, value]) => [
-    camelCase(`is_${breakpoint}`),
-    value
-  ]);
+    return [breakpoint, breakpoints[breakpoint]];
+  });
+  const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);
   const sizesUp = list.map((breakpoint) => [
     camelCase(`is_${breakpoint}_and_up`),
     breakpoints.greaterOrEqual(breakpoint)

package/dist/composables/breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.js","sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n  const { width } = useWindowSize();\n\n  const breakpointList = {\n    xs: 0,\n    ...breakpointsTailwind,\n  } as const;\n\n  type Breakpoint = keyof typeof breakpointList;\n\n  const breakpoints = useBreakpoints(breakpointList);\n\n  const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n  const list = getKeys(breakpointList);\n\n  const rawSizes: [Breakpoint, Ref<boolean>][] = list.map(\n    (breakpoint, index) => {\n      if (index < list.length - 1) {\n        const nextBreakpoint = list[index + 1];\n        assert(nextBreakpoint);\n        return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n      }\n      return [breakpoint, breakpoints[breakpoint]];\n    },\n  );\n\n  const sizes = rawSizes.map(([breakpoint, value]) => [\n    camelCase(`is_${breakpoint}`),\n    value,\n  ]);\n\n  const sizesUp = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_up`),\n    breakpoints.greaterOrEqual(breakpoint),\n  ]);\n\n  const sizesDown = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_down`),\n    breakpoints.smaller(breakpoint),\n  ]);\n\n  const name = computed(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n  return {\n    ...Object.fromEntries(sizes),\n    ...Object.fromEntries(sizesUp),\n    ...Object.fromEntries(sizesDown),\n    name,\n    width,\n  };\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,gBAAgB;AAC9B,QAAM,EAAE,MAAA,IAAU,cAAA;AAElB,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA;AAKL,QAAM,cAAc,eAAe,cAAc;AAEjD,QAAM,UAAU,OAAO;AAEvB,QAAM,OAAO,QAAQ,cAAc;AAEnC,QAAM,WAAyC,KAAK;AAAA,IAClD,CAAC,YAAY,UAAU;AACrB,UAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B,cAAM,iBAAiB,KAAK,QAAQ,CAAC;AACrC,eAAO,cAAc;AACrB,eAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;AAAA,MACrE;AACA,aAAO,CAAC,YAAY,YAAY,UAAU,CAAC;AAAA,IAC7C;AAAA,EAAA;AAGF,QAAM,QAAQ,SAAS,IAAI,CAAC,CAAC,YAAY,KAAK,MAAM;AAAA,IAClD,UAAU,MAAM,UAAU,EAAE;AAAA,IAC5B;AAAA,EAAA,CACD;AAED,QAAM,UAAU,KAAK,IAAI,CAAA,eAAc;AAAA,IACrC,UAAU,MAAM,UAAU,SAAS;AAAA,IACnC,YAAY,eAAe,UAAU;AAAA,EAAA,CACtC;AAED,QAAM,YAAY,KAAK,IAAI,CAAA,eAAc;AAAA,IACvC,UAAU,MAAM,UAAU,WAAW;AAAA,IACrC,YAAY,QAAQ,UAAU;AAAA,EAAA,CAC/B;AAED,QAAM,OAAO,SAAS,MAAM,SAAS,KAAK,CAAA,SAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;AAE1E,SAAO;AAAA,IACL,GAAG,OAAO,YAAY,KAAK;AAAA,IAC3B,GAAG,OAAO,YAAY,OAAO;AAAA,IAC7B,GAAG,OAAO,YAAY,SAAS;AAAA,IAC/B;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"breakpoint.js","sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n  const { width } = useWindowSize();\n\n  const breakpointList = {\n    xs: 0,\n    ...breakpointsTailwind,\n  } as const;\n\n  type Breakpoint = keyof typeof breakpointList;\n\n  const breakpoints = useBreakpoints(breakpointList);\n\n  const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n  const list = getKeys(breakpointList);\n\n  const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n    if (index < list.length - 1) {\n      const nextBreakpoint = list[index + 1];\n      assert(nextBreakpoint);\n      return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n    }\n    return [breakpoint, breakpoints[breakpoint]];\n  });\n\n  const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n  const sizesUp = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_up`),\n    breakpoints.greaterOrEqual(breakpoint),\n  ]);\n\n  const sizesDown = list.map(breakpoint => [\n    camelCase(`is_${breakpoint}_and_down`),\n    breakpoints.smaller(breakpoint),\n  ]);\n\n  const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n  return {\n    ...Object.fromEntries(sizes),\n    ...Object.fromEntries(sizesUp),\n    ...Object.fromEntries(sizesDown),\n    name,\n    width,\n  };\n}\n"],"names":[],"mappings":";;;;;AAKO,SAAS,gBAAgB;AAC9B,QAAM,EAAE,MAAA,IAAU,cAAA;AAElB,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA;AAKL,QAAM,cAAc,eAAe,cAAc;AAEjD,QAAM,UAAU,OAAO;AAEvB,QAAM,OAAO,QAAQ,cAAc;AAEnC,QAAM,WAAyC,KAAK,IAAI,CAAC,YAAY,UAAU;AAC7E,QAAI,QAAQ,KAAK,SAAS,GAAG;AAC3B,YAAM,iBAAiB,KAAK,QAAQ,CAAC;AACrC,aAAO,cAAc;AACrB,aAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;AAAA,IACrE;AACA,WAAO,CAAC,YAAY,YAAY,UAAU,CAAC;AAAA,EAC7C,CAAC;AAED,QAAM,QAAQ,SAAS,IAAI,CAAC,CAAC,YAAY,KAAK,MAAM,CAAC,UAAU,MAAM,UAAU,EAAE,GAAG,KAAK,CAAC;AAE1F,QAAM,UAAU,KAAK,IAAI,CAAA,eAAc;AAAA,IACrC,UAAU,MAAM,UAAU,SAAS;AAAA,IACnC,YAAY,eAAe,UAAU;AAAA,EAAA,CACtC;AAED,QAAM,YAAY,KAAK,IAAI,CAAA,eAAc;AAAA,IACvC,UAAU,MAAM,UAAU,WAAW;AAAA,IACrC,YAAY,QAAQ,UAAU;AAAA,EAAA,CAC/B;AAED,QAAM,OAAO,SAAiB,MAAM,SAAS,KAAK,CAAA,SAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE;AAElF,SAAO;AAAA,IACL,GAAG,OAAO,YAAY,KAAK;AAAA,IAC3B,GAAG,OAAO,YAAY,OAAO;AAAA,IAC7B,GAAG,OAAO,YAAY,SAAS;AAAA,IAC/B;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue';
+import type { Ref, TemplateRef } from 'vue';
 export type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined ? never : V extends object ? keyof T : keyof {
     [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;
 };
@@ -11,7 +11,7 @@ export interface DropdownOptions<TValue, TItem> {
     dense?: Ref<boolean>;
     disabled?: Ref<boolean>;
     value: Ref<TItem | TItem[] | undefined>;
-    menuRef: Ref<HTMLElement>;
+    menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;
     keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
     textAttr?: keyof TItem | ((item: TItem) => string);
     appendWidth?: number;
@@ -22,19 +22,22 @@ export interface DropdownOptions<TValue, TItem> {
     autoFocus?: boolean;
     setValue?: (val: TItem) => void;
     hideSelected?: boolean;
+    isOpen?: Ref<boolean>;
+    getText?: (item: TItem) => string | undefined;
+    getIdentifier?: (item: TItem) => any;
 }
 export declare function useDropdownOptionProperty<TValue, TItem>({ keyAttr, textAttr, }: DropdownItemAttr<TValue, TItem>): {
     getIdentifier: (item: TItem) => TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>];
     getText: (item: TItem) => string | undefined;
 };
-export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoFocus, autoSelectFirst, dense, disabled, hideSelected, itemHeight, keyAttr, menuRef, options: allOptions, overscan, prependWidth, setValue, textAttr, value, }: DropdownOptions<TValue, TItem>): {
+export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoFocus, autoSelectFirst, dense, disabled, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight, keyAttr, menuRef, options: allOptions, overscan, prependWidth, setValue, textAttr, value, }: DropdownOptions<TValue, TItem>): {
     applyHighlighted: () => void;
     containerProps: {
         ref: Ref<HTMLElement | null>;
         onScroll: () => void;
         style: import("vue").StyleValue;
     };
-    getIdentifier: (item: TItem) => TItem | TItem[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>];
+    getIdentifier: (item: TItem) => any;
     getText: (item: TItem) => string | undefined;
     highlightedIndex: Ref<number, number>;
     isActiveItem: (item: TItem) => boolean;

package/dist/composables/dropdown-menu.js

@@ -1,4 +1,4 @@
-import { computed, ref, watch, nextTick } from "vue";
+import { computed, shallowRef, ref, watch, nextTick } from "vue";
 import { get, set } from "@vueuse/shared";
 import { useVirtualList, useArrayMap, watchOnce } from "@vueuse/core";
 function useDropdownOptionProperty({
@@ -9,8 +9,7 @@ function useDropdownOptionProperty({
     if (textAttr) {
       if (typeof textAttr === "function")
         return textAttr(item);
-      else
-        return item[textAttr]?.toString();
+      else return item[textAttr]?.toString();
     }
     return item?.toString();
   }
@@ -24,13 +23,23 @@ function useDropdownOptionProperty({
     getText
   };
 }
+function toSelectedArray(val) {
+  if (Array.isArray(val))
+    return val;
+  if (val !== null && val !== void 0)
+    return [val];
+  return [];
+}
 function useDropdownMenu({
   appendWidth,
   autoFocus,
   autoSelectFirst,
   dense,
-  disabled = ref(false),
+  disabled = shallowRef(false),
+  getIdentifier: externalGetIdentifier,
+  getText: externalGetText,
   hideSelected,
+  isOpen: externalIsOpen,
   itemHeight = 48,
   keyAttr,
   menuRef,
@@ -41,25 +50,36 @@ function useDropdownMenu({
   textAttr,
   value
 }) {
+  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({
+    keyAttr,
+    textAttr
+  });
+  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;
+  const getText = externalGetText ?? defaultGetText;
+  const activeIdentifiers = computed(() => {
+    const val = get(value);
+    const selected = toSelectedArray(val);
+    const identifiers = /* @__PURE__ */ new Set();
+    for (const item of selected) {
+      identifiers.add(getIdentifier(item));
+    }
+    return identifiers;
+  });
+  function isActiveItem(item) {
+    return get(activeIdentifiers).has(getIdentifier(item));
+  }
   const options = computed(() => {
     const options2 = get(allOptions);
     if (!hideSelected)
       return options2;
     return options2.filter((item) => !isActiveItem(item));
   });
-  const { getIdentifier, getText } = useDropdownOptionProperty({
-    keyAttr,
-    textAttr
+  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList(options, {
+    itemHeight,
+    overscan
   });
-  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList(
-    options,
-    {
-      itemHeight,
-      overscan
-    }
-  );
   const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));
-  const isOpen = ref(false);
+  const isOpen = externalIsOpen ?? shallowRef(false);
   const valueKey = computed(() => {
     const selected = get(value);
     if (!keyAttr || !selected)
@@ -67,63 +87,67 @@ function useDropdownMenu({
     return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
   });
   const highlightedIndex = ref(get(autoSelectFirst) ? 0 : -1);
+  const optionWidthBounds = computed(() => {
+    let min = 0;
+    let max = 0;
+    for (const option of get(options)) {
+      const length = getText(option)?.toString()?.length ?? 0;
+      if (min === 0 && max === 0) {
+        min = length;
+        max = length;
+      } else if (length < min) {
+        min = length;
+      } else if (length > max) {
+        max = length;
+      }
+    }
+    return { min, max };
+  });
   const menuWidth = computed(() => {
-    const widths = { max: 0, min: 0 };
+    const { min, max } = get(optionWidthBounds);
     const maxWidth = 30;
     const paddingX = 1.5;
     const fontMultiplier = get(dense) ? 12 : 13;
-    get(options).forEach((option) => {
-      const length = getText(option)?.toString()?.length ?? 0;
-      if (widths.min === 0 && widths.max === 0) {
-        widths.min = length;
-        widths.max = length;
-      } else if (length < widths.min) {
-        widths.min = length;
-      } else if (length > widths.max) {
-        widths.max = length;
-      }
-    });
-    const difference = widths.max - widths.min;
+    const difference = max - min;
     function computeValue(width) {
       const additionalWidths = (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);
       return `${Math.min(width * fontMultiplier / 16 + paddingX + additionalWidths, maxWidth)}rem`;
     }
     if (difference <= 5)
-      return computeValue(widths.max);
-    return computeValue(widths.min + difference / 2);
+      return computeValue(max);
+    return computeValue(min + difference / 2);
   });
   function toggle(state = false) {
     set(isOpen, state);
   }
   function itemIndexInValue(item) {
     const val = get(value);
-    const selected = Array.isArray(val) ? val : val ? [val] : [];
+    const selected = toSelectedArray(val);
     if (selected.length === 0)
       return -1;
-    return selected.findIndex((selectedItem) => {
-      if (keyAttr)
-        return selectedItem[keyAttr] === item[keyAttr];
-      return selectedItem === item;
-    });
-  }
-  function isActiveItem(item) {
-    return itemIndexInValue(item) !== -1;
+    const itemId = getIdentifier(item);
+    return selected.findIndex((selectedItem) => getIdentifier(selectedItem) === itemId);
   }
   async function adjustScrollByHighlightedIndex(smooth = false) {
     const index = get(highlightedIndex);
     if (index > -1) {
       await nextTick(() => {
-        const container = get(menuRef)?.parentElement;
-        if (container) {
-          const highlightedElem = get(menuRef).getElementsByClassName("highlighted")[0];
+        const menuEl = get(menuRef);
+        const container = menuEl?.parentElement;
+        if (container && menuEl) {
+          const highlightedElem = menuEl.getElementsByClassName("highlighted")[0];
           if (highlightedElem) {
-            highlightedElem.scrollIntoView?.({ behavior: smooth ? "smooth" : "auto", block: "nearest" });
-            if (get(autoFocus) && "focus" in highlightedElem && typeof highlightedElem.focus === "function")
+            highlightedElem.scrollIntoView?.({
+              behavior: smooth ? "smooth" : "auto",
+              block: "nearest"
+            });
+            if (get(autoFocus) && "focus" in highlightedElem && typeof highlightedElem.focus === "function") {
               highlightedElem?.focus();
+            }
           } else {
             scrollTo(index);
             if (get(autoFocus)) {
-              const elem = get(menuRef).getElementsByClassName("highlighted")[0];
+              const elem = menuEl.getElementsByClassName("highlighted")[0];
               if (elem && "focus" in elem && typeof elem.focus === "function")
                 elem.focus();
             }
@@ -136,7 +160,7 @@ function useDropdownMenu({
     await nextTick(() => {
       if (open) {
         const val = get(value);
-        if (Array.isArray(val) && val.length > 0 || !!val) {
+        if (Array.isArray(val) && val.length > 0 || val !== null && val !== void 0) {
           const index = get(options).findIndex(isActiveItem);
           if (index > -1)
             set(highlightedIndex, index);
@@ -180,8 +204,7 @@ function useDropdownMenu({
       set(highlightedIndex, 0);
     else if (position < 0)
       set(highlightedIndex, total - 1);
-    else
-      set(highlightedIndex, position);
+    else set(highlightedIndex, position);
   };
   const applyHighlighted = () => {
     if (!setValue || !get(isOpen))
@@ -189,8 +212,8 @@ function useDropdownMenu({
     const highlightedIndexVal = get(highlightedIndex);
     if (highlightedIndexVal === -1)
       return;
-    const entry = get(options).find((_data, index) => highlightedIndexVal === index);
-    if (entry)
+    const entry = get(options)[highlightedIndexVal];
+    if (entry !== void 0)
       setValue(entry);
   };
   return {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { Ref } 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\n        ? P\n        : V extends T[P]\n          ? P\n          : 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 interface DropdownOptions<TValue, TItem> {\n  options: Ref<TItem[]>;\n  dense?: Ref<boolean>;\n  disabled?: Ref<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<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  autoFocus?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\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\n      else\n        return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(item: TItem): 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\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoFocus,\n  autoSelectFirst,\n  dense,\n  disabled = ref(false),\n  hideSelected,\n  itemHeight = 48,\n  keyAttr,\n  menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n}: DropdownOptions<TValue, TItem>) {\n  const options = computed(() => {\n    const options = get(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  const { getIdentifier, getText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(\n    options,\n    {\n      itemHeight,\n      overscan,\n    },\n  );\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = ref(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\n  const menuWidth = computed(() => {\n    const widths = { max: 0, min: 0 };\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = get(dense) ? 12 : 13;\n\n    get(options).forEach((option) => {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (widths.min === 0 && widths.max === 0) {\n        widths.min = length;\n        widths.max = length;\n      }\n      else if (length < widths.min) {\n        widths.min = length;\n      }\n      else if (length > widths.max) {\n        widths.max = length;\n      }\n    });\n\n    const difference = widths.max - widths.min;\n\n    function computeValue(width: number) {\n      const additionalWidths = (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(widths.max);\n\n    return computeValue(widths.min + difference / 2);\n  });\n\n  function toggle(state: boolean = false) {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = Array.isArray(val) ? val : (val ? [val] : []);\n\n    if (selected.length === 0)\n      return -1;\n\n    return selected.findIndex((selectedItem) => {\n      if (keyAttr)\n        return selectedItem[keyAttr] === item[keyAttr];\n      return selectedItem === item;\n    });\n  }\n\n  function isActiveItem(item: TItem): boolean {\n    return itemIndexInValue(item) !== -1;\n  }\n\n  async function adjustScrollByHighlightedIndex(smooth: boolean = false) {\n    const index = get(highlightedIndex);\n    if (index > -1) {\n      await nextTick(() => {\n        const container = get(menuRef)?.parentElement;\n        if (container) {\n          const highlightedElem = get(menuRef).getElementsByClassName('highlighted')[0];\n\n          if (highlightedElem) {\n            highlightedElem.scrollIntoView?.({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });\n            if (get(autoFocus) && 'focus' in highlightedElem && typeof highlightedElem.focus === 'function')\n              highlightedElem?.focus();\n          }\n          else {\n            scrollTo(index);\n            if (get(autoFocus)) {\n              const elem = get(menuRef).getElementsByClassName('highlighted')[0];\n              if (elem && 'focus' in elem && typeof elem.focus === 'function')\n                elem.focus();\n            }\n          }\n        }\n      });\n    }\n  }\n\n  async function updateOpen(open: boolean) {\n    await nextTick(() => {\n      if (open) {\n        const val = get(value);\n\n        // set highlighted index to active item\n        if ((Array.isArray(val) && val.length > 0) || !!val) {\n          const index = get(options).findIndex(isActiveItem);\n          if (index > -1)\n            set(highlightedIndex, index);\n        }\n\n        watchOnce(list, async () => {\n          await adjustScrollByHighlightedIndex();\n        });\n      }\n    });\n  }\n\n  watch([isOpen, disabled], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(highlightedIndex, async (curr, prev) => {\n    if (curr !== prev)\n      await adjustScrollByHighlightedIndex(true);\n  });\n\n  watch(options, async () => {\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  const moveHighlight = (up: boolean) => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    let position = get(highlightedIndex);\n    const move = up ? -1 : 1;\n\n    position += move;\n\n    const total = get(options).length;\n\n    if (position >= total)\n      set(highlightedIndex, 0);\n    else if (position < 0)\n      set(highlightedIndex, total - 1);\n    else\n      set(highlightedIndex, position);\n  };\n\n  const applyHighlighted = () => {\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).find((_data, index) => highlightedIndexVal === index);\n    if (entry)\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    highlightedIndex,\n    isActiveItem,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"names":["options"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { 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 interface DropdownOptions<TValue, TItem> {\n  options: Ref<TItem[]>;\n  dense?: Ref<boolean>;\n  disabled?: Ref<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  autoFocus?: 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}\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  autoFocus,\n  autoSelectFirst,\n  dense,\n  disabled = shallowRef(false),\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = 48,\n  keyAttr,\n  menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\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 = get(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\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\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 = get(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  async function adjustScrollByHighlightedIndex(smooth: boolean = false): Promise<void> {\n    const index = get(highlightedIndex);\n    if (index > -1) {\n      await nextTick(() => {\n        const menuEl = get(menuRef);\n        const container = menuEl?.parentElement;\n        if (container && menuEl) {\n          const highlightedElem = menuEl.getElementsByClassName('highlighted')[0];\n\n          if (highlightedElem) {\n            highlightedElem.scrollIntoView?.({\n              behavior: smooth ? 'smooth' : 'auto',\n              block: 'nearest',\n            });\n            if (\n              get(autoFocus) &&\n              'focus' in highlightedElem &&\n              typeof highlightedElem.focus === 'function'\n            ) {\n              highlightedElem?.focus();\n            }\n          }\n          else {\n            scrollTo(index);\n            if (get(autoFocus)) {\n              const elem = menuEl.getElementsByClassName('highlighted')[0];\n              if (elem && 'focus' in elem && typeof elem.focus === 'function')\n                elem.focus();\n            }\n          }\n        }\n      });\n    }\n  }\n\n  async function updateOpen(open: boolean): Promise<void> {\n    await nextTick(() => {\n      if (open) {\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        watchOnce(list, async () => {\n          await adjustScrollByHighlightedIndex();\n        });\n      }\n    });\n  }\n\n  watch([isOpen, disabled], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(highlightedIndex, async (curr, prev) => {\n    if (curr !== prev)\n      await adjustScrollByHighlightedIndex(true);\n  });\n\n  watch(options, async () => {\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  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    let position = get(highlightedIndex);\n    const move = up ? -1 : 1;\n\n    position += move;\n\n    const total = get(options).length;\n\n    if (position >= total)\n      set(highlightedIndex, 0);\n    else if (position < 0)\n      set(highlightedIndex, total - 1);\n    else set(highlightedIndex, position);\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)\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    highlightedIndex,\n    isActiveItem,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"names":["options"],"mappings":"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"}

package/dist/composables/forms/auto-complete/focus.d.ts

@@ -1,20 +1,22 @@
-import type { ComputedRef, MaybeRef, Ref } from 'vue';
+import type { ComputedRef, MaybeRef, Ref, TemplateRef } from 'vue';
 export interface UseAutoCompleteFocusOptions {
+    /** Whether custom (free-text) values are allowed. */
     customValue: MaybeRef<boolean>;
+    /** Whether to apply the current value as the search text when focused. */
     shouldApplyValueAsSearch: MaybeRef<boolean>;
+    /** Whether the autocomplete is disabled. */
     disabled: MaybeRef<boolean>;
 }
-export interface UseAutoCompleteFocusDeps<TItem> {
+export interface UseAutoCompleteFocusDeps {
     activatorFocused: Ref<boolean>;
     activatorFocusedWithin: Ref<boolean>;
     focusedValueIndex: Ref<number>;
-    filteredOptions: Ref<TItem[]>;
     internalSearch: Ref<string>;
     isOpen: Ref<boolean>;
     justOpened: Ref<boolean>;
     menuWrapperFocusedWithin: Ref<boolean>;
     searchInputFocused: Ref<boolean>;
-    textInput: Ref<HTMLInputElement | undefined>;
+    textInput: Ref<HTMLInputElement | undefined> | TemplateRef<HTMLInputElement>;
     setSearchAsValue: () => void;
     updateInternalSearch: (value?: string) => void;
 }
@@ -25,4 +27,4 @@ export interface UseAutoCompleteFocusReturn {
     onInputFocused: () => void;
     setInputFocus: () => Promise<void>;
 }
-export declare function useAutoCompleteFocus<TItem>(options: UseAutoCompleteFocusOptions, deps: UseAutoCompleteFocusDeps<TItem>): UseAutoCompleteFocusReturn;
+export declare function useAutoCompleteFocus(options: UseAutoCompleteFocusOptions, deps: UseAutoCompleteFocusDeps): UseAutoCompleteFocusReturn;

package/dist/composables/forms/auto-complete/focus.js

@@ -1,4 +1,4 @@
-import { computed, nextTick } from "vue";
+import { computed, watch, nextTick } from "vue";
 import { get, set } from "@vueuse/shared";
 import { watchDebounced } from "@vueuse/core";
 function useAutoCompleteFocus(options, deps) {
@@ -39,24 +39,35 @@ function useAutoCompleteFocus(options, deps) {
       set(deps.justOpened, true);
     }
   }
-  watchDebounced(anyFocused, (focused) => {
-    if (!focused) {
-      set(deps.isOpen, false);
-      const customValue = get(options.customValue);
-      const filteredOptions = get(deps.filteredOptions);
-      const internalSearch = get(deps.internalSearch);
-      if (customValue && filteredOptions.length === 0 && internalSearch) {
-        deps.setSearchAsValue();
-      }
-      const shouldApply = get(options.shouldApplyValueAsSearch);
-      if (!shouldApply) {
-        deps.updateInternalSearch();
-      }
+  let pendingCustomSearch = "";
+  watch(anyFocused, (focused) => {
+    if (!focused && get(options.customValue)) {
+      pendingCustomSearch = get(deps.internalSearch);
     }
-  }, {
-    debounce: 200,
-    maxWait: 400
   });
+  watchDebounced(
+    anyFocused,
+    (focused) => {
+      if (!focused) {
+        set(deps.isOpen, false);
+        const customValue = get(options.customValue);
+        const searchToUse = pendingCustomSearch;
+        pendingCustomSearch = "";
+        if (customValue && searchToUse) {
+          deps.updateInternalSearch(searchToUse);
+          deps.setSearchAsValue();
+        }
+        const shouldApply = get(options.shouldApplyValueAsSearch);
+        if (!shouldApply) {
+          deps.updateInternalSearch();
+        }
+      }
+    },
+    {
+      debounce: 200,
+      maxWait: 400
+    }
+  );
   return {
     anyFocused,
     inputClass,

package/dist/composables/forms/auto-complete/focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus.js","sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRef, Ref } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  customValue: MaybeRef<boolean>;\n  shouldApplyValueAsSearch: MaybeRef<boolean>;\n  disabled: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps<TItem> {\n  activatorFocused: Ref<boolean>;\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  filteredOptions: Ref<TItem[]>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onActivatorFocused: () => Promise<void>;\n  onInputFocused: () => void;\n  setInputFocus: () => Promise<void>;\n}\n\nexport function useAutoCompleteFocus<TItem>(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps<TItem>,\n): UseAutoCompleteFocusReturn {\n  const anyFocused = computed<boolean>(() =>\n    get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = get(options.disabled);\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  async function setInputFocus(): Promise<void> {\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  async function onActivatorFocused(): Promise<void> {\n    await nextTick(() => {\n      if (!get(deps.activatorFocused)) {\n        set(deps.searchInputFocused, true);\n      }\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    if (shouldApply) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  // Close menu if the activator is not focused anymore\n  // Using debounced to avoid the menu closing momentarily while focus switches.\n  watchDebounced(anyFocused, (focused) => {\n    if (!focused) {\n      set(deps.isOpen, false);\n\n      const customValue = get(options.customValue);\n      const filteredOptions = get(deps.filteredOptions);\n      const internalSearch = get(deps.internalSearch);\n\n      if (customValue && filteredOptions.length === 0 && internalSearch) {\n        deps.setSearchAsValue();\n      }\n\n      const shouldApply = get(options.shouldApplyValueAsSearch);\n      if (!shouldApply) {\n        deps.updateInternalSearch();\n      }\n    }\n  }, {\n    debounce: 200,\n    maxWait: 400,\n  });\n\n  return {\n    anyFocused,\n    inputClass,\n    onActivatorFocused,\n    onInputFocused,\n    setInputFocus,\n  };\n}\n"],"names":[],"mappings":";;;AA+BO,SAAS,qBACd,SACA,MAC4B;AAC5B,QAAM,aAAa;AAAA,IAAkB,MACnC,IAAI,KAAK,sBAAsB,KAAK,IAAI,KAAK,wBAAwB;AAAA,EAAA;AAGvE,QAAM,aAAa,SAAiB,MAAM;AACxC,UAAM,YAAY,IAAI,UAAU;AAChC,UAAM,aAAa,IAAI,QAAQ,QAAQ;AACvC,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,UAAM,YAAY,IAAI,KAAK,cAAc;AAEzC,SAAK,CAAC,aAAa,eAAe,CAAC;AACjC,aAAO;AACT,QAAI;AACF,aAAO;AACT,WAAO;AAAA,EACT,CAAC;AAED,iBAAe,gBAA+B;AAC5C,UAAM,SAAS,MAAM;AACnB,UAAI,KAAK,oBAAoB,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,iBAAe,qBAAoC;AACjD,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG;AAC/B,YAAI,KAAK,oBAAoB,IAAI;AAAA,MACnC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,WAAS,iBAAuB;AAC9B,QAAI,KAAK,mBAAmB,EAAE;AAE9B,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,QAAI,aAAa;AACf,YAAM,YAAY,IAAI,KAAK,SAAS;AACpC,iBAAW,OAAA;AAAA,IACb;AAEA,QAAI,CAAC,IAAI,KAAK,MAAM,GAAG;AACrB,UAAI,KAAK,YAAY,IAAI;AAAA,IAC3B;AAAA,EACF;AAIA,iBAAe,YAAY,CAAC,YAAY;AACtC,QAAI,CAAC,SAAS;AACZ,UAAI,KAAK,QAAQ,KAAK;AAEtB,YAAM,cAAc,IAAI,QAAQ,WAAW;AAC3C,YAAM,kBAAkB,IAAI,KAAK,eAAe;AAChD,YAAM,iBAAiB,IAAI,KAAK,cAAc;AAE9C,UAAI,eAAe,gBAAgB,WAAW,KAAK,gBAAgB;AACjE,aAAK,iBAAA;AAAA,MACP;AAEA,YAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,UAAI,CAAC,aAAa;AAChB,aAAK,qBAAA;AAAA,MACP;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD,UAAU;AAAA,IACV,SAAS;AAAA,EAAA,CACV;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"focus.js","sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRef, Ref, TemplateRef } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRef<boolean>;\n  /** Whether to apply the current value as the search text when focused. */\n  shouldApplyValueAsSearch: MaybeRef<boolean>;\n  /** Whether the autocomplete is disabled. */\n  disabled: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps {\n  activatorFocused: Ref<boolean>;\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined> | TemplateRef<HTMLInputElement>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onActivatorFocused: () => Promise<void>;\n  onInputFocused: () => void;\n  setInputFocus: () => Promise<void>;\n}\n\nexport function useAutoCompleteFocus(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps,\n): UseAutoCompleteFocusReturn {\n  const anyFocused = computed<boolean>(\n    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = get(options.disabled);\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  async function setInputFocus(): Promise<void> {\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  async function onActivatorFocused(): Promise<void> {\n    await nextTick(() => {\n      if (!get(deps.activatorFocused)) {\n        set(deps.searchInputFocused, true);\n      }\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    if (shouldApply) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  // Capture the search value immediately when focus is lost, before the debounced\n  // handler fires. Other watchers (value.ts) may clear internalSearch when isOpen\n  // changes, so we need to preserve it for the custom value blur flow.\n  let pendingCustomSearch = '';\n\n  watch(anyFocused, (focused) => {\n    if (!focused && get(options.customValue)) {\n      pendingCustomSearch = get(deps.internalSearch);\n    }\n  });\n\n  // Close menu if the activator is not focused anymore\n  // Using debounced to avoid the menu closing momentarily while focus switches.\n  watchDebounced(\n    anyFocused,\n    (focused) => {\n      if (!focused) {\n        set(deps.isOpen, false);\n\n        const customValue = get(options.customValue);\n        const searchToUse = pendingCustomSearch;\n        pendingCustomSearch = '';\n\n        if (customValue && searchToUse) {\n          deps.updateInternalSearch(searchToUse);\n          deps.setSearchAsValue();\n        }\n\n        const shouldApply = get(options.shouldApplyValueAsSearch);\n        if (!shouldApply) {\n          deps.updateInternalSearch();\n        }\n      }\n    },\n    {\n      debounce: 200,\n      maxWait: 400,\n    },\n  );\n\n  return {\n    anyFocused,\n    inputClass,\n    onActivatorFocused,\n    onInputFocused,\n    setInputFocus,\n  };\n}\n"],"names":[],"mappings":";;;AAiCO,SAAS,qBACd,SACA,MAC4B;AAC5B,QAAM,aAAa;AAAA,IACjB,MAAM,IAAI,KAAK,sBAAsB,KAAK,IAAI,KAAK,wBAAwB;AAAA,EAAA;AAG7E,QAAM,aAAa,SAAiB,MAAM;AACxC,UAAM,YAAY,IAAI,UAAU;AAChC,UAAM,aAAa,IAAI,QAAQ,QAAQ;AACvC,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,UAAM,YAAY,IAAI,KAAK,cAAc;AAEzC,SAAK,CAAC,aAAa,eAAe,CAAC;AACjC,aAAO;AACT,QAAI;AACF,aAAO;AACT,WAAO;AAAA,EACT,CAAC;AAED,iBAAe,gBAA+B;AAC5C,UAAM,SAAS,MAAM;AACnB,UAAI,KAAK,oBAAoB,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,iBAAe,qBAAoC;AACjD,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG;AAC/B,YAAI,KAAK,oBAAoB,IAAI;AAAA,MACnC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,WAAS,iBAAuB;AAC9B,QAAI,KAAK,mBAAmB,EAAE;AAE9B,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,QAAI,aAAa;AACf,YAAM,YAAY,IAAI,KAAK,SAAS;AACpC,iBAAW,OAAA;AAAA,IACb;AAEA,QAAI,CAAC,IAAI,KAAK,MAAM,GAAG;AACrB,UAAI,KAAK,YAAY,IAAI;AAAA,IAC3B;AAAA,EACF;AAKA,MAAI,sBAAsB;AAE1B,QAAM,YAAY,CAAC,YAAY;AAC7B,QAAI,CAAC,WAAW,IAAI,QAAQ,WAAW,GAAG;AACxC,4BAAsB,IAAI,KAAK,cAAc;AAAA,IAC/C;AAAA,EACF,CAAC;AAID;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,UAAI,CAAC,SAAS;AACZ,YAAI,KAAK,QAAQ,KAAK;AAEtB,cAAM,cAAc,IAAI,QAAQ,WAAW;AAC3C,cAAM,cAAc;AACpB,8BAAsB;AAEtB,YAAI,eAAe,aAAa;AAC9B,eAAK,qBAAqB,WAAW;AACrC,eAAK,iBAAA;AAAA,QACP;AAEA,cAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,YAAI,CAAC,aAAa;AAChB,eAAK,qBAAA;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/composables/forms/auto-complete/index.d.ts

@@ -1,12 +1,3 @@
-export declare function useAutoCompleteProps<T extends object>(props: {
-    keyProp?: Extract<keyof T, string>;
-    textProp?: Extract<keyof T, string>;
-    itemDisabledProp?: Extract<keyof T, string>;
-}): {
-    getItemKey: (item: T) => string | undefined;
-    getTextValue: (item: T) => string | undefined;
-    isItemDisabled: (item: T) => boolean;
-};
 export * from './focus.js';
 export * from './keyboard-navigation.js';
 export * from './search.js';