morya-ui 0.2.2 → 0.2.4

package/dist/gallery/index.js

@@ -1,19 +1,20 @@
 import { r as e } from "../useComponentAttrs-BTYEe61P.js";
 import { t } from "../Icon-DfpIfo2L.js";
 import { t as n } from "../useMenuKeyboard-BedmYE4W.js";
-import { n as r } from "../locale-DYGhxekd.js";
+import { t as r } from "../Scrollbar-DoNZvgX2.js";
+import { n as i } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as i, Transition as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, watch as S, withCtx as C } from "vue";
+import { Fragment as a, Transition as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeProps as p, nextTick as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, watch as C, withCtx as w } from "vue";
 //#region src/components/Gallery/Gallery.vue?vue&type=script&setup=true&lang.ts
-var w = { class: "m-gallery__main" }, T = ["aria-label", "disabled"], E = { class: "m-gallery__stage" }, D = ["src", "alt"], O = {
+var T = { class: "m-gallery__main" }, E = ["aria-label", "disabled"], D = { class: "m-gallery__stage" }, O = ["src", "alt"], k = {
 	key: 0,
 	class: "m-gallery__caption"
-}, k = ["aria-label", "disabled"], A = ["aria-label"], j = [
+}, A = ["aria-label", "disabled"], j = ["aria-label"], M = [
 	"aria-selected",
 	"tabindex",
 	"onClick",
 	"onFocus"
-], M = ["src", "alt"], N = /* @__PURE__ */ d({
+], N = ["src", "alt"], P = /* @__PURE__ */ f({
 	inheritAttrs: !1,
 	__name: "Gallery",
 	props: {
@@ -22,94 +23,102 @@ var w = { class: "m-gallery__main" }, T = ["aria-label", "disabled"], E = { clas
 		activeIndex: { default: 0 }
 	},
 	emits: ["update:activeIndex"],
-	setup(d, { emit: N }) {
-		let P = d, F = x(), { rootAttrs: I } = e(F, () => P.pt), L = N, R = r();
-		function z(e) {
+	setup(f, { emit: P }) {
+		let F = f, I = S(), { rootAttrs: L } = e(I, () => F.pt), R = P, z = i();
+		function B(e) {
 			return typeof e == "string" ? e : e.src;
 		}
-		function B(e) {
+		function V(e) {
 			return typeof e == "string" ? "" : e.alt ?? "";
 		}
-		let V = o(() => P.images[P.activeIndex] ?? P.images[0]), H = o(() => V.value ? z(V.value) : ""), U = o(() => V.value ? B(V.value) : ""), W = o(() => V.value && typeof V.value != "string" ? V.value.caption : void 0);
-		function G(e) {
-			e < 0 || e >= P.images.length || e === P.activeIndex || L("update:activeIndex", e);
-		}
-		function K() {
-			G(Math.max(0, P.activeIndex - 1));
+		let H = s(() => F.images[F.activeIndex] ?? F.images[0]), U = s(() => H.value ? B(H.value) : ""), W = s(() => H.value ? V(H.value) : ""), G = s(() => H.value && typeof H.value != "string" ? H.value.caption : void 0);
+		function K(e) {
+			e < 0 || e >= F.images.length || e === F.activeIndex || R("update:activeIndex", e);
 		}
 		function q() {
-			G(Math.min(P.images.length - 1, P.activeIndex + 1));
+			K(Math.max(0, F.activeIndex - 1));
+		}
+		function J() {
+			K(Math.min(F.images.length - 1, F.activeIndex + 1));
 		}
-		let J = g(null), Y = n({
-			itemCount: () => P.images.length,
+		let Y = _(null), X = n({
+			itemCount: () => F.images.length,
 			orientation: "both",
 			wrap: !1,
-			onActivate: (e) => G(e)
+			onActivate: (e) => K(e)
 		});
-		function X(e) {
-			return Y.activeIndex.value >= 0 ? Y.tabindexFor(e) : e === P.activeIndex ? 0 : -1;
+		function Z(e) {
+			return X.activeIndex.value >= 0 ? X.tabindexFor(e) : e === F.activeIndex ? 0 : -1;
 		}
-		return S(Y.activeIndex, (e) => {
-			e < 0 || (G(e), p(() => {
-				let t = J.value;
+		return C(X.activeIndex, (e) => {
+			e < 0 || (K(e), m(() => {
+				let t = Y.value;
 				!t || !t.contains(document.activeElement) || t.querySelectorAll(".m-gallery__thumb")[e]?.focus({ preventScroll: !0 });
 			}));
-		}), (e, n) => (h(), c("div", f(b(I), { class: "m-gallery" }), [l("div", w, [
-			l("button", {
+		}), (e, n) => (g(), l("div", p(x(L), { class: "m-gallery" }), [u("div", T, [
+			u("button", {
 				type: "button",
 				class: "m-gallery__nav m-gallery__nav--prev",
-				"aria-label": b(R).prevImage,
-				disabled: d.activeIndex <= 0,
-				onClick: K
-			}, [u(t, {
+				"aria-label": x(z).prevImage,
+				disabled: f.activeIndex <= 0,
+				onClick: q
+			}, [d(t, {
 				name: "chevron-left",
 				size: "sm"
-			})], 8, T),
-			l("figure", E, [u(a, {
+			})], 8, E),
+			u("figure", D, [d(o, {
 				name: "m-gallery-fade",
 				mode: "out-in"
 			}, {
-				default: C(() => [V.value ? (h(), c("img", {
-					key: d.activeIndex,
+				default: w(() => [H.value ? (g(), l("img", {
+					key: f.activeIndex,
 					class: "m-gallery__image",
-					src: H.value,
-					alt: U.value
-				}, null, 8, D)) : s("", !0)]),
+					src: U.value,
+					alt: W.value
+				}, null, 8, O)) : c("", !0)]),
 				_: 1
-			}), W.value ? (h(), c("figcaption", O, y(W.value), 1)) : s("", !0)]),
-			l("button", {
+			}), G.value ? (g(), l("figcaption", k, b(G.value), 1)) : c("", !0)]),
+			u("button", {
 				type: "button",
 				class: "m-gallery__nav m-gallery__nav--next",
-				"aria-label": b(R).nextImage,
-				disabled: d.activeIndex >= d.images.length - 1,
-				onClick: q
-			}, [u(t, {
+				"aria-label": x(z).nextImage,
+				disabled: f.activeIndex >= f.images.length - 1,
+				onClick: J
+			}, [d(t, {
 				name: "chevron-right",
 				size: "sm"
-			})], 8, k)
-		]), l("ul", {
-			ref_key: "thumbs",
-			ref: J,
-			class: "m-gallery__thumbs",
-			role: "listbox",
-			"aria-label": b(R).thumbnails,
-			onKeydown: n[0] ||= (...e) => b(Y).onKeydown && b(Y).onKeydown(...e)
-		}, [(h(!0), c(i, null, _(d.images, (t, n) => (h(), c("li", { key: `${z(t)}-${n}` }, [l("button", {
-			type: "button",
-			class: m(["m-gallery__thumb", { "m-gallery__thumb--active": n === d.activeIndex }]),
-			role: "option",
-			"aria-selected": n === d.activeIndex,
-			tabindex: X(n),
-			onClick: (e) => G(n),
-			onFocus: (e) => b(Y).setActive(n)
-		}, [v(e.$slots, "item", {
-			item: t,
-			index: n
-		}, () => [l("img", {
-			src: z(t),
-			alt: B(t)
-		}, null, 8, M)])], 42, j)]))), 128))], 40, A)], 16));
+			})], 8, A)
+		]), d(r, {
+			class: "m-gallery__thumbs-scroll",
+			"fit-content": "",
+			"wrap-class": "m-gallery__thumbs-wrap",
+			"view-class": "m-gallery__thumbs-view"
+		}, {
+			default: w(() => [u("ul", {
+				ref_key: "thumbs",
+				ref: Y,
+				class: "m-gallery__thumbs",
+				role: "listbox",
+				"aria-label": x(z).thumbnails,
+				onKeydown: n[0] ||= (...e) => x(X).onKeydown && x(X).onKeydown(...e)
+			}, [(g(!0), l(a, null, v(f.images, (t, n) => (g(), l("li", { key: `${B(t)}-${n}` }, [u("button", {
+				type: "button",
+				class: h(["m-gallery__thumb", { "m-gallery__thumb--active": n === f.activeIndex }]),
+				role: "option",
+				"aria-selected": n === f.activeIndex,
+				tabindex: Z(n),
+				onClick: (e) => K(n),
+				onFocus: (e) => x(X).setActive(n)
+			}, [y(e.$slots, "item", {
+				item: t,
+				index: n
+			}, () => [u("img", {
+				src: B(t),
+				alt: V(t)
+			}, null, 8, N)])], 42, M)]))), 128))], 40, j)]),
+			_: 3
+		})], 16));
 	}
 });
 //#endregion
-export { N as MGallery };
+export { P as MGallery };