phoenix_duskmoon 9.12.3 → 9.13.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.
|
@@ -55,7 +55,6 @@ el-dm-nested-menu,
|
|
|
55
55
|
el-dm-otp-input,
|
|
56
56
|
el-dm-pagination,
|
|
57
57
|
el-dm-pin-input,
|
|
58
|
-
el-dm-popover,
|
|
59
58
|
el-dm-pro-data-grid,
|
|
60
59
|
el-dm-progress,
|
|
61
60
|
el-dm-segment-control,
|
|
@@ -66,8 +65,7 @@ el-dm-switch,
|
|
|
66
65
|
el-dm-table,
|
|
67
66
|
el-dm-tabs,
|
|
68
67
|
el-dm-theme-controller,
|
|
69
|
-
el-dm-time-input
|
|
70
|
-
el-dm-tooltip {
|
|
68
|
+
el-dm-time-input {
|
|
71
69
|
/* Brand colors */
|
|
72
70
|
--color-primary: inherit;
|
|
73
71
|
--color-primary-content: inherit;
|
|
@@ -222,23 +220,3 @@ el-dm-bottom-navigation {
|
|
|
222
220
|
--color-border: var(--color-outline-variant);
|
|
223
221
|
--color-text-secondary: var(--color-on-surface-variant);
|
|
224
222
|
}
|
|
225
|
-
|
|
226
|
-
/**
|
|
227
|
-
* el-dm-popover arrow fix for left/right placements.
|
|
228
|
-
* Upstream bug: shadow DOM CSS uses wrong border-hiding for left/right
|
|
229
|
-
* arrow directions (copies top/bottom values instead of computing correctly).
|
|
230
|
-
* Fix via ::part(arrow) until upstream resolves it.
|
|
231
|
-
*/
|
|
232
|
-
el-dm-popover[placement^="left"]::part(arrow) {
|
|
233
|
-
border-top: 1px solid var(--color-outline) !important;
|
|
234
|
-
border-right: 1px solid var(--color-outline) !important;
|
|
235
|
-
border-bottom: none !important;
|
|
236
|
-
border-left: none !important;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
el-dm-popover[placement^="right"]::part(arrow) {
|
|
240
|
-
border-bottom: 1px solid var(--color-outline) !important;
|
|
241
|
-
border-left: 1px solid var(--color-outline) !important;
|
|
242
|
-
border-top: none !important;
|
|
243
|
-
border-right: none !important;
|
|
244
|
-
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export function syncPopoverState(element) {
|
|
2
|
+
const controlledOpen = element.dataset.open;
|
|
3
|
+
|
|
4
|
+
if (controlledOpen !== "true" && controlledOpen !== "false") return;
|
|
5
|
+
if (!("showPopover" in element) || !("hidePopover" in element)) return;
|
|
6
|
+
|
|
7
|
+
const open = element.matches(":popover-open");
|
|
8
|
+
|
|
9
|
+
if (controlledOpen === "true" && !open) element.showPopover();
|
|
10
|
+
if (controlledOpen === "false" && open) element.hidePopover();
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const DuskmoonPopover = {
|
|
14
|
+
mounted() {
|
|
15
|
+
syncPopoverState(this.el);
|
|
16
|
+
},
|
|
17
|
+
|
|
18
|
+
updated() {
|
|
19
|
+
syncPopoverState(this.el);
|
|
20
|
+
},
|
|
21
|
+
};
|
|
@@ -43,3 +43,6 @@ export declare const Spotlight: LiveViewHook<HTMLDialogElement>;
|
|
|
43
43
|
|
|
44
44
|
/** Page-header visibility observer. */
|
|
45
45
|
export declare const PageHeader: LiveViewHook;
|
|
46
|
+
|
|
47
|
+
/** Synchronizes an explicitly controlled native popover with LiveView state. */
|
|
48
|
+
export declare const DuskmoonPopover: LiveViewHook<HTMLElement>;
|
package/assets/js/hooks/index.js
CHANGED
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
* - ThemeSwitcher: Theme toggle with localStorage persistence
|
|
23
23
|
* - Spotlight: Keyboard shortcut (Cmd/Ctrl+K) for spotlight search
|
|
24
24
|
* - PageHeader: Intersection observer for scroll-based effects
|
|
25
|
+
* - DuskmoonPopover: Optional server-controlled native popover state
|
|
25
26
|
*/
|
|
26
27
|
|
|
27
28
|
// Core hooks for custom element integration
|
|
@@ -31,3 +32,4 @@ export { WebComponentHook, FormElementHook } from '../phoenix_duskmoon.js';
|
|
|
31
32
|
export { ThemeSwitcher } from './theme_switcher.js';
|
|
32
33
|
export { Spotlight } from './spotlight.js';
|
|
33
34
|
export { PageHeader } from './page_header.js';
|
|
35
|
+
export { DuskmoonPopover } from './duskmoon_popover.js';
|