@data-slot/ui 0.2.130 → 0.2.132
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 +23 -18
- package/dist/alert-dialog.cjs +1 -0
- package/dist/alert-dialog.d.cts +2 -0
- package/dist/alert-dialog.d.ts +2 -0
- package/dist/alert-dialog.js +1 -0
- package/dist/collapsible.d.cts +1 -1
- package/dist/collapsible.d.ts +1 -1
- package/dist/command.d.cts +1 -1
- package/dist/command.d.ts +1 -1
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/dialog.d.cts +1 -1
- package/dist/dialog.d.ts +1 -1
- package/dist/hover-card.d.cts +1 -1
- package/dist/hover-card.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/index10.d.cts +14 -0
- package/dist/index10.d.ts +14 -0
- package/dist/index2.d.cts +16 -33
- package/dist/index2.d.ts +16 -33
- package/dist/index3.d.cts +42 -38
- package/dist/index3.d.ts +42 -38
- package/dist/index4.d.cts +38 -58
- package/dist/index4.d.ts +38 -58
- package/dist/index5.d.cts +39 -46
- package/dist/index5.d.ts +39 -46
- package/dist/index6.d.cts +54 -48
- package/dist/index6.d.ts +54 -48
- package/dist/index7.d.cts +45 -53
- package/dist/index7.d.ts +45 -53
- package/dist/index8.d.cts +49 -49
- package/dist/index8.d.ts +49 -49
- package/dist/index9.d.cts +71 -13
- package/dist/index9.d.ts +71 -13
- package/dist/popover.d.cts +1 -1
- package/dist/popover.d.ts +1 -1
- package/dist/popup.d.cts +13 -1
- package/dist/popup.d.ts +13 -1
- package/dist/tabs.d.cts +1 -1
- package/dist/tabs.d.ts +1 -1
- package/dist/tooltip.d.cts +1 -1
- package/dist/tooltip.d.ts +1 -1
- package/package.json +23 -16
package/dist/index6.d.ts
CHANGED
|
@@ -1,63 +1,69 @@
|
|
|
1
|
-
//#region ../
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
//#region ../hover-card/src/index.d.ts
|
|
2
|
+
type HoverCardSide = "top" | "right" | "bottom" | "left";
|
|
3
|
+
type HoverCardAlign = "start" | "center" | "end";
|
|
4
|
+
type HoverCardReason = "pointer" | "focus" | "blur" | "dismiss" | "api";
|
|
5
|
+
interface HoverCardOptions {
|
|
6
|
+
/** Initial open state (uncontrolled mode only) */
|
|
7
|
+
defaultOpen?: boolean;
|
|
8
|
+
/** Controlled open state. Internal interactions do not mutate when set. */
|
|
9
|
+
open?: boolean;
|
|
10
|
+
/** Delay before opening on hover/keyboard focus (ms). @default 700 */
|
|
11
|
+
delay?: number;
|
|
12
|
+
/** Duration to skip delay after closing (ms). Set to 0 to disable warm-up. @default 300 */
|
|
13
|
+
skipDelayDuration?: number;
|
|
14
|
+
/** Delay before closing after leave/blur (ms). @default 300 */
|
|
15
|
+
closeDelay?: number;
|
|
16
|
+
/** The preferred side of the trigger to render against. @default "bottom" */
|
|
17
|
+
side?: HoverCardSide;
|
|
18
|
+
/** The preferred alignment against the trigger. @default "center" */
|
|
19
|
+
align?: HoverCardAlign;
|
|
20
|
+
/** The distance in pixels from the trigger. @default 4 */
|
|
21
|
+
sideOffset?: number;
|
|
22
|
+
/** Offset in pixels from the alignment edge. @default 0 */
|
|
23
|
+
alignOffset?: number;
|
|
24
|
+
/** When true, flips/shifts content to avoid viewport collisions. @default true */
|
|
25
|
+
avoidCollisions?: boolean;
|
|
26
|
+
/** Viewport padding used when avoiding collisions. @default 8 */
|
|
27
|
+
collisionPadding?: number;
|
|
28
|
+
/** Portal content to body while open. @default true */
|
|
29
|
+
portal?: boolean;
|
|
30
|
+
/** Close when clicking outside. @default true */
|
|
31
|
+
closeOnClickOutside?: boolean;
|
|
32
|
+
/** Close when pressing Escape. @default true */
|
|
33
|
+
closeOnEscape?: boolean;
|
|
34
|
+
/** Callback when open state changes */
|
|
35
|
+
onOpenChange?: (open: boolean) => void;
|
|
15
36
|
}
|
|
16
|
-
interface
|
|
17
|
-
/**
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
|
|
37
|
+
interface HoverCardController {
|
|
38
|
+
/** Open the hover-card (request in controlled mode) */
|
|
39
|
+
open(): void;
|
|
40
|
+
/** Close the hover-card (request in controlled mode) */
|
|
41
|
+
close(): void;
|
|
42
|
+
/** Toggle the hover-card (request in controlled mode) */
|
|
43
|
+
toggle(): void;
|
|
44
|
+
/** Force open state update (works in both controlled/uncontrolled modes) */
|
|
45
|
+
setOpen(open: boolean): void;
|
|
46
|
+
/** Current open state */
|
|
47
|
+
readonly isOpen: boolean;
|
|
23
48
|
/** Cleanup all event listeners */
|
|
24
49
|
destroy(): void;
|
|
25
50
|
}
|
|
26
51
|
/**
|
|
27
|
-
* Create a
|
|
28
|
-
*
|
|
29
|
-
* ## Events
|
|
30
|
-
* - **Outbound** `tabs:change` (on root): Fires when selected tab changes.
|
|
31
|
-
* `event.detail: { value: string }`
|
|
32
|
-
* - **Inbound** `tabs:select` (on root): Select a tab programmatically.
|
|
33
|
-
* `event.detail: { value: string } | string` (fallback: `event.currentTarget.dataset.value`)
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* ```js
|
|
37
|
-
* // Listen for tab changes
|
|
38
|
-
* root.addEventListener("tabs:change", (e) => console.log(e.detail.value));
|
|
39
|
-
* // Select a tab from outside (object or string detail)
|
|
40
|
-
* root.dispatchEvent(new CustomEvent("tabs:select", { detail: { value: "two" } }));
|
|
41
|
-
* root.dispatchEvent(new CustomEvent("tabs:select", { detail: "two" }));
|
|
42
|
-
* ```
|
|
52
|
+
* Create a hover-card controller for a root element
|
|
43
53
|
*
|
|
44
54
|
* Expected markup:
|
|
45
55
|
* ```html
|
|
46
|
-
* <div data-slot="
|
|
47
|
-
* <
|
|
48
|
-
*
|
|
49
|
-
* <button data-slot="tabs-trigger" data-value="two">Tab Two</button>
|
|
50
|
-
* </div>
|
|
51
|
-
* <div data-slot="tabs-content" data-value="one">Content One</div>
|
|
52
|
-
* <div data-slot="tabs-content" data-value="two">Content Two</div>
|
|
56
|
+
* <div data-slot="hover-card">
|
|
57
|
+
* <button data-slot="hover-card-trigger">Hover me</button>
|
|
58
|
+
* <div data-slot="hover-card-content">Preview content</div>
|
|
53
59
|
* </div>
|
|
54
60
|
* ```
|
|
55
61
|
*/
|
|
56
|
-
declare function
|
|
62
|
+
declare function createHoverCard(root: Element, options?: HoverCardOptions): HoverCardController;
|
|
57
63
|
/**
|
|
58
|
-
* Find and bind all
|
|
64
|
+
* Find and bind all hover-card components in a scope
|
|
59
65
|
* Returns array of controllers for programmatic access
|
|
60
66
|
*/
|
|
61
|
-
declare function create(scope?: ParentNode):
|
|
67
|
+
declare function create(scope?: ParentNode): HoverCardController[];
|
|
62
68
|
//#endregion
|
|
63
|
-
export {
|
|
69
|
+
export { HoverCardSide as a, HoverCardReason as i, HoverCardController as n, create as o, HoverCardOptions as r, createHoverCard as s, HoverCardAlign as t };
|
package/dist/index7.d.cts
CHANGED
|
@@ -1,71 +1,63 @@
|
|
|
1
|
-
//#region ../
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
interface PopoverOptions {
|
|
10
|
-
/** Initial open state */
|
|
11
|
-
defaultOpen?: boolean;
|
|
1
|
+
//#region ../tabs/src/index.d.ts
|
|
2
|
+
interface TabsOptions {
|
|
3
|
+
/** Initial selected tab value */
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
/** Callback when selected tab changes */
|
|
6
|
+
onValueChange?: (value: string) => void;
|
|
7
|
+
/** Tab orientation for keyboard navigation */
|
|
8
|
+
orientation?: "horizontal" | "vertical";
|
|
12
9
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
10
|
+
* Activation mode for keyboard navigation
|
|
11
|
+
* - "auto": Arrow keys select tabs immediately (default)
|
|
12
|
+
* - "manual": Arrow keys move focus, Enter/Space activates
|
|
15
13
|
*/
|
|
16
|
-
|
|
17
|
-
/** The preferred side of the trigger to render against. @default "bottom" */
|
|
18
|
-
side?: PopoverSide;
|
|
19
|
-
/** The preferred alignment against the trigger. @default "center" */
|
|
20
|
-
align?: PopoverAlign;
|
|
21
|
-
/** The distance in pixels from the trigger. @default 4 */
|
|
22
|
-
sideOffset?: number;
|
|
23
|
-
/** Offset in pixels from the alignment edge. @default 0 */
|
|
24
|
-
alignOffset?: number;
|
|
25
|
-
/** When true, flips/shifts content to avoid viewport collisions. @default true */
|
|
26
|
-
avoidCollisions?: boolean;
|
|
27
|
-
/** Viewport padding used when avoiding collisions. @default 8 */
|
|
28
|
-
collisionPadding?: number;
|
|
29
|
-
/** Callback when open state changes */
|
|
30
|
-
onOpenChange?: (open: boolean) => void;
|
|
31
|
-
/** Portal content to body while open. @default true */
|
|
32
|
-
portal?: boolean;
|
|
33
|
-
/** Close when clicking outside */
|
|
34
|
-
closeOnClickOutside?: boolean;
|
|
35
|
-
/** Close when pressing Escape */
|
|
36
|
-
closeOnEscape?: boolean;
|
|
14
|
+
activationMode?: "auto" | "manual";
|
|
37
15
|
}
|
|
38
|
-
interface
|
|
39
|
-
/**
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
|
|
45
|
-
/** Current open state */
|
|
46
|
-
readonly isOpen: boolean;
|
|
16
|
+
interface TabsController {
|
|
17
|
+
/** Select a tab by value */
|
|
18
|
+
select(value: string): void;
|
|
19
|
+
/** Currently selected value */
|
|
20
|
+
readonly value: string;
|
|
21
|
+
/** Update indicator position (call after layout changes) */
|
|
22
|
+
updateIndicator(): void;
|
|
47
23
|
/** Cleanup all event listeners */
|
|
48
24
|
destroy(): void;
|
|
49
25
|
}
|
|
50
26
|
/**
|
|
51
|
-
* Create a
|
|
27
|
+
* Create a tabs controller for a root element
|
|
28
|
+
*
|
|
29
|
+
* ## Events
|
|
30
|
+
* - **Outbound** `tabs:change` (on root): Fires when selected tab changes.
|
|
31
|
+
* `event.detail: { value: string }`
|
|
32
|
+
* - **Inbound** `tabs:select` (on root): Select a tab programmatically.
|
|
33
|
+
* `event.detail: { value: string } | string` (fallback: `event.currentTarget.dataset.value`)
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```js
|
|
37
|
+
* // Listen for tab changes
|
|
38
|
+
* root.addEventListener("tabs:change", (e) => console.log(e.detail.value));
|
|
39
|
+
* // Select a tab from outside (object or string detail)
|
|
40
|
+
* root.dispatchEvent(new CustomEvent("tabs:select", { detail: { value: "two" } }));
|
|
41
|
+
* root.dispatchEvent(new CustomEvent("tabs:select", { detail: "two" }));
|
|
42
|
+
* ```
|
|
52
43
|
*
|
|
53
44
|
* Expected markup:
|
|
54
45
|
* ```html
|
|
55
|
-
* <div data-slot="
|
|
56
|
-
* <
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
* <button data-slot="popover-close">Close</button>
|
|
46
|
+
* <div data-slot="tabs" data-default-value="two">
|
|
47
|
+
* <div data-slot="tabs-list">
|
|
48
|
+
* <button data-slot="tabs-trigger" data-value="one">Tab One</button>
|
|
49
|
+
* <button data-slot="tabs-trigger" data-value="two">Tab Two</button>
|
|
60
50
|
* </div>
|
|
51
|
+
* <div data-slot="tabs-content" data-value="one">Content One</div>
|
|
52
|
+
* <div data-slot="tabs-content" data-value="two">Content Two</div>
|
|
61
53
|
* </div>
|
|
62
54
|
* ```
|
|
63
55
|
*/
|
|
64
|
-
declare function
|
|
56
|
+
declare function createTabs(root: Element, options?: TabsOptions): TabsController;
|
|
65
57
|
/**
|
|
66
|
-
* Find and bind all
|
|
58
|
+
* Find and bind all tabs components in a scope
|
|
67
59
|
* Returns array of controllers for programmatic access
|
|
68
60
|
*/
|
|
69
|
-
declare function create(scope?: ParentNode):
|
|
61
|
+
declare function create(scope?: ParentNode): TabsController[];
|
|
70
62
|
//#endregion
|
|
71
|
-
export {
|
|
63
|
+
export { createTabs as i, TabsOptions as n, create as r, TabsController as t };
|
package/dist/index7.d.ts
CHANGED
|
@@ -1,71 +1,63 @@
|
|
|
1
|
-
//#region ../
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
interface PopoverOptions {
|
|
10
|
-
/** Initial open state */
|
|
11
|
-
defaultOpen?: boolean;
|
|
1
|
+
//#region ../tabs/src/index.d.ts
|
|
2
|
+
interface TabsOptions {
|
|
3
|
+
/** Initial selected tab value */
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
/** Callback when selected tab changes */
|
|
6
|
+
onValueChange?: (value: string) => void;
|
|
7
|
+
/** Tab orientation for keyboard navigation */
|
|
8
|
+
orientation?: "horizontal" | "vertical";
|
|
12
9
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
10
|
+
* Activation mode for keyboard navigation
|
|
11
|
+
* - "auto": Arrow keys select tabs immediately (default)
|
|
12
|
+
* - "manual": Arrow keys move focus, Enter/Space activates
|
|
15
13
|
*/
|
|
16
|
-
|
|
17
|
-
/** The preferred side of the trigger to render against. @default "bottom" */
|
|
18
|
-
side?: PopoverSide;
|
|
19
|
-
/** The preferred alignment against the trigger. @default "center" */
|
|
20
|
-
align?: PopoverAlign;
|
|
21
|
-
/** The distance in pixels from the trigger. @default 4 */
|
|
22
|
-
sideOffset?: number;
|
|
23
|
-
/** Offset in pixels from the alignment edge. @default 0 */
|
|
24
|
-
alignOffset?: number;
|
|
25
|
-
/** When true, flips/shifts content to avoid viewport collisions. @default true */
|
|
26
|
-
avoidCollisions?: boolean;
|
|
27
|
-
/** Viewport padding used when avoiding collisions. @default 8 */
|
|
28
|
-
collisionPadding?: number;
|
|
29
|
-
/** Callback when open state changes */
|
|
30
|
-
onOpenChange?: (open: boolean) => void;
|
|
31
|
-
/** Portal content to body while open. @default true */
|
|
32
|
-
portal?: boolean;
|
|
33
|
-
/** Close when clicking outside */
|
|
34
|
-
closeOnClickOutside?: boolean;
|
|
35
|
-
/** Close when pressing Escape */
|
|
36
|
-
closeOnEscape?: boolean;
|
|
14
|
+
activationMode?: "auto" | "manual";
|
|
37
15
|
}
|
|
38
|
-
interface
|
|
39
|
-
/**
|
|
40
|
-
|
|
41
|
-
/**
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
|
|
45
|
-
/** Current open state */
|
|
46
|
-
readonly isOpen: boolean;
|
|
16
|
+
interface TabsController {
|
|
17
|
+
/** Select a tab by value */
|
|
18
|
+
select(value: string): void;
|
|
19
|
+
/** Currently selected value */
|
|
20
|
+
readonly value: string;
|
|
21
|
+
/** Update indicator position (call after layout changes) */
|
|
22
|
+
updateIndicator(): void;
|
|
47
23
|
/** Cleanup all event listeners */
|
|
48
24
|
destroy(): void;
|
|
49
25
|
}
|
|
50
26
|
/**
|
|
51
|
-
* Create a
|
|
27
|
+
* Create a tabs controller for a root element
|
|
28
|
+
*
|
|
29
|
+
* ## Events
|
|
30
|
+
* - **Outbound** `tabs:change` (on root): Fires when selected tab changes.
|
|
31
|
+
* `event.detail: { value: string }`
|
|
32
|
+
* - **Inbound** `tabs:select` (on root): Select a tab programmatically.
|
|
33
|
+
* `event.detail: { value: string } | string` (fallback: `event.currentTarget.dataset.value`)
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```js
|
|
37
|
+
* // Listen for tab changes
|
|
38
|
+
* root.addEventListener("tabs:change", (e) => console.log(e.detail.value));
|
|
39
|
+
* // Select a tab from outside (object or string detail)
|
|
40
|
+
* root.dispatchEvent(new CustomEvent("tabs:select", { detail: { value: "two" } }));
|
|
41
|
+
* root.dispatchEvent(new CustomEvent("tabs:select", { detail: "two" }));
|
|
42
|
+
* ```
|
|
52
43
|
*
|
|
53
44
|
* Expected markup:
|
|
54
45
|
* ```html
|
|
55
|
-
* <div data-slot="
|
|
56
|
-
* <
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
* <button data-slot="popover-close">Close</button>
|
|
46
|
+
* <div data-slot="tabs" data-default-value="two">
|
|
47
|
+
* <div data-slot="tabs-list">
|
|
48
|
+
* <button data-slot="tabs-trigger" data-value="one">Tab One</button>
|
|
49
|
+
* <button data-slot="tabs-trigger" data-value="two">Tab Two</button>
|
|
60
50
|
* </div>
|
|
51
|
+
* <div data-slot="tabs-content" data-value="one">Content One</div>
|
|
52
|
+
* <div data-slot="tabs-content" data-value="two">Content Two</div>
|
|
61
53
|
* </div>
|
|
62
54
|
* ```
|
|
63
55
|
*/
|
|
64
|
-
declare function
|
|
56
|
+
declare function createTabs(root: Element, options?: TabsOptions): TabsController;
|
|
65
57
|
/**
|
|
66
|
-
* Find and bind all
|
|
58
|
+
* Find and bind all tabs components in a scope
|
|
67
59
|
* Returns array of controllers for programmatic access
|
|
68
60
|
*/
|
|
69
|
-
declare function create(scope?: ParentNode):
|
|
61
|
+
declare function create(scope?: ParentNode): TabsController[];
|
|
70
62
|
//#endregion
|
|
71
|
-
export {
|
|
63
|
+
export { createTabs as i, TabsOptions as n, create as r, TabsController as t };
|
package/dist/index8.d.cts
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
//#region ../
|
|
2
|
-
type
|
|
3
|
-
type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
//#region ../popover/src/index.d.ts
|
|
2
|
+
type PopoverSide = "top" | "right" | "bottom" | "left";
|
|
3
|
+
type PopoverAlign = "start" | "center" | "end";
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `PopoverSide` and `side` option instead.
|
|
6
|
+
* Kept for backward compatibility and planned for removal in the next major.
|
|
7
|
+
*/
|
|
8
|
+
type PopoverPosition = PopoverSide;
|
|
9
|
+
interface PopoverOptions {
|
|
10
|
+
/** Initial open state */
|
|
11
|
+
defaultOpen?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Use `side` instead.
|
|
14
|
+
* TODO(next-major): remove `position` option support and migrate callers to `side`.
|
|
15
|
+
*/
|
|
16
|
+
position?: PopoverPosition;
|
|
17
|
+
/** The preferred side of the trigger to render against. @default "bottom" */
|
|
18
|
+
side?: PopoverSide;
|
|
19
|
+
/** The preferred alignment against the trigger. @default "center" */
|
|
20
|
+
align?: PopoverAlign;
|
|
21
|
+
/** The distance in pixels from the trigger. @default 4 */
|
|
15
22
|
sideOffset?: number;
|
|
16
|
-
/**
|
|
23
|
+
/** Offset in pixels from the alignment edge. @default 0 */
|
|
17
24
|
alignOffset?: number;
|
|
18
|
-
/**
|
|
25
|
+
/** When true, flips/shifts content to avoid viewport collisions. @default true */
|
|
19
26
|
avoidCollisions?: boolean;
|
|
20
|
-
/** Viewport
|
|
27
|
+
/** Viewport padding used when avoiding collisions. @default 8 */
|
|
21
28
|
collisionPadding?: number;
|
|
22
|
-
/**
|
|
23
|
-
portal?: boolean;
|
|
24
|
-
/** Callback when visibility changes */
|
|
29
|
+
/** Callback when open state changes */
|
|
25
30
|
onOpenChange?: (open: boolean) => void;
|
|
31
|
+
/** Portal content to body while open. @default true */
|
|
32
|
+
portal?: boolean;
|
|
33
|
+
/** Close when clicking outside */
|
|
34
|
+
closeOnClickOutside?: boolean;
|
|
35
|
+
/** Close when pressing Escape */
|
|
36
|
+
closeOnEscape?: boolean;
|
|
26
37
|
}
|
|
27
|
-
interface
|
|
28
|
-
/**
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
|
|
32
|
-
/**
|
|
38
|
+
interface PopoverController {
|
|
39
|
+
/** Open the popover */
|
|
40
|
+
open(): void;
|
|
41
|
+
/** Close the popover */
|
|
42
|
+
close(): void;
|
|
43
|
+
/** Toggle the popover */
|
|
44
|
+
toggle(): void;
|
|
45
|
+
/** Current open state */
|
|
33
46
|
readonly isOpen: boolean;
|
|
34
47
|
/** Cleanup all event listeners */
|
|
35
48
|
destroy(): void;
|
|
36
49
|
}
|
|
37
50
|
/**
|
|
38
|
-
* Create a
|
|
51
|
+
* Create a popover controller for a root element
|
|
39
52
|
*
|
|
40
53
|
* Expected markup:
|
|
41
54
|
* ```html
|
|
42
|
-
* <div data-slot="
|
|
43
|
-
* <button data-slot="
|
|
44
|
-
* <div data-slot="
|
|
45
|
-
*
|
|
55
|
+
* <div data-slot="popover">
|
|
56
|
+
* <button data-slot="popover-trigger">Open</button>
|
|
57
|
+
* <div data-slot="popover-content">
|
|
58
|
+
* Popover content
|
|
59
|
+
* <button data-slot="popover-close">Close</button>
|
|
46
60
|
* </div>
|
|
47
61
|
* </div>
|
|
48
62
|
* ```
|
|
49
|
-
*
|
|
50
|
-
* Placement data attributes are resolved as: content -> authored positioner -> root.
|
|
51
|
-
* - `data-side`: 'top' | 'right' | 'bottom' | 'left' (bind-time preferred side)
|
|
52
|
-
* - `data-align`: 'start' | 'center' | 'end' (bind-time preferred align)
|
|
53
|
-
* - `data-side-offset`: number (px)
|
|
54
|
-
* - `data-align-offset`: number (px)
|
|
55
|
-
* - `data-avoid-collisions`: boolean
|
|
56
|
-
* - `data-collision-padding`: number (px)
|
|
57
|
-
* - `data-delay`: number (ms)
|
|
58
|
-
* - `data-skip-delay-duration`: number (ms)
|
|
59
|
-
*
|
|
60
|
-
* Opens on hover (non-touch) and focus. Touch devices: focus-only.
|
|
61
|
-
* Content is hoverable: moving pointer from trigger to content keeps it open.
|
|
62
|
-
* Tooltip stays open while trigger has focus, even if pointer leaves.
|
|
63
63
|
*/
|
|
64
|
-
declare function
|
|
64
|
+
declare function createPopover(root: Element, options?: PopoverOptions): PopoverController;
|
|
65
65
|
/**
|
|
66
|
-
* Find and bind all
|
|
66
|
+
* Find and bind all popover components in a scope
|
|
67
67
|
* Returns array of controllers for programmatic access
|
|
68
68
|
*/
|
|
69
|
-
declare function create(scope?: ParentNode):
|
|
69
|
+
declare function create(scope?: ParentNode): PopoverController[];
|
|
70
70
|
//#endregion
|
|
71
|
-
export {
|
|
71
|
+
export { PopoverSide as a, PopoverPosition as i, PopoverController as n, create as o, PopoverOptions as r, createPopover as s, PopoverAlign as t };
|
package/dist/index8.d.ts
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
//#region ../
|
|
2
|
-
type
|
|
3
|
-
type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
//#region ../popover/src/index.d.ts
|
|
2
|
+
type PopoverSide = "top" | "right" | "bottom" | "left";
|
|
3
|
+
type PopoverAlign = "start" | "center" | "end";
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `PopoverSide` and `side` option instead.
|
|
6
|
+
* Kept for backward compatibility and planned for removal in the next major.
|
|
7
|
+
*/
|
|
8
|
+
type PopoverPosition = PopoverSide;
|
|
9
|
+
interface PopoverOptions {
|
|
10
|
+
/** Initial open state */
|
|
11
|
+
defaultOpen?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated Use `side` instead.
|
|
14
|
+
* TODO(next-major): remove `position` option support and migrate callers to `side`.
|
|
15
|
+
*/
|
|
16
|
+
position?: PopoverPosition;
|
|
17
|
+
/** The preferred side of the trigger to render against. @default "bottom" */
|
|
18
|
+
side?: PopoverSide;
|
|
19
|
+
/** The preferred alignment against the trigger. @default "center" */
|
|
20
|
+
align?: PopoverAlign;
|
|
21
|
+
/** The distance in pixels from the trigger. @default 4 */
|
|
15
22
|
sideOffset?: number;
|
|
16
|
-
/**
|
|
23
|
+
/** Offset in pixels from the alignment edge. @default 0 */
|
|
17
24
|
alignOffset?: number;
|
|
18
|
-
/**
|
|
25
|
+
/** When true, flips/shifts content to avoid viewport collisions. @default true */
|
|
19
26
|
avoidCollisions?: boolean;
|
|
20
|
-
/** Viewport
|
|
27
|
+
/** Viewport padding used when avoiding collisions. @default 8 */
|
|
21
28
|
collisionPadding?: number;
|
|
22
|
-
/**
|
|
23
|
-
portal?: boolean;
|
|
24
|
-
/** Callback when visibility changes */
|
|
29
|
+
/** Callback when open state changes */
|
|
25
30
|
onOpenChange?: (open: boolean) => void;
|
|
31
|
+
/** Portal content to body while open. @default true */
|
|
32
|
+
portal?: boolean;
|
|
33
|
+
/** Close when clicking outside */
|
|
34
|
+
closeOnClickOutside?: boolean;
|
|
35
|
+
/** Close when pressing Escape */
|
|
36
|
+
closeOnEscape?: boolean;
|
|
26
37
|
}
|
|
27
|
-
interface
|
|
28
|
-
/**
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
|
|
32
|
-
/**
|
|
38
|
+
interface PopoverController {
|
|
39
|
+
/** Open the popover */
|
|
40
|
+
open(): void;
|
|
41
|
+
/** Close the popover */
|
|
42
|
+
close(): void;
|
|
43
|
+
/** Toggle the popover */
|
|
44
|
+
toggle(): void;
|
|
45
|
+
/** Current open state */
|
|
33
46
|
readonly isOpen: boolean;
|
|
34
47
|
/** Cleanup all event listeners */
|
|
35
48
|
destroy(): void;
|
|
36
49
|
}
|
|
37
50
|
/**
|
|
38
|
-
* Create a
|
|
51
|
+
* Create a popover controller for a root element
|
|
39
52
|
*
|
|
40
53
|
* Expected markup:
|
|
41
54
|
* ```html
|
|
42
|
-
* <div data-slot="
|
|
43
|
-
* <button data-slot="
|
|
44
|
-
* <div data-slot="
|
|
45
|
-
*
|
|
55
|
+
* <div data-slot="popover">
|
|
56
|
+
* <button data-slot="popover-trigger">Open</button>
|
|
57
|
+
* <div data-slot="popover-content">
|
|
58
|
+
* Popover content
|
|
59
|
+
* <button data-slot="popover-close">Close</button>
|
|
46
60
|
* </div>
|
|
47
61
|
* </div>
|
|
48
62
|
* ```
|
|
49
|
-
*
|
|
50
|
-
* Placement data attributes are resolved as: content -> authored positioner -> root.
|
|
51
|
-
* - `data-side`: 'top' | 'right' | 'bottom' | 'left' (bind-time preferred side)
|
|
52
|
-
* - `data-align`: 'start' | 'center' | 'end' (bind-time preferred align)
|
|
53
|
-
* - `data-side-offset`: number (px)
|
|
54
|
-
* - `data-align-offset`: number (px)
|
|
55
|
-
* - `data-avoid-collisions`: boolean
|
|
56
|
-
* - `data-collision-padding`: number (px)
|
|
57
|
-
* - `data-delay`: number (ms)
|
|
58
|
-
* - `data-skip-delay-duration`: number (ms)
|
|
59
|
-
*
|
|
60
|
-
* Opens on hover (non-touch) and focus. Touch devices: focus-only.
|
|
61
|
-
* Content is hoverable: moving pointer from trigger to content keeps it open.
|
|
62
|
-
* Tooltip stays open while trigger has focus, even if pointer leaves.
|
|
63
63
|
*/
|
|
64
|
-
declare function
|
|
64
|
+
declare function createPopover(root: Element, options?: PopoverOptions): PopoverController;
|
|
65
65
|
/**
|
|
66
|
-
* Find and bind all
|
|
66
|
+
* Find and bind all popover components in a scope
|
|
67
67
|
* Returns array of controllers for programmatic access
|
|
68
68
|
*/
|
|
69
|
-
declare function create(scope?: ParentNode):
|
|
69
|
+
declare function create(scope?: ParentNode): PopoverController[];
|
|
70
70
|
//#endregion
|
|
71
|
-
export {
|
|
71
|
+
export { PopoverSide as a, PopoverPosition as i, PopoverController as n, create as o, PopoverOptions as r, createPopover as s, PopoverAlign as t };
|