@jay-framework/ui-kit 0.16.4 → 0.17.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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Popover Menu
|
|
2
2
|
|
|
3
|
-
Dropdown menu that opens on hover. Headless component — requires import. For click-triggered popups, use `click-popover.md` instead (pure HTML).
|
|
3
|
+
Dropdown menu that opens on hover and closes when the mouse leaves. Headless component — requires import. For click-triggered popups, use `click-popover.md` instead (pure HTML).
|
|
4
4
|
|
|
5
5
|
## Import
|
|
6
6
|
|
|
@@ -32,7 +32,7 @@ Dropdown menu that opens on hover. Headless component — requires import. For c
|
|
|
32
32
|
|
|
33
33
|
## CSS
|
|
34
34
|
|
|
35
|
-
Position the popover below the trigger using CSS Anchor Positioning. The component
|
|
35
|
+
Position the popover below the trigger using CSS Anchor Positioning. The component shows the popover on hover and hides it with a short delay (150ms) when the mouse leaves both the trigger and the popover. Moving from the trigger into the popover keeps it open. A JS fallback handles positioning in browsers without anchor support.
|
|
36
36
|
|
|
37
37
|
```css
|
|
38
38
|
/* Anchor the trigger */
|
package/dist/index.client.js
CHANGED
|
@@ -2,7 +2,24 @@ import { makeJayStackComponent } from "@jay-framework/fullstack-component";
|
|
|
2
2
|
import { createSignal } from "@jay-framework/component";
|
|
3
3
|
const supportsAnchor = typeof CSS !== "undefined" && CSS.supports("anchor-name", "--x");
|
|
4
4
|
const popoverMenu = makeJayStackComponent().withProps().withInteractive(function PopoverMenu(props, refs) {
|
|
5
|
+
let closeTimer = null;
|
|
6
|
+
function cancelClose() {
|
|
7
|
+
if (closeTimer) {
|
|
8
|
+
clearTimeout(closeTimer);
|
|
9
|
+
closeTimer = null;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
function scheduleClose() {
|
|
13
|
+
cancelClose();
|
|
14
|
+
closeTimer = setTimeout(() => {
|
|
15
|
+
refs.popover.exec$((el) => {
|
|
16
|
+
el.hidePopover();
|
|
17
|
+
});
|
|
18
|
+
closeTimer = null;
|
|
19
|
+
}, 150);
|
|
20
|
+
}
|
|
5
21
|
refs.trigger.onmouseenter(async () => {
|
|
22
|
+
cancelClose();
|
|
6
23
|
if (!supportsAnchor) {
|
|
7
24
|
const rect = await refs.trigger.exec$((el) => {
|
|
8
25
|
return el.getBoundingClientRect();
|
|
@@ -19,6 +36,15 @@ const popoverMenu = makeJayStackComponent().withProps().withInteractive(function
|
|
|
19
36
|
el.showPopover();
|
|
20
37
|
});
|
|
21
38
|
});
|
|
39
|
+
refs.trigger.onmouseleave(() => {
|
|
40
|
+
scheduleClose();
|
|
41
|
+
});
|
|
42
|
+
refs.popover.onmouseenter(() => {
|
|
43
|
+
cancelClose();
|
|
44
|
+
});
|
|
45
|
+
refs.popover.onmouseleave(() => {
|
|
46
|
+
scheduleClose();
|
|
47
|
+
});
|
|
22
48
|
return { render: () => ({}) };
|
|
23
49
|
});
|
|
24
50
|
const scrollCarousel = makeJayStackComponent().withProps().withInteractive(function ScrollCarousel(props, refs) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jay-framework/ui-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Headless UI primitives: popover menu, scroll carousel, clipboard copy",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -32,16 +32,16 @@
|
|
|
32
32
|
"test": ":"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@jay-framework/component": "^0.
|
|
36
|
-
"@jay-framework/fullstack-component": "^0.
|
|
37
|
-
"@jay-framework/reactive": "^0.
|
|
38
|
-
"@jay-framework/runtime": "^0.
|
|
39
|
-
"@jay-framework/stack-client-runtime": "^0.
|
|
35
|
+
"@jay-framework/component": "^0.17.0",
|
|
36
|
+
"@jay-framework/fullstack-component": "^0.17.0",
|
|
37
|
+
"@jay-framework/reactive": "^0.17.0",
|
|
38
|
+
"@jay-framework/runtime": "^0.17.0",
|
|
39
|
+
"@jay-framework/stack-client-runtime": "^0.17.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@jay-framework/compiler-jay-stack": "^0.
|
|
43
|
-
"@jay-framework/dev-environment": "^0.
|
|
44
|
-
"@jay-framework/jay-cli": "^0.
|
|
42
|
+
"@jay-framework/compiler-jay-stack": "^0.17.0",
|
|
43
|
+
"@jay-framework/dev-environment": "^0.17.0",
|
|
44
|
+
"@jay-framework/jay-cli": "^0.17.0",
|
|
45
45
|
"rimraf": "^5.0.5",
|
|
46
46
|
"typescript": "^5.3.3",
|
|
47
47
|
"vite": "^5.0.11"
|