npm - @rotki/ui-library - Versions diffs - 2.26.1 → 3.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (420) hide show

package/dist/components/time-picker/time-picker-styles.d.ts CHANGED Viewed

@@ -3,6 +3,9 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
         true: {
             root: string;
         };
+        false: {
+            root: string;
+        };
     };
     active: {
         true: {
@@ -17,7 +20,10 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     digitalDisplay: string;
+    time: string;
     digit: string;
+    separator: string;
+    period: string;
     clockFace: string;
     centerDot: string;
     clockHand: string;
@@ -28,6 +34,9 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
         true: {
             root: string;
         };
+        false: {
+            root: string;
+        };
     };
     active: {
         true: {
@@ -42,7 +51,10 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     digitalDisplay: string;
+    time: string;
     digit: string;
+    separator: string;
+    period: string;
     clockFace: string;
     centerDot: string;
     clockHand: string;
@@ -53,6 +65,9 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
         true: {
             root: string;
         };
+        false: {
+            root: string;
+        };
     };
     active: {
         true: {
@@ -67,7 +82,10 @@ export declare const timePickerStyles: import("tailwind-variants").TVReturnType<
 }, {
     root: string;
     digitalDisplay: string;
+    time: string;
     digit: string;
+    separator: string;
+    period: string;
     clockFace: string;
     centerDot: string;
     clockHand: string;

package/dist/components/time-picker/time-picker-styles.js CHANGED Viewed

@@ -2,23 +2,29 @@ import { tv } from "../../utils/tv.js";
 //#region src/components/time-picker/time-picker-styles.ts
 var timePickerStyles = tv({
 	slots: {
-		root: "bg-white overflow-hidden text-rui-text p-3 dark:bg-rui-grey-900",
-		digitalDisplay: "mb-2 text-center",
-		digit: "text-2xl font-semibold cursor-pointer",
-		clockFace: "relative rounded-full w-64 h-64 mx-auto border border-rui-grey-200 dark:border-rui-grey-800",
-		centerDot: "absolute rounded-full bg-rui-primary w-3 h-3",
+		root: "overflow-hidden text-rui-text p-3 pt-2",
+		digitalDisplay: "mb-3 grid grid-cols-[1fr_auto_1fr] items-center",
+		time: `col-start-2 flex items-center gap-0.5 [font-feature-settings:'case','cv05','cv08']`,
+		digit: ["rounded-rui-control px-1.5 text-2xl/7 font-semibold tabular-nums transition-colors", "hover:bg-rui-hover outline-hidden focus-visible:focus-ring"].join(" "),
+		separator: "text-2xl/7 font-semibold text-rui-text-secondary",
+		period: ["col-start-3 justify-self-start ml-2 inline-flex h-7 items-center rounded-rui-control border border-rui-outline px-2 text-sm font-medium transition-colors", "hover:bg-rui-hover outline-hidden focus-visible:focus-ring rui-time-picker-period"].join(" "),
+		clockFace: "relative rounded-full w-64 h-64 mx-auto bg-rui-hover",
+		centerDot: "absolute rounded-full bg-rui-primary w-2 h-2",
 		clockHand: "absolute w-[1.5px] bg-rui-primary rounded-full",
 		clockHandCircle: "absolute border-2 border-rui-primary",
 		clockNumber: [
-			"absolute text-center text-sm font-medium w-8 h-8",
+			"absolute text-center text-sm font-medium w-8 h-8 tabular-nums",
 			"flex items-center justify-center",
-			"hover:bg-rui-primary-lighter cursor-pointer rounded-full"
+			"hover:bg-rui-hover cursor-pointer rounded-full"
 		].join(" ")
 	},
 	variants: {
-		bordered: { true: { root: "rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800" } },
-		active: { true: { digit: "text-rui-primary" } },
-		selected: { true: { clockNumber: "bg-rui-primary text-rui-dark-text dark:text-rui-light-text z-10 font-bold" } }
+		bordered: {
+			true: { root: "bg-rui-surface rounded-rui-panel border border-rui-divider" },
+			false: { root: "bg-rui-menu" }
+		},
+		active: { true: { digit: "bg-rui-primary-soft text-rui-primary hover:bg-rui-primary-soft dark:bg-rui-primary/20 dark:text-rui-primary-lighter dark:hover:bg-rui-primary/20" } },
+		selected: { true: { clockNumber: "bg-rui-primary-fill hover:bg-rui-primary-fill text-rui-primary-foreground z-20 font-semibold" } }
 	}
 });
 //#endregion

package/dist/components/time-picker/time-picker-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-picker-styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const timePickerStyles = tv({\n slots: {\n root: '~~bg-white~~ overflow-hidden text-rui-text p-3 ~~dark:bg~~-~~rui-grey-900~~',\n digitalDisplay: 'mb-2 ~~text~~-center',\n digit: 'text-2xl font-semibold ~~cursor~~-~~pointer~~',\n ~~clockFace~~: '~~relative~~ ~~rounded~~-~~full~~ w-64 h-64 mx-~~auto~~ border border-rui-~~grey~~-~~200~~ ~~dark~~:~~border~~-rui-~~grey~~-~~800~~',\n centerDot: 'absolute rounded-full bg-rui-primary w-3 h-3',\n clockHand: 'absolute w-[1.5px] bg-rui-primary rounded-full',\n clockHandCircle: 'absolute border-2 border-rui-primary',\n clockNumber: [\n 'absolute text-center text-sm font-medium w-8 h-8',\n 'flex items-center justify-center',\n 'hover:bg-rui-~~primary-lighter~~ cursor-pointer rounded-full',\n ].join(' '),\n },\n variants: {\n bordered: {\n true: {\n root: '~~rounded~~-md ~~shadow~~-sm border border-rui-~~grey-200~~ ~~dark~~:~~border~~-rui-~~grey-800~~',\n },\n },\n active: {\n true: {\n digit: 'text-rui-primary',\n },\n },\n selected: {\n true: {\n clockNumber: 'bg-rui-primary ~~text~~-rui-~~dark~~-~~text~~ ~~dark:~~text-rui-~~light~~-~~text~~ z-10 font-~~bold~~',\n },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;~~EACL~~,MAAM;~~EACN~~,gBAAgB;~~EAChB~~,OAAO;~~EACP~~,WAAW;EACX,WAAW;EACX,WAAW;EACX,iBAAiB;EACjB,aAAa;GACX;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ;CACA,UAAU;EACR,UAAU,~~EACR,~~MAAM,EACJ,MAAM,~~2EACR~~,EACF;EACA,QAAQ,EACN,MAAM,~~EACJ~~,OAAO,~~mBACT~~,EACF;EACA,UAAU,EACR,MAAM,~~EACJ~~,aAAa,~~4EACf,~~EACF;CACF;AACF,CAAC"}
1	+ {"version":3,"file":"time-picker-styles.js","names":[],"sources":["../../../src/components/time-picker/time-picker-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const timePickerStyles = tv({\n slots: {\n // the calendar header's 8px top padding, so the two headers share a row in the date-time picker\n root: 'overflow-hidden text-rui-text p-3 pt-2',\n // three columns, so the time sits over the dial's center and AM/PM hangs off to its right\n digitalDisplay: 'mb-3 grid grid-cols-[1fr_auto_1fr] items-center',\n // Inter's `case` feature lifts the colon to the middle of the figures instead of the x-height\n time: `col-start-2 flex items-center gap-0.5 [font-feature-settings:'case','cv05','cv08']`,\n /\n Each part of the time is a button that picks what the face edits, tinted while it is the one.\n * Digits, colons and AM/PM sit on the calendar header's 28px line, so the two headers align.\n */\n digit: [\n 'rounded-rui-control px-1.5 text-2xl/7 font-semibold tabular-nums transition-colors',\n 'hover:bg-rui-hover outline-hidden focus-visible:focus-ring',\n ].join(' '),\n separator: 'text-2xl/7 font-semibold text-rui-text-secondary',\n period: [\n 'col-start-3 justify-self-start ml-2 inline-flex h-7 items-center rounded-rui-control border border-rui-outline px-2 text-sm font-medium transition-colors',\n 'hover:bg-rui-hover outline-hidden focus-visible:focus-ring rui-time-picker-period',\n ].join(' '),\n // a translucent well, so the face reads on a menu and on a card in both themes\n clockFace: 'relative rounded-full w-64 h-64 mx-auto bg-rui-hover',\n centerDot: 'absolute rounded-full bg-rui-primary w-2 h-2',\n clockHand: 'absolute w-[1.5px] bg-rui-primary rounded-full',\n clockHandCircle: 'absolute border-2 border-rui-primary',\n clockNumber: [\n 'absolute text-center text-sm font-medium w-8 h-8 tabular-nums',\n 'flex items-center justify-center',\n 'hover:bg-rui-hover cursor-pointer rounded-full',\n ].join(' '),\n },\n variants: {\n bordered: {\n true: {\n root: 'bg-rui-surface rounded-rui-panel border border-rui-divider',\n },\n false: {\n root: 'bg-rui-menu',\n },\n },\n active: {\n true: {\n // the 10% tint vanishes on a dark menu, so dark doubles it\n digit: 'bg-rui-primary-soft text-rui-primary hover:bg-rui-primary-soft dark:bg-rui-primary/20 dark:text-rui-primary-lighter dark:hover:bg-rui-primary/20',\n },\n },\n selected: {\n true: {\n // the primary fill and its foreground, like the selected calendar day, stacked over the hand (z 10, 11)\n clockNumber: 'bg-rui-primary-fill hover:bg-rui-primary-fill text-rui-primary-foreground z-20 font-semibold',\n },\n },\n },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,OAAO;EAEL,MAAM;EAEN,gBAAgB;EAEhB,MAAM;EAKN,OAAO,CACL,sFACA,4DACF,CAAC,CAAC,KAAK,GAAG;EACV,WAAW;EACX,QAAQ,CACN,6JACA,mFACF,CAAC,CAAC,KAAK,GAAG;EAEV,WAAW;EACX,WAAW;EACX,WAAW;EACX,iBAAiB;EACjB,aAAa;GACX;GACA;GACA;EACF,CAAC,CAAC,KAAK,GAAG;CACZ;CACA,UAAU;EACR,UAAU;GACR,MAAM,EACJ,MAAM,6DACR;GACA,OAAO,EACL,MAAM,cACR;EACF;EACA,QAAQ,EACN,MAAM,EAEJ,OAAO,mJACT,EACF;EACA,UAAU,EACR,MAAM,EAEJ,aAAa,+FACf,EACF;CACF;AACF,CAAC"}

package/dist/composables/defaults/field.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';
+/**
+ * Where a field shows its label.
+ *
+ * - `top`: a label above a bordered field (the default).
+ * - `hidden`: no visible label; the label is still announced to screen readers.
+ *   For search and filter fields whose placeholder and icon say what they are.
+ */
+export type LabelPlacement = 'top' | 'hidden';
+export interface FieldOptions {
+    labelPlacement: MaybeRef<LabelPlacement>;
+}
+/** The app-wide default, set through `createRui({ defaults: { field } })`. */
+export declare const FieldSymbol: InjectionKey<FieldOptions>;
+export declare function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions;
+/** Sets the label placement for every field rendered below the calling component. */
+export declare function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void;
+/**
+ * The placement a field uses: its own prop, then the nearest scope, then the
+ * app default, then `top`.
+ */
+export declare function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement>;

package/dist/composables/defaults/field.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { computed, inject, provide, toValue } from "vue";
+//#region src/composables/defaults/field.ts
+/** The app-wide default, set through `createRui({ defaults: { field } })`. */
+var FieldSymbol = Symbol.for("rui:field");
+/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */
+var FieldScopeSymbol = Symbol.for("rui:field-scope");
+function createFieldDefaults(options) {
+	return {
+		labelPlacement: "top",
+		...options
+	};
+}
+/** Sets the label placement for every field rendered below the calling component. */
+function provideFieldDefaults(labelPlacement) {
+	provide(FieldScopeSymbol, labelPlacement);
+}
+/**
+* The placement a field uses: its own prop, then the nearest scope, then the
+* app default, then `top`.
+*/
+function useLabelPlacement(placement) {
+	const scope = inject(FieldScopeSymbol, void 0);
+	const app = inject(FieldSymbol, void 0);
+	return computed(() => toValue(placement) ?? toValue(scope) ?? (app ? toValue(app.labelPlacement) : void 0) ?? "top");
+}
+//#endregion
+export { FieldSymbol, createFieldDefaults, provideFieldDefaults, useLabelPlacement };
+//# sourceMappingURL=field.js.map

package/dist/composables/defaults/field.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"field.js","names":[],"sources":["../../../src/composables/defaults/field.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter } from 'vue';\n\n/**\n * Where a field shows its label.\n *\n * - `top`: a label above a bordered field (the default).\n * - `hidden`: no visible label; the label is still announced to screen readers.\n * For search and filter fields whose placeholder and icon say what they are.\n */\nexport type LabelPlacement = 'top' | 'hidden';\n\nexport interface FieldOptions {\n labelPlacement: MaybeRef<LabelPlacement>;\n}\n\n/** The app-wide default, set through `createRui({ defaults: { field } })`. */\nexport const FieldSymbol: InjectionKey<FieldOptions> = Symbol.for('rui:field');\n\n/** A default for every field below a component, set with `provideFieldDefaults` or `RuiFieldDefaults`. */\nconst FieldScopeSymbol: InjectionKey<MaybeRefOrGetter<LabelPlacement | undefined>> = Symbol.for('rui:field-scope');\n\nexport function createFieldDefaults(options?: Partial<FieldOptions>): FieldOptions {\n return {\n labelPlacement: 'top',\n ...options,\n };\n}\n\n/** Sets the label placement for every field rendered below the calling component. */\nexport function provideFieldDefaults(labelPlacement: MaybeRefOrGetter<LabelPlacement | undefined>): void {\n provide(FieldScopeSymbol, labelPlacement);\n}\n\n/**\n * The placement a field uses: its own prop, then the nearest scope, then the\n * app default, then `top`.\n */\nexport function useLabelPlacement(placement: MaybeRefOrGetter<LabelPlacement | undefined>): ComputedRef<LabelPlacement> {\n const scope = inject(FieldScopeSymbol, undefined);\n const app = inject(FieldSymbol, undefined);\n\n return computed<LabelPlacement>(() =>\n toValue(placement)\n ?? toValue(scope)\n ?? (app ? toValue(app.labelPlacement) : undefined)\n ?? 'top',\n );\n}\n"],"mappings":";;;AAgBA,IAAa,cAA0C,OAAO,IAAI,WAAW;;AAG7E,IAAM,mBAA+E,OAAO,IAAI,iBAAiB;AAEjH,SAAgB,oBAAoB,SAA+C;CACjF,OAAO;EACL,gBAAgB;EAChB,GAAG;CACL;AACF;;AAGA,SAAgB,qBAAqB,gBAAoE;CACvG,QAAQ,kBAAkB,cAAc;AAC1C;;;;;AAMA,SAAgB,kBAAkB,WAAsF;CACtH,MAAM,QAAQ,OAAO,kBAAkB,KAAA,CAAS;CAChD,MAAM,MAAM,OAAO,aAAa,KAAA,CAAS;CAEzC,OAAO,eACL,QAAQ,SAAS,KACd,QAAQ,KAAK,MACZ,MAAM,QAAQ,IAAI,cAAc,IAAI,KAAA,MACrC,KACL;AACF"}

package/dist/composables/defaults/logo.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { InjectionKey } from 'vue';
+/**
+ * Returns the image URL for a named logo, or `undefined` to keep the bundled one.
+ */
+export type LogoResolver = (name: string) => string | undefined | Promise<string | undefined>;
+export interface LogoOptions {
+    /**
+     * Resolves the `logo` prop of every `RuiLogo` to an image URL. It runs in the
+     * browser after mount, never on the server. The library makes no request of
+     * its own: fetching, caching and validating the URL are up to the app.
+     */
+    resolve: LogoResolver;
+}
+export declare const LogoSymbol: InjectionKey<LogoOptions>;
+/**
+ * The logo options from `createRui`, or `undefined` when the app configured none.
+ */
+export declare function useLogoOptions(): LogoOptions | undefined;

package/dist/composables/defaults/logo.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { inject } from "vue";
+//#region src/composables/defaults/logo.ts
+var LogoSymbol = Symbol.for("rui:logo");
+/**
+* The logo options from `createRui`, or `undefined` when the app configured none.
+*/
+function useLogoOptions() {
+	return inject(LogoSymbol, void 0);
+}
+//#endregion
+export { LogoSymbol, useLogoOptions };
+//# sourceMappingURL=logo.js.map

package/dist/composables/defaults/logo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"logo.js","names":[],"sources":["../../../src/composables/defaults/logo.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\n\n/**\n * Returns the image URL for a named logo, or `undefined` to keep the bundled one.\n */\nexport type LogoResolver = (name: string) => string | undefined | Promise<string | undefined>;\n\nexport interface LogoOptions {\n /**\n * Resolves the `logo` prop of every `RuiLogo` to an image URL. It runs in the\n * browser after mount, never on the server. The library makes no request of\n * its own: fetching, caching and validating the URL are up to the app.\n */\n resolve: LogoResolver;\n}\n\nexport const LogoSymbol: InjectionKey<LogoOptions> = Symbol.for('rui:logo');\n\n/**\n * The logo options from `createRui`, or `undefined` when the app configured none.\n */\nexport function useLogoOptions(): LogoOptions | undefined {\n return inject(LogoSymbol, undefined);\n}\n"],"mappings":";;AAgBA,IAAa,aAAwC,OAAO,IAAI,UAAU;;;;AAK1E,SAAgB,iBAA0C;CACxD,OAAO,OAAO,YAAY,KAAA,CAAS;AACrC"}

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

@@ -6,8 +6,20 @@ export interface DropdownItemAttr<TValue, TItem> {
     keyAttr?: KeyOfType<TItem, TValue extends Array<infer U> ? U : TValue>;
     textAttr?: keyof TItem | ((item: TItem) => string);
 }
-export type GroupBy<TItem> = keyof TItem | ((item: TItem) => string);
-export type ItemDisabled<TItem> = keyof TItem | ((item: TItem) => boolean);
+/**
+ * An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key
+ * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.
+ */
+export type GroupBy<TItem> = (keyof TItem & string) | ((item: TItem) => string);
+export type ItemDisabled<TItem> = (keyof TItem & string) | ((item: TItem) => boolean);
+/**
+ * The rendered height of a default option row, a `list` button at its default or `sm` size.
+ * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.
+ *
+ * @param dense - whether the options render at the dense size
+ * @returns the row height in pixels
+ */
+export declare function getOptionHeight(dense: boolean | undefined): number;
 export interface DropdownOptionGroup<TItem> {
     group: string;
     items: TItem[];

package/dist/composables/dropdown-menu.js CHANGED Viewed

@@ -2,6 +2,16 @@ 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
+/**
+* The rendered height of a default option row, a `list` button at its default or `sm` size.
+* The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.
+*
+* @param dense - whether the options render at the dense size
+* @returns the row height in pixels
+*/
+function getOptionHeight(dense) {
+	return dense ? 32 : 40;
+}
 function useDropdownOptionProperty({ keyAttr, textAttr }) {
 	function getText(item) {
 		if (textAttr) {
@@ -24,7 +34,7 @@ function toSelectedArray(val) {
 	if (val !== null && val !== void 0) return [val];
 	return [];
 }
-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, groupBy, itemDisabled }) {
+function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false, getIdentifier: externalGetIdentifier, getText: externalGetText, hideSelected, isOpen: externalIsOpen, itemHeight = getOptionHeight(false), keyAttr, menuRef: _menuRef, options: allOptions, overscan = 5, prependWidth, setValue, textAttr, value, groupBy, itemDisabled }) {
 	const { getIdentifier: defaultGetIdentifier, getText: defaultGetText } = useDropdownOptionProperty({
 		keyAttr,
 		textAttr
@@ -223,6 +233,6 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
 	};
 }
 //#endregion
-export { useDropdownMenu, useDropdownOptionProperty };
+export { getOptionHeight, useDropdownMenu, useDropdownOptionProperty };
 //# sourceMappingURL=dropdown-menu.js.map

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

	@@ -1 +1 @@
1	- {"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 type GroupBy<TItem> = keyof TItem \| ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = keyof TItem \| ((item: TItem) => boolean);\n\nexport interface DropdownOptionGroup<TItem> {\n group: string;\n items: TItem[];\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 groupBy?: MaybeRefOrGetter<GroupBy<TItem> \| undefined>;\n itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> \| undefined>;\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 groupBy,\n itemDisabled,\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 function getGroupKey(item: TItem): string {\n const group = toValue(groupBy);\n if (!group)\n return '';\n\n if (typeof group === 'function')\n return group(item);\n\n return String(item[group] ?? '');\n }\n\n function isItemDisabled(item: TItem): boolean {\n const itemDisabledValue = toValue(itemDisabled);\n if (!itemDisabledValue)\n return false;\n\n if (typeof itemDisabledValue === 'function')\n return itemDisabledValue(item);\n\n return Boolean(item[itemDisabledValue]);\n }\n\n const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n if (!get(isGrouped))\n return [];\n\n const buckets = new Map<string, TItem[]>();\n for (const item of get(options)) {\n const key = getGroupKey(item);\n const list = buckets.get(key);\n if (list)\n list.push(item);\n else\n buckets.set(key, [item]);\n }\n\n return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\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 modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n const modelUserNavigated = shallowRef<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 scrollHighlightedIntoView(): void {\n get(_menuRef)\n ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n ?.scrollIntoView({ block: 'nearest' });\n }\n\n async function adjustScrollByHighlightedIndex(): Promise<void> {\n const index = get(modelHighlightedIndex);\n if (index === -1)\n return;\n\n await nextTick();\n if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n scrollHighlightedIntoView();\n return;\n }\n\n // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n scrollTo(index);\n await nextTick();\n scrollHighlightedIntoView();\n }\n\n async function updateOpen(open: boolean): Promise<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(modelHighlightedIndex, index);\n }\n\n await adjustScrollByHighlightedIndex();\n }\n\n watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n await updateOpen(open);\n });\n\n watch(modelHighlightedIndex, async () => {\n await adjustScrollByHighlightedIndex();\n });\n\n watch(options, async () => {\n set(modelUserNavigated, false);\n if (get(modelHighlightedIndex) !== -1) {\n if (get(autoSelectFirst)) {\n set(modelHighlightedIndex, 0);\n await adjustScrollByHighlightedIndex();\n }\n else {\n set(modelHighlightedIndex, -1);\n scrollTo(0);\n }\n }\n else {\n scrollTo(0);\n }\n });\n\n watch(isOpen, (open) => {\n if (!open)\n set(modelUserNavigated, false);\n });\n\n const moveHighlight = (up: boolean): void => {\n if (!get(isOpen)) {\n toggle(true);\n return;\n }\n\n set(modelUserNavigated, true);\n\n const items = get(options);\n const total = items.length;\n if (total === 0)\n return;\n\n const move = up ? -1 : 1;\n let position = get(modelHighlightedIndex);\n\n for (let step = 0; step < total; step++) {\n position += move;\n if (position >= total)\n position = 0;\n else if (position < 0)\n position = total - 1;\n\n const candidate = items[position];\n if (candidate !== undefined && !isItemDisabled(candidate)) {\n set(modelHighlightedIndex, position);\n return;\n }\n }\n };\n\n const applyHighlighted = (): void => {\n if (!setValue \|\| !get(isOpen))\n return;\n\n const highlightedIndexVal = get(modelHighlightedIndex);\n if (highlightedIndexVal === -1)\n return;\n\n const entry = get(options)[highlightedIndexVal];\n if (entry !== undefined && !isItemDisabled(entry))\n setValue(entry);\n };\n\n return {\n applyHighlighted,\n containerProps,\n getIdentifier,\n getText,\n groupedOptions,\n modelHighlightedIndex,\n isActiveItem,\n isGrouped,\n isItemDisabled,\n isOpen,\n itemIndexInValue,\n menuWidth,\n moveHighlight,\n optionsWithSelectedHidden: options,\n renderedData,\n toggle,\n modelUserNavigated,\n valueKey,\n wrapperProps,\n };\n}\n"],"mappings":"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"}
1	+ {"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\n/*\n An item key or a resolver. `& string` lets Vue's compiler infer a String runtime type for the key\n * form; a bare generic `keyof` compiles to Function only, and a consumer's runtime warns.\n /\nexport type GroupBy<TItem> = (keyof TItem & string) \| ((item: TItem) => string);\n\nexport type ItemDisabled<TItem> = (keyof TItem & string) \| ((item: TItem) => boolean);\n\n/\n The rendered height of a default option row, a `list` button at its default or `sm` size.\n * The virtual list reserves this much per row, so a mismatch leaves a gap under the last option.\n \n @param dense - whether the options render at the dense size\n * @returns the row height in pixels\n /\nexport function getOptionHeight(dense: boolean \| undefined): number {\n return dense ? 32 : 40;\n}\n\nexport interface DropdownOptionGroup<TItem> {\n group: string;\n items: TItem[];\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 groupBy?: MaybeRefOrGetter<GroupBy<TItem> \| undefined>;\n itemDisabled?: MaybeRefOrGetter<ItemDisabled<TItem> \| undefined>;\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 = getOptionHeight(false),\n keyAttr,\n menuRef: _menuRef,\n options: allOptions,\n overscan = 5,\n prependWidth,\n setValue,\n textAttr,\n value,\n groupBy,\n itemDisabled,\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 function getGroupKey(item: TItem): string {\n const group = toValue(groupBy);\n if (!group)\n return '';\n\n if (typeof group === 'function')\n return group(item);\n\n return String(item[group] ?? '');\n }\n\n function isItemDisabled(item: TItem): boolean {\n const itemDisabledValue = toValue(itemDisabled);\n if (!itemDisabledValue)\n return false;\n\n if (typeof itemDisabledValue === 'function')\n return itemDisabledValue(item);\n\n return Boolean(item[itemDisabledValue]);\n }\n\n const isGrouped = computed<boolean>(() => toValue(groupBy) !== undefined);\n\n const groupedOptions = computed<DropdownOptionGroup<TItem>[]>(() => {\n if (!get(isGrouped))\n return [];\n\n const buckets = new Map<string, TItem[]>();\n for (const item of get(options)) {\n const key = getGroupKey(item);\n const list = buckets.get(key);\n if (list)\n list.push(item);\n else\n buckets.set(key, [item]);\n }\n\n return Array.from(buckets.entries()).map(([group, items]) => ({ group, items }));\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 modelHighlightedIndex: Ref<number> = ref(get(autoSelectFirst) ? 0 : -1);\n const modelUserNavigated = shallowRef<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 scrollHighlightedIntoView(): void {\n get(_menuRef)\n ?.querySelector<HTMLElement>('[data-highlighted=\"true\"]')\n ?.scrollIntoView({ block: 'nearest' });\n }\n\n async function adjustScrollByHighlightedIndex(): Promise<void> {\n const index = get(modelHighlightedIndex);\n if (index === -1)\n return;\n\n await nextTick();\n if (get(_menuRef)?.querySelector('[data-highlighted=\"true\"]')) {\n scrollHighlightedIntoView();\n return;\n }\n\n // Outside the virtual list's rendered window, so render it first, then nudge it fully into view\n scrollTo(index);\n await nextTick();\n scrollHighlightedIntoView();\n }\n\n async function updateOpen(open: boolean): Promise<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(modelHighlightedIndex, index);\n }\n\n await adjustScrollByHighlightedIndex();\n }\n\n watch([isOpen, () => toValue(disabled)], async ([open, _]) => {\n await updateOpen(open);\n });\n\n watch(modelHighlightedIndex, async () => {\n await adjustScrollByHighlightedIndex();\n });\n\n watch(options, async () => {\n set(modelUserNavigated, false);\n if (get(modelHighlightedIndex) !== -1) {\n if (get(autoSelectFirst)) {\n set(modelHighlightedIndex, 0);\n await adjustScrollByHighlightedIndex();\n }\n else {\n set(modelHighlightedIndex, -1);\n scrollTo(0);\n }\n }\n else {\n scrollTo(0);\n }\n });\n\n watch(isOpen, (open) => {\n if (!open)\n set(modelUserNavigated, false);\n });\n\n const moveHighlight = (up: boolean): void => {\n if (!get(isOpen)) {\n toggle(true);\n return;\n }\n\n set(modelUserNavigated, true);\n\n const items = get(options);\n const total = items.length;\n if (total === 0)\n return;\n\n const move = up ? -1 : 1;\n let position = get(modelHighlightedIndex);\n\n for (let step = 0; step < total; step++) {\n position += move;\n if (position >= total)\n position = 0;\n else if (position < 0)\n position = total - 1;\n\n const candidate = items[position];\n if (candidate !== undefined && !isItemDisabled(candidate)) {\n set(modelHighlightedIndex, position);\n return;\n }\n }\n };\n\n const applyHighlighted = (): void => {\n if (!setValue \|\| !get(isOpen))\n return;\n\n const highlightedIndexVal = get(modelHighlightedIndex);\n if (highlightedIndexVal === -1)\n return;\n\n const entry = get(options)[highlightedIndexVal];\n if (entry !== undefined && !isItemDisabled(entry))\n setValue(entry);\n };\n\n return {\n applyHighlighted,\n containerProps,\n getIdentifier,\n getText,\n groupedOptions,\n modelHighlightedIndex,\n isActiveItem,\n isGrouped,\n isItemDisabled,\n isOpen,\n itemIndexInValue,\n menuWidth,\n moveHighlight,\n optionsWithSelectedHidden: options,\n renderedData,\n toggle,\n modelUserNavigated,\n valueKey,\n wrapperProps,\n };\n}\n"],"mappings":"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"}

package/dist/composables/floating.d.ts CHANGED Viewed

@@ -50,8 +50,6 @@ export interface FloatingOptions {
      */
     size?: boolean;
 }
-/** Custom property carrying the space-aware max height set by the size middleware. */
-export declare const FLOATING_MAX_HEIGHT_VAR = "--rui-floating-max-height";
 export declare const DEFAULT_FLOATING_OPTIONS: Required<FloatingOptions>;
 export interface UseFloatingReturn {
     currentPlacement: Readonly<Ref<Placement>>;

package/dist/composables/floating.js CHANGED Viewed

@@ -64,7 +64,10 @@ function buildOffsetMiddleware(opts) {
 function buildMiddleware(opts, arrowEl) {
 	const mw = [buildOffsetMiddleware(opts)];
 	if (opts.flip !== false) mw.push(flip());
-	mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding }));
+	mw.push(shift({
+		padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding,
+		crossAxis: true
+	}));
 	if (arrowEl) mw.push(arrow({
 		element: arrowEl,
 		padding: 4
@@ -186,6 +189,6 @@ function useFloating(options, disabled = false, openDelay = 0, closeDelay = 0, v
 	};
 }
 //#endregion
-export { DEFAULT_FLOATING_OPTIONS, FLOATING_MAX_HEIGHT_VAR, Placement, Strategy, useFloating };
+export { DEFAULT_FLOATING_OPTIONS, Placement, Strategy, useFloating };
 //# sourceMappingURL=floating.js.map

package/dist/composables/floating.js.map CHANGED Viewed

	@@ -1 +1 @@
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 size,\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; defaults to `Placement.bottom`. /\n placement?: Placement;\n /* CSS positioning strategy; defaults to `Strategy.absolute`. /\n strategy?: Strategy;\n /* Main-axis and/or cross-axis offset from the reference element; defaults to 2. /\n offset?: number \| { mainAxis?: number; crossAxis?: number };\n /* Whether to flip to the opposite side when overflowing; defaults to true. /\n flip?: boolean;\n /* Padding from viewport edges for shift middleware; defaults to 8. /\n shiftPadding?: number;\n /* Whether to auto-update position on scroll/resize; defaults to true. /\n autoUpdate?: boolean \| { scroll?: boolean; resize?: boolean };\n /\n Cap the floating element to the space available toward the viewport edge so\n * it never overflows the window. Exposes the measured space as the\n * `--rui-floating-max-height` custom property on the floating element; the\n * content is responsible for consuming it by capping its own max-height to\n * that variable and scrolling internally. Defaults to false.\n /\n size?: boolean;\n}\n\n/* Custom property carrying the space-aware max height set by the size middleware. /\nexport const FLOATING_MAX_HEIGHT_VAR = '--rui-floating-max-height';\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 size: false,\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\n/\n Cap the floating element to the space available toward the viewport edge and\n * expose it as {@link FLOATING_MAX_HEIGHT_VAR}. The content decides how to use\n * it (cap its own height and scroll internally); writing a custom property\n * instead of a hard max-height keeps this non-invasive for elements that opt in\n * but size themselves differently.\n /\nfunction buildSizeMiddleware(padding: number): Middleware {\n return size({\n padding,\n apply({ availableHeight, elements }) {\n elements.floating.style.setProperty(FLOATING_MAX_HEIGHT_VAR, `${Math.max(0, Math.floor(availableHeight))}px`);\n },\n });\n}\n\n/\n The offset middleware, from either the shorthand distance or the per-axis\n * form, falling back to the default distance on the main axis.\n */\nfunction buildOffsetMiddleware(opts: FloatingOptions): Middleware {\n const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;\n\n if (typeof off === 'number')\n return offset(off);\n\n const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === 'number' ? DEFAULT_FLOATING_OPTIONS.offset : 0;\n return offset({ mainAxis: off.mainAxis ?? defaultOffset, crossAxis: off.crossAxis ?? 0 });\n}\n\nfunction buildMiddleware(opts: FloatingOptions, arrowEl: HTMLElement \| null): Middleware[] {\n const mw: Middleware[] = [buildOffsetMiddleware(opts)];\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 if (opts.size === true)\n mw.push(buildSizeMiddleware(opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding));\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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"}
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 size,\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; defaults to `Placement.bottom`. /\n placement?: Placement;\n /* CSS positioning strategy; defaults to `Strategy.absolute`. /\n strategy?: Strategy;\n /* Main-axis and/or cross-axis offset from the reference element; defaults to 2. /\n offset?: number \| { mainAxis?: number; crossAxis?: number };\n /* Whether to flip to the opposite side when overflowing; defaults to true. /\n flip?: boolean;\n /* Padding from viewport edges for shift middleware; defaults to 8. /\n shiftPadding?: number;\n /* Whether to auto-update position on scroll/resize; defaults to true. /\n autoUpdate?: boolean \| { scroll?: boolean; resize?: boolean };\n /\n Cap the floating element to the space available toward the viewport edge so\n * it never overflows the window. Exposes the measured space as the\n * `--rui-floating-max-height` custom property on the floating element; the\n * content is responsible for consuming it by capping its own max-height to\n * that variable and scrolling internally. Defaults to false.\n /\n size?: boolean;\n}\n\n/* Custom property carrying the space-aware max height set by the size middleware. /\nconst FLOATING_MAX_HEIGHT_VAR = '--rui-floating-max-height';\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 size: false,\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\n/\n Cap the floating element to the space available toward the viewport edge and\n * expose it as {@link FLOATING_MAX_HEIGHT_VAR}. The content decides how to use\n * it (cap its own height and scroll internally); writing a custom property\n * instead of a hard max-height keeps this non-invasive for elements that opt in\n * but size themselves differently.\n /\nfunction buildSizeMiddleware(padding: number): Middleware {\n return size({\n padding,\n apply({ availableHeight, elements }) {\n elements.floating.style.setProperty(FLOATING_MAX_HEIGHT_VAR, `${Math.max(0, Math.floor(availableHeight))}px`);\n },\n });\n}\n\n/\n The offset middleware, from either the shorthand distance or the per-axis\n * form, falling back to the default distance on the main axis.\n */\nfunction buildOffsetMiddleware(opts: FloatingOptions): Middleware {\n const off = opts.offset ?? DEFAULT_FLOATING_OPTIONS.offset;\n\n if (typeof off === 'number')\n return offset(off);\n\n const defaultOffset = typeof DEFAULT_FLOATING_OPTIONS.offset === 'number' ? DEFAULT_FLOATING_OPTIONS.offset : 0;\n return offset({ mainAxis: off.mainAxis ?? defaultOffset, crossAxis: off.crossAxis ?? 0 });\n}\n\nfunction buildMiddleware(opts: FloatingOptions, arrowEl: HTMLElement \| null): Middleware[] {\n const mw: Middleware[] = [buildOffsetMiddleware(opts)];\n\n if (opts.flip !== false)\n mw.push(flip());\n\n // `crossAxis`: when neither side fits, overlap the activator rather than open past the viewport edge\n mw.push(shift({ padding: opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding, crossAxis: true }));\n\n if (arrowEl)\n mw.push(arrow({ element: arrowEl, padding: 4 }));\n\n if (opts.size === true)\n mw.push(buildSizeMiddleware(opts.shiftPadding ?? DEFAULT_FLOATING_OPTIONS.shiftPadding));\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/chips.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+export interface UseAutoCompleteChipsDeps<TItem> {
+    /** Moves focus to the search input, which keeps it while a chip is selected. */
+    focusInput: () => void;
+    getIdentifier: (item: TItem) => unknown;
+    /** Toggles an item in the selection, which removes a chip's item. */
+    setValue: (item: TItem) => void;
+    setValueFocus: (index: number) => void;
+}
+export interface UseAutoCompleteChipsReturn<TItem> {
+    chipAttrs: (item: TItem, index: number) => Record<string, unknown>;
+    /** Selects a clicked chip for Backspace and the arrow keys, with focus left in the input. */
+    selectChip: (index: number) => void;
+}
+/**
+ * The attributes and handlers each selected chip takes. A chip never takes focus: the input keeps
+ * it, where no browser shortcut can claim Backspace, and the chip the keys act on is only drawn as
+ * selected. A click selects a chip and its close button removes it.
+ *
+ * @param deps - the selection operations the handlers call
+ * @returns a function building one chip's attributes, and the click selection
+ */
+export declare function useAutoCompleteChips<TItem>(deps: UseAutoCompleteChipsDeps<TItem>): UseAutoCompleteChipsReturn<TItem>;

package/dist/composables/forms/auto-complete/chips.js ADDED Viewed

@@ -0,0 +1,42 @@
+//#region src/composables/forms/auto-complete/chips.ts
+/**
+* The attributes and handlers each selected chip takes. A chip never takes focus: the input keeps
+* it, where no browser shortcut can claim Backspace, and the chip the keys act on is only drawn as
+* selected. A click selects a chip and its close button removes it.
+*
+* @param deps - the selection operations the handlers call
+* @returns a function building one chip's attributes, and the click selection
+*/
+function useAutoCompleteChips(deps) {
+	/**
+	* Focuses the input before selecting, since the input's focus handler clears any selection.
+	*
+	* @param index - the clicked chip's place among the values
+	*/
+	function selectChip(index) {
+		deps.focusInput();
+		deps.setValueFocus(index);
+	}
+	function chipAttrs(item, index) {
+		return {
+			"data-index": index,
+			"data-value": deps.getIdentifier(item),
+			"onClick": (event) => {
+				event.stopPropagation();
+				selectChip(index);
+			},
+			"onClick:close": () => {
+				deps.focusInput();
+				deps.setValue(item);
+			}
+		};
+	}
+	return {
+		chipAttrs,
+		selectChip
+	};
+}
+//#endregion
+export { useAutoCompleteChips };
+//# sourceMappingURL=chips.js.map

package/dist/composables/forms/auto-complete/chips.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"chips.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/chips.ts"],"sourcesContent":["export interface UseAutoCompleteChipsDeps<TItem> {\n /** Moves focus to the search input, which keeps it while a chip is selected. */\n focusInput: () => void;\n getIdentifier: (item: TItem) => unknown;\n /** Toggles an item in the selection, which removes a chip's item. */\n setValue: (item: TItem) => void;\n setValueFocus: (index: number) => void;\n}\n\nexport interface UseAutoCompleteChipsReturn<TItem> {\n chipAttrs: (item: TItem, index: number) => Record<string, unknown>;\n /** Selects a clicked chip for Backspace and the arrow keys, with focus left in the input. */\n selectChip: (index: number) => void;\n}\n\n/**\n * The attributes and handlers each selected chip takes. A chip never takes focus: the input keeps\n * it, where no browser shortcut can claim Backspace, and the chip the keys act on is only drawn as\n * selected. A click selects a chip and its close button removes it.\n *\n * @param deps - the selection operations the handlers call\n * @returns a function building one chip's attributes, and the click selection\n */\nexport function useAutoCompleteChips<TItem>(deps: UseAutoCompleteChipsDeps<TItem>): UseAutoCompleteChipsReturn<TItem> {\n /**\n * Focuses the input before selecting, since the input's focus handler clears any selection.\n *\n * @param index - the clicked chip's place among the values\n */\n function selectChip(index: number): void {\n deps.focusInput();\n deps.setValueFocus(index);\n }\n\n function chipAttrs(item: TItem, index: number): Record<string, unknown> {\n return {\n 'data-index': index,\n 'data-value': deps.getIdentifier(item),\n 'onClick': (event: MouseEvent): void => {\n event.stopPropagation();\n selectChip(index);\n },\n 'onClick:close': (): void => {\n deps.focusInput();\n deps.setValue(item);\n },\n };\n }\n\n return { chipAttrs, selectChip };\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,qBAA4B,MAA0E;;;;;;CAMpH,SAAS,WAAW,OAAqB;EACvC,KAAK,WAAW;EAChB,KAAK,cAAc,KAAK;CAC1B;CAEA,SAAS,UAAU,MAAa,OAAwC;EACtE,OAAO;GACL,cAAc;GACd,cAAc,KAAK,cAAc,IAAI;GACrC,YAAY,UAA4B;IACtC,MAAM,gBAAgB;IACtB,WAAW,KAAK;GAClB;GACA,uBAA6B;IAC3B,KAAK,WAAW;IAChB,KAAK,SAAS,IAAI;GACpB;EACF;CACF;CAEA,OAAO;EAAE;EAAW;CAAW;AACjC"}

package/dist/composables/forms/auto-complete/combobox.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+export interface UseAutoCompleteComboboxReturn {
+    /** Prefix of each option's id, an option's id being `${prefix}-${index}` in the flat option list. */
+    optionIdPrefix: string;
+    /** The highlighted option, which a screen reader announces while focus stays in the input. */
+    activeDescendant: ComputedRef<string | undefined>;
+}
+/**
+ * The ARIA 1.2 combobox wiring of the auto-complete: the input is the combobox, and since focus
+ * never leaves it while the user arrows through the list, it names the highlighted option.
+ *
+ * @param isOpen - whether the listbox is open
+ * @param highlightedIndex - the highlighted option's place in the flat option list, -1 for none
+ * @returns the option id prefix and the active descendant to bind on the input
+ */
+export declare function useAutoCompleteCombobox(isOpen: MaybeRefOrGetter<boolean>, highlightedIndex: MaybeRefOrGetter<number>): UseAutoCompleteComboboxReturn;
+/**
+ * Splits a caller's attributes between the visual box and the input, which is the combobox: an
+ * `aria-label` or `aria-describedby` passed to the component has to name the combobox.
+ *
+ * @param attrs - the attributes passed to the component
+ * @param aria - true for the `aria-*` ones, false for the rest
+ * @returns the matching attributes
+ */
+export declare function splitAriaAttrs(attrs: Record<string, unknown>, aria: boolean): Record<string, unknown>;

package/dist/composables/forms/auto-complete/combobox.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { computed, toValue, useId } from "vue";
+//#region src/composables/forms/auto-complete/combobox.ts
+/**
+* The ARIA 1.2 combobox wiring of the auto-complete: the input is the combobox, and since focus
+* never leaves it while the user arrows through the list, it names the highlighted option.
+*
+* @param isOpen - whether the listbox is open
+* @param highlightedIndex - the highlighted option's place in the flat option list, -1 for none
+* @returns the option id prefix and the active descendant to bind on the input
+*/
+function useAutoCompleteCombobox(isOpen, highlightedIndex) {
+	const optionIdPrefix = useId();
+	return {
+		activeDescendant: computed(() => {
+			const index = toValue(highlightedIndex);
+			return toValue(isOpen) && index > -1 ? `${optionIdPrefix}-${index}` : void 0;
+		}),
+		optionIdPrefix
+	};
+}
+/**
+* Splits a caller's attributes between the visual box and the input, which is the combobox: an
+* `aria-label` or `aria-describedby` passed to the component has to name the combobox.
+*
+* @param attrs - the attributes passed to the component
+* @param aria - true for the `aria-*` ones, false for the rest
+* @returns the matching attributes
+*/
+function splitAriaAttrs(attrs, aria) {
+	return Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith("aria-") === aria));
+}
+//#endregion
+export { splitAriaAttrs, useAutoCompleteCombobox };
+//# sourceMappingURL=combobox.js.map

package/dist/composables/forms/auto-complete/combobox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"combobox.js","names":[],"sources":["../../../../src/composables/forms/auto-complete/combobox.ts"],"sourcesContent":["import type { ComputedRef, MaybeRefOrGetter } from 'vue';\n\nexport interface UseAutoCompleteComboboxReturn {\n /** Prefix of each option's id, an option's id being `${prefix}-${index}` in the flat option list. */\n optionIdPrefix: string;\n /** The highlighted option, which a screen reader announces while focus stays in the input. */\n activeDescendant: ComputedRef<string | undefined>;\n}\n\n/**\n * The ARIA 1.2 combobox wiring of the auto-complete: the input is the combobox, and since focus\n * never leaves it while the user arrows through the list, it names the highlighted option.\n *\n * @param isOpen - whether the listbox is open\n * @param highlightedIndex - the highlighted option's place in the flat option list, -1 for none\n * @returns the option id prefix and the active descendant to bind on the input\n */\nexport function useAutoCompleteCombobox(\n isOpen: MaybeRefOrGetter<boolean>,\n highlightedIndex: MaybeRefOrGetter<number>,\n): UseAutoCompleteComboboxReturn {\n const optionIdPrefix = useId();\n\n const activeDescendant = computed<string | undefined>(() => {\n const index = toValue(highlightedIndex);\n return toValue(isOpen) && index > -1 ? `${optionIdPrefix}-${index}` : undefined;\n });\n\n return { activeDescendant, optionIdPrefix };\n}\n\n/**\n * Splits a caller's attributes between the visual box and the input, which is the combobox: an\n * `aria-label` or `aria-describedby` passed to the component has to name the combobox.\n *\n * @param attrs - the attributes passed to the component\n * @param aria - true for the `aria-*` ones, false for the rest\n * @returns the matching attributes\n */\nexport function splitAriaAttrs(attrs: Record<string, unknown>, aria: boolean): Record<string, unknown> {\n return Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('aria-') === aria));\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,wBACd,QACA,kBAC+B;CAC/B,MAAM,iBAAiB,MAAM;CAO7B,OAAO;EAAE,kBALgB,eAAmC;GAC1D,MAAM,QAAQ,QAAQ,gBAAgB;GACtC,OAAO,QAAQ,MAAM,KAAK,QAAQ,KAAK,GAAG,eAAe,GAAG,UAAU,KAAA;EACxE,CAES;EAAkB;CAAe;AAC5C;;;;;;;;;AAUA,SAAgB,eAAe,OAAgC,MAAwC;CACrG,OAAO,OAAO,YAAY,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,SAAS,IAAI,WAAW,OAAO,MAAM,IAAI,CAAC;AACrG"}

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

@@ -8,7 +8,6 @@ export interface UseAutoCompleteFocusOptions {
     disabled: MaybeRefOrGetter<boolean>;
 }
 export interface UseAutoCompleteFocusDeps {
-    activatorFocused: Ref<boolean>;
     activatorFocusedWithin: Ref<boolean>;
     focusedValueIndex: Ref<number>;
     internalSearch: Ref<string>;
@@ -22,9 +21,13 @@ export interface UseAutoCompleteFocusDeps {
 }
 export interface UseAutoCompleteFocusReturn {
     anyFocused: ComputedRef<boolean>;
+    /** Whether the user is searching: the input has focus and is not just showing a picked value. */
+    editing: ComputedRef<boolean>;
     inputClass: ComputedRef<string>;
-    onActivatorFocused: () => Promise<void>;
     onInputFocused: () => void;
+    onSettledKeydown: (event: KeyboardEvent) => void;
     setInputFocus: () => Promise<void>;
+    settleOnInput: () => void;
+    unsettle: () => void;
 }
 export declare function useAutoCompleteFocus(options: UseAutoCompleteFocusOptions, deps: UseAutoCompleteFocusDeps): UseAutoCompleteFocusReturn;