@wikicasa-dev/components 2.1.16 → 2.1.18
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 +3 -0
- package/dist/components/carousel/SwiperCarousel.js +2 -2
- package/dist/packages/components/lib/components/carousel/SwiperCarousel.vue.js +79 -78
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.no-transition[data-v-
|
|
1
|
+
.no-transition[data-v-1ea2f6ce]{transition-duration:0ms!important}.disable-select[data-v-1ea2f6ce]{-webkit-user-select:none;-moz-user-select:none;user-select:none}.swiper-button-disabled[data-v-1ea2f6ce]{pointer-events:auto!important}
|
|
@@ -2314,18 +2314,21 @@ declare const __VLS_component: import('vue').DefineComponent<SwiperCarouselProps
|
|
|
2314
2314
|
removeAllSlides: () => void;
|
|
2315
2315
|
} | null>;
|
|
2316
2316
|
moveTo(index: number, speed?: number, runCallbacks?: boolean): void;
|
|
2317
|
+
updateSlidesPerView: (value: number) => void;
|
|
2317
2318
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
2318
2319
|
click: () => any;
|
|
2319
2320
|
moved: (args_0: {
|
|
2320
2321
|
activeIndex: number;
|
|
2321
2322
|
}) => any;
|
|
2322
2323
|
firstSlideLoaded: () => any;
|
|
2324
|
+
init: () => any;
|
|
2323
2325
|
}, string, import('vue').PublicProps, Readonly<SwiperCarouselProps> & Readonly<{
|
|
2324
2326
|
onClick?: (() => any) | undefined;
|
|
2325
2327
|
onMoved?: ((args_0: {
|
|
2326
2328
|
activeIndex: number;
|
|
2327
2329
|
}) => any) | undefined;
|
|
2328
2330
|
onFirstSlideLoaded?: (() => any) | undefined;
|
|
2331
|
+
onInit?: (() => any) | undefined;
|
|
2329
2332
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
2330
2333
|
root: HTMLDivElement;
|
|
2331
2334
|
swiperWrapper: HTMLDivElement;
|
|
@@ -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 m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1ea2f6ce"]]);
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
m as default
|
|
8
8
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
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
|
|
2
|
-
import { Swiper 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 V, createElementBlock as l, openBlock as p, normalizeClass as d, createElementVNode as v, createCommentVNode as $, renderSlot as M, Fragment as P, renderList as E, mergeProps as F, withModifiers as O } from "vue";
|
|
2
|
+
import { Swiper as T } from "swiper";
|
|
3
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
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 te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "height", "onLoad"], ae = ["id"], re = ["alt"],
|
|
9
|
+
const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "height", "onLoad"], ae = ["id"], re = ["alt"], fe = /* @__PURE__ */ Q({
|
|
10
10
|
inheritAttrs: !1,
|
|
11
11
|
__name: "SwiperCarousel",
|
|
12
12
|
props: {
|
|
@@ -19,42 +19,42 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
|
|
|
19
19
|
artDirection: {},
|
|
20
20
|
shiftFirstImage: { type: Boolean, default: !1 }
|
|
21
21
|
},
|
|
22
|
-
emits: ["moved", "click", "firstSlideLoaded"],
|
|
23
|
-
setup(s, { expose:
|
|
24
|
-
const
|
|
22
|
+
emits: ["moved", "click", "firstSlideLoaded", "init"],
|
|
23
|
+
setup(s, { expose: B, emit: D }) {
|
|
24
|
+
const y = D, a = U({
|
|
25
25
|
swiperParams: { modules: [_] },
|
|
26
26
|
swiper: null,
|
|
27
27
|
initCarousel: !1
|
|
28
|
-
}), S = k(),
|
|
28
|
+
}), S = k(), j = k(!1), A = X(), u = f(() => s.id ?? A), N = f(() => a.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
30
|
), R = () => {
|
|
31
|
-
s.swiperOptions && ee(s.swiperOptions,
|
|
31
|
+
s.swiperOptions && ee(s.swiperOptions, a.swiperParams);
|
|
32
32
|
}, z = (e, i = -1, t = !1) => {
|
|
33
33
|
if (!e.images)
|
|
34
34
|
return { src: e.src || "" };
|
|
35
|
-
let
|
|
35
|
+
let r = "", o = "", b = "";
|
|
36
36
|
if (s.artDirection) {
|
|
37
37
|
for (const n in s.artDirection) {
|
|
38
|
-
const { mq:
|
|
39
|
-
|
|
38
|
+
const { mq: w, width: c } = s.artDirection[n];
|
|
39
|
+
c && (b += b ? `,${w} ${parseInt(c)}px` : `${w} ${parseInt(c)}px`);
|
|
40
40
|
}
|
|
41
|
-
o = e.images.reduce((n,
|
|
42
|
-
const m = Object.values(s.artDirection)[
|
|
43
|
-
return !m || !m.width || (n += n ? `, ${
|
|
44
|
-
}, ""),
|
|
41
|
+
o = e.images.reduce((n, w, c) => {
|
|
42
|
+
const m = Object.values(s.artDirection)[c];
|
|
43
|
+
return !m || !m.width || (n += n ? `, ${w.storagePath} ${m.width}` : `${w.storagePath} ${m.width}`), n;
|
|
44
|
+
}, ""), r = 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((
|
|
47
|
+
e.images.length > 3 ? n = e.images.slice(2, 5) : s.shiftFirstImage && (n[0] = n[1]), o = n.reduce((w, c, m) => (m === 0 && (r = `${c.storagePath}`), m > 0 && (w += ", "), `${w}${c.storagePath} ${m + 1}x`), "");
|
|
48
48
|
}
|
|
49
|
-
const H =
|
|
50
|
-
return typeof g.value == "number" && i > g.value ? (
|
|
51
|
-
src:
|
|
49
|
+
const H = r, J = o;
|
|
50
|
+
return typeof g.value == "number" && i > g.value ? (r = "", o = "", { sizes: b, "data-src": H, "data-srcset": J }) : t ? {
|
|
51
|
+
src: r,
|
|
52
52
|
srcset: o,
|
|
53
53
|
sizes: b,
|
|
54
54
|
loading: "lazy",
|
|
55
55
|
fetchpriority: "low"
|
|
56
56
|
} : {
|
|
57
|
-
src:
|
|
57
|
+
src: r,
|
|
58
58
|
srcset: o,
|
|
59
59
|
sizes: b,
|
|
60
60
|
loading: s.lazyLoadImages || i >= g.value ? "lazy" : void 0,
|
|
@@ -67,39 +67,32 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
|
|
|
67
67
|
return;
|
|
68
68
|
const t = h[e + 1];
|
|
69
69
|
t && !t.src && (t.src = t?.dataset.src || "", t.srcset = t?.dataset.srcset || "");
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
moveTo(e, i = 0, t = !0) {
|
|
74
|
-
r.swiper?.slideTo(e, i, t);
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
const L = k(null), G = (e) => {
|
|
78
|
-
e === 0 && h && h[e] && M(() => {
|
|
79
|
-
L.value?.setAttribute("data-first-slide-loaded", "true"), $("firstSlideLoaded");
|
|
70
|
+
}, L = k(null), G = (e) => {
|
|
71
|
+
e === 0 && h && h[e] && V(() => {
|
|
72
|
+
L.value?.setAttribute("data-first-slide-loaded", "true"), y("firstSlideLoaded");
|
|
80
73
|
});
|
|
81
74
|
};
|
|
82
75
|
return Y(async () => {
|
|
83
76
|
if (R(), W.value) {
|
|
84
77
|
const { Keyboard: t } = await import("../../../lazyModules/Swiper/keyboard.js");
|
|
85
|
-
|
|
78
|
+
a.swiperParams.modules?.push(t), a.swiperParams.keyboard = s.swiperOptions.keyboard;
|
|
86
79
|
}
|
|
87
80
|
if (I.value) {
|
|
88
81
|
const { Pagination: t } = await import("../../../lazyModules/Swiper/pagination.js");
|
|
89
|
-
|
|
82
|
+
a.swiperParams.modules?.push(t), a.swiperParams.pagination = {
|
|
90
83
|
el: ".swiper-pagination",
|
|
91
|
-
renderFraction: (
|
|
92
|
-
<span data-cy="swiper-pagination-current" class="${
|
|
84
|
+
renderFraction: (r, o) => `<div class="uikit-rounded-xs uikit-border-w-black uikit-border uikit-border-solid uikit-px-3 uikit-bg-white uikit-pt-[3px] uikit-pb-[3px]">
|
|
85
|
+
<span data-cy="swiper-pagination-current" class="${r}"></span>
|
|
93
86
|
/
|
|
94
87
|
<span data-cy="swiper-pagination-total" class="${o}"></span>
|
|
95
88
|
</div>`,
|
|
96
|
-
...typeof
|
|
89
|
+
...typeof a.swiperParams.pagination == "boolean" ? {} : a.swiperParams.pagination
|
|
97
90
|
};
|
|
98
91
|
}
|
|
99
92
|
if (C.value) {
|
|
100
93
|
const { Navigation: t } = await import("../../../lazyModules/Swiper/navigation.js");
|
|
101
|
-
|
|
102
|
-
const
|
|
94
|
+
a.swiperParams.modules?.push(t);
|
|
95
|
+
const r = {
|
|
103
96
|
...s.swiperOptions.navigation.nextEl ?? {
|
|
104
97
|
nextEl: ".swiper-button-next"
|
|
105
98
|
},
|
|
@@ -107,102 +100,110 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
|
|
|
107
100
|
prevEl: ".swiper-button-prev"
|
|
108
101
|
}
|
|
109
102
|
};
|
|
110
|
-
|
|
103
|
+
a.swiperParams.navigation = {
|
|
111
104
|
...typeof s.swiperOptions.navigation == "object" ? s.swiperOptions.navigation : {},
|
|
112
|
-
...
|
|
105
|
+
...r
|
|
113
106
|
};
|
|
114
107
|
}
|
|
115
108
|
if (q.value) {
|
|
116
109
|
const { Autoplay: t } = await import("../../../lazyModules/Swiper/autoplay.js");
|
|
117
|
-
|
|
110
|
+
a.swiperParams.modules?.push(t), a.swiperParams.autoplay = s.swiperOptions.autoplay;
|
|
118
111
|
}
|
|
119
112
|
const e = {
|
|
120
|
-
...
|
|
113
|
+
...a.swiperParams,
|
|
121
114
|
on: {
|
|
122
115
|
init: () => {
|
|
123
|
-
|
|
116
|
+
j.value = !0, y("init");
|
|
124
117
|
},
|
|
125
118
|
slideChange: (t) => {
|
|
126
|
-
Z(t.activeIndex),
|
|
119
|
+
Z(t.activeIndex), y("moved", { activeIndex: t.activeIndex });
|
|
127
120
|
}
|
|
128
121
|
}
|
|
129
122
|
};
|
|
130
123
|
let i = null;
|
|
131
124
|
if (s.thumbSwiperOptions) {
|
|
132
|
-
const [t,
|
|
125
|
+
const [t, r, o] = await Promise.all([
|
|
133
126
|
import("../../../lazyModules/Swiper/thumbs.js"),
|
|
134
127
|
import("../../../lazyModules/Swiper/free-mode.js"),
|
|
135
128
|
import("../../../lazyModules/Swiper/controller.js")
|
|
136
129
|
]);
|
|
137
|
-
|
|
130
|
+
a.swiperParams.modules?.push(t.Thumbs), a.swiperParams.modules?.push(o.Controller), i = new T(`#thumb_${u.value}`, {
|
|
138
131
|
...s.thumbSwiperOptions,
|
|
139
|
-
modules: [
|
|
132
|
+
modules: [r.FreeMode]
|
|
140
133
|
}), e.thumbs = {
|
|
141
134
|
swiper: i
|
|
142
135
|
};
|
|
143
136
|
}
|
|
144
|
-
e.lazyPreloadPrevNext = 1,
|
|
137
|
+
e.lazyPreloadPrevNext = 1, a.swiper = new T(`#${u.value}`, e), S.value?.classList.remove("uikit-hidden");
|
|
145
138
|
}), x(
|
|
146
139
|
() => s.images,
|
|
147
140
|
() => {
|
|
148
|
-
|
|
149
|
-
|
|
141
|
+
V(() => {
|
|
142
|
+
a.swiper?.update();
|
|
150
143
|
});
|
|
151
144
|
}
|
|
152
|
-
), (
|
|
153
|
-
|
|
145
|
+
), B({
|
|
146
|
+
swiper: N,
|
|
147
|
+
moveTo(e, i = 0, t = !0) {
|
|
148
|
+
a.swiper?.slideTo(e, i, t);
|
|
149
|
+
},
|
|
150
|
+
updateSlidesPerView: (e) => {
|
|
151
|
+
!a.swiper || a.swiper.params.slidesPerView === e || (a.swiper.params.slidesPerView = e, a.swiper.update());
|
|
152
|
+
}
|
|
153
|
+
}), (e, i) => (p(), l("div", {
|
|
154
|
+
id: `root-${u.value}`,
|
|
154
155
|
ref_key: "root",
|
|
155
156
|
ref: L,
|
|
156
|
-
class:
|
|
157
|
+
class: d(["swiper-carousel-root", e.$attrs["root-classes"]])
|
|
157
158
|
}, [
|
|
158
159
|
v("div", {
|
|
159
|
-
id:
|
|
160
|
+
id: u.value,
|
|
160
161
|
"data-cy": e.$attrs["data-cy"],
|
|
161
|
-
class:
|
|
162
|
+
class: d(["swiper", e.$attrs["swiper-classes"]])
|
|
162
163
|
}, [
|
|
163
164
|
v("div", {
|
|
164
165
|
ref_key: "swiperWrapper",
|
|
165
166
|
ref: S,
|
|
166
|
-
class:
|
|
167
|
+
class: d(["swiper-wrapper", [
|
|
167
168
|
e.$attrs["swiper-wrapper-classes"],
|
|
168
169
|
K.value === "none" && "no-transition"
|
|
169
170
|
]]),
|
|
170
|
-
onClick: i[0] || (i[0] = (t) =>
|
|
171
|
+
onClick: i[0] || (i[0] = (t) => y("click"))
|
|
171
172
|
}, [
|
|
172
|
-
|
|
173
|
-
(p(!0), l(P, null,
|
|
174
|
-
key: `swiper_${
|
|
175
|
-
class:
|
|
173
|
+
M(e.$slots, "default", {}, () => [
|
|
174
|
+
(p(!0), l(P, null, E(e.images, (t, r) => (p(), l("div", {
|
|
175
|
+
key: `swiper_${u.value}_${r}`,
|
|
176
|
+
class: d(["swiper-slide", e.$attrs["swiper-slide-classes"]])
|
|
176
177
|
}, [
|
|
177
178
|
v("div", {
|
|
178
|
-
class:
|
|
179
|
+
class: d(["swiper-zoom-container", e.$attrs["swiper-zoom-container-classes"]])
|
|
179
180
|
}, [
|
|
180
|
-
e.backgroundImage ?
|
|
181
|
+
e.backgroundImage ? $("", !0) : (p(), l("img", F({
|
|
181
182
|
key: 0,
|
|
182
183
|
ref_for: !0,
|
|
183
184
|
ref: (o) => {
|
|
184
185
|
h.push(o);
|
|
185
186
|
},
|
|
186
187
|
class: ["disable-select", [e.$attrs["slide-img-classes"] || t.classes]],
|
|
187
|
-
"data-idx": `${
|
|
188
|
-
}, z(t,
|
|
188
|
+
"data-idx": `${u.value}-slide-img-${r}`
|
|
189
|
+
}, z(t, r), {
|
|
189
190
|
alt: t.alt,
|
|
190
191
|
itemprop: "image",
|
|
191
192
|
width: t.width,
|
|
192
193
|
height: t.height,
|
|
193
|
-
onLoad: (o) => G(
|
|
194
|
+
onLoad: (o) => G(r)
|
|
194
195
|
}), null, 16, ie))
|
|
195
196
|
], 2)
|
|
196
197
|
], 2))), 128)),
|
|
197
|
-
|
|
198
|
+
M(e.$slots, "last_slide", {}, void 0, !0)
|
|
198
199
|
], !0)
|
|
199
200
|
], 2),
|
|
200
201
|
I.value ? (p(), l("div", {
|
|
201
202
|
key: 0,
|
|
202
|
-
class:
|
|
203
|
+
class: d([e.$attrs["swiper-pagination-classes"], "swiper-pagination [&.swiper-pagination-fraction]:uikit-flex [&.swiper-pagination-fraction]:uikit-justify-center"]),
|
|
203
204
|
onClick: i[1] || (i[1] = O(() => {
|
|
204
205
|
}, ["stop"]))
|
|
205
|
-
}, null, 2)) :
|
|
206
|
+
}, null, 2)) : $("", !0),
|
|
206
207
|
C.value ? (p(), l(P, { key: 1 }, [
|
|
207
208
|
v("div", {
|
|
208
209
|
class: "swiper-button-prev",
|
|
@@ -216,22 +217,22 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
|
|
|
216
217
|
onClick: i[3] || (i[3] = O(() => {
|
|
217
218
|
}, ["stop"]))
|
|
218
219
|
})
|
|
219
|
-
], 64)) :
|
|
220
|
+
], 64)) : $("", !0)
|
|
220
221
|
], 10, se),
|
|
221
222
|
e.thumbSwiperOptions ? (p(), l("div", {
|
|
222
223
|
key: 0,
|
|
223
|
-
id: `thumb_${
|
|
224
|
+
id: `thumb_${u.value}`,
|
|
224
225
|
thumbsSlider: "",
|
|
225
|
-
class:
|
|
226
|
+
class: d(["swiper", e.$attrs["thumb-swiper-classes"]])
|
|
226
227
|
}, [
|
|
227
228
|
v("div", {
|
|
228
|
-
class:
|
|
229
|
+
class: d(["swiper-wrapper", e.$attrs["thumb-swiper-wrapper-classes"]])
|
|
229
230
|
}, [
|
|
230
|
-
(p(!0), l(P, null,
|
|
231
|
-
key: `thumb_${
|
|
232
|
-
class:
|
|
231
|
+
(p(!0), l(P, null, E(e.images, (t, r) => (p(), l("div", {
|
|
232
|
+
key: `thumb_${u.value}_${r}`,
|
|
233
|
+
class: d(["swiper-slide", e.$attrs["thumb-img-wrapper-classes"]])
|
|
233
234
|
}, [
|
|
234
|
-
v("img",
|
|
235
|
+
v("img", F({
|
|
235
236
|
class: e.$attrs["thumb-img-classes"],
|
|
236
237
|
ref_for: !0
|
|
237
238
|
}, z(t, -1, !1), {
|
|
@@ -239,10 +240,10 @@ const te = ["id"], se = ["id", "data-cy"], ie = ["data-idx", "alt", "width", "he
|
|
|
239
240
|
}), null, 16, re)
|
|
240
241
|
], 2))), 128))
|
|
241
242
|
], 2)
|
|
242
|
-
], 10, ae)) :
|
|
243
|
+
], 10, ae)) : $("", !0)
|
|
243
244
|
], 10, te));
|
|
244
245
|
}
|
|
245
246
|
});
|
|
246
247
|
export {
|
|
247
|
-
|
|
248
|
+
fe as default
|
|
248
249
|
};
|