@xenterprises/nuxt-x-marketing 1.10.0 → 1.11.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/CHANGELOG.md +14 -0
- package/app/components/X/X/Header/Nav/index.vue +86 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -30,6 +30,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
30
30
|
section and its sample product data were dropped with them. Every other section of the
|
|
31
31
|
demo page is unchanged.
|
|
32
32
|
|
|
33
|
+
## [1.11.0] - 2026-10-12
|
|
34
|
+
|
|
35
|
+
Additive; menus with only flat children render byte-identical to 1.10.0.
|
|
36
|
+
|
|
37
|
+
### Added
|
|
38
|
+
|
|
39
|
+
- **`XXHeaderNav` grouped dropdowns**: an item's `children` may be
|
|
40
|
+
`[{ heading, links: [{ label, to, target? }] }]`. Desktop renders each group as a
|
|
41
|
+
`role="group"` column labelled by its heading inside the Nuxt UI dropdown (Enter/Space opens,
|
|
42
|
+
Tab moves through links, Escape closes and returns focus). Mobile renders each group as a
|
|
43
|
+
nested, open-by-default section (heading button with `aria-expanded`, links in a labelled region).
|
|
44
|
+
When groups are present the dropdown panel sizes to its content and flat sibling dropdowns get a
|
|
45
|
+
16rem panel.
|
|
46
|
+
|
|
33
47
|
## [1.10.0] - 2026-10-12
|
|
34
48
|
|
|
35
49
|
Additive; existing output (including markdown tables) is identical to 1.9.0.
|
|
@@ -16,7 +16,45 @@
|
|
|
16
16
|
<span v-else>{{ header?.logo?.alt }}</span>
|
|
17
17
|
</template>
|
|
18
18
|
|
|
19
|
-
<UNavigationMenu
|
|
19
|
+
<UNavigationMenu
|
|
20
|
+
:items="desktopLinks"
|
|
21
|
+
:ui="desktopUi"
|
|
22
|
+
>
|
|
23
|
+
<template #x-nav-groups-content="{ item }">
|
|
24
|
+
<div
|
|
25
|
+
class="grid gap-6 p-4"
|
|
26
|
+
:class="item.xGroupsGrid"
|
|
27
|
+
>
|
|
28
|
+
<div
|
|
29
|
+
v-for="(group, gi) in item.xGroups"
|
|
30
|
+
:key="gi"
|
|
31
|
+
role="group"
|
|
32
|
+
:aria-labelledby="`${item.xGroupsId}-${gi}`"
|
|
33
|
+
>
|
|
34
|
+
<p
|
|
35
|
+
:id="`${item.xGroupsId}-${gi}`"
|
|
36
|
+
class="mb-2 px-2 text-xs font-semibold uppercase tracking-wide text-muted"
|
|
37
|
+
>
|
|
38
|
+
{{ group.heading }}
|
|
39
|
+
</p>
|
|
40
|
+
<ul class="space-y-0.5">
|
|
41
|
+
<li
|
|
42
|
+
v-for="(link, li) in group.links"
|
|
43
|
+
:key="li"
|
|
44
|
+
>
|
|
45
|
+
<ULink
|
|
46
|
+
:to="link.to"
|
|
47
|
+
:target="link.target"
|
|
48
|
+
class="block rounded-md px-2 py-1.5 text-sm text-default hover:bg-elevated focus-visible:outline-2 focus-visible:outline-primary"
|
|
49
|
+
>
|
|
50
|
+
{{ link.label }}
|
|
51
|
+
</ULink>
|
|
52
|
+
</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</template>
|
|
57
|
+
</UNavigationMenu>
|
|
20
58
|
|
|
21
59
|
<template #right>
|
|
22
60
|
<span v-for="(button, index) in header?.nav?.buttons" :key="index">
|
|
@@ -33,7 +71,7 @@
|
|
|
33
71
|
</template>
|
|
34
72
|
|
|
35
73
|
<template #body>
|
|
36
|
-
<UNavigationMenu orientation="vertical" :items="
|
|
74
|
+
<UNavigationMenu orientation="vertical" :items="mobileLinks" class="-mx-2.5" />
|
|
37
75
|
<div class="mt-5 space-y-2">
|
|
38
76
|
<UButton
|
|
39
77
|
v-for="(button, index) in header?.nav?.buttons"
|
|
@@ -61,4 +99,50 @@
|
|
|
61
99
|
const appConfig = useAppConfig();
|
|
62
100
|
const header = appConfig?.xMarketing?.header;
|
|
63
101
|
const links = header?.nav?.links || [];
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* 1.11.0: grouped dropdowns. An item's children may be [{ heading, links: [{ label, to }] }].
|
|
105
|
+
* Desktop renders labelled role="group" columns in the dropdown; mobile renders each group
|
|
106
|
+
* as a nested, open-by-default section. Flat children are passed through untouched.
|
|
107
|
+
*/
|
|
108
|
+
const isGrouped = (item) =>
|
|
109
|
+
Array.isArray(item?.children) && item.children.length > 0 && item.children.every((c) => c && Array.isArray(c.links));
|
|
110
|
+
const hasGroups = links.some(isGrouped);
|
|
111
|
+
const gridCols = { 1: "", 2: "sm:grid-cols-2 w-[32rem]", 3: "sm:grid-cols-3 w-[44rem]", 4: "sm:grid-cols-4 w-[56rem]" };
|
|
112
|
+
const desktopLinks = hasGroups
|
|
113
|
+
? links.map((item, i) => {
|
|
114
|
+
if (!isGrouped(item)) {
|
|
115
|
+
// flat dropdowns next to grouped ones get a fixed panel width (the viewport now sizes to content)
|
|
116
|
+
return item.children?.length ? { ...item, ui: { content: "sm:w-64", ...item.ui } } : item;
|
|
117
|
+
}
|
|
118
|
+
const { children, ...rest } = item;
|
|
119
|
+
return {
|
|
120
|
+
...rest,
|
|
121
|
+
slot: "x-nav-groups",
|
|
122
|
+
xGroups: children,
|
|
123
|
+
xGroupsId: `x-nav-group-${i}`,
|
|
124
|
+
xGroupsGrid: gridCols[Math.min(children.length, 4)] || "w-64",
|
|
125
|
+
ui: { content: "sm:w-auto", ...item.ui },
|
|
126
|
+
};
|
|
127
|
+
})
|
|
128
|
+
: links;
|
|
129
|
+
// Grouped panels are wider than the nav bar, so let the viewport size to its content
|
|
130
|
+
// (only when groups exist; flat-only menus get ui undefined and render exactly as before).
|
|
131
|
+
const desktopUi = hasGroups
|
|
132
|
+
? { viewport: "sm:w-(--reka-navigation-menu-viewport-width) shrink-0" }
|
|
133
|
+
: undefined;
|
|
134
|
+
const mobileLinks = hasGroups
|
|
135
|
+
? links.map((item) =>
|
|
136
|
+
isGrouped(item)
|
|
137
|
+
? {
|
|
138
|
+
...item,
|
|
139
|
+
children: item.children.map((g) => ({
|
|
140
|
+
label: g.heading,
|
|
141
|
+
defaultOpen: true,
|
|
142
|
+
children: g.links,
|
|
143
|
+
})),
|
|
144
|
+
}
|
|
145
|
+
: item,
|
|
146
|
+
)
|
|
147
|
+
: links;
|
|
64
148
|
</script>
|