@rotki/ui-library 2.20.0 → 2.20.2

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

@@ -43,7 +43,10 @@ function useKeyboardHandler(options) {
 	}
 	function setSegment(segmentType) {
 		const segments = get$1(segmentPositions).find((segment) => segment.type === segmentType);
-		if (segments) setCursorPosition(segments);
+		if (segments) {
+			set$1(currentValue, void 0);
+			setCursorPosition(segments);
+		}
 	}
 	function clear(segmentType) {
 		const currentSegment = getCurrentSegment();
@@ -141,12 +144,16 @@ function useKeyboardHandler(options) {
 	function handleMouseDown(event) {
 		if (disabled || readonly || !(event.target instanceof HTMLInputElement)) return;
 		const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));
-		if (currentSegment) clickedSegment = currentSegment;
+		if (currentSegment) {
+			set$1(currentValue, void 0);
+			clickedSegment = currentSegment;
+		}
 	}
 	function handleClick(event) {
 		if (disabled || readonly || !(event.target instanceof HTMLInputElement)) return;
 		const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));
 		if (currentSegment) {
+			set$1(currentValue, void 0);
 			clickedSegment = currentSegment;
 			set$1(cursorPosition, currentSegment.end);
 			event.target.setSelectionRange(currentSegment.start, currentSegment.end);

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      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  function handleDigitPressed(event: KeyboardEvent, digit: string): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n    const position = event.target.selectionStart ?? 0;\n    const currentSegment = getCurrentSegment(position);\n    if (!currentSegment || isNaN(parseInt(digit)))\n      return;\n    const segmentType = currentSegment.type;\n    if (!isDateTimeSegmentType(segmentType))\n      return;\n\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(currentSegment);\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 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  function handleKeyDown(event: KeyboardEvent): void {\n    if (disabled || readonly)\n      return;\n    const { key } = event;\n    if (key === 'Tab')\n      return;\n    event.preventDefault();\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  }\n\n  // Track the segment that was clicked, so handleFocus can restore it after DOM updates\n  let clickedSegment: Segment | undefined;\n\n  // Capture clicked segment on mousedown (fires before focus event)\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      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      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 handleFocus(): void {\n    // If we just clicked on a segment, restore that selection\n    // (the selection may have been lost due to menu opening/DOM updates)\n    if (clickedSegment) {\n      setCursorPosition(clickedSegment);\n      clickedSegment = undefined;\n      return;\n    }\n\n    // Only select first segment if no text is currently selected in the input\n    const input = get(textInput);\n    if (input && input.selectionStart !== input.selectionEnd)\n      return;\n    const firstSegment = get(segmentPositions)[0];\n    if (firstSegment)\n      setCursorPosition(firstSegment);\n  }\n\n  function handleBlur(): void {\n    // Reset cursor position and clicked segment when input loses focus\n    // This prevents \"blinking\" when re-focusing on a different segment\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    setSegment,\n  };\n}\n"],"mappings":"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"}
+{"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  function handleDigitPressed(event: KeyboardEvent, digit: string): void {\n    if (!(event.target instanceof HTMLInputElement))\n      return;\n    const position = event.target.selectionStart ?? 0;\n    const currentSegment = getCurrentSegment(position);\n    if (!currentSegment || isNaN(parseInt(digit)))\n      return;\n    const segmentType = currentSegment.type;\n    if (!isDateTimeSegmentType(segmentType))\n      return;\n\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(currentSegment);\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 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  function handleKeyDown(event: KeyboardEvent): void {\n    if (disabled || readonly)\n      return;\n    const { key } = event;\n    if (key === 'Tab')\n      return;\n    event.preventDefault();\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  }\n\n  // Track the segment that was clicked, so handleFocus can restore it after DOM updates\n  let clickedSegment: Segment | undefined;\n\n  // Capture clicked segment on mousedown (fires before focus event)\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      // Reset in-progress digit buffer: switching segments must not carry typed digits over,\n      // otherwise a leftover digit from another segment combines with the next keystroke\n      // (e.g. type \"1\" in HH, click mm, type \"3\" → mm becomes 13 instead of 3).\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 handleFocus(): void {\n    // If we just clicked on a segment, restore that selection\n    // (the selection may have been lost due to menu opening/DOM updates)\n    if (clickedSegment) {\n      setCursorPosition(clickedSegment);\n      clickedSegment = undefined;\n      return;\n    }\n\n    // Only select first segment if no text is currently selected in the input\n    const input = get(textInput);\n    if (input && input.selectionStart !== input.selectionEnd)\n      return;\n    const firstSegment = get(segmentPositions)[0];\n    if (firstSegment)\n      setCursorPosition(firstSegment);\n  }\n\n  function handleBlur(): void {\n    // Reset cursor position and clicked segment when input loses focus\n    // This prevents \"blinking\" when re-focusing on a different segment\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    setSegment,\n  };\n}\n"],"mappings":"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"}

package/dist/composables/forms/auto-complete/keyboard-navigation.js

@@ -38,35 +38,37 @@ function useAutoCompleteKeyboardNavigation(options, deps) {
 	function submitClosestForm() {
 		(get(deps.activator)?.closest("form"))?.dispatchEvent(new Event("submit"));
 	}
-	function handleOpenMenuEnter(event) {
+	function tryApplyHighlight(event) {
 		const filteredOptions = get(deps.filteredOptions);
-		const highlightedIndex = get(deps.highlightedIndex);
+		if (get(deps.highlightedIndex) <= -1 || filteredOptions.length === 0) return false;
+		deps.applyHighlighted();
+		event.preventDefault();
+		return true;
+	}
+	function tryApplyCustom(event, requireEmptyOptions) {
 		const customValue = toValue(options.customValue);
-		const multiple = toValue(options.multiple);
 		const internalSearch = get(deps.internalSearch);
-		if (get(deps.userNavigated) && highlightedIndex > -1 && filteredOptions.length > 0) {
-			deps.applyHighlighted();
-			event.preventDefault();
-			return true;
-		}
-		if (customValue && internalSearch && !highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch)) {
-			applyCustomValue(event, multiple);
-			return true;
-		}
-		if (highlightedIndex > -1 && filteredOptions.length > 0) {
-			deps.applyHighlighted();
-			event.preventDefault();
-			return true;
-		}
-		if (filteredOptions.length === 0 && customValue && internalSearch) {
-			applyCustomValue(event, multiple);
-			return true;
-		}
-		return false;
+		if (!customValue || !internalSearch) return false;
+		const filteredOptions = get(deps.filteredOptions);
+		if (requireEmptyOptions) {
+			if (filteredOptions.length > 0) return false;
+		} else if (highlightedMatchesSearch(filteredOptions, get(deps.highlightedIndex), internalSearch)) return false;
+		applyCustomValue(event, toValue(options.multiple));
+		return true;
+	}
+	function handleOpenMenuEnter(event) {
+		if (get(deps.userNavigated) && tryApplyHighlight(event)) return true;
+		if (tryApplyCustom(event, false)) return true;
+		if (tryApplyHighlight(event)) return true;
+		return tryApplyCustom(event, true);
 	}
 	function onEnter(event) {
-		if (get(deps.isOpen) && handleOpenMenuEnter(event)) return;
-		if (!get(deps.isOpen) && get(deps.value).length === 0) {
+		if (get(deps.isOpen)) {
+			if (handleOpenMenuEnter(event)) return;
+			event.preventDefault();
+			return;
+		}
+		if (get(deps.value).length === 0) {
 			set(deps.isOpen, true);
 			return event.preventDefault();
 		}

package/dist/composables/forms/auto-complete/keyboard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  userNavigated: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const customValue = toValue(options.customValue);\n    const multiple = toValue(options.multiple);\n    const internalSearch = get(deps.internalSearch);\n\n    const userNavigated = get(deps.userNavigated);\n\n    if (userNavigated && highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (customValue && internalSearch && !highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch)) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    if (highlightedIndex > -1 && filteredOptions.length > 0) {\n      deps.applyHighlighted();\n      event.preventDefault();\n      return true;\n    }\n\n    if (filteredOptions.length === 0 && customValue && internalSearch) {\n      applyCustomValue(event, multiple);\n      return true;\n    }\n\n    return false;\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen) && handleOpenMenuEnter(event))\n      return;\n\n    // Nothing selected, menu closed: open menu\n    if (!get(deps.isOpen) && get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Fallback: submit parent form\n    submitClosestForm();\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = toValue(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = toValue(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (toValue(options.chips)) {\n          set(focusedValueIndex, total - 1);\n        }\n        else {\n          const lastItem = value[total - 1];\n          if (lastItem !== undefined)\n            deps.removeValue(lastItem);\n        }\n      }\n      else {\n        deps.clear();\n      }\n    }\n  }\n\n  // Watch value changes to reset focused index\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = toValue(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const activator = get(deps.activator);\n      const element = activator?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n      element?.focus();\n    });\n  });\n\n  return {\n    // eslint-disable-next-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keyboard-navigation.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/keyboard-navigation.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\nimport { get, set } from '@vueuse/shared';\n\nexport interface UseAutoCompleteKeyboardNavigationOptions {\n  /** Whether multiple items can be selected. */\n  multiple: MaybeRefOrGetter<boolean>;\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether selected values are displayed as chips. */\n  chips: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationDeps<TItem> {\n  internalSearch: Ref<string>;\n  value: Ref<TItem[]>;\n  filteredOptions: Ref<TItem[]>;\n  isOpen: Ref<boolean>;\n  highlightedIndex: Ref<number>;\n  userNavigated: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  applyHighlighted: () => void;\n  clear: () => void;\n  removeValue: (item: TItem) => void;\n  setSearchAsValue: () => void;\n  getText: (item: TItem) => string | undefined;\n  activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;\n}\n\nexport interface UseAutoCompleteKeyboardNavigationReturn {\n  focusedValueIndex: Ref<number>;\n  moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;\n  onEnter: (event: KeyboardEvent) => void;\n  onTab: (event: KeyboardEvent) => void;\n  onInputDeletePressed: () => void;\n  setValueFocus: (index: number) => void;\n}\n\nexport function useAutoCompleteKeyboardNavigation<TItem>(\n  options: UseAutoCompleteKeyboardNavigationOptions,\n  deps: UseAutoCompleteKeyboardNavigationDeps<TItem>,\n): UseAutoCompleteKeyboardNavigationReturn {\n  const focusedValueIndex = ref<number>(-1);\n\n  function setValueFocus(index: number): void {\n    set(focusedValueIndex, index);\n  }\n\n  function moveSelectedValueHighlight(event: KeyboardEvent, next: boolean): void {\n    const multiple = toValue(options.multiple);\n    const internalSearchValue = get(deps.internalSearch);\n\n    if (!multiple || internalSearchValue.length > 0)\n      return;\n\n    event.preventDefault();\n    const total = get(deps.value).length;\n\n    let current = get(focusedValueIndex);\n\n    if (current === -1) {\n      set(focusedValueIndex, next ? 0 : total - 1);\n      return;\n    }\n\n    const move = next ? 1 : -1;\n    current += move;\n\n    if (current < 0 || current >= total) {\n      set(focusedValueIndex, -1);\n      set(deps.searchInputFocused, true);\n    }\n    else {\n      set(focusedValueIndex, current);\n    }\n  }\n\n  function highlightedMatchesSearch(filteredOptions: TItem[], highlightedIndex: number, search: string): boolean {\n    if (highlightedIndex < 0 || highlightedIndex >= filteredOptions.length)\n      return false;\n\n    const option = filteredOptions[highlightedIndex];\n    if (typeof option === 'string')\n      return option === search;\n\n    if (option && typeof option === 'object')\n      return (deps.getText(option) ?? '') === search;\n\n    return false;\n  }\n\n  function applyCustomValue(event: KeyboardEvent, multiple: boolean): void {\n    deps.setSearchAsValue();\n    if (!multiple)\n      set(deps.isOpen, false);\n    event.preventDefault();\n  }\n\n  function submitClosestForm(): void {\n    const activator = get(deps.activator);\n    const form = activator?.closest('form');\n    form?.dispatchEvent(new Event('submit'));\n  }\n\n  function tryApplyHighlight(event: KeyboardEvent): boolean {\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    if (highlightedIndex <= -1 || filteredOptions.length === 0)\n      return false;\n\n    deps.applyHighlighted();\n    event.preventDefault();\n    return true;\n  }\n\n  function tryApplyCustom(event: KeyboardEvent, requireEmptyOptions: boolean): boolean {\n    const customValue = toValue(options.customValue);\n    const internalSearch = get(deps.internalSearch);\n    if (!customValue || !internalSearch)\n      return false;\n\n    const filteredOptions = get(deps.filteredOptions);\n    if (requireEmptyOptions) {\n      if (filteredOptions.length > 0)\n        return false;\n    }\n    else {\n      const highlightedIndex = get(deps.highlightedIndex);\n      if (highlightedMatchesSearch(filteredOptions, highlightedIndex, internalSearch))\n        return false;\n    }\n\n    applyCustomValue(event, toValue(options.multiple));\n    return true;\n  }\n\n  function handleOpenMenuEnter(event: KeyboardEvent): boolean {\n    // Prefer the user's explicit navigation.\n    if (get(deps.userNavigated) && tryApplyHighlight(event))\n      return true;\n\n    // Fall back to a typed custom value when it differs from the highlight.\n    if (tryApplyCustom(event, false))\n      return true;\n\n    // Use the (auto-)highlighted option if there is one.\n    if (tryApplyHighlight(event))\n      return true;\n\n    // No options matched but custom values are allowed — accept the typed text.\n    return tryApplyCustom(event, true);\n  }\n\n  function onEnter(event: KeyboardEvent): void {\n    if (get(deps.isOpen)) {\n      if (handleOpenMenuEnter(event))\n        return;\n\n      // Menu is open but no actionable selection (e.g. typed text with no\n      // matches and customValue=false, or no highlighted option). Swallow\n      // Enter so it does not bubble up and submit a surrounding form.\n      event.preventDefault();\n      return;\n    }\n\n    // Nothing selected, menu closed: open menu\n    if (get(deps.value).length === 0) {\n      set(deps.isOpen, true);\n      return event.preventDefault();\n    }\n\n    // Menu closed with a value selected: let Enter submit the parent form.\n    submitClosestForm();\n  }\n\n  function onTab(event: KeyboardEvent): void {\n    const isOpen = get(deps.isOpen);\n    const filteredOptions = get(deps.filteredOptions);\n    const highlightedIndex = get(deps.highlightedIndex);\n    const multiple = toValue(options.multiple);\n\n    if (isOpen && filteredOptions.length > 0 && highlightedIndex > -1 && !multiple) {\n      deps.applyHighlighted();\n      event.preventDefault();\n    }\n  }\n\n  function onInputDeletePressed(): void {\n    const internalSearch = get(deps.internalSearch);\n    const value = get(deps.value);\n    const total = value.length;\n    const multiple = toValue(options.multiple);\n\n    if (!internalSearch && total > 0) {\n      if (multiple) {\n        if (toValue(options.chips)) {\n          set(focusedValueIndex, total - 1);\n        }\n        else {\n          const lastItem = value[total - 1];\n          if (lastItem !== undefined)\n            deps.removeValue(lastItem);\n        }\n      }\n      else {\n        deps.clear();\n      }\n    }\n  }\n\n  // Watch value changes to reset focused index\n  watch(deps.value, () => {\n    setValueFocus(-1);\n  });\n\n  // Watch focused value index to handle chip focus\n  watch(focusedValueIndex, async (index) => {\n    const multiple = toValue(options.multiple);\n    if (index === -1 || !multiple)\n      return;\n\n    await nextTick(() => {\n      const activator = get(deps.activator);\n      const element = activator?.querySelector<HTMLElement>(`[data-index=\"${index}\"]`);\n      element?.focus();\n    });\n  });\n\n  return {\n    // eslint-disable-next-line @rotki/composable-return-readonly -- written by focus.ts onInputFocused\n    focusedValueIndex,\n    moveSelectedValueHighlight,\n    onEnter,\n    onInputDeletePressed,\n    onTab,\n    setValueFocus,\n  };\n}\n"],"mappings":"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"}

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "@rotki/ui-library",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rotki/ui-library",
-  "version": "2.20.0",
+  "version": "2.20.2",
   "description": "A vue design system and component library for rotki",
   "type": "module",
   "keywords": [