phoenix_duskmoon 9.12.2 → 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.
package/README.md
CHANGED
|
@@ -98,6 +98,7 @@ Components that require hooks:
|
|
|
98
98
|
<.dm_btn variant="primary">Click me</.dm_btn>
|
|
99
99
|
<.dm_btn variant="secondary" loading={@loading}>Loading</.dm_btn>
|
|
100
100
|
<.dm_btn variant="error" shape="circle">×</.dm_btn>
|
|
101
|
+
<.dm_btn native_submit variant="primary">Submit without JavaScript</.dm_btn>
|
|
101
102
|
```
|
|
102
103
|
|
|
103
104
|
### Cards
|
|
@@ -135,6 +136,7 @@ Components that require hooks:
|
|
|
135
136
|
| `shape` | `square`, `circle` |
|
|
136
137
|
| `loading` | boolean |
|
|
137
138
|
| `disabled`| boolean |
|
|
139
|
+
| `native_submit` | boolean; render a native no-JavaScript submit control |
|
|
138
140
|
| `class` | additional CSS classes |
|
|
139
141
|
|
|
140
142
|
|
|
@@ -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';
|