@rotki/ui-library 2.14.1 → 2.16.0

package/dist/composables/floating.d.ts

@@ -0,0 +1,60 @@
+import { type VirtualElement as FloatingVirtualElement } from '@floating-ui/dom';
+import { type MaybeElement } from '@vueuse/core';
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+type VirtualElement = FloatingVirtualElement;
+export declare const Placement: {
+    readonly bottom: "bottom";
+    readonly bottomEnd: "bottom-end";
+    readonly bottomStart: "bottom-start";
+    readonly left: "left";
+    readonly leftEnd: "left-end";
+    readonly leftStart: "left-start";
+    readonly right: "right";
+    readonly rightEnd: "right-end";
+    readonly rightStart: "right-start";
+    readonly top: "top";
+    readonly topEnd: "top-end";
+    readonly topStart: "top-start";
+};
+export type Placement = (typeof Placement)[keyof typeof Placement];
+export declare const Strategy: {
+    readonly absolute: "absolute";
+    readonly fixed: "fixed";
+};
+export type Strategy = (typeof Strategy)[keyof typeof Strategy];
+export interface FloatingOptions {
+    /** Preferred placement relative to the reference element. @default Placement.bottom */
+    placement?: Placement;
+    /** CSS positioning strategy. @default Strategy.absolute */
+    strategy?: Strategy;
+    /** Main-axis and/or cross-axis offset from the reference element. @default 2 */
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    /** Whether to flip to the opposite side when overflowing. @default true */
+    flip?: boolean;
+    /** Padding from viewport edges for shift middleware. @default 8 */
+    shiftPadding?: number;
+    /** Whether to auto-update position on scroll/resize. @default true */
+    autoUpdate?: boolean | {
+        scroll?: boolean;
+        resize?: boolean;
+    };
+}
+export declare const DEFAULT_FLOATING_OPTIONS: Required<FloatingOptions>;
+export interface UseFloatingReturn {
+    currentPlacement: Readonly<Ref<Placement>>;
+    leavePending: Ref<boolean>;
+    onClose: (immediate?: boolean) => void;
+    onLeaveComplete: () => void;
+    onLeavePending: () => void;
+    onOpen: (immediate?: boolean) => void;
+    open: Ref<boolean>;
+    popover: Ref<MaybeElement>;
+    reference: Ref<HTMLElement | undefined>;
+    updatePosition: () => Promise<void>;
+    visible: Ref<boolean>;
+}
+export declare function useFloating(options: MaybeRefOrGetter<FloatingOptions>, disabled?: MaybeRefOrGetter<boolean>, openDelay?: MaybeRefOrGetter<number>, closeDelay?: MaybeRefOrGetter<number>, virtualReference?: MaybeRefOrGetter<Element | VirtualElement | undefined>): UseFloatingReturn;
+export {};

package/dist/composables/floating.js

@@ -0,0 +1,167 @@
+import { useTimeoutManager } from "./timeout-manager.js";
+import { onMounted, readonly, ref, shallowRef, toValue, watchEffect } from "vue";
+import { unrefElement } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/composables/floating.ts
+var Placement = {
+	bottom: "bottom",
+	bottomEnd: "bottom-end",
+	bottomStart: "bottom-start",
+	left: "left",
+	leftEnd: "left-end",
+	leftStart: "left-start",
+	right: "right",
+	rightEnd: "right-end",
+	rightStart: "right-start",
+	top: "top",
+	topEnd: "top-end",
+	topStart: "top-start"
+};
+var Strategy = {
+	absolute: "absolute",
+	fixed: "fixed"
+};
+var DEFAULT_FLOATING_OPTIONS = {
+	autoUpdate: true,
+	flip: true,
+	offset: 2,
+	placement: Placement.bottom,
+	shiftPadding: 8,
+	strategy: Strategy.absolute
+};
+function buildMiddleware(opts, arrowEl) {
+	const mw = [];
+	const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;
+	if (typeof off === "number") mw.push(offset(off));
+	else {
+		const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === "number" ? DEFAULT_FLOATING_OPTIONS.offset : 0;
+		mw.push(offset({
+			mainAxis: off.mainAxis ?? defaultOffset,
+			crossAxis: off.crossAxis ?? 0
+		}));
+	}
+	if (opts.flip !== false) mw.push(flip());
+	mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding }));
+	if (arrowEl) mw.push(arrow({
+		element: arrowEl,
+		padding: 4
+	}));
+	return mw;
+}
+function applyArrowStyles(arrowEl, result) {
+	const arrowData = result.middlewareData.arrow;
+	if (!arrowEl || !arrowData) return;
+	Object.assign(arrowEl.style, {
+		left: arrowData.x != null ? `${arrowData.x}px` : "",
+		top: arrowData.y != null ? `${arrowData.y}px` : ""
+	});
+}
+function useFloating(options, disabled = false, openDelay = 0, closeDelay = 0, virtualReference) {
+	const reference = ref();
+	const popover = ref();
+	const open = shallowRef(false);
+	const visible = shallowRef(false);
+	const leavePending = shallowRef(false);
+	const currentPlacement = shallowRef(toValue(options).placement ?? DEFAULT_FLOATING_OPTIONS.placement);
+	let cleanupAutoUpdate = null;
+	const openTimeoutManager = useTimeoutManager();
+	const closeTimeoutManager = useTimeoutManager();
+	function onLeaveComplete() {
+		set$1(visible, false);
+	}
+	function onOpen(immediate = false) {
+		if (toValue(disabled)) return;
+		closeTimeoutManager.clear();
+		set$1(leavePending, false);
+		if (!openTimeoutManager.isActive()) {
+			set$1(visible, true);
+			openTimeoutManager.create(() => {
+				set$1(open, true);
+			}, immediate ? 0 : toValue(openDelay));
+		}
+	}
+	function onClose(immediate = false) {
+		if (toValue(disabled)) return;
+		openTimeoutManager.clear();
+		if (!closeTimeoutManager.isActive()) closeTimeoutManager.create(() => {
+			if (!get$1(open)) onLeaveComplete();
+			set$1(open, false);
+		}, immediate ? 0 : toValue(closeDelay));
+	}
+	function onLeavePending() {
+		set$1(leavePending, true);
+	}
+	function getValidElements() {
+		if (!get$1(popover) || !get$1(reference) && !toValue(virtualReference)) return null;
+		const popoverEl = unrefElement(popover);
+		const referenceEl = toValue(virtualReference) || unrefElement(reference);
+		if (!(popoverEl instanceof HTMLElement) || !referenceEl) return null;
+		return {
+			popoverEl,
+			referenceEl
+		};
+	}
+	async function updatePosition() {
+		const elements = getValidElements();
+		if (!elements) return;
+		const { popoverEl, referenceEl } = elements;
+		const opts = toValue(options);
+		const arrowEl = popoverEl.querySelector("[data-id=\"arrow\"]");
+		const strategy = opts.strategy ?? DEFAULT_FLOATING_OPTIONS.strategy;
+		const result = await computePosition(referenceEl, popoverEl, {
+			middleware: buildMiddleware(opts, arrowEl),
+			placement: opts.placement ?? DEFAULT_FLOATING_OPTIONS.placement,
+			strategy
+		});
+		Object.assign(popoverEl.style, {
+			left: `${result.x}px`,
+			position: strategy,
+			top: `${result.y}px`
+		});
+		set$1(currentPlacement, result.placement);
+		applyArrowStyles(arrowEl, result);
+	}
+	function startAutoUpdate() {
+		stopAutoUpdate();
+		const elements = getValidElements();
+		if (!elements) return;
+		const { popoverEl, referenceEl } = elements;
+		const autoUpdateOpt = toValue(options).autoUpdate ?? DEFAULT_FLOATING_OPTIONS.autoUpdate;
+		if (autoUpdateOpt === false) return;
+		cleanupAutoUpdate = autoUpdate(referenceEl, popoverEl, () => {
+			updatePosition().catch(() => {});
+		}, typeof autoUpdateOpt === "object" ? {
+			ancestorResize: autoUpdateOpt.resize ?? true,
+			ancestorScroll: autoUpdateOpt.scroll ?? true,
+			elementResize: true
+		} : void 0);
+	}
+	function stopAutoUpdate() {
+		cleanupAutoUpdate?.();
+		cleanupAutoUpdate = null;
+	}
+	onMounted(() => {
+		watchEffect((onCleanup) => {
+			startAutoUpdate();
+			onCleanup(stopAutoUpdate);
+		});
+	});
+	return {
+		currentPlacement: readonly(currentPlacement),
+		leavePending,
+		onClose,
+		onLeaveComplete,
+		onLeavePending,
+		onOpen,
+		open,
+		popover,
+		reference,
+		updatePosition,
+		visible
+	};
+}
+//#endregion
+export { Placement, Strategy, useFloating };
+
+//# sourceMappingURL=floating.js.map

package/dist/composables/floating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating.js","names":[],"sources":["../../src/composables/floating.ts"],"sourcesContent":["import {\n  arrow,\n  autoUpdate,\n  computePosition,\n  type ComputePositionReturn,\n  flip,\n  type VirtualElement as FloatingVirtualElement,\n  type Middleware,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { type MaybeElement, unrefElement } from '@vueuse/core';\nimport { type MaybeRefOrGetter, onMounted, type Ref, ref, watchEffect } from 'vue';\nimport { useTimeoutManager } from './timeout-manager';\n\ntype VirtualElement = FloatingVirtualElement;\n\nexport const Placement = {\n  bottom: 'bottom',\n  bottomEnd: 'bottom-end',\n  bottomStart: 'bottom-start',\n  left: 'left',\n  leftEnd: 'left-end',\n  leftStart: 'left-start',\n  right: 'right',\n  rightEnd: 'right-end',\n  rightStart: 'right-start',\n  top: 'top',\n  topEnd: 'top-end',\n  topStart: 'top-start',\n} as const;\n\nexport type Placement = (typeof Placement)[keyof typeof Placement];\n\nexport const Strategy = {\n  absolute: 'absolute',\n  fixed: 'fixed',\n} as const;\n\nexport type Strategy = (typeof Strategy)[keyof typeof Strategy];\n\nexport interface FloatingOptions {\n  /** Preferred placement relative to the reference element. @default Placement.bottom */\n  placement?: Placement;\n  /** CSS positioning strategy. @default Strategy.absolute */\n  strategy?: Strategy;\n  /** Main-axis and/or cross-axis offset from the reference element. @default 2 */\n  offset?: number | { mainAxis?: number; crossAxis?: number };\n  /** Whether to flip to the opposite side when overflowing. @default true */\n  flip?: boolean;\n  /** Padding from viewport edges for shift middleware. @default 8 */\n  shiftPadding?: number;\n  /** Whether to auto-update position on scroll/resize. @default true */\n  autoUpdate?: boolean | { scroll?: boolean; resize?: boolean };\n}\n\nexport const DEFAULT_FLOATING_OPTIONS: Required<FloatingOptions> = {\n  autoUpdate: true,\n  flip: true,\n  offset: 2,\n  placement: Placement.bottom,\n  shiftPadding: 8,\n  strategy: Strategy.absolute,\n};\n\nexport interface UseFloatingReturn {\n  currentPlacement: Readonly<Ref<Placement>>;\n  leavePending: Ref<boolean>;\n  onClose: (immediate?: boolean) => void;\n  onLeaveComplete: () => void;\n  onLeavePending: () => void;\n  onOpen: (immediate?: boolean) => void;\n  open: Ref<boolean>;\n  popover: Ref<MaybeElement>;\n  reference: Ref<HTMLElement | undefined>;\n  updatePosition: () => Promise<void>;\n  visible: Ref<boolean>;\n}\n\nfunction buildMiddleware(opts: FloatingOptions, arrowEl: HTMLElement | null): Middleware[] {\n  const mw: Middleware[] = [];\n\n  const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;\n  if (typeof off === 'number') {\n    mw.push(offset(off));\n  }\n  else {\n    const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === 'number' ? DEFAULT_FLOATING_OPTIONS.offset : 0;\n    mw.push(offset({ mainAxis: off.mainAxis ?? defaultOffset, crossAxis: off.crossAxis ?? 0 }));\n  }\n\n  if (opts.flip !== false)\n    mw.push(flip());\n\n  mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding }));\n\n  if (arrowEl)\n    mw.push(arrow({ element: arrowEl, padding: 4 }));\n\n  return mw;\n}\n\nfunction applyArrowStyles(arrowEl: HTMLElement | null, result: ComputePositionReturn): void {\n  const arrowData = result.middlewareData.arrow;\n  if (!arrowEl || !arrowData)\n    return;\n\n  Object.assign(arrowEl.style, {\n    left: arrowData.x != null ? `${arrowData.x}px` : '',\n    top: arrowData.y != null ? `${arrowData.y}px` : '',\n  });\n}\n\nexport function useFloating(\n  options: MaybeRefOrGetter<FloatingOptions>,\n  disabled: MaybeRefOrGetter<boolean> = false,\n  openDelay: MaybeRefOrGetter<number> = 0,\n  closeDelay: MaybeRefOrGetter<number> = 0,\n  virtualReference?: MaybeRefOrGetter<Element | VirtualElement | undefined>,\n): UseFloatingReturn {\n  const reference = ref<HTMLElement>();\n  const popover = ref<MaybeElement>();\n  const open = shallowRef<boolean>(false);\n  const visible = shallowRef<boolean>(false);\n  const leavePending = shallowRef<boolean>(false);\n  const currentPlacement = shallowRef<Placement>(toValue(options).placement ?? DEFAULT_FLOATING_OPTIONS.placement);\n\n  let cleanupAutoUpdate: (() => void) | null = null;\n\n  const openTimeoutManager = useTimeoutManager();\n  const closeTimeoutManager = useTimeoutManager();\n\n  function onLeaveComplete(): void {\n    set(visible, false);\n  }\n\n  function onOpen(immediate: boolean = false): void {\n    if (toValue(disabled))\n      return;\n\n    closeTimeoutManager.clear();\n\n    set(leavePending, false);\n    if (!openTimeoutManager.isActive()) {\n      set(visible, true);\n\n      openTimeoutManager.create(\n        () => {\n          set(open, true);\n        },\n        immediate ? 0 : toValue(openDelay),\n      );\n    }\n  }\n\n  function onClose(immediate: boolean = false): void {\n    if (toValue(disabled))\n      return;\n\n    openTimeoutManager.clear();\n\n    if (!closeTimeoutManager.isActive()) {\n      closeTimeoutManager.create(\n        () => {\n          if (!get(open))\n            onLeaveComplete();\n\n          set(open, false);\n        },\n        immediate ? 0 : toValue(closeDelay),\n      );\n    }\n  }\n\n  function onLeavePending(): void {\n    set(leavePending, true);\n  }\n\n  function getValidElements(): { popoverEl: HTMLElement; referenceEl: Element | VirtualElement } | null {\n    if (!get(popover) || (!get(reference) && !toValue(virtualReference)))\n      return null;\n\n    const popoverEl = unrefElement(popover);\n    const referenceEl = toValue(virtualReference) || unrefElement(reference);\n\n    if (!(popoverEl instanceof HTMLElement) || !referenceEl)\n      return null;\n\n    return { popoverEl, referenceEl };\n  }\n\n  async function updatePosition(): Promise<void> {\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popoverEl, referenceEl } = elements;\n    const opts = toValue(options);\n    const arrowEl = popoverEl.querySelector<HTMLElement>('[data-id=\"arrow\"]');\n    const strategy = opts.strategy ?? DEFAULT_FLOATING_OPTIONS.strategy;\n\n    const result = await computePosition(referenceEl, popoverEl, {\n      middleware: buildMiddleware(opts, arrowEl),\n      placement: opts.placement ?? DEFAULT_FLOATING_OPTIONS.placement,\n      strategy,\n    });\n\n    Object.assign(popoverEl.style, {\n      left: `${result.x}px`,\n      position: strategy,\n      top: `${result.y}px`,\n    });\n\n    set(currentPlacement, result.placement);\n    applyArrowStyles(arrowEl, result);\n  }\n\n  function startAutoUpdate(): void {\n    stopAutoUpdate();\n    const elements = getValidElements();\n    if (!elements)\n      return;\n\n    const { popoverEl, referenceEl } = elements;\n    const opts = toValue(options);\n    const autoUpdateOpt = opts.autoUpdate ?? DEFAULT_FLOATING_OPTIONS.autoUpdate;\n\n    if (autoUpdateOpt === false)\n      return;\n\n    const autoUpdateOptions = typeof autoUpdateOpt === 'object'\n      ? {\n          ancestorResize: autoUpdateOpt.resize ?? true,\n          ancestorScroll: autoUpdateOpt.scroll ?? true,\n          elementResize: true,\n        }\n      : undefined;\n\n    cleanupAutoUpdate = autoUpdate(\n      referenceEl,\n      popoverEl,\n      () => { updatePosition().catch(() => {}); },\n      autoUpdateOptions,\n    );\n  }\n\n  function stopAutoUpdate(): void {\n    cleanupAutoUpdate?.();\n    cleanupAutoUpdate = null;\n  }\n\n  onMounted(() => {\n    watchEffect((onCleanup) => {\n      startAutoUpdate();\n      onCleanup(stopAutoUpdate);\n    });\n  });\n\n  return {\n    currentPlacement: readonly(currentPlacement),\n    leavePending, // eslint-disable-line @rotki/composable-return-readonly -- written by consumer transition hooks\n    onClose,\n    onLeaveComplete,\n    onLeavePending,\n    onOpen,\n    open, // eslint-disable-line @rotki/composable-return-readonly -- v-model bound by consumers\n    popover, // eslint-disable-line @rotki/composable-return-readonly -- template ref bound by consumers\n    reference, // eslint-disable-line @rotki/composable-return-readonly -- template ref bound by consumers\n    updatePosition,\n    visible, // eslint-disable-line @rotki/composable-return-readonly -- used as v-if condition by consumers\n  };\n}\n"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
-import type { ComputedRef, MaybeRef, Ref, TemplateRef } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
 export interface UseAutoCompleteFocusOptions {
     /** Whether custom (free-text) values are allowed. */
-    customValue: MaybeRef<boolean>;
+    customValue: MaybeRefOrGetter<boolean>;
     /** Whether to apply the current value as the search text when focused. */
-    shouldApplyValueAsSearch: MaybeRef<boolean>;
+    shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;
     /** Whether the autocomplete is disabled. */
-    disabled: MaybeRef<boolean>;
+    disabled: MaybeRefOrGetter<boolean>;
 }
 export interface UseAutoCompleteFocusDeps {
     activatorFocused: Ref<boolean>;

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

@@ -1,82 +1,62 @@
-import { computed, watch, nextTick } from "vue";
-import { get, set } from "@vueuse/shared";
+import { computed, nextTick, toValue, watch } from "vue";
 import { watchDebounced } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/composables/forms/auto-complete/focus.ts
 function useAutoCompleteFocus(options, deps) {
-  const anyFocused = computed(
-    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin)
-  );
-  const inputClass = computed(() => {
-    const isFocused = get(anyFocused);
-    const isDisabled = get(options.disabled);
-    const shouldApply = get(options.shouldApplyValueAsSearch);
-    const hasSearch = get(deps.internalSearch);
-    if ((!isFocused || isDisabled) && !shouldApply)
-      return "w-0 h-0";
-    if (hasSearch)
-      return "flex-1 min-w-[4rem]";
-    return "flex-1 min-w-0";
-  });
-  async function setInputFocus() {
-    await nextTick(() => {
-      set(deps.searchInputFocused, true);
-    });
-  }
-  async function onActivatorFocused() {
-    await nextTick(() => {
-      if (!get(deps.activatorFocused)) {
-        set(deps.searchInputFocused, true);
-      }
-    });
-  }
-  function onInputFocused() {
-    set(deps.focusedValueIndex, -1);
-    const shouldApply = get(options.shouldApplyValueAsSearch);
-    if (shouldApply) {
-      const textInput = get(deps.textInput);
-      textInput?.select();
-    }
-    if (!get(deps.isOpen)) {
-      set(deps.justOpened, true);
-    }
-  }
-  let pendingCustomSearch = "";
-  watch(anyFocused, (focused) => {
-    if (!focused && get(options.customValue)) {
-      pendingCustomSearch = get(deps.internalSearch);
-    }
-  });
-  watchDebounced(
-    anyFocused,
-    (focused) => {
-      if (!focused) {
-        set(deps.isOpen, false);
-        const customValue = get(options.customValue);
-        const searchToUse = pendingCustomSearch;
-        pendingCustomSearch = "";
-        if (customValue && searchToUse) {
-          deps.updateInternalSearch(searchToUse);
-          deps.setSearchAsValue();
-        }
-        const shouldApply = get(options.shouldApplyValueAsSearch);
-        if (!shouldApply) {
-          deps.updateInternalSearch();
-        }
-      }
-    },
-    {
-      debounce: 200,
-      maxWait: 400
-    }
-  );
-  return {
-    anyFocused,
-    inputClass,
-    onActivatorFocused,
-    onInputFocused,
-    setInputFocus
-  };
+	const anyFocused = computed(() => get$1(deps.activatorFocusedWithin) || get$1(deps.menuWrapperFocusedWithin));
+	const inputClass = computed(() => {
+		const isFocused = get$1(anyFocused);
+		const isDisabled = toValue(options.disabled);
+		const shouldApply = toValue(options.shouldApplyValueAsSearch);
+		const hasSearch = get$1(deps.internalSearch);
+		if ((!isFocused || isDisabled) && !shouldApply) return "w-0 h-0";
+		if (hasSearch) return "flex-1 min-w-[4rem]";
+		return "flex-1 min-w-0";
+	});
+	async function setInputFocus() {
+		await nextTick(() => {
+			set$1(deps.searchInputFocused, true);
+		});
+	}
+	async function onActivatorFocused() {
+		await nextTick(() => {
+			if (!get$1(deps.activatorFocused)) set$1(deps.searchInputFocused, true);
+		});
+	}
+	function onInputFocused() {
+		set$1(deps.focusedValueIndex, -1);
+		if (toValue(options.shouldApplyValueAsSearch)) get$1(deps.textInput)?.select();
+		if (!get$1(deps.isOpen)) set$1(deps.justOpened, true);
+	}
+	let pendingCustomSearch = "";
+	watch(anyFocused, (focused) => {
+		if (!focused && toValue(options.customValue)) pendingCustomSearch = get$1(deps.internalSearch);
+	});
+	watchDebounced(anyFocused, (focused) => {
+		if (!focused) {
+			set$1(deps.isOpen, false);
+			const customValue = toValue(options.customValue);
+			const searchToUse = pendingCustomSearch;
+			pendingCustomSearch = "";
+			if (customValue && searchToUse) {
+				deps.updateInternalSearch(searchToUse);
+				deps.setSearchAsValue();
+			}
+			if (!toValue(options.shouldApplyValueAsSearch)) deps.updateInternalSearch();
+		}
+	}, {
+		debounce: 100,
+		maxWait: 200
+	});
+	return {
+		anyFocused,
+		inputClass,
+		onActivatorFocused,
+		onInputFocused,
+		setInputFocus
+	};
 }
-export {
-  useAutoCompleteFocus
-};
-//# sourceMappingURL=focus.js.map
+//#endregion
+export { useAutoCompleteFocus };
+
+//# sourceMappingURL=focus.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"focus.js","sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRef, Ref, TemplateRef } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRef<boolean>;\n  /** Whether to apply the current value as the search text when focused. */\n  shouldApplyValueAsSearch: MaybeRef<boolean>;\n  /** Whether the autocomplete is disabled. */\n  disabled: MaybeRef<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps {\n  activatorFocused: Ref<boolean>;\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined> | TemplateRef<HTMLInputElement>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onActivatorFocused: () => Promise<void>;\n  onInputFocused: () => void;\n  setInputFocus: () => Promise<void>;\n}\n\nexport function useAutoCompleteFocus(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps,\n): UseAutoCompleteFocusReturn {\n  const anyFocused = computed<boolean>(\n    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = get(options.disabled);\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  async function setInputFocus(): Promise<void> {\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  async function onActivatorFocused(): Promise<void> {\n    await nextTick(() => {\n      if (!get(deps.activatorFocused)) {\n        set(deps.searchInputFocused, true);\n      }\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    const shouldApply = get(options.shouldApplyValueAsSearch);\n    if (shouldApply) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  // Capture the search value immediately when focus is lost, before the debounced\n  // handler fires. Other watchers (value.ts) may clear internalSearch when isOpen\n  // changes, so we need to preserve it for the custom value blur flow.\n  let pendingCustomSearch = '';\n\n  watch(anyFocused, (focused) => {\n    if (!focused && get(options.customValue)) {\n      pendingCustomSearch = get(deps.internalSearch);\n    }\n  });\n\n  // Close menu if the activator is not focused anymore\n  // Using debounced to avoid the menu closing momentarily while focus switches.\n  watchDebounced(\n    anyFocused,\n    (focused) => {\n      if (!focused) {\n        set(deps.isOpen, false);\n\n        const customValue = get(options.customValue);\n        const searchToUse = pendingCustomSearch;\n        pendingCustomSearch = '';\n\n        if (customValue && searchToUse) {\n          deps.updateInternalSearch(searchToUse);\n          deps.setSearchAsValue();\n        }\n\n        const shouldApply = get(options.shouldApplyValueAsSearch);\n        if (!shouldApply) {\n          deps.updateInternalSearch();\n        }\n      }\n    },\n    {\n      debounce: 200,\n      maxWait: 400,\n    },\n  );\n\n  return {\n    anyFocused,\n    inputClass,\n    onActivatorFocused,\n    onInputFocused,\n    setInputFocus,\n  };\n}\n"],"names":[],"mappings":";;;AAiCO,SAAS,qBACd,SACA,MAC4B;AAC5B,QAAM,aAAa;AAAA,IACjB,MAAM,IAAI,KAAK,sBAAsB,KAAK,IAAI,KAAK,wBAAwB;AAAA,EAAA;AAG7E,QAAM,aAAa,SAAiB,MAAM;AACxC,UAAM,YAAY,IAAI,UAAU;AAChC,UAAM,aAAa,IAAI,QAAQ,QAAQ;AACvC,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,UAAM,YAAY,IAAI,KAAK,cAAc;AAEzC,SAAK,CAAC,aAAa,eAAe,CAAC;AACjC,aAAO;AACT,QAAI;AACF,aAAO;AACT,WAAO;AAAA,EACT,CAAC;AAED,iBAAe,gBAA+B;AAC5C,UAAM,SAAS,MAAM;AACnB,UAAI,KAAK,oBAAoB,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,iBAAe,qBAAoC;AACjD,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG;AAC/B,YAAI,KAAK,oBAAoB,IAAI;AAAA,MACnC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,WAAS,iBAAuB;AAC9B,QAAI,KAAK,mBAAmB,EAAE;AAE9B,UAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,QAAI,aAAa;AACf,YAAM,YAAY,IAAI,KAAK,SAAS;AACpC,iBAAW,OAAA;AAAA,IACb;AAEA,QAAI,CAAC,IAAI,KAAK,MAAM,GAAG;AACrB,UAAI,KAAK,YAAY,IAAI;AAAA,IAC3B;AAAA,EACF;AAKA,MAAI,sBAAsB;AAE1B,QAAM,YAAY,CAAC,YAAY;AAC7B,QAAI,CAAC,WAAW,IAAI,QAAQ,WAAW,GAAG;AACxC,4BAAsB,IAAI,KAAK,cAAc;AAAA,IAC/C;AAAA,EACF,CAAC;AAID;AAAA,IACE;AAAA,IACA,CAAC,YAAY;AACX,UAAI,CAAC,SAAS;AACZ,YAAI,KAAK,QAAQ,KAAK;AAEtB,cAAM,cAAc,IAAI,QAAQ,WAAW;AAC3C,cAAM,cAAc;AACpB,8BAAsB;AAEtB,YAAI,eAAe,aAAa;AAC9B,eAAK,qBAAqB,WAAW;AACrC,eAAK,iBAAA;AAAA,QACP;AAEA,cAAM,cAAc,IAAI,QAAQ,wBAAwB;AACxD,YAAI,CAAC,aAAa;AAChB,eAAK,qBAAA;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"focus.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/focus.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport interface UseAutoCompleteFocusOptions {\n  /** Whether custom (free-text) values are allowed. */\n  customValue: MaybeRefOrGetter<boolean>;\n  /** Whether to apply the current value as the search text when focused. */\n  shouldApplyValueAsSearch: MaybeRefOrGetter<boolean>;\n  /** Whether the autocomplete is disabled. */\n  disabled: MaybeRefOrGetter<boolean>;\n}\n\nexport interface UseAutoCompleteFocusDeps {\n  activatorFocused: Ref<boolean>;\n  activatorFocusedWithin: Ref<boolean>;\n  focusedValueIndex: Ref<number>;\n  internalSearch: Ref<string>;\n  isOpen: Ref<boolean>;\n  justOpened: Ref<boolean>;\n  menuWrapperFocusedWithin: Ref<boolean>;\n  searchInputFocused: Ref<boolean>;\n  textInput: Ref<HTMLInputElement | undefined> | TemplateRef<HTMLInputElement>;\n  setSearchAsValue: () => void;\n  updateInternalSearch: (value?: string) => void;\n}\n\nexport interface UseAutoCompleteFocusReturn {\n  anyFocused: ComputedRef<boolean>;\n  inputClass: ComputedRef<string>;\n  onActivatorFocused: () => Promise<void>;\n  onInputFocused: () => void;\n  setInputFocus: () => Promise<void>;\n}\n\nexport function useAutoCompleteFocus(\n  options: UseAutoCompleteFocusOptions,\n  deps: UseAutoCompleteFocusDeps,\n): UseAutoCompleteFocusReturn {\n  const anyFocused = computed<boolean>(\n    () => get(deps.activatorFocusedWithin) || get(deps.menuWrapperFocusedWithin),\n  );\n\n  const inputClass = computed<string>(() => {\n    const isFocused = get(anyFocused);\n    const isDisabled = toValue(options.disabled);\n    const shouldApply = toValue(options.shouldApplyValueAsSearch);\n    const hasSearch = get(deps.internalSearch);\n\n    if ((!isFocused || isDisabled) && !shouldApply)\n      return 'w-0 h-0';\n    if (hasSearch)\n      return 'flex-1 min-w-[4rem]';\n    return 'flex-1 min-w-0';\n  });\n\n  async function setInputFocus(): Promise<void> {\n    await nextTick(() => {\n      set(deps.searchInputFocused, true);\n    });\n  }\n\n  async function onActivatorFocused(): Promise<void> {\n    await nextTick(() => {\n      if (!get(deps.activatorFocused)) {\n        set(deps.searchInputFocused, true);\n      }\n    });\n  }\n\n  function onInputFocused(): void {\n    set(deps.focusedValueIndex, -1);\n\n    const shouldApply = toValue(options.shouldApplyValueAsSearch);\n    if (shouldApply) {\n      const textInput = get(deps.textInput);\n      textInput?.select();\n    }\n\n    if (!get(deps.isOpen)) {\n      set(deps.justOpened, true);\n    }\n  }\n\n  // Capture the search value immediately when focus is lost, before the debounced\n  // handler fires. Other watchers (value.ts) may clear internalSearch when isOpen\n  // changes, so we need to preserve it for the custom value blur flow.\n  let pendingCustomSearch = '';\n\n  watch(anyFocused, (focused) => {\n    if (!focused && toValue(options.customValue)) {\n      pendingCustomSearch = get(deps.internalSearch);\n    }\n  });\n\n  // Close menu if the activator is not focused anymore\n  // Using debounced to avoid the menu closing momentarily while focus switches.\n  watchDebounced(\n    anyFocused,\n    (focused) => {\n      if (!focused) {\n        set(deps.isOpen, false);\n\n        const customValue = toValue(options.customValue);\n        const searchToUse = pendingCustomSearch;\n        pendingCustomSearch = '';\n\n        if (customValue && searchToUse) {\n          deps.updateInternalSearch(searchToUse);\n          deps.setSearchAsValue();\n        }\n\n        const shouldApply = toValue(options.shouldApplyValueAsSearch);\n        if (!shouldApply) {\n          deps.updateInternalSearch();\n        }\n      }\n    },\n    {\n      debounce: 100,\n      maxWait: 200,\n    },\n  );\n\n  return {\n    anyFocused,\n    inputClass,\n    onActivatorFocused,\n    onInputFocused,\n    setInputFocus,\n  };\n}\n"],"mappings":";;;;AAiCA,SAAgB,qBACd,SACA,MAC4B;CAC5B,MAAM,aAAa,eACX,MAAI,KAAK,uBAAuB,IAAI,MAAI,KAAK,yBAAyB,CAC7E;CAED,MAAM,aAAa,eAAuB;EACxC,MAAM,YAAY,MAAI,WAAW;EACjC,MAAM,aAAa,QAAQ,QAAQ,SAAS;EAC5C,MAAM,cAAc,QAAQ,QAAQ,yBAAyB;EAC7D,MAAM,YAAY,MAAI,KAAK,eAAe;AAE1C,OAAK,CAAC,aAAa,eAAe,CAAC,YACjC,QAAO;AACT,MAAI,UACF,QAAO;AACT,SAAO;GACP;CAEF,eAAe,gBAA+B;AAC5C,QAAM,eAAe;AACnB,SAAI,KAAK,oBAAoB,KAAK;IAClC;;CAGJ,eAAe,qBAAoC;AACjD,QAAM,eAAe;AACnB,OAAI,CAAC,MAAI,KAAK,iBAAiB,CAC7B,OAAI,KAAK,oBAAoB,KAAK;IAEpC;;CAGJ,SAAS,iBAAuB;AAC9B,QAAI,KAAK,mBAAmB,GAAG;AAG/B,MADoB,QAAQ,QAAQ,yBAAyB,CAEzC,OAAI,KAAK,UAAU,EAC1B,QAAQ;AAGrB,MAAI,CAAC,MAAI,KAAK,OAAO,CACnB,OAAI,KAAK,YAAY,KAAK;;CAO9B,IAAI,sBAAsB;AAE1B,OAAM,aAAa,YAAY;AAC7B,MAAI,CAAC,WAAW,QAAQ,QAAQ,YAAY,CAC1C,uBAAsB,MAAI,KAAK,eAAe;GAEhD;AAIF,gBACE,aACC,YAAY;AACX,MAAI,CAAC,SAAS;AACZ,SAAI,KAAK,QAAQ,MAAM;GAEvB,MAAM,cAAc,QAAQ,QAAQ,YAAY;GAChD,MAAM,cAAc;AACpB,yBAAsB;AAEtB,OAAI,eAAe,aAAa;AAC9B,SAAK,qBAAqB,YAAY;AACtC,SAAK,kBAAkB;;AAIzB,OAAI,CADgB,QAAQ,QAAQ,yBAAyB,CAE3D,MAAK,sBAAsB;;IAIjC;EACE,UAAU;EACV,SAAS;EACV,CACF;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}

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

@@ -0,0 +1,4 @@
+import "./focus.js";
+import "./keyboard-navigation.js";
+import "./search.js";
+import "./value.js";

package/dist/composables/forms/auto-complete/keyboard-navigation.d.ts

@@ -1,11 +1,11 @@
-import type { MaybeRef, Ref, TemplateRef } from 'vue';
+import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
 export interface UseAutoCompleteKeyboardNavigationOptions {
     /** Whether multiple items can be selected. */
-    multiple: MaybeRef<boolean>;
+    multiple: MaybeRefOrGetter<boolean>;
     /** Whether custom (free-text) values are allowed. */
-    customValue: MaybeRef<boolean>;
+    customValue: MaybeRefOrGetter<boolean>;
     /** Whether selected values are displayed as chips. */
-    chips: MaybeRef<boolean>;
+    chips: MaybeRefOrGetter<boolean>;
 }
 export interface UseAutoCompleteKeyboardNavigationDeps<TItem> {
     internalSearch: Ref<string>;
@@ -13,6 +13,7 @@ export interface UseAutoCompleteKeyboardNavigationDeps<TItem> {
     filteredOptions: Ref<TItem[]>;
     isOpen: Ref<boolean>;
     highlightedIndex: Ref<number>;
+    userNavigated: Ref<boolean>;
     searchInputFocused: Ref<boolean>;
     applyHighlighted: () => void;
     clear: () => void;
@@ -22,7 +23,7 @@ export interface UseAutoCompleteKeyboardNavigationDeps<TItem> {
     activator: Ref<HTMLElement | undefined> | TemplateRef<HTMLElement>;
 }
 export interface UseAutoCompleteKeyboardNavigationReturn {
-    focusedValueIndex: Ref<number>;
+    focusedValueIndex: Readonly<Ref<number>>;
     moveSelectedValueHighlight: (event: KeyboardEvent, next: boolean) => void;
     onEnter: (event: KeyboardEvent) => void;
     onTab: (event: KeyboardEvent) => void;