@wikicasa-dev/components 2.1.14 → 2.1.16
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/dist/assets/packages/components/lib/components/carousel/SwiperCarousel2.css +1 -1
- package/dist/components/carousel/SwiperCarousel.d.ts +2286 -0
- package/dist/components/carousel/SwiperCarousel.js +2 -2
- package/dist/packages/components/lib/components/carousel/SwiperCarousel.vue.js +48 -47
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import o from "../../packages/components/lib/components/carousel/SwiperCarousel.
|
|
|
2
2
|
import '../../assets/packages/components/lib/components/carousel/SwiperCarousel2.css';import '../../assets/packages/components/lib/components/carousel/SwiperCarousel.css';/* empty css */
|
|
3
3
|
/* empty css */
|
|
4
4
|
import r from "../../_virtual/_plugin-vue_export-helper.js";
|
|
5
|
-
const
|
|
5
|
+
const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-cbcbf618"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
c as default
|
|
8
8
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as Q, reactive as U, ref as k, useId as X, computed as f, onMounted as Y, watch as x, nextTick as M, createElementBlock as l, openBlock as p, normalizeClass as u, createElementVNode as v, createCommentVNode as y, renderSlot as E, Fragment as P, renderList as F, mergeProps as T, withModifiers as O } from "vue";
|
|
2
2
|
import { Swiper as B } from "swiper";
|
|
3
|
-
import
|
|
3
|
+
import _ from "../../../../../node_modules/.pnpm/swiper@11.2.6/node_modules/swiper/modules/zoom.js";
|
|
4
4
|
import '../../../../../assets/node_modules/.pnpm/swiper@11.2.6/node_modules/swiper/modules/zoom.css';import '../../../../../assets/node_modules/.pnpm/swiper@11.2.6/node_modules/swiper/swiper.css';/* empty css */
|
|
5
5
|
/* empty css */
|
|
6
6
|
import "../../../../../node_modules/.pnpm/js-cookie@3.0.5/node_modules/js-cookie/dist/js.cookie.js";
|
|
7
|
-
import { shallowCopyObjectTo as
|
|
7
|
+
import { shallowCopyObjectTo as ee } from "../../../../../node_modules/.pnpm/@wikicasa-dev_utilities@1.1.21/node_modules/@wikicasa-dev/utilities/dist/utils/ObjectUtils.js";
|
|
8
8
|
import "../../../../../_virtual/polyline.js";
|
|
9
|
-
const
|
|
9
|
+
const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "height", "onLoad"], ae = ["id"], re = ["alt"], me = /* @__PURE__ */ Q({
|
|
10
10
|
inheritAttrs: !1,
|
|
11
11
|
__name: "SwiperCarousel",
|
|
12
12
|
props: {
|
|
@@ -21,33 +21,33 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
21
21
|
},
|
|
22
22
|
emits: ["moved", "click", "firstSlideLoaded"],
|
|
23
23
|
setup(s, { expose: D, emit: j }) {
|
|
24
|
-
const $ = j, r =
|
|
25
|
-
swiperParams: { modules: [
|
|
24
|
+
const $ = j, r = U({
|
|
25
|
+
swiperParams: { modules: [_] },
|
|
26
26
|
swiper: null,
|
|
27
27
|
initCarousel: !1
|
|
28
|
-
}), S = k(), A = k(!1), N =
|
|
28
|
+
}), S = k(), A = k(!1), N = X(), d = f(() => s.id ?? N), V = f(() => r.swiper), g = f(() => s.swiperOptions?.slidesPerView || 1), W = f(() => !!s.swiperOptions?.keyboard), C = f(() => !!s.swiperOptions.navigation), I = f(() => !!s.swiperOptions.pagination), q = f(() => !!s.swiperOptions.autoplay), K = f(
|
|
29
29
|
() => s.swiperOptions?.effect || "slider"
|
|
30
|
-
),
|
|
31
|
-
s.swiperOptions &&
|
|
30
|
+
), R = () => {
|
|
31
|
+
s.swiperOptions && ee(s.swiperOptions, r.swiperParams);
|
|
32
32
|
}, z = (e, i = -1, t = !1) => {
|
|
33
33
|
if (!e.images)
|
|
34
34
|
return { src: e.src || "" };
|
|
35
35
|
let a = "", o = "", b = "";
|
|
36
36
|
if (s.artDirection) {
|
|
37
37
|
for (const n in s.artDirection) {
|
|
38
|
-
const { mq: c, width:
|
|
39
|
-
|
|
38
|
+
const { mq: c, width: w } = s.artDirection[n];
|
|
39
|
+
w && (b += b ? `,${c} ${parseInt(w)}px` : `${c} ${parseInt(w)}px`);
|
|
40
40
|
}
|
|
41
|
-
o = e.images.reduce((n, c,
|
|
42
|
-
const
|
|
43
|
-
return !
|
|
41
|
+
o = e.images.reduce((n, c, w) => {
|
|
42
|
+
const m = Object.values(s.artDirection)[w];
|
|
43
|
+
return !m || !m.width || (n += n ? `, ${c.storagePath} ${m.width}` : `${c.storagePath} ${m.width}`), n;
|
|
44
44
|
}, ""), a = e.images[0].storagePath;
|
|
45
45
|
} else {
|
|
46
46
|
let n = e.images;
|
|
47
|
-
e.images.length > 3 ? n = e.images.slice(2, 5) : s.shiftFirstImage && (n[0] = n[1]), o = n.reduce((c,
|
|
47
|
+
e.images.length > 3 ? n = e.images.slice(2, 5) : s.shiftFirstImage && (n[0] = n[1]), o = n.reduce((c, w, m) => (m === 0 && (a = `${w.storagePath}`), m > 0 && (c += ", "), `${c}${w.storagePath} ${m + 1}x`), "");
|
|
48
48
|
}
|
|
49
|
-
const
|
|
50
|
-
return typeof g.value == "number" && i > g.value ? (a = "", o = "", { sizes: b, "data-src":
|
|
49
|
+
const H = a, J = o;
|
|
50
|
+
return typeof g.value == "number" && i > g.value ? (a = "", o = "", { sizes: b, "data-src": H, "data-srcset": J }) : t ? {
|
|
51
51
|
src: a,
|
|
52
52
|
srcset: o,
|
|
53
53
|
sizes: b,
|
|
@@ -60,7 +60,7 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
60
60
|
loading: s.lazyLoadImages || i >= g.value ? "lazy" : void 0,
|
|
61
61
|
fetchpriority: !s.lazyLoadImages && i === 0 ? "high" : "low"
|
|
62
62
|
};
|
|
63
|
-
}, h = [],
|
|
63
|
+
}, h = [], Z = (e) => {
|
|
64
64
|
if (typeof g.value == "string") return;
|
|
65
65
|
const i = h[e];
|
|
66
66
|
if (i && !i.src && (i.src = i.dataset.src || "", i.srcset = i.dataset.srcset || ""), e < g.value || e + 1 >= (s.images ?? []).length)
|
|
@@ -69,17 +69,18 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
69
69
|
t && !t.src && (t.src = t?.dataset.src || "", t.srcset = t?.dataset.srcset || "");
|
|
70
70
|
};
|
|
71
71
|
D({
|
|
72
|
+
swiper: V,
|
|
72
73
|
moveTo(e, i = 0, t = !0) {
|
|
73
74
|
r.swiper?.slideTo(e, i, t);
|
|
74
75
|
}
|
|
75
76
|
});
|
|
76
|
-
const L = k(null),
|
|
77
|
+
const L = k(null), G = (e) => {
|
|
77
78
|
e === 0 && h && h[e] && M(() => {
|
|
78
79
|
L.value?.setAttribute("data-first-slide-loaded", "true"), $("firstSlideLoaded");
|
|
79
80
|
});
|
|
80
81
|
};
|
|
81
|
-
return
|
|
82
|
-
if (
|
|
82
|
+
return Y(async () => {
|
|
83
|
+
if (R(), W.value) {
|
|
83
84
|
const { Keyboard: t } = await import("../../../lazyModules/Swiper/keyboard.js");
|
|
84
85
|
r.swiperParams.modules?.push(t), r.swiperParams.keyboard = s.swiperOptions.keyboard;
|
|
85
86
|
}
|
|
@@ -111,7 +112,7 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
111
112
|
...a
|
|
112
113
|
};
|
|
113
114
|
}
|
|
114
|
-
if (
|
|
115
|
+
if (q.value) {
|
|
115
116
|
const { Autoplay: t } = await import("../../../lazyModules/Swiper/autoplay.js");
|
|
116
117
|
r.swiperParams.modules?.push(t), r.swiperParams.autoplay = s.swiperOptions.autoplay;
|
|
117
118
|
}
|
|
@@ -122,7 +123,7 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
122
123
|
A.value = !0;
|
|
123
124
|
},
|
|
124
125
|
slideChange: (t) => {
|
|
125
|
-
|
|
126
|
+
Z(t.activeIndex), $("moved", { activeIndex: t.activeIndex });
|
|
126
127
|
}
|
|
127
128
|
}
|
|
128
129
|
};
|
|
@@ -141,42 +142,42 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
141
142
|
};
|
|
142
143
|
}
|
|
143
144
|
e.lazyPreloadPrevNext = 1, r.swiper = new B(`#${d.value}`, e), S.value?.classList.remove("uikit-hidden");
|
|
144
|
-
}),
|
|
145
|
+
}), x(
|
|
145
146
|
() => s.images,
|
|
146
147
|
() => {
|
|
147
148
|
M(() => {
|
|
148
149
|
r.swiper?.update();
|
|
149
150
|
});
|
|
150
151
|
}
|
|
151
|
-
), (e, i) => (
|
|
152
|
+
), (e, i) => (p(), l("div", {
|
|
152
153
|
id: `root-${d.value}`,
|
|
153
154
|
ref_key: "root",
|
|
154
155
|
ref: L,
|
|
155
|
-
class:
|
|
156
|
+
class: u(["swiper-carousel-root", e.$attrs["root-classes"]])
|
|
156
157
|
}, [
|
|
157
158
|
v("div", {
|
|
158
159
|
id: d.value,
|
|
159
160
|
"data-cy": e.$attrs["data-cy"],
|
|
160
|
-
class:
|
|
161
|
+
class: u(["swiper", e.$attrs["swiper-classes"]])
|
|
161
162
|
}, [
|
|
162
163
|
v("div", {
|
|
163
164
|
ref_key: "swiperWrapper",
|
|
164
165
|
ref: S,
|
|
165
|
-
class:
|
|
166
|
+
class: u(["swiper-wrapper", [
|
|
166
167
|
e.$attrs["swiper-wrapper-classes"],
|
|
167
|
-
|
|
168
|
+
K.value === "none" && "no-transition"
|
|
168
169
|
]]),
|
|
169
170
|
onClick: i[0] || (i[0] = (t) => $("click"))
|
|
170
171
|
}, [
|
|
171
172
|
E(e.$slots, "default", {}, () => [
|
|
172
|
-
(
|
|
173
|
+
(p(!0), l(P, null, F(e.images, (t, a) => (p(), l("div", {
|
|
173
174
|
key: `swiper_${d.value}_${a}`,
|
|
174
|
-
class:
|
|
175
|
+
class: u(["swiper-slide", e.$attrs["swiper-slide-classes"]])
|
|
175
176
|
}, [
|
|
176
177
|
v("div", {
|
|
177
|
-
class:
|
|
178
|
+
class: u(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
|
|
178
179
|
}, [
|
|
179
|
-
e.backgroundImage ? y("", !0) : (
|
|
180
|
+
e.backgroundImage ? y("", !0) : (p(), l("img", T({
|
|
180
181
|
key: 0,
|
|
181
182
|
ref_for: !0,
|
|
182
183
|
ref: (o) => {
|
|
@@ -189,20 +190,20 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
189
190
|
itemprop: "image",
|
|
190
191
|
width: t.width,
|
|
191
192
|
height: t.height,
|
|
192
|
-
onLoad: (o) =>
|
|
193
|
-
}), null, 16,
|
|
193
|
+
onLoad: (o) => G(a)
|
|
194
|
+
}), null, 16, ie))
|
|
194
195
|
], 2)
|
|
195
196
|
], 2))), 128)),
|
|
196
197
|
E(e.$slots, "last_slide", {}, void 0, !0)
|
|
197
198
|
], !0)
|
|
198
199
|
], 2),
|
|
199
|
-
I.value ? (
|
|
200
|
+
I.value ? (p(), l("div", {
|
|
200
201
|
key: 0,
|
|
201
|
-
class:
|
|
202
|
+
class: u([e.$attrs["swiper-pagination-classes"], "swiper-pagination [&.swiper-pagination-fraction]:uikit-flex [&.swiper-pagination-fraction]:uikit-justify-center"]),
|
|
202
203
|
onClick: i[1] || (i[1] = O(() => {
|
|
203
204
|
}, ["stop"]))
|
|
204
205
|
}, null, 2)) : y("", !0),
|
|
205
|
-
C.value ? (
|
|
206
|
+
C.value ? (p(), l(P, { key: 1 }, [
|
|
206
207
|
v("div", {
|
|
207
208
|
class: "swiper-button-prev",
|
|
208
209
|
"data-cy": "swiper-button-prev",
|
|
@@ -216,30 +217,30 @@ const ee = ["id"], te = ["id", "data-cy"], se = ["data-idx", "alt", "width", "he
|
|
|
216
217
|
}, ["stop"]))
|
|
217
218
|
})
|
|
218
219
|
], 64)) : y("", !0)
|
|
219
|
-
], 10,
|
|
220
|
-
e.thumbSwiperOptions ? (
|
|
220
|
+
], 10, se),
|
|
221
|
+
e.thumbSwiperOptions ? (p(), l("div", {
|
|
221
222
|
key: 0,
|
|
222
223
|
id: `thumb_${d.value}`,
|
|
223
224
|
thumbsSlider: "",
|
|
224
|
-
class:
|
|
225
|
+
class: u(["swiper", e.$attrs["thumb-swiper-classes"]])
|
|
225
226
|
}, [
|
|
226
227
|
v("div", {
|
|
227
|
-
class:
|
|
228
|
+
class: u(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
|
|
228
229
|
}, [
|
|
229
|
-
(
|
|
230
|
+
(p(!0), l(P, null, F(e.images, (t, a) => (p(), l("div", {
|
|
230
231
|
key: `thumb_${d.value}_${a}`,
|
|
231
|
-
class:
|
|
232
|
+
class: u(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
|
|
232
233
|
}, [
|
|
233
234
|
v("img", T({
|
|
234
235
|
class: e.$attrs["thumb-img-classes"],
|
|
235
236
|
ref_for: !0
|
|
236
237
|
}, z(t, -1, !1), {
|
|
237
238
|
alt: t.alt
|
|
238
|
-
}), null, 16,
|
|
239
|
+
}), null, 16, re)
|
|
239
240
|
], 2))), 128))
|
|
240
241
|
], 2)
|
|
241
|
-
], 10,
|
|
242
|
-
], 10,
|
|
242
|
+
], 10, ae)) : y("", !0)
|
|
243
|
+
], 10, te));
|
|
243
244
|
}
|
|
244
245
|
});
|
|
245
246
|
export {
|