@templatical/media-library 0.2.0 → 0.2.1

package/dist/templatical-media-library.js

@@ -1,6 +1,6 @@
 import { API_ROUTES as e, ApiClient as t, buildUrl as n, createSdkAuthManager as r } from "@templatical/core/cloud";
 import { Fragment as i, Teleport as a, Transition as o, computed as s, createApp as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, h as g, inject as _, isRef as v, normalizeClass as y, normalizeStyle as b, onMounted as x, openBlock as S, provide as C, ref as w, renderList as T, resolveComponent as E, toDisplayString as D, unref as O, vModelText as k, watch as A, withCtx as j, withDirectives as M, withKeys as N, withModifiers as P } from "vue";
-import { Check as F, ChevronRight as I, Copy as L, File as R, Folder as z, Grid2x2 as B, Link as V, List as H, LoaderCircle as U, PanelLeft as W, Pencil as G, Plus as K, RefreshCw as q, Search as J, Star as ee, Trash2 as Y, Upload as X, X as te } from "@lucide/vue";
+import { Check as F, ChevronRight as I, Copy as L, File as R, Folder as z, Grid2x2 as B, Link as V, List as H, LoaderCircle as U, PanelLeft as W, Pencil as G, Plus as K, RefreshCw as q, Search as J, Star as Y, Trash2 as ee, Upload as X, X as te } from "@lucide/vue";
 import { Cropper as ne } from "vue-advanced-cropper";
 import { onClickOutside as re, useClipboard as ie, useDebounceFn as ae, useDropZone as oe, useEventListener as se, useFileDialog as ce, useIntersectionObserver as le } from "@vueuse/core";
 //#region src/api-client.ts
@@ -162,8 +162,9 @@ var ue = class {
 //#region src/composable.ts
 function de(e) {
 	if (!e.projectId) throw Error("projectId is required for useMediaLibrary");
-	let t = new ue(e.authManager), n = w([]), r = w([]), i = w(null), a = w("files"), o = w(""), s = w(null), c = w("newest"), l = w(!1), u = w(!1), d = w(!1), f = w(null), p = w(null), m = w(/* @__PURE__ */ new Set()), h = w(null), g = w([]), _ = w({}), v = w(!1), y = w([]), b = w(!1), x = w(null), S = w(!1), C = w(null), T = w(!1), E = w(null), D = w(null);
-	async function O() {
+	let t = new ue(e.authManager), n = w([]), r = w([]), i = w(null), a = w("files"), o = w(""), s = w(null), c = w("newest"), l = w(!1), u = w(!1), d = w(!1), f = w(null), p = w(null), m = w(/* @__PURE__ */ new Set()), h = w(null), g = w([]), _ = w({}), v = w(!1), y = w([]), b = w(!1), x = w(null), S = w(!1), C = w(null), T = w(!1), E = w(null), D = w(null), O = 0;
+	async function k() {
+		let r = ++O;
 		l.value = !0;
 		try {
 			let e = await t.browseMedia({
@@ -172,48 +173,52 @@ function de(e) {
 				category: s.value || void 0,
 				sort: c.value === "newest" ? void 0 : c.value
 			});
+			if (r !== O) return;
 			n.value = e.data, f.value = e.meta.next_cursor, d.value = !!e.meta.next_cursor;
 		} catch (t) {
+			if (r !== O) return;
 			e.onError?.(t);
 		} finally {
-			l.value = !1;
+			r === O && (l.value = !1);
 		}
 	}
-	async function k() {
-		if (!(!d.value || !f.value || l.value)) {
-			l.value = !0;
-			try {
-				let e = await t.browseMedia({
-					folder_id: o.value ? void 0 : i.value,
-					search: o.value || void 0,
-					category: s.value || void 0,
-					sort: c.value === "newest" ? void 0 : c.value,
-					cursor: f.value
-				});
-				n.value = [...n.value, ...e.data], f.value = e.meta.next_cursor, d.value = !!e.meta.next_cursor;
-			} catch (t) {
-				e.onError?.(t);
-			} finally {
-				l.value = !1;
-			}
+	async function A() {
+		if (!d.value || !f.value || l.value) return;
+		let r = ++O;
+		l.value = !0;
+		try {
+			let e = await t.browseMedia({
+				folder_id: o.value ? void 0 : i.value,
+				search: o.value || void 0,
+				category: s.value || void 0,
+				sort: c.value === "newest" ? void 0 : c.value,
+				cursor: f.value
+			});
+			if (r !== O) return;
+			n.value = [...n.value, ...e.data], f.value = e.meta.next_cursor, d.value = !!e.meta.next_cursor;
+		} catch (t) {
+			if (r !== O) return;
+			e.onError?.(t);
+		} finally {
+			r === O && (l.value = !1);
 		}
 	}
-	async function A(e) {
-		o.value = e, await O();
-	}
 	async function j(e) {
-		s.value = e, await O();
+		o.value = e, await k();
 	}
 	async function M(e) {
-		c.value = e, await O();
+		s.value = e, await k();
 	}
 	async function N(e) {
-		a.value = "files", i.value = e, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await O();
+		c.value = e, await k();
 	}
-	async function P() {
-		a.value = "frequently-used", i.value = null, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await B();
+	async function P(e) {
+		a.value = "files", i.value = e, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await k();
+	}
+	async function F() {
+		a.value = "frequently-used", i.value = null, o.value = "", m.value = /* @__PURE__ */ new Set(), h.value = null, await V();
 	}
-	async function F(r) {
+	async function I(r) {
 		u.value = !0;
 		try {
 			let e = await t.uploadMedia(r, i.value);
@@ -224,7 +229,7 @@ function de(e) {
 			u.value = !1;
 		}
 	}
-	async function I(r) {
+	async function L(r) {
 		u.value = !0, p.value = {
 			current: 0,
 			total: r.length
@@ -245,7 +250,7 @@ function de(e) {
 			u.value = !1, p.value = null;
 		}
 	}
-	async function L(r) {
+	async function R(r) {
 		if (m.value.size !== 0) try {
 			let e = await t.moveMedia([...m.value], r);
 			if (i.value === null) {
@@ -257,7 +262,7 @@ function de(e) {
 			e.onError?.(t);
 		}
 	}
-	async function R(r, i, a) {
+	async function z(r, i, a) {
 		try {
 			let e = await t.updateMedia(r, i, a);
 			n.value = n.value.map((t) => t.id === r ? e : t), h.value?.id === r && (h.value = e);
@@ -265,21 +270,21 @@ function de(e) {
 			e.onError?.(t);
 		}
 	}
-	async function z() {
+	async function B() {
 		if (m.value.size !== 0) try {
 			await t.deleteMedia([...m.value]), n.value = n.value.filter((e) => !m.value.has(e.id)), g.value = g.value.filter((e) => !m.value.has(e.id)), m.value = /* @__PURE__ */ new Set(), h.value = null;
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function B() {
+	async function V() {
 		try {
 			g.value = await t.getFrequentlyUsed();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function V() {
+	async function H() {
 		if (m.value.size === 0) return !1;
 		y.value = [...m.value];
 		try {
@@ -291,17 +296,17 @@ function de(e) {
 			return e.onError?.(t), !1;
 		}
 	}
-	async function H() {
+	async function U() {
 		if (v.value = !1, y.value.length !== 0) try {
 			await t.deleteMedia(y.value), n.value = n.value.filter((e) => !y.value.includes(e.id)), g.value = g.value.filter((e) => !y.value.includes(e.id)), m.value = /* @__PURE__ */ new Set(), h.value = null, y.value = [], _.value = {};
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	function U() {
+	function W() {
 		v.value = !1, y.value = [], _.value = {};
 	}
-	async function W(r) {
+	async function G(r) {
 		b.value = !0, x.value = null;
 		try {
 			let e = await t.importFromUrl(r, i.value);
@@ -312,17 +317,17 @@ function de(e) {
 			b.value = !1;
 		}
 	}
-	function G(e) {
+	function K(e) {
 		let t = new Set(m.value);
 		t.has(e) ? t.delete(e) : t.add(e), m.value = t;
 	}
-	function K() {
+	function q() {
 		m.value = /* @__PURE__ */ new Set(), h.value = null;
 	}
-	function q(e) {
+	function J(e) {
 		h.value = e, m.value = new Set([e.id]);
 	}
-	async function J() {
+	async function Y() {
 		try {
 			r.value = await t.getMediaFolders();
 		} catch (t) {
@@ -332,37 +337,37 @@ function de(e) {
 	async function ee(n, r) {
 		try {
 			let e = await t.createMediaFolder(n, r);
-			return await J(), e;
+			return await Y(), e;
 		} catch (t) {
 			return e.onError?.(t), null;
 		}
 	}
-	function Y(e, t) {
+	function X(e, t) {
 		for (let n of e) {
 			if (n.id === t) return n;
 			if (n.children) {
-				let e = Y(n.children, t);
+				let e = X(n.children, t);
 				if (e) return e;
 			}
 		}
 		return null;
 	}
-	async function X(n, r) {
+	async function te(n, r) {
 		try {
-			await t.renameMediaFolder(n, r), await J();
+			await t.renameMediaFolder(n, r), await Y();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function te(n) {
+	async function ne(n) {
 		try {
-			let e = Y(r.value, n)?.parent_id ?? null;
-			await t.deleteMediaFolder(n), i.value === n && (i.value = e), await J(), await O();
+			let e = X(r.value, n)?.parent_id ?? null;
+			await t.deleteMediaFolder(n), i.value === n && (i.value = e), await Y(), await k();
 		} catch (t) {
 			e.onError?.(t);
 		}
 	}
-	async function ne(n) {
+	async function re(n) {
 		E.value = n, C.value = null;
 		try {
 			D.value = (await t.checkMediaUsage([n.id])).data[n.id] ?? null, T.value = !0;
@@ -370,10 +375,10 @@ function de(e) {
 			e.onError?.(t);
 		}
 	}
-	function re() {
+	function ie() {
 		T.value = !1, E.value = null, D.value = null, C.value = null;
 	}
-	async function ie(r) {
+	async function ae(r) {
 		if (!E.value) return null;
 		S.value = !0, C.value = null;
 		try {
@@ -385,7 +390,7 @@ function de(e) {
 			S.value = !1;
 		}
 	}
-	async function ae(r, i) {
+	async function oe(r, i) {
 		try {
 			let e = await t.replaceMedia(r, i);
 			return n.value = n.value.map((t) => t.id === e.id ? e : t), g.value = g.value.map((t) => t.id === e.id ? e : t), h.value?.id === e.id && (h.value = e), e;
@@ -410,42 +415,42 @@ function de(e) {
 		frequentlyUsedItems: g,
 		deleteUsageInfo: _,
 		showDeleteWarning: v,
-		loadItems: O,
-		loadMore: k,
-		search: A,
-		filterByCategory: j,
-		sortBy: M,
-		navigateToFolder: N,
-		showFrequentlyUsed: P,
-		uploadFile: F,
-		uploadFiles: I,
-		moveSelected: L,
-		updateFile: R,
-		deleteSelected: z,
+		loadItems: k,
+		loadMore: A,
+		search: j,
+		filterByCategory: M,
+		sortBy: N,
+		navigateToFolder: P,
+		showFrequentlyUsed: F,
+		uploadFile: I,
+		uploadFiles: L,
+		moveSelected: R,
+		updateFile: z,
+		deleteSelected: B,
 		isImportingFromUrl: b,
 		importFromUrlError: x,
-		importFromUrl: W,
-		toggleSelection: G,
-		clearSelection: K,
-		selectItem: q,
-		loadFolders: J,
+		importFromUrl: G,
+		toggleSelection: K,
+		clearSelection: q,
+		selectItem: J,
+		loadFolders: Y,
 		createFolder: ee,
-		renameFolder: X,
-		deleteFolder: te,
-		findFolderInTree: Y,
-		loadFrequentlyUsed: B,
-		checkUsageBeforeDelete: V,
-		confirmDelete: H,
-		cancelDelete: U,
+		renameFolder: te,
+		deleteFolder: ne,
+		findFolderInTree: X,
+		loadFrequentlyUsed: V,
+		checkUsageBeforeDelete: H,
+		confirmDelete: U,
+		cancelDelete: W,
 		isReplacing: S,
 		replaceError: C,
 		showReplaceWarning: T,
 		pendingReplaceItem: E,
 		replaceUsageInfo: D,
-		checkUsageBeforeReplace: ne,
-		cancelReplace: re,
-		replaceFile: ie,
-		replaceMediaDirectly: ae
+		checkUsageBeforeReplace: re,
+		cancelReplace: ie,
+		replaceFile: ae,
+		replaceMediaDirectly: oe
 	};
 }
 //#endregion
@@ -666,11 +671,11 @@ var xe = ["data-tpl-theme"], Se = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ce
 		function J() {
 			V.value = !0, !z.value && n.item?.width && n.item?.height && (z.value = n.item.width / n.item.height);
 		}
-		function ee(e) {
+		function Y(e) {
 			let t = e.target.value;
 			L.value = t, F.value = t && parseInt(t, 10) || void 0;
 		}
-		function Y(e) {
+		function ee(e) {
 			let t = e.target.value;
 			R.value = t, I.value = t && parseInt(t, 10) || void 0;
 		}
@@ -756,7 +761,7 @@ var xe = ["data-tpl-theme"], Se = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ce
 								color: "var(--tpl-text)"
 							},
 							placeholder: B.value?.width?.toString() || "",
-							onInput: ee
+							onInput: Y
 						}, null, 40, Ie), f("span", Le, D(O(c).mediaLibrary.cropPixels), 1)])]), f("div", Re, [f("label", ze, [p(D(O(c).mediaLibrary.cropMaxHeight) + " ", 1), f("span", Be, D(O(c).mediaLibrary.cropOptional), 1)]), f("div", Ve, [f("input", {
 							value: R.value,
 							type: "number",
@@ -768,7 +773,7 @@ var xe = ["data-tpl-theme"], Se = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ce
 								color: "var(--tpl-text)"
 							},
 							placeholder: B.value?.height?.toString() || "",
-							onInput: Y
+							onInput: ee
 						}, null, 40, He), f("span", Ue, D(O(c).mediaLibrary.cropPixels), 1)])])]),
 						K.value ? (S(), d("div", We, [f("span", null, D(O(c).mediaLibrary.cropOutputSize) + ": ", 1), f("span", Ge, D(K.value.width) + " x " + D(K.value.height) + " " + D(O(c).mediaLibrary.cropPixels), 1)])) : u("", !0)
 					])])) : u("", !0),
@@ -930,7 +935,7 @@ var xe = ["data-tpl-theme"], Se = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ce
 					f("button", {
 						class: "tpl:flex tpl:size-6 tpl:items-center tpl:justify-center tpl:rounded tpl:transition-colors",
 						onClick: n[3] ||= P((t) => r("deleteFolder", e.folder.id), ["stop"])
-					}, [m(O(Y), {
+					}, [m(O(ee), {
 						size: 12,
 						"stroke-width": 2,
 						style: { color: "var(--tpl-danger)" }
@@ -1053,7 +1058,7 @@ var xe = ["data-tpl-theme"], Se = { class: "tpl:shrink-0 tpl:p-5 tpl:pb-4" }, Ce
 					color: e.viewMode === "frequently-used" ? "var(--tpl-primary)" : "var(--tpl-text)"
 				}),
 				onClick: g[6] ||= (e) => n("showFrequentlyUsed")
-			}, [m(O(ee), {
+			}, [m(O(Y), {
 				size: 14,
 				"stroke-width": 1.5
 			}), p(" " + D(O(r).mediaLibrary.frequentlyUsed), 1)], 4)) : u("", !0)
@@ -3001,11 +3006,10 @@ var $ = null, Pi = w(null);
 async function Fi(e) {
 	let n = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!n) throw Error(`Container element not found: ${e.container}`);
-	$ && Ii();
 	let i = r(e.auth, e.onError);
 	await i.initialize();
 	let a = await new t(i).fetchConfig(), o = await Ni(e.locale ?? "en");
-	return Li(n, e.theme), new Promise((t, r) => {
+	return Li(n, e.theme), $ && Ii(), new Promise((t, r) => {
 		try {
 			$ = c({ setup() {
 				let r = () => {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@templatical/media-library",
   "description": "Media library management for Templatical email editor",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "bugs": "https://github.com/templatical/sdk/issues",
   "dependencies": {
     "@lucide/vue": "^1.11.0",
     "@vueuse/core": "^14.2.1",
     "vue-advanced-cropper": "^2.8.9",
-    "@templatical/core": "0.2.0",
-    "@templatical/types": "0.2.0"
+    "@templatical/core": "0.2.1",
+    "@templatical/types": "0.2.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.6",