@templatical/media-library 0.39.1 → 0.39.3

package/dist/MediaEditModal-DltAfTVH.js

@@ -0,0 +1,311 @@
+import { i as e, l as t, n, o as r, r as i, t as a } from "./useFocusTrap-6eIRXtCA.js";
+import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as ee, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, inject as g, normalizeClass as _, normalizeStyle as te, openBlock as v, ref as y, renderList as ne, toDisplayString as b, unref as x, vModelText as S, watch as re, withCtx as ie, withDirectives as C, withModifiers as ae } from "vue";
+import { Cropper as oe } from "vue-advanced-cropper";
+//#region src/composables/useImageCrop.ts
+var se = {
+	free: void 0,
+	square: 1,
+	landscape43: 4 / 3,
+	landscape169: 16 / 9,
+	original: void 0
+};
+function ce(e) {
+	return e === "image/png" || e === "image/gif" ? {
+		mimeType: "image/png",
+		quality: 1
+	} : e === "image/webp" ? {
+		mimeType: "image/webp",
+		quality: .92
+	} : {
+		mimeType: "image/jpeg",
+		quality: .92
+	};
+}
+function le(e, t, n) {
+	let r = e.width, i = e.height;
+	if (!t && !n) return e;
+	let a = r, o = i;
+	if (t && r > t && (a = t, o = Math.round(t / r * i)), n && o > n) {
+		let e = n / o;
+		a = Math.round(a * e), o = n;
+	}
+	if (a === r && o === i) return e;
+	let s = document.createElement("canvas");
+	s.width = a, s.height = o;
+	let c = s.getContext("2d");
+	return c && (c.imageSmoothingEnabled = !0, c.imageSmoothingQuality = "high", c.drawImage(e, 0, 0, a, o)), s;
+}
+function ue(e, t, n) {
+	return new Promise((r, i) => {
+		e.toBlob((e) => {
+			if (!e) {
+				i(/* @__PURE__ */ Error("Failed to create blob from canvas"));
+				return;
+			}
+			let a = n.mimeType.split("/")[1], o = `${t.replace(/\.[^.]+$/, "")}.${a}`;
+			r(new File([e], o, { type: n.mimeType }));
+		}, n.mimeType, n.quality);
+	});
+}
+function de(e, t, n, r) {
+	let i = e, a = t;
+	if (n && i > n) {
+		let e = n / i;
+		i = n, a = Math.round(a * e);
+	}
+	if (r && a > r) {
+		let e = r / a;
+		a = r, i = Math.round(i * e);
+	}
+	return {
+		width: i,
+		height: a
+	};
+}
+//#endregion
+//#region src/components/media/MediaEditModal.vue?vue&type=script&setup=true&lang.ts
+var fe = ["data-tpl-theme"], pe = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, me = {
+	id: "tpl-media-edit-title",
+	class: "tpl:text-sm tpl:font-semibold",
+	style: { color: "var(--tpl-text)" }
+}, he = { class: "tpl:min-h-0 tpl:flex-1 tpl:overflow-y-auto tpl:px-5" }, ge = {
+	key: 0,
+	class: "tpl:mb-4"
+}, _e = {
+	class: "tpl:relative tpl:mb-3 tpl:overflow-hidden tpl:rounded-md tpl:border",
+	style: {
+		"border-color": "var(--tpl-border)",
+		height: "300px",
+		"background-color": "var(--tpl-bg)"
+	}
+}, ve = { class: "tpl:space-y-3" }, ye = {
+	class: "tpl:mb-1.5 tpl:block tpl:text-xs tpl:font-medium",
+	style: { color: "var(--tpl-text-muted)" }
+}, be = { class: "tpl:flex tpl:flex-wrap tpl:gap-1.5" }, xe = ["onClick"], Se = { class: "tpl:flex tpl:gap-3" }, Ce = { class: "tpl:flex-1" }, w = {
+	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+	style: { color: "var(--tpl-text-muted)" }
+}, T = {
+	class: "tpl:font-normal",
+	style: { color: "var(--tpl-text-dim)" }
+}, E = { class: "tpl:relative" }, D = ["value", "placeholder"], O = {
+	class: "tpl:absolute tpl:top-1/2 tpl:right-2.5 tpl:-translate-y-1/2 tpl:text-xs",
+	style: { color: "var(--tpl-text-dim)" }
+}, k = { class: "tpl:flex-1" }, A = {
+	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+	style: { color: "var(--tpl-text-muted)" }
+}, we = {
+	class: "tpl:font-normal",
+	style: { color: "var(--tpl-text-dim)" }
+}, Te = { class: "tpl:relative" }, Ee = ["value", "placeholder"], De = {
+	class: "tpl:absolute tpl:top-1/2 tpl:right-2.5 tpl:-translate-y-1/2 tpl:text-xs",
+	style: { color: "var(--tpl-text-dim)" }
+}, Oe = {
+	key: 0,
+	class: "tpl:flex tpl:items-center tpl:gap-1 tpl:text-xs",
+	style: { color: "var(--tpl-text-muted)" }
+}, ke = {
+	class: "tpl:font-medium",
+	style: { color: "var(--tpl-text)" }
+}, Ae = { class: "tpl:mb-3" }, je = {
+	for: "tpl-media-filename",
+	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+	style: { color: "var(--tpl-text-muted)" }
+}, Me = ["autofocus"], Ne = {
+	key: 1,
+	class: "tpl:mb-4"
+}, Pe = {
+	for: "tpl-media-alt",
+	class: "tpl:mb-1 tpl:block tpl:text-xs tpl:font-medium",
+	style: { color: "var(--tpl-text-muted)" }
+}, j = ["placeholder"], Fe = { class: "tpl:flex tpl:shrink-0 tpl:justify-end tpl:gap-2 tpl:p-5 tpl:pt-4" }, Ie = ["disabled"], M = /*#__PURE__*/ n(/* @__PURE__ */ h({
+	__name: "MediaEditModal",
+	props: {
+		visible: { type: Boolean },
+		item: {}
+	},
+	emits: ["save", "close"],
+	setup(n, { emit: h }) {
+		let M = n, N = h, { t: P } = e(), Le = g(t, null), F = g(r, y(null)), Re = P.mediaLibrary, { isImageMimeType: I } = i(), L = y(""), R = y(""), z = y(null), B = y("free"), V = y(void 0), H = y(void 0), U = y(""), W = y(""), G = y(void 0), K = y(null), q = y(!1), J = y(!1), Y = y(!1), X = l(() => M.item ? [
+			"image/jpeg",
+			"image/png",
+			"image/webp",
+			"image/gif"
+		].includes(M.item.mimeType ?? "") : !1), ze = l(() => B.value === "original" ? G.value : se[B.value]), Z = l(() => K.value ? de(K.value.width, K.value.height, V.value, H.value) : null);
+		re(() => M.visible, (e) => {
+			e && M.item && (L.value = M.item.filename ?? "", R.value = M.item.alt ?? "", B.value = "free", V.value = void 0, H.value = void 0, U.value = "", W.value = "", G.value = void 0, K.value = null, q.value = !1, Y.value = !1, M.item.width && M.item.height && (G.value = M.item.width / M.item.height));
+		});
+		function Be(e) {
+			e.coordinates && (K.value = {
+				width: Math.round(e.coordinates.width),
+				height: Math.round(e.coordinates.height)
+			}, Y.value = !0);
+		}
+		function Ve() {
+			q.value = !0, !G.value && M.item?.width && M.item?.height && (G.value = M.item.width / M.item.height);
+		}
+		function He(e) {
+			let t = e.target.value;
+			U.value = t, V.value = t && parseInt(t, 10) || void 0;
+		}
+		function Ue(e) {
+			let t = e.target.value;
+			W.value = t, H.value = t && parseInt(t, 10) || void 0;
+		}
+		async function Q() {
+			let e = L.value.trim();
+			if (!e || !M.item || J.value) return;
+			let t = I(M.item.mimeType ?? ""), n;
+			if (X.value && z.value && Y.value) {
+				J.value = !0;
+				try {
+					let { canvas: e } = z.value.getResult();
+					if (e) {
+						let t = le(e, V.value, H.value), r = ce(M.item.mimeType ?? "");
+						n = { file: await ue(t, M.item.filename ?? "image", r) };
+					}
+				} catch {
+					J.value = !1;
+					return;
+				}
+				J.value = !1;
+			}
+			N("save", M.item.id, e, t ? R.value : void 0, n), N("close");
+		}
+		let $ = y(null), We = l(() => M.visible && M.item !== null);
+		a($, We);
+		function Ge(e) {
+			if (e.stopPropagation(), e.key === "Enter" && !J.value) {
+				if (e.target?.closest("textarea, [contenteditable]")) return;
+				e.preventDefault(), Q();
+			}
+			e.key === "Escape" && N("close");
+		}
+		return (e, t) => (v(), ee(s, { to: x(F) || "body" }, [m(c, {
+			"enter-active-class": "tpl:transition tpl:ease-out tpl:duration-150",
+			"enter-from-class": "tpl:opacity-0",
+			"enter-to-class": "tpl:opacity-100",
+			"leave-active-class": "tpl:transition tpl:ease-in tpl:duration-100",
+			"leave-from-class": "tpl:opacity-100",
+			"leave-to-class": "tpl:opacity-0"
+		}, {
+			default: ie(() => [n.visible && n.item ? (v(), d("div", {
+				key: 0,
+				"data-tpl-theme": x(Le),
+				class: _([x(F) ? void 0 : "tpl", "tpl:fixed tpl:inset-0 tpl:z-10 tpl:flex tpl:items-center tpl:justify-center tpl:p-4"]),
+				style: { "background-color": "var(--tpl-overlay)" },
+				onClick: t[3] ||= ae((e) => N("close"), ["self"]),
+				onKeydown: Ge
+			}, [f("div", {
+				ref_key: "dialogRef",
+				ref: $,
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "tpl-media-edit-title",
+				class: _(["tpl:flex tpl:max-h-[90%] tpl:w-full tpl:flex-col tpl:overflow-hidden tpl:rounded-lg tpl:shadow-xl", X.value ? "tpl:max-w-2xl" : "tpl:max-w-sm"]),
+				style: { "background-color": "var(--tpl-bg-elevated)" }
+			}, [
+				f("div", pe, [f("h3", me, b(x(P).mediaLibrary.editFile), 1)]),
+				f("div", he, [
+					X.value ? (v(), d("div", ge, [f("div", _e, [m(x(oe), {
+						ref_key: "cropperRef",
+						ref: z,
+						src: n.item.url,
+						"stencil-props": { aspectRatio: ze.value },
+						class: "tpl:h-full tpl:w-full",
+						"background-class": "tpl-cropper-background",
+						onChange: Be,
+						onReady: Ve
+					}, null, 8, ["src", "stencil-props"])]), f("div", ve, [
+						f("div", null, [f("label", ye, b(x(P).mediaLibrary.cropAspectRatio), 1), f("div", be, [(v(), d(o, null, ne([
+							"free",
+							"square",
+							"landscape43",
+							"landscape169",
+							"original"
+						], (e) => f("button", {
+							key: e,
+							type: "button",
+							class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+							style: te({
+								borderColor: B.value === e ? "var(--tpl-primary)" : "var(--tpl-border)",
+								backgroundColor: B.value === e ? "var(--tpl-primary-light)" : "var(--tpl-bg)",
+								color: B.value === e ? "var(--tpl-primary)" : "var(--tpl-text)"
+							}),
+							onClick: (t) => B.value = e
+						}, b(x(Re)[`crop${e.charAt(0).toUpperCase()}${e.slice(1)}`]), 13, xe)), 64))])]),
+						f("div", Se, [f("div", Ce, [f("label", w, [p(b(x(P).mediaLibrary.cropMaxWidth) + " ", 1), f("span", T, b(x(P).mediaLibrary.cropOptional), 1)]), f("div", E, [f("input", {
+							value: U.value,
+							type: "number",
+							min: "1",
+							class: "tpl:w-full tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-8 tpl:pl-3 tpl:text-xs tpl:outline-none",
+							style: {
+								"border-color": "var(--tpl-border)",
+								"background-color": "var(--tpl-bg)",
+								color: "var(--tpl-text)"
+							},
+							placeholder: K.value?.width?.toString() || "",
+							onInput: He
+						}, null, 40, D), f("span", O, b(x(P).mediaLibrary.cropPixels), 1)])]), f("div", k, [f("label", A, [p(b(x(P).mediaLibrary.cropMaxHeight) + " ", 1), f("span", we, b(x(P).mediaLibrary.cropOptional), 1)]), f("div", Te, [f("input", {
+							value: W.value,
+							type: "number",
+							min: "1",
+							class: "tpl:w-full tpl:rounded-md tpl:border tpl:py-1.5 tpl:pr-8 tpl:pl-3 tpl:text-xs tpl:outline-none",
+							style: {
+								"border-color": "var(--tpl-border)",
+								"background-color": "var(--tpl-bg)",
+								color: "var(--tpl-text)"
+							},
+							placeholder: K.value?.height?.toString() || "",
+							onInput: Ue
+						}, null, 40, Ee), f("span", De, b(x(P).mediaLibrary.cropPixels), 1)])])]),
+						Z.value ? (v(), d("div", Oe, [f("span", null, b(x(P).mediaLibrary.cropOutputSize) + ": ", 1), f("span", ke, b(Z.value.width) + " x " + b(Z.value.height) + " " + b(x(P).mediaLibrary.cropPixels), 1)])) : u("", !0)
+					])])) : u("", !0),
+					f("div", Ae, [f("label", je, b(x(P).mediaLibrary.fileName), 1), C(f("input", {
+						id: "tpl-media-filename",
+						"onUpdate:modelValue": t[0] ||= (e) => L.value = e,
+						type: "text",
+						class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
+						style: {
+							"border-color": "var(--tpl-border)",
+							"background-color": "var(--tpl-bg)",
+							color: "var(--tpl-text)"
+						},
+						autofocus: !X.value
+					}, null, 8, Me), [[S, L.value]])]),
+					x(I)(n.item.mimeType ?? "") ? (v(), d("div", Ne, [f("label", Pe, b(x(P).mediaLibrary.altText), 1), C(f("input", {
+						id: "tpl-media-alt",
+						"onUpdate:modelValue": t[1] ||= (e) => R.value = e,
+						type: "text",
+						class: "tpl:w-full tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:outline-none",
+						style: {
+							"border-color": "var(--tpl-border)",
+							"background-color": "var(--tpl-bg)",
+							color: "var(--tpl-text)"
+						},
+						placeholder: x(P).mediaLibrary.altTextPlaceholder
+					}, null, 8, j), [[S, R.value]])])) : u("", !0)
+				]),
+				f("div", Fe, [f("button", {
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:border tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+					style: {
+						"border-color": "var(--tpl-border)",
+						color: "var(--tpl-text)",
+						"background-color": "var(--tpl-bg)"
+					},
+					onClick: t[2] ||= (e) => N("close")
+				}, b(x(P).mediaLibrary.cancel), 1), f("button", {
+					class: "tpl:cursor-pointer tpl:rounded-md tpl:px-3 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-primary-hover)] tpl:disabled:cursor-not-allowed tpl:disabled:opacity-50",
+					style: {
+						"background-color": "var(--tpl-primary)",
+						color: "var(--tpl-on-primary)"
+					},
+					disabled: J.value,
+					onClick: Q
+				}, b(J.value ? x(P).mediaLibrary.saving : x(P).mediaLibrary.saveChanges), 9, Ie)])
+			], 2)], 42, fe)) : u("", !0)]),
+			_: 1
+		})], 8, ["to"]));
+	}
+}), [["__scopeId", "data-v-6bdfafa4"]]);
+//#endregion
+export { M as default };

package/dist/{ca-CGf3MuE2.js → ca-B1Ig3u8O.js}

@@ -77,6 +77,15 @@ var e = { mediaLibrary: {
 	cropOutputSize: "Mida de sortida",
 	cropPixels: "px",
 	cropOptional: "(opcional)",
+	close: "Tanca",
+	searchAriaLabel: "Cerca fitxers",
+	filterAriaLabel: "Filtra per tipus",
+	filesListAriaLabel: "Fitxers",
+	loading: "S'està carregant",
+	expandFolder: "Expandeix la carpeta",
+	collapseFolder: "Redueix la carpeta",
+	deleteFolder: "Suprimeix la carpeta",
+	deleteFolderConfirm: "Confirma la supressió",
 	storageTooltip: "{used} de {total} utilitzats ({remaining} restants)"
 } };
 //#endregion