morya-ui 0.1.1 → 0.2.1

package/dist/gallery/index.js

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