v-float 0.10.0 → 0.11.0
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.
- package/README.md +44 -175
- package/dist/index.d.mts +688 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +2038 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +74 -75
- package/dist/composables/index.d.ts +0 -4
- package/dist/composables/index.d.ts.map +0 -1
- package/dist/composables/interactions/index.d.ts +0 -7
- package/dist/composables/interactions/index.d.ts.map +0 -1
- package/dist/composables/interactions/polygon.d.ts +0 -38
- package/dist/composables/interactions/polygon.d.ts.map +0 -1
- package/dist/composables/interactions/use-click.d.ts +0 -120
- package/dist/composables/interactions/use-click.d.ts.map +0 -1
- package/dist/composables/interactions/use-escape-key.d.ts +0 -57
- package/dist/composables/interactions/use-escape-key.d.ts.map +0 -1
- package/dist/composables/interactions/use-focus-trap.d.ts +0 -78
- package/dist/composables/interactions/use-focus-trap.d.ts.map +0 -1
- package/dist/composables/interactions/use-focus.d.ts +0 -60
- package/dist/composables/interactions/use-focus.d.ts.map +0 -1
- package/dist/composables/interactions/use-hover.d.ts +0 -78
- package/dist/composables/interactions/use-hover.d.ts.map +0 -1
- package/dist/composables/interactions/use-list-navigation.d.ts +0 -144
- package/dist/composables/interactions/use-list-navigation.d.ts.map +0 -1
- package/dist/composables/middlewares/arrow.d.ts +0 -25
- package/dist/composables/middlewares/arrow.d.ts.map +0 -1
- package/dist/composables/middlewares/index.d.ts +0 -4
- package/dist/composables/middlewares/index.d.ts.map +0 -1
- package/dist/composables/positioning/index.d.ts +0 -5
- package/dist/composables/positioning/index.d.ts.map +0 -1
- package/dist/composables/positioning/use-arrow.d.ts +0 -55
- package/dist/composables/positioning/use-arrow.d.ts.map +0 -1
- package/dist/composables/positioning/use-client-point.d.ts +0 -218
- package/dist/composables/positioning/use-client-point.d.ts.map +0 -1
- package/dist/composables/positioning/use-floating-tree.d.ts +0 -240
- package/dist/composables/positioning/use-floating-tree.d.ts.map +0 -1
- package/dist/composables/positioning/use-floating.d.ts +0 -162
- package/dist/composables/positioning/use-floating.d.ts.map +0 -1
- package/dist/composables/utils/is-using-keyboard.d.ts +0 -2
- package/dist/composables/utils/is-using-keyboard.d.ts.map +0 -1
- package/dist/composables/utils/use-active-descendant.d.ts +0 -8
- package/dist/composables/utils/use-active-descendant.d.ts.map +0 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +0 -1
- package/dist/types.d.ts +0 -18
- package/dist/types.d.ts.map +0 -1
- package/dist/utils.d.ts +0 -92
- package/dist/utils.d.ts.map +0 -1
- package/dist/v-float.es.js +0 -3827
- package/dist/v-float.umd.js +0 -8
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,688 @@
|
|
|
1
|
+
import { ComputedRef, MaybeRef, MaybeRefOrGetter, Ref } from "vue";
|
|
2
|
+
import { AutoUpdateOptions, Middleware, Middleware as Middleware$1, MiddlewareData, Padding, Placement, Placement as Placement$1, Strategy, Strategy as Strategy$1, autoPlacement, flip, hide, offset, shift, size } from "@floating-ui/dom";
|
|
3
|
+
|
|
4
|
+
//#region src/types.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Minimal VirtualElement interface compatible with Floating UI expectations.
|
|
7
|
+
* Provides a bounding client rect and an optional context element for layout.
|
|
8
|
+
*/
|
|
9
|
+
interface VirtualElement {
|
|
10
|
+
getBoundingClientRect: () => DOMRect;
|
|
11
|
+
/**
|
|
12
|
+
* Optional context element used by Floating UI to resolve layout metrics.
|
|
13
|
+
*/
|
|
14
|
+
contextElement?: Element;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Primary interaction reasons for open state changes. Minimal and extensible.
|
|
18
|
+
*/
|
|
19
|
+
type OpenChangeReason = "anchor-click" | "keyboard-activate" | "outside-pointer" | "focus" | "blur" | "hover" | "escape-key" | "programmatic";
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/composables/positioning/use-floating.d.ts
|
|
22
|
+
type AnchorElement = HTMLElement | VirtualElement | null;
|
|
23
|
+
type FloatingElement = HTMLElement | null;
|
|
24
|
+
type FloatingStyles = {
|
|
25
|
+
position: Strategy$1;
|
|
26
|
+
top: string;
|
|
27
|
+
left: string;
|
|
28
|
+
transform?: string;
|
|
29
|
+
"will-change"?: string;
|
|
30
|
+
} & {
|
|
31
|
+
[key: `--${string}`]: any;
|
|
32
|
+
};
|
|
33
|
+
interface UseFloatingOptions {
|
|
34
|
+
placement?: MaybeRefOrGetter<Placement$1 | undefined>;
|
|
35
|
+
strategy?: MaybeRefOrGetter<Strategy$1 | undefined>;
|
|
36
|
+
transform?: MaybeRefOrGetter<boolean | undefined>;
|
|
37
|
+
middlewares?: MaybeRefOrGetter<Middleware$1[]>;
|
|
38
|
+
autoUpdate?: boolean | AutoUpdateOptions;
|
|
39
|
+
open?: Ref<boolean>;
|
|
40
|
+
onOpenChange?: (open: boolean, reason: OpenChangeReason, event?: Event) => void;
|
|
41
|
+
}
|
|
42
|
+
interface FloatingRefs {
|
|
43
|
+
anchorEl: Ref<AnchorElement>;
|
|
44
|
+
floatingEl: Ref<FloatingElement>;
|
|
45
|
+
arrowEl: Ref<HTMLElement | null>;
|
|
46
|
+
setAnchor: (value: AnchorElement) => void;
|
|
47
|
+
setFloating: (value: FloatingElement) => void;
|
|
48
|
+
setArrow: (value: HTMLElement | null) => void;
|
|
49
|
+
}
|
|
50
|
+
interface FloatingState {
|
|
51
|
+
open: Readonly<Ref<boolean>>;
|
|
52
|
+
setOpen: (open: boolean, reason?: OpenChangeReason, event?: Event) => void;
|
|
53
|
+
}
|
|
54
|
+
interface FloatingPosition {
|
|
55
|
+
x: Readonly<Ref<number>>;
|
|
56
|
+
y: Readonly<Ref<number>>;
|
|
57
|
+
strategy: Readonly<Ref<Strategy$1>>;
|
|
58
|
+
placement: Readonly<Ref<Placement$1>>;
|
|
59
|
+
middlewareData: Readonly<Ref<MiddlewareData>>;
|
|
60
|
+
isPositioned: Readonly<Ref<boolean>>;
|
|
61
|
+
styles: Readonly<Ref<FloatingStyles>>;
|
|
62
|
+
update: () => void;
|
|
63
|
+
}
|
|
64
|
+
interface FloatingRoot {
|
|
65
|
+
refs: FloatingRefs;
|
|
66
|
+
state: FloatingState;
|
|
67
|
+
position: FloatingPosition;
|
|
68
|
+
}
|
|
69
|
+
interface FloatingContext extends FloatingRoot {
|
|
70
|
+
/**
|
|
71
|
+
* Deprecated flat aliases kept during the grouped-return transition.
|
|
72
|
+
*/
|
|
73
|
+
open: FloatingState["open"];
|
|
74
|
+
setOpen: FloatingState["setOpen"];
|
|
75
|
+
x: FloatingPosition["x"];
|
|
76
|
+
y: FloatingPosition["y"];
|
|
77
|
+
strategy: FloatingPosition["strategy"];
|
|
78
|
+
placement: FloatingPosition["placement"];
|
|
79
|
+
middlewareData: FloatingPosition["middlewareData"];
|
|
80
|
+
isPositioned: FloatingPosition["isPositioned"];
|
|
81
|
+
floatingStyles: FloatingPosition["styles"];
|
|
82
|
+
update: FloatingPosition["update"];
|
|
83
|
+
}
|
|
84
|
+
declare function useFloating(anchorEl: Ref<AnchorElement>, floatingEl: Ref<FloatingElement>, options?: UseFloatingOptions): FloatingContext;
|
|
85
|
+
//#endregion
|
|
86
|
+
//#region src/composables/interactions/use-click.d.ts
|
|
87
|
+
/**
|
|
88
|
+
* Enables showing/hiding the floating element when clicking the anchor element
|
|
89
|
+
* and optionally when clicking outside both the anchor and floating elements.
|
|
90
|
+
*
|
|
91
|
+
* This composable provides unified event handlers for both inside click interactions
|
|
92
|
+
* (to open/toggle floating elements) and outside click interactions (to close them).
|
|
93
|
+
*
|
|
94
|
+
* @param context - The floating context with open state and change handler.
|
|
95
|
+
* @param options - Configuration options for click behavior.
|
|
96
|
+
*
|
|
97
|
+
* @example Basic usage with outside click enabled
|
|
98
|
+
* ```ts
|
|
99
|
+
* const context = useFloating(...)
|
|
100
|
+
* useClick(context, {
|
|
101
|
+
* toggle: true,
|
|
102
|
+
* closeOnOutsideClick: true,
|
|
103
|
+
* outsideClickEvent: 'pointerdown'
|
|
104
|
+
* })
|
|
105
|
+
* ```
|
|
106
|
+
*
|
|
107
|
+
* @example Custom outside click handler
|
|
108
|
+
* ```ts
|
|
109
|
+
* useClick(context, {
|
|
110
|
+
* closeOnOutsideClick: true,
|
|
111
|
+
* onOutsideClick: (event) => {
|
|
112
|
+
* if (confirm("Close dialog?")) {
|
|
113
|
+
* context.setOpen(false)
|
|
114
|
+
* }
|
|
115
|
+
* },
|
|
116
|
+
* })
|
|
117
|
+
* ```
|
|
118
|
+
*/
|
|
119
|
+
declare function useClick(context: UseClickContext, options?: UseClickOptions): void;
|
|
120
|
+
interface UseClickContext {
|
|
121
|
+
refs: FloatingContext["refs"];
|
|
122
|
+
state?: FloatingContext["state"];
|
|
123
|
+
open?: FloatingContext["open"];
|
|
124
|
+
setOpen?: FloatingContext["setOpen"];
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Options for configuring the useClick behavior.
|
|
128
|
+
*/
|
|
129
|
+
interface UseClickOptions {
|
|
130
|
+
/**
|
|
131
|
+
* Whether the composable is enabled.
|
|
132
|
+
* @default true
|
|
133
|
+
*/
|
|
134
|
+
enabled?: MaybeRefOrGetter<boolean>;
|
|
135
|
+
/**
|
|
136
|
+
* The type of event to use to determine a "click" with mouse input.
|
|
137
|
+
* This option does not effect keyboard interactions.
|
|
138
|
+
* @default 'click'
|
|
139
|
+
*/
|
|
140
|
+
event?: MaybeRefOrGetter<"click" | "mousedown">;
|
|
141
|
+
/**
|
|
142
|
+
* Whether to toggle the open state with repeated clicks.
|
|
143
|
+
* @default true
|
|
144
|
+
*/
|
|
145
|
+
toggle?: MaybeRefOrGetter<boolean>;
|
|
146
|
+
/**
|
|
147
|
+
* Whether to ignore the logic for mouse input.
|
|
148
|
+
* @default false
|
|
149
|
+
*/
|
|
150
|
+
ignoreMouse?: MaybeRefOrGetter<boolean>;
|
|
151
|
+
/**
|
|
152
|
+
* Whether to ignore keyboard handlers (Enter and Space key functionality).
|
|
153
|
+
* @default false
|
|
154
|
+
*/
|
|
155
|
+
ignoreKeyboard?: MaybeRefOrGetter<boolean>;
|
|
156
|
+
/**
|
|
157
|
+
* Whether to ignore touch events.
|
|
158
|
+
* @default false
|
|
159
|
+
*/
|
|
160
|
+
ignoreTouch?: MaybeRefOrGetter<boolean>;
|
|
161
|
+
/**
|
|
162
|
+
* Whether to close the floating element when clicking outside.
|
|
163
|
+
* @default false
|
|
164
|
+
*/
|
|
165
|
+
closeOnOutsideClick?: MaybeRefOrGetter<boolean>;
|
|
166
|
+
/**
|
|
167
|
+
* The event to use for outside click detection.
|
|
168
|
+
* @default 'pointerdown'
|
|
169
|
+
*/
|
|
170
|
+
outsideClickEvent?: MaybeRefOrGetter<"pointerdown" | "mousedown" | "click">;
|
|
171
|
+
/**
|
|
172
|
+
* Whether to use capture phase for document outside click listener.
|
|
173
|
+
* @default true
|
|
174
|
+
*/
|
|
175
|
+
outsideCapture?: MaybeRefOrGetter<boolean>;
|
|
176
|
+
/**
|
|
177
|
+
* Custom function to handle outside clicks.
|
|
178
|
+
* If provided, this function will be called instead of the default behavior.
|
|
179
|
+
* @param event - The mouse event that triggered the outside click
|
|
180
|
+
*/
|
|
181
|
+
onOutsideClick?: (event: MouseEvent) => void;
|
|
182
|
+
/**
|
|
183
|
+
* Whether to ignore clicks on scrollbars (prevent them from closing the floating element).
|
|
184
|
+
* @default true
|
|
185
|
+
*/
|
|
186
|
+
ignoreScrollbar?: MaybeRefOrGetter<boolean>;
|
|
187
|
+
/**
|
|
188
|
+
* Whether to ignore outside clicks that are part of a drag sequence
|
|
189
|
+
* (where the drag started inside the floating element and ended outside).
|
|
190
|
+
* @default true
|
|
191
|
+
*/
|
|
192
|
+
ignoreDrag?: MaybeRefOrGetter<boolean>;
|
|
193
|
+
}
|
|
194
|
+
//#endregion
|
|
195
|
+
//#region src/composables/positioning/use-arrow.d.ts
|
|
196
|
+
interface UseArrowReturn {
|
|
197
|
+
arrowX: ComputedRef<number>;
|
|
198
|
+
arrowY: ComputedRef<number>;
|
|
199
|
+
arrowStyles: ComputedRef<Record<string, string>>;
|
|
200
|
+
}
|
|
201
|
+
interface UseArrowOptions {
|
|
202
|
+
element?: Ref<HTMLElement | null>;
|
|
203
|
+
offset?: string;
|
|
204
|
+
}
|
|
205
|
+
declare function useArrow(context: FloatingContext, options: UseArrowOptions & {
|
|
206
|
+
element: Ref<HTMLElement | null>;
|
|
207
|
+
}): UseArrowReturn;
|
|
208
|
+
declare function useArrow(arrowEl: Ref<HTMLElement | null>, context: FloatingContext, options?: Omit<UseArrowOptions, "element">): UseArrowReturn;
|
|
209
|
+
//#endregion
|
|
210
|
+
//#region src/composables/positioning/client-point/types.d.ts
|
|
211
|
+
interface Coordinates {
|
|
212
|
+
x: number | null;
|
|
213
|
+
y: number | null;
|
|
214
|
+
}
|
|
215
|
+
type AxisConstraint = "x" | "y" | "both";
|
|
216
|
+
type TrackingMode = "follow" | "static";
|
|
217
|
+
interface PointerEventData {
|
|
218
|
+
type: "pointerdown" | "pointermove" | "pointerenter";
|
|
219
|
+
coordinates: Coordinates;
|
|
220
|
+
originalEvent: PointerEvent;
|
|
221
|
+
}
|
|
222
|
+
interface TrackingContext {
|
|
223
|
+
isOpen: boolean;
|
|
224
|
+
}
|
|
225
|
+
interface VirtualElementFactoryOptions {
|
|
226
|
+
coordinates: Coordinates;
|
|
227
|
+
referenceElement?: HTMLElement | null;
|
|
228
|
+
baselineCoordinates?: Coordinates | null;
|
|
229
|
+
axis?: AxisConstraint;
|
|
230
|
+
}
|
|
231
|
+
interface VirtualElementFactoryContract {
|
|
232
|
+
create(options: VirtualElementFactoryOptions): VirtualElement;
|
|
233
|
+
}
|
|
234
|
+
//#endregion
|
|
235
|
+
//#region src/composables/positioning/client-point/tracking-strategies.d.ts
|
|
236
|
+
declare abstract class TrackingStrategy {
|
|
237
|
+
abstract readonly name: TrackingMode;
|
|
238
|
+
protected lastKnownCoordinates: Coordinates | null;
|
|
239
|
+
abstract process(event: PointerEventData, context: TrackingContext): Coordinates | null;
|
|
240
|
+
abstract getRequiredEvents(): PointerEventData["type"][];
|
|
241
|
+
getCoordinatesForOpening(): Coordinates | null;
|
|
242
|
+
onClose(): void;
|
|
243
|
+
reset(): void;
|
|
244
|
+
}
|
|
245
|
+
declare class FollowTracker extends TrackingStrategy {
|
|
246
|
+
readonly name: "follow";
|
|
247
|
+
getRequiredEvents(): PointerEventData["type"][];
|
|
248
|
+
process(event: PointerEventData, context: TrackingContext): Coordinates | null;
|
|
249
|
+
}
|
|
250
|
+
declare class StaticTracker extends TrackingStrategy {
|
|
251
|
+
readonly name: "static";
|
|
252
|
+
private triggerCoordinates;
|
|
253
|
+
getRequiredEvents(): PointerEventData["type"][];
|
|
254
|
+
process(event: PointerEventData, context: TrackingContext): Coordinates | null;
|
|
255
|
+
getCoordinatesForOpening(): Coordinates | null;
|
|
256
|
+
reset(): void;
|
|
257
|
+
onClose(): void;
|
|
258
|
+
}
|
|
259
|
+
//#endregion
|
|
260
|
+
//#region src/composables/positioning/client-point/virtual-element-factory.d.ts
|
|
261
|
+
declare class VirtualElementFactory implements VirtualElementFactoryContract {
|
|
262
|
+
private static readonly DEFAULT_DIMENSIONS;
|
|
263
|
+
create(options: VirtualElementFactoryOptions): VirtualElement;
|
|
264
|
+
private buildConfiguration;
|
|
265
|
+
private buildBoundingRect;
|
|
266
|
+
private getReferenceRect;
|
|
267
|
+
private resolvePosition;
|
|
268
|
+
private resolveAxisCoordinate;
|
|
269
|
+
private calculateSize;
|
|
270
|
+
private buildDOMRect;
|
|
271
|
+
}
|
|
272
|
+
//#endregion
|
|
273
|
+
//#region src/composables/positioning/use-client-point.d.ts
|
|
274
|
+
interface UseClientPointOptions {
|
|
275
|
+
pointerTarget?: Ref<HTMLElement | null>;
|
|
276
|
+
enabled?: MaybeRefOrGetter<boolean>;
|
|
277
|
+
axis?: MaybeRefOrGetter<AxisConstraint>;
|
|
278
|
+
x?: MaybeRefOrGetter<number | null>;
|
|
279
|
+
y?: MaybeRefOrGetter<number | null>;
|
|
280
|
+
trackingMode?: TrackingMode;
|
|
281
|
+
}
|
|
282
|
+
interface UseClientPointReturn {
|
|
283
|
+
coordinates: Readonly<Ref<{
|
|
284
|
+
x: number | null;
|
|
285
|
+
y: number | null;
|
|
286
|
+
}>>;
|
|
287
|
+
updatePosition: (x: number, y: number) => void;
|
|
288
|
+
}
|
|
289
|
+
interface UseClientPointContext {
|
|
290
|
+
refs: {
|
|
291
|
+
anchorEl: Ref<AnchorElement>;
|
|
292
|
+
};
|
|
293
|
+
state?: FloatingContext["state"];
|
|
294
|
+
open?: FloatingContext["open"];
|
|
295
|
+
setOpen?: FloatingContext["setOpen"];
|
|
296
|
+
position?: Pick<FloatingContext["position"], "update">;
|
|
297
|
+
update?: () => void;
|
|
298
|
+
}
|
|
299
|
+
declare function useClientPoint(context: UseClientPointContext, options?: UseClientPointOptions): UseClientPointReturn;
|
|
300
|
+
declare function useClientPoint(pointerTarget: Ref<HTMLElement | null>, context: UseClientPointContext, options?: Omit<UseClientPointOptions, "pointerTarget">): UseClientPointReturn;
|
|
301
|
+
//#endregion
|
|
302
|
+
//#region src/composables/interactions/use-escape-key.d.ts
|
|
303
|
+
interface UseEscapeKeyContext {
|
|
304
|
+
state?: FloatingContext["state"];
|
|
305
|
+
open?: FloatingContext["open"];
|
|
306
|
+
setOpen?: FloatingContext["setOpen"];
|
|
307
|
+
}
|
|
308
|
+
interface UseEscapeKeyOptions {
|
|
309
|
+
/**
|
|
310
|
+
* Condition to enable the escape key listener.
|
|
311
|
+
* @default true
|
|
312
|
+
*/
|
|
313
|
+
enabled?: MaybeRefOrGetter<boolean>;
|
|
314
|
+
/**
|
|
315
|
+
* Whether to use capture phase for document event listeners.
|
|
316
|
+
* @default false
|
|
317
|
+
*/
|
|
318
|
+
capture?: boolean;
|
|
319
|
+
/**
|
|
320
|
+
* Whether to call preventDefault on the escape key event before handling it.
|
|
321
|
+
* @default false
|
|
322
|
+
*/
|
|
323
|
+
preventDefault?: boolean;
|
|
324
|
+
/**
|
|
325
|
+
* Custom callback function to be executed when the escape key is pressed.
|
|
326
|
+
* When provided, overrides default behavior.
|
|
327
|
+
*/
|
|
328
|
+
onEscape?: (event: KeyboardEvent) => void;
|
|
329
|
+
}
|
|
330
|
+
/**
|
|
331
|
+
* A composable to handle the escape key press with composition event handling.
|
|
332
|
+
*
|
|
333
|
+
* When triggered, it will close the floating element by setting open to false.
|
|
334
|
+
*
|
|
335
|
+
* @param context - The floating context with open state and change handler.
|
|
336
|
+
* @param options - {@link UseEscapeKeyOptions}
|
|
337
|
+
*
|
|
338
|
+
* @example Basic usage
|
|
339
|
+
* ```ts
|
|
340
|
+
* const context = useFloating(...)
|
|
341
|
+
* useEscapeKey(context) // Closes the floating element on escape
|
|
342
|
+
* ```
|
|
343
|
+
*
|
|
344
|
+
* @example Custom handler
|
|
345
|
+
* ```ts
|
|
346
|
+
* useEscapeKey(context, {
|
|
347
|
+
* onEscape: (event) => {
|
|
348
|
+
* if (hasUnsavedChanges.value) {
|
|
349
|
+
* showConfirmDialog.value = true
|
|
350
|
+
* } else {
|
|
351
|
+
* context.setOpen(false)
|
|
352
|
+
* }
|
|
353
|
+
* }
|
|
354
|
+
* })
|
|
355
|
+
* ```
|
|
356
|
+
*/
|
|
357
|
+
declare function useEscapeKey(context: UseEscapeKeyContext, options?: UseEscapeKeyOptions): void;
|
|
358
|
+
//#endregion
|
|
359
|
+
//#region src/composables/interactions/use-focus.d.ts
|
|
360
|
+
/**
|
|
361
|
+
* Enables showing/hiding the floating element when the reference element receives or loses focus.
|
|
362
|
+
*
|
|
363
|
+
* Keyboard-only interaction hook. Compose with `useClick`, `useHover`, `useEscapeKey` for a complete UX.
|
|
364
|
+
*
|
|
365
|
+
* @param context - The floating context with open state and change handler
|
|
366
|
+
* @param options - Configuration options
|
|
367
|
+
*
|
|
368
|
+
* @example
|
|
369
|
+
* ```ts
|
|
370
|
+
* const ctx = useFloating(...)
|
|
371
|
+
* useFocus(ctx)
|
|
372
|
+
* ```
|
|
373
|
+
*/
|
|
374
|
+
declare function useFocus(context: UseFocusContext, options?: UseFocusOptions): UseFocusReturn;
|
|
375
|
+
interface UseFocusContext {
|
|
376
|
+
refs: FloatingContext["refs"];
|
|
377
|
+
state?: FloatingContext["state"];
|
|
378
|
+
open?: FloatingContext["open"];
|
|
379
|
+
setOpen?: FloatingContext["setOpen"];
|
|
380
|
+
}
|
|
381
|
+
interface UseFocusOptions {
|
|
382
|
+
/**
|
|
383
|
+
* Whether focus event listeners are enabled
|
|
384
|
+
* @default true
|
|
385
|
+
*/
|
|
386
|
+
enabled?: MaybeRefOrGetter<boolean>;
|
|
387
|
+
/**
|
|
388
|
+
* Whether the open state only changes if the focus event is considered
|
|
389
|
+
* visible (`:focus-visible` CSS selector).
|
|
390
|
+
* @default true
|
|
391
|
+
*/
|
|
392
|
+
requireFocusVisible?: MaybeRefOrGetter<boolean>;
|
|
393
|
+
}
|
|
394
|
+
/**
|
|
395
|
+
* Return value of the useFocus composable
|
|
396
|
+
*/
|
|
397
|
+
interface UseFocusReturn {
|
|
398
|
+
/**
|
|
399
|
+
* Cleanup function that removes all event listeners and clears pending timeouts.
|
|
400
|
+
* Useful for manual cleanup in testing scenarios.
|
|
401
|
+
*/
|
|
402
|
+
cleanup: () => void;
|
|
403
|
+
}
|
|
404
|
+
//#endregion
|
|
405
|
+
//#region src/composables/interactions/use-focus-trap.d.ts
|
|
406
|
+
interface UseFocusTrapContext {
|
|
407
|
+
refs: FloatingContext["refs"];
|
|
408
|
+
state?: FloatingContext["state"];
|
|
409
|
+
open?: FloatingContext["open"];
|
|
410
|
+
setOpen?: FloatingContext["setOpen"];
|
|
411
|
+
}
|
|
412
|
+
interface UseFocusTrapOptions {
|
|
413
|
+
/**
|
|
414
|
+
* Determines if the focus trap should be enabled.
|
|
415
|
+
* When `true`, the focus trap is active.
|
|
416
|
+
* @default true
|
|
417
|
+
*/
|
|
418
|
+
enabled?: MaybeRefOrGetter<boolean>;
|
|
419
|
+
/**
|
|
420
|
+
* When `true`, content outside the trap will be hidden from accessibility
|
|
421
|
+
* trees (via `aria-hidden`) and potentially made inert (via `inert` attribute
|
|
422
|
+
* if `outsideElementsInert` is `true` and supported).
|
|
423
|
+
* This mimics modal behavior.
|
|
424
|
+
* @default false
|
|
425
|
+
*/
|
|
426
|
+
modal?: MaybeRefOrGetter<boolean>;
|
|
427
|
+
/**
|
|
428
|
+
* Specifies the element that should receive initial focus when the trap is activated.
|
|
429
|
+
* - `undefined` or omitted: Focuses the first tabbable element within the trap.
|
|
430
|
+
* - CSS selector string: Queries and focuses the first matching element.
|
|
431
|
+
* - `HTMLElement`: Focuses the specific provided HTML element.
|
|
432
|
+
* - `Function`: A function that returns an `HTMLElement` or `false`. The returned
|
|
433
|
+
* element will receive focus.
|
|
434
|
+
* - `false`: Prevents any initial focus from being set by the trap.
|
|
435
|
+
*/
|
|
436
|
+
initialFocus?: HTMLElement | (() => HTMLElement | false) | string | false;
|
|
437
|
+
/**
|
|
438
|
+
* When `true`, focus will be returned to the element that was focused
|
|
439
|
+
* immediately before the trap was activated, upon deactivation.
|
|
440
|
+
* @default true
|
|
441
|
+
*/
|
|
442
|
+
returnFocus?: MaybeRefOrGetter<boolean>;
|
|
443
|
+
/**
|
|
444
|
+
* When `true` and the trap is not `modal`, the trap will deactivate (and potentially close
|
|
445
|
+
* the associated component) if focus moves outside the defined trap elements.
|
|
446
|
+
* @default false
|
|
447
|
+
*/
|
|
448
|
+
closeOnFocusOut?: MaybeRefOrGetter<boolean>;
|
|
449
|
+
/**
|
|
450
|
+
* Controls whether the browser should scroll to the focused element.
|
|
451
|
+
* Passed directly to the `focus()` method's `preventScroll` option.
|
|
452
|
+
* @default true
|
|
453
|
+
*/
|
|
454
|
+
preventScroll?: MaybeRefOrGetter<boolean>;
|
|
455
|
+
/**
|
|
456
|
+
* When `true` and `modal` is `true`, applies the `inert` attribute (if supported
|
|
457
|
+
* by the browser) to elements outside the focus trap to prevent user interaction
|
|
458
|
+
* and assistive technology access.
|
|
459
|
+
* @default false
|
|
460
|
+
*/
|
|
461
|
+
outsideElementsInert?: MaybeRefOrGetter<boolean>;
|
|
462
|
+
/**
|
|
463
|
+
* An optional error handler function that will be called if there's an
|
|
464
|
+
* issue during the focus trap activation process.
|
|
465
|
+
* @param error - The error object.
|
|
466
|
+
*/
|
|
467
|
+
onError?: (error: unknown) => void;
|
|
468
|
+
}
|
|
469
|
+
interface UseFocusTrapReturn {
|
|
470
|
+
/** Check if the focus trap is currently active */
|
|
471
|
+
isActive: ComputedRef<boolean>;
|
|
472
|
+
/** Manually activate the focus trap (if enabled and open) */
|
|
473
|
+
activate: () => void;
|
|
474
|
+
/** Manually deactivate the focus trap */
|
|
475
|
+
deactivate: () => void;
|
|
476
|
+
}
|
|
477
|
+
/**
|
|
478
|
+
* Creates a focus trap for a floating element using focus-trap library.
|
|
479
|
+
* Manages focus containment, modal behavior, and accessibility features.
|
|
480
|
+
*
|
|
481
|
+
* @param context - Floating context containing floating element refs
|
|
482
|
+
* @param options - Configuration options for the focus trap
|
|
483
|
+
* @returns Object with isActive state, and manual control methods
|
|
484
|
+
*/
|
|
485
|
+
declare function useFocusTrap(context: UseFocusTrapContext, options?: UseFocusTrapOptions): UseFocusTrapReturn;
|
|
486
|
+
//#endregion
|
|
487
|
+
//#region src/composables/interactions/polygon/geometry.d.ts
|
|
488
|
+
type Point = [number, number];
|
|
489
|
+
type Polygon = Point[];
|
|
490
|
+
//#endregion
|
|
491
|
+
//#region src/composables/interactions/polygon/bridge.d.ts
|
|
492
|
+
interface SafePolygonOptions {
|
|
493
|
+
buffer?: number;
|
|
494
|
+
requireIntent?: boolean;
|
|
495
|
+
onPolygonChange?: (polygon: Polygon) => void;
|
|
496
|
+
}
|
|
497
|
+
//#endregion
|
|
498
|
+
//#region src/composables/interactions/use-hover.d.ts
|
|
499
|
+
interface UseHoverOptions {
|
|
500
|
+
/**
|
|
501
|
+
* Whether hover event listeners are enabled.
|
|
502
|
+
* @default true
|
|
503
|
+
*/
|
|
504
|
+
enabled?: MaybeRef<boolean>;
|
|
505
|
+
/**
|
|
506
|
+
* Delay in milliseconds before showing/hiding the floating element.
|
|
507
|
+
* Can be a single number for both open and close, or an object
|
|
508
|
+
* specifying different delays.
|
|
509
|
+
* @default 0
|
|
510
|
+
*/
|
|
511
|
+
delay?: MaybeRef<number | {
|
|
512
|
+
open?: number;
|
|
513
|
+
close?: number;
|
|
514
|
+
}>;
|
|
515
|
+
/**
|
|
516
|
+
* Time in milliseconds the pointer must rest within the reference
|
|
517
|
+
* element before opening the floating element.
|
|
518
|
+
* this option is ignored if an open delay is specified.
|
|
519
|
+
* @default 0
|
|
520
|
+
*/
|
|
521
|
+
restMs?: MaybeRef<number>;
|
|
522
|
+
/**
|
|
523
|
+
* Whether hover events should only trigger for mouse like pointers (mouse, pen ,stylus ..etc).
|
|
524
|
+
* @default false
|
|
525
|
+
*/
|
|
526
|
+
mouseOnly?: MaybeRef<boolean>;
|
|
527
|
+
/**
|
|
528
|
+
* Enable floating-ui style safe polygon algorithm that keeps the
|
|
529
|
+
* floating element open while the pointer traverses the rectangle/triangle
|
|
530
|
+
* region between the reference and floating elements.
|
|
531
|
+
* – `true` → enabled with defaults
|
|
532
|
+
* – `false | undefined` → disabled (current behaviour)
|
|
533
|
+
* – `SafePolygonOptions` → enabled with custom buffer
|
|
534
|
+
*/
|
|
535
|
+
safePolygon?: MaybeRef<boolean | SafePolygonOptions>;
|
|
536
|
+
}
|
|
537
|
+
/**
|
|
538
|
+
* Enables showing/hiding the floating element when hovering the reference element
|
|
539
|
+
* with enhanced behaviors like delayed open/close, rest detection, and custom
|
|
540
|
+
* exit handling.
|
|
541
|
+
*
|
|
542
|
+
* @param context - The floating context with open state and change handler
|
|
543
|
+
* @param options - Configuration options for hover behavior
|
|
544
|
+
*
|
|
545
|
+
* @example Basic usage
|
|
546
|
+
* ```ts
|
|
547
|
+
* const context = useFloating(...)
|
|
548
|
+
* useHover(context, {
|
|
549
|
+
* delay: { open: 100, close: 300 },
|
|
550
|
+
* restMs: 150
|
|
551
|
+
* })
|
|
552
|
+
* ```
|
|
553
|
+
*/
|
|
554
|
+
declare function useHover(context: FloatingContext, options?: UseHoverOptions): void;
|
|
555
|
+
//#endregion
|
|
556
|
+
//#region src/composables/interactions/use-list-navigation.d.ts
|
|
557
|
+
/**
|
|
558
|
+
* Options for configuring list-style keyboard/mouse navigation behavior.
|
|
559
|
+
*
|
|
560
|
+
* This interface drives how items in a floating list/grid are navigated,
|
|
561
|
+
* focused, and announced (including support for virtual focus).
|
|
562
|
+
*/
|
|
563
|
+
interface UseListNavigationOptions {
|
|
564
|
+
/**
|
|
565
|
+
* Reactive collection of list item elements in DOM order.
|
|
566
|
+
* Null entries are allowed while items mount/unmount.
|
|
567
|
+
*/
|
|
568
|
+
listRef: Ref<Array<HTMLElement | null>>;
|
|
569
|
+
/**
|
|
570
|
+
* The currently active (navigated) index. Null means no active item.
|
|
571
|
+
*/
|
|
572
|
+
activeIndex?: MaybeRefOrGetter<number | null>;
|
|
573
|
+
/**
|
|
574
|
+
* Callback invoked when navigation sets a new active index.
|
|
575
|
+
*/
|
|
576
|
+
onNavigate?: (index: number | null) => void;
|
|
577
|
+
/**
|
|
578
|
+
* Whether navigation behavior is enabled.
|
|
579
|
+
*/
|
|
580
|
+
enabled?: MaybeRefOrGetter<boolean>;
|
|
581
|
+
/**
|
|
582
|
+
* If true, arrow-key navigation wraps from end-to-start and vice versa.
|
|
583
|
+
*/
|
|
584
|
+
loop?: MaybeRefOrGetter<boolean>;
|
|
585
|
+
/**
|
|
586
|
+
* Primary navigation orientation.
|
|
587
|
+
* - "vertical": Up/Down to navigate
|
|
588
|
+
* - "horizontal": Left/Right to navigate
|
|
589
|
+
* - "both": Grid navigation (supports cols/itemSizes)
|
|
590
|
+
*/
|
|
591
|
+
orientation?: MaybeRefOrGetter<"vertical" | "horizontal" | "both">;
|
|
592
|
+
/**
|
|
593
|
+
* Indices that should be treated as disabled and skipped by navigation.
|
|
594
|
+
* Can be an array of indices or a predicate.
|
|
595
|
+
*/
|
|
596
|
+
disabledIndices?: Array<number> | ((index: number) => boolean);
|
|
597
|
+
/**
|
|
598
|
+
* If true, hovering an item moves the active index to that item.
|
|
599
|
+
*/
|
|
600
|
+
focusItemOnHover?: MaybeRefOrGetter<boolean>;
|
|
601
|
+
/**
|
|
602
|
+
* If true, pressing an arrow key when closed opens and moves focus.
|
|
603
|
+
*/
|
|
604
|
+
openOnArrowKeyDown?: MaybeRefOrGetter<boolean>;
|
|
605
|
+
/**
|
|
606
|
+
* Controls automatic scrolling when the active item changes.
|
|
607
|
+
* true for default "nearest" behavior or a custom ScrollIntoViewOptions.
|
|
608
|
+
*/
|
|
609
|
+
scrollItemIntoView?: boolean | ScrollIntoViewOptions;
|
|
610
|
+
/**
|
|
611
|
+
* Index to prefer when opening (e.g., currently selected option).
|
|
612
|
+
*/
|
|
613
|
+
selectedIndex?: MaybeRefOrGetter<number | null>;
|
|
614
|
+
/**
|
|
615
|
+
* Controls focusing an item when the list opens.
|
|
616
|
+
* - true: always focus an item
|
|
617
|
+
* - false: never focus an item
|
|
618
|
+
* - "auto": focus based on input modality/heuristics
|
|
619
|
+
*/
|
|
620
|
+
focusItemOnOpen?: MaybeRefOrGetter<boolean | "auto">;
|
|
621
|
+
/**
|
|
622
|
+
* Whether this list is nested inside another navigable list.
|
|
623
|
+
* Affects cross-orientation close/open key handling.
|
|
624
|
+
*/
|
|
625
|
+
nested?: MaybeRefOrGetter<boolean>;
|
|
626
|
+
/**
|
|
627
|
+
* Parent list orientation when nested, for cross-navigation behavior.
|
|
628
|
+
*/
|
|
629
|
+
parentOrientation?: MaybeRefOrGetter<"vertical" | "horizontal" | "both">;
|
|
630
|
+
/**
|
|
631
|
+
* Right-to-left layout flag affecting horizontal arrow semantics.
|
|
632
|
+
*/
|
|
633
|
+
rtl?: MaybeRefOrGetter<boolean>;
|
|
634
|
+
/**
|
|
635
|
+
* Enables virtual focus mode (aria-activedescendant) instead of DOM focus.
|
|
636
|
+
*/
|
|
637
|
+
virtual?: MaybeRefOrGetter<boolean>;
|
|
638
|
+
/**
|
|
639
|
+
* Receives the HTMLElement corresponding to the virtual active item.
|
|
640
|
+
* Used for aria-activedescendant and screen reader announcement.
|
|
641
|
+
*/
|
|
642
|
+
virtualItemRef?: Ref<HTMLElement | null>;
|
|
643
|
+
/**
|
|
644
|
+
* Column count for grid navigation when orientation is "both".
|
|
645
|
+
*/
|
|
646
|
+
cols?: MaybeRefOrGetter<number>;
|
|
647
|
+
/**
|
|
648
|
+
* If true, allows escaping to a null active index via keyboard (e.g., ArrowDown on last).
|
|
649
|
+
*/
|
|
650
|
+
allowEscape?: MaybeRefOrGetter<boolean>;
|
|
651
|
+
/**
|
|
652
|
+
* Defines the wrapping behavior for grid navigation when moving horizontally past the end of a row.
|
|
653
|
+
* - "row": Wraps to the start of the *same* row (default).
|
|
654
|
+
* - "next": Moves to the start of the *next* row (or previous row if moving left).
|
|
655
|
+
*/
|
|
656
|
+
gridLoopDirection?: MaybeRefOrGetter<"row" | "next">;
|
|
657
|
+
}
|
|
658
|
+
interface UseListNavigationReturn {
|
|
659
|
+
cleanup: () => void;
|
|
660
|
+
}
|
|
661
|
+
declare function useListNavigation(context: FloatingContext, options: UseListNavigationOptions): UseListNavigationReturn;
|
|
662
|
+
//#endregion
|
|
663
|
+
//#region src/composables/middlewares/arrow.d.ts
|
|
664
|
+
/**
|
|
665
|
+
* Options for configuring arrow positioning within floating elements
|
|
666
|
+
*/
|
|
667
|
+
interface ArrowMiddlewareOptions {
|
|
668
|
+
/**
|
|
669
|
+
* Padding to apply around the arrow element
|
|
670
|
+
*/
|
|
671
|
+
padding?: Padding;
|
|
672
|
+
/**
|
|
673
|
+
* Reference to the arrow element
|
|
674
|
+
*/
|
|
675
|
+
element: Ref<HTMLElement | null>;
|
|
676
|
+
}
|
|
677
|
+
/**
|
|
678
|
+
* Positions an inner element of the floating element such that it is centered to the anchor element.
|
|
679
|
+
*
|
|
680
|
+
* This middleware is used to position arrow elements within floating elements.
|
|
681
|
+
*
|
|
682
|
+
* @param options - The arrow options including padding and element reference
|
|
683
|
+
* @returns A middleware function for arrow positioning
|
|
684
|
+
*/
|
|
685
|
+
declare function arrow(options: ArrowMiddlewareOptions): Middleware$1;
|
|
686
|
+
//#endregion
|
|
687
|
+
export { AnchorElement, type AxisConstraint, type Coordinates, FloatingContext, FloatingElement, FloatingPosition, FloatingRefs, FloatingRoot, FloatingState, FloatingStyles, FollowTracker, type Middleware, type Placement, StaticTracker, type Strategy, type TrackingMode, TrackingStrategy, UseArrowOptions, UseArrowReturn, UseClickContext, UseClickOptions, UseClientPointContext, UseClientPointOptions, UseClientPointReturn, UseEscapeKeyContext, UseEscapeKeyOptions, UseFloatingOptions, UseFocusContext, UseFocusOptions, UseFocusReturn, UseFocusTrapContext, UseFocusTrapOptions, UseFocusTrapReturn, UseHoverOptions, UseListNavigationOptions, UseListNavigationReturn, VirtualElementFactory, arrow, autoPlacement, flip, hide, offset, shift, size, useArrow, useClick, useClientPoint, useEscapeKey, useFloating, useFocus, useFocusTrap, useHover, useListNavigation };
|
|
688
|
+
//# sourceMappingURL=index.d.mts.map
|