@xenterprises/nuxt-x-marketing 1.13.0 → 1.15.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
CHANGED
|
@@ -30,6 +30,29 @@ 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.15.0] - 2026-10-13
|
|
34
|
+
|
|
35
|
+
HTML change, no visual change: screenshots at 1440 and 390 (default and `container="lg"`) are
|
|
36
|
+
pixel-identical to 1.14.0.
|
|
37
|
+
|
|
38
|
+
### Fixed (accessibility)
|
|
39
|
+
|
|
40
|
+
- **`XMarkBreadcrumb` now exposes a single navigation landmark.** The outer wrapper is a `<div>`
|
|
41
|
+
(same classes, `id` and other attributes still land on it); the only `<nav>` is UBreadcrumb's,
|
|
42
|
+
labelled `aria-label="Breadcrumb"`. 1.14.0 nested `nav "Breadcrumb"` > `nav "breadcrumb"`.
|
|
43
|
+
- **The current crumb has `aria-current="page"`** (last item of `items`, or `current` in the built
|
|
44
|
+
trail). Styling of the current crumb is unchanged.
|
|
45
|
+
|
|
46
|
+
## [1.14.0] - 2026-10-13
|
|
47
|
+
|
|
48
|
+
Opt-in; without `container`, XMarkBreadcrumb renders byte-identical to 1.13.0.
|
|
49
|
+
|
|
50
|
+
### Added
|
|
51
|
+
|
|
52
|
+
- **`XMarkBreadcrumb container`**: same values and classes as XMarkSection (`sm`, `md`, `lg`, `xl`,
|
|
53
|
+
`full`, `none`). Empty (default) adds nothing. `container="lg"` lines the trail up with
|
|
54
|
+
XMarkSection/XMarkHero content (112px at 1440). XMarkBreadcrumb added to `componentList.json`.
|
|
55
|
+
|
|
33
56
|
## [1.13.0] - 2026-10-13
|
|
34
57
|
|
|
35
58
|
Opt-in; plain-string answers render byte-identical to 1.12.0.
|
|
@@ -1,7 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
<div
|
|
3
|
+
v-if="container"
|
|
4
|
+
class="x-mark-breadcrumb"
|
|
5
|
+
:class="containerClasses"
|
|
6
|
+
>
|
|
7
|
+
<UBreadcrumb
|
|
8
|
+
:items="resolvedItems"
|
|
9
|
+
aria-label="Breadcrumb"
|
|
10
|
+
/>
|
|
11
|
+
</div>
|
|
12
|
+
<div
|
|
13
|
+
v-else
|
|
14
|
+
class="x-mark-breadcrumb"
|
|
15
|
+
>
|
|
16
|
+
<UBreadcrumb
|
|
17
|
+
:items="resolvedItems"
|
|
18
|
+
aria-label="Breadcrumb"
|
|
19
|
+
/>
|
|
20
|
+
</div>
|
|
5
21
|
</template>
|
|
6
22
|
|
|
7
23
|
<script setup>
|
|
@@ -9,6 +25,8 @@
|
|
|
9
25
|
* XMarkBreadcrumb — Docs/Academy article breadcrumbs (marketing page standard).
|
|
10
26
|
* Prefer section + current for the default Home > Docs|Academy > page trail.
|
|
11
27
|
* Pass items to fully override. Last item is the current page (no link).
|
|
28
|
+
* 1.15.0: one landmark. The wrapper is a plain div; UBreadcrumb renders the only
|
|
29
|
+
* <nav aria-label="Breadcrumb">, and the current crumb gets aria-current="page".
|
|
12
30
|
*/
|
|
13
31
|
const props = defineProps({
|
|
14
32
|
/** Full trail [{ label, to? }]. When set, overrides section/current builders. */
|
|
@@ -47,6 +65,27 @@ const props = defineProps({
|
|
|
47
65
|
type: String,
|
|
48
66
|
default: "",
|
|
49
67
|
},
|
|
68
|
+
/**
|
|
69
|
+
* 1.14.0, opt-in: wrap in the same container as XMarkSection (sm, md, lg, xl, full, none).
|
|
70
|
+
* Empty (default) renders exactly as before, with no container classes.
|
|
71
|
+
*/
|
|
72
|
+
container: {
|
|
73
|
+
type: String,
|
|
74
|
+
default: "",
|
|
75
|
+
validator: (v) => ["", "sm", "md", "lg", "xl", "full", "none"].includes(v),
|
|
76
|
+
},
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
const containerClasses = computed(() => {
|
|
80
|
+
const containers = {
|
|
81
|
+
sm: "max-w-[42rem] mx-auto px-4 sm:px-6",
|
|
82
|
+
md: "max-w-[64rem] mx-auto px-4 sm:px-6 lg:px-8",
|
|
83
|
+
lg: "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8",
|
|
84
|
+
xl: "max-w-[96rem] mx-auto px-4 sm:px-6 lg:px-8",
|
|
85
|
+
full: "w-full px-4 sm:px-6 lg:px-8",
|
|
86
|
+
none: "",
|
|
87
|
+
};
|
|
88
|
+
return containers[props.container] || "";
|
|
50
89
|
});
|
|
51
90
|
|
|
52
91
|
const sectionDefaults = {
|
|
@@ -61,6 +100,7 @@ const resolvedItems = computed(() => {
|
|
|
61
100
|
return {
|
|
62
101
|
label: item.label,
|
|
63
102
|
...(isLast || !item.to ? {} : { to: item.to }),
|
|
103
|
+
...(isLast ? { active: true } : {}),
|
|
64
104
|
};
|
|
65
105
|
});
|
|
66
106
|
}
|
|
@@ -73,7 +113,7 @@ const resolvedItems = computed(() => {
|
|
|
73
113
|
return [
|
|
74
114
|
{ label: props.homeLabel, to: props.homeTo },
|
|
75
115
|
{ label: sectionLabel, to: sectionTo },
|
|
76
|
-
{ label: current },
|
|
116
|
+
{ label: current, active: true },
|
|
77
117
|
];
|
|
78
118
|
});
|
|
79
119
|
</script>
|