@rotki/ui-library 2.15.0 → 2.16.0

package/dist/composables/colors/common.d.ts

@@ -0,0 +1,20 @@
+import type { ContextColorsType } from '../../consts/colors.js';
+/**
+ * Base color class maps used by multiple components.
+ * Each map provides static Tailwind class strings keyed by context color.
+ */
+/** `text-rui-{color}` — used by icon, checkbox (checked), form focus labels, etc. */
+export declare const textColorMap: Record<ContextColorsType, string>;
+/** `bg-rui-{color}` — used by switch, slider track, chip filled, etc. */
+export declare const bgColorMap: Record<ContextColorsType, string>;
+/** `before:bg-rui-{color}` — used by checkbox and radio ripple */
+export declare const beforeBgColorMap: Record<ContextColorsType, string>;
+/** `border-rui-{color}` — used by text fields, alerts, etc. */
+export declare const borderColorMap: Record<ContextColorsType, string>;
+/** `after:border-rui-{color}` — used by text field and text area labels */
+export declare const afterBorderColorMap: Record<ContextColorsType, string>;
+/**
+ * Colors that need `dark:text-rui-light-text` on filled/default variants.
+ * warning, success, info need special dark mode text treatment.
+ */
+export declare const darkLightTextColorMap: Record<ContextColorsType, string>;

package/dist/composables/colors/index.d.ts

@@ -0,0 +1,3 @@
+export { afterBorderColorMap, beforeBgColorMap, bgColorMap, borderColorMap, darkLightTextColorMap, textColorMap, } from '../../composables/colors/common';
+export { getTextInputColorClasses, getTextInputValidationClasses } from '../../composables/colors/text-input';
+export type { TextInputColorClasses, TextInputValidationClasses } from '../../composables/colors/text-input';

package/dist/composables/colors/text-input.d.ts

@@ -0,0 +1,27 @@
+import type { ContextColorsType } from '../../consts/colors.js';
+interface TextInputColorClasses {
+    /** Focus label text color */
+    focusLabel: string;
+    /** Label after pseudo-element border */
+    labelAfterBorder: string;
+    /** Outlined fieldset border on focus */
+    outlinedFocusFieldset: string;
+    /** Text color for prepend, append, and input */
+    textContent: string;
+}
+interface TextInputValidationClasses {
+    /** Input border color with !important */
+    inputBorder: string;
+    /** Label text + after border with !important */
+    label: string;
+    /** Fieldset border with !important */
+    fieldset: string;
+}
+/**
+ * Shared by RuiTextField and RuiTextArea — identical color patterns.
+ *
+ * Maps the SCSS color loop for all 6 context colors.
+ */
+export declare function getTextInputColorClasses(color?: ContextColorsType): TextInputColorClasses | undefined;
+export declare function getTextInputValidationClasses(color: 'error' | 'success'): TextInputValidationClasses;
+export type { TextInputColorClasses, TextInputValidationClasses };

package/dist/composables/defaults/table.js

@@ -1,23 +1,26 @@
 import { inject, ref } from "vue";
-const TableSymbol = /* @__PURE__ */ Symbol.for("rui:table");
+//#region src/composables/defaults/table.ts
+var TableSymbol = Symbol.for("rui:table");
 function createTableDefaults(options) {
-  return {
-    globalItemsPerPage: false,
-    itemsPerPage: ref(10),
-    limits: [10, 25, 50, 100],
-    stickyOffset: ref(0),
-    ...options
-  };
+	return {
+		globalItemsPerPage: false,
+		itemsPerPage: ref(10),
+		limits: [
+			10,
+			25,
+			50,
+			100
+		],
+		stickyOffset: ref(0),
+		...options
+	};
 }
 function useTable() {
-  const options = inject(TableSymbol);
-  if (!options)
-    throw new Error("Could not find rui table options injection");
-  return options;
+	const options = inject(TableSymbol);
+	if (!options) throw new Error("Could not find rui table options injection");
+	return options;
 }
-export {
-  TableSymbol,
-  createTableDefaults,
-  useTable
-};
-//# sourceMappingURL=table.js.map
+//#endregion
+export { TableSymbol, createTableDefaults, useTable };
+
+//# sourceMappingURL=table.js.map

package/dist/composables/defaults/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../src/composables/defaults/table.ts"],"sourcesContent":["import type { InjectionKey, MaybeRef, Ref } from 'vue';\n\nexport interface TableOptions {\n  itemsPerPage: Ref<number>;\n  globalItemsPerPage: MaybeRef<boolean>;\n  limits: MaybeRef<number[]>;\n  stickyOffset: MaybeRef<number>;\n}\n\nexport const TableSymbol: InjectionKey<TableOptions> = Symbol.for('rui:table');\n\nexport function createTableDefaults(options?: Partial<TableOptions>): TableOptions {\n  return {\n    globalItemsPerPage: false,\n    itemsPerPage: ref(10),\n    limits: [10, 25, 50, 100],\n    stickyOffset: ref(0),\n    ...options,\n  };\n}\n\nexport function useTable() {\n  const options = inject(TableSymbol);\n\n  if (!options)\n    throw new Error('Could not find rui table options injection');\n\n  return options;\n}\n"],"names":[],"mappings":";AASO,MAAM,cAA0C,uBAAO,IAAI,WAAW;AAEtE,SAAS,oBAAoB,SAA+C;AACjF,SAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,cAAc,IAAI,EAAE;AAAA,IACpB,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG;AAAA,IACxB,cAAc,IAAI,CAAC;AAAA,IACnB,GAAG;AAAA,EAAA;AAEP;AAEO,SAAS,WAAW;AACzB,QAAM,UAAU,OAAO,WAAW;AAElC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,4CAA4C;AAE9D,SAAO;AACT;"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/composables/defaults/table.ts"],"sourcesContent":["import type { InjectionKey, MaybeRef, Ref } from 'vue';\n\nexport interface TableOptions {\n  itemsPerPage: Ref<number>;\n  globalItemsPerPage: MaybeRef<boolean>;\n  limits: MaybeRef<number[]>;\n  stickyOffset: MaybeRef<number>;\n}\n\nexport const TableSymbol: InjectionKey<TableOptions> = Symbol.for('rui:table');\n\nexport function createTableDefaults(options?: Partial<TableOptions>): TableOptions {\n  return {\n    globalItemsPerPage: false,\n    itemsPerPage: ref(10),\n    limits: [10, 25, 50, 100],\n    stickyOffset: ref(0),\n    ...options,\n  };\n}\n\nexport function useTable() {\n  const options = inject(TableSymbol);\n\n  if (!options)\n    throw new Error('Could not find rui table options injection');\n\n  return options;\n}\n"],"mappings":";;AASA,IAAa,cAA0C,OAAO,IAAI,YAAY;AAE9E,SAAgB,oBAAoB,SAA+C;AACjF,QAAO;EACL,oBAAoB;EACpB,cAAc,IAAI,GAAG;EACrB,QAAQ;GAAC;GAAI;GAAI;GAAI;GAAI;EACzB,cAAc,IAAI,EAAE;EACpB,GAAG;EACJ;;AAGH,SAAgB,WAAW;CACzB,MAAM,UAAU,OAAO,YAAY;AAEnC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,6CAA6C;AAE/D,QAAO"}

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

@@ -1,4 +1,4 @@
-import type { Ref, TemplateRef } from 'vue';
+import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
 export type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined ? never : V extends object ? keyof T : keyof {
     [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;
 };
@@ -7,9 +7,9 @@ export interface DropdownItemAttr<TValue, TItem> {
     textAttr?: keyof TItem | ((item: TItem) => string);
 }
 export interface DropdownOptions<TValue, TItem> {
-    options: Ref<TItem[]>;
-    dense?: Ref<boolean>;
-    disabled?: Ref<boolean>;
+    options: MaybeRefOrGetter<TItem[]>;
+    dense?: MaybeRefOrGetter<boolean>;
+    disabled?: MaybeRefOrGetter<boolean>;
     value: Ref<TItem | TItem[] | undefined>;
     menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;
     keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
@@ -19,7 +19,6 @@ export interface DropdownOptions<TValue, TItem> {
     itemHeight?: number;
     overscan?: number;
     autoSelectFirst?: boolean;
-    autoFocus?: boolean;
     setValue?: (val: TItem) => void;
     hideSelected?: boolean;
     isOpen?: Ref<boolean>;
@@ -30,7 +29,7 @@ export declare function useDropdownOptionProperty<TValue, TItem>({ keyAttr, text
     getIdentifier: (item: TItem) => TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>];
     getText: (item: TItem) => string | undefined;
 };
-export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoFocus, autoSelectFirst, dense, disabled, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight, keyAttr, menuRef, options: allOptions, overscan, prependWidth, setValue, textAttr, value, }: DropdownOptions<TValue, TItem>): {
+export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoSelectFirst, dense, disabled, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight, keyAttr, menuRef: _menuRef, options: allOptions, overscan, prependWidth, setValue, textAttr, value, }: DropdownOptions<TValue, TItem>): {
     applyHighlighted: () => void;
     containerProps: {
         ref: Ref<HTMLElement | null>;
@@ -51,6 +50,7 @@ export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoFocus,
         item: TItem;
     }>;
     toggle: (state?: boolean) => void;
+    userNavigated: Ref<boolean, boolean>;
     valueKey: globalThis.ComputedRef<TItem | TItem[] | TItem[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>][] | NonNullable<TItem>[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>] | undefined>;
     wrapperProps: globalThis.ComputedRef<{
         style: {

package/dist/composables/dropdown-menu.js

@@ -1,241 +1,173 @@
-import { computed, shallowRef, ref, watch, nextTick } from "vue";
-import { get, set } from "@vueuse/shared";
-import { useVirtualList, useArrayMap, watchOnce } from "@vueuse/core";
-function useDropdownOptionProperty({
-  keyAttr,
-  textAttr
-}) {
-  function getText(item) {
-    if (textAttr) {
-      if (typeof textAttr === "function")
-        return textAttr(item);
-      else return item[textAttr]?.toString();
-    }
-    return item?.toString();
-  }
-  function getIdentifier(item) {
-    if (keyAttr)
-      return item[keyAttr];
-    return item;
-  }
-  return {
-    getIdentifier,
-    getText
-  };
+import { computed, nextTick, ref, shallowRef, toValue, watch } from "vue";
+import { useArrayMap, useVirtualList } from "@vueuse/core";
+import { get as get$1, set as set$1 } from "@vueuse/shared";
+//#region src/composables/dropdown-menu.ts
+function useDropdownOptionProperty({ keyAttr, textAttr }) {
+	function getText(item) {
+		if (textAttr) if (typeof textAttr === "function") return textAttr(item);
+		else return item[textAttr]?.toString();
+		return item?.toString();
+	}
+	function getIdentifier(item) {
+		if (keyAttr) return item[keyAttr];
+		return item;
+	}
+	return {
+		getIdentifier,
+		getText
+	};
 }
 function toSelectedArray(val) {
-  if (Array.isArray(val))
-    return val;
-  if (val !== null && val !== void 0)
-    return [val];
-  return [];
+	if (Array.isArray(val)) return val;
+	if (val !== null && val !== void 0) return [val];
+	return [];
 }
-function useDropdownMenu({
-  appendWidth,
-  autoFocus,
-  autoSelectFirst,
-  dense,
-  disabled = shallowRef(false),
-  getIdentifier: externalGetIdentifier,
-  getText: externalGetText,
-  hideSelected,
-  isOpen: externalIsOpen,
-  itemHeight = 48,
-  keyAttr,
-  menuRef,
-  options: allOptions,
-  overscan = 5,
-  prependWidth,
-  setValue,
-  textAttr,
-  value
-}) {
-  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({
-    keyAttr,
-    textAttr
-  });
-  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;
-  const getText = externalGetText ?? defaultGetText;
-  const activeIdentifiers = computed(() => {
-    const val = get(value);
-    const selected = toSelectedArray(val);
-    const identifiers = /* @__PURE__ */ new Set();
-    for (const item of selected) {
-      identifiers.add(getIdentifier(item));
-    }
-    return identifiers;
-  });
-  function isActiveItem(item) {
-    return get(activeIdentifiers).has(getIdentifier(item));
-  }
-  const options = computed(() => {
-    const options2 = get(allOptions);
-    if (!hideSelected)
-      return options2;
-    return options2.filter((item) => !isActiveItem(item));
-  });
-  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList(options, {
-    itemHeight,
-    overscan
-  });
-  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));
-  const isOpen = externalIsOpen ?? shallowRef(false);
-  const valueKey = computed(() => {
-    const selected = get(value);
-    if (!keyAttr || !selected)
-      return selected;
-    return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
-  });
-  const highlightedIndex = ref(get(autoSelectFirst) ? 0 : -1);
-  const optionWidthBounds = computed(() => {
-    let min = 0;
-    let max = 0;
-    for (const option of get(options)) {
-      const length = getText(option)?.toString()?.length ?? 0;
-      if (min === 0 && max === 0) {
-        min = length;
-        max = length;
-      } else if (length < min) {
-        min = length;
-      } else if (length > max) {
-        max = length;
-      }
-    }
-    return { min, max };
-  });
-  const menuWidth = computed(() => {
-    const { min, max } = get(optionWidthBounds);
-    const maxWidth = 30;
-    const paddingX = 1.5;
-    const fontMultiplier = get(dense) ? 12 : 13;
-    const difference = max - min;
-    function computeValue(width) {
-      const additionalWidths = (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);
-      return `${Math.min(width * fontMultiplier / 16 + paddingX + additionalWidths, maxWidth)}rem`;
-    }
-    if (difference <= 5)
-      return computeValue(max);
-    return computeValue(min + difference / 2);
-  });
-  function toggle(state = false) {
-    set(isOpen, state);
-  }
-  function itemIndexInValue(item) {
-    const val = get(value);
-    const selected = toSelectedArray(val);
-    if (selected.length === 0)
-      return -1;
-    const itemId = getIdentifier(item);
-    return selected.findIndex((selectedItem) => getIdentifier(selectedItem) === itemId);
-  }
-  async function adjustScrollByHighlightedIndex(smooth = false) {
-    const index = get(highlightedIndex);
-    if (index > -1) {
-      await nextTick(() => {
-        const menuEl = get(menuRef);
-        const container = menuEl?.parentElement;
-        if (container && menuEl) {
-          const highlightedElem = menuEl.getElementsByClassName("highlighted")[0];
-          if (highlightedElem) {
-            highlightedElem.scrollIntoView?.({
-              behavior: smooth ? "smooth" : "auto",
-              block: "nearest"
-            });
-            if (get(autoFocus) && "focus" in highlightedElem && typeof highlightedElem.focus === "function") {
-              highlightedElem?.focus();
-            }
-          } else {
-            scrollTo(index);
-            if (get(autoFocus)) {
-              const elem = menuEl.getElementsByClassName("highlighted")[0];
-              if (elem && "focus" in elem && typeof elem.focus === "function")
-                elem.focus();
-            }
-          }
-        }
-      });
-    }
-  }
-  async function updateOpen(open) {
-    await nextTick(() => {
-      if (open) {
-        const val = get(value);
-        if (Array.isArray(val) && val.length > 0 || val !== null && val !== void 0) {
-          const index = get(options).findIndex(isActiveItem);
-          if (index > -1)
-            set(highlightedIndex, index);
-        }
-        watchOnce(list, async () => {
-          await adjustScrollByHighlightedIndex();
-        });
-      }
-    });
-  }
-  watch([isOpen, disabled], async ([open, _]) => {
-    await updateOpen(open);
-  });
-  watch(highlightedIndex, async (curr, prev) => {
-    if (curr !== prev)
-      await adjustScrollByHighlightedIndex(true);
-  });
-  watch(options, async () => {
-    if (get(highlightedIndex) !== -1) {
-      if (get(autoSelectFirst)) {
-        set(highlightedIndex, 0);
-        await adjustScrollByHighlightedIndex();
-      } else {
-        set(highlightedIndex, -1);
-        scrollTo(0);
-      }
-    } else {
-      scrollTo(0);
-    }
-  });
-  const moveHighlight = (up) => {
-    if (!get(isOpen)) {
-      toggle(true);
-      return;
-    }
-    let position = get(highlightedIndex);
-    const move = up ? -1 : 1;
-    position += move;
-    const total = get(options).length;
-    if (position >= total)
-      set(highlightedIndex, 0);
-    else if (position < 0)
-      set(highlightedIndex, total - 1);
-    else set(highlightedIndex, position);
-  };
-  const applyHighlighted = () => {
-    if (!setValue || !get(isOpen))
-      return;
-    const highlightedIndexVal = get(highlightedIndex);
-    if (highlightedIndexVal === -1)
-      return;
-    const entry = get(options)[highlightedIndexVal];
-    if (entry !== void 0)
-      setValue(entry);
-  };
-  return {
-    applyHighlighted,
-    containerProps,
-    getIdentifier,
-    getText,
-    highlightedIndex,
-    isActiveItem,
-    isOpen,
-    itemIndexInValue,
-    menuWidth,
-    moveHighlight,
-    optionsWithSelectedHidden: options,
-    renderedData,
-    toggle,
-    valueKey,
-    wrapperProps
-  };
+function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight = 48, keyAttr, menuRef: _menuRef, options: allOptions, overscan = 5, prependWidth, setValue, textAttr, value }) {
+	const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({
+		keyAttr,
+		textAttr
+	});
+	const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;
+	const getText = externalGetText ?? defaultGetText;
+	const activeIdentifiers = computed(() => {
+		const selected = toSelectedArray(get$1(value));
+		const identifiers = /* @__PURE__ */ new Set();
+		for (const item of selected) identifiers.add(getIdentifier(item));
+		return identifiers;
+	});
+	function isActiveItem(item) {
+		return get$1(activeIdentifiers).has(getIdentifier(item));
+	}
+	const options = computed(() => {
+		const options = toValue(allOptions);
+		if (!hideSelected) return options;
+		return options.filter((item) => !isActiveItem(item));
+	});
+	const { containerProps, list, scrollTo, wrapperProps } = useVirtualList(options, {
+		itemHeight,
+		overscan
+	});
+	const renderedData = useArrayMap(list, ({ data, index: _index }) => ({
+		_index,
+		item: data
+	}));
+	const isOpen = externalIsOpen ?? shallowRef(false);
+	const valueKey = computed(() => {
+		const selected = get$1(value);
+		if (!keyAttr || !selected) return selected;
+		return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
+	});
+	const highlightedIndex = ref(get$1(autoSelectFirst) ? 0 : -1);
+	const userNavigated = ref(false);
+	const optionWidthBounds = computed(() => {
+		let min = 0;
+		let max = 0;
+		for (const option of get$1(options)) {
+			const length = getText(option)?.toString()?.length ?? 0;
+			if (min === 0 && max === 0) {
+				min = length;
+				max = length;
+			} else if (length < min) min = length;
+			else if (length > max) max = length;
+		}
+		return {
+			min,
+			max
+		};
+	});
+	const menuWidth = computed(() => {
+		const { min, max } = get$1(optionWidthBounds);
+		const maxWidth = 30;
+		const paddingX = 1.5;
+		const fontMultiplier = toValue(dense) ? 12 : 13;
+		const difference = max - min;
+		function computeValue(width) {
+			const additionalWidths = (prependWidth ? prependWidth + .5 : 0) + (appendWidth ? appendWidth + .5 : 0);
+			return `${Math.min(width * fontMultiplier / 16 + paddingX + additionalWidths, maxWidth)}rem`;
+		}
+		if (difference <= 5) return computeValue(max);
+		return computeValue(min + difference / 2);
+	});
+	function toggle(state = false) {
+		set$1(isOpen, state);
+	}
+	function itemIndexInValue(item) {
+		const selected = toSelectedArray(get$1(value));
+		if (selected.length === 0) return -1;
+		const itemId = getIdentifier(item);
+		return selected.findIndex((selectedItem) => getIdentifier(selectedItem) === itemId);
+	}
+	function adjustScrollByHighlightedIndex() {
+		const index = get$1(highlightedIndex);
+		if (index > -1) scrollTo(index);
+	}
+	function updateOpen(open) {
+		if (!open) return;
+		const val = get$1(value);
+		if (Array.isArray(val) && val.length > 0 || val !== null && val !== void 0) {
+			const index = get$1(options).findIndex(isActiveItem);
+			if (index > -1) set$1(highlightedIndex, index);
+		}
+		nextTick(() => adjustScrollByHighlightedIndex());
+	}
+	watch([isOpen, () => toValue(disabled)], ([open, _]) => {
+		updateOpen(open);
+	});
+	watch(highlightedIndex, () => adjustScrollByHighlightedIndex());
+	watch(options, () => {
+		set$1(userNavigated, false);
+		if (get$1(highlightedIndex) !== -1) if (get$1(autoSelectFirst)) {
+			set$1(highlightedIndex, 0);
+			adjustScrollByHighlightedIndex();
+		} else {
+			set$1(highlightedIndex, -1);
+			scrollTo(0);
+		}
+		else scrollTo(0);
+	});
+	watch(isOpen, (open) => {
+		if (!open) set$1(userNavigated, false);
+	});
+	const moveHighlight = (up) => {
+		if (!get$1(isOpen)) {
+			toggle(true);
+			return;
+		}
+		set$1(userNavigated, true);
+		let position = get$1(highlightedIndex);
+		position += up ? -1 : 1;
+		const total = get$1(options).length;
+		if (position >= total) set$1(highlightedIndex, 0);
+		else if (position < 0) set$1(highlightedIndex, total - 1);
+		else set$1(highlightedIndex, position);
+	};
+	const applyHighlighted = () => {
+		if (!setValue || !get$1(isOpen)) return;
+		const highlightedIndexVal = get$1(highlightedIndex);
+		if (highlightedIndexVal === -1) return;
+		const entry = get$1(options)[highlightedIndexVal];
+		if (entry !== void 0) setValue(entry);
+	};
+	return {
+		applyHighlighted,
+		containerProps,
+		getIdentifier,
+		getText,
+		highlightedIndex,
+		isActiveItem,
+		isOpen,
+		itemIndexInValue,
+		menuWidth,
+		moveHighlight,
+		optionsWithSelectedHidden: options,
+		renderedData,
+		toggle,
+		userNavigated,
+		valueKey,
+		wrapperProps
+	};
 }
-export {
-  useDropdownMenu,
-  useDropdownOptionProperty
-};
-//# sourceMappingURL=dropdown-menu.js.map
+//#endregion
+export { useDropdownMenu, useDropdownOptionProperty };
+
+//# sourceMappingURL=dropdown-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: Ref<TItem[]>;\n  dense?: Ref<boolean>;\n  disabled?: Ref<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  autoFocus?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n  isOpen?: Ref<boolean>;\n  getText?: (item: TItem) => string | undefined;\n  getIdentifier?: (item: TItem) => any;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n      else return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(\n    item: TItem,\n  ): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nfunction toSelectedArray<TItem>(val: TItem | TItem[] | undefined): TItem[] {\n  if (Array.isArray(val))\n    return val;\n  if (val !== null && val !== undefined)\n    return [val];\n  return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoFocus,\n  autoSelectFirst,\n  dense,\n  disabled = shallowRef(false),\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = 48,\n  keyAttr,\n  menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n}: DropdownOptions<TValue, TItem>) {\n  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n  const getText = externalGetText ?? defaultGetText;\n\n  const activeIdentifiers = computed<Set<any>>(() => {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n    const identifiers = new Set<any>();\n    for (const item of selected) {\n      identifiers.add(getIdentifier(item));\n    }\n    return identifiers;\n  });\n\n  function isActiveItem(item: TItem): boolean {\n    return get(activeIdentifiers).has(getIdentifier(item));\n  }\n\n  const options = computed<TItem[]>(() => {\n    const options = get(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n    itemHeight,\n    overscan,\n  });\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const highlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n\n  const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n    let min = 0;\n    let max = 0;\n    for (const option of get(options)) {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (min === 0 && max === 0) {\n        min = length;\n        max = length;\n      }\n      else if (length < min) {\n        min = length;\n      }\n      else if (length > max) {\n        max = length;\n      }\n    }\n    return { min, max };\n  });\n\n  const menuWidth = computed<string>(() => {\n    const { min, max } = get(optionWidthBounds);\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = get(dense) ? 12 : 13;\n    const difference = max - min;\n\n    function computeValue(width: number): string {\n      const additionalWidths =\n        (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(max);\n\n    return computeValue(min + difference / 2);\n  });\n\n  function toggle(state: boolean = false): void {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n\n    if (selected.length === 0)\n      return -1;\n\n    const itemId = getIdentifier(item);\n    return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n  }\n\n  async function adjustScrollByHighlightedIndex(smooth: boolean = false): Promise<void> {\n    const index = get(highlightedIndex);\n    if (index > -1) {\n      await nextTick(() => {\n        const menuEl = get(menuRef);\n        const container = menuEl?.parentElement;\n        if (container && menuEl) {\n          const highlightedElem = menuEl.getElementsByClassName('highlighted')[0];\n\n          if (highlightedElem) {\n            highlightedElem.scrollIntoView?.({\n              behavior: smooth ? 'smooth' : 'auto',\n              block: 'nearest',\n            });\n            if (\n              get(autoFocus) &&\n              'focus' in highlightedElem &&\n              typeof highlightedElem.focus === 'function'\n            ) {\n              highlightedElem?.focus();\n            }\n          }\n          else {\n            scrollTo(index);\n            if (get(autoFocus)) {\n              const elem = menuEl.getElementsByClassName('highlighted')[0];\n              if (elem && 'focus' in elem && typeof elem.focus === 'function')\n                elem.focus();\n            }\n          }\n        }\n      });\n    }\n  }\n\n  async function updateOpen(open: boolean): Promise<void> {\n    await nextTick(() => {\n      if (open) {\n        const val = get(value);\n\n        // set highlighted index to active item\n        if ((Array.isArray(val) && val.length > 0) || (val !== null && val !== undefined)) {\n          const index = get(options).findIndex(isActiveItem);\n          if (index > -1)\n            set(highlightedIndex, index);\n        }\n\n        watchOnce(list, async () => {\n          await adjustScrollByHighlightedIndex();\n        });\n      }\n    });\n  }\n\n  watch([isOpen, disabled], async ([open, _]) => {\n    await updateOpen(open);\n  });\n\n  watch(highlightedIndex, async (curr, prev) => {\n    if (curr !== prev)\n      await adjustScrollByHighlightedIndex(true);\n  });\n\n  watch(options, async () => {\n    if (get(highlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(highlightedIndex, 0);\n        await adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(highlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    let position = get(highlightedIndex);\n    const move = up ? -1 : 1;\n\n    position += move;\n\n    const total = get(options).length;\n\n    if (position >= total)\n      set(highlightedIndex, 0);\n    else if (position < 0)\n      set(highlightedIndex, total - 1);\n    else set(highlightedIndex, position);\n  };\n\n  const applyHighlighted = (): void => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(highlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options)[highlightedIndexVal];\n    if (entry !== undefined)\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    highlightedIndex,\n    isActiveItem,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"names":["options"],"mappings":"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"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../src/composables/dropdown-menu.ts"],"sourcesContent":["import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';\n\nexport type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined\n  ? never\n  : V extends object\n    ? keyof T\n    : keyof {\n      [P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;\n    };\n\nexport interface DropdownItemAttr<TValue, TItem> {\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n}\n\nexport interface DropdownOptions<TValue, TItem> {\n  options: MaybeRefOrGetter<TItem[]>;\n  dense?: MaybeRefOrGetter<boolean>;\n  disabled?: MaybeRefOrGetter<boolean>;\n  value: Ref<TItem | TItem[] | undefined>;\n  menuRef: Ref<HTMLElement> | TemplateRef<HTMLElement>;\n  keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;\n  textAttr?: keyof TItem | ((item: TItem) => string);\n  appendWidth?: number;\n  prependWidth?: number;\n  itemHeight?: number;\n  overscan?: number;\n  autoSelectFirst?: boolean;\n  setValue?: (val: TItem) => void;\n  hideSelected?: boolean;\n  isOpen?: Ref<boolean>;\n  getText?: (item: TItem) => string | undefined;\n  getIdentifier?: (item: TItem) => any;\n}\n\nexport function useDropdownOptionProperty<TValue, TItem>({\n  keyAttr,\n  textAttr,\n}: DropdownItemAttr<TValue, TItem>) {\n  function getText(item: TItem): string | undefined {\n    if (textAttr) {\n      if (typeof textAttr === 'function')\n        return textAttr(item);\n      else return item[textAttr]?.toString();\n    }\n\n    return item?.toString();\n  }\n\n  function getIdentifier(\n    item: TItem,\n  ): TItem | TItem[KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>] {\n    if (keyAttr)\n      return item[keyAttr];\n\n    return item;\n  }\n\n  return {\n    getIdentifier,\n    getText,\n  };\n}\n\nfunction toSelectedArray<TItem>(val: TItem | TItem[] | undefined): TItem[] {\n  if (Array.isArray(val))\n    return val;\n  if (val !== null && val !== undefined)\n    return [val];\n  return [];\n}\n\nexport function useDropdownMenu<TValue, TItem>({\n  appendWidth,\n  autoSelectFirst,\n  dense,\n  disabled = false,\n  getIdentifier: externalGetIdentifier,\n  getText: externalGetText,\n  hideSelected,\n  isOpen: externalIsOpen,\n  itemHeight = 48,\n  keyAttr,\n  menuRef: _menuRef,\n  options: allOptions,\n  overscan = 5,\n  prependWidth,\n  setValue,\n  textAttr,\n  value,\n}: DropdownOptions<TValue, TItem>) {\n  const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({\n    keyAttr,\n    textAttr,\n  });\n\n  const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;\n  const getText = externalGetText ?? defaultGetText;\n\n  const activeIdentifiers = computed<Set<any>>(() => {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n    const identifiers = new Set<any>();\n    for (const item of selected) {\n      identifiers.add(getIdentifier(item));\n    }\n    return identifiers;\n  });\n\n  function isActiveItem(item: TItem): boolean {\n    return get(activeIdentifiers).has(getIdentifier(item));\n  }\n\n  const options = computed<TItem[]>(() => {\n    const options = toValue(allOptions);\n    if (!hideSelected)\n      return options;\n\n    return options.filter(item => !isActiveItem(item));\n  });\n\n  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<TItem>(options, {\n    itemHeight,\n    overscan,\n  });\n\n  const renderedData = useArrayMap(list, ({ data, index: _index }) => ({ _index, item: data }));\n\n  const isOpen = externalIsOpen ?? shallowRef<boolean>(false);\n\n  const valueKey = computed(() => {\n    const selected = get(value);\n    if (!keyAttr || !selected)\n      return selected;\n    return Array.isArray(selected) ? selected.map(item => item[keyAttr]) : selected[keyAttr];\n  });\n\n  const highlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n  const userNavigated = ref<boolean>(false);\n\n  const optionWidthBounds = computed<{ min: number; max: number }>(() => {\n    let min = 0;\n    let max = 0;\n    for (const option of get(options)) {\n      const length = getText(option)?.toString()?.length ?? 0;\n      if (min === 0 && max === 0) {\n        min = length;\n        max = length;\n      }\n      else if (length < min) {\n        min = length;\n      }\n      else if (length > max) {\n        max = length;\n      }\n    }\n    return { min, max };\n  });\n\n  const menuWidth = computed<string>(() => {\n    const { min, max } = get(optionWidthBounds);\n    const maxWidth = 30;\n    const paddingX = 1.5;\n    const fontMultiplier = toValue(dense) ? 12 : 13;\n    const difference = max - min;\n\n    function computeValue(width: number): string {\n      const additionalWidths =\n        (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);\n      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;\n    }\n\n    if (difference <= 5)\n      return computeValue(max);\n\n    return computeValue(min + difference / 2);\n  });\n\n  function toggle(state: boolean = false): void {\n    set(isOpen, state);\n  }\n\n  function itemIndexInValue(item: TItem): number {\n    const val = get(value);\n    const selected: TItem[] = toSelectedArray(val);\n\n    if (selected.length === 0)\n      return -1;\n\n    const itemId = getIdentifier(item);\n    return selected.findIndex(selectedItem => getIdentifier(selectedItem) === itemId);\n  }\n\n  function adjustScrollByHighlightedIndex(): void {\n    const index = get(highlightedIndex);\n    if (index > -1)\n      scrollTo(index);\n  }\n\n  function updateOpen(open: boolean): void {\n    if (!open)\n      return;\n\n    const val = get(value);\n\n    // Set highlighted index to active item\n    if ((Array.isArray(val) && val.length > 0) || (val !== null && val !== undefined)) {\n      const index = get(options).findIndex(isActiveItem);\n      if (index > -1)\n        set(highlightedIndex, index);\n    }\n\n    nextTick(() => adjustScrollByHighlightedIndex());\n  }\n\n  watch([isOpen, () => toValue(disabled)], ([open, _]) => {\n    updateOpen(open);\n  });\n\n  watch(highlightedIndex, () => adjustScrollByHighlightedIndex());\n\n  watch(options, () => {\n    set(userNavigated, false);\n    if (get(highlightedIndex) !== -1) {\n      if (get(autoSelectFirst)) {\n        set(highlightedIndex, 0);\n        adjustScrollByHighlightedIndex();\n      }\n      else {\n        set(highlightedIndex, -1);\n        scrollTo(0);\n      }\n    }\n    else {\n      scrollTo(0);\n    }\n  });\n\n  watch(isOpen, (open) => {\n    if (!open)\n      set(userNavigated, false);\n  });\n\n  const moveHighlight = (up: boolean): void => {\n    if (!get(isOpen)) {\n      toggle(true);\n      return;\n    }\n\n    set(userNavigated, true);\n\n    let position = get(highlightedIndex);\n    const move = up ? -1 : 1;\n\n    position += move;\n\n    const total = get(options).length;\n\n    if (position >= total)\n      set(highlightedIndex, 0);\n    else if (position < 0)\n      set(highlightedIndex, total - 1);\n    else set(highlightedIndex, position);\n  };\n\n  const applyHighlighted = (): void => {\n    if (!setValue || !get(isOpen))\n      return;\n\n    const highlightedIndexVal = get(highlightedIndex);\n    if (highlightedIndexVal === -1)\n      return;\n\n    const entry = get(options)[highlightedIndexVal];\n    if (entry !== undefined)\n      setValue(entry);\n  };\n\n  return {\n    applyHighlighted,\n    containerProps,\n    getIdentifier,\n    getText,\n    highlightedIndex,\n    isActiveItem,\n    isOpen,\n    itemIndexInValue,\n    menuWidth,\n    moveHighlight,\n    optionsWithSelectedHidden: options,\n    renderedData,\n    toggle,\n    userNavigated,\n    valueKey,\n    wrapperProps,\n  };\n}\n"],"mappings":"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"}