v-float 0.7.1 → 0.8.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/LICENSE +20 -20
- package/README.md +223 -204
- package/dist/composables/index.d.ts +1 -3
- package/dist/composables/index.d.ts.map +1 -1
- package/dist/composables/interactions/index.d.ts +0 -2
- package/dist/composables/interactions/index.d.ts.map +1 -1
- package/dist/composables/interactions/polygon.d.ts +2 -2
- package/dist/composables/interactions/polygon.d.ts.map +1 -1
- package/dist/composables/interactions/use-click.d.ts +2 -2
- package/dist/composables/interactions/use-click.d.ts.map +1 -1
- package/dist/composables/interactions/use-escape-key.d.ts +2 -2
- package/dist/composables/interactions/use-escape-key.d.ts.map +1 -1
- package/dist/composables/interactions/use-focus.d.ts +30 -25
- package/dist/composables/interactions/use-focus.d.ts.map +1 -1
- package/dist/composables/interactions/use-hover.d.ts +2 -2
- package/dist/composables/interactions/use-hover.d.ts.map +1 -1
- package/dist/composables/middlewares/arrow.d.ts +1 -2
- package/dist/composables/middlewares/arrow.d.ts.map +1 -1
- package/dist/composables/middlewares/index.d.ts +3 -1
- package/dist/composables/middlewares/index.d.ts.map +1 -1
- package/dist/composables/positioning/index.d.ts +5 -0
- package/dist/composables/positioning/index.d.ts.map +1 -0
- package/dist/composables/positioning/use-arrow.d.ts.map +1 -0
- package/dist/composables/{interactions → positioning}/use-client-point.d.ts +2 -2
- package/dist/composables/positioning/use-client-point.d.ts.map +1 -0
- package/dist/composables/positioning/use-floating-tree.d.ts +240 -0
- package/dist/composables/positioning/use-floating-tree.d.ts.map +1 -0
- package/dist/composables/{use-floating.d.ts → positioning/use-floating.d.ts} +19 -10
- package/dist/composables/positioning/use-floating.d.ts.map +1 -0
- package/dist/types.d.ts +15 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/utils.d.ts +84 -7
- package/dist/utils.d.ts.map +1 -1
- package/dist/v-float.es.js +1732 -1620
- package/dist/v-float.umd.js +1 -1
- package/package.json +73 -76
- package/dist/composables/interactions/use-client-point.d.ts.map +0 -1
- package/dist/composables/interactions/utils/browser-detection.d.ts +0 -23
- package/dist/composables/interactions/utils/browser-detection.d.ts.map +0 -1
- package/dist/composables/interactions/utils/element-detection.d.ts +0 -53
- package/dist/composables/interactions/utils/element-detection.d.ts.map +0 -1
- package/dist/composables/interactions/utils/event-utils.d.ts +0 -30
- package/dist/composables/interactions/utils/event-utils.d.ts.map +0 -1
- package/dist/composables/interactions/utils/index.d.ts +0 -11
- package/dist/composables/interactions/utils/index.d.ts.map +0 -1
- package/dist/composables/interactions/utils/tree-context.d.ts +0 -32
- package/dist/composables/interactions/utils/tree-context.d.ts.map +0 -1
- package/dist/composables/use-arrow.d.ts.map +0 -1
- package/dist/composables/use-floating-tree.d.ts +0 -110
- package/dist/composables/use-floating-tree.d.ts.map +0 -1
- package/dist/composables/use-floating.d.ts.map +0 -1
- /package/dist/composables/{use-arrow.d.ts → positioning/use-arrow.d.ts} +0 -0
|
@@ -1,40 +1,35 @@
|
|
|
1
1
|
import { MaybeRefOrGetter } from 'vue';
|
|
2
|
-
import { FloatingContext } from '
|
|
3
|
-
import {
|
|
2
|
+
import { FloatingContext } from '../positioning/use-floating';
|
|
3
|
+
import { Tree } from '../positioning/use-floating-tree';
|
|
4
4
|
/**
|
|
5
|
-
* Enables showing/hiding the floating element when
|
|
5
|
+
* Enables showing/hiding the floating element when the reference element receives or loses focus.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
* it should be composed with other hooks like `useClick`, `useHover`, and `useEscapeKey`.
|
|
7
|
+
* Keyboard-only interaction hook. Compose with `useClick`, `useHover`, `useEscapeKey` for a complete UX.
|
|
9
8
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* Tree-aware behavior is enabled by providing a `tree` option and passing the corresponding
|
|
10
|
+
* FloatingContext (i.e., the node's `.data`). IDs are only relevant for tree-aware usage and are
|
|
11
|
+
* automatically assigned when using `useFloatingTree().addNode(...)`.
|
|
12
12
|
*
|
|
13
|
-
* @param context - The floating context
|
|
14
|
-
* @param options - Configuration options
|
|
13
|
+
* @param context - The floating context for this element (not a TreeNode).
|
|
14
|
+
* @param options - Configuration options. Provide `tree` to enable tree-aware behavior.
|
|
15
15
|
*
|
|
16
|
-
* @example
|
|
16
|
+
* @example Standalone
|
|
17
17
|
* ```ts
|
|
18
|
-
* const
|
|
19
|
-
* useFocus(
|
|
20
|
-
* enabled: true,
|
|
21
|
-
* requireFocusVisible: true
|
|
22
|
-
* })
|
|
18
|
+
* const ctx = useFloating(...)
|
|
19
|
+
* useFocus(ctx)
|
|
23
20
|
* ```
|
|
24
21
|
*
|
|
25
|
-
* @example Tree-aware
|
|
22
|
+
* @example Tree-aware
|
|
26
23
|
* ```ts
|
|
27
|
-
* const tree = useFloatingTree(
|
|
28
|
-
* const
|
|
29
|
-
* const
|
|
24
|
+
* const tree = useFloatingTree(rootAnchor, rootFloating)
|
|
25
|
+
* const parent = tree.root
|
|
26
|
+
* const child = tree.addNode(childAnchor, childFloating, { parentId: parent.id })
|
|
30
27
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* useFocus(parentNode, { requireFocusVisible: true })
|
|
34
|
-
* useFocus(childNode, { requireFocusVisible: true })
|
|
28
|
+
* useFocus(parent.data, { tree })
|
|
29
|
+
* useFocus(child.data, { tree })
|
|
35
30
|
* ```
|
|
36
31
|
*/
|
|
37
|
-
export declare function useFocus(context: FloatingContext
|
|
32
|
+
export declare function useFocus(context: FloatingContext, options?: UseFocusOptions): UseFocusReturn;
|
|
38
33
|
export interface UseFocusOptions {
|
|
39
34
|
/**
|
|
40
35
|
* Whether focus event listeners are enabled
|
|
@@ -47,9 +42,19 @@ export interface UseFocusOptions {
|
|
|
47
42
|
* @default true
|
|
48
43
|
*/
|
|
49
44
|
requireFocusVisible?: MaybeRefOrGetter<boolean>;
|
|
45
|
+
/**
|
|
46
|
+
* When provided, enables tree-aware focus handling.
|
|
47
|
+
*/
|
|
48
|
+
tree?: Tree<FloatingContext>;
|
|
50
49
|
}
|
|
51
50
|
/**
|
|
52
51
|
* Return value of the useFocus composable
|
|
53
52
|
*/
|
|
54
|
-
export
|
|
53
|
+
export interface UseFocusReturn {
|
|
54
|
+
/**
|
|
55
|
+
* Cleanup function that removes all event listeners and clears pending timeouts.
|
|
56
|
+
* Useful for manual cleanup in testing scenarios.
|
|
57
|
+
*/
|
|
58
|
+
cleanup: () => void;
|
|
59
|
+
}
|
|
55
60
|
//# sourceMappingURL=use-focus.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-focus.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,
|
|
1
|
+
{"version":3,"file":"use-focus.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-focus.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,gBAAgB,EAOtB,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAC7E,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,6CAA6C,CAAA;AAkBjF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,eAAe,EACxB,OAAO,GAAE,eAAoB,GAC5B,cAAc,CA8NhB;AAMD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAEnC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAE/C;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MaybeRef } from 'vue';
|
|
2
|
-
import { TreeNode } from '../use-floating-tree';
|
|
3
|
-
import { FloatingContext } from '../use-floating';
|
|
2
|
+
import { TreeNode } from '../positioning/use-floating-tree';
|
|
3
|
+
import { FloatingContext } from '../positioning/use-floating';
|
|
4
4
|
import { SafePolygonOptions } from './polygon';
|
|
5
5
|
export interface UseHoverOptions {
|
|
6
6
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hover.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-hover.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,QAAQ,EAKd,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"use-hover.d.ts","sourceRoot":"","sources":["../../../src/composables/interactions/use-hover.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,QAAQ,EAKd,MAAM,KAAK,CAAA;AACZ,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,KAAK,kBAAkB,EAAe,MAAM,WAAW,CAAA;AAWhE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,EACpD,OAAO,GAAE,eAAoB,GAC5B,IAAI,CA8ON"}
|
|
@@ -14,13 +14,12 @@ export interface ArrowMiddlewareOptions {
|
|
|
14
14
|
element: Ref<HTMLElement | null>;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
|
-
* Positions an inner element of the floating element such that it is centered to the
|
|
17
|
+
* Positions an inner element of the floating element such that it is centered to the anchor element.
|
|
18
18
|
*
|
|
19
19
|
* This middleware is used to position arrow elements within floating elements.
|
|
20
20
|
*
|
|
21
21
|
* @param options - The arrow options including padding and element reference
|
|
22
22
|
* @returns A middleware function for arrow positioning
|
|
23
|
-
* @see https://floating-ui.com/docs/arrow
|
|
24
23
|
*/
|
|
25
24
|
export declare function arrow(options: ArrowMiddlewareOptions): Middleware;
|
|
26
25
|
//# sourceMappingURL=arrow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/composables/middlewares/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,KAAK,CAAA;AAMvC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,OAAO,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CACjC;AAMD
|
|
1
|
+
{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/composables/middlewares/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,KAAK,CAAA;AAMvC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IACH,OAAO,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CACjC;AAMD;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,sBAAsB,GAAG,UAAU,CAcjE"}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export type { Middleware, Placement, Strategy } from '@floating-ui/dom';
|
|
2
|
+
export { autoPlacement, flip, hide, offset, shift, size } from '@floating-ui/dom';
|
|
3
|
+
export { arrow } from './arrow';
|
|
2
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/middlewares/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/middlewares/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
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,6 +1,6 @@
|
|
|
1
|
-
import { VirtualElement } from '@floating-ui/dom';
|
|
2
1
|
import { MaybeRefOrGetter, Ref } from 'vue';
|
|
3
|
-
import {
|
|
2
|
+
import { VirtualElement } from '../../types';
|
|
3
|
+
import { AnchorElement } from './use-floating';
|
|
4
4
|
/**
|
|
5
5
|
* Represents 2D coordinates with optional null values for unset states
|
|
6
6
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-client-point.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/use-client-point.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,240 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-floating-tree.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/use-floating-tree.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { AutoUpdateOptions, Middleware, MiddlewareData, Placement, Strategy
|
|
1
|
+
import { AutoUpdateOptions, Middleware, MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
|
|
2
2
|
import { MaybeRefOrGetter, Ref } from 'vue';
|
|
3
|
+
import { OpenChangeReason, VirtualElement } from '../../types';
|
|
3
4
|
/**
|
|
4
5
|
* Type for anchor element in floating UI
|
|
5
6
|
*/
|
|
@@ -39,6 +40,12 @@ export type FloatingStyles = {
|
|
|
39
40
|
* Options for configuring floating element behavior
|
|
40
41
|
*/
|
|
41
42
|
export interface UseFloatingOptions {
|
|
43
|
+
/**
|
|
44
|
+
* Optional stable identifier for this floating context.
|
|
45
|
+
* Only relevant for tree-aware behavior and typically generated by `useFloatingTree().addNode(...)`.
|
|
46
|
+
* Standalone usage should omit this.
|
|
47
|
+
*/
|
|
48
|
+
id?: string;
|
|
42
49
|
/**
|
|
43
50
|
* Where to place the floating element relative to its anchor element.
|
|
44
51
|
* @default 'bottom'
|
|
@@ -60,26 +67,28 @@ export interface UseFloatingOptions {
|
|
|
60
67
|
middlewares?: MaybeRefOrGetter<Middleware[]>;
|
|
61
68
|
/**
|
|
62
69
|
* Whether to automatically update the position of the floating element.
|
|
63
|
-
* Can be a boolean or an `AutoUpdateOptions` object.
|
|
64
70
|
* @default true
|
|
65
71
|
*/
|
|
66
72
|
autoUpdate?: boolean | AutoUpdateOptions;
|
|
67
73
|
/**
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
74
|
+
* Whether the floating element is open.
|
|
75
|
+
* @default false
|
|
76
|
+
*/
|
|
71
77
|
open?: Ref<boolean>;
|
|
72
78
|
/**
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
* @default null
|
|
79
|
+
* Callback invoked whenever the open state changes via setOpen.
|
|
80
|
+
* Provides the new state, the reason, and the triggering DOM event (if any).
|
|
76
81
|
*/
|
|
77
|
-
|
|
82
|
+
onOpenChange?: (open: boolean, reason: OpenChangeReason, event?: Event) => void;
|
|
78
83
|
}
|
|
79
84
|
/**
|
|
80
85
|
* Context object returned by useFloating containing all necessary data and methods
|
|
81
86
|
*/
|
|
82
87
|
export interface FloatingContext {
|
|
88
|
+
/**
|
|
89
|
+
* Stable identifier for this floating context. Used for tree-aware interactions.
|
|
90
|
+
*/
|
|
91
|
+
id?: string;
|
|
83
92
|
/**
|
|
84
93
|
* The x-coordinate of the floating element
|
|
85
94
|
*/
|
|
@@ -127,7 +136,7 @@ export interface FloatingContext {
|
|
|
127
136
|
/**
|
|
128
137
|
* Function to explicitly set the open state of the floating element.
|
|
129
138
|
*/
|
|
130
|
-
setOpen: (open: boolean) => void;
|
|
139
|
+
setOpen: (open: boolean, reason?: OpenChangeReason, event?: Event) => void;
|
|
131
140
|
}
|
|
132
141
|
/**
|
|
133
142
|
* Composable function that provides positioning for a floating element relative to an anchor element
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-floating.d.ts","sourceRoot":"","sources":["../../../src/composables/positioning/use-floating.ts"],"names":[],"mappings":"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"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
1
|
export type AnyFn<T extends unknown[] = unknown[], U = unknown> = (...args: T) => U;
|
|
2
2
|
export type Fn = () => void;
|
|
3
|
+
/**
|
|
4
|
+
* Minimal VirtualElement interface compatible with Floating UI expectations.
|
|
5
|
+
* Provides a bounding client rect and an optional context element for layout.
|
|
6
|
+
*/
|
|
7
|
+
export interface VirtualElement {
|
|
8
|
+
getBoundingClientRect: () => DOMRect;
|
|
9
|
+
/**
|
|
10
|
+
* Optional context element used by Floating UI to resolve layout metrics.
|
|
11
|
+
*/
|
|
12
|
+
contextElement?: Element;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Primary interaction reasons for open state changes. Minimal and extensible.
|
|
16
|
+
*/
|
|
17
|
+
export type OpenChangeReason = "anchor-click" | "keyboard-activate" | "outside-pointer" | "focus" | "blur" | "hover" | "escape-key" | "tree-ancestor-close" | "programmatic";
|
|
3
18
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE,EAAE,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,CAAA;AACnF,MAAM,MAAM,EAAE,GAAG,MAAM,IAAI,CAAA"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,OAAO,EAAE,GAAG,OAAO,EAAE,EAAE,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,CAAA;AACnF,MAAM,MAAM,EAAE,GAAG,MAAM,IAAI,CAAA;AAE3B;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,MAAM,OAAO,CAAA;IACpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,cAAc,GACd,mBAAmB,GACnB,iBAAiB,GACjB,OAAO,GACP,MAAM,GACN,OAAO,GACP,YAAY,GACZ,qBAAqB,GACrB,cAAc,CAAA"}
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,15 +1,92 @@
|
|
|
1
|
-
import { AnyFn } from './types';
|
|
1
|
+
import { AnyFn, VirtualElement } from './types';
|
|
2
|
+
import { FloatingContext } from './composables/positioning/use-floating';
|
|
3
|
+
import { TreeNode } from './composables/positioning/use-floating-tree';
|
|
2
4
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
* @returns A unique string ID.
|
|
5
|
+
* Wrapper around Vue's useId that provides a fallback counter-based ID generator.
|
|
6
|
+
* This ensures unique IDs even when useId() returns empty strings (e.g., in test environments).
|
|
6
7
|
*/
|
|
7
8
|
export declare function useId(): string;
|
|
8
9
|
/**
|
|
9
10
|
* 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
11
|
*/
|
|
13
12
|
export declare function isFunction(value: unknown): value is AnyFn;
|
|
14
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Type guard for HTMLElement
|
|
15
|
+
*/
|
|
16
|
+
export declare function isHTMLElement(value: unknown | null): value is HTMLElement;
|
|
17
|
+
/**
|
|
18
|
+
* Checks if the user agent is on a Mac.
|
|
19
|
+
*/
|
|
20
|
+
export declare function isMac(): boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Checks if the browser is Safari.
|
|
23
|
+
*/
|
|
24
|
+
export declare function isSafari(): boolean;
|
|
25
|
+
/**
|
|
26
|
+
* A simple utility to check if an element matches `:focus-visible`.
|
|
27
|
+
*/
|
|
28
|
+
export declare function matchesFocusVisible(element: Element): boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Checks if the pointer type is mouse-like (mouse or pen).
|
|
31
|
+
*/
|
|
32
|
+
export declare function isMouseLikePointerType(pointerType: string | undefined, strict?: boolean): boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Checks if the element is an input, textarea, or contenteditable element.
|
|
35
|
+
*/
|
|
36
|
+
export declare function isTypeableElement(element: Element | null): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Checks if the event target is a button-like element.
|
|
39
|
+
*/
|
|
40
|
+
export declare function isButtonTarget(event: KeyboardEvent): boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Checks if the Space key press should be ignored for the given element.
|
|
43
|
+
*/
|
|
44
|
+
export declare function isSpaceIgnored(element: Element | null): boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Checks if the value is a VirtualElement.
|
|
47
|
+
*/
|
|
48
|
+
export declare function isVirtualElement(el: unknown): el is VirtualElement;
|
|
49
|
+
/**
|
|
50
|
+
* Checks if the event target is within the given element.
|
|
51
|
+
*/
|
|
52
|
+
export declare function isEventTargetWithin(event: Event, element: Element | null | undefined): boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Checks if a click event occurred on a scrollbar.
|
|
55
|
+
*/
|
|
56
|
+
export declare function isClickOnScrollbar(event: MouseEvent, target: HTMLElement): boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Simple element containment wrapper.
|
|
59
|
+
*/
|
|
60
|
+
export declare function contains(el: HTMLElement, target: Element | null): boolean;
|
|
61
|
+
/**
|
|
62
|
+
* Event target extraction utility.
|
|
63
|
+
*/
|
|
64
|
+
export declare function getTarget(event: MouseEvent | TouchEvent): Element | null;
|
|
65
|
+
/**
|
|
66
|
+
* Safe performance timing that handles environments without performance API.
|
|
67
|
+
*/
|
|
68
|
+
export declare function getCurrentTime(): number;
|
|
69
|
+
/**
|
|
70
|
+
* Centralized timeout management to prevent memory leaks.
|
|
71
|
+
*/
|
|
72
|
+
export declare function clearTimeoutIfSet(timeoutId: number): void;
|
|
73
|
+
/**
|
|
74
|
+
* Type guard to determine if the context parameter is a TreeNode.
|
|
75
|
+
*/
|
|
76
|
+
export declare function isTreeNode(context: FloatingContext | TreeNode<FloatingContext>): context is TreeNode<FloatingContext>;
|
|
77
|
+
/**
|
|
78
|
+
* Extracts floating context and tree context from the parameter.
|
|
79
|
+
*/
|
|
80
|
+
export declare function getContextFromParameter(context: FloatingContext | TreeNode<FloatingContext>): {
|
|
81
|
+
floatingContext: FloatingContext;
|
|
82
|
+
treeContext: TreeNode<FloatingContext> | null;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* Checks if a target node is within an anchor or floating element, handling VirtualElement.
|
|
86
|
+
*/
|
|
87
|
+
export declare function isTargetWithinElement(target: Node, element: unknown): boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Finds a descendant node that contains the target element.
|
|
90
|
+
*/
|
|
91
|
+
export declare function findDescendantContainingTarget(node: TreeNode<FloatingContext>, target: Node): TreeNode<FloatingContext> | null;
|
|
15
92
|
//# 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;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAKpC;;;GAGG;AACH,wBAAgB,KAAK,IAAI,MAAM,CAI9B;AAED,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAC7E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAA;AAM3E;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,KAAK,CAEzD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,GAAG,KAAK,IAAI,WAAW,CAEzE;AAMD;;GAEG;AACH,wBAAgB,KAAK,IAAI,OAAO,CAG/B;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAGlC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAG7D;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAIjG;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAOlE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAQ5D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAE/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,GAAG,EAAE,IAAI,cAAc,CAElE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAM9F;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CA0BlF;AAMD;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,CAEzE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,IAAI,CAExE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAIzD;AAMD;;GAEG;AACH,wBAAgB,UAAU,CACxB,OAAO,EAAE,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,GACnD,OAAO,IAAI,QAAQ,CAAC,eAAe,CAAC,CAStC;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,GACnD;IACD,eAAe,EAAE,eAAe,CAAA;IAChC,WAAW,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG,IAAI,CAAA;CAC9C,CAWA;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAkB7E;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAC5C,IAAI,EAAE,QAAQ,CAAC,eAAe,CAAC,EAC/B,MAAM,EAAE,IAAI,GACX,QAAQ,CAAC,eAAe,CAAC,GAAG,IAAI,CAgBlC"}
|