phlex_kit 0.6.1 → 0.6.2
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.
- checksums.yaml +4 -4
- data/app/components/phlex_kit/menubar/menubar_controller.js +23 -1
- data/app/components/phlex_kit/navigation_menu/navigation_menu.rb +1 -1
- data/app/components/phlex_kit/navigation_menu/navigation_menu_content.rb +1 -1
- data/app/components/phlex_kit/navigation_menu/navigation_menu_link.rb +6 -2
- data/lib/phlex_kit/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3576ce7518698cab9760254370a3638cd956d71439cb43a1220e7be85a9d5801
|
|
4
|
+
data.tar.gz: 4a693e73b799c867cbf5f5ca445944c00b94eda166956daeccf026b8039b2898
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 20f2c2d06b70e1b1f91c69f10087b6e68664ee4e72114b896772daa5b5e4e23c3569376ffab7594c906d4a433f5cb92921c43daf9ef26e53cf7c65ab36bb1e49
|
|
7
|
+
data.tar.gz: 3dd1063bf407e48768cd39510af097a7a86a75420107941dd906efbbaae1ac32b4292128fe470a0a610b3b01362226664f6fd49f93e24ddc9a0796835c32c966
|
|
@@ -18,6 +18,10 @@ export default class extends Controller {
|
|
|
18
18
|
this.openMenu = null
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
disconnect() {
|
|
22
|
+
clearTimeout(this.graceTimer)
|
|
23
|
+
}
|
|
24
|
+
|
|
21
25
|
toggle(e) {
|
|
22
26
|
const menu = e.currentTarget.closest("[data-phlex-kit--menubar-target=\"menu\"]")
|
|
23
27
|
this.openMenu === menu ? this.close() : this.show(menu, true)
|
|
@@ -26,11 +30,28 @@ export default class extends Controller {
|
|
|
26
30
|
// Hover: switches between menus while one is open (menubar), or opens
|
|
27
31
|
// directly when the bar declares data-hover-open (navigation menu).
|
|
28
32
|
switch(e) {
|
|
33
|
+
clearTimeout(this.graceTimer)
|
|
29
34
|
const menu = e.currentTarget.closest("[data-phlex-kit--menubar-target=\"menu\"]")
|
|
30
|
-
if (this.element.dataset.hoverOpen !== undefined)
|
|
35
|
+
if (this.element.dataset.hoverOpen !== undefined) {
|
|
36
|
+
if (!menu || !this.panel(menu)) return this.closeSoon() // link, no panel
|
|
37
|
+
return this.show(menu)
|
|
38
|
+
}
|
|
39
|
+
if (!menu) return this.close()
|
|
31
40
|
if (this.openMenu && this.openMenu !== menu) this.show(menu)
|
|
32
41
|
}
|
|
33
42
|
|
|
43
|
+
// Hover closes go through a short grace period so a diagonal pointer path
|
|
44
|
+
// that clips a sibling link (or briefly exits the nav) on its way to the
|
|
45
|
+
// panel doesn't slam it shut; reaching the panel or a trigger cancels.
|
|
46
|
+
closeSoon() {
|
|
47
|
+
clearTimeout(this.graceTimer)
|
|
48
|
+
this.graceTimer = setTimeout(() => this.close(), 150)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
cancelClose() {
|
|
52
|
+
clearTimeout(this.graceTimer)
|
|
53
|
+
}
|
|
54
|
+
|
|
34
55
|
show(menu, focus = false) {
|
|
35
56
|
if (this.openMenu !== menu) {
|
|
36
57
|
this.close()
|
|
@@ -42,6 +63,7 @@ export default class extends Controller {
|
|
|
42
63
|
}
|
|
43
64
|
|
|
44
65
|
close(opts = {}) {
|
|
66
|
+
clearTimeout(this.graceTimer)
|
|
45
67
|
const menu = this.openMenu
|
|
46
68
|
if (!menu) return
|
|
47
69
|
const panel = this.panel(menu)
|
|
@@ -15,7 +15,7 @@ module PhlexKit
|
|
|
15
15
|
data: {
|
|
16
16
|
controller: "phlex-kit--menubar",
|
|
17
17
|
hover_open: true,
|
|
18
|
-
action: "click@window->phlex-kit--menubar#onClickOutside keydown.esc->phlex-kit--menubar#close mouseleave->phlex-kit--menubar#
|
|
18
|
+
action: "click@window->phlex-kit--menubar#onClickOutside keydown.esc->phlex-kit--menubar#close mouseleave->phlex-kit--menubar#closeSoon"
|
|
19
19
|
}
|
|
20
20
|
}, @attrs), &)
|
|
21
21
|
end
|
|
@@ -5,7 +5,7 @@ module PhlexKit
|
|
|
5
5
|
def view_template(&)
|
|
6
6
|
# No role="menu" here — the panel holds plain links, not menuitems
|
|
7
7
|
# (Radix/shadcn ship no menu role on NavigationMenu content either).
|
|
8
|
-
div(**mix({ class: "pk-navigation-menu-content", popover: "manual" }, @attrs), &)
|
|
8
|
+
div(**mix({ class: "pk-navigation-menu-content", popover: "manual", data: { action: "mouseenter->phlex-kit--menubar#cancelClose" } }, @attrs), &)
|
|
9
9
|
end
|
|
10
10
|
end
|
|
11
11
|
end
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
module PhlexKit
|
|
2
|
-
# Plain link item (top-level or inside a panel).
|
|
2
|
+
# Plain link item (top-level or inside a panel). Hover fires #switch like a
|
|
3
|
+
# trigger: for a TOP-LEVEL link the closest menu item has no panel, so an
|
|
4
|
+
# open sibling panel closes; for a link INSIDE a panel the closest item IS
|
|
5
|
+
# the open menu, so switch is a no-op and the panel stays. See
|
|
6
|
+
# navigation_menu.rb.
|
|
3
7
|
class NavigationMenuLink < BaseComponent
|
|
4
8
|
def initialize(href: "#", **attrs)
|
|
5
9
|
@href = href
|
|
@@ -7,7 +11,7 @@ module PhlexKit
|
|
|
7
11
|
end
|
|
8
12
|
|
|
9
13
|
def view_template(&)
|
|
10
|
-
a(**mix({ class: "pk-navigation-menu-link", href: @href }, @attrs), &)
|
|
14
|
+
a(**mix({ class: "pk-navigation-menu-link", href: @href, data: { action: "mouseenter->phlex-kit--menubar#switch" } }, @attrs), &)
|
|
11
15
|
end
|
|
12
16
|
end
|
|
13
17
|
end
|
data/lib/phlex_kit/version.rb
CHANGED