@rotki/ui-library 2.26.1 → 3.0.0-beta.1

package/dist/components/date-time-picker/use-date-bounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-date-bounds.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-bounds.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { resolveBound } from '@/components/date-time-picker/segment-utils';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\n\ninterface DateBoundsOptions {\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  /** Whether a numeric bound is stated in whole seconds rather than milliseconds. */\n  epochSeconds: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** The clock a `now` maximum follows, kept current by the caller. */\n  now: Ref<Dayjs>;\n}\n\ninterface DateBoundsReturn {\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  internalErrorMessages: Readonly<Ref<string[]>>;\n  isDateValid: (date: Dayjs) => boolean;\n  clearErrors: () => void;\n}\n\n/**\n * The range a picked date has to sit in, and the message explaining a date that\n * does not.\n */\nexport function useDateBounds({\n  dateFormat,\n  epochSeconds,\n  maxDate,\n  minDate,\n  now,\n}: DateBoundsOptions): DateBoundsReturn {\n  const { t } = useRuiI8n();\n\n  const internalErrorMessages = ref<string[]>([]);\n\n  const minAllowedDate = computed<Date>(\n    () => resolveBound(minDate, epochSeconds) ?? new Date(1970, 0, 1),\n  );\n\n  const maxAllowedDate = computed<Date | undefined>(\n    () => (maxDate === 'now' ? get(now).toDate() : resolveBound(maxDate, epochSeconds)),\n  );\n\n  /**\n   * Writes a bound the way the field writes its value. `toLocaleDateString()`\n   * followed the browser locale and ignored the picker's own format, so a\n   * day-first field could report its limit month-first, and it dropped the time\n   * entirely, which left a mid-day bound unable to explain itself.\n   */\n  function formatBound(bound: Date): string {\n    return dayjs(bound).format(get(dateFormat));\n  }\n\n  function clearErrors(): void {\n    set(internalErrorMessages, []);\n  }\n\n  function isDateValid(date: Dayjs): boolean {\n    const min = get(minAllowedDate);\n    const max = get(maxAllowedDate);\n\n    clearErrors();\n\n    if (min && date.isBefore(min)) {\n      const formatted = formatBound(min);\n      const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n        date: formatted,\n      }, `Date cannot be before ${formatted}`);\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    if (max && date.isAfter(max)) {\n      const formatted = formatBound(max);\n      const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, 'The selected date cannot be in the future');\n      const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: formatted }, `Date cannot be after ${formatted}`);\n      const errorMessage = maxDate === 'now' ? nowError : maxError;\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    return true;\n  }\n\n  return {\n    clearErrors,\n    internalErrorMessages: shallowReadonly(internalErrorMessages),\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n  };\n}\n"],"mappings":";;;;;;;;;;;AAgCA,SAAgB,cAAc,EAC5B,YACA,cACA,SACA,SACA,OACsC;CACtC,MAAM,EAAE,MAAM,UAAU;CAExB,MAAM,wBAAwB,IAAc,CAAC,CAAC;CAE9C,MAAM,iBAAiB,eACf,aAAa,SAAS,YAAY,KAAK,IAAI,KAAK,MAAM,GAAG,CAAC,CAClE;CAEA,MAAM,iBAAiB,eACd,YAAY,QAAQ,IAAI,GAAG,CAAC,CAAC,OAAO,IAAI,aAAa,SAAS,YAAY,CACnF;;;;;;;CAQA,SAAS,YAAY,OAAqB;EACxC,OAAO,MAAM,KAAK,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC;CAC5C;CAEA,SAAS,cAAoB;EAC3B,IAAI,uBAAuB,CAAC,CAAC;CAC/B;CAEA,SAAS,YAAY,MAAsB;EACzC,MAAM,MAAM,IAAI,cAAc;EAC9B,MAAM,MAAM,IAAI,cAAc;EAE9B,YAAY;EAEZ,IAAI,OAAO,KAAK,SAAS,GAAG,GAAG;GAC7B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,eAAe,EAAE,cAAc,eAAe,eAAe,EACjE,MAAM,UACR,GAAG,yBAAyB,WAAW;GACvC,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,IAAI,OAAO,KAAK,QAAQ,GAAG,GAAG;GAC5B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,2CAA2C;GACzG,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,EAAE,MAAM,UAAU,GAAG,wBAAwB,WAAW;GACtH,MAAM,eAAe,YAAY,QAAQ,WAAW;GACpD,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,OAAO;CACT;CAEA,OAAO;EACL;EACA,uBAAuB,gBAAgB,qBAAqB;EAC5D;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-date-bounds.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-bounds.ts"],"sourcesContent":["import type { Dayjs } from 'dayjs';\nimport type { ComputedRef, Ref } from 'vue';\nimport { dayjs } from '@/components/date-time-picker/dayjs-setup';\nimport { resolveBound } from '@/components/date-time-picker/segment-utils';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\n\ninterface DateBoundsOptions {\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  /** Whether a numeric bound is stated in whole seconds rather than milliseconds. */\n  epochSeconds: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** The clock a `now` maximum follows, kept current by the caller. */\n  now: Ref<Dayjs>;\n}\n\ninterface DateBoundsReturn {\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  internalErrorMessages: Readonly<Ref<string[]>>;\n  isDateValid: (date: Dayjs) => boolean;\n  clearErrors: () => void;\n}\n\n/**\n * The range a picked date has to sit in, and the message explaining a date that\n * does not.\n */\nexport function useDateBounds({\n  dateFormat,\n  epochSeconds,\n  maxDate,\n  minDate,\n  now,\n}: DateBoundsOptions): DateBoundsReturn {\n  const { t } = useRuiI8n();\n\n  const internalErrorMessages = ref<string[]>([]);\n\n  const minAllowedDate = computed<Date>(\n    () => resolveBound(minDate, epochSeconds) ?? new Date(1970, 0, 1),\n  );\n\n  const maxAllowedDate = computed<Date | undefined>(\n    () => (maxDate === 'now' ? get(now).toDate() : resolveBound(maxDate, epochSeconds)),\n  );\n\n  /**\n   * Writes a bound the way the field writes its value. `toLocaleDateString()`\n   * followed the browser locale and ignored the picker's own format, so a\n   * day-first field could report its limit month-first, and it dropped the time\n   * entirely, which left a mid-day bound unable to explain itself.\n   */\n  function formatBound(bound: Date): string {\n    return dayjs(bound).format(get(dateFormat));\n  }\n\n  function clearErrors(): void {\n    set(internalErrorMessages, []);\n  }\n\n  function isDateValid(date: Dayjs): boolean {\n    const min = get(minAllowedDate);\n    const max = get(maxAllowedDate);\n\n    clearErrors();\n\n    if (min && date.isBefore(min)) {\n      const formatted = formatBound(min);\n      const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n        date: formatted,\n      }, `Date cannot be before ${formatted}`);\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    if (max && date.isAfter(max)) {\n      const formatted = formatBound(max);\n      const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, 'The selected date cannot be in the future');\n      const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: formatted }, `Date cannot be after ${formatted}`);\n      const errorMessage = maxDate === 'now' ? nowError : maxError;\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    return true;\n  }\n\n  return {\n    clearErrors,\n    internalErrorMessages: shallowReadonly(internalErrorMessages),\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n  };\n}\n"],"mappings":";;;;;;;;;;;AAiCA,SAAgB,cAAc,EAC5B,YACA,cACA,SACA,SACA,OACsC;CACtC,MAAM,EAAE,MAAM,UAAU;CAExB,MAAM,wBAAwB,IAAc,CAAC,CAAC;CAE9C,MAAM,iBAAiB,eACf,aAAa,SAAS,YAAY,KAAK,IAAI,KAAK,MAAM,GAAG,CAAC,CAClE;CAEA,MAAM,iBAAiB,eACd,YAAY,QAAQ,IAAI,GAAG,CAAC,CAAC,OAAO,IAAI,aAAa,SAAS,YAAY,CACnF;;;;;;;CAQA,SAAS,YAAY,OAAqB;EACxC,OAAO,MAAM,KAAK,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC;CAC5C;CAEA,SAAS,cAAoB;EAC3B,IAAI,uBAAuB,CAAC,CAAC;CAC/B;CAEA,SAAS,YAAY,MAAsB;EACzC,MAAM,MAAM,IAAI,cAAc;EAC9B,MAAM,MAAM,IAAI,cAAc;EAE9B,YAAY;EAEZ,IAAI,OAAO,KAAK,SAAS,GAAG,GAAG;GAC7B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,eAAe,EAAE,cAAc,eAAe,eAAe,EACjE,MAAM,UACR,GAAG,yBAAyB,WAAW;GACvC,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,IAAI,OAAO,KAAK,QAAQ,GAAG,GAAG;GAC5B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,2CAA2C;GACzG,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,EAAE,MAAM,UAAU,GAAG,wBAAwB,WAAW;GACtH,MAAM,eAAe,YAAY,QAAQ,WAAW;GACpD,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,OAAO;CACT;CAEA,OAAO;EACL;EACA,uBAAuB,gBAAgB,qBAAqB;EAC5D;EACA;EACA;CACF;AACF"}

package/dist/components/date-time-picker/use-date-time-selection.d.ts

@@ -1,9 +1,8 @@
+import type { Dayjs } from 'dayjs';
 import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
 import type { SegmentData } from './types.js';
 import type { TimeAccuracy } from '../../consts/time-accuracy.js';
-import { type Dayjs } from 'dayjs';
 import { type PartialTimeMode } from './partial-time.js';
-import './dayjs-setup.js';
 type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
 type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;
 interface DateTimeSelectionOptions<T extends DateTimeModelType> {

package/dist/components/date-time-picker/use-date-time-selection.js

@@ -1,4 +1,4 @@
-import "./dayjs-setup.js";
+import { dayjs } from "./dayjs-setup.js";
 import { formatWallClock, guessTimezone, includeMilliseconds, includeSeconds } from "./utils.js";
 import { buildDateTime, clampToBounds } from "./segment-utils.js";
 import { completePartialEntry } from "./partial-time.js";
@@ -6,7 +6,6 @@ import { useDateBounds } from "./use-date-bounds.js";
 import { computed, nextTick, onMounted, ref, shallowReadonly, watch } from "vue";
 import { isDefined, watchIgnorable } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
-import dayjs from "dayjs";
 //#region src/components/date-time-picker/use-date-time-selection.ts
 var MILLISECONDS = 1e3;
 function useDateTimeSelection(options) {

package/dist/components/date-time-picker/use-date-time-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-date-time-selection.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-time-selection.ts"],"sourcesContent":["import type { ComputedRef, Ref, WritableComputedRef } from 'vue';\nimport type { SegmentData } from '@/components/date-time-picker/types';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { completePartialEntry, type PartialTimeMode } from '@/components/date-time-picker/partial-time';\nimport { buildDateTime, clampToBounds } from '@/components/date-time-picker/segment-utils';\nimport { useDateBounds } from '@/components/date-time-picker/use-date-bounds';\nimport { formatWallClock, guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\nimport '@/components/date-time-picker/dayjs-setup';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n  T extends 'date' ? Date | undefined :\n    T extends 'epoch-ms' ? number | undefined :\n      T extends 'epoch' ? number | undefined :\n        Date | number | undefined;\n\ninterface DateTimeSelectionOptions<T extends DateTimeModelType> {\n  modelValue: Ref<ModelValueType<T>>;\n  type: T;\n  accuracy: TimeAccuracy;\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  allowEmpty: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** See {@link completePartialEntry}; unset, an incomplete entry is not a value. */\n  partialTime?: PartialTimeMode;\n}\n\ninterface DateTimeSelectionReturn {\n  modelYear: Ref<number | undefined>;\n  modelMonth: Ref<number | undefined>;\n  modelDay: Ref<number | undefined>;\n  modelHour: Ref<number | undefined>;\n  modelMinute: Ref<number | undefined>;\n  modelSecond: Ref<number | undefined>;\n  modelMillisecond: Ref<number | undefined>;\n  modelTimezone: Ref<string | undefined>;\n  selectedDate: WritableComputedRef<Date | undefined>;\n  selectedTime: WritableComputedRef<Date | undefined>;\n  valueSet: ComputedRef<boolean>;\n  internalErrorMessages: Readonly<Ref<string[]>>;\n  now: Readonly<Ref<Dayjs>>;\n  segmentData: SegmentData;\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  getDateTime: () => Dayjs;\n  setNow: () => void;\n  setToday: () => void;\n  commitPartialTime: () => void;\n  clear: () => void;\n  isDateValid: (date: Dayjs) => boolean;\n}\n\nconst MILLISECONDS = 1000;\n\nexport function useDateTimeSelection<T extends DateTimeModelType>(\n  options: DateTimeSelectionOptions<T>,\n): DateTimeSelectionReturn {\n  const {\n    accuracy,\n    allowEmpty,\n    dateFormat,\n    maxDate,\n    minDate,\n    modelValue,\n    partialTime,\n    type,\n  } = options;\n\n  const modelYear = ref<number | undefined>();\n  const modelMonth = ref<number | undefined>();\n  const modelDay = ref<number | undefined>();\n\n  const modelHour = ref<number | undefined>();\n  const modelMinute = ref<number | undefined>();\n  const modelSecond = ref<number | undefined>();\n  const modelMillisecond = ref<number | undefined>();\n  const modelTimezone = ref<string | undefined>(guessTimezone());\n\n  const now = ref<Dayjs>(dayjs.tz(undefined, guessTimezone()));\n\n  const { clearErrors, internalErrorMessages, isDateValid, maxAllowedDate, minAllowedDate } = useDateBounds({\n    dateFormat,\n    epochSeconds: type === 'epoch',\n    maxDate,\n    minDate,\n    now,\n  });\n\n  const segmentData: SegmentData = {\n    DD: modelDay,\n    HH: modelHour,\n    MM: modelMonth,\n    SSS: modelMillisecond,\n    YYYY: modelYear,\n    mm: modelMinute,\n    ss: modelSecond,\n  };\n\n  const selectedDate = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(modelYear) && isDefined(modelMonth) && isDefined(modelDay))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setFullYear(get(modelYear));\n      // Day 1 first, so a later month with fewer days cannot overflow into the next one\n      date.setDate(1);\n      date.setMonth(get(modelMonth) - 1);\n      date.setDate(get(modelDay));\n      return date;\n    },\n    set(value?: Date) {\n      set(modelYear, value?.getFullYear());\n      set(modelMonth, value ? value.getMonth() + 1 : undefined);\n      set(modelDay, value?.getDate());\n    },\n  });\n\n  const selectedTime = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(modelHour) && isDefined(modelMinute))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setHours(\n        get(modelHour),\n        get(modelMinute),\n        get(modelSecond) ?? 0,\n        get(modelMillisecond) ?? 0,\n      );\n      return date;\n    },\n    set(value?: Date) {\n      set(modelHour, value?.getHours());\n      set(modelMinute, value?.getMinutes());\n      set(modelSecond, value?.getSeconds());\n      set(modelMillisecond, value?.getMilliseconds());\n    },\n  });\n\n  const valueSet = computed<boolean>(() => isDefined(selectedDate) && isDefined(selectedTime));\n\n  function getDateTime(): Dayjs {\n    return buildDateTime({\n      day: get(modelDay),\n      hour: get(modelHour),\n      millisecond: get(modelMillisecond),\n      minute: get(modelMinute),\n      month: get(modelMonth),\n      second: get(modelSecond),\n      year: get(modelYear),\n    }, accuracy);\n  }\n\n  function emitUpdate(updatedModel: Dayjs): void {\n    const typeMap = {\n      'date': () => updatedModel.toDate(),\n      // an epoch is whole seconds; `millisecond` accuracy would otherwise emit a fraction\n      'epoch': () => Math.floor(updatedModel.valueOf() / MILLISECONDS),\n      'epoch-ms': () => updatedModel.valueOf(),\n    } as const;\n\n    set(modelValue, typeMap[type]() as ModelValueType<T>);\n  }\n\n  /**\n   * Writes the segments back to the model.\n   *\n   * The segments are a wall-clock reading, so they are formatted and parsed in\n   * the selected timezone. Mutating a `dayjs.tz()` built from the old value\n   * instead would keep that value's UTC offset, and moving the date across a\n   * DST boundary then shifted the time by an hour.\n   */\n  function updateModelValue(): void {\n    if (!isDefined(selectedDate) || !isDefined(selectedTime)) {\n      return;\n    }\n\n    const updatedModel = dayjs.tz(\n      formatWallClock(get(selectedDate), get(selectedTime), accuracy),\n      get(modelTimezone),\n    );\n\n    if (!isDateValid(updatedModel)) {\n      return;\n    }\n\n    emitUpdate(updatedModel);\n  }\n\n  function clear(): void {\n    clearErrors();\n    set(modelYear, undefined);\n    set(modelMonth, undefined);\n    set(modelDay, undefined);\n    set(modelHour, undefined);\n    set(modelMinute, undefined);\n    set(modelSecond, undefined);\n    set(modelMillisecond, undefined);\n    set(modelValue, undefined as ModelValueType<T>);\n  }\n\n  function clampToAllowed(date: Dayjs): Dayjs {\n    return clampToBounds(date, get(minAllowedDate), get(maxAllowedDate));\n  }\n\n  function applySegments(date: Dayjs): void {\n    set(modelYear, date.year());\n    set(modelMonth, date.month() + 1);\n    set(modelDay, date.date());\n    set(modelHour, date.hour());\n    set(modelMinute, date.minute());\n    set(modelSecond, includeSeconds(accuracy) ? date.second() : 0);\n    set(modelMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);\n  }\n\n  function setNow(): void {\n    clearErrors();\n\n    const date = dayjs();\n    set(now, date);\n    applySegments(clampToAllowed(date));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  /**\n   * Moves the date part to today and leaves the time part alone, so a picked\n   * time survives. Falls back to midnight when no time has been entered yet.\n   */\n  function setToday(): void {\n    clearErrors();\n\n    const date = dayjs();\n    set(now, date);\n\n    const target = buildDateTime({\n      day: date.date(),\n      hour: get(modelHour) ?? 0,\n      millisecond: get(modelMillisecond) ?? 0,\n      minute: get(modelMinute) ?? 0,\n      month: date.month() + 1,\n      second: get(modelSecond) ?? 0,\n      year: date.year(),\n    }, accuracy, date);\n\n    applySegments(clampToAllowed(target));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  function updateSegments(date: Dayjs): void {\n    const year = date.year();\n    const month = date.month() + 1;\n    const day = date.date();\n    const hour = date.hour();\n    const minute = date.minute();\n    const second = includeSeconds(accuracy) ? date.second() : undefined;\n    const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : undefined;\n\n    if (get(modelYear) !== year)\n      set(modelYear, year);\n    if (get(modelMonth) !== month)\n      set(modelMonth, month);\n    if (get(modelDay) !== day)\n      set(modelDay, day);\n    if (get(modelHour) !== hour)\n      set(modelHour, hour);\n    if (get(modelMinute) !== minute)\n      set(modelMinute, minute);\n    if (get(modelSecond) !== second)\n      set(modelSecond, second);\n    if (get(modelMillisecond) !== millisecond)\n      set(modelMillisecond, millisecond);\n  }\n\n  const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {\n    const currentTimezone = get(modelTimezone);\n    const newDate = dayjs.tz(newSelectedDate, currentTimezone);\n    const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);\n    const newTime = dayjs.tz(newSelectedTime, currentTimezone);\n    const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);\n\n    if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {\n      return;\n    }\n\n    set(now, dayjs());\n    updateModelValue();\n  });\n\n  /**\n   * Fills in the segments an incomplete entry never reached and commits it, so\n   * a bare date can become a value. Called when the user is done with the field\n   * rather than on every keystroke, since a segment still being typed is not\n   * yet one they left out. The fill is written back into the field, so the\n   * value it decided on is the one on screen, and into the model directly:\n   * running on blur and on enter, it would otherwise lose the value to a\n   * consumer that closes the field on that key before the watcher emits.\n   */\n  function commitPartialTime(): void {\n    if (partialTime === undefined)\n      return;\n\n    const target = completePartialEntry({\n      day: get(modelDay),\n      hour: get(modelHour),\n      millisecond: get(modelMillisecond),\n      minute: get(modelMinute),\n      month: get(modelMonth),\n      second: get(modelSecond),\n      year: get(modelYear),\n    }, {\n      accuracy,\n      maxDate: get(maxAllowedDate),\n      minDate: get(minAllowedDate),\n      mode: partialTime,\n    });\n\n    if (!target)\n      return;\n\n    ignoreUpdates(() => applySegments(target));\n    updateModelValue();\n  }\n\n  function updateInternalModel(value: ModelValueType<T>): void {\n    ignoreUpdates(() => {\n      const updatedValue = type === 'epoch' && typeof value === 'number'\n        ? value * MILLISECONDS\n        : value;\n      const date = dayjs.tz(updatedValue, get(modelTimezone));\n      isDateValid(date);\n      updateSegments(date);\n    });\n  }\n\n  watch(modelTimezone, (newTimezone: string | undefined) => {\n    if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {\n      set(now, dayjs());\n      updateModelValue();\n    }\n  });\n\n  watch(modelValue, (value) => {\n    set(now, dayjs());\n    if (value === undefined) {\n      clear();\n    }\n    else {\n      updateInternalModel(value);\n    }\n  });\n\n  onMounted(() => {\n    if (isDefined(modelValue)) {\n      updateInternalModel(get(modelValue));\n    }\n    else if (!allowEmpty) {\n      setNow();\n    }\n  });\n\n  return {\n    clear,\n    commitPartialTime,\n    getDateTime,\n    internalErrorMessages,\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n    modelDay,\n    modelHour,\n    modelMillisecond,\n    modelMinute,\n    modelMonth,\n    modelSecond,\n    modelTimezone,\n    modelYear,\n    now: shallowReadonly(now),\n    segmentData,\n    selectedDate,\n    selectedTime,\n    setNow,\n    setToday,\n    valueSet,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-date-time-selection.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-time-selection.ts"],"sourcesContent":["import type { Dayjs } from 'dayjs';\nimport type { ComputedRef, Ref, WritableComputedRef } from 'vue';\nimport type { SegmentData } from '@/components/date-time-picker/types';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport { dayjs } from '@/components/date-time-picker/dayjs-setup';\nimport { completePartialEntry, type PartialTimeMode } from '@/components/date-time-picker/partial-time';\nimport { buildDateTime, clampToBounds } from '@/components/date-time-picker/segment-utils';\nimport { useDateBounds } from '@/components/date-time-picker/use-date-bounds';\nimport { formatWallClock, guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n  T extends 'date' ? Date | undefined :\n    T extends 'epoch-ms' ? number | undefined :\n      T extends 'epoch' ? number | undefined :\n        Date | number | undefined;\n\ninterface DateTimeSelectionOptions<T extends DateTimeModelType> {\n  modelValue: Ref<ModelValueType<T>>;\n  type: T;\n  accuracy: TimeAccuracy;\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  allowEmpty: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** See {@link completePartialEntry}; unset, an incomplete entry is not a value. */\n  partialTime?: PartialTimeMode;\n}\n\ninterface DateTimeSelectionReturn {\n  modelYear: Ref<number | undefined>;\n  modelMonth: Ref<number | undefined>;\n  modelDay: Ref<number | undefined>;\n  modelHour: Ref<number | undefined>;\n  modelMinute: Ref<number | undefined>;\n  modelSecond: Ref<number | undefined>;\n  modelMillisecond: Ref<number | undefined>;\n  modelTimezone: Ref<string | undefined>;\n  selectedDate: WritableComputedRef<Date | undefined>;\n  selectedTime: WritableComputedRef<Date | undefined>;\n  valueSet: ComputedRef<boolean>;\n  internalErrorMessages: Readonly<Ref<string[]>>;\n  now: Readonly<Ref<Dayjs>>;\n  segmentData: SegmentData;\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  getDateTime: () => Dayjs;\n  setNow: () => void;\n  setToday: () => void;\n  commitPartialTime: () => void;\n  clear: () => void;\n  isDateValid: (date: Dayjs) => boolean;\n}\n\nconst MILLISECONDS = 1000;\n\nexport function useDateTimeSelection<T extends DateTimeModelType>(\n  options: DateTimeSelectionOptions<T>,\n): DateTimeSelectionReturn {\n  const {\n    accuracy,\n    allowEmpty,\n    dateFormat,\n    maxDate,\n    minDate,\n    modelValue,\n    partialTime,\n    type,\n  } = options;\n\n  const modelYear = ref<number | undefined>();\n  const modelMonth = ref<number | undefined>();\n  const modelDay = ref<number | undefined>();\n\n  const modelHour = ref<number | undefined>();\n  const modelMinute = ref<number | undefined>();\n  const modelSecond = ref<number | undefined>();\n  const modelMillisecond = ref<number | undefined>();\n  const modelTimezone = ref<string | undefined>(guessTimezone());\n\n  const now = ref<Dayjs>(dayjs.tz(undefined, guessTimezone()));\n\n  const { clearErrors, internalErrorMessages, isDateValid, maxAllowedDate, minAllowedDate } = useDateBounds({\n    dateFormat,\n    epochSeconds: type === 'epoch',\n    maxDate,\n    minDate,\n    now,\n  });\n\n  const segmentData: SegmentData = {\n    DD: modelDay,\n    HH: modelHour,\n    MM: modelMonth,\n    SSS: modelMillisecond,\n    YYYY: modelYear,\n    mm: modelMinute,\n    ss: modelSecond,\n  };\n\n  const selectedDate = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(modelYear) && isDefined(modelMonth) && isDefined(modelDay))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setFullYear(get(modelYear));\n      // Day 1 first, so a later month with fewer days cannot overflow into the next one\n      date.setDate(1);\n      date.setMonth(get(modelMonth) - 1);\n      date.setDate(get(modelDay));\n      return date;\n    },\n    set(value?: Date) {\n      set(modelYear, value?.getFullYear());\n      set(modelMonth, value ? value.getMonth() + 1 : undefined);\n      set(modelDay, value?.getDate());\n    },\n  });\n\n  const selectedTime = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(modelHour) && isDefined(modelMinute))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setHours(\n        get(modelHour),\n        get(modelMinute),\n        get(modelSecond) ?? 0,\n        get(modelMillisecond) ?? 0,\n      );\n      return date;\n    },\n    set(value?: Date) {\n      set(modelHour, value?.getHours());\n      set(modelMinute, value?.getMinutes());\n      set(modelSecond, value?.getSeconds());\n      set(modelMillisecond, value?.getMilliseconds());\n    },\n  });\n\n  const valueSet = computed<boolean>(() => isDefined(selectedDate) && isDefined(selectedTime));\n\n  function getDateTime(): Dayjs {\n    return buildDateTime({\n      day: get(modelDay),\n      hour: get(modelHour),\n      millisecond: get(modelMillisecond),\n      minute: get(modelMinute),\n      month: get(modelMonth),\n      second: get(modelSecond),\n      year: get(modelYear),\n    }, accuracy);\n  }\n\n  function emitUpdate(updatedModel: Dayjs): void {\n    const typeMap = {\n      'date': () => updatedModel.toDate(),\n      // an epoch is whole seconds; `millisecond` accuracy would otherwise emit a fraction\n      'epoch': () => Math.floor(updatedModel.valueOf() / MILLISECONDS),\n      'epoch-ms': () => updatedModel.valueOf(),\n    } as const;\n\n    set(modelValue, typeMap[type]() as ModelValueType<T>);\n  }\n\n  /**\n   * Writes the segments back to the model.\n   *\n   * The segments are a wall-clock reading, so they are formatted and parsed in\n   * the selected timezone. Mutating a `dayjs.tz()` built from the old value\n   * instead would keep that value's UTC offset, and moving the date across a\n   * DST boundary then shifted the time by an hour.\n   */\n  function updateModelValue(): void {\n    if (!isDefined(selectedDate) || !isDefined(selectedTime)) {\n      return;\n    }\n\n    const updatedModel = dayjs.tz(\n      formatWallClock(get(selectedDate), get(selectedTime), accuracy),\n      get(modelTimezone),\n    );\n\n    if (!isDateValid(updatedModel)) {\n      return;\n    }\n\n    emitUpdate(updatedModel);\n  }\n\n  function clear(): void {\n    clearErrors();\n    set(modelYear, undefined);\n    set(modelMonth, undefined);\n    set(modelDay, undefined);\n    set(modelHour, undefined);\n    set(modelMinute, undefined);\n    set(modelSecond, undefined);\n    set(modelMillisecond, undefined);\n    set(modelValue, undefined as ModelValueType<T>);\n  }\n\n  function clampToAllowed(date: Dayjs): Dayjs {\n    return clampToBounds(date, get(minAllowedDate), get(maxAllowedDate));\n  }\n\n  function applySegments(date: Dayjs): void {\n    set(modelYear, date.year());\n    set(modelMonth, date.month() + 1);\n    set(modelDay, date.date());\n    set(modelHour, date.hour());\n    set(modelMinute, date.minute());\n    set(modelSecond, includeSeconds(accuracy) ? date.second() : 0);\n    set(modelMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);\n  }\n\n  function setNow(): void {\n    clearErrors();\n\n    const date = dayjs();\n    set(now, date);\n    applySegments(clampToAllowed(date));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  /**\n   * Moves the date part to today and leaves the time part alone, so a picked\n   * time survives. Falls back to midnight when no time has been entered yet.\n   */\n  function setToday(): void {\n    clearErrors();\n\n    const date = dayjs();\n    set(now, date);\n\n    const target = buildDateTime({\n      day: date.date(),\n      hour: get(modelHour) ?? 0,\n      millisecond: get(modelMillisecond) ?? 0,\n      minute: get(modelMinute) ?? 0,\n      month: date.month() + 1,\n      second: get(modelSecond) ?? 0,\n      year: date.year(),\n    }, accuracy, date);\n\n    applySegments(clampToAllowed(target));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  function updateSegments(date: Dayjs): void {\n    const year = date.year();\n    const month = date.month() + 1;\n    const day = date.date();\n    const hour = date.hour();\n    const minute = date.minute();\n    const second = includeSeconds(accuracy) ? date.second() : undefined;\n    const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : undefined;\n\n    if (get(modelYear) !== year)\n      set(modelYear, year);\n    if (get(modelMonth) !== month)\n      set(modelMonth, month);\n    if (get(modelDay) !== day)\n      set(modelDay, day);\n    if (get(modelHour) !== hour)\n      set(modelHour, hour);\n    if (get(modelMinute) !== minute)\n      set(modelMinute, minute);\n    if (get(modelSecond) !== second)\n      set(modelSecond, second);\n    if (get(modelMillisecond) !== millisecond)\n      set(modelMillisecond, millisecond);\n  }\n\n  const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {\n    const currentTimezone = get(modelTimezone);\n    const newDate = dayjs.tz(newSelectedDate, currentTimezone);\n    const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);\n    const newTime = dayjs.tz(newSelectedTime, currentTimezone);\n    const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);\n\n    if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {\n      return;\n    }\n\n    set(now, dayjs());\n    updateModelValue();\n  });\n\n  /**\n   * Fills in the segments an incomplete entry never reached and commits it, so\n   * a bare date can become a value. Called when the user is done with the field\n   * rather than on every keystroke, since a segment still being typed is not\n   * yet one they left out. The fill is written back into the field, so the\n   * value it decided on is the one on screen, and into the model directly:\n   * running on blur and on enter, it would otherwise lose the value to a\n   * consumer that closes the field on that key before the watcher emits.\n   */\n  function commitPartialTime(): void {\n    if (partialTime === undefined)\n      return;\n\n    const target = completePartialEntry({\n      day: get(modelDay),\n      hour: get(modelHour),\n      millisecond: get(modelMillisecond),\n      minute: get(modelMinute),\n      month: get(modelMonth),\n      second: get(modelSecond),\n      year: get(modelYear),\n    }, {\n      accuracy,\n      maxDate: get(maxAllowedDate),\n      minDate: get(minAllowedDate),\n      mode: partialTime,\n    });\n\n    if (!target)\n      return;\n\n    ignoreUpdates(() => applySegments(target));\n    updateModelValue();\n  }\n\n  function updateInternalModel(value: ModelValueType<T>): void {\n    ignoreUpdates(() => {\n      const updatedValue = type === 'epoch' && typeof value === 'number'\n        ? value * MILLISECONDS\n        : value;\n      const date = dayjs.tz(updatedValue, get(modelTimezone));\n      isDateValid(date);\n      updateSegments(date);\n    });\n  }\n\n  watch(modelTimezone, (newTimezone: string | undefined) => {\n    if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {\n      set(now, dayjs());\n      updateModelValue();\n    }\n  });\n\n  watch(modelValue, (value) => {\n    set(now, dayjs());\n    if (value === undefined) {\n      clear();\n    }\n    else {\n      updateInternalModel(value);\n    }\n  });\n\n  onMounted(() => {\n    if (isDefined(modelValue)) {\n      updateInternalModel(get(modelValue));\n    }\n    else if (!allowEmpty) {\n      setNow();\n    }\n  });\n\n  return {\n    clear,\n    commitPartialTime,\n    getDateTime,\n    internalErrorMessages,\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n    modelDay,\n    modelHour,\n    modelMillisecond,\n    modelMinute,\n    modelMonth,\n    modelSecond,\n    modelTimezone,\n    modelYear,\n    now: shallowReadonly(now),\n    segmentData,\n    selectedDate,\n    selectedTime,\n    setNow,\n    setToday,\n    valueSet,\n  };\n}\n"],"mappings":"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"}

package/dist/components/date-time-picker/utils.d.ts

@@ -1,5 +1,4 @@
 import { TimeAccuracy } from '../../consts/time-accuracy.js';
-import './dayjs-setup.js';
 export declare function guessTimezone(): string | undefined;
 export declare function includeSeconds(accuracy: TimeAccuracy): boolean;
 export declare function includeMilliseconds(accuracy: TimeAccuracy): boolean;

package/dist/components/date-time-picker/utils.js

@@ -1,7 +1,6 @@
 import { timezones } from "./timezones.js";
 import { TimeAccuracy } from "../../consts/time-accuracy.js";
-import "./dayjs-setup.js";
-import dayjs from "dayjs";
+import { dayjs } from "./dayjs-setup.js";
 //#region src/components/date-time-picker/utils.ts
 function guessTimezone() {
 	const timezone = dayjs.tz.guess();

package/dist/components/date-time-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/date-time-picker/utils.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { timezones } from '@/components/date-time-picker/timezones';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport '@/components/date-time-picker/dayjs-setup';\n\nexport function guessTimezone() {\n  const timezone = dayjs.tz.guess();\n  return timezones.find(tz => tz === timezone);\n}\n\nexport function includeSeconds(accuracy: TimeAccuracy): boolean {\n  return accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND;\n}\n\nexport function includeMilliseconds(accuracy: TimeAccuracy): boolean {\n  return accuracy === TimeAccuracy.MILLISECOND;\n}\n\n/**\n * Formats the picked date and time as a timezone-less wall-clock reading, so it\n * can be parsed in the selected timezone and pick up that date's own UTC offset.\n */\nexport function formatWallClock(date: Date, time: Date, accuracy: TimeAccuracy): string {\n  const pad = (value: number, length = 2): string => value.toString().padStart(length, '0');\n\n  // A year being typed is briefly 2, 20 or 202, and `2-01-15T...` is a date string no parser accepts\n  const day = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n  const seconds = includeSeconds(accuracy) ? time.getSeconds() : 0;\n  const milliseconds = includeMilliseconds(accuracy) ? time.getMilliseconds() : 0;\n\n  return `${day}T${pad(time.getHours())}:${pad(time.getMinutes())}:${pad(seconds)}.${pad(milliseconds, 3)}`;\n}\n"],"mappings":";;;;;AAKA,SAAgB,gBAAgB;CAC9B,MAAM,WAAW,MAAM,GAAG,MAAM;CAChC,OAAO,UAAU,MAAK,OAAM,OAAO,QAAQ;AAC7C;AAEA,SAAgB,eAAe,UAAiC;CAC9D,OAAO,aAAa,aAAa,UAAU,aAAa,aAAa;AACvE;AAEA,SAAgB,oBAAoB,UAAiC;CACnE,OAAO,aAAa,aAAa;AACnC;;;;;AAMA,SAAgB,gBAAgB,MAAY,MAAY,UAAgC;CACtF,MAAM,OAAO,OAAe,SAAS,MAAc,MAAM,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG;CAGxF,MAAM,MAAM,GAAG,IAAI,KAAK,YAAY,GAAG,CAAC,EAAE,GAAG,IAAI,KAAK,SAAS,IAAI,CAAC,EAAE,GAAG,IAAI,KAAK,QAAQ,CAAC;CAC3F,MAAM,UAAU,eAAe,QAAQ,IAAI,KAAK,WAAW,IAAI;CAC/D,MAAM,eAAe,oBAAoB,QAAQ,IAAI,KAAK,gBAAgB,IAAI;CAE9E,OAAO,GAAG,IAAI,GAAG,IAAI,KAAK,SAAS,CAAC,EAAE,GAAG,IAAI,KAAK,WAAW,CAAC,EAAE,GAAG,IAAI,OAAO,EAAE,GAAG,IAAI,cAAc,CAAC;AACxG"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/date-time-picker/utils.ts"],"sourcesContent":["import { dayjs } from '@/components/date-time-picker/dayjs-setup';\nimport { timezones } from '@/components/date-time-picker/timezones';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\n\nexport function guessTimezone() {\n  const timezone = dayjs.tz.guess();\n  return timezones.find(tz => tz === timezone);\n}\n\nexport function includeSeconds(accuracy: TimeAccuracy): boolean {\n  return accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND;\n}\n\nexport function includeMilliseconds(accuracy: TimeAccuracy): boolean {\n  return accuracy === TimeAccuracy.MILLISECOND;\n}\n\n/**\n * Formats the picked date and time as a timezone-less wall-clock reading, so it\n * can be parsed in the selected timezone and pick up that date's own UTC offset.\n */\nexport function formatWallClock(date: Date, time: Date, accuracy: TimeAccuracy): string {\n  const pad = (value: number, length = 2): string => value.toString().padStart(length, '0');\n\n  // A year being typed is briefly 2, 20 or 202, and `2-01-15T...` is a date string no parser accepts\n  const day = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n  const seconds = includeSeconds(accuracy) ? time.getSeconds() : 0;\n  const milliseconds = includeMilliseconds(accuracy) ? time.getMilliseconds() : 0;\n\n  return `${day}T${pad(time.getHours())}:${pad(time.getMinutes())}:${pad(seconds)}.${pad(milliseconds, 3)}`;\n}\n"],"mappings":";;;;AAIA,SAAgB,gBAAgB;CAC9B,MAAM,WAAW,MAAM,GAAG,MAAM;CAChC,OAAO,UAAU,MAAK,OAAM,OAAO,QAAQ;AAC7C;AAEA,SAAgB,eAAe,UAAiC;CAC9D,OAAO,aAAa,aAAa,UAAU,aAAa,aAAa;AACvE;AAEA,SAAgB,oBAAoB,UAAiC;CACnE,OAAO,aAAa,aAAa;AACnC;;;;;AAMA,SAAgB,gBAAgB,MAAY,MAAY,UAAgC;CACtF,MAAM,OAAO,OAAe,SAAS,MAAc,MAAM,SAAS,CAAC,CAAC,SAAS,QAAQ,GAAG;CAGxF,MAAM,MAAM,GAAG,IAAI,KAAK,YAAY,GAAG,CAAC,EAAE,GAAG,IAAI,KAAK,SAAS,IAAI,CAAC,EAAE,GAAG,IAAI,KAAK,QAAQ,CAAC;CAC3F,MAAM,UAAU,eAAe,QAAQ,IAAI,KAAK,WAAW,IAAI;CAC/D,MAAM,eAAe,oBAAoB,QAAQ,IAAI,KAAK,gBAAgB,IAAI;CAE9E,OAAO,GAAG,IAAI,GAAG,IAAI,KAAK,SAAS,CAAC,EAAE,GAAG,IAAI,KAAK,WAAW,CAAC,EAAE,GAAG,IAAI,OAAO,EAAE,GAAG,IAAI,cAAc,CAAC;AACxG"}

package/dist/components/forms/auto-complete/RuiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAutoComplete.js","names":[],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { VueClassValue } from '@/types/class-value';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles, type AutoCompleteVariant } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu, { type MenuProps } from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport {\n  type GroupBy,\n  type ItemDisabled,\n  type KeyOfType,\n  useDropdownMenu,\n  useDropdownOptionProperty,\n} from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n  useAutoCompleteFocus,\n  useAutoCompleteKeyboardNavigation,\n  useAutoCompleteSearch,\n  useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { isEqual } from '@/utils/is-equal';\nimport { cn } from '@/utils/tv';\n\nexport type AutoCompleteModelValue<TValue> =\n  TValue extends Array<infer U> ? U[] : TValue | undefined;\n\nexport interface RuiAutoCompleteClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n}\n\nexport interface AutoCompleteProps<TValue, TItem> {\n  options?: TItem[];\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem;\n  disabled?: boolean;\n  loading?: boolean;\n  readOnly?: boolean;\n  dense?: boolean;\n  clearable?: boolean;\n  label?: string;\n  menuOptions?: MenuProps;\n  classNames?: RuiAutoCompleteClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: AutoCompleteVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  chips?: boolean;\n  noFilter?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  /**\n   * Custom search predicate. Receives the resolved group label as a third\n   * argument when `groupBy` is set, so callers don't have to re-run the\n   * `groupBy` resolver themselves.\n   */\n  filter?: (item: TItem, queryText: string, group?: string) => boolean;\n  hideSelected?: boolean;\n  placeholder?: string;\n  returnObject?: boolean;\n  customValue?: boolean;\n  hideCustomValue?: boolean;\n  required?: boolean;\n  hideSearchInput?: boolean;\n  hideSelectionWrapper?: boolean;\n  groupBy?: GroupBy<TItem>;\n  itemDisabled?: ItemDisabled<TItem>;\n  /**\n   * When true and `groupBy` is set, the default search predicate also matches\n   * against the resolved group label. Items belonging to a group whose label\n   * matches the query stay visible (group header included), even when the\n   * items themselves don't match. No effect when a custom `filter` is supplied\n   * or when `groupBy` is undefined.\n   */\n  searchIncludesGroupLabel?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiAutoComplete',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n  options = [],\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  chips = false,\n  label = 'Select',\n  menuOptions,\n  classNames,\n  labelClass,\n  menuClass,\n  variant = 'default',\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  prependWidth,\n  appendWidth,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  noFilter = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  filter,\n  hideSelected = false,\n  placeholder = '',\n  returnObject = false,\n  customValue = false,\n  hideCustomValue = false,\n  required = false,\n  hideSearchInput = false,\n  hideSelectionWrapper = false,\n  groupBy,\n  itemDisabled,\n  searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem[];\n    variant: string;\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'activator.label'?: (props: { value: TItem[] }) => any;\n  'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n  'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'no-data'?: () => any;\n  'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n  'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n  set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\nconst { focused: activatorFocused } = useFocus(activator);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  () => options,\n  searchInputModel,\n  {\n    keyAttr: () => keyAttr,\n    textAttr: () => textAttr,\n    noFilter: () => noFilter,\n    filter: () => filter,\n    customValue: () => customValue,\n    hideCustomValue: () => hideCustomValue,\n    returnObject: () => returnObject,\n    groupBy: () => groupBy,\n    searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n  },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n  () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { resolveIn, value, setSelected } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  () => options,\n  {\n    keyAttr: () => keyAttr,\n    returnObject: () => returnObject,\n    customValue: () => customValue,\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen,\n    multiple,\n    updateInternalSearch,\n  },\n);\n\nconst resolvedItemHeight = itemHeight ?? (dense ? 30 : 48);\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n  modelUserNavigated,\n  groupedOptions,\n  isGrouped,\n  isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: resolvedItemHeight,\n  keyAttr,\n  textAttr,\n  options: filteredOptions,\n  dense: () => dense,\n  value,\n  menuRef,\n  setValue,\n  autoSelectFirst,\n  hideSelected,\n  isOpen,\n  getText,\n  getIdentifier,\n  groupBy: () => groupBy,\n  itemDisabled: () => itemDisabled,\n  prependWidth,\n  appendWidth,\n});\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    chips: () => chips,\n    customValue: () => customValue,\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear,\n    filteredOptions,\n    getText,\n    highlightedIndex: modelHighlightedIndex,\n    internalSearch,\n    isOpen,\n    removeValue: (item: TItem): void => { setValue(item); },\n    searchInputFocused,\n    setSearchAsValue,\n    userNavigated: modelUserNavigated,\n    value,\n  },\n);\n\nconst {\n  anyFocused: focusAnyFocused,\n  inputClass: focusInputClass,\n  onActivatorFocused: focusOnActivatorFocused,\n  onInputFocused: focusOnInputFocused,\n  setInputFocus: focusSetInputFocus,\n} = useAutoCompleteFocus(\n  {\n    customValue: () => customValue,\n    disabled: () => disabled,\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocused,\n    activatorFocusedWithin,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue,\n    textInput,\n    updateInternalSearch,\n  },\n);\n\nconst menuMinHeight = computed<number>(\n  () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\n/**\n * True while the consumer's `#placeholder` slot holds the resting content\n * area, where the resting label would overlap it and so hides instead.\n */\nconst placeholderSlotActive = computed<boolean>(() => Boolean(slots.placeholder) && !get(valueSet) && !get(searchInputFocused));\n\nconst usedPlaceholder = computed<string>(() => {\n  if (get(searchInputFocused))\n    return placeholder;\n  return '';\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || get(valueSet) || get(searchInputFocused)) && get(outlined));\n\nconst legendText = computed<string>(() => {\n  if (!get(float) || !label)\n    return '';\n  return required ? `${label} ﹡` : label;\n});\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\n  showLabel: !!get(legendText),\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  set(isOpen, true);\n  updateInternalSearch(value);\n  set(justOpened, false);\n}\n\nasync function setValue(val: TItem, skipRefocused = false): Promise<void> {\n  const isMultiple = get(multiple);\n\n  if (isMultiple) {\n    const newValue = [...get(value)];\n    const indexInValue = itemIndexInValue(val);\n    if (indexInValue === -1) {\n      updateInternalSearch();\n      newValue.push(val);\n    }\n    else {\n      newValue.splice(indexInValue, 1);\n    }\n    set(value, newValue);\n  }\n  else {\n    if (get(shouldApplyValueAsSearch))\n      updateInternalSearch(getText(val));\n    else updateInternalSearch();\n\n    set(value, [val]);\n  }\n\n  if (!isMultiple) {\n    if (!skipRefocused) {\n      set(activatorFocused, true);\n      get(activator)?.focus();\n      await nextTick(() => {\n        set(isOpen, false);\n      });\n    }\n    else {\n      set(isOpen, false);\n    }\n  }\n  else if (!skipRefocused) {\n    set(searchInputFocused, true);\n  }\n}\n\nfunction setSearchAsValue(): void {\n  const searchToBeValue = get(internalSearch);\n  if (!searchToBeValue)\n    return;\n\n  const newValue: TItem = textValueToProperValue(searchToBeValue);\n  setValue(newValue, true);\n}\n\nfunction clear(): void {\n  updateInternalSearch();\n  set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>);\n}\n\nfunction chipAttrs(item: TItem, index: number): Record<string, unknown> {\n  return {\n    'data-index': index,\n    'data-value': getIdentifier(item),\n    'onKeydown': (event: KeyboardEvent): void => {\n      const { key } = event;\n      if (['Backspace', 'Delete'].includes(key)) {\n        event.stopPropagation();\n        event.preventDefault();\n        // Alt + delete restores the chip as search text, which only helps where custom values are accepted\n        if (event.altKey && customValue) {\n          const text = getText(item) ?? '';\n          setValue(item);\n          updateInternalSearch(text);\n        }\n        else {\n          setValue(item);\n        }\n      }\n    },\n    'onClick': (e: MouseEvent): void => {\n      e.stopPropagation();\n      setValueFocus(index);\n    },\n    'onClick:close': (): void => {\n      setValue(item);\n    },\n  };\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n  set(searchInputFocused, true);\n  get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nfunction openMenu(): void {\n  set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n  set(isOpen, false);\n}\n\n/**\n * Reconciles the selection against a new set of options, comparing by\n * reference before by value so an unchanged list costs nothing.\n *\n * Only a selection the previous options could resolve is reconciled: a value\n * that was already unresolvable is one the consumer set before its options\n * arrived, since an async list starts empty, and clearing it here would\n * discard a legitimate value.\n */\nfunction onOptionsChanged(curr: TItem[], old: TItem[]): void {\n  if (curr === old || customValue || isEqual(curr, old))\n    return;\n\n  if (!get(multiple) && resolveIn(old).length === 0)\n    return;\n\n  setSelected(get(value));\n}\n\nwatch(() => options, onOptionsChanged);\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n\ndefineExpose({\n  closeMenu,\n  focus: focusSetInputFocus,\n  openMenu,\n  setSelectionRange,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :options=\"menuFloatingOptions\"\n    :close-on-content-click=\"false\"\n    full-width\n    persist-on-activator-click\n    :menu-class=\"[\n      { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n      menuOptions?.menuClass,\n    ]\"\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n  >\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, variant, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <div\n          ref=\"activator\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs, ['onClick', 'class']),\n            ...(readOnly ? {} : attrs),\n          }\"\n          role=\"combobox\"\n          :aria-expanded=\"open\"\n          :aria-disabled=\"disabled || undefined\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @click=\"focusSetInputFocus()\"\n          @focus=\"focusOnActivatorFocused()\"\n          @keydown.enter=\"onEnter($event)\"\n          @keydown.tab=\"onTab($event)\"\n          @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n          @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n        >\n          <span\n            v-if=\"(outlined || (!valueSet && !searchInputFocused)) && !placeholderSlotActive\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !valueSet && !open && outlined },\n            ]\"\n          >\n            <slot\n              name=\"activator.label\"\n              v-bind=\"{ value }\"\n            >\n              {{ label }}\n            </slot>\n            <span\n              v-if=\"required\"\n              :class=\"ui.required()\"\n            >\n              ﹡\n            </span>\n          </span>\n          <div\n            data-id=\"value\"\n            :class=\"ui.value()\"\n          >\n            <!--\n              Placeholder slot occupies the same flex space the input takes\n              when focused, so transitioning into the focused state doesn't\n              shift the activator's content. pointer-events-none is required\n              so clicks pass through to the activator (otherwise the slot\n              swallows the first click and the menu needs two taps to open).\n            -->\n            <div\n              v-if=\"!valueSet && !searchInputFocused && slots.placeholder\"\n              data-id=\"placeholder\"\n              class=\"flex-1 min-w-0 pointer-events-none\"\n            >\n              <slot\n                name=\"placeholder\"\n                v-bind=\"{ disabled, readOnly }\"\n              />\n            </div>\n            <RuiAutoCompleteSelection\n              :items=\"value\"\n              :chips=\"chips\"\n              :dense=\"dense\"\n              :multiple=\"multiple\"\n              :search-input-focused=\"searchInputFocused\"\n              :hide-selection-wrapper=\"hideSelectionWrapper\"\n              :get-identifier=\"getIdentifier\"\n              :get-text=\"getText\"\n              :chip-attrs=\"chipAttrs\"\n            >\n              <template\n                v-if=\"slots['selection.prepend']\"\n                #prepend=\"slotProps\"\n              >\n                <slot\n                  name=\"selection.prepend\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n              <template\n                v-if=\"slots.selection\"\n                #default=\"slotProps\"\n              >\n                <slot\n                  name=\"selection\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n            </RuiAutoCompleteSelection>\n            <input\n              ref=\"textInput\"\n              :disabled=\"disabled\"\n              :value=\"internalSearch\"\n              class=\"bg-transparent outline-none\"\n              type=\"text\"\n              :placeholder=\"usedPlaceholder\"\n              :class=\"[focusInputClass, { hidden: hideSearchInput }]\"\n              :aria-invalid=\"hasError\"\n              aria-autocomplete=\"list\"\n              @keydown.delete=\"onInputDeletePressed()\"\n              @input.stop=\"updateSearchInput($event)\"\n              @focus=\"focusOnInputFocused()\"\n            />\n          </div>\n\n          <RuiButton\n            v-if=\"clearable && valueSet && !disabled\"\n            variant=\"text\"\n            icon\n            size=\"sm\"\n            tabindex=\"-1\"\n            color=\"error\"\n            data-id=\"clear\"\n            :class=\"[\n              ui.clear(),\n              focusAnyFocused && '!visible',\n              { 'mr-2': !dense },\n            ]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </RuiButton>\n\n          <span\n            :class=\"ui.iconWrapper()\"\n            @click=\"arrowClicked($event)\"\n          >\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 24\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"3\"\n            variant=\"indeterminate\"\n          />\n        </div>\n        <fieldset\n          v-if=\"outlined\"\n          :class=\"ui.fieldset()\"\n        >\n          <legend :class=\"ui.legend()\">\n            {{ legendText }}\n          </legend>\n        </fieldset>\n      </slot>\n    </template>\n    <template #default=\"{ width }\">\n      <div ref=\"menuWrapperRef\">\n        <RuiAutoCompleteOptionList\n          v-if=\"optionsWithSelectedHidden.length > 0\"\n          :container-props=\"containerProps\"\n          :wrapper-props=\"wrapperProps\"\n          :set-menu-ref=\"setMenuRef\"\n          :is-grouped=\"isGrouped\"\n          :grouped-options=\"groupedOptions\"\n          :rendered-data=\"renderedData\"\n          :options=\"optionsWithSelectedHidden\"\n          :highlighted-index=\"modelHighlightedIndex\"\n          :highlighted-class=\"highlightedClass\"\n          :dense=\"dense\"\n          :menu-class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n          :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n          :get-identifier=\"getIdentifier\"\n          :get-text=\"getText\"\n          :is-active-item=\"isActiveItem\"\n          :is-item-disabled=\"isItemDisabled\"\n          @select=\"setValue($event)\"\n          @move-highlight=\"moveHighlight($event)\"\n        >\n          <template\n            v-if=\"slots['group-header']\"\n            #group-header=\"slotProps\"\n          >\n            <slot\n              name=\"group-header\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.prepend']\"\n            #item.prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots.item\"\n            #item=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.append']\"\n            #item.append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOptionList>\n\n        <div\n          v-else-if=\"!hideNoData\"\n          :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n          :class=\"classNames?.menu ?? menuClass\"\n        >\n          <slot name=\"no-data\">\n            <div\n              v-if=\"!customValue\"\n              class=\"p-4\"\n              data-id=\"no-data\"\n            >\n              {{ noDataText }}\n            </div>\n          </slot>\n        </div>\n        <!--\n          The scroll container above reserves ~15px on the right for the\n          scrollbar gutter. We render an equivalent right-padding here so the\n          footer's content aligns with the option rows' content rather than\n          the menu's outer edge. `pr-[var(--rui-scrollbar-gutter,15px)]`\n          lets consumers override if their theme reserves a different width.\n        -->\n        <div\n          v-if=\"slots.footer\"\n          class=\"bg-white dark:bg-rui-grey-900 border-t border-black/[0.12] dark:border-white/[0.12] pr-[var(--rui-scrollbar-gutter,15px)] -mb-2\"\n          data-id=\"footer\"\n        >\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAutoComplete.js","names":[],"sources":["../../../../src/components/forms/auto-complete/RuiAutoComplete.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"TValue, TItem\">\nimport type { AutoCompleteModelValue, AutoCompleteProps } from '@/components/forms/auto-complete/auto-complete-props';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { autoCompleteStyles } from '@/components/forms/auto-complete/auto-complete-styles';\nimport RuiAutoCompleteOptionList from '@/components/forms/auto-complete/RuiAutoCompleteOptionList.vue';\nimport RuiAutoCompleteSelection from '@/components/forms/auto-complete/RuiAutoCompleteSelection.vue';\nimport RuiFieldLabel from '@/components/forms/field-label/RuiFieldLabel.vue';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { activatorHandlers } from '@/components/overlays/menu/activator-handlers';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { useLabelPlacement } from '@/composables/defaults/field';\nimport { getOptionHeight, useDropdownMenu, useDropdownOptionProperty } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport {\n  splitAriaAttrs,\n  useAutoCompleteChips,\n  useAutoCompleteCombobox,\n  useAutoCompleteFocus,\n  useAutoCompleteKeyboardNavigation,\n  useAutoCompleteSearch,\n  useAutoCompleteSelection,\n  useAutoCompleteValue,\n} from '@/composables/forms/auto-complete';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\ndefineOptions({\n  name: 'RuiAutoComplete',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<AutoCompleteModelValue<TValue>>({ required: true });\n\nconst searchInputModel = defineModel<string>('searchInput', { default: '' });\n\nconst {\n  options = [],\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = false,\n  chips = false,\n  label = 'Select',\n  labelPlacement = undefined,\n  menuOptions,\n  classNames,\n  prependIcon,\n  hideArrow = false,\n  hint,\n  keyAttr,\n  textAttr,\n  itemHeight,\n  prependWidth,\n  appendWidth,\n  errorMessages = [],\n  successMessages = [],\n  autoSelectFirst = false,\n  noFilter = false,\n  hideNoData = false,\n  noDataText = 'No data available',\n  filter,\n  hideSelected = false,\n  placeholder = '',\n  returnObject = false,\n  customValue = false,\n  hideCustomValue = false,\n  required = false,\n  hideSearchInput = false,\n  hideSelectionWrapper = false,\n  groupBy,\n  itemDisabled,\n  searchIncludesGroupLabel = false,\n} = defineProps<AutoCompleteProps<TValue, TItem>>();\n\nconst slots = defineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem[];\n    readOnly: boolean;\n    attrs: Record<string, unknown>;\n    open: boolean;\n    hasError: boolean;\n    hasSuccess: boolean;\n  }) => any;\n  'selection.prepend'?: (props: { index: number; item: TItem }) => any;\n  'selection'?: (props: { index: number; item: TItem; chipAttrs: Record<string, unknown> }) => any;\n  'item.prepend'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'item.append'?: (props: { disabled: boolean; item: TItem; active: boolean }) => any;\n  'group-header'?: (props: { group: string; items: TItem[] }) => any;\n  'no-data'?: () => any;\n  'placeholder'?: (props: { disabled: boolean; readOnly: boolean }) => any;\n  'footer'?: () => any;\n}>();\n\nconst { getText, getIdentifier } = useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n});\n\nconst textInput = useTemplateRef<HTMLInputElement>('textInput');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\n// Owned by the option list, so it arrives through a ref callback rather than this template\nconst menuRef = shallowRef<HTMLElement | null>(null);\n\nfunction setMenuRef(element: Element | ComponentPublicInstance | null): void {\n  set(menuRef, element instanceof HTMLElement ? element : null);\n}\nconst menuWrapperRef = useTemplateRef<HTMLDivElement>('menuWrapperRef');\n\nconst { focused: activatorFocusedWithin } = useFocusWithin(activator);\nconst { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);\nconst { focused: searchInputFocused } = useFocus(textInput);\n\nconst {\n  internalSearch,\n  filteredOptions,\n  justOpened,\n  updateInternalSearch,\n  textValueToProperValue,\n} = useAutoCompleteSearch<TItem>(\n  () => options,\n  searchInputModel,\n  {\n    keyAttr: () => keyAttr,\n    textAttr: () => textAttr,\n    noFilter: () => noFilter,\n    filter: () => filter,\n    customValue: () => customValue,\n    hideCustomValue: () => hideCustomValue,\n    returnObject: () => returnObject,\n    groupBy: () => groupBy,\n    searchIncludesGroupLabel: () => searchIncludesGroupLabel,\n  },\n);\n\nconst isOpen = ref<boolean>(false);\nconst isHovered = ref<boolean>(false);\n\n// Calculate multiple from modelValue directly to avoid circular dependency\nconst multiple = computed<boolean>(() => Array.isArray(get(modelValue)));\n\nconst shouldApplyValueAsSearch = computed<boolean>(\n  () => !(slots.selection || get(multiple) || chips),\n);\n\nconst { value } = useAutoCompleteValue<AutoCompleteModelValue<TValue>, TItem>(\n  modelValue,\n  () => options,\n  {\n    keyAttr: () => keyAttr,\n    returnObject: () => returnObject,\n    customValue: () => customValue,\n  },\n  {\n    getIdentifier,\n    getText,\n    textValueToProperValue,\n    shouldApplyValueAsSearch,\n    isOpen,\n    multiple,\n    updateInternalSearch,\n  },\n);\n\nconst resolvedItemHeight = itemHeight ?? getOptionHeight(dense);\n\n/* eslint-disable @typescript-eslint/no-use-before-define -- these call the selection composable below, which needs their helpers; the calls run after setup */\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  menuWidth,\n  isActiveItem,\n  itemIndexInValue,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  optionsWithSelectedHidden,\n  modelUserNavigated,\n  groupedOptions,\n  isGrouped,\n  isItemDisabled,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: resolvedItemHeight,\n  keyAttr,\n  textAttr,\n  options: filteredOptions,\n  dense: () => dense,\n  value,\n  menuRef,\n  setValue: (item: TItem): void => { setValue(item); },\n  autoSelectFirst,\n  hideSelected,\n  isOpen,\n  getText,\n  getIdentifier,\n  groupBy: () => groupBy,\n  itemDisabled: () => itemDisabled,\n  prependWidth,\n  appendWidth,\n});\n\nconst {\n  focusedValueIndex,\n  moveSelectedValueHighlight,\n  onEnter,\n  onInputDeletePressed,\n  onInputKeydown,\n  onTab,\n  setValueFocus,\n} = useAutoCompleteKeyboardNavigation<TItem>(\n  {\n    chips: () => chips,\n    customValue: () => customValue,\n    multiple,\n  },\n  {\n    activator,\n    applyHighlighted,\n    clear: (): void => clear(),\n    filteredOptions,\n    getText,\n    highlightedIndex: modelHighlightedIndex,\n    internalSearch,\n    isOpen,\n    removeValue: (item: TItem): void => { setValue(item); },\n    searchInputFocused,\n    setSearchAsValue: (): void => setSearchAsValue(),\n    updateInternalSearch,\n    userNavigated: modelUserNavigated,\n    value,\n  },\n);\n\nconst { chipAttrs, selectChip } = useAutoCompleteChips<TItem>({\n  focusInput: (): void => get(textInput)?.focus(),\n  getIdentifier,\n  setValue: (item: TItem): void => { setValue(item); },\n  setValueFocus,\n});\n\n/** The selected chip's text, read out by the live region so the selection is heard, not only seen. */\nconst selectedChipAnnouncement = computed<string>(() => {\n  const item = get(value)[get(focusedValueIndex)];\n  return chips && item !== undefined ? `${getText(item) ?? ''}, press Backspace to remove` : '';\n});\n\nconst {\n  anyFocused: focusAnyFocused,\n  editing,\n  inputClass: focusInputClass,\n  onInputFocused: focusOnInputFocused,\n  onSettledKeydown,\n  setInputFocus: focusSetInputFocus,\n  settleOnInput,\n  unsettle,\n} = useAutoCompleteFocus(\n  {\n    customValue: () => customValue,\n    disabled: () => disabled,\n    shouldApplyValueAsSearch,\n  },\n  {\n    activatorFocusedWithin,\n    focusedValueIndex,\n    internalSearch,\n    isOpen,\n    justOpened,\n    menuWrapperFocusedWithin,\n    searchInputFocused,\n    setSearchAsValue: (): void => setSearchAsValue(),\n    textInput,\n    updateInternalSearch,\n  },\n);\n\n/* eslint-enable @typescript-eslint/no-use-before-define -- the wiring above ends here */\n\nconst { clear, setSearchAsValue, setValue } = useAutoCompleteSelection<TItem>({\n  getText,\n  internalSearch,\n  isOpen,\n  itemIndexInValue,\n  multiple,\n  resetModel: (): void => set(modelValue, (Array.isArray(get(modelValue)) ? [] : undefined) as AutoCompleteModelValue<TValue>),\n  searchInputFocused,\n  settleOnInput,\n  shouldApplyValueAsSearch,\n  textValueToProperValue,\n  updateInternalSearch,\n  value,\n});\n\nconst menuMinHeight = computed<number>(\n  () => Math.min(5, get(optionsWithSelectedHidden).length) * resolvedItemHeight,\n);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst valueSet = computed<boolean>(() => get(value).length > 0);\n\nconst usedPlaceholder = computed<string>(() => {\n  if (get(editing))\n    return placeholder;\n  return '';\n});\n\nconst labelId = useId();\nconst placement = useLabelPlacement(() => labelPlacement);\nconst { activeDescendant, optionIdPrefix } = useAutoCompleteCombobox(isOpen, modelHighlightedIndex);\n\n// An empty, unfocused field shows the placeholder where the collapsed search input sits\nconst restingPlaceholder = computed<boolean>(() =>\n  !!placeholder && !get(valueSet) && !get(editing) && !slots.placeholder,\n);\n\nconst ui = computed<ReturnType<typeof autoCompleteStyles>>(() => autoCompleteStyles({\n  opened: get(isOpen),\n  hovered: get(isHovered),\n  dense,\n  disabled,\n  readonly: readOnly,\n  hasError: get(hasError),\n  hasSuccess: get(hasSuccess) && !get(hasError),\n}));\n\nconst highlightedClass = autoCompleteStyles({}).highlighted();\n\nfunction updateSearchInput(event: Event): void {\n  const target = event.target;\n  if (!(target instanceof HTMLInputElement))\n    return;\n\n  const value = target.value;\n  unsettle();\n  set(isOpen, true);\n  updateInternalSearch(value);\n  set(justOpened, false);\n}\n\n/**\n * Moves the highlight through the options, which also leaves the picked-value display for a search.\n *\n * @param up - whether to move towards the first option\n */\nfunction onArrow(up: boolean): void {\n  unsettle();\n  moveHighlight(up);\n}\n\nfunction setSelectionRange(start: number, end: number): void {\n  set(searchInputFocused, true);\n  get(textInput)?.setSelectionRange?.(start, end);\n}\n\nfunction arrowClicked(event: MouseEvent): void {\n  if (get(isOpen)) {\n    set(isOpen, false);\n    event.stopPropagation();\n  }\n}\n\nfunction openMenu(): void {\n  set(isOpen, true);\n}\n\nfunction closeMenu(): void {\n  set(isOpen, false);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\n}));\n\ndefineExpose({\n  closeMenu,\n  focus: focusSetInputFocus,\n  openMenu,\n  setSelectionRange,\n});\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"isOpen\"\n    v-bind=\"{ ...getRootAttrs($attrs, []), ...menuOptions }\"\n    :class=\"ui.wrapper({ class: cn($attrs.class) })\"\n    :class-names=\"{\n      ...menuOptions?.classNames,\n      details: ['px-0', cn(menuOptions?.classNames?.details) ?? ''],\n      menu: [\n        { hidden: optionsWithSelectedHidden.length === 0 && customValue && !slots['no-data'] },\n        cn(menuOptions?.classNames?.menu) ?? '',\n      ],\n    }\"\n    :options=\"menuFloatingOptions\"\n    :close-on-content-click=\"false\"\n    full-width\n    persist-on-activator-click\n    :error-messages=\"errorMessages\"\n    :success-messages=\"successMessages\"\n    :hint=\"hint\"\n    :dense=\"dense\"\n    :show-details=\"!hideDetails\"\n    :disabled=\"disabled\"\n    disable-auto-focus\n    role=\"listbox\"\n  >\n    <template\n      v-if=\"label\"\n      #label\n    >\n      <RuiFieldLabel\n        :id=\"labelId\"\n        :text=\"label\"\n        :hidden=\"placement === 'hidden'\"\n        :required=\"required\"\n        :disabled=\"disabled\"\n      />\n    </template>\n    <template #activator=\"{ attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\">\n      <slot\n        name=\"activator\"\n        v-bind=\"{ disabled, value, readOnly, attrs, open, hasError: slotHasError, hasSuccess: slotHasSuccess }\"\n      >\n        <!--\n          The visual box: it takes clicks and the keys that bubble from the input and the chips, but\n          is no tab stop and carries no role. The input inside is the combobox (ARIA 1.2), so the\n          chips sit beside it rather than nested in it.\n        -->\n        <div\n          ref=\"activator\"\n          :class=\"ui.activator({ class: cn([hideArrow && 'pr-3', classNames?.label]) })\"\n          v-bind=\"{\n            ...splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), false),\n            ...(readOnly ? {} : activatorHandlers(attrs)),\n          }\"\n          data-id=\"activator\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @click=\"focusSetInputFocus()\"\n          @keydown.enter=\"onEnter($event)\"\n          @keydown.tab=\"onTab($event)\"\n          @keydown.left=\"moveSelectedValueHighlight($event, false)\"\n          @keydown.right=\"moveSelectedValueHighlight($event, true)\"\n          @keydown.up.prevent=\"onArrow(true)\"\n          @keydown.down.prevent=\"onArrow(false)\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = optionsWithSelectedHidden.length - 1\"\n        >\n          <span\n            v-if=\"prependIcon\"\n            :class=\"ui.prepend()\"\n            data-id=\"prepend\"\n          >\n            <RuiIcon\n              :name=\"prependIcon\"\n              :size=\"dense ? 16 : 18\"\n            />\n          </span>\n          <div\n            data-id=\"value\"\n            :class=\"ui.value()\"\n          >\n            <!--\n              Placeholder slot occupies the same flex space the input takes\n              when focused, so transitioning into the focused state doesn't\n              shift the activator's content. pointer-events-none is required\n              so clicks pass through to the activator (otherwise the slot\n              swallows the first click and the menu needs two taps to open).\n            -->\n            <span\n              v-if=\"restingPlaceholder\"\n              data-id=\"resting-placeholder\"\n              class=\"truncate text-rui-text-secondary pointer-events-none\"\n            >\n              {{ placeholder }}\n            </span>\n            <div\n              v-if=\"!valueSet && !editing && slots.placeholder\"\n              data-id=\"placeholder\"\n              class=\"flex-1 min-w-0 pointer-events-none\"\n            >\n              <slot\n                name=\"placeholder\"\n                v-bind=\"{ disabled, readOnly }\"\n              />\n            </div>\n            <RuiAutoCompleteSelection\n              :items=\"value\"\n              :chips=\"chips\"\n              :dense=\"dense\"\n              :multiple=\"multiple\"\n              :search-input-focused=\"editing\"\n              :hide-selection-wrapper=\"hideSelectionWrapper\"\n              :get-identifier=\"getIdentifier\"\n              :get-text=\"getText\"\n              :chip-attrs=\"chipAttrs\"\n              :selected-index=\"focusedValueIndex\"\n              :select-chip=\"selectChip\"\n            >\n              <template\n                v-if=\"slots['selection.prepend']\"\n                #prepend=\"slotProps\"\n              >\n                <slot\n                  name=\"selection.prepend\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n              <template\n                v-if=\"slots.selection\"\n                #default=\"slotProps\"\n              >\n                <slot\n                  name=\"selection\"\n                  v-bind=\"slotProps\"\n                />\n              </template>\n            </RuiAutoCompleteSelection>\n            <!-- with hideSearchInput the input stays as a collapsed, read-only combobox, so the field keeps a focus target -->\n            <input\n              ref=\"textInput\"\n              :disabled=\"disabled\"\n              :readonly=\"readOnly || hideSearchInput\"\n              :value=\"internalSearch\"\n              class=\"bg-transparent outline-hidden\"\n              type=\"text\"\n              :placeholder=\"usedPlaceholder\"\n              :class=\"hideSearchInput ? 'w-0 h-0 min-w-0 opacity-0' : focusInputClass\"\n              role=\"combobox\"\n              :tabindex=\"readOnly ? -1 : undefined\"\n              :aria-labelledby=\"label ? labelId : undefined\"\n              :aria-expanded=\"open\"\n              aria-haspopup=\"listbox\"\n              :aria-controls=\"attrs['aria-controls']\"\n              :aria-activedescendant=\"activeDescendant\"\n              :aria-readonly=\"readOnly || undefined\"\n              :aria-required=\"required || undefined\"\n              :aria-busy=\"loading || undefined\"\n              :aria-invalid=\"hasError\"\n              aria-autocomplete=\"list\"\n              data-id=\"search-input\"\n              v-bind=\"splitAriaAttrs(getNonRootAttrs($attrs, ['onClick', 'class']), true)\"\n              @keydown=\"onSettledKeydown($event); onInputKeydown($event)\"\n              @keydown.delete=\"onInputDeletePressed($event)\"\n              @input.stop=\"updateSearchInput($event)\"\n              @focus=\"focusOnInputFocused()\"\n            />\n            <span\n              class=\"sr-only\"\n              aria-live=\"polite\"\n            >\n              {{ selectedChipAnnouncement }}\n            </span>\n          </div>\n\n          <RuiButton\n            v-if=\"clearable && valueSet && !disabled && !readOnly\"\n            variant=\"text\"\n            icon\n            size=\"sm\"\n            tabindex=\"-1\"\n            data-id=\"clear\"\n            aria-label=\"Clear\"\n            :class=\"[\n              ui.clear(),\n              focusAnyFocused && 'visible!',\n              { 'mr-2': !dense },\n            ]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              name=\"lu-x\"\n              size=\"16\"\n            />\n          </RuiButton>\n\n          <span\n            v-if=\"!hideArrow\"\n            :class=\"ui.iconWrapper()\"\n            @click=\"arrowClicked($event)\"\n          >\n            <RuiIcon\n              :class=\"ui.icon()\"\n              :size=\"dense ? 16 : 20\"\n              name=\"lu-chevron-down\"\n            />\n          </span>\n\n          <RuiProgress\n            v-if=\"loading\"\n            :class=\"ui.progress()\"\n            color=\"primary\"\n            thickness=\"2\"\n            variant=\"indeterminate\"\n          />\n        </div>\n        <fieldset :class=\"ui.fieldset()\" />\n      </slot>\n    </template>\n    <template #default=\"{ width }\">\n      <div ref=\"menuWrapperRef\">\n        <RuiAutoCompleteOptionList\n          v-if=\"optionsWithSelectedHidden.length > 0\"\n          :container-props=\"containerProps\"\n          :wrapper-props=\"wrapperProps\"\n          :set-menu-ref=\"setMenuRef\"\n          :is-grouped=\"isGrouped\"\n          :grouped-options=\"groupedOptions\"\n          :rendered-data=\"renderedData\"\n          :options=\"optionsWithSelectedHidden\"\n          :highlighted-index=\"modelHighlightedIndex\"\n          :highlighted-class=\"highlightedClass\"\n          :dense=\"dense\"\n          :menu-class=\"ui.menu({ class: cn(classNames?.menu) })\"\n          :menu-style=\"{ width: `${width}px`, minWidth: menuWidth, minHeight: `${menuMinHeight}px` }\"\n          :get-identifier=\"getIdentifier\"\n          :get-text=\"getText\"\n          :is-active-item=\"isActiveItem\"\n          :is-item-disabled=\"isItemDisabled\"\n          :option-id-prefix=\"optionIdPrefix\"\n          @select=\"setValue($event)\"\n          @move-highlight=\"moveHighlight($event)\"\n        >\n          <template\n            v-if=\"slots['group-header']\"\n            #group-header=\"slotProps\"\n          >\n            <slot\n              name=\"group-header\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.prepend']\"\n            #item.prepend=\"slotProps\"\n          >\n            <slot\n              name=\"item.prepend\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots.item\"\n            #item=\"slotProps\"\n          >\n            <slot\n              name=\"item\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n          <template\n            v-if=\"slots['item.append']\"\n            #item.append=\"slotProps\"\n          >\n            <slot\n              name=\"item.append\"\n              v-bind=\"slotProps\"\n            />\n          </template>\n        </RuiAutoCompleteOptionList>\n\n        <div\n          v-else-if=\"!hideNoData\"\n          :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n          :class=\"classNames?.menu\"\n        >\n          <slot name=\"no-data\">\n            <div\n              v-if=\"!customValue\"\n              class=\"p-4\"\n              data-id=\"no-data\"\n            >\n              {{ noDataText }}\n            </div>\n          </slot>\n        </div>\n        <!--\n          The scroll container above reserves ~15px on the right for the\n          scrollbar gutter. We render an equivalent right-padding here so the\n          footer's content aligns with the option rows' content rather than\n          the menu's outer edge. `pr-(--rui-scrollbar-gutter,15px)`\n          lets consumers override if their theme reserves a different width.\n        -->\n        <div\n          v-if=\"slots.footer\"\n          class=\"bg-rui-menu border-t border-rui-divider pr-(--rui-scrollbar-gutter,15px) -mb-2\"\n          data-id=\"footer\"\n        >\n          <slot name=\"footer\" />\n        </div>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

package/dist/components/forms/auto-complete/RuiAutoComplete.vue.d.ts

@@ -1,67 +1,4 @@
-import type { VueClassValue } from '../../../types/class-value';
-import { type AutoCompleteVariant } from './auto-complete-styles.js';
-import { type MenuProps } from '../../overlays/menu/RuiMenu.vue';
-import { type GroupBy, type ItemDisabled, type KeyOfType } from '../../../composables/dropdown-menu.js';
-export type AutoCompleteModelValue<TValue> = TValue extends Array<infer U> ? U[] : TValue | undefined;
-export interface RuiAutoCompleteClassNames {
-    root?: VueClassValue;
-    label?: VueClassValue;
-    menu?: VueClassValue;
-}
-export interface AutoCompleteProps<TValue, TItem> {
-    options?: TItem[];
-    keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
-    textAttr?: keyof TItem;
-    disabled?: boolean;
-    loading?: boolean;
-    readOnly?: boolean;
-    dense?: boolean;
-    clearable?: boolean;
-    label?: string;
-    menuOptions?: MenuProps;
-    classNames?: RuiAutoCompleteClassNames;
-    /** @deprecated Use `classNames.label` instead */
-    labelClass?: string;
-    /** @deprecated Use `classNames.menu` instead */
-    menuClass?: string;
-    prependWidth?: number;
-    appendWidth?: number;
-    itemHeight?: number;
-    variant?: AutoCompleteVariant;
-    hint?: string;
-    errorMessages?: string | string[];
-    successMessages?: string | string[];
-    hideDetails?: boolean;
-    autoSelectFirst?: boolean;
-    chips?: boolean;
-    noFilter?: boolean;
-    hideNoData?: boolean;
-    noDataText?: string;
-    /**
-     * Custom search predicate. Receives the resolved group label as a third
-     * argument when `groupBy` is set, so callers don't have to re-run the
-     * `groupBy` resolver themselves.
-     */
-    filter?: (item: TItem, queryText: string, group?: string) => boolean;
-    hideSelected?: boolean;
-    placeholder?: string;
-    returnObject?: boolean;
-    customValue?: boolean;
-    hideCustomValue?: boolean;
-    required?: boolean;
-    hideSearchInput?: boolean;
-    hideSelectionWrapper?: boolean;
-    groupBy?: GroupBy<TItem>;
-    itemDisabled?: ItemDisabled<TItem>;
-    /**
-     * When true and `groupBy` is set, the default search predicate also matches
-     * against the resolved group label. Items belonging to a group whose label
-     * matches the query stay visible (group header included), even when the
-     * items themselves don't match. No effect when a custom `filter` is supplied
-     * or when `groupBy` is undefined.
-     */
-    searchIncludesGroupLabel?: boolean;
-}
+import type { AutoCompleteModelValue, AutoCompleteProps } from './auto-complete-props';
 declare const __VLS_export: <TValue, TItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(AutoCompleteProps<TValue, TItem> & {
         modelValue: AutoCompleteModelValue<TValue>;
@@ -83,16 +20,12 @@ declare const __VLS_export: <TValue, TItem>(__VLS_props: NonNullable<Awaited<typ
         activator?: (props: {
             disabled: boolean;
             value: TItem[];
-            variant: string;
             readOnly: boolean;
             attrs: Record<string, unknown>;
             open: boolean;
             hasError: boolean;
             hasSuccess: boolean;
         }) => any;
-        'activator.label'?: (props: {
-            value: TItem[];
-        }) => any;
         'selection.prepend'?: (props: {
             index: number;
             item: TItem;