@templatical/media-library 0.39.0 → 0.39.2

package/README.md

@@ -15,7 +15,7 @@ npm install @templatical/media-library
 
 Peer dep: `vue@^3.5`. Not needed next to `@templatical/editor` — that package already contains the modal.
 
-> **Storage.** The library is storage-agnostic. Pass a `MediaProvider` — Cloud's adapter is `createCloudMediaProvider` from `@templatical/core/cloud`. See the [media contract](https://docs.templatical.com/backend/media) and the [Cloud adapter](https://docs.templatical.com/cloud/media-library).
+> **Storage.** The library is storage-agnostic. Pass a `MediaProvider` — Cloud's adapter is `createCloudMediaProvider` from `@templatical/core/cloud`. See the [media contract](https://docs.templatical.com/backend/media).
 
 ## Usage
 
@@ -42,7 +42,7 @@ media.unmount();
 
 ### Vue component
 
-Use `MediaLibraryModal` inside a Vue 3 app. See [docs](https://docs.templatical.com/cloud/media-library) for the full prop reference.
+Use `MediaLibraryModal` inside a Vue 3 app. See the [media contract](https://docs.templatical.com/backend/media) for the provider the modal sits on.
 
 ```ts
 import { MediaLibraryModal } from '@templatical/media-library';
@@ -105,7 +105,6 @@ If you embed `MediaLibraryModal` manually inside another shadow-DOM-mounted UI,
 ## Documentation
 
 - [Media contract](https://docs.templatical.com/backend/media)
-- [Cloud media library](https://docs.templatical.com/cloud/media-library)
 - [Shadow DOM (editor)](https://docs.templatical.com/guide/shadow-dom)
 
 Full reference at **[docs.templatical.com](https://docs.templatical.com)**.

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