v-float 0.1.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 +97 -86
- package/dist/composables/interactions/polygon.d.ts +28 -0
- package/dist/composables/interactions/polygon.d.ts.map +1 -0
- package/dist/composables/interactions/use-dismiss.d.ts.map +1 -1
- 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-arrow.d.ts +9 -2
- package/dist/composables/use-arrow.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/composables/use-tree.d.ts +0 -7
- package/dist/composables/use-tree.d.ts.map +1 -1
- package/dist/utils.d.ts +15 -0
- package/dist/utils.d.ts.map +1 -0
- package/dist/v-float.es.js +1243 -1021
- package/dist/v-float.umd.js +1 -1
- package/package.json +9 -3
- package/dist/composables/utils/dom.d.ts +0 -11
- package/dist/composables/utils/dom.d.ts.map +0 -1
- package/dist/composables/utils/use-composition.d.ts +0 -4
- package/dist/composables/utils/use-composition.d.ts.map +0 -1
- package/dist/utils/dom.d.ts +0 -9
- package/dist/utils/dom.d.ts.map +0 -1
- package/dist/utils/id.d.ts +0 -2
- package/dist/utils/id.d.ts.map +0 -1
- package/dist/utils/index.d.ts +0 -5
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/reactivity.d.ts +0 -2
- package/dist/utils/reactivity.d.ts.map +0 -1
- package/dist/utils/type-guards.d.ts +0 -8
- package/dist/utils/type-guards.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# V-Float
|
|
2
2
|
|
|
3
|
-
A Vue 3 library for positioning floating UI elements like tooltips, popovers, dropdowns, and modals. Built on top
|
|
3
|
+
A Vue 3 library for positioning floating UI elements like tooltips, popovers, dropdowns, and modals. Built on top
|
|
4
|
+
of [VFloat](https://vfloat.pages.com/) with Vue 3 Composition API.
|
|
4
5
|
|
|
5
6
|
## Features
|
|
6
7
|
|
|
@@ -31,19 +32,20 @@ yarn add v-float
|
|
|
31
32
|
### Basic Tooltip
|
|
32
33
|
|
|
33
34
|
```vue
|
|
35
|
+
|
|
34
36
|
<script setup lang="ts">
|
|
35
|
-
import { useTemplateRef } from "vue"
|
|
36
|
-
import { useFloating, useHover, offset } from "v-float"
|
|
37
|
+
import { useTemplateRef } from "vue"
|
|
38
|
+
import { useFloating, useHover, offset } from "v-float"
|
|
37
39
|
|
|
38
|
-
const anchorEl = useTemplateRef("anchorEl")
|
|
39
|
-
const floatingEl = useTemplateRef("floatingEl")
|
|
40
|
+
const anchorEl = useTemplateRef("anchorEl")
|
|
41
|
+
const floatingEl = useTemplateRef("floatingEl")
|
|
40
42
|
|
|
41
|
-
const context = useFloating(anchorEl, floatingEl, {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
})
|
|
43
|
+
const context = useFloating(anchorEl, floatingEl, {
|
|
44
|
+
placement: "top",
|
|
45
|
+
middlewares: [offset(8)],
|
|
46
|
+
})
|
|
45
47
|
|
|
46
|
-
useHover(context)
|
|
48
|
+
useHover(context)
|
|
47
49
|
</script>
|
|
48
50
|
|
|
49
51
|
<template>
|
|
@@ -58,20 +60,21 @@ useHover(context)
|
|
|
58
60
|
### Dropdown Menu
|
|
59
61
|
|
|
60
62
|
```vue
|
|
63
|
+
|
|
61
64
|
<script setup lang="ts">
|
|
62
|
-
import { useTemplateRef } from "vue"
|
|
63
|
-
import { useFloating, useClick, useDismiss, offset, flip, shift } from "v-float"
|
|
65
|
+
import { useTemplateRef } from "vue"
|
|
66
|
+
import { useFloating, useClick, useDismiss, offset, flip, shift } from "v-float"
|
|
64
67
|
|
|
65
|
-
const triggerEl = useTemplateRef("triggerEl")
|
|
66
|
-
const menuEl = useTemplateRef("menuEl")
|
|
68
|
+
const triggerEl = useTemplateRef("triggerEl")
|
|
69
|
+
const menuEl = useTemplateRef("menuEl")
|
|
67
70
|
|
|
68
|
-
const context = useFloating(triggerEl, menuEl, {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
})
|
|
71
|
+
const context = useFloating(triggerEl, menuEl, {
|
|
72
|
+
placement: "bottom-start",
|
|
73
|
+
middlewares: [offset(4), flip(), shift({ padding: 8 })],
|
|
74
|
+
})
|
|
72
75
|
|
|
73
|
-
useClick(context)
|
|
74
|
-
useDismiss(context)
|
|
76
|
+
useClick(context)
|
|
77
|
+
useDismiss(context)
|
|
75
78
|
</script>
|
|
76
79
|
|
|
77
80
|
<template>
|
|
@@ -95,7 +98,7 @@ useDismiss(context)
|
|
|
95
98
|
|
|
96
99
|
### Interactions
|
|
97
100
|
|
|
98
|
-
- **`useHover`**: Hover interactions with configurable delays
|
|
101
|
+
- **`useHover`**: Hover interactions with configurable delays
|
|
99
102
|
- **`useFocus`**: Focus/blur event handling for keyboard navigation
|
|
100
103
|
- **`useClick`**: Click event handling with toggle and dismiss options
|
|
101
104
|
- **`useDismiss`**: Close on outside click, ESC key, or scroll events
|
|
@@ -111,86 +114,93 @@ All [Floating UI middleware](https://floating-ui.com/docs/middleware) are suppor
|
|
|
111
114
|
- **`hide`**: Hide floating element when anchor is not visible
|
|
112
115
|
- **`arrow`**: Position arrow elements (via `useArrow`)
|
|
113
116
|
|
|
114
|
-
##
|
|
117
|
+
## Advanced Features
|
|
115
118
|
|
|
116
|
-
###
|
|
119
|
+
### Floating Trees
|
|
117
120
|
|
|
118
|
-
|
|
121
|
+
For nested floating elements like submenus, you need to manage the tree structure explicitly. `useFloating` creates
|
|
122
|
+
contexts for individual floating elements, and `useFloatingTree` manages their hierarchical relationship.
|
|
123
|
+
|
|
124
|
+
Here's how you can set up a parent menu with a submenu:
|
|
119
125
|
|
|
120
126
|
```vue
|
|
121
|
-
<script setup lang="ts">
|
|
122
|
-
import { FloatingArrow, useFloating, useArrow } from "v-float"
|
|
123
127
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}
|
|
128
|
+
<script setup lang="ts">
|
|
129
|
+
import { useTemplateRef } from "vue";
|
|
130
|
+
import { useFloating, useFloatingTree, offset } from "v-float";
|
|
131
|
+
|
|
132
|
+
const parentTriggerEl = useTemplateRef("parentTriggerRef");
|
|
133
|
+
const parentMenuEl = useTemplateRef("parentMenuRef");
|
|
134
|
+
|
|
135
|
+
const submenuTriggerEl = useTemplateRef("submenuTriggerRef");
|
|
136
|
+
const submenuEl = useTemplateRef("submenuRef");
|
|
137
|
+
|
|
138
|
+
// 1. Create the floating context for the parent menu.
|
|
139
|
+
const parentContext = useFloating(parentTriggerEl, parentMenuEl, {
|
|
140
|
+
placement: "bottom-start",
|
|
141
|
+
middlewares: [offset(4)],
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
// 2. Create the floating tree, using the parent's context as the data for the root node.
|
|
145
|
+
// useFloatingTree will create a root TreeNode whose `data` is parentContext.
|
|
146
|
+
const tree = useFloatingTree(parentContext);
|
|
147
|
+
|
|
148
|
+
// 3. Create the floating context for the submenu.
|
|
149
|
+
const submenuContext = useFloating(submenuTriggerEl, submenuEl, {
|
|
150
|
+
placement: "right-start",
|
|
151
|
+
middlewares: [offset(4)],
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
// 4. Add the submenu to the tree as a child of the parent menu.
|
|
155
|
+
// tree.root refers to the TreeNode associated with parentContext.
|
|
156
|
+
const submenuNode = tree.addNode(submenuContext, tree.root.id);
|
|
157
|
+
// submenuNode is the TreeNode for the submenu. You can store it if needed.
|
|
127
158
|
</script>
|
|
128
159
|
|
|
129
160
|
<template>
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
161
|
+
<!-- Parent Menu Trigger -->
|
|
162
|
+
<button ref="parentTriggerEl">Open Menu</button>
|
|
163
|
+
|
|
164
|
+
<!-- Parent Menu Floating Element -->
|
|
165
|
+
<div
|
|
166
|
+
v-if="parentContext.open.value"
|
|
167
|
+
ref="parentMenuEl"
|
|
168
|
+
:style="parentContext.floatingStyles.value"
|
|
169
|
+
style="background-color: #f0f0f0; border: 1px solid #ccc; padding: 5px; z-index: 1000;"
|
|
170
|
+
>
|
|
171
|
+
<div>Parent Menu Item 1</div>
|
|
172
|
+
|
|
173
|
+
<!-- Submenu Trigger (an item within the parent menu) -->
|
|
174
|
+
<div
|
|
175
|
+
ref="submenuTriggerEl"
|
|
176
|
+
style="padding: 5px; cursor: pointer; hover: background-color: #e0e0e0;"
|
|
177
|
+
@mouseenter="() => submenuContext?.setOpen(true)" @mouseleave="() => submenuContext?.setOpen(false)"
|
|
178
|
+
>
|
|
179
|
+
Parent Menu Item 2 (Hover for Submenu)
|
|
180
|
+
|
|
181
|
+
<!-- Submenu Floating Element -->
|
|
182
|
+
<div
|
|
183
|
+
v-if="submenuContext.open.value"
|
|
184
|
+
ref="submenuEl"
|
|
185
|
+
:style="submenuContext.floatingStyles.value"
|
|
186
|
+
style="background-color: #e0e0e0; border: 1px solid #bbb; padding: 5px; margin-left: 10px; z-index: 1010;"
|
|
187
|
+
>
|
|
188
|
+
<div>Submenu Item A</div>
|
|
189
|
+
<div>Submenu Item B</div>
|
|
190
|
+
</div>
|
|
133
191
|
</div>
|
|
134
192
|
</template>
|
|
135
193
|
```
|
|
136
194
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
For nested floating elements like submenus:
|
|
142
|
-
|
|
143
|
-
```vue
|
|
144
|
-
<script setup lang="ts">
|
|
145
|
-
import { useFloatingTree, useFloating } from "v-float"
|
|
146
|
-
|
|
147
|
-
// Parent menu
|
|
148
|
-
const parentTree = useFloatingTree()
|
|
149
|
-
const parentContext = useFloating(triggerEl, menuEl, {
|
|
150
|
-
tree: parentTree,
|
|
151
|
-
})
|
|
152
|
-
|
|
153
|
-
// Submenu
|
|
154
|
-
const submenuContext = useFloating(submenuTriggerEl, submenuEl, {
|
|
155
|
-
tree: parentTree,
|
|
156
|
-
})
|
|
157
|
-
</script>
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
### Virtual Elements
|
|
161
|
-
|
|
162
|
-
Position relative to virtual coordinates:
|
|
163
|
-
|
|
164
|
-
```vue
|
|
165
|
-
<script setup lang="ts">
|
|
166
|
-
import { useFloating, useClientPoint } from "v-float"
|
|
167
|
-
|
|
168
|
-
const virtualEl = ref({
|
|
169
|
-
getBoundingClientRect: () => ({
|
|
170
|
-
x: 100,
|
|
171
|
-
y: 100,
|
|
172
|
-
width: 0,
|
|
173
|
-
height: 0,
|
|
174
|
-
top: 100,
|
|
175
|
-
left: 100,
|
|
176
|
-
right: 100,
|
|
177
|
-
bottom: 100,
|
|
178
|
-
}),
|
|
179
|
-
})
|
|
180
|
-
|
|
181
|
-
const context = useFloating(virtualEl, floatingEl)
|
|
182
|
-
useClientPoint(context) // Follow mouse cursor
|
|
183
|
-
</script>
|
|
184
|
-
```
|
|
195
|
+
This example demonstrates the manual process of creating contexts and then linking them within the tree. For more
|
|
196
|
+
complex scenarios, you would integrate interaction composables (`useClick`, `useHover`, `useDismiss`) to manage the
|
|
197
|
+
`open` state of each context, potentially using tree methods like `tree.isTopmost()` or `tree.forEach()` to coordinate
|
|
198
|
+
behavior (e.g., closing child menus when a parent closes).
|
|
185
199
|
|
|
186
200
|
## TypeScript Support
|
|
187
201
|
|
|
188
202
|
V-Float is built with TypeScript and provides comprehensive type definitions:
|
|
189
203
|
|
|
190
|
-
```typescript
|
|
191
|
-
import type { FloatingContext, UseFloatingOptions, AnchorElement, FloatingElement } from "v-float"
|
|
192
|
-
```
|
|
193
|
-
|
|
194
204
|
## Browser Support
|
|
195
205
|
|
|
196
206
|
- **Modern browsers**: Chrome, Firefox, Safari, Edge
|
|
@@ -199,11 +209,12 @@ import type { FloatingContext, UseFloatingOptions, AnchorElement, FloatingElemen
|
|
|
199
209
|
|
|
200
210
|
## Documentation
|
|
201
211
|
|
|
202
|
-
For complete documentation with interactive examples, visit the [V-Float Documentation](https://
|
|
212
|
+
For complete documentation with interactive examples, visit the [V-Float Documentation](https://vfloat.pages.dev/).
|
|
203
213
|
|
|
204
214
|
## Contributing
|
|
205
215
|
|
|
206
|
-
Contributions are welcome! Please read our contributing guidelines and submit pull requests to
|
|
216
|
+
Contributions are welcome! Please read our contributing guidelines and submit pull requests to
|
|
217
|
+
our [GitHub repository](https://github.com/sherif414/VFloat).
|
|
207
218
|
|
|
208
219
|
## License
|
|
209
220
|
|
|
@@ -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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-dismiss.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-dismiss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,
|
|
1
|
+
{"version":3,"file":"use-dismiss.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-dismiss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAuD,MAAM,KAAK,CAAA;AAChG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAMtD,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,eAAe,GAAG,cAAc,GAAG,iBAAiB,CAAA;AAE/F,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAErC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEvC;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC,CAAA;IAE3E;;;OAGG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAE1C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG;QAAE,SAAS,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,CAAA;IAEnE;;;OAGG;IACH,gBAAgB,CAAC,EAAE,aAAa,GAAG,WAAW,GAAG,OAAO,CAAA;IAExD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,GAAG,WAAW,GAAG,OAAO,CAAA;CAC1D;AAMD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,IAAI,CAqIxF"}
|
|
@@ -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"}
|
|
@@ -22,8 +22,15 @@ export interface UseArrowReturn {
|
|
|
22
22
|
*/
|
|
23
23
|
export interface UseArrowOptions {
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
26
|
-
*
|
|
25
|
+
* Controls the offset of the arrow from the edge of the floating element.
|
|
26
|
+
*
|
|
27
|
+
* A positive value moves the arrow further into the floating element,
|
|
28
|
+
* while a negative value creates a gap between the arrow and the element.
|
|
29
|
+
* This is useful for preventing the arrow from overlapping borders or shadows.
|
|
30
|
+
*
|
|
31
|
+
* The value must be a valid CSS length (e.g., '5px', '-0.5rem').
|
|
32
|
+
*
|
|
33
|
+
* @default '-4px'
|
|
27
34
|
*/
|
|
28
35
|
offset?: string;
|
|
29
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-arrow.d.ts","sourceRoot":"","sources":["../../src/composables/use-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAMrD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CACjD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B
|
|
1
|
+
{"version":3,"file":"use-arrow.d.ts","sourceRoot":"","sources":["../../src/composables/use-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAMrD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAE3B;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;CACjD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAMD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,GAAE,eAAoB,GAAG,cAAc,CA8ChG"}
|
|
@@ -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":"
|
|
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"}
|
|
@@ -42,13 +42,6 @@ export declare class TreeNode<T> {
|
|
|
42
42
|
* @returns True if the child was found and removed, false otherwise.
|
|
43
43
|
*/
|
|
44
44
|
_removeChildInstance(childNode: TreeNode<T>): boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Updates the node's data.
|
|
47
|
-
* If T is an object, performs a shallow merge using Object.assign.
|
|
48
|
-
* If T is a primitive, replaces the value.
|
|
49
|
-
* @param newData Partial data for objects, or the new value for primitives.
|
|
50
|
-
*/
|
|
51
|
-
updateData(newData: Partial<T> | T): void;
|
|
52
45
|
/**
|
|
53
46
|
* Finds the first direct child matching the predicate.
|
|
54
47
|
* @param predicate Function to test each child node.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-tree.d.ts","sourceRoot":"","sources":["../../src/composables/use-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA+B,MAAM,KAAK,CAAA;AAO3D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;CACxC;AAQD;;;GAGG;AACH,qBAAa,QAAQ,CAAC,CAAC;;IACrB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,CAAC,CAAA;IACP,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAC/B,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;gBAI1B,IAAI,EAAE,CAAC,EACP,MAAM,GAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAW,EACjC,OAAO,GAAE,eAAoB,EAC7B,MAAM,UAAQ;IAShB;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAKtC;;;;;;OAMG;IACH,oBAAoB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO;IAQrD
|
|
1
|
+
{"version":3,"file":"use-tree.d.ts","sourceRoot":"","sources":["../../src/composables/use-tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA+B,MAAM,KAAK,CAAA;AAO3D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAA;CACxC;AAQD;;;GAGG;AACH,qBAAa,QAAQ,CAAC,CAAC;;IACrB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,CAAC,CAAA;IACP,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAC/B,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;gBAI1B,IAAI,EAAE,CAAC,EACP,MAAM,GAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAW,EACjC,OAAO,GAAE,eAAoB,EAC7B,MAAM,UAAQ;IAShB;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAKtC;;;;;;OAMG;IACH,oBAAoB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO;IAQrD;;;;OAIG;IACH,SAAS,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAIxE;;;;OAIG;IACH,cAAc,CAAC,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAgB7E;;;;OAIG;IACH,cAAc,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,OAAO;IAWvD;;;OAGG;IACH,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE;IAUxB,uFAAuF;IACvF,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,2DAA2D;IAC3D,IAAI,MAAM,IAAI,OAAO,CAEpB;CACF;AAMD;;;;;;;;GAQG;AACH,qBAAa,IAAI,CAAC,CAAC;;IACjB,iCAAiC;IACjC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC1B,iFAAiF;IACjF,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAIpD;;;;;;;;;;OAUG;gBACS,eAAe,EAAE,CAAC,EAAE,OAAO,CAAC,EAAE,WAAW;IAQrD;;;;OAIG;IACH,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAI5C;;;;;;OAMG;IACH,OAAO,CACL,IAAI,EAAE,CAAC,EACP,QAAQ,GAAE,MAAM,GAAG,IAAW,EAC9B,WAAW,GAAE,eAAoB,GAChC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI;IAqBrB;;;;;;OAMG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO;IAiC5E;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO;IAqD7D;;;;;OAKG;IACH,QAAQ,CACN,QAAQ,GAAE,KAAK,GAAG,KAAa,EAC/B,SAAS,GAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAgB,GACxC,QAAQ,CAAC,CAAC,CAAC,EAAE;IAgChB;;;;;OAKG;IACH,OAAO,IAAI,IAAI;CAiBhB"}
|
package/dist/utils.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { AnyFn } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Generates a unique ID.
|
|
4
|
+
* The ID is incremented with each call.
|
|
5
|
+
* @returns A unique string ID.
|
|
6
|
+
*/
|
|
7
|
+
export declare function useId(): string;
|
|
8
|
+
/**
|
|
9
|
+
* Checks if a value is a function
|
|
10
|
+
* @param value - The value to check
|
|
11
|
+
* @returns True if the value is a function, false otherwise
|
|
12
|
+
*/
|
|
13
|
+
export declare function isFunction(value: unknown): value is AnyFn;
|
|
14
|
+
export declare function isHTMLElement(value: unknown): value is HTMLElement;
|
|
15
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +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;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,WAAW,CAElE"}
|