v-float 0.9.1 → 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 -74
- 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/navigation-strategies.d.ts +0 -36
- package/dist/composables/interactions/navigation-strategies.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 -41
- 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 -109
- 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 -3520
- package/dist/v-float.umd.js +0 -4
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { ComputedRef, Ref } from 'vue';
|
|
2
|
-
import { FloatingContext } from './use-floating';
|
|
3
|
-
/**
|
|
4
|
-
* Return value of the useArrow composable
|
|
5
|
-
*/
|
|
6
|
-
export interface UseArrowReturn {
|
|
7
|
-
/**
|
|
8
|
-
* The computed X position of the arrow
|
|
9
|
-
*/
|
|
10
|
-
arrowX: ComputedRef<number>;
|
|
11
|
-
/**
|
|
12
|
-
* The computed Y position of the arrow
|
|
13
|
-
*/
|
|
14
|
-
arrowY: ComputedRef<number>;
|
|
15
|
-
/**
|
|
16
|
-
* The computed CSS styles for positioning the arrow
|
|
17
|
-
*/
|
|
18
|
-
arrowStyles: ComputedRef<Record<string, string>>;
|
|
19
|
-
}
|
|
20
|
-
/**
|
|
21
|
-
* Options for the useArrow composable
|
|
22
|
-
*/
|
|
23
|
-
export interface UseArrowOptions {
|
|
24
|
-
/**
|
|
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'
|
|
34
|
-
*/
|
|
35
|
-
offset?: string;
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Composable for computing arrow position styles for floating elements
|
|
39
|
-
*
|
|
40
|
-
* This composable calculates the position and styles for an arrow element
|
|
41
|
-
* based on the placement and middleware data from a floating element.
|
|
42
|
-
*
|
|
43
|
-
* @param arrowEl - A ref to the arrow HTML element
|
|
44
|
-
* @param context - The floating context containing middleware data and placement information
|
|
45
|
-
* @param options - Optional configuration for the arrow, e.g., offset
|
|
46
|
-
* @returns Computed arrow positions and CSS styles
|
|
47
|
-
*
|
|
48
|
-
* @example
|
|
49
|
-
* ```ts
|
|
50
|
-
* const arrowRef = ref<HTMLElement | null>(null)
|
|
51
|
-
* const { arrowStyles } = useArrow(arrowRef, floatingContext, { offset: "-10px" })
|
|
52
|
-
* ```
|
|
53
|
-
*/
|
|
54
|
-
export declare function useArrow(arrowEl: Ref<HTMLElement | null>, context: FloatingContext, options?: UseArrowOptions): UseArrowReturn;
|
|
55
|
-
//# sourceMappingURL=use-arrow.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-arrow.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/use-arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE3C,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;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,EAChC,OAAO,EAAE,eAAe,EACxB,OAAO,GAAE,eAAoB,GAC5B,cAAc,CAyDhB"}
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
import { MaybeRefOrGetter, Ref } from 'vue';
|
|
2
|
-
import { VirtualElement } from '../../types';
|
|
3
|
-
import { AnchorElement } from './use-floating';
|
|
4
|
-
/**
|
|
5
|
-
* Represents 2D coordinates with optional null values for unset states
|
|
6
|
-
*/
|
|
7
|
-
export interface Coordinates {
|
|
8
|
-
x: number | null;
|
|
9
|
-
y: number | null;
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Axis constraint types for coordinate positioning
|
|
13
|
-
*/
|
|
14
|
-
export type AxisConstraint = "x" | "y" | "both";
|
|
15
|
-
/**
|
|
16
|
-
* Tracking mode for client point positioning behavior
|
|
17
|
-
*/
|
|
18
|
-
export type TrackingMode = "follow" | "static";
|
|
19
|
-
/**
|
|
20
|
-
* Processed pointer event data
|
|
21
|
-
*/
|
|
22
|
-
interface PointerEventData {
|
|
23
|
-
type: "pointerdown" | "pointermove" | "pointerenter";
|
|
24
|
-
coordinates: Coordinates;
|
|
25
|
-
originalEvent: PointerEvent;
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Context for tracking strategy operations
|
|
29
|
-
*/
|
|
30
|
-
interface TrackingContext {
|
|
31
|
-
isOpen: boolean;
|
|
32
|
-
}
|
|
33
|
-
export interface UseClientPointOptions {
|
|
34
|
-
/**
|
|
35
|
-
* Whether the Hook is enabled
|
|
36
|
-
* @default true
|
|
37
|
-
*/
|
|
38
|
-
enabled?: MaybeRefOrGetter<boolean>;
|
|
39
|
-
/**
|
|
40
|
-
* Whether to restrict the client point to an axis
|
|
41
|
-
* @default 'both'
|
|
42
|
-
*/
|
|
43
|
-
axis?: MaybeRefOrGetter<AxisConstraint>;
|
|
44
|
-
/**
|
|
45
|
-
* Controlled x coordinate
|
|
46
|
-
* @default null
|
|
47
|
-
*/
|
|
48
|
-
x?: MaybeRefOrGetter<number | null>;
|
|
49
|
-
/**
|
|
50
|
-
* Controlled y coordinate
|
|
51
|
-
* @default null
|
|
52
|
-
*/
|
|
53
|
-
y?: MaybeRefOrGetter<number | null>;
|
|
54
|
-
/**
|
|
55
|
-
* Tracking behavior mode:
|
|
56
|
-
* - "follow": Continuous cursor tracking (default)
|
|
57
|
-
* - "static": Position at initial interaction, no subsequent tracking
|
|
58
|
-
* @default "follow"
|
|
59
|
-
*/
|
|
60
|
-
trackingMode?: TrackingMode;
|
|
61
|
-
}
|
|
62
|
-
export interface UseClientPointReturn {
|
|
63
|
-
/**
|
|
64
|
-
* Reactive object containing the current client coordinates (x/y)
|
|
65
|
-
*/
|
|
66
|
-
coordinates: Readonly<Ref<{
|
|
67
|
-
x: number | null;
|
|
68
|
-
y: number | null;
|
|
69
|
-
}>>;
|
|
70
|
-
/**
|
|
71
|
-
* Function to manually update the floating element's position
|
|
72
|
-
*/
|
|
73
|
-
updatePosition: (x: number, y: number) => void;
|
|
74
|
-
}
|
|
75
|
-
export interface UseClientPointContext {
|
|
76
|
-
open: Readonly<Ref<boolean>>;
|
|
77
|
-
refs: {
|
|
78
|
-
anchorEl: Ref<AnchorElement>;
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Virtual element factory for floating positioning anchors.
|
|
83
|
-
* Creates virtual DOM elements that serve as positioning anchors.
|
|
84
|
-
*/
|
|
85
|
-
export declare class VirtualElementFactory {
|
|
86
|
-
private static readonly DEFAULT_DIMENSIONS;
|
|
87
|
-
/**
|
|
88
|
-
* Create a virtual anchor element
|
|
89
|
-
*/
|
|
90
|
-
create(options: {
|
|
91
|
-
coordinates: Coordinates;
|
|
92
|
-
referenceElement?: HTMLElement | null;
|
|
93
|
-
baselineCoordinates?: Coordinates | null;
|
|
94
|
-
axis?: AxisConstraint;
|
|
95
|
-
}): VirtualElement;
|
|
96
|
-
/**
|
|
97
|
-
* Build configuration from options with defaults
|
|
98
|
-
*/
|
|
99
|
-
private buildConfiguration;
|
|
100
|
-
/**
|
|
101
|
-
* Build the bounding rectangle for the virtual element
|
|
102
|
-
*/
|
|
103
|
-
private buildBoundingRect;
|
|
104
|
-
/**
|
|
105
|
-
* Get reference element bounds with fallback
|
|
106
|
-
*/
|
|
107
|
-
private getReferenceRect;
|
|
108
|
-
/**
|
|
109
|
-
* Resolve final position from coordinate sources
|
|
110
|
-
*/
|
|
111
|
-
private resolvePosition;
|
|
112
|
-
/**
|
|
113
|
-
* Resolve coordinate for a single axis with clear precedence
|
|
114
|
-
*/
|
|
115
|
-
private resolveAxisCoordinate;
|
|
116
|
-
/**
|
|
117
|
-
* Calculate virtual element size based on axis constraints
|
|
118
|
-
*/
|
|
119
|
-
private calculateSize;
|
|
120
|
-
/**
|
|
121
|
-
* Build a DOMRect object
|
|
122
|
-
*/
|
|
123
|
-
private buildDOMRect;
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Abstract base class for tracking strategies
|
|
127
|
-
*/
|
|
128
|
-
export declare abstract class TrackingStrategy {
|
|
129
|
-
abstract readonly name: TrackingMode;
|
|
130
|
-
protected lastKnownCoordinates: Coordinates | null;
|
|
131
|
-
/**
|
|
132
|
-
* Process a pointer event and return coordinates if the strategy wants to update
|
|
133
|
-
* This is the heart of each strategy's behavior
|
|
134
|
-
*/
|
|
135
|
-
abstract process(event: PointerEventData, context: TrackingContext): Coordinates | null;
|
|
136
|
-
/**
|
|
137
|
-
* Get the list of pointer events this strategy needs to listen for
|
|
138
|
-
* This allows strategies to optimize performance by only registering necessary events
|
|
139
|
-
*/
|
|
140
|
-
abstract getRequiredEvents(): PointerEventData["type"][];
|
|
141
|
-
/**
|
|
142
|
-
* Get coordinates to use when the floating element opens
|
|
143
|
-
* This lets each strategy decide its opening behavior without client code needing to know the details
|
|
144
|
-
*/
|
|
145
|
-
getCoordinatesForOpening(): Coordinates | null;
|
|
146
|
-
/**
|
|
147
|
-
* Called when the floating element closes
|
|
148
|
-
* This is where strategies should clean up any temporary state
|
|
149
|
-
*/
|
|
150
|
-
onClose(): void;
|
|
151
|
-
/**
|
|
152
|
-
* Reset all strategy state - used when the composable is disabled or reset
|
|
153
|
-
*/
|
|
154
|
-
reset(): void;
|
|
155
|
-
}
|
|
156
|
-
/**
|
|
157
|
-
* Strategy for continuous cursor tracking
|
|
158
|
-
*/
|
|
159
|
-
export declare class FollowTracker extends TrackingStrategy {
|
|
160
|
-
readonly name: "follow";
|
|
161
|
-
/**
|
|
162
|
-
* Follow strategy needs all pointer events for continuous tracking
|
|
163
|
-
*/
|
|
164
|
-
getRequiredEvents(): PointerEventData["type"][];
|
|
165
|
-
/**
|
|
166
|
-
* Follow strategy: always update coordinates based on the current pointer position
|
|
167
|
-
* This creates smooth, continuous tracking behavior
|
|
168
|
-
*/
|
|
169
|
-
process(event: PointerEventData, context: TrackingContext): Coordinates | null;
|
|
170
|
-
}
|
|
171
|
-
/**
|
|
172
|
-
* Strategy for static positioning at initial interaction
|
|
173
|
-
*/
|
|
174
|
-
export declare class StaticTracker extends TrackingStrategy {
|
|
175
|
-
readonly name: "static";
|
|
176
|
-
private triggerCoordinates;
|
|
177
|
-
/**
|
|
178
|
-
* Static strategy only needs click events, not hover or continuous movement
|
|
179
|
-
* This optimization avoids registering unnecessary pointer events
|
|
180
|
-
*/
|
|
181
|
-
getRequiredEvents(): PointerEventData["type"][];
|
|
182
|
-
/**
|
|
183
|
-
* Static strategy: capture coordinates from trigger events, ignore movement
|
|
184
|
-
* This creates stable positioning that doesn't jump around
|
|
185
|
-
*/
|
|
186
|
-
process(event: PointerEventData, context: TrackingContext): Coordinates | null;
|
|
187
|
-
/**
|
|
188
|
-
* Get coordinates to use when floating element opens
|
|
189
|
-
*/
|
|
190
|
-
getCoordinatesForOpening(): Coordinates | null;
|
|
191
|
-
/**
|
|
192
|
-
* Reset tracking state
|
|
193
|
-
*/
|
|
194
|
-
reset(): void;
|
|
195
|
-
onClose(): void;
|
|
196
|
-
}
|
|
197
|
-
/**
|
|
198
|
-
* Positions the floating element relative to a client point (mouse position).
|
|
199
|
-
*
|
|
200
|
-
* This composable tracks pointer movements and positions the floating element
|
|
201
|
-
* accordingly, with options for axis locking and controlled coordinates.
|
|
202
|
-
*
|
|
203
|
-
* @param pointerTarget - The DOM element whose bounding box is used as the reference for pointer event listeners and initial positioning.
|
|
204
|
-
* @param context - The floating context with open state and position reference
|
|
205
|
-
* @param options - Configuration options for client point behavior
|
|
206
|
-
*
|
|
207
|
-
* @example
|
|
208
|
-
* ```ts
|
|
209
|
-
* const context = useFloating(...)
|
|
210
|
-
* useClientPoint(context, {
|
|
211
|
-
* axis: "x",
|
|
212
|
-
* enabled: true
|
|
213
|
-
* })
|
|
214
|
-
* ```
|
|
215
|
-
*/
|
|
216
|
-
export declare function useClientPoint(pointerTarget: Ref<HTMLElement | null>, context: UseClientPointContext, options?: UseClientPointOptions): UseClientPointReturn;
|
|
217
|
-
export {};
|
|
218
|
-
//# sourceMappingURL=use-client-point.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-client-point.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/use-client-point.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAEL,KAAK,gBAAgB,EAErB,KAAK,GAAG,EAMT,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAMnD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACjB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAA;AAE/C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAE9C;;GAEG;AACH,UAAU,gBAAgB;IACxB,IAAI,EAAE,aAAa,GAAG,aAAa,GAAG,cAAc,CAAA;IACpD,WAAW,EAAE,WAAW,CAAA;IACxB,aAAa,EAAE,YAAY,CAAA;CAC5B;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAA;CAChB;AAMD,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IAEvC;;;OAGG;IACH,CAAC,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAEnC;;;OAGG;IACH,CAAC,CAAC,EAAE,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAEnC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC;QAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC,CAAA;IAClE;;OAEG;IACH,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/C;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,GAAG,CAAC,aAAa,CAAC,CAAA;KAC7B,CAAA;CACF;AAMD;;;GAGG;AACH,qBAAa,qBAAqB;IAChC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAA6B;IAEvE;;OAEG;IACH,MAAM,CAAC,OAAO,EAAE;QACd,WAAW,EAAE,WAAW,CAAA;QACxB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;QACrC,mBAAmB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;QACxC,IAAI,CAAC,EAAE,cAAc,CAAA;KACtB,GAAG,cAAc;IASlB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAmB1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAkBzB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAiBxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAwBvB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAsB7B;;OAEG;IACH,OAAO,CAAC,aAAa;IA+BrB;;OAEG;IACH,OAAO,CAAC,YAAY;CAiBrB;AAMD;;GAEG;AACH,8BAAsB,gBAAgB;IACpC,QAAQ,CAAC,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAA;IAGpC,SAAS,CAAC,oBAAoB,EAAE,WAAW,GAAG,IAAI,CAAO;IAEzD;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAEvF;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,IAAI,gBAAgB,CAAC,MAAM,CAAC,EAAE;IAExD;;;OAGG;IACH,wBAAwB,IAAI,WAAW,GAAG,IAAI;IAM9C;;;OAGG;IACH,OAAO,IAAI,IAAI;IAKf;;OAEG;IACH,KAAK,IAAI,IAAI;CAGd;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,gBAAgB;IACjD,QAAQ,CAAC,IAAI,EAAG,QAAQ,CAAS;IAEjC;;OAEG;IACH,iBAAiB,IAAI,gBAAgB,CAAC,MAAM,CAAC,EAAE;IAI/C;;;OAGG;IACH,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;CA4B/E;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,gBAAgB;IACjD,QAAQ,CAAC,IAAI,EAAG,QAAQ,CAAS;IAIjC,OAAO,CAAC,kBAAkB,CAA2B;IAErD;;;OAGG;IACH,iBAAiB,IAAI,gBAAgB,CAAC,MAAM,CAAC,EAAE;IAI/C;;;OAGG;IACH,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,eAAe,GAAG,WAAW,GAAG,IAAI;IAW9E;;OAEG;IACH,wBAAwB,IAAI,WAAW,GAAG,IAAI;IAS9C;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb,OAAO,IAAI,IAAI;CAKhB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,OAAO,EAAE,qBAAqB,EAC9B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CAmLtB"}
|
|
@@ -1,240 +0,0 @@
|
|
|
1
|
-
import { Ref } from 'vue';
|
|
2
|
-
import { AnchorElement, FloatingContext, FloatingElement, UseFloatingOptions } from './use-floating';
|
|
3
|
-
/**
|
|
4
|
-
* Options for creating a TreeNode
|
|
5
|
-
*/
|
|
6
|
-
export interface CreateTreeNodeOptions {
|
|
7
|
-
/** Optional ID for the node. If not provided, one will be generated. */
|
|
8
|
-
id?: string;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* Options for configuring tree behavior
|
|
12
|
-
*/
|
|
13
|
-
export interface CreateTreeOptions {
|
|
14
|
-
/** Strategy for deleting child nodes when a parent is deleted.
|
|
15
|
-
* - 'orphan': Children are detached from the tree (parent becomes null).
|
|
16
|
-
* - 'recursive': Children are also deleted recursively.
|
|
17
|
-
* @default 'recursive'
|
|
18
|
-
*/
|
|
19
|
-
deleteStrategy?: "orphan" | "recursive";
|
|
20
|
-
}
|
|
21
|
-
interface AddNodeOptions extends UseFloatingOptions {
|
|
22
|
-
/**
|
|
23
|
-
* Parent node ID for tree hierarchy.
|
|
24
|
-
* @default undefined
|
|
25
|
-
*/
|
|
26
|
-
parentId?: string;
|
|
27
|
-
}
|
|
28
|
-
/**
|
|
29
|
-
* Represents a single node in a tree structure with hierarchical relationships.
|
|
30
|
-
*
|
|
31
|
-
* A TreeNode maintains references to its parent and children, allowing bidirectional
|
|
32
|
-
* traversal of the tree. Each node stores generic data and provides methods for
|
|
33
|
-
* tree navigation and manipulation.
|
|
34
|
-
*
|
|
35
|
-
* @template T The type of data stored in the node
|
|
36
|
-
*
|
|
37
|
-
* @example
|
|
38
|
-
* ```ts
|
|
39
|
-
* const node = createTreeNode({ name: 'Parent' });
|
|
40
|
-
* const childNode = createTreeNode({ name: 'Child' }, node);
|
|
41
|
-
* node.addChild(childNode);
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
export interface TreeNode<T> {
|
|
45
|
-
/**
|
|
46
|
-
* Unique identifier for this node
|
|
47
|
-
*/
|
|
48
|
-
readonly id: string;
|
|
49
|
-
/**
|
|
50
|
-
* The data stored in this node
|
|
51
|
-
*/
|
|
52
|
-
readonly data: T;
|
|
53
|
-
/**
|
|
54
|
-
* Reference to the parent node, or null if this is the root
|
|
55
|
-
*/
|
|
56
|
-
readonly parent: Ref<TreeNode<T> | null>;
|
|
57
|
-
/**
|
|
58
|
-
* Array of child nodes
|
|
59
|
-
*/
|
|
60
|
-
readonly children: Ref<TreeNode<T>[]>;
|
|
61
|
-
/**
|
|
62
|
-
* Whether this node is the root of the tree
|
|
63
|
-
*/
|
|
64
|
-
readonly isRoot: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* Computed property indicating whether this node has no children
|
|
67
|
-
*/
|
|
68
|
-
readonly isLeaf: Readonly<Ref<boolean>>;
|
|
69
|
-
/**
|
|
70
|
-
* Adds a child node to this node's children array
|
|
71
|
-
*/
|
|
72
|
-
addChild: (childNode: TreeNode<T>) => void;
|
|
73
|
-
/**
|
|
74
|
-
* Internal method to remove a child instance from this node
|
|
75
|
-
*/
|
|
76
|
-
_removeChildInstance: (childNode: TreeNode<T>) => boolean;
|
|
77
|
-
/**
|
|
78
|
-
* Finds the first immediate child matching the predicate
|
|
79
|
-
*/
|
|
80
|
-
findChild: (predicate: (node: TreeNode<T>) => boolean) => TreeNode<T> | null;
|
|
81
|
-
/**
|
|
82
|
-
* Recursively finds the first descendant matching the predicate
|
|
83
|
-
*/
|
|
84
|
-
findDescendant: (predicate: (node: TreeNode<T>) => boolean) => TreeNode<T> | null;
|
|
85
|
-
/**
|
|
86
|
-
* Checks if this node is a descendant of the given ancestor
|
|
87
|
-
*/
|
|
88
|
-
isDescendantOf: (potentialAncestor: TreeNode<T>) => boolean;
|
|
89
|
-
/**
|
|
90
|
-
* Returns the path from root to this node (inclusive)
|
|
91
|
-
*/
|
|
92
|
-
getPath: () => TreeNode<T>[];
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Core tree data structure for managing hierarchical node relationships.
|
|
96
|
-
*
|
|
97
|
-
* Provides methods for adding, removing, moving, and traversing nodes.
|
|
98
|
-
* Maintains a root node and a map of all nodes for efficient lookups.
|
|
99
|
-
* Supports both orphaning and recursive deletion strategies.
|
|
100
|
-
*
|
|
101
|
-
* @template T The type of data stored in tree nodes
|
|
102
|
-
*
|
|
103
|
-
* @example
|
|
104
|
-
* ```ts
|
|
105
|
-
* const tree = createTree<{ name: string }>();
|
|
106
|
-
* const child = tree.addNode({ name: 'Child' }, tree.root?.id);
|
|
107
|
-
* tree.traverse('dfs'); // Get all nodes in depth-first order
|
|
108
|
-
* ```
|
|
109
|
-
*/
|
|
110
|
-
export interface Tree<T> {
|
|
111
|
-
/**
|
|
112
|
-
* The root node of the tree, or null if empty
|
|
113
|
-
*/
|
|
114
|
-
readonly root: TreeNode<T> | null;
|
|
115
|
-
/**
|
|
116
|
-
* Read-only map of all nodes indexed by their ID for O(1) lookups
|
|
117
|
-
*/
|
|
118
|
-
readonly nodeMap: Readonly<Map<string, TreeNode<T>>>;
|
|
119
|
-
/**
|
|
120
|
-
* Finds a node by its ID anywhere in the tree
|
|
121
|
-
*/
|
|
122
|
-
findNodeById: (id: string) => TreeNode<T> | null;
|
|
123
|
-
/**
|
|
124
|
-
* Adds a new node to the tree as a child of the specified parent
|
|
125
|
-
*/
|
|
126
|
-
addNode: (data: T, parentId?: string | null, nodeOptions?: CreateTreeNodeOptions) => TreeNode<T> | null;
|
|
127
|
-
/**
|
|
128
|
-
* Removes a node from the tree using the specified deletion strategy
|
|
129
|
-
*/
|
|
130
|
-
removeNode: (nodeId: string, deleteStrategy?: "orphan" | "recursive") => boolean;
|
|
131
|
-
/**
|
|
132
|
-
* Moves a node to become a child of a different parent
|
|
133
|
-
*/
|
|
134
|
-
moveNode: (nodeId: string, newParentId: string | null) => boolean;
|
|
135
|
-
/**
|
|
136
|
-
* Traverses the tree using DFS or BFS strategy, optionally starting from a specific node
|
|
137
|
-
*/
|
|
138
|
-
traverse: (strategy?: "dfs" | "bfs", startNode?: TreeNode<T> | null) => TreeNode<T>[];
|
|
139
|
-
/**
|
|
140
|
-
* Clears all nodes from the tree to allow garbage collection
|
|
141
|
-
*/
|
|
142
|
-
dispose: () => void;
|
|
143
|
-
}
|
|
144
|
-
/**
|
|
145
|
-
* Configuration options for the floating tree
|
|
146
|
-
*/
|
|
147
|
-
export interface FloatingTreeOptions extends CreateTreeOptions {
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* Return type for the useFloatingTree composable.
|
|
151
|
-
*
|
|
152
|
-
* Extends the base Tree interface with floating-specific methods for managing
|
|
153
|
-
* a hierarchical tree of floating UI elements. Each node wraps a FloatingContext
|
|
154
|
-
* and provides methods to query and manipulate open states across the tree.
|
|
155
|
-
*
|
|
156
|
-
* @example
|
|
157
|
-
* ```ts
|
|
158
|
-
* const tree = useFloatingTree();
|
|
159
|
-
* const childNode = tree.addNode(anchorEl, floatingEl, { parentId: tree.root?.id });
|
|
160
|
-
* const deepest = tree.getDeepestOpenNode();
|
|
161
|
-
* tree.applyToNodes(childNode.id, (node) => node.data.setOpen(false), {
|
|
162
|
-
* relationship: 'descendants-only'
|
|
163
|
-
* });
|
|
164
|
-
* ```
|
|
165
|
-
*/
|
|
166
|
-
export interface UseFloatingTreeReturn extends Omit<Tree<FloatingContext>, "addNode" | "root"> {
|
|
167
|
-
/**
|
|
168
|
-
* The root node of the floating tree
|
|
169
|
-
*/
|
|
170
|
-
root: TreeNode<FloatingContext> | null;
|
|
171
|
-
/**
|
|
172
|
-
* Adds a new floating element node to the tree with the specified anchor and floating elements
|
|
173
|
-
*/
|
|
174
|
-
addNode: (anchorEl: Ref<AnchorElement>, floatingEl: Ref<FloatingElement>, options?: AddNodeOptions) => TreeNode<FloatingContext> | null;
|
|
175
|
-
/**
|
|
176
|
-
* Returns an array of all nodes that are currently open
|
|
177
|
-
*/
|
|
178
|
-
getAllOpenNodes: () => TreeNode<FloatingContext>[];
|
|
179
|
-
/**
|
|
180
|
-
* Returns the deepest (most nested) open node in the tree, or null if none are open
|
|
181
|
-
*/
|
|
182
|
-
getDeepestOpenNode: () => TreeNode<FloatingContext> | null;
|
|
183
|
-
/**
|
|
184
|
-
* Executes a provided function once for each tree node that matches the specified relationship.
|
|
185
|
-
* This is a flexible iteration method that can target nodes based on their relationship to a target node.
|
|
186
|
-
*
|
|
187
|
-
* @param nodeId - The ID of the target node used as a reference point for the relationship
|
|
188
|
-
* @param callback - A function to execute for each matching node
|
|
189
|
-
* @param options - Configuration options for the iteration behavior
|
|
190
|
-
*/
|
|
191
|
-
applyToNodes: (nodeId: string, callback: (node: TreeNode<FloatingContext>) => void, options?: {
|
|
192
|
-
relationship?: NodeRelationship;
|
|
193
|
-
applyToMatching?: boolean;
|
|
194
|
-
}) => void;
|
|
195
|
-
}
|
|
196
|
-
/**
|
|
197
|
-
* Predefined node relationship strategies used for filtering nodes.
|
|
198
|
-
*/
|
|
199
|
-
type NodeRelationship = "ancestors-only" | "siblings-only" | "descendants-only" | "children-only" | "self-and-ancestors" | "self-and-children" | "self-and-descendants" | "self-and-siblings" | "self-ancestors-and-children" | "full-branch" | "all-except-branch";
|
|
200
|
-
/**
|
|
201
|
-
* Creates and manages a hierarchical tree of floating elements.
|
|
202
|
-
*
|
|
203
|
-
* Each node in the tree is assigned a stable ID. For non-root nodes, `addNode` generates
|
|
204
|
-
* the ID and injects it into the created FloatingContext (passed to `useFloating`).
|
|
205
|
-
* Consumers should not provide a custom `id` in `UseFloatingOptions` when using `addNode`;
|
|
206
|
-
* it will be ignored in favor of the generated one.
|
|
207
|
-
*
|
|
208
|
-
* @param treeOptions - Options for tree behavior
|
|
209
|
-
* @returns UseFloatingTreeReturn with tree management methods and root context
|
|
210
|
-
*/
|
|
211
|
-
export declare function useFloatingTree(treeOptions?: FloatingTreeOptions): UseFloatingTreeReturn;
|
|
212
|
-
/**
|
|
213
|
-
* Creates a reactive tree node with data, parent reference, and children references.
|
|
214
|
-
* @param data The data to store in the node
|
|
215
|
-
* @param parent The parent node, or null for root nodes
|
|
216
|
-
* @param options Configuration options for the node
|
|
217
|
-
* @param isRoot Whether this node is the true root of a tree
|
|
218
|
-
* @returns A reactive tree node object with methods and reactive properties
|
|
219
|
-
*/
|
|
220
|
-
export declare function createTreeNode<T>(data: T, parent?: TreeNode<T> | null, options?: CreateTreeNodeOptions, isRoot?: boolean): TreeNode<T>;
|
|
221
|
-
/**
|
|
222
|
-
* Creates and manages a reactive tree structure.
|
|
223
|
-
*
|
|
224
|
-
* This factory function provides a complete tree data structure with reactive nodes,
|
|
225
|
-
* supporting operations like adding, removing, and moving nodes, as well as
|
|
226
|
-
* traversal and search functionality.
|
|
227
|
-
*
|
|
228
|
-
* @template T The type of data stored in the tree nodes.
|
|
229
|
-
* @param options Configuration options for the tree behavior.
|
|
230
|
-
* @returns A tree management object with methods and reactive properties
|
|
231
|
-
*
|
|
232
|
-
* @example
|
|
233
|
-
* ```ts
|
|
234
|
-
* const myTree = createTree<{ name: string }>();
|
|
235
|
-
* const childNode = myTree.addNode({ name: 'Child' }, myTree.root?.id);
|
|
236
|
-
* ```
|
|
237
|
-
*/
|
|
238
|
-
export declare function createTree<T>(options?: CreateTreeOptions): Tree<T>;
|
|
239
|
-
export {};
|
|
240
|
-
//# sourceMappingURL=use-floating-tree.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-floating-tree.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/use-floating-tree.ts"],"names":[],"mappings":"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"}
|