@xenterprises/nuxt-x-marketing 1.11.0 → 1.12.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 +11 -0
- package/app/components/X/Mark/Media/index.vue +47 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -30,6 +30,17 @@ 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.12.0] - 2026-10-13
|
|
34
|
+
|
|
35
|
+
Opt-in; the default (`aspectRatio="16/9"`, cropped with object-cover) renders byte-identical to 1.11.0.
|
|
36
|
+
|
|
37
|
+
### Added
|
|
38
|
+
|
|
39
|
+
- **`XMarkMedia aspectRatio="auto"`**: the image renders at its natural ratio with no crop
|
|
40
|
+
(`block w-full h-auto`, no aspect-ratio style, no object-cover, no absolute positioning).
|
|
41
|
+
`img.width` / `img.height` are passed through as attributes in this mode to reserve space.
|
|
42
|
+
`aspect="auto"` is accepted as an alias (it only takes `"auto"`).
|
|
43
|
+
|
|
33
44
|
## [1.11.0] - 2026-10-12
|
|
34
45
|
|
|
35
46
|
Additive; menus with only flat children render byte-identical to 1.10.0.
|
|
@@ -2,6 +2,40 @@
|
|
|
2
2
|
<div :class="containerClasses">
|
|
3
3
|
<figure class="m-0">
|
|
4
4
|
<div
|
|
5
|
+
v-if="isAuto"
|
|
6
|
+
class="relative w-full overflow-hidden"
|
|
7
|
+
:class="roundedClass"
|
|
8
|
+
>
|
|
9
|
+
<picture v-if="img?.sources?.length">
|
|
10
|
+
<source
|
|
11
|
+
v-for="(source, i) in img.sources"
|
|
12
|
+
:key="i"
|
|
13
|
+
:srcset="source.srcset"
|
|
14
|
+
:type="source.type"
|
|
15
|
+
:media="source.media"
|
|
16
|
+
:sizes="source.sizes"
|
|
17
|
+
>
|
|
18
|
+
<img
|
|
19
|
+
:src="img.src"
|
|
20
|
+
:alt="img.alt || ''"
|
|
21
|
+
:width="img.width"
|
|
22
|
+
:height="img.height"
|
|
23
|
+
:loading="loading"
|
|
24
|
+
class="block w-full h-auto"
|
|
25
|
+
>
|
|
26
|
+
</picture>
|
|
27
|
+
<img
|
|
28
|
+
v-else
|
|
29
|
+
:src="img.src"
|
|
30
|
+
:alt="img.alt || ''"
|
|
31
|
+
:width="img.width"
|
|
32
|
+
:height="img.height"
|
|
33
|
+
:loading="loading"
|
|
34
|
+
class="block w-full h-auto"
|
|
35
|
+
>
|
|
36
|
+
</div>
|
|
37
|
+
<div
|
|
38
|
+
v-else
|
|
5
39
|
class="relative w-full overflow-hidden"
|
|
6
40
|
:class="roundedClass"
|
|
7
41
|
:style="aspectStyle"
|
|
@@ -59,11 +93,20 @@ const props = defineProps({
|
|
|
59
93
|
(Array.isArray(v.sources) &&
|
|
60
94
|
v.sources.every((x) => x && typeof x.srcset === "string"))),
|
|
61
95
|
},
|
|
62
|
-
/**
|
|
96
|
+
/**
|
|
97
|
+
* CSS aspect-ratio, e.g. "16/9", "21/9", "4/3" (image is cropped to fill, object-cover).
|
|
98
|
+
* 1.12.0: "auto" shows the image at its natural ratio with no crop (w-full h-auto).
|
|
99
|
+
*/
|
|
63
100
|
aspectRatio: {
|
|
64
101
|
type: String,
|
|
65
102
|
default: "16/9",
|
|
66
|
-
validator: (v) => /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(v),
|
|
103
|
+
validator: (v) => v === "auto" || /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(v),
|
|
104
|
+
},
|
|
105
|
+
/** 1.12.0 alias: aspect="auto" is the same as aspectRatio="auto" (only "auto" is accepted). */
|
|
106
|
+
aspect: {
|
|
107
|
+
type: String,
|
|
108
|
+
default: "",
|
|
109
|
+
validator: (v) => v === "" || v === "auto",
|
|
67
110
|
},
|
|
68
111
|
/** Same values and classes as XMarkSection container */
|
|
69
112
|
container: {
|
|
@@ -112,6 +155,8 @@ const roundedClass = computed(() => {
|
|
|
112
155
|
return r[props.rounded];
|
|
113
156
|
});
|
|
114
157
|
|
|
158
|
+
const isAuto = computed(() => props.aspectRatio === "auto" || props.aspect === "auto");
|
|
159
|
+
|
|
115
160
|
const aspectStyle = computed(() => ({ aspectRatio: props.aspectRatio.replace(/\s+/g, " ") }));
|
|
116
161
|
|
|
117
162
|
const positionStyle = computed(() =>
|