@wikicasa-dev/components 2.8.1 → 2.8.2-alpha.0

package/dist/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,18 +1,20 @@
 import e from "../BaseSelect/SelectItem.js";
 import t from "../BaseDropDown.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, isMemoSame as u, mergeModels as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onMounted as ee, onUnmounted as te, openBlock as h, renderList as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as ne, useId as re, useModel as b, useTemplateRef as x, vModelText as ie, vShow as S, watch as C, withCtx as w, withDirectives as T, withModifiers as E } from "vue";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, isMemoSame as ee, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as te, onUnmounted as ne, openBlock as p, renderList as re, renderSlot as m, shallowRef as h, toDisplayString as ie, unref as ae, useId as oe, useModel as g, useTemplateRef as _, vModelText as v, vShow as se, watch as y, withCtx as b, withDirectives as x, withModifiers as ce } from "vue";
 import '../../assets/ClearableAutocomplete.css';//#region lib/UIKit/Autocomplete/ClearableAutocomplete.vue?vue&type=script&setup=true&lang.ts
-var ae = [
+var le = [
 	"id",
 	"data-cy",
 	"placeholder"
-], oe = ["data-cy"], se = {
+], ue = ["data-cy"], de = {
 	key: 1,
 	name: "loading-state",
 	class: "uikit-progress-bar-track uikit-absolute uikit-left-0 uikit-top-0 uikit-w-full"
-}, ce = ["innerHTML"], D = /*@__PURE__*/ l({
+}, fe = ["innerHTML"], S = (e) => {
+	typeof requestAnimationFrame == "function" && requestAnimationFrame(() => setTimeout(e, 0));
+}, C = /*@__PURE__*/ l({
 	__name: "ClearableAutocomplete",
-	props: /*@__PURE__*/ d({
+	props: /*@__PURE__*/ u({
 		dataCy: {},
 		placeholder: {},
 		enableKeyboardController: {
@@ -43,7 +45,7 @@ var ae = [
 		inputValue: { default: "" },
 		inputValueModifiers: {}
 	}),
-	emits: /*@__PURE__*/ d([
+	emits: /*@__PURE__*/ u([
 		"input",
 		"click",
 		"inputClick",
@@ -53,45 +55,49 @@ var ae = [
 		"update:modelValue",
 		"update:inputValue"
 	]),
-	setup(l, { expose: d, emit: D }) {
-		let O = b(l, "open"), k = b(l, "modelValue"), A = b(l, "inputValue"), j = D, le = re(), M = x("inputRef"), N = v(0), P = v(!1), F = v(!1), I = v(!1), L = v(-1), R = v(-1), z = v([]), B = r(() => ["uikit-z-30", l.dropdownClasses]), V = null, H = 0, U = x("dropdownRef"), W = x("hiddenSpan"), G = x("inputWrapperRef"), K = x("clearButtonRef"), q = () => {
-			L.value = -1, R.value = -1;
-		}, J = () => {
-			V &&= (clearTimeout(V), null), H += 1, F.value = !1, I.value = !1;
-		}, ue = (e) => {
-			J();
-			let t = H;
-			F.value = !0, V = setTimeout(async () => {
-				V = null, O.value = !0, I.value = !0;
+	setup(l, { expose: u, emit: C }) {
+		let w = g(l, "open"), T = g(l, "modelValue"), E = g(l, "inputValue"), D = C, pe = oe(), O = _("inputRef"), k = h(0), A = h(!1), j = h(!1), M = h(!1), N = h(-1), P = h(-1), F = h([]), I = r(() => ["uikit-z-30", l.dropdownClasses]), L = null, R = 0, z = _("dropdownRef"), B = _("hiddenSpan"), V = _("inputWrapperRef"), H = _("clearButtonRef"), U = () => {
+			N.value = -1, P.value = -1;
+		}, W = () => {
+			L &&= (clearTimeout(L), null), R += 1, j.value = !1, M.value = !1;
+		}, G = !1, K = () => {
+			G = !1, F.value = [];
+		}, q = () => {
+			G && K();
+		}, me = (e) => {
+			W(), q();
+			let t = R;
+			j.value = !0, L = setTimeout(async () => {
+				L = null, w.value = !0, M.value = !0;
 				let n = [];
 				try {
 					n = await l.onInputChangeCb(e);
 				} catch {
 					n = [];
 				}
-				t === H && (z.value = n, q(), F.value = !1, I.value = !1, O.value = !!z.value.length);
+				t === R && (F.value = n, U(), j.value = !1, M.value = !1, w.value = !!F.value.length);
 			}, 300);
+		}, J = () => {
+			W(), K(), w.value = !1, E.value = "", T.value = null, A.value = !1, k.value = 0, U();
 		}, Y = () => {
-			J(), z.value = [], O.value = !1, A.value = "", k.value = null, P.value = !1, N.value = 0, q();
-		}, de = () => {
-			Y();
-		}, fe = (e) => {
+			J();
+		}, he = (e) => {
 			if (!e) {
-				Y();
+				J();
 				return;
 			}
-			if (l.disableCb && e === k.value?.label) {
-				J();
+			if (l.disableCb && e === T.value?.label) {
+				W(), q();
 				return;
 			}
-			ue(e);
-		}, pe = (e) => {
-			j("input", e), P.value = !1, N.value = 0, !e.isComposing && fe(e.target.value);
+			me(e);
+		}, ge = (e) => {
+			D("input", e), A.value = !1, k.value = 0, !e.isComposing && he(e.target.value);
 		}, X = (e = -1, t) => {
-			let n = z.value[e];
-			!n || n.id === k.value?.id || (R.value = e, l.onOptionSelectedCb?.(n, { trigger: t }), A.value = n.label, O.value = !1, k.value = n, P.value = !0, J(), z.value = []);
+			let n = F.value[e];
+			!n || n.id === T.value?.id || (P.value = e, l.onOptionSelectedCb?.(n, { trigger: t }), E.value = n.label, w.value = !1, T.value = n, A.value = !0, W(), G = !0, S(q));
 		}, Z = (e) => {
-			if (!l.enableKeyboardController || !O.value || ![
+			if (!l.enableKeyboardController || !w.value || ![
 				"ArrowUp",
 				"ArrowDown",
 				"Enter",
@@ -102,11 +108,11 @@ var ae = [
 				"End"
 			].includes(e.key)) return;
 			if (e.key === "Escape") {
-				L.value = R.value, O.value = !1, e.stopPropagation();
+				N.value = P.value, w.value = !1, e.stopPropagation();
 				return;
 			}
-			if (!z.value.length) return;
-			let t = z.value.length - 1;
+			if (!F.value.length) return;
+			let t = F.value.length - 1;
 			if ([
 				"ArrowUp",
 				"ArrowDown",
@@ -114,136 +120,136 @@ var ae = [
 				"Home",
 				"PageDown",
 				"End"
-			].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") L.value = L.value <= 0 ? t : L.value - 1;
-			else if (e.key === "ArrowDown") L.value = L.value >= t ? 0 : L.value + 1;
+			].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") N.value = N.value <= 0 ? t : N.value - 1;
+			else if (e.key === "ArrowDown") N.value = N.value >= t ? 0 : N.value + 1;
 			else if (e.key === "Enter") {
-				if (L.value === -1) return;
-				e.preventDefault(), X(L.value, "enter");
-			} else e.key === "PageUp" || e.key === "Home" ? L.value = 0 : (e.key === "PageDown" || e.key === "End") && (L.value = t);
+				if (N.value === -1) return;
+				e.preventDefault(), X(N.value, "enter");
+			} else e.key === "PageUp" || e.key === "Home" ? N.value = 0 : (e.key === "PageDown" || e.key === "End") && (N.value = t);
 			e.stopPropagation();
-		}, me = (e) => {
-			j("keydown", e), Z(e);
-		}, he = () => {
-			M.value?.select();
-		}, ge = () => {
-			M.value?.focus();
+		}, _e = (e) => {
+			D("keydown", e), Z(e);
+		}, ve = () => {
+			O.value?.select();
+		}, ye = () => {
+			O.value?.focus();
 		}, Q = null, $ = () => {
-			if (!P.value) return;
-			let e = W.value, t = G.value, n = K.value;
+			if (!A.value) return;
+			let e = B.value, t = V.value, n = H.value;
 			if (!e || !t) return;
 			let r = e.offsetWidth, i = t.offsetWidth;
 			if (!i) return;
 			let a = l.clearButton?.offset || 0, o = l.clearButton?.width || n?.offsetWidth || 0, s = i - a - o, c = Math.min(r, s);
-			c !== N.value && (N.value = c);
+			c !== k.value && (k.value = c);
 		};
-		return ee(() => {
-			G.value && (Q = new ResizeObserver(() => {
+		return te(() => {
+			V.value && (Q = new ResizeObserver(() => {
 				$();
-			}), Q.observe(G.value));
-		}), te(() => {
-			Q?.disconnect(), J();
-		}), C([
+			}), Q.observe(V.value));
+		}), ne(() => {
+			Q?.disconnect(), W();
+		}), y([
+			E,
 			A,
-			P,
-			W,
-			K
+			B,
+			H
 		], () => {
-			f($);
-		}), C(k, (e) => {
-			if (e?.label === A.value) return;
+			S($);
+		}), y(T, (e) => {
+			if (e?.label === E.value) return;
 			let t = e?.label || "";
-			A.value = t, t && (P.value = !0);
-		}, { immediate: !0 }), d({
-			getRootElement: () => U.value?.getRootElement(),
-			select: he,
-			focus: ge
-		}), (r, d) => (h(), i(t, {
+			E.value = t, t && (A.value = !0);
+		}, { immediate: !0 }), u({
+			getRootElement: () => z.value?.getRootElement(),
+			select: ve,
+			focus: ye
+		}), (r, u) => (p(), i(t, {
 			ref: "dropdownRef",
 			class: "uikit-clearable-autocomplete",
 			"data-cy": l.dataCy,
 			"dropdown-element": "ul",
-			"dropdown-classes": B.value,
+			"dropdown-classes": I.value,
 			"keep-state": l.keepState === "closed" ? "closed" : "opened",
 			"activate-keyboard-controller": !1,
-			open: O.value,
-			"onUpdate:open": d[5] ||= (e) => O.value = e
+			open: w.value,
+			"onUpdate:open": u[5] ||= (e) => w.value = e
 		}, {
-			btn_slot: w(() => [s("div", {
-				class: p(["uikit-text-16", l.triggerWrapperClasses]),
-				onClick: d[2] ||= (e) => j("click", e)
+			btn_slot: b(() => [s("div", {
+				class: d(["uikit-text-16", l.triggerWrapperClasses]),
+				onClick: u[2] ||= (e) => D("click", e)
 			}, [
-				_(r.$slots, "left-icon"),
+				m(r.$slots, "left-icon"),
 				s("div", {
 					ref: "inputWrapperRef",
-					class: p(["uikit-relative", l.inputWrapperClasses])
+					class: d(["uikit-relative", l.inputWrapperClasses])
 				}, [
-					T(s("input", {
+					x(s("input", {
 						ref: "inputRef",
-						"onUpdate:modelValue": d[0] ||= (e) => A.value = e,
-						id: ne(le),
+						"onUpdate:modelValue": u[0] ||= (e) => E.value = e,
+						id: ae(pe),
 						"data-cy": l.dataCy ? `ac_input_${l.dataCy}` : "",
 						type: "text",
 						autocomplete: "off",
-						class: p(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
+						class: d(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
 						style: {
 							font: "inherit",
 							fontSize: "inherit"
 						},
 						placeholder: l.placeholder,
-						onKeydown: me,
-						onInput: pe,
-						onClick: d[1] ||= (e) => {
-							j("inputClick", e), M.value?.select();
+						onKeydown: _e,
+						onInput: ge,
+						onClick: u[1] ||= (e) => {
+							D("inputClick", e), O.value?.select();
 						}
-					}, null, 42, ae), [[ie, A.value]]),
+					}, null, 42, le), [[v, E.value]]),
 					s("span", {
 						ref_key: "hiddenSpan",
-						ref: W,
-						class: p(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", l.hiddenTextClasses]),
+						ref: B,
+						class: d(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", l.hiddenTextClasses]),
 						style: {
 							font: "inherit",
 							fontSize: "inherit"
 						}
-					}, y(A.value), 3),
-					T(s("button", {
+					}, ie(E.value), 3),
+					x(s("button", {
 						ref: "clearButtonRef",
 						type: "button",
-						class: p(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
+						class: d(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
 						"data-cy": l.clearButton?.dataCy || "clear-btn",
 						"aria-label": "Clear input",
-						style: m({
-							left: `${N.value + (l.clearButton?.offset || 0)}px`,
+						style: f({
+							left: `${k.value + (l.clearButton?.offset || 0)}px`,
 							width: l.clearButton?.width ? `${l.clearButton.width}px` : "auto",
 							height: l.clearButton?.height ? `${l.clearButton.height}px` : "auto"
 						}),
-						onClick: E(de, ["stop"])
-					}, [_(r.$slots, "clear-icon", {}, () => [d[6] ||= c("X", -1)])], 14, oe), [[S, P.value && N.value]])
+						onClick: ce(Y, ["stop"])
+					}, [m(r.$slots, "clear-icon", {}, () => [u[6] ||= c("X", -1)])], 14, ue), [[se, A.value && k.value]])
 				], 2),
-				_(r.$slots, "right-icon")
+				m(r.$slots, "right-icon")
 			], 2)]),
-			default: w(() => [
-				I.value && !z.value.length ? _(r.$slots, "loading-state", {}, void 0, void 0, 0) : a("", !0),
-				F.value && z.value.length ? (h(), o("div", se, [...d[7] ||= [s("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : a("", !0),
-				z.value.length ? (h(!0), o(n, { key: 2 }, g(z.value, (t, n, a, o) => {
+			default: b(() => [
+				M.value && !F.value.length ? m(r.$slots, "loading-state", {}, void 0, void 0, 0) : a("", !0),
+				j.value && F.value.length ? (p(), o("div", de, [...u[7] ||= [s("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : a("", !0),
+				F.value.length ? (p(!0), o(n, { key: 2 }, re(F.value, (t, n, a, o) => {
 					let c = [
 						t,
-						L.value === n,
+						N.value === n,
 						l.enableKeyboardController
 					];
-					if (o && o.el && o.key === n && u(o, c)) return o;
-					let d = (h(), i(e, {
+					if (o && o.el && o.key === n && ee(o, c)) return o;
+					let u = (p(), i(e, {
 						key: n,
-						active: L.value === n,
+						active: N.value === n,
 						"focus-on-active": l.enableKeyboardController,
 						class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
 						onClick: (e) => X(n, "click"),
 						onKeydown: Z,
-						onMouseover: (e) => L.value = n
+						onMouseover: (e) => N.value = n
 					}, {
-						default: w(() => [_(r.$slots, "option-content", {
+						default: b(() => [m(r.$slots, "option-content", {
 							option: t,
 							idx: n
-						}, () => [s("span", { innerHTML: t.label }, null, 8, ce)])]),
+						}, () => [s("span", { innerHTML: t.label }, null, 8, fe)])]),
 						_: 2
 					}, 1032, [
 						"active",
@@ -251,8 +257,8 @@ var ae = [
 						"onClick",
 						"onMouseover"
 					]));
-					return d.memo = c, d;
-				}, d, 3), 128)) : a("", !0)
+					return u.memo = c, u;
+				}, u, 3), 128)) : a("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -264,4 +270,4 @@ var ae = [
 	}
 });
 //#endregion
-export { D as default };
+export { C as default };

package/dist/assets/SwiperRootPrimitive2.css

@@ -1 +1 @@
-.swiper.uikit-carousel[data-v-e22604af]{opacity:0}.swiper.uikit-carousel.is-initialized[data-v-e22604af]{opacity:1}
+.swiper.uikit-carousel[data-v-df5f7205]{opacity:0}.swiper.uikit-carousel.is-initialized[data-v-df5f7205]{opacity:1}

package/dist/components/carousel/Primitive/SwiperRootPrimitive.d.ts

@@ -21,6 +21,14 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     rootClasses?: ClassTypeProp;
     swiperOptions?: SwiperRootPrimitiveProps;
+    /**
+     * Slides to promote beyond each edge of the visible window.
+     *
+     * Falls back to `swiperOptions.lazyPreloadPrevNext` when unset, which is how this was
+     * configured before and stays supported - but that option's documented job is Swiper's own
+     * `loading="lazy"` preloading, which these slides do not use. Prefer this prop.
+     */
+    preloadCount?: number;
 }, {
     swiper: import('vue').ShallowRef<Nullable<Swiper>, Nullable<Swiper>>;
     updateSlidesPerView: (value: number) => void;
@@ -33,6 +41,14 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
 }, string, import('vue').PublicProps, Readonly<{
     rootClasses?: ClassTypeProp;
     swiperOptions?: SwiperRootPrimitiveProps;
+    /**
+     * Slides to promote beyond each edge of the visible window.
+     *
+     * Falls back to `swiperOptions.lazyPreloadPrevNext` when unset, which is how this was
+     * configured before and stays supported - but that option's documented job is Swiper's own
+     * `loading="lazy"` preloading, which these slides do not use. Prefer this prop.
+     */
+    preloadCount?: number;
 }> & Readonly<{
     onClick?: (() => any) | undefined;
     onInit?: ((args_0: Swiper) => any) | undefined;
@@ -43,6 +59,8 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     default?: (props: {}) => any;
 } & {
     placeholder?: (props: {}) => any;
+} & {
+    thumbs?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/components/carousel/Primitive/SwiperRootPrimitive.js

@@ -1,6 +1,6 @@
 import e from "../../../_virtual/_plugin-vue_export-helper.js";
 import t, { addModuleDescriptorKey as n, setLazyImagesLoaderKey as r } from "./SwiperRootPrimitive.vue.js";
 //#region lib/components/carousel/Primitive/SwiperRootPrimitive.vue
-var i = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e22604af"]]);
+var i = /*#__PURE__*/ e(t, [["__scopeId", "data-v-df5f7205"]]);
 //#endregion
 export { n as addModuleDescriptorKey, i as default, r as setLazyImagesLoaderKey };

package/dist/components/carousel/Primitive/SwiperRootPrimitive.vue.js

@@ -2,82 +2,98 @@ import { createSwiper as e } from "../../../lazyModules/Swiper/factory.js";
 import { AutoplayModule as t } from "../../../lazyModules/Swiper/Autoplay/factory.js";
 import { KeyboardModule as n } from "../../../lazyModules/Swiper/Keyboard/factory.js";
 import { ZoomModule as r } from "../../../lazyModules/Swiper/Zoom/factory.js";
-import { createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, onMounted as l, openBlock as u, provide as d, renderSlot as f, shallowRef as p, useTemplateRef as m } from "vue";
+import { collectSlideImages as i, startDeferredImageLoad as a, waitForImageLoad as o } from "./deferredImages.js";
+import { createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, renderSlot as g, shallowRef as _, useTemplateRef as v } from "vue";
 import '../../../assets/SwiperRootPrimitive2.css';import '../../../assets/SwiperRootPrimitive.css';//#region lib/components/carousel/Primitive/SwiperRootPrimitive.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "uikit-relative" }, g = {
+var y = { class: "uikit-relative" }, b = {
 	key: 0,
 	class: "uikit-absolute uikit-inset-0"
-}, _ = Symbol(), v = Symbol(), y = /*@__PURE__*/ s({
+}, x = Symbol(), S = Symbol(), C = /*@__PURE__*/ u({
 	__name: "SwiperRootPrimitive",
 	props: {
 		rootClasses: {},
-		swiperOptions: {}
+		swiperOptions: {},
+		preloadCount: {}
 	},
 	emits: [
 		"moved",
 		"click",
 		"init"
 	],
-	setup(s, { expose: y, emit: b }) {
-		let x = b, S = p(null), C = m("root"), w = p(!1), T = !!s.swiperOptions?.keyboard, E = !!s.swiperOptions?.autoplay, D = [], O = !1, k = (e) => {
+	setup(u, { expose: C, emit: w }) {
+		let T = w, E = _(null), D = v("root"), O = _(!1), k = !!u.swiperOptions?.keyboard, A = !!u.swiperOptions?.autoplay, j = [], M = !1, N = (e) => {
 			"requestIdleCallback" in window ? requestIdleCallback(e) : setTimeout(e, 200);
-		}, A = (e, t = "img") => Array.from(e?.querySelectorAll(t) ?? []), j = (e) => {
-			e.src || (e.src = e.dataset.src || "", e.srcset = e.dataset.srcset || "", e.dataset.src = "", e.dataset.srcset = "", e.removeAttribute("lazy"));
-		}, M = (e, t) => {
-			let n = e.params.lazyPreloadPrevNext ?? 0, r = A(e.slides[t]), i = [];
-			for (let r = t - n; r <= t + n; r++) r !== t && (!e.params.loop && (r < 0 || r >= e.slides.length) || i.push(...A(e.slides[r], "img[data-src]")));
+		}, P = (e, t) => e.params.loop ? e.slides[(t % e.slides.length + e.slides.length) % e.slides.length] : e.slides[t], F = (e, t) => {
+			let { params: n } = e, r = u.preloadCount ?? n.lazyPreloadPrevNext ?? 0, a = Math.ceil(typeof n.slidesPerView == "number" ? n.slidesPerView : e.slidesPerViewDynamic()), o = n.centeredSlides ? Math.floor(a / 2) : 0, s = i(P(e, t)), c = [], l = [];
+			for (let s = t - o - r; s <= t + a - 1 - o + r; s++) {
+				if (s === t || !n.loop && (s < 0 || s >= e.slides.length)) continue;
+				let r = i(P(e, s), "img[data-src]");
+				(s >= t - o && s < t + a - o ? c : l).push(...r);
+			}
 			return {
-				visibleImages: r,
-				preloadImages: i
+				visibleImages: s,
+				inViewImages: c,
+				preloadImages: l
 			};
-		}, N = async (e) => {
-			let t = e.complete && e.src ? Promise.resolve() : new Promise((t) => {
-				e.addEventListener("load", () => t(), { once: !0 }), e.addEventListener("error", () => t(), { once: !0 });
+		}, I = (e) => {
+			O.value = !0, T("init", e);
+		}, L = async (e) => {
+			let { visibleImages: t, inViewImages: n, preloadImages: r } = F(e, e.activeIndex), i, s = new Promise((e) => i = setTimeout(e, 6e3)), c = Promise.all(t.map(o)).finally(() => {
+				clearTimeout(i);
 			});
-			j(e), await t, await e.decode?.().catch(() => void 0);
-		}, P = () => {
-			w.value = !0, x("init", S.value);
-		}, F = async (i) => {
-			S.value = await e(i, {
+			await Promise.race([c, s]), n.forEach(a), N(() => {
+				r.forEach(a);
+			}), I(e);
+		}, R = (e) => {
+			let { visibleImages: t, inViewImages: n, preloadImages: r } = F(e, e.activeIndex);
+			[
+				...t,
+				...n,
+				...r
+			].forEach(a);
+		}, z = async (i) => {
+			E.value = await e(i, {
+				...u.swiperOptions,
 				on: {
-					init: async (e) => {
-						let { visibleImages: t, preloadImages: n } = M(e, e.activeIndex), r, i = new Promise((e) => r = setTimeout(e, 6e3)), a = Promise.all(t.map(N)).finally(() => {
-							clearTimeout(r);
-						});
-						await Promise.race([a, i]), k(() => {
-							n.forEach(j);
-						}), P();
-					},
+					...u.swiperOptions?.on,
+					init: (e) => (u.swiperOptions?.on?.init?.(e), L(e)),
 					slideChange: (e) => {
-						x("moved", { activeIndex: e.activeIndex });
-						let { visibleImages: t, preloadImages: n } = M(e, e.activeIndex);
-						[...t, ...n].forEach(j);
+						T("moved", { activeIndex: e.activeIndex }), R(e), u.swiperOptions?.on?.slideChange?.(e);
+					},
+					slidesUpdated: (e) => {
+						O.value && R(e), u.swiperOptions?.on?.slidesUpdated?.(e);
 					}
-				},
-				...s.swiperOptions
+				}
 			}, [
-				r(s.swiperOptions?.zoom),
-				T ? n(s.swiperOptions?.keyboard) : void 0,
-				E ? t(s.swiperOptions.autoplay) : void 0,
-				...D
+				r(u.swiperOptions?.zoom),
+				k ? n(u.swiperOptions?.keyboard) : void 0,
+				A ? t(u.swiperOptions.autoplay) : void 0,
+				...j
 			].filter(Boolean));
 		};
-		return l(() => {
-			C.value && setTimeout(() => F(C.value));
-		}), d(v, (e) => {
-			e && D.push(e);
-		}), d(_, (e) => {
-			e !== O && (O = e);
-		}), y({
-			swiper: S,
+		return p(() => {
+			D.value && setTimeout(() => z(D.value));
+		}), f(() => {
+			let e = E.value;
+			E.value = null, e?.destroy(!0, !1);
+		}), h(S, (e) => {
+			e && j.push(e);
+		}), h(x, (e) => {
+			e !== M && (M = e);
+		}), C({
+			swiper: E,
 			updateSlidesPerView: (e) => {
-				S.value && S.value.params.slidesPerView !== e && (S.value.params.slidesPerView = e, S.value.update());
+				E.value && E.value.params.slidesPerView !== e && (E.value.params.slidesPerView = e, E.value.update());
 			}
-		}), (e, t) => (u(), a("div", h, [o("div", {
-			ref: "root",
-			class: c(["swiper uikit-carousel", [{ "is-initialized": w.value }, s.rootClasses]])
-		}, [f(e.$slots, "default", {}, void 0, !0)], 2), w.value ? i("", !0) : (u(), a("div", g, [f(e.$slots, "placeholder", {}, void 0, !0)]))]));
+		}), (e, t) => (m(), c("div", y, [
+			l("div", {
+				ref: "root",
+				class: d(["swiper uikit-carousel", [{ "is-initialized": O.value }, u.rootClasses]])
+			}, [g(e.$slots, "default", {}, void 0, !0)], 2),
+			O.value ? s("", !0) : (m(), c("div", b, [g(e.$slots, "placeholder", {}, void 0, !0)])),
+			g(e.$slots, "thumbs", {}, void 0, !0)
+		]));
 	}
 });
 //#endregion
-export { v as addModuleDescriptorKey, y as default, _ as setLazyImagesLoaderKey };
+export { S as addModuleDescriptorKey, C as default, x as setLazyImagesLoaderKey };

package/dist/components/carousel/Primitive/SwiperThumbnailPrimitive.d.ts

@@ -0,0 +1,62 @@
+import { Nullable } from '@wikicasa-dev/types';
+import { Swiper, SwiperOptions } from 'swiper/types';
+import { ClassTypeProp } from '../../../UIKit/types';
+/**
+ * `modules` is discarded by `createSwiper`, which builds that list from the descriptors, and
+ * `thumbs` is this component's own concern - it is what wires the strip to the carousel.
+ *
+ * `watchSlidesProgress` and `slideToClickedSlide` are force-assigned by Swiper's thumbs module
+ * when it adopts the strip, so accepting them would be advertising a setting that is silently
+ * reverted.
+ */
+export type SwiperThumbnailPrimitiveProps = Omit<SwiperOptions, "thumbs" | "modules" | "watchSlidesProgress" | "slideToClickedSlide">;
+export type SwiperThumbnailPrimitiveEmits = {
+    /**
+     * Fired right after the strip's own Swiper initialization.
+     */
+    init: [Swiper];
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    dataCy?: string;
+    rootClasses?: ClassTypeProp;
+    wrapperClasses?: ClassTypeProp;
+    swiperOptions?: SwiperThumbnailPrimitiveProps;
+    /**
+     * Thumbnails to promote beyond each edge of the visible window. A rail whose next thumbnail
+     * pops in under the finger reads as broken, so this leans one slide out by default.
+     *
+     * Deliberately not Swiper's `lazyPreloadPrevNext`: that option drives Swiper's own
+     * `loading="lazy"` preloading, which these slides do not use - borrowing it would both
+     * misname the knob and switch on a second preloading pass on every slide change.
+     */
+    preloadCount?: number;
+}, {
+    swiper: import('vue').ShallowRef<Nullable<Swiper>, Nullable<Swiper>>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    init: (args_0: Swiper) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    dataCy?: string;
+    rootClasses?: ClassTypeProp;
+    wrapperClasses?: ClassTypeProp;
+    swiperOptions?: SwiperThumbnailPrimitiveProps;
+    /**
+     * Thumbnails to promote beyond each edge of the visible window. A rail whose next thumbnail
+     * pops in under the finger reads as broken, so this leans one slide out by default.
+     *
+     * Deliberately not Swiper's `lazyPreloadPrevNext`: that option drives Swiper's own
+     * `loading="lazy"` preloading, which these slides do not use - borrowing it would both
+     * misname the knob and switch on a second preloading pass on every slide change.
+     */
+    preloadCount?: number;
+}> & Readonly<{
+    onInit?: ((args_0: Swiper) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/carousel/Primitive/SwiperThumbnailPrimitive.js

@@ -0,0 +1,5 @@
+import e from "./SwiperThumbnailPrimitive.vue.js";
+//#region lib/components/carousel/Primitive/SwiperThumbnailPrimitive.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/carousel/Primitive/SwiperThumbnailPrimitive.vue.js

@@ -0,0 +1,57 @@
+import { createSwiper as e } from "../../../lazyModules/Swiper/factory.js";
+import { FreemodeModule as t } from "../../../lazyModules/Swiper/FreeMode/factory.js";
+import { ThumbsModule as n } from "../../../lazyModules/Swiper/Thumbs/factory.js";
+import { collectSlideImages as r, startDeferredImageLoad as i } from "./deferredImages.js";
+import { addModuleDescriptorKey as a } from "./SwiperRootPrimitive.vue.js";
+import { createElementBlock as o, createElementVNode as s, defineComponent as c, inject as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, renderSlot as p, shallowRef as m, useTemplateRef as h } from "vue";
+//#region lib/components/carousel/Primitive/SwiperThumbnailPrimitive.vue?vue&type=script&setup=true&lang.ts
+var g = ["data-cy"], _ = /*@__PURE__*/ c({
+	__name: "SwiperThumbnailPrimitive",
+	props: {
+		dataCy: {},
+		rootClasses: {},
+		wrapperClasses: {},
+		swiperOptions: {},
+		preloadCount: { default: 1 }
+	},
+	emits: ["init"],
+	setup(c, { expose: _, emit: v }) {
+		let y = v, b = m(null), x = h("root"), S = /* @__PURE__ */ new WeakSet(), C = (e) => {
+			let { slides: t, activeIndex: n, params: a } = e, o = Math.ceil(typeof a.slidesPerView == "number" ? a.slidesPerView : e.slidesPerViewDynamic()), s = a.centeredSlides ? Math.floor(o / 2) : 0, l = Math.max(0, n - s - c.preloadCount), u = Math.min(t.length - 1, n + o - 1 - s + c.preloadCount);
+			for (let e = l; e <= u; e++) {
+				let n = t[e];
+				!n || S.has(n) || (S.add(n), r(n).forEach(i));
+			}
+		}, w = (e) => (t) => {
+			C(t), e?.(t);
+		}, T = {}, E = n(T);
+		l(a, void 0)?.({
+			...E,
+			loader: async () => {
+				let [e] = await Promise.all([E.loader(), D().catch(() => void 0)]);
+				return e;
+			}
+		});
+		async function D() {
+			x.value && (b.value = await e(x.value, {
+				...c.swiperOptions,
+				on: {
+					...c.swiperOptions?.on,
+					init: w(c.swiperOptions?.on?.init),
+					slideChange: w(c.swiperOptions?.on?.slideChange),
+					slidesUpdated: w(c.swiperOptions?.on?.slidesUpdated)
+				}
+			}, c.swiperOptions?.freeMode ? [t(c.swiperOptions.freeMode)] : []), T.swiper = b.value, y("init", b.value));
+		}
+		return d(() => {
+			let e = b.value;
+			b.value = null, e?.destroy(!0, !1);
+		}), _({ swiper: b }), (e, t) => (f(), o("div", {
+			ref: "root",
+			"data-cy": c.dataCy,
+			class: u(["swiper", c.rootClasses])
+		}, [s("div", { class: u(["swiper-wrapper", c.wrapperClasses]) }, [p(e.$slots, "default")], 2)], 10, g));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/carousel/Primitive/deferredImages.d.ts

@@ -0,0 +1,17 @@
+import { Nullable } from '@wikicasa-dev/types';
+/**
+ * Deferred image loading for a Swiper instance.
+ *
+ * Slides opt in by rendering `data-src` / `data-srcset` instead of `src` / `srcset`
+ * (see `SwiperSlideImagePrimitive`'s `lazy` prop). Nothing then loads until one of these
+ * helpers promotes the attributes.
+ *
+ * This exists rather than `loading="lazy"` because Safari does not honour that attribute on
+ * these slides - it fetches every one of them up front, which on a gallery of originals is the
+ * whole page weight. Every carousel that owns its own Swiper instance has to run this itself:
+ * the helpers walk the slides of the instance they are handed, so a second instance (a thumbs
+ * strip) is not covered by the main carousel's pass. Shared here so the two cannot drift.
+ */
+export declare const collectSlideImages: (slide: Nullable<HTMLElement>, selector?: string) => HTMLImageElement[];
+export declare const startDeferredImageLoad: (img: HTMLImageElement) => void;
+export declare const waitForImageLoad: (img: HTMLImageElement) => Promise<void>;

package/dist/components/carousel/Primitive/deferredImages.js

@@ -0,0 +1,11 @@
+//#region lib/components/carousel/Primitive/deferredImages.ts
+var e = (e, t = "img") => Array.from(e?.querySelectorAll(t) ?? []), t = (e) => {
+	e.src || (e.src = e.dataset.src || "", e.srcset = e.dataset.srcset || "", e.dataset.src = "", e.dataset.srcset = "", e.removeAttribute("lazy"));
+}, n = async (e) => {
+	let n = e.complete && e.src ? Promise.resolve() : new Promise((t) => {
+		e.addEventListener("load", () => t(), { once: !0 }), e.addEventListener("error", () => t(), { once: !0 });
+	});
+	t(e), await n, await e.decode?.().catch(() => void 0);
+};
+//#endregion
+export { e as collectSlideImages, t as startDeferredImageLoad, n as waitForImageLoad };

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export { default as SwiperPrimitive } from './components/carousel/Primitive/Swip
 export { default as SwiperPaginationPrimitive } from './components/carousel/Primitive/SwiperPaginationPrimitive';
 export { default as SwiperNavigationPrimitive } from './components/carousel/Primitive/SwiperNavigationPrimitive';
 export { default as SwiperSlideImagePrimitive } from './components/carousel/Primitive/SwiperSlideImagePrimitive';
+export { default as SwiperThumbnailPrimitive } from './components/carousel/Primitive/SwiperThumbnailPrimitive';
 export { default as BaseCard } from './UIKit/Card/BaseCard';
 export { default as CardRootPrimitive } from './UIKit/Card/CardRootPrimitive';
 export { default as CardDescriptionPrimitive } from './UIKit/Card/CardDescriptionPrimitive';

package/dist/index.js

@@ -59,9 +59,10 @@ import re from "./components/carousel/Primitive/SwiperPrimitive.js";
 import ie from "./components/carousel/Primitive/SwiperPaginationPrimitive.js";
 import ae from "./components/carousel/Primitive/SwiperNavigationPrimitive.js";
 import oe from "./components/carousel/Primitive/SwiperSlideImagePrimitive.js";
-import se from "./UIKit/Card/BaseCard.js";
-import ce from "./UIKit/Card/CardRootPrimitive.js";
-import le from "./UIKit/Card/CardDescriptionPrimitive.js";
-import ue from "./UIKit/Card/CardImagePrimitive.js";
-import de from "./UIKit/BaseBreadcrumb.js";
-export { k as AccessibleSelect, t as AccordionContentPrimitive, r as AccordionHeaderPrimitive, i as AccordionItemPrimitive, n as AccordionTriggerPrimitive, e as BaseAccordion, a as BaseAccordionItem, A as BaseAlert, N as BaseAutocomplete, F as BaseBadge, de as BaseBreadcrumb, D as BaseButton, se as BaseCard, I as BaseComplexToggle, O as BaseDropDown, j as BaseFloatingLabel, M as BaseInput, U as BaseModal, L as BasePagination, W as BaseShimmerLoader, R as BaseSlider, Y as BaseSnackbar, h as BaseTab, m as BaseTabView, g as BaseTabs, _ as BaseTabsContent, v as BaseTabsIndicator, y as BaseTabsList, b as BaseTabsTrigger, z as BaseTextarea, B as BaseToggle, V as BaseTooltip, H as BaseUploadFile, le as CardDescriptionPrimitive, ue as CardImagePrimitive, ce as CardRootPrimitive, l as CheckboxBtn, d as CheckboxButtonGroup, u as CheckboxGroup, p as CheckboxGroupItemPrimitive, f as CheckboxGroupPrimitive, P as ClearableAutocomplete, K as DoughnutChart, X as IntersectionObservable, Z as IntersectionObserver, Q as IntersectionObserverProvider, $ as IntersectionObserverTarget, q as LineChart, c as ProgressIndicatorPrimitive, s as ProgressRootPrimitive, x as RadioButton, w as RadioButtonGroup, C as RadioButtonItem, S as RadioGroup, T as RadioGroupItemPrimitive, o as SelectItem, G as ShimmerMultiLine, J as SimpleSlider, E as StaticSpinner, ee as SwiperCarousel, ae as SwiperNavigationPrimitive, ie as SwiperPaginationPrimitive, re as SwiperPrimitive, ne as SwiperRootPrimitive, te as SwiperSlide, oe as SwiperSlideImagePrimitive };
+import se from "./components/carousel/Primitive/SwiperThumbnailPrimitive.js";
+import ce from "./UIKit/Card/BaseCard.js";
+import le from "./UIKit/Card/CardRootPrimitive.js";
+import ue from "./UIKit/Card/CardDescriptionPrimitive.js";
+import de from "./UIKit/Card/CardImagePrimitive.js";
+import fe from "./UIKit/BaseBreadcrumb.js";
+export { k as AccessibleSelect, t as AccordionContentPrimitive, r as AccordionHeaderPrimitive, i as AccordionItemPrimitive, n as AccordionTriggerPrimitive, e as BaseAccordion, a as BaseAccordionItem, A as BaseAlert, N as BaseAutocomplete, F as BaseBadge, fe as BaseBreadcrumb, D as BaseButton, ce as BaseCard, I as BaseComplexToggle, O as BaseDropDown, j as BaseFloatingLabel, M as BaseInput, U as BaseModal, L as BasePagination, W as BaseShimmerLoader, R as BaseSlider, Y as BaseSnackbar, h as BaseTab, m as BaseTabView, g as BaseTabs, _ as BaseTabsContent, v as BaseTabsIndicator, y as BaseTabsList, b as BaseTabsTrigger, z as BaseTextarea, B as BaseToggle, V as BaseTooltip, H as BaseUploadFile, ue as CardDescriptionPrimitive, de as CardImagePrimitive, le as CardRootPrimitive, l as CheckboxBtn, d as CheckboxButtonGroup, u as CheckboxGroup, p as CheckboxGroupItemPrimitive, f as CheckboxGroupPrimitive, P as ClearableAutocomplete, K as DoughnutChart, X as IntersectionObservable, Z as IntersectionObserver, Q as IntersectionObserverProvider, $ as IntersectionObserverTarget, q as LineChart, c as ProgressIndicatorPrimitive, s as ProgressRootPrimitive, x as RadioButton, w as RadioButtonGroup, C as RadioButtonItem, S as RadioGroup, T as RadioGroupItemPrimitive, o as SelectItem, G as ShimmerMultiLine, J as SimpleSlider, E as StaticSpinner, ee as SwiperCarousel, ae as SwiperNavigationPrimitive, ie as SwiperPaginationPrimitive, re as SwiperPrimitive, ne as SwiperRootPrimitive, te as SwiperSlide, oe as SwiperSlideImagePrimitive, se as SwiperThumbnailPrimitive };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.8.1",
+  "version": "2.8.2-alpha.0",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -84,12 +84,12 @@
     "vue-router": "^5.1.0",
     "vue-tsc": "^3.3.3",
     "@wikicasa-dev/tsconfig": "0.0.0",
-    "@wikicasa-dev/eslint-config": "0.0.0",
     "@wikicasa-dev/tailwind-plugins": "0.0.7",
-    "@wikicasa-dev/types": "2.8.0",
+    "@wikicasa-dev/eslint-config": "0.0.0",
     "@wikicasa-dev/svg-icons": "1.3.7",
-    "@wikicasa-dev/utilities": "1.2.11",
-    "@wikicasa-dev/vue-composables": "0.2.0"
+    "@wikicasa-dev/vue-composables": "0.2.0",
+    "@wikicasa-dev/types": "2.8.0",
+    "@wikicasa-dev/utilities": "1.2.11"
   },
   "readme": "ERROR: No README data found!",
   "scripts": {