@rotki/ui-library 2.25.0 → 2.26.0

package/dist/components/date-time-picker/use-keyboard-handler.js

@@ -2,12 +2,13 @@ import { assert } from "../../utils/assert.js";
 import { getClickPosition, parseAndSetDateValues } from "./segment-utils.js";
 import { SEGMENT_CONFIG, SEGMENT_METHODS } from "./segment-config.js";
 import { isDateTimeSegmentType } from "./types.js";
-import { computed, nextTick } from "vue";
+import { computed, nextTick, shallowReadonly, shallowRef } from "vue";
 import { isDefined } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 //#region src/components/date-time-picker/use-keyboard-handler.ts
 function useKeyboardHandler(options) {
-	const { accuracy, currentValue, cursorPosition, dateFormat, disabled, getCurrent, getDateTime, readonly, setValue, textInput } = options;
+	const { accuracy, currentValue, cursorPosition, dateFormat, disabled, getCurrent, getDateTime, readonly, setValue, textInput, timezone } = options;
+	const pasteRejected = shallowRef(false);
 	const formatSegments = computed(() => {
 		return get$1(dateFormat).split(/([\s./:])/g).filter(Boolean);
 	});
@@ -160,6 +161,7 @@ function useKeyboardHandler(options) {
 	}
 	function handleKeyDown(event) {
 		if (disabled || readonly) return;
+		set$1(pasteRejected, false);
 		if (event.ctrlKey || event.metaKey || event.altKey) return;
 		if (dispatchKey(event, event.key)) event.preventDefault();
 	}
@@ -220,18 +222,22 @@ function useKeyboardHandler(options) {
 	function handleBlur() {
 		set$1(cursorPosition, 0);
 		set$1(currentValue, void 0);
+		set$1(pasteRejected, false);
 		clickedSegment = void 0;
 	}
+	/** Text that is no date raises `pasteRejected` until the next key, paste, input or blur. */
 	function handlePaste(event) {
 		if (disabled || readonly) return;
 		if (!(event.target instanceof HTMLInputElement)) return;
 		event.preventDefault();
 		const pastedText = event.clipboardData?.getData("text");
 		if (!pastedText) return;
-		parseAndSetDateValues(pastedText, get$1(dateFormat), accuracy, setValue);
+		const parsed = parseAndSetDateValues(pastedText, get$1(dateFormat), accuracy, setValue, get$1(timezone));
+		set$1(pasteRejected, !parsed);
 	}
 	function handleInput(event) {
 		if (disabled || readonly) return;
+		set$1(pasteRejected, false);
 		if (!(event.target instanceof HTMLInputElement)) return;
 		const inputText = event.target.value;
 		if (!inputText) return;
@@ -248,6 +254,7 @@ function useKeyboardHandler(options) {
 		handleKeyDown,
 		handleMouseDown,
 		handlePaste,
+		pasteRejected: shallowReadonly(pasteRejected),
 		selectFirstSegment,
 		setSegment
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard-handler.js","names":[],"sources":["../../../src/components/date-time-picker/use-keyboard-handler.ts"],"sourcesContent":["import type { Dayjs } from 'dayjs';\nimport type { Ref, ShallowRef } from 'vue';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport { type Segment, SEGMENT_CONFIG, SEGMENT_METHODS } from '@/components/date-time-picker/segment-config';\nimport { getClickPosition, parseAndSetDateValues } from '@/components/date-time-picker/segment-utils';\nimport {\n  type DateTimeSegmentType,\n  isDateTimeSegmentType,\n} from '@/components/date-time-picker/types';\nimport { assert } from '@/utils/assert';\n\ninterface KeyboardHandlerOptions {\n  dateFormat: Ref<string>;\n  cursorPosition: Ref<number>;\n  currentValue: Ref<number | undefined>;\n  textInput: Readonly<ShallowRef<HTMLInputElement | null>> | Ref<HTMLInputElement | undefined>;\n  setValue: (segment: DateTimeSegmentType, value?: number) => void;\n  getCurrent: (segment: DateTimeSegmentType) => number | undefined;\n  getDateTime: () => Dayjs;\n  disabled: boolean;\n  readonly: boolean;\n  accuracy: TimeAccuracy;\n}\n\nexport function useKeyboardHandler(options: KeyboardHandlerOptions) {\n  const {\n    accuracy,\n    currentValue,\n    cursorPosition,\n    dateFormat,\n    disabled,\n    getCurrent,\n    getDateTime,\n    readonly,\n    setValue,\n    textInput,\n  } = options;\n\n  const formatSegments = computed<string[]>(() => {\n    const format = get(dateFormat);\n    return format.split(/([\\s./:])/g).filter(Boolean);\n  });\n\n  const segmentPositions = computed<Segment[]>(() => {\n    const segments = get(formatSegments);\n    const positions: Segment[] = [];\n    let currentPosition = 0;\n\n    segments.forEach((segment) => {\n      if (!/[\\s./:]/.test(segment)) {\n        assert(isDateTimeSegmentType(segment), `Invalid date format segment: ${segment}`);\n        positions.push({\n          end: currentPosition + segment.length,\n          start: currentPosition,\n          type: segment,\n        });\n      }\n      currentPosition += segment.length;\n    });\n\n    return positions;\n  });\n\n  function getCurrentSegment(position: number = get(cursorPosition)) {\n    const segments = get(segmentPositions);\n    return segments.find(segment => position >= segment.start && position <= segment.end);\n  }\n\n  function setCursorPosition(segment: Segment): void {\n    set(cursorPosition, segment.end);\n\n    nextTick(() => {\n      if (isDefined(textInput)) {\n        const input = get(textInput);\n        input.setSelectionRange(segment.start, segment.end);\n        input.focus();\n      }\n    });\n  }\n\n  function setSegment(segmentType: DateTimeSegmentType): void {\n    const segments = get(segmentPositions).find(segment => segment.type === segmentType);\n    if (segments) {\n      set(currentValue, undefined);\n      setCursorPosition(segments);\n    }\n  }\n\n  function clear(segmentType?: string): void {\n    const currentSegment = getCurrentSegment();\n    if (!segmentType && !currentSegment) {\n      return;\n    }\n\n    const typeToUse = segmentType ?? currentSegment?.type;\n    if (!typeToUse) {\n      return;\n    }\n\n    setValue(typeToUse as DateTimeSegmentType, undefined);\n\n    if (currentSegment) {\n      setCursorPosition(currentSegment);\n    }\n  }\n\n  function changeSegmentValue(increment: boolean): void {\n    if (!isDefined(textInput))\n      return;\n    const currentSegment = getCurrentSegment();\n    if (!currentSegment)\n      return;\n    const segmentType = currentSegment.type;\n    const method = SEGMENT_METHODS[segmentType];\n    const selectedDate = getDateTime();\n    const updatedDate = selectedDate.set(method, selectedDate.get(method) + (increment ? 1 : -1));\n    if (updatedDate.year() >= 1970) {\n      setValue(\n        segmentType,\n        segmentType === 'MM' ? updatedDate.get(method) + 1 : updatedDate.get(method),\n      );\n      setCursorPosition(currentSegment);\n    }\n  }\n\n  function navigateSegments(key: string) {\n    const position = get(cursorPosition);\n    const positions = get(segmentPositions);\n    const currentSegmentIndex = positions.findIndex(\n      segment => position >= segment.start && position <= segment.end,\n    );\n\n    if (currentSegmentIndex === -1) {\n      return;\n    }\n\n    set(currentValue, undefined);\n\n    let nextSegmentIndex: number;\n    if (key === 'ArrowRight') {\n      nextSegmentIndex = currentSegmentIndex + 1;\n      if (nextSegmentIndex < positions.length) {\n        const nextSegment = positions[nextSegmentIndex];\n        assert(nextSegment);\n        setCursorPosition(nextSegment);\n      }\n    }\n    else {\n      nextSegmentIndex = currentSegmentIndex - 1;\n      if (nextSegmentIndex >= 0) {\n        const nextSegment = positions[nextSegmentIndex];\n        assert(nextSegment);\n        setCursorPosition(nextSegment);\n      }\n    }\n  }\n\n  /**\n   * Adds a typed digit to the segment under the caret, moving on to the next\n   * segment once this one can hold no more.\n   *\n   * @param segment - the segment the caret sits in\n   * @param segmentType - that segment's type, which states its value range\n   * @param digit - the digit that was typed\n   */\n  function applyDigit(segment: Segment, segmentType: DateTimeSegmentType, digit: string): void {\n    const config = SEGMENT_CONFIG[segmentType];\n    const value = get(currentValue) ?? '';\n    const combinedStr = `${value}${digit}`;\n    const combinedValue = parseInt(combinedStr);\n    const maxLength = segmentType.length;\n    const minValue = config.minValue ?? 0;\n\n    if (combinedValue >= minValue && combinedValue <= config.maxValue) {\n      setValue(segmentType, combinedValue);\n      setCursorPosition(segment);\n    }\n    else if (combinedValue < minValue && combinedStr.length < maxLength) {\n      // Track digit even if below minValue, so next digit can combine (e.g., \"0\" allows \"01\")\n      set(currentValue, combinedValue);\n    }\n\n    const willExceedMax = parseInt(`${combinedStr}0`) > config.maxValue;\n    // Use string length of typed digits, not parsed number length (e.g., \"01\" has length 2)\n    if (willExceedMax || combinedStr.length >= maxLength)\n      navigateSegments('ArrowRight');\n  }\n\n  function handleDigitPressed(event: KeyboardEvent, digit: string): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n\n    const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);\n    if (!currentSegment || isNaN(parseInt(digit)))\n      return;\n\n    const segmentType = currentSegment.type;\n    if (!isDateTimeSegmentType(segmentType))\n      return;\n\n    applyDigit(currentSegment, segmentType, digit);\n  }\n\n  function handleKeyboardNavigation(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp')\n      changeSegmentValue(true);\n    else if (event.key === 'ArrowDown')\n      changeSegmentValue(false);\n  }\n\n  function handleBackspace(event: KeyboardEvent): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n    const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);\n    if (!currentSegment)\n      return;\n    const value = get(currentValue) ?? getCurrent(currentSegment.type) ?? '';\n    const updatedValue = value.toString().slice(0, -1);\n    setValue(currentSegment.type, updatedValue.length === 0 ? undefined : parseInt(updatedValue));\n    setCursorPosition(currentSegment);\n  }\n\n  function onInputDeletePressed(event: KeyboardEvent): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n    const segment = getCurrentSegment(event.target.selectionStart ?? 0);\n    if (segment) {\n      clear(segment.type);\n      setCursorPosition(segment);\n    }\n  }\n\n  /**\n   * Runs the picker's own handling for a key.\n   *\n   * @param event - the keydown being handled\n   * @param key - the key that was pressed\n   * @returns whether the picker handled it, which decides if the browser's own\n   * handling is kept: Tab moves out of the field, Escape closes the menu and\n   * Enter submits the surrounding form.\n   */\n  function dispatchKey(event: KeyboardEvent, key: string): boolean {\n    if (key === 'ArrowRight' || key === 'ArrowLeft')\n      navigateSegments(key);\n    else if (key === 'ArrowUp' || key === 'ArrowDown')\n      handleKeyboardNavigation(event);\n    else if (key === 'Backspace')\n      handleBackspace(event);\n    else if (key === 'Delete')\n      onInputDeletePressed(event);\n    else if (/^\\d$/.test(key))\n      handleDigitPressed(event, key);\n    else\n      return false;\n\n    return true;\n  }\n\n  function handleKeyDown(event: KeyboardEvent): void {\n    if (disabled || readonly)\n      return;\n\n    // Modifier combos belong to the browser: swallowing them made copy and paste impossible\n    if (event.ctrlKey || event.metaKey || event.altKey)\n      return;\n\n    if (dispatchKey(event, event.key))\n      event.preventDefault();\n  }\n\n  // Track the segment that was clicked, so handleFocus can restore it after DOM updates\n  let clickedSegment: Segment | undefined;\n\n  /**\n   * Captures the clicked segment on mousedown, which fires before focus.\n   *\n   * The in-progress digit buffer is reset because switching segments must not\n   * carry typed digits over, otherwise a leftover digit from another segment\n   * combines with the next keystroke (type \"1\" in HH, click mm, type \"3\" and\n   * mm would become 13 instead of 3).\n   */\n  function handleMouseDown(event: MouseEvent): void {\n    if (disabled || readonly || !(event.target instanceof HTMLInputElement))\n      return;\n    const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));\n    if (currentSegment) {\n      set(currentValue, undefined);\n      clickedSegment = currentSegment;\n    }\n  }\n\n  function handleClick(event: MouseEvent): void {\n    if (disabled || readonly || !(event.target instanceof HTMLInputElement))\n      return;\n    const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));\n    if (currentSegment) {\n      set(currentValue, undefined);\n      clickedSegment = currentSegment;\n      set(cursorPosition, currentSegment.end);\n      event.target.setSelectionRange(currentSegment.start, currentSegment.end);\n    }\n  }\n\n  function handleInputSelection(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    set(cursorPosition, target.selectionStart ?? 0);\n  }\n\n  function selectFirstSegment(): void {\n    const firstSegment = get(segmentPositions)[0];\n    if (firstSegment)\n      setCursorPosition(firstSegment);\n  }\n\n  /**\n   * Restores the selection a click asked for, which opening the menu and the\n   * DOM updates that follow can lose. With no click to restore, focus selects\n   * the first segment, unless the user is already selecting text themselves.\n   */\n  function handleFocus(): void {\n    if (clickedSegment) {\n      setCursorPosition(clickedSegment);\n      clickedSegment = undefined;\n      return;\n    }\n\n    const input = get(textInput);\n    if (input && input.selectionStart !== input.selectionEnd)\n      return;\n    selectFirstSegment();\n  }\n\n  /**\n   * Forgets the cursor position and the clicked segment, so re-focusing on\n   * another segment does not blink through the one left behind.\n   */\n  function handleBlur(): void {\n    set(cursorPosition, 0);\n    set(currentValue, undefined);\n    clickedSegment = undefined;\n  }\n\n  function handlePaste(event: ClipboardEvent): void {\n    if (disabled || readonly)\n      return;\n\n    if (!(event.target instanceof HTMLInputElement)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const pastedText = event.clipboardData?.getData('text');\n    if (!pastedText) {\n      return;\n    }\n    parseAndSetDateValues(pastedText, get(dateFormat), accuracy, setValue);\n  }\n\n  function handleInput(event: Event): void {\n    if (disabled || readonly)\n      return;\n\n    if (!(event.target instanceof HTMLInputElement)) {\n      return;\n    }\n\n    const inputText = event.target.value;\n    if (!inputText) {\n      return;\n    }\n\n    parseAndSetDateValues(inputText, get(dateFormat), accuracy, setValue);\n  }\n\n  return {\n    clear,\n    getCurrentSegment,\n    handleBlur,\n    handleClick,\n    handleFocus,\n    handleInput,\n    handleInputSelection,\n    handleKeyDown,\n    handleMouseDown,\n    handlePaste,\n    selectFirstSegment,\n    setSegment,\n  };\n}\n"],"mappings":";;;;;;;;AAwBA,SAAgB,mBAAmB,SAAiC;CAClE,MAAM,EACJ,UACA,cACA,gBACA,YACA,UACA,YACA,aACA,UACA,UACA,cACE;CAEJ,MAAM,iBAAiB,eAAyB;EAE9C,OADe,MAAI,UACZ,CAAA,CAAO,MAAM,YAAY,CAAC,CAAC,OAAO,OAAO;CAClD,CAAC;CAED,MAAM,mBAAmB,eAA0B;EACjD,MAAM,WAAW,MAAI,cAAc;EACnC,MAAM,YAAuB,CAAC;EAC9B,IAAI,kBAAkB;EAEtB,SAAS,SAAS,YAAY;GAC5B,IAAI,CAAC,UAAU,KAAK,OAAO,GAAG;IAC5B,OAAO,sBAAsB,OAAO,GAAG,gCAAgC,SAAS;IAChF,UAAU,KAAK;KACb,KAAK,kBAAkB,QAAQ;KAC/B,OAAO;KACP,MAAM;IACR,CAAC;GACH;GACA,mBAAmB,QAAQ;EAC7B,CAAC;EAED,OAAO;CACT,CAAC;CAED,SAAS,kBAAkB,WAAmB,MAAI,cAAc,GAAG;EAEjE,OADiB,MAAI,gBACd,CAAA,CAAS,MAAK,YAAW,YAAY,QAAQ,SAAS,YAAY,QAAQ,GAAG;CACtF;CAEA,SAAS,kBAAkB,SAAwB;EACjD,MAAI,gBAAgB,QAAQ,GAAG;EAE/B,eAAe;GACb,IAAI,UAAU,SAAS,GAAG;IACxB,MAAM,QAAQ,MAAI,SAAS;IAC3B,MAAM,kBAAkB,QAAQ,OAAO,QAAQ,GAAG;IAClD,MAAM,MAAM;GACd;EACF,CAAC;CACH;CAEA,SAAS,WAAW,aAAwC;EAC1D,MAAM,WAAW,MAAI,gBAAgB,CAAC,CAAC,MAAK,YAAW,QAAQ,SAAS,WAAW;EACnF,IAAI,UAAU;GACZ,MAAI,cAAc,KAAA,CAAS;GAC3B,kBAAkB,QAAQ;EAC5B;CACF;CAEA,SAAS,MAAM,aAA4B;EACzC,MAAM,iBAAiB,kBAAkB;EACzC,IAAI,CAAC,eAAe,CAAC,gBACnB;EAGF,MAAM,YAAY,eAAe,gBAAgB;EACjD,IAAI,CAAC,WACH;EAGF,SAAS,WAAkC,KAAA,CAAS;EAEpD,IAAI,gBACF,kBAAkB,cAAc;CAEpC;CAEA,SAAS,mBAAmB,WAA0B;EACpD,IAAI,CAAC,UAAU,SAAS,GACtB;EACF,MAAM,iBAAiB,kBAAkB;EACzC,IAAI,CAAC,gBACH;EACF,MAAM,cAAc,eAAe;EACnC,MAAM,SAAS,gBAAgB;EAC/B,MAAM,eAAe,YAAY;EACjC,MAAM,cAAc,aAAa,IAAI,QAAQ,aAAa,IAAI,MAAM,KAAK,YAAY,IAAI,GAAG;EAC5F,IAAI,YAAY,KAAK,KAAK,MAAM;GAC9B,SACE,aACA,gBAAgB,OAAO,YAAY,IAAI,MAAM,IAAI,IAAI,YAAY,IAAI,MAAM,CAC7E;GACA,kBAAkB,cAAc;EAClC;CACF;CAEA,SAAS,iBAAiB,KAAa;EACrC,MAAM,WAAW,MAAI,cAAc;EACnC,MAAM,YAAY,MAAI,gBAAgB;EACtC,MAAM,sBAAsB,UAAU,WACpC,YAAW,YAAY,QAAQ,SAAS,YAAY,QAAQ,GAC9D;EAEA,IAAI,wBAAwB,IAC1B;EAGF,MAAI,cAAc,KAAA,CAAS;EAE3B,IAAI;EACJ,IAAI,QAAQ,cAAc;GACxB,mBAAmB,sBAAsB;GACzC,IAAI,mBAAmB,UAAU,QAAQ;IACvC,MAAM,cAAc,UAAU;IAC9B,OAAO,WAAW;IAClB,kBAAkB,WAAW;GAC/B;EACF,OACK;GACH,mBAAmB,sBAAsB;GACzC,IAAI,oBAAoB,GAAG;IACzB,MAAM,cAAc,UAAU;IAC9B,OAAO,WAAW;IAClB,kBAAkB,WAAW;GAC/B;EACF;CACF;;;;;;;;;CAUA,SAAS,WAAW,SAAkB,aAAkC,OAAqB;EAC3F,MAAM,SAAS,eAAe;EAE9B,MAAM,cAAc,GADN,MAAI,YAAY,KAAK,KACJ;EAC/B,MAAM,gBAAgB,SAAS,WAAW;EAC1C,MAAM,YAAY,YAAY;EAC9B,MAAM,WAAW,OAAO,YAAY;EAEpC,IAAI,iBAAiB,YAAY,iBAAiB,OAAO,UAAU;GACjE,SAAS,aAAa,aAAa;GACnC,kBAAkB,OAAO;EAC3B,OACK,IAAI,gBAAgB,YAAY,YAAY,SAAS,WAExD,MAAI,cAAc,aAAa;EAKjC,IAFsB,SAAS,GAAG,YAAY,EAAE,IAAI,OAAO,YAEtC,YAAY,UAAU,WACzC,iBAAiB,YAAY;CACjC;CAEA,SAAS,mBAAmB,OAAsB,OAAqB;EACrE,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;EAEF,MAAM,iBAAiB,kBAAkB,MAAM,OAAO,kBAAkB,CAAC;EACzE,IAAI,CAAC,kBAAkB,MAAM,SAAS,KAAK,CAAC,GAC1C;EAEF,MAAM,cAAc,eAAe;EACnC,IAAI,CAAC,sBAAsB,WAAW,GACpC;EAEF,WAAW,gBAAgB,aAAa,KAAK;CAC/C;CAEA,SAAS,yBAAyB,OAA4B;EAC5D,IAAI,MAAM,QAAQ,WAChB,mBAAmB,IAAI;OACpB,IAAI,MAAM,QAAQ,aACrB,mBAAmB,KAAK;CAC5B;CAEA,SAAS,gBAAgB,OAA4B;EACnD,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;EACF,MAAM,iBAAiB,kBAAkB,MAAM,OAAO,kBAAkB,CAAC;EACzE,IAAI,CAAC,gBACH;EAEF,MAAM,gBADQ,MAAI,YAAY,KAAK,WAAW,eAAe,IAAI,KAAK,GAAA,CAC3C,SAAS,CAAC,CAAC,MAAM,GAAG,EAAE;EACjD,SAAS,eAAe,MAAM,aAAa,WAAW,IAAI,KAAA,IAAY,SAAS,YAAY,CAAC;EAC5F,kBAAkB,cAAc;CAClC;CAEA,SAAS,qBAAqB,OAA4B;EACxD,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;EACF,MAAM,UAAU,kBAAkB,MAAM,OAAO,kBAAkB,CAAC;EAClE,IAAI,SAAS;GACX,MAAM,QAAQ,IAAI;GAClB,kBAAkB,OAAO;EAC3B;CACF;;;;;;;;;;CAWA,SAAS,YAAY,OAAsB,KAAsB;EAC/D,IAAI,QAAQ,gBAAgB,QAAQ,aAClC,iBAAiB,GAAG;OACjB,IAAI,QAAQ,aAAa,QAAQ,aACpC,yBAAyB,KAAK;OAC3B,IAAI,QAAQ,aACf,gBAAgB,KAAK;OAClB,IAAI,QAAQ,UACf,qBAAqB,KAAK;OACvB,IAAI,OAAO,KAAK,GAAG,GACtB,mBAAmB,OAAO,GAAG;OAE7B,OAAO;EAET,OAAO;CACT;CAEA,SAAS,cAAc,OAA4B;EACjD,IAAI,YAAY,UACd;EAGF,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,QAC1C;EAEF,IAAI,YAAY,OAAO,MAAM,GAAG,GAC9B,MAAM,eAAe;CACzB;CAGA,IAAI;;;;;;;;;CAUJ,SAAS,gBAAgB,OAAyB;EAChD,IAAI,YAAY,YAAY,EAAE,MAAM,kBAAkB,mBACpD;EACF,MAAM,iBAAiB,kBAAkB,iBAAiB,OAAO,MAAM,QAAQ,IAAI,CAAC;EACpF,IAAI,gBAAgB;GAClB,MAAI,cAAc,KAAA,CAAS;GAC3B,iBAAiB;EACnB;CACF;CAEA,SAAS,YAAY,OAAyB;EAC5C,IAAI,YAAY,YAAY,EAAE,MAAM,kBAAkB,mBACpD;EACF,MAAM,iBAAiB,kBAAkB,iBAAiB,OAAO,MAAM,QAAQ,IAAI,CAAC;EACpF,IAAI,gBAAgB;GAClB,MAAI,cAAc,KAAA,CAAS;GAC3B,iBAAiB;GACjB,MAAI,gBAAgB,eAAe,GAAG;GACtC,MAAM,OAAO,kBAAkB,eAAe,OAAO,eAAe,GAAG;EACzE;CACF;CAEA,SAAS,qBAAqB,OAAoB;EAChD,MAAM,SAAS,MAAM;EACrB,MAAI,gBAAgB,OAAO,kBAAkB,CAAC;CAChD;CAEA,SAAS,qBAA2B;EAClC,MAAM,eAAe,MAAI,gBAAgB,CAAC,CAAC;EAC3C,IAAI,cACF,kBAAkB,YAAY;CAClC;;;;;;CAOA,SAAS,cAAoB;EAC3B,IAAI,gBAAgB;GAClB,kBAAkB,cAAc;GAChC,iBAAiB,KAAA;GACjB;EACF;EAEA,MAAM,QAAQ,MAAI,SAAS;EAC3B,IAAI,SAAS,MAAM,mBAAmB,MAAM,cAC1C;EACF,mBAAmB;CACrB;;;;;CAMA,SAAS,aAAmB;EAC1B,MAAI,gBAAgB,CAAC;EACrB,MAAI,cAAc,KAAA,CAAS;EAC3B,iBAAiB,KAAA;CACnB;CAEA,SAAS,YAAY,OAA6B;EAChD,IAAI,YAAY,UACd;EAEF,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;EAGF,MAAM,eAAe;EAErB,MAAM,aAAa,MAAM,eAAe,QAAQ,MAAM;EACtD,IAAI,CAAC,YACH;EAEF,sBAAsB,YAAY,MAAI,UAAU,GAAG,UAAU,QAAQ;CACvE;CAEA,SAAS,YAAY,OAAoB;EACvC,IAAI,YAAY,UACd;EAEF,IAAI,EAAE,MAAM,kBAAkB,mBAC5B;EAGF,MAAM,YAAY,MAAM,OAAO;EAC/B,IAAI,CAAC,WACH;EAGF,sBAAsB,WAAW,MAAI,UAAU,GAAG,UAAU,QAAQ;CACtE;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-keyboard-handler.js","names":[],"sources":["../../../src/components/date-time-picker/use-keyboard-handler.ts"],"sourcesContent":["import type { Dayjs } from 'dayjs';\nimport type { Ref, ShallowRef } from 'vue';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport { type Segment, SEGMENT_CONFIG, SEGMENT_METHODS } from '@/components/date-time-picker/segment-config';\nimport { getClickPosition, parseAndSetDateValues } from '@/components/date-time-picker/segment-utils';\nimport {\n  type DateTimeSegmentType,\n  isDateTimeSegmentType,\n} from '@/components/date-time-picker/types';\nimport { assert } from '@/utils/assert';\n\ninterface KeyboardHandlerOptions {\n  dateFormat: Ref<string>;\n  cursorPosition: Ref<number>;\n  currentValue: Ref<number | undefined>;\n  textInput: Readonly<ShallowRef<HTMLInputElement | null>> | Ref<HTMLInputElement | undefined>;\n  setValue: (segment: DateTimeSegmentType, value?: number) => void;\n  getCurrent: (segment: DateTimeSegmentType) => number | undefined;\n  getDateTime: () => Dayjs;\n  disabled: boolean;\n  readonly: boolean;\n  accuracy: TimeAccuracy;\n  timezone: Readonly<Ref<string | undefined>>;\n}\n\nexport function useKeyboardHandler(options: KeyboardHandlerOptions) {\n  const {\n    accuracy,\n    currentValue,\n    cursorPosition,\n    dateFormat,\n    disabled,\n    getCurrent,\n    getDateTime,\n    readonly,\n    setValue,\n    textInput,\n    timezone,\n  } = options;\n\n  const pasteRejected = shallowRef<boolean>(false);\n\n  const formatSegments = computed<string[]>(() => {\n    const format = get(dateFormat);\n    return format.split(/([\\s./:])/g).filter(Boolean);\n  });\n\n  const segmentPositions = computed<Segment[]>(() => {\n    const segments = get(formatSegments);\n    const positions: Segment[] = [];\n    let currentPosition = 0;\n\n    segments.forEach((segment) => {\n      if (!/[\\s./:]/.test(segment)) {\n        assert(isDateTimeSegmentType(segment), `Invalid date format segment: ${segment}`);\n        positions.push({\n          end: currentPosition + segment.length,\n          start: currentPosition,\n          type: segment,\n        });\n      }\n      currentPosition += segment.length;\n    });\n\n    return positions;\n  });\n\n  function getCurrentSegment(position: number = get(cursorPosition)) {\n    const segments = get(segmentPositions);\n    return segments.find(segment => position >= segment.start && position <= segment.end);\n  }\n\n  function setCursorPosition(segment: Segment): void {\n    set(cursorPosition, segment.end);\n\n    nextTick(() => {\n      if (isDefined(textInput)) {\n        const input = get(textInput);\n        input.setSelectionRange(segment.start, segment.end);\n        input.focus();\n      }\n    });\n  }\n\n  function setSegment(segmentType: DateTimeSegmentType): void {\n    const segments = get(segmentPositions).find(segment => segment.type === segmentType);\n    if (segments) {\n      set(currentValue, undefined);\n      setCursorPosition(segments);\n    }\n  }\n\n  function clear(segmentType?: string): void {\n    const currentSegment = getCurrentSegment();\n    if (!segmentType && !currentSegment) {\n      return;\n    }\n\n    const typeToUse = segmentType ?? currentSegment?.type;\n    if (!typeToUse) {\n      return;\n    }\n\n    setValue(typeToUse as DateTimeSegmentType, undefined);\n\n    if (currentSegment) {\n      setCursorPosition(currentSegment);\n    }\n  }\n\n  function changeSegmentValue(increment: boolean): void {\n    if (!isDefined(textInput))\n      return;\n    const currentSegment = getCurrentSegment();\n    if (!currentSegment)\n      return;\n    const segmentType = currentSegment.type;\n    const method = SEGMENT_METHODS[segmentType];\n    const selectedDate = getDateTime();\n    const updatedDate = selectedDate.set(method, selectedDate.get(method) + (increment ? 1 : -1));\n    if (updatedDate.year() >= 1970) {\n      setValue(\n        segmentType,\n        segmentType === 'MM' ? updatedDate.get(method) + 1 : updatedDate.get(method),\n      );\n      setCursorPosition(currentSegment);\n    }\n  }\n\n  function navigateSegments(key: string) {\n    const position = get(cursorPosition);\n    const positions = get(segmentPositions);\n    const currentSegmentIndex = positions.findIndex(\n      segment => position >= segment.start && position <= segment.end,\n    );\n\n    if (currentSegmentIndex === -1) {\n      return;\n    }\n\n    set(currentValue, undefined);\n\n    let nextSegmentIndex: number;\n    if (key === 'ArrowRight') {\n      nextSegmentIndex = currentSegmentIndex + 1;\n      if (nextSegmentIndex < positions.length) {\n        const nextSegment = positions[nextSegmentIndex];\n        assert(nextSegment);\n        setCursorPosition(nextSegment);\n      }\n    }\n    else {\n      nextSegmentIndex = currentSegmentIndex - 1;\n      if (nextSegmentIndex >= 0) {\n        const nextSegment = positions[nextSegmentIndex];\n        assert(nextSegment);\n        setCursorPosition(nextSegment);\n      }\n    }\n  }\n\n  /**\n   * Adds a typed digit to the segment under the caret, moving on to the next\n   * segment once this one can hold no more.\n   *\n   * @param segment - the segment the caret sits in\n   * @param segmentType - that segment's type, which states its value range\n   * @param digit - the digit that was typed\n   */\n  function applyDigit(segment: Segment, segmentType: DateTimeSegmentType, digit: string): void {\n    const config = SEGMENT_CONFIG[segmentType];\n    const value = get(currentValue) ?? '';\n    const combinedStr = `${value}${digit}`;\n    const combinedValue = parseInt(combinedStr);\n    const maxLength = segmentType.length;\n    const minValue = config.minValue ?? 0;\n\n    if (combinedValue >= minValue && combinedValue <= config.maxValue) {\n      setValue(segmentType, combinedValue);\n      setCursorPosition(segment);\n    }\n    else if (combinedValue < minValue && combinedStr.length < maxLength) {\n      // Track digit even if below minValue, so next digit can combine (e.g., \"0\" allows \"01\")\n      set(currentValue, combinedValue);\n    }\n\n    const willExceedMax = parseInt(`${combinedStr}0`) > config.maxValue;\n    // Use string length of typed digits, not parsed number length (e.g., \"01\" has length 2)\n    if (willExceedMax || combinedStr.length >= maxLength)\n      navigateSegments('ArrowRight');\n  }\n\n  function handleDigitPressed(event: KeyboardEvent, digit: string): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n\n    const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);\n    if (!currentSegment || isNaN(parseInt(digit)))\n      return;\n\n    const segmentType = currentSegment.type;\n    if (!isDateTimeSegmentType(segmentType))\n      return;\n\n    applyDigit(currentSegment, segmentType, digit);\n  }\n\n  function handleKeyboardNavigation(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp')\n      changeSegmentValue(true);\n    else if (event.key === 'ArrowDown')\n      changeSegmentValue(false);\n  }\n\n  function handleBackspace(event: KeyboardEvent): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n    const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);\n    if (!currentSegment)\n      return;\n    const value = get(currentValue) ?? getCurrent(currentSegment.type) ?? '';\n    const updatedValue = value.toString().slice(0, -1);\n    setValue(currentSegment.type, updatedValue.length === 0 ? undefined : parseInt(updatedValue));\n    setCursorPosition(currentSegment);\n  }\n\n  function onInputDeletePressed(event: KeyboardEvent): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n    const segment = getCurrentSegment(event.target.selectionStart ?? 0);\n    if (segment) {\n      clear(segment.type);\n      setCursorPosition(segment);\n    }\n  }\n\n  /**\n   * Runs the picker's own handling for a key.\n   *\n   * @param event - the keydown being handled\n   * @param key - the key that was pressed\n   * @returns whether the picker handled it, which decides if the browser's own\n   * handling is kept: Tab moves out of the field, Escape closes the menu and\n   * Enter submits the surrounding form.\n   */\n  function dispatchKey(event: KeyboardEvent, key: string): boolean {\n    if (key === 'ArrowRight' || key === 'ArrowLeft')\n      navigateSegments(key);\n    else if (key === 'ArrowUp' || key === 'ArrowDown')\n      handleKeyboardNavigation(event);\n    else if (key === 'Backspace')\n      handleBackspace(event);\n    else if (key === 'Delete')\n      onInputDeletePressed(event);\n    else if (/^\\d$/.test(key))\n      handleDigitPressed(event, key);\n    else\n      return false;\n\n    return true;\n  }\n\n  function handleKeyDown(event: KeyboardEvent): void {\n    if (disabled || readonly)\n      return;\n\n    set(pasteRejected, false);\n    // Modifier combos belong to the browser: swallowing them made copy and paste impossible\n    if (event.ctrlKey || event.metaKey || event.altKey)\n      return;\n\n    if (dispatchKey(event, event.key))\n      event.preventDefault();\n  }\n\n  // Track the segment that was clicked, so handleFocus can restore it after DOM updates\n  let clickedSegment: Segment | undefined;\n\n  /**\n   * Captures the clicked segment on mousedown, which fires before focus.\n   *\n   * The in-progress digit buffer is reset because switching segments must not\n   * carry typed digits over, otherwise a leftover digit from another segment\n   * combines with the next keystroke (type \"1\" in HH, click mm, type \"3\" and\n   * mm would become 13 instead of 3).\n   */\n  function handleMouseDown(event: MouseEvent): void {\n    if (disabled || readonly || !(event.target instanceof HTMLInputElement))\n      return;\n    const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));\n    if (currentSegment) {\n      set(currentValue, undefined);\n      clickedSegment = currentSegment;\n    }\n  }\n\n  function handleClick(event: MouseEvent): void {\n    if (disabled || readonly || !(event.target instanceof HTMLInputElement))\n      return;\n    const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));\n    if (currentSegment) {\n      set(currentValue, undefined);\n      clickedSegment = currentSegment;\n      set(cursorPosition, currentSegment.end);\n      event.target.setSelectionRange(currentSegment.start, currentSegment.end);\n    }\n  }\n\n  function handleInputSelection(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    set(cursorPosition, target.selectionStart ?? 0);\n  }\n\n  function selectFirstSegment(): void {\n    const firstSegment = get(segmentPositions)[0];\n    if (firstSegment)\n      setCursorPosition(firstSegment);\n  }\n\n  /**\n   * Restores the selection a click asked for, which opening the menu and the\n   * DOM updates that follow can lose. With no click to restore, focus selects\n   * the first segment, unless the user is already selecting text themselves.\n   */\n  function handleFocus(): void {\n    if (clickedSegment) {\n      setCursorPosition(clickedSegment);\n      clickedSegment = undefined;\n      return;\n    }\n\n    const input = get(textInput);\n    if (input && input.selectionStart !== input.selectionEnd)\n      return;\n    selectFirstSegment();\n  }\n\n  /**\n   * Forgets the cursor position and the clicked segment, so re-focusing on\n   * another segment does not blink through the one left behind.\n   */\n  function handleBlur(): void {\n    set(cursorPosition, 0);\n    set(currentValue, undefined);\n    set(pasteRejected, false);\n    clickedSegment = undefined;\n  }\n\n  /** Text that is no date raises `pasteRejected` until the next key, paste, input or blur. */\n  function handlePaste(event: ClipboardEvent): void {\n    if (disabled || readonly)\n      return;\n\n    if (!(event.target instanceof HTMLInputElement)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const pastedText = event.clipboardData?.getData('text');\n    if (!pastedText) {\n      return;\n    }\n    const parsed = parseAndSetDateValues(pastedText, get(dateFormat), accuracy, setValue, get(timezone));\n    set(pasteRejected, !parsed);\n  }\n\n  function handleInput(event: Event): void {\n    if (disabled || readonly)\n      return;\n    set(pasteRejected, false);\n\n    if (!(event.target instanceof HTMLInputElement)) {\n      return;\n    }\n\n    const inputText = event.target.value;\n    if (!inputText) {\n      return;\n    }\n\n    parseAndSetDateValues(inputText, get(dateFormat), accuracy, setValue);\n  }\n\n  return {\n    clear,\n    getCurrentSegment,\n    handleBlur,\n    handleClick,\n    handleFocus,\n    handleInput,\n    handleInputSelection,\n    handleKeyDown,\n    handleMouseDown,\n    handlePaste,\n    pasteRejected: shallowReadonly(pasteRejected),\n    selectFirstSegment,\n    setSegment,\n  };\n}\n"],"mappings":"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"}

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  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 { 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":""}

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

@@ -281,6 +281,7 @@ var RuiAutoComplete_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			filled: __props.variant === "filled",
 			outlined: get$1(outlined),
 			float: get$1(float),
+			showLabel: !!get$1(legendText),
 			opened: get$1(isOpen),
 			hovered: get$1(isHovered),
 			dense: __props.dense,

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

@@ -1 +1 @@
-{"version":3,"file":"RuiAutoComplete.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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  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":"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"}
+{"version":3,"file":"RuiAutoComplete.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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":"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"}

package/dist/components/forms/auto-complete/auto-complete-styles.d.ts

@@ -64,6 +64,9 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 } & {
     focused: {
         true: {
@@ -178,6 +181,9 @@ export declare const autoCompleteStyles: import("tailwind-variants").TVReturnTyp
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 }, {
     fieldset: string;
     legend: string;

package/dist/components/forms/category-picker/category-picker-styles.d.ts

@@ -88,6 +88,9 @@ export declare const categoryPickerActivatorStyles: import("tailwind-variants").
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 } & {
     focused: {
         true: {
@@ -202,6 +205,9 @@ export declare const categoryPickerActivatorStyles: import("tailwind-variants").
     hovered: {
         true: {};
     };
+    showLabel: {
+        true: {};
+    };
 }, {
     fieldset: string;
     legend: string;

package/dist/components/forms/select/RuiMenuSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiMenuSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiMenuSelect.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 { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\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 { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<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?: RuiMenuSelectClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  /** @deprecated Use `classNames.option` instead */\n  optionClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: MenuSelectVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = 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  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\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 | undefined }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => 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  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n  prependWidth,\n  appendWidth,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && 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 menuSelectStyles>>(() => menuSelectStyles({\n  filled: variant === 'filled',\n  outlined: get(outlined),\n  float: get(float),\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 = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\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\n    full-width\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        <button\n          ref=\"activator\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !value && !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          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && '!visible', { 'mr-2': !dense }]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              color=\"error\"\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\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        </button>\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      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"modelHighlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && modelHighlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu ?? menuClass\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiMenuSelect.js","names":[],"sources":["../../../../src/components/forms/select/RuiMenuSelect.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 { menuSelectStyles, type MenuSelectVariant } from '@/components/forms/select/menu-select-styles';\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 { type KeyOfType, useDropdownMenu } from '@/composables/dropdown-menu';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport { useFormTextDetail } from '@/utils/form-text-detail';\nimport { getNonRootAttrs, getRootAttrs } from '@/utils/helpers';\nimport { cn } from '@/utils/tv';\n\nexport interface RuiMenuSelectClassNames {\n  root?: VueClassValue;\n  label?: VueClassValue;\n  menu?: VueClassValue;\n  option?: VueClassValue;\n}\n\nexport interface MenuSelectProps<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?: RuiMenuSelectClassNames;\n  /** @deprecated Use `classNames.label` instead */\n  labelClass?: string;\n  /** @deprecated Use `classNames.menu` instead */\n  menuClass?: string;\n  /** @deprecated Use `classNames.option` instead */\n  optionClass?: string;\n  prependWidth?: number;\n  appendWidth?: number;\n  itemHeight?: number;\n  variant?: MenuSelectVariant;\n  hint?: string;\n  errorMessages?: string | string[];\n  successMessages?: string | string[];\n  hideDetails?: boolean;\n  autoSelectFirst?: boolean;\n  hideNoData?: boolean;\n  noDataText?: string;\n  required?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiMenuSelect',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<TValue | undefined>({ required: true });\n\nconst {\n  options,\n  disabled = false,\n  loading = false,\n  readOnly = false,\n  dense = false,\n  clearable = false,\n  hideDetails = 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  hideNoData = false,\n  noDataText = 'No data available',\n  required = false,\n} = defineProps<MenuSelectProps<TValue, TItem>>();\n\ndefineSlots<{\n  'activator'?: (props: {\n    disabled: boolean;\n    value: TItem | undefined;\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 | undefined }) => any;\n  'selection.prepend'?: (props: { item: TItem }) => any;\n  'selection'?: (props: { item: TItem }) => 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  'no-data'?: () => any;\n}>();\n\nconst menuRef = useTemplateRef<HTMLDivElement>('menuRef');\nconst activator = useTemplateRef<HTMLDivElement>('activator');\nconst { focused } = useFocus(activator);\nconst isHovered = ref<boolean>(false);\n\nconst { hasError, hasSuccess } = useFormTextDetail(\n  () => errorMessages,\n  () => successMessages,\n);\n\nconst value = computed<TItem | undefined>({\n  get: () => {\n    const value = get(modelValue);\n    if (keyAttr)\n      return options.find(option => option[keyAttr] === value);\n    return value as unknown as TItem;\n  },\n  set: (selected?: TItem) => {\n    const selection = keyAttr && selected ? selected[keyAttr] : selected;\n    set(modelValue, selection as TValue);\n  },\n});\n\nfunction setValue(val: TItem): void {\n  set(value, val);\n  set(focused, true);\n}\n\nconst {\n  containerProps,\n  wrapperProps,\n  renderedData,\n  isOpen,\n  menuWidth,\n  getText,\n  getIdentifier,\n  isActiveItem,\n  modelHighlightedIndex,\n  moveHighlight,\n  applyHighlighted,\n  valueKey,\n} = useDropdownMenu<TValue, TItem>({\n  itemHeight: itemHeight ?? (dense ? 30 : 48),\n  keyAttr,\n  textAttr,\n  options: () => options,\n  dense: () => dense,\n  value,\n  menuRef,\n  disabled: () => disabled,\n  autoSelectFirst,\n  setValue,\n  prependWidth,\n  appendWidth,\n});\n\nconst outlined = computed<boolean>(() => variant === 'outlined');\nconst float = computed<boolean>(() => (get(isOpen) || !!get(value)) && 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 menuSelectStyles>>(() => menuSelectStyles({\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 = menuSelectStyles({}).highlighted();\n\nfunction clear(): void {\n  set(modelValue, undefined);\n}\n\nconst menuFloatingOptions = computed<FloatingOptions>(() => ({\n  placement: Placement.bottomStart,\n  ...menuOptions?.options,\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\n    full-width\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        <button\n          ref=\"activator\"\n          :disabled=\"disabled\"\n          :aria-disabled=\"disabled\"\n          :aria-expanded=\"isOpen\"\n          :aria-readonly=\"readOnly || undefined\"\n          :aria-required=\"required || undefined\"\n          :aria-busy=\"loading || undefined\"\n          type=\"button\"\n          :tabindex=\"disabled || readOnly ? -1 : 0\"\n          :class=\"ui.activator({ class: cn(classNames?.label) ?? labelClass })\"\n          v-bind=\"{\n            ...getNonRootAttrs($attrs),\n            ...(readOnly ? {} : attrs),\n          }\"\n          data-id=\"activator\"\n          :aria-invalid=\"hasError\"\n          @mouseenter=\"isHovered = true\"\n          @mouseleave=\"isHovered = false\"\n          @keydown.up.prevent=\"moveHighlight(true)\"\n          @keydown.down.prevent=\"moveHighlight(false)\"\n          @keydown.enter.prevent=\"applyHighlighted()\"\n          @keydown.space.prevent=\"applyHighlighted()\"\n          @keydown.home.prevent=\"modelHighlightedIndex = 0\"\n          @keydown.end.prevent=\"modelHighlightedIndex = options.length - 1\"\n        >\n          <span\n            v-if=\"outlined || !value\"\n            :class=\"[\n              ui.label(),\n              { 'pr-2': !value && !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          <span\n            v-if=\"value\"\n            :class=\"ui.value()\"\n          >\n            <slot\n              name=\"selection.prepend\"\n              v-bind=\"{ item: value }\"\n            />\n            <slot\n              name=\"selection\"\n              v-bind=\"{ item: value }\"\n            >\n              {{ getText(value) }}\n            </slot>\n          </span>\n\n          <span\n            v-if=\"clearable && value && !disabled\"\n            data-id=\"clear\"\n            :class=\"[ui.clear(), focused && '!visible', { 'mr-2': !dense }]\"\n            @click.stop.prevent=\"clear()\"\n          >\n            <RuiIcon\n              color=\"error\"\n              name=\"lu-x\"\n              size=\"18\"\n            />\n          </span>\n\n          <span :class=\"ui.iconWrapper()\">\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        </button>\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      <input\n        :value=\"valueKey\"\n        class=\"hidden\"\n        type=\"hidden\"\n      />\n    </template>\n    <template #default=\"{ width }\">\n      <div\n        v-if=\"options.length > 0\"\n        :ref=\"containerProps.ref\"\n        :class=\"ui.menu({ class: cn(classNames?.menu) ?? menuClass })\"\n        :style=\"[containerProps.style, { width: `${width}px`, minWidth: menuWidth }]\"\n        @scroll=\"containerProps.onScroll\"\n        @keydown.up.prevent=\"moveHighlight(true)\"\n        @keydown.down.prevent=\"moveHighlight(false)\"\n      >\n        <div\n          v-bind=\"wrapperProps\"\n          ref=\"menuRef\"\n        >\n          <RuiButton\n            v-for=\"{ item, _index } in renderedData\"\n            :key=\"getIdentifier(item)\"\n            :active=\"isActiveItem(item)\"\n            :aria-selected=\"isActiveItem(item)\"\n            :size=\"dense ? 'sm' : undefined\"\n            variant=\"list\"\n            :data-highlighted=\"modelHighlightedIndex === _index\"\n            :class=\"{\n              [highlightedClass]: !isActiveItem(item) && modelHighlightedIndex === _index,\n            }\"\n            @click=\"setValue(item)\"\n          >\n            <template #prepend>\n              <slot\n                name=\"item.prepend\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n            <slot\n              name=\"item\"\n              v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n            >\n              {{ getText(item) }}\n            </slot>\n            <template #append>\n              <slot\n                name=\"item.append\"\n                v-bind=\"{ disabled, item, active: isActiveItem(item) }\"\n              />\n            </template>\n          </RuiButton>\n        </div>\n      </div>\n\n      <div\n        v-else-if=\"!hideNoData\"\n        data-id=\"no-data\"\n        :style=\"{ width: `${width}px`, minWidth: menuWidth }\"\n        :class=\"classNames?.menu ?? menuClass\"\n      >\n        <slot name=\"no-data\">\n          <div class=\"p-4\">\n            {{ noDataText }}\n          </div>\n        </slot>\n      </div>\n    </template>\n  </RuiMenu>\n</template>\n"],"mappings":""}

package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js

@@ -133,6 +133,7 @@ var RuiMenuSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			filled: __props.variant === "filled",
 			outlined: get$1(outlined),
 			float: get$1(float),
+			showLabel: !!get$1(legendText),
 			opened: get$1(isOpen),
 			hovered: get$1(isHovered),
 			dense: __props.dense,