v-float 0.2.0 → 0.2.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.
- package/README.md +5 -30
- package/dist/composables/interactions/polygon.d.ts +28 -0
- package/dist/composables/interactions/polygon.d.ts.map +1 -0
- package/dist/composables/interactions/use-hover.d.ts +11 -15
- package/dist/composables/interactions/use-hover.d.ts.map +1 -1
- package/dist/composables/use-floating.d.ts +7 -22
- package/dist/composables/use-floating.d.ts.map +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/v-float.es.js +1226 -997
- package/dist/v-float.umd.js +1 -1
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -98,7 +98,7 @@ yarn add v-float
|
|
|
98
98
|
|
|
99
99
|
### Interactions
|
|
100
100
|
|
|
101
|
-
- **`useHover`**: Hover interactions with configurable delays
|
|
101
|
+
- **`useHover`**: Hover interactions with configurable delays
|
|
102
102
|
- **`useFocus`**: Focus/blur event handling for keyboard navigation
|
|
103
103
|
- **`useClick`**: Click event handling with toggle and dismiss options
|
|
104
104
|
- **`useDismiss`**: Close on outside click, ESC key, or scroll events
|
|
@@ -114,30 +114,6 @@ All [Floating UI middleware](https://floating-ui.com/docs/middleware) are suppor
|
|
|
114
114
|
- **`hide`**: Hide floating element when anchor is not visible
|
|
115
115
|
- **`arrow`**: Position arrow elements (via `useArrow`)
|
|
116
116
|
|
|
117
|
-
## Components
|
|
118
|
-
|
|
119
|
-
### FloatingArrow
|
|
120
|
-
|
|
121
|
-
Pre-built SVG arrow component with automatic positioning:
|
|
122
|
-
|
|
123
|
-
```vue
|
|
124
|
-
|
|
125
|
-
<script setup lang="ts">
|
|
126
|
-
import { FloatingArrow, useFloating, useArrow } from "v-float"
|
|
127
|
-
|
|
128
|
-
const context = useFloating(anchorEl, floatingEl, {
|
|
129
|
-
middlewares: [arrow({ element: arrowEl })],
|
|
130
|
-
})
|
|
131
|
-
</script>
|
|
132
|
-
|
|
133
|
-
<template>
|
|
134
|
-
<div ref="floatingEl" :style="context.floatingStyles.value">
|
|
135
|
-
Tooltip content
|
|
136
|
-
<FloatingArrow :context="context" fill="white" />
|
|
137
|
-
</div>
|
|
138
|
-
</template>
|
|
139
|
-
```
|
|
140
|
-
|
|
141
117
|
## Advanced Features
|
|
142
118
|
|
|
143
119
|
### Floating Trees
|
|
@@ -183,12 +159,12 @@ Here's how you can set up a parent menu with a submenu:
|
|
|
183
159
|
|
|
184
160
|
<template>
|
|
185
161
|
<!-- Parent Menu Trigger -->
|
|
186
|
-
<button ref="
|
|
162
|
+
<button ref="parentTriggerEl">Open Menu</button>
|
|
187
163
|
|
|
188
164
|
<!-- Parent Menu Floating Element -->
|
|
189
165
|
<div
|
|
190
166
|
v-if="parentContext.open.value"
|
|
191
|
-
ref="
|
|
167
|
+
ref="parentMenuEl"
|
|
192
168
|
:style="parentContext.floatingStyles.value"
|
|
193
169
|
style="background-color: #f0f0f0; border: 1px solid #ccc; padding: 5px; z-index: 1000;"
|
|
194
170
|
>
|
|
@@ -196,17 +172,16 @@ Here's how you can set up a parent menu with a submenu:
|
|
|
196
172
|
|
|
197
173
|
<!-- Submenu Trigger (an item within the parent menu) -->
|
|
198
174
|
<div
|
|
199
|
-
ref="
|
|
175
|
+
ref="submenuTriggerEl"
|
|
200
176
|
style="padding: 5px; cursor: pointer; hover: background-color: #e0e0e0;"
|
|
201
177
|
@mouseenter="() => submenuContext?.setOpen(true)" @mouseleave="() => submenuContext?.setOpen(false)"
|
|
202
|
-
<!-- Basic hover for example -->
|
|
203
178
|
>
|
|
204
179
|
Parent Menu Item 2 (Hover for Submenu)
|
|
205
180
|
|
|
206
181
|
<!-- Submenu Floating Element -->
|
|
207
182
|
<div
|
|
208
183
|
v-if="submenuContext.open.value"
|
|
209
|
-
ref="
|
|
184
|
+
ref="submenuEl"
|
|
210
185
|
:style="submenuContext.floatingStyles.value"
|
|
211
186
|
style="background-color: #e0e0e0; border: 1px solid #bbb; padding: 5px; margin-left: 10px; z-index: 1010;"
|
|
212
187
|
>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { FloatingContext, FloatingElement, AnchorElement } from '../use-floating';
|
|
2
|
+
type Point = [number, number];
|
|
3
|
+
type Polygon = Point[];
|
|
4
|
+
export interface SafePolygonOptions {
|
|
5
|
+
buffer?: number;
|
|
6
|
+
blockPointerEvents?: boolean;
|
|
7
|
+
requireIntent?: boolean;
|
|
8
|
+
onPolygonChange?: (polygon: Polygon) => void;
|
|
9
|
+
}
|
|
10
|
+
export interface CreateSafePolygonHandlerContext {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
placement: FloatingContext["placement"]["value"];
|
|
14
|
+
elements: {
|
|
15
|
+
domReference: AnchorElement | null;
|
|
16
|
+
floating: FloatingElement | null;
|
|
17
|
+
};
|
|
18
|
+
buffer: number;
|
|
19
|
+
onClose: () => void;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Generates a safe polygon area that the user can traverse without closing the
|
|
23
|
+
* floating element once leaving the reference element.
|
|
24
|
+
* @see https://floating-ui.com/docs/useHover#safepolygon
|
|
25
|
+
*/
|
|
26
|
+
export declare function safePolygon(options?: SafePolygonOptions): ({ x, y, placement, elements, buffer: contextBuffer, onClose, }: CreateSafePolygonHandlerContext) => (event: MouseEvent) => void;
|
|
27
|
+
export {};
|
|
28
|
+
//# sourceMappingURL=polygon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"polygon.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/polygon.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGtF,KAAK,KAAK,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAC7B,KAAK,OAAO,GAAG,KAAK,EAAE,CAAA;AAyCtB,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC7C;AAED,MAAM,WAAW,+BAA+B;IAC9C,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAA;IAChD,QAAQ,EAAE;QACR,YAAY,EAAE,aAAa,GAAG,IAAI,CAAA;QAClC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAA;KACjC,CAAA;IACD,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,oEAuCvD,+BAA+B,aASG,UAAU,UA6ShD"}
|
|
@@ -1,18 +1,6 @@
|
|
|
1
1
|
import { MaybeRef } from 'vue';
|
|
2
|
-
import { FloatingContext
|
|
3
|
-
|
|
4
|
-
export interface HandleCloseContext {
|
|
5
|
-
context: FloatingContext;
|
|
6
|
-
open: boolean;
|
|
7
|
-
pointerType: PointerType;
|
|
8
|
-
x: number;
|
|
9
|
-
y: number;
|
|
10
|
-
referenceEl: AnchorElement;
|
|
11
|
-
floatingEl: FloatingElement;
|
|
12
|
-
isPointInFloating(event: PointerEvent | MouseEvent | TouchEvent): boolean;
|
|
13
|
-
originalEvent?: Event;
|
|
14
|
-
}
|
|
15
|
-
export type HandleCloseFn = (context: HandleCloseContext, onClose: () => void) => undefined | (() => void);
|
|
2
|
+
import { FloatingContext } from '../use-floating';
|
|
3
|
+
import { SafePolygonOptions } from './polygon';
|
|
16
4
|
export interface UseHoverOptions {
|
|
17
5
|
/**
|
|
18
6
|
* Whether hover event listeners are enabled.
|
|
@@ -41,6 +29,15 @@ export interface UseHoverOptions {
|
|
|
41
29
|
* @default false
|
|
42
30
|
*/
|
|
43
31
|
mouseOnly?: MaybeRef<boolean>;
|
|
32
|
+
/**
|
|
33
|
+
* Enable floating-ui style safe polygon algorithm that keeps the
|
|
34
|
+
* floating element open while the pointer traverses the rectangle/triangle
|
|
35
|
+
* region between the reference and floating elements.
|
|
36
|
+
* – `true` → enabled with defaults
|
|
37
|
+
* – `false | undefined` → disabled (current behaviour)
|
|
38
|
+
* – `SafePolygonOptions` → enabled with custom buffer
|
|
39
|
+
*/
|
|
40
|
+
safePolygon?: MaybeRef<boolean | SafePolygonOptions>;
|
|
44
41
|
}
|
|
45
42
|
/**
|
|
46
43
|
* Enables showing/hiding the floating element when hovering the reference element
|
|
@@ -60,5 +57,4 @@ export interface UseHoverOptions {
|
|
|
60
57
|
* ```
|
|
61
58
|
*/
|
|
62
59
|
export declare function useHover(context: FloatingContext, options?: UseHoverOptions): void;
|
|
63
|
-
export {};
|
|
64
60
|
//# sourceMappingURL=use-hover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hover.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-hover.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,QAAQ,EAMd,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"use-hover.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-hover.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,QAAQ,EAMd,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,eAAe,EAAkC,MAAM,iBAAiB,CAAA;AACtF,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAQhE,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAE5D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEzB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAA;IAE7B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,kBAAkB,CAAC,CAAA;CACrD;AAqED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI,CA8LtF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AutoUpdateOptions, Middleware, MiddlewareData, Placement, Strategy, VirtualElement } from '@floating-ui/dom';
|
|
2
|
-
import {
|
|
2
|
+
import { MaybeRefOrGetter, Ref } from 'vue';
|
|
3
3
|
/**
|
|
4
4
|
* Type for anchor element in floating UI
|
|
5
5
|
*/
|
|
@@ -59,18 +59,16 @@ export interface UseFloatingOptions {
|
|
|
59
59
|
*/
|
|
60
60
|
middlewares?: Middleware[];
|
|
61
61
|
/**
|
|
62
|
-
*
|
|
62
|
+
* Whether to automatically update the position of the floating element.
|
|
63
|
+
* Can be a boolean or an `AutoUpdateOptions` object.
|
|
64
|
+
* @default true
|
|
63
65
|
*/
|
|
64
|
-
|
|
66
|
+
autoUpdate?: boolean | AutoUpdateOptions;
|
|
65
67
|
/**
|
|
66
68
|
* Whether the floating element is open.
|
|
67
69
|
* @default false
|
|
68
70
|
*/
|
|
69
71
|
open?: Ref<boolean>;
|
|
70
|
-
/**
|
|
71
|
-
* Function to control the open state of the floating element. If not provided, a default function is used that updates the `open` ref.
|
|
72
|
-
*/
|
|
73
|
-
setOpen?: (open: boolean) => void;
|
|
74
72
|
}
|
|
75
73
|
/**
|
|
76
74
|
* Context object returned by useFloating containing all necessary data and methods
|
|
@@ -101,9 +99,9 @@ export interface FloatingContext {
|
|
|
101
99
|
*/
|
|
102
100
|
isPositioned: Readonly<Ref<boolean>>;
|
|
103
101
|
/**
|
|
104
|
-
*
|
|
102
|
+
* Reactive styles to apply to the floating element
|
|
105
103
|
*/
|
|
106
|
-
floatingStyles:
|
|
104
|
+
floatingStyles: Readonly<Ref<FloatingStyles>>;
|
|
107
105
|
/**
|
|
108
106
|
* Function to manually update the position
|
|
109
107
|
*/
|
|
@@ -145,17 +143,4 @@ export interface FloatingContext {
|
|
|
145
143
|
* ```
|
|
146
144
|
*/
|
|
147
145
|
export declare function useFloating(anchorEl: Ref<AnchorElement>, floatingEl: Ref<FloatingElement>, options?: UseFloatingOptions): FloatingContext;
|
|
148
|
-
/**
|
|
149
|
-
* Auto-update function to use with `whileElementsMounted` option
|
|
150
|
-
*
|
|
151
|
-
* This function provides automatic position updates for floating elements.
|
|
152
|
-
* It's a wrapper around Floating UI's autoUpdate function.
|
|
153
|
-
*
|
|
154
|
-
* @param anchorEl - The anchor element
|
|
155
|
-
* @param floatingEl - The floating element
|
|
156
|
-
* @param update - The update function to call
|
|
157
|
-
* @param options - Additional options for auto-updating
|
|
158
|
-
* @returns A cleanup function to stop auto-updating
|
|
159
|
-
*/
|
|
160
|
-
export declare function autoUpdate(anchorEl: HTMLElement, floatingEl: HTMLElement, update: () => void, options?: AutoUpdateOptions): () => void;
|
|
161
146
|
//# sourceMappingURL=use-floating.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-floating.d.ts","sourceRoot":"","sources":["../../src/composables/use-floating.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,SAAS,EACT,QAAQ,EACR,cAAc,EACf,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"use-floating.d.ts","sourceRoot":"","sources":["../../src/composables/use-floating.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,UAAU,EACV,cAAc,EACd,SAAS,EACT,QAAQ,EACR,cAAc,EACf,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAOhD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,IAAI,CAAA;AAE/D;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG,IAAI,CAAA;AAEhD;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAA;IAElB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IAEZ;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG;IAGF,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,GAAG,CAAA;CAC1B,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,SAAS,GAAG,SAAS,CAAC,CAAA;IAEnD;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAA;IAEjD;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAA;IAEjD;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAA;IAE1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAA;IAExC;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAExB;;OAEG;IACH,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IAExB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEjC;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA;IAEnC;;OAEG;IACH,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAA;IAE7C;;OAEG;IACH,YAAY,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAEpC;;OAEG;IACH,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAA;IAE7C;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAA;IAElB;;OAEG;IACH,IAAI,EAAE;QACJ,QAAQ,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;QAC5B,UAAU,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;KACjC,CAAA;IAED;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAE5B;;OAEG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACjC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,GAAG,CAAC,aAAa,CAAC,EAC5B,UAAU,EAAE,GAAG,CAAC,eAAe,CAAC,EAChC,OAAO,GAAE,kBAAuB,GAC/B,eAAe,CAuIjB"}
|
package/dist/utils.d.ts
CHANGED
|
@@ -11,4 +11,5 @@ export declare function useId(): string;
|
|
|
11
11
|
* @returns True if the value is a function, false otherwise
|
|
12
12
|
*/
|
|
13
13
|
export declare function isFunction(value: unknown): value is AnyFn;
|
|
14
|
+
export declare function isHTMLElement(value: unknown): value is HTMLElement;
|
|
14
15
|
//# sourceMappingURL=utils.d.ts.map
|
package/dist/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC;;;;GAIG;AACH,wBAAgB,KAAK,IAAI,MAAM,CAE9B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,CAEzD"}
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGpC;;;;GAIG;AACH,wBAAgB,KAAK,IAAI,MAAM,CAE9B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,CAEzD;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,WAAW,CAElE"}
|