morya-ui 0.3.8 → 0.4.1

package/dist/image/index.js

@@ -0,0 +1,180 @@
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-od9Ob-Ay.js";
+import { n } from "../locale-Dnk0UIie.js";
+import "./style.js";
+import { Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, inject as d, mergeProps as f, normalizeStyle as p, onBeforeUnmount as m, onMounted as h, openBlock as g, provide as _, ref as v, renderSlot as y, unref as b, useAttrs as x, watch as S, withModifiers as C } from "vue";
+//#region src/components/Image/types.ts
+var w = Symbol("mImagePreviewGroup"), T = ["aria-label"], E = ["src", "alt"], D = ["src", "alt"], O = ["aria-label"], k = ["aria-label"], A = ["src", "alt"], j = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "Image",
+	props: {
+		pt: {},
+		src: {},
+		alt: {},
+		width: {},
+		height: {},
+		preview: {
+			type: Boolean,
+			default: !0
+		},
+		previewSrc: {},
+		fit: { default: "cover" }
+	},
+	emits: ["click-preview"],
+	setup(u, { emit: _ }) {
+		let y = u, j = _, M = x(), { rootAttrs: N } = e(M, () => y.pt), P = n(), F = d(w, null), I = v(!1), L = v(null), R = i(() => y.previewSrc || y.src), z = i(() => y.preview !== !1), B = i(() => {
+			let e = { objectFit: y.fit };
+			return y.width != null && (e.width = typeof y.width == "number" ? `${y.width}px` : y.width), y.height != null && (e.height = typeof y.height == "number" ? `${y.height}px` : y.height), e;
+		}), V = i(() => ["m-image", { "m-image--preview": z.value }]);
+		h(() => {
+			F && (L.value = F.register(R.value));
+		}), S(R, (e) => {
+			!F || L.value == null || (F.unregister(L.value), L.value = F.register(e));
+		}), m(() => {
+			F && L.value != null && F.unregister(L.value);
+		});
+		function H() {
+			if (z.value) {
+				if (j("click-preview"), F && L.value != null) {
+					F.openAt(L.value);
+					return;
+				}
+				I.value = !0;
+			}
+		}
+		function U() {
+			I.value = !1;
+		}
+		function W(e) {
+			e.key === "Escape" && U();
+		}
+		return S(I, (e) => {
+			e ? document.addEventListener("keydown", W) : document.removeEventListener("keydown", W);
+		}), m(() => {
+			document.removeEventListener("keydown", W);
+		}), (e, n) => (g(), s("div", f(b(N), { class: V.value }), [z.value ? (g(), s("button", {
+			key: 0,
+			type: "button",
+			class: "m-image__trigger",
+			"aria-label": u.alt || b(P).previewFile,
+			onClick: H
+		}, [c("img", {
+			class: "m-image__img",
+			src: u.src,
+			alt: u.alt,
+			style: p(B.value)
+		}, null, 12, E)], 8, T)) : (g(), s("img", {
+			key: 1,
+			class: "m-image__img",
+			src: u.src,
+			alt: u.alt,
+			style: p(B.value)
+		}, null, 12, D)), (g(), a(r, { to: "body" }, [I.value ? (g(), s("div", {
+			key: 0,
+			class: "m-image-preview",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": b(P).previewFile,
+			onClick: C(U, ["self"])
+		}, [c("button", {
+			type: "button",
+			class: "m-image-preview__close",
+			"aria-label": b(P).close,
+			onClick: U
+		}, [l(t, {
+			name: "close",
+			size: "md"
+		})], 8, k), c("img", {
+			class: "m-image-preview__img",
+			src: R.value,
+			alt: u.alt
+		}, null, 8, A)], 8, O)) : o("", !0)]))], 16));
+	}
+}), M = ["aria-label"], N = ["aria-label"], P = ["aria-label"], F = ["src"], I = ["aria-label"], L = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "ImagePreviewGroup",
+	props: { pt: {} },
+	setup(u) {
+		let d = u, p = x(), { rootAttrs: h } = e(p, () => d.pt), T = n(), E = 0, D = v([]), O = v(!1), k = v(0), A = i(() => D.value.map((e) => e.src));
+		function j(e) {
+			let t = E++;
+			return D.value = [...D.value, {
+				id: t,
+				src: e
+			}], t;
+		}
+		function L(e) {
+			D.value = D.value.filter((t) => t.id !== e);
+		}
+		function R(e) {
+			let t = D.value.findIndex((t) => t.id === e);
+			t < 0 || (k.value = t, O.value = !0);
+		}
+		function z() {
+			O.value = !1;
+		}
+		function B() {
+			A.value.length !== 0 && (k.value = (k.value - 1 + A.value.length) % A.value.length);
+		}
+		function V() {
+			A.value.length !== 0 && (k.value = (k.value + 1) % A.value.length);
+		}
+		function H(e) {
+			O.value && (e.key === "Escape" && z(), e.key === "ArrowLeft" && B(), e.key === "ArrowRight" && V());
+		}
+		return S(O, (e) => {
+			e ? document.addEventListener("keydown", H) : document.removeEventListener("keydown", H);
+		}), m(() => document.removeEventListener("keydown", H)), _(w, {
+			register: j,
+			unregister: L,
+			openAt: R,
+			previewOpen: O,
+			activeIndex: k,
+			images: A
+		}), (e, n) => (g(), s("div", f(b(h), { class: "m-image-group" }), [y(e.$slots, "default"), (g(), a(r, { to: "body" }, [O.value && A.value.length ? (g(), s("div", {
+			key: 0,
+			class: "m-image-preview",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": b(T).previewFile,
+			onClick: C(z, ["self"])
+		}, [
+			c("button", {
+				type: "button",
+				class: "m-image-preview__close",
+				"aria-label": b(T).close,
+				onClick: z
+			}, [l(t, {
+				name: "close",
+				size: "md"
+			})], 8, N),
+			A.value.length > 1 ? (g(), s("button", {
+				key: 0,
+				type: "button",
+				class: "m-image-preview__nav m-image-preview__nav--prev",
+				"aria-label": b(T).prevImage,
+				onClick: B
+			}, [l(t, {
+				name: "chevron-left",
+				size: "md"
+			})], 8, P)) : o("", !0),
+			c("img", {
+				class: "m-image-preview__img",
+				src: A.value[k.value],
+				alt: ""
+			}, null, 8, F),
+			A.value.length > 1 ? (g(), s("button", {
+				key: 1,
+				type: "button",
+				class: "m-image-preview__nav m-image-preview__nav--next",
+				"aria-label": b(T).nextImage,
+				onClick: V
+			}, [l(t, {
+				name: "chevron-right",
+				size: "md"
+			})], 8, I)) : o("", !0)
+		], 8, M)) : o("", !0)]))], 16));
+	}
+});
+//#endregion
+export { j as MImage, L as MImagePreviewGroup };