@alfakit/vue 0.1.1 → 0.1.6

package/dist/components/fields/FileUploadField.vue_vue_type_script_setup_true_lang.js

@@ -1,26 +1,26 @@
-import { useChoice as e, usePanel as t, useT as n } from "../../context.js";
-import { cn as r } from "../../lib/utils.js";
-import { useStore as i } from "../../composables/use-store.js";
-import a from "../ui/Button2.js";
-import o from "../ui/Spinner.js";
-import { useField as s, useFormStore as c } from "../form/form-context.js";
-import { lazyComponent as ee } from "../../lib/lazy.js";
-import te from "../schema/FieldWrapper.js";
-import { canEditImage as ne, concurrencyLimiter as re, cssAspectRatio as ie, editableImageName as l, fetchEditableImage as ae, fieldMemory as u, fileUploadAccept as oe, fileUploadPaths as se, filesFromClipboard as ce, formatBytes as le, insertUploadedFile as ue, moveRepeaterItem as de, panelUploadOptions as fe, requestJson as pe, transformImage as me, uploadTemporaryFile as he, uploadedFileLinks as d } from "@alfakit/core";
-import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, normalizeClass as b, normalizeStyle as ge, openBlock as x, ref as S, renderList as _e, shallowRef as ve, toDisplayString as C, unref as w, watch as ye, withCtx as T, withKeys as be, withModifiers as E } from "vue";
-import { ChevronDownIcon as xe, ChevronUpIcon as Se, DownloadIcon as Ce, ExternalLinkIcon as we, FileIcon as Te, PencilIcon as Ee, UploadCloudIcon as De, XIcon as D } from "@lucide/vue";
+import { useChoice as e, useFormatter as t, usePanel as n, useT as r } from "../../context.js";
+import { cn as i } from "../../lib/utils.js";
+import { useStore as a } from "../../composables/use-store.js";
+import o from "../ui/Button2.js";
+import s from "../ui/Spinner.js";
+import { useField as c, useFormStore as ee } from "../form/form-context.js";
+import { lazyComponent as te } from "../../lib/lazy.js";
+import ne from "../schema/FieldWrapper.js";
+import { canEditImage as re, concurrencyLimiter as ie, cssAspectRatio as ae, editableImageName as oe, fetchEditableImage as se, fieldMemory as l, fileManagerSize as u, fileUploadAccept as ce, fileUploadPaths as le, filesFromClipboard as ue, insertUploadedFile as de, moveRepeaterItem as fe, panelUploadOptions as pe, requestJson as me, transformImage as he, uploadTemporaryFile as ge, uploadedFileLinks as d } from "@alfakit/core";
+import { Fragment as _e, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, normalizeStyle as ve, openBlock as b, ref as x, renderList as ye, shallowRef as be, toDisplayString as S, unref as C, watch as xe, withCtx as w, withKeys as T, withModifiers as E } from "vue";
+import { ChevronDownIcon as Se, ChevronUpIcon as Ce, DownloadIcon as we, ExternalLinkIcon as Te, FileIcon as Ee, PencilIcon as De, UploadCloudIcon as Oe, XIcon as ke } from "@lucide/vue";
 //#region src/components/fields/FileUploadField.vue?vue&type=script&setup=true&lang.ts
-var Oe = ["data-layout"], ke = [
+var Ae = ["data-layout"], je = [
 	"draggable",
 	"onDragstart",
 	"onDrop"
-], Ae = ["src", "onError"], je = {
+], Me = ["src", "onError"], Ne = {
 	key: 4,
 	class: "min-w-0 flex-1"
-}, Me = { class: "truncate font-medium" }, Ne = ["href", "aria-label"], Pe = ["href", "aria-label"], Fe = ["data-align", "aria-describedby"], Ie = { key: 0 }, Le = {
+}, Pe = { class: "truncate font-medium" }, Fe = ["href", "aria-label"], Ie = ["href", "aria-label"], Le = ["data-align", "aria-describedby"], Re = { key: 0 }, ze = {
 	key: 1,
 	class: "text-muted-foreground text-xs"
-}, Re = [
+}, Be = [
 	"id",
 	"aria-invalid",
 	"aria-describedby",
@@ -28,70 +28,70 @@ var Oe = ["data-layout"], ke = [
 	"multiple",
 	"accept",
 	"disabled"
-], ze = ee("ImageEditorDialog", () => import("./ImageEditorDialog.js").then((e) => e.default), y({
+], Ve = te("ImageEditorDialog", () => import("./ImageEditorDialog.js").then((e) => e.default), v({
 	name: "ImageEditorDialogLoading",
 	render: () => null
-})), O = /*@__PURE__*/ y({
+})), D = /*@__PURE__*/ v({
 	__name: "FileUploadField",
 	props: { component: {} },
-	setup(ee) {
-		let y = ee, O = n(), Be = e(), k = t(), { value: Ve, setValue: He, error: Ue, id: A, disabled: We, readOnly: Ge, aria: j } = s(() => y.component), M = p(() => We.value || Ge.value), N = c(), P = u(N, `${y.component.statePath}:uploading`, () => []), F = u(N, `${y.component.statePath}:uploaded`, () => []), Ke = i(P), qe = i(F), I = p({
-			get: () => Ke.value,
+	setup(te) {
+		let v = te, D = r(), O = t(), He = e(), k = n(), { value: Ue, setValue: We, error: Ge, id: Ke, disabled: qe, readOnly: Je, aria: A } = c(() => v.component), j = f(() => qe.value || Je.value), M = ee(), N = l(M, `${v.component.statePath}:uploading`, () => []), P = l(M, `${v.component.statePath}:uploaded`, () => []), Ye = a(N), Xe = a(P), F = f({
+			get: () => Ye.value,
+			set: (e) => N.set(e)
+		}), I = f({
+			get: () => Xe.value,
 			set: (e) => P.set(e)
-		}), L = p({
-			get: () => qe.value,
-			set: (e) => F.set(e)
-		}), R = S(!1), z = S(null), B = S(null), V = ve(null), Je = S(!1);
-		ye(V, (e) => {
-			e && (Je.value = !0);
+		}), L = x(!1), R = x(null), z = x(null), B = be(null), Ze = x(!1);
+		xe(B, (e) => {
+			e && (Ze.value = !0);
 		});
-		let Ye = (e) => new Promise((t) => {
-			V.value = {
+		let V = (e) => new Promise((t) => {
+			B.value = {
 				file: e,
 				resolve: (e) => {
-					V.value = null, t(e);
+					B.value = null, t(e);
 				}
 			};
-		}), Xe = u(N, `${y.component.statePath}:previews`, () => /* @__PURE__ */ new Set()).get(), Ze = (e) => {
-			e && Xe.delete(e) && URL.revokeObjectURL(e);
-		}, H = p(() => se(Ve.value)), U = p(() => H.value.map((e) => [...y.component.files, ...L.value].find((t) => t.path === e) ?? {
+		}), H = l(M, `${v.component.statePath}:previews`, () => /* @__PURE__ */ new Set()).get(), U = (e) => {
+			e && H.delete(e) && URL.revokeObjectURL(e);
+		}, W = f(() => le(Ue.value)), G = f(() => W.value.map((e) => [...v.component.files, ...I.value].find((t) => t.path === e) ?? {
 			path: e,
 			name: e.replace(/^tmp:/, "")
-		})), W = p(() => y.component.multiple ? y.component.maxFiles ?? Infinity : 1), Qe = p(() => U.value.length + I.value.length < W.value), G = p(() => y.component.panelLayout === "circle" || y.component.avatar), $e = p(() => y.component.panelLayout === "integrated" && !G.value), et = p(() => y.component.positions?.removeButton === "start"), tt = p(() => y.component.positions?.progressIndicator === "start"), K = p(() => y.component.positions?.uploadButton ?? "center"), q = (e) => He(y.component.multiple ? e : e[0] ?? null), J = async (e) => {
+		})), K = f(() => v.component.multiple ? v.component.maxFiles ?? Infinity : 1), Qe = f(() => G.value.length + F.value.length < K.value), q = f(() => v.component.panelLayout === "circle" || v.component.avatar), $e = f(() => v.component.panelLayout === "integrated" && !q.value), et = f(() => v.component.positions?.removeButton === "start"), tt = f(() => v.component.positions?.progressIndicator === "start"), J = f(() => v.component.positions?.uploadButton ?? "center"), Y = (e) => We(v.component.multiple ? e : e[0] ?? null), X = async (e) => {
 			let t = k.value.endpoints.upload;
 			if (!t) return;
-			let n = Array.from(e).slice(0, Math.max(0, W.value - U.value.length - I.value.length)), r = re(y.component.maxParallelUploads ?? 1), i = [];
+			let n = Array.from(e).slice(0, Math.max(0, K.value - G.value.length - F.value.length)), r = ie(v.component.maxParallelUploads ?? 1), i = [];
 			for (let [e, a] of n.entries()) {
-				let n = a, o = !!(y.component.imageEditor && ne(a));
+				let n = a, o = !!(v.component.imageEditor && re(a));
 				if (o) {
-					let e = await Ye(a);
+					let e = await V(a);
 					if (!e) continue;
 					n = e;
 				}
 				let s = await nt(n, o);
 				if (!s) continue;
 				let c = rt(s, e);
-				I.value = [...I.value, c], i.push(r(() => Y(t, s, c)));
+				F.value = [...F.value, c], i.push(r(() => ot(t, s, c)));
 			}
 			await Promise.all(i);
 		}, nt = async (e, t) => {
-			let n = y.component.imageCropAspectRatio || y.component.imageResizeTargetWidth || y.component.imageResizeTargetHeight || y.component.orientImagesFromExif ? await me(e, {
-				aspectRatio: t ? null : y.component.imageCropAspectRatio,
-				mode: y.component.imageResizeMode,
-				width: y.component.imageResizeTargetWidth,
-				height: y.component.imageResizeTargetHeight,
-				orient: y.component.orientImagesFromExif
+			let n = v.component.imageCropAspectRatio || v.component.imageResizeTargetWidth || v.component.imageResizeTargetHeight || v.component.orientImagesFromExif ? await he(e, {
+				aspectRatio: t ? null : v.component.imageCropAspectRatio,
+				mode: v.component.imageResizeMode,
+				width: v.component.imageResizeTargetWidth,
+				height: v.component.imageResizeTargetHeight,
+				orient: v.component.orientImagesFromExif
 			}) : e;
-			return y.component.minSize && n.size < y.component.minSize * 1024 ? (I.value = [...I.value, {
+			return v.component.minSize && n.size < v.component.minSize * 1024 ? (F.value = [...F.value, {
 				path: n.name,
 				name: n.name,
 				size: n.size,
-				error: O("form.file_too_small", {}, "This file is too small.")
-			}], null) : y.component.maxSize && n.size > y.component.maxSize * 1024 ? (I.value = [...I.value, {
+				error: D("form.file_too_small", {}, "This file is too small.")
+			}], null) : v.component.maxSize && n.size > v.component.maxSize * 1024 ? (F.value = [...F.value, {
 				path: n.name,
 				name: n.name,
 				size: n.size,
-				error: O("form.file_too_large", {}, "This file is too large.")
+				error: D("form.file_too_large", {}, "This file is too large.")
 			}], null) : n;
 		}, rt = (e, t) => {
 			let n = {
@@ -101,177 +101,177 @@ var Oe = ["data-layout"], ke = [
 				progress: 0,
 				preview: e.type.startsWith("image/") ? URL.createObjectURL(e) : void 0
 			};
-			return n.preview && Xe.add(n.preview), n;
-		}, it = (e, t) => !!y.component.imageEditor && !M.value && t < U.value.length && !e.missing && !!(e.url ?? e.preview) && l(e) !== null, at = async (e) => {
-			let t = k.value.endpoints.upload, n = e.url ?? e.preview, r = l(e);
+			return n.preview && H.add(n.preview), n;
+		}, it = (e, t) => !!v.component.imageEditor && !j.value && t < G.value.length && !e.missing && !!(e.url ?? e.preview) && oe(e) !== null, at = async (e) => {
+			let t = k.value.endpoints.upload, n = e.url ?? e.preview, r = oe(e);
 			if (!t || !n || !r) return;
-			let i = await ae(n, r);
+			let i = await se(n, r);
 			if (!i) {
-				I.value = [...I.value, {
+				F.value = [...F.value, {
 					path: `failed:${e.path}`,
 					name: e.name,
-					error: O("image_editor.load_failed", {}, "The image could not be opened.")
+					error: D("image_editor.load_failed", {}, "The image could not be opened.")
 				}];
 				return;
 			}
-			let a = await Ye(i);
+			let a = await V(i);
 			if (!a || a === i) return;
 			let o = await nt(a, !0);
 			if (!o) return;
 			let s = rt(o, `edit:${e.path}`);
-			I.value = [...I.value, s], await Y(t, o, s, e.path);
-		}, Y = async (e, t, n, r) => {
+			F.value = [...F.value, s], await ot(t, o, s, e.path);
+		}, ot = async (e, t, n, r) => {
 			try {
-				let i = await he(e, t, {
-					...fe(k.value, y.component.uploadPolicy),
+				let i = await ge(e, t, {
+					...pe(k.value, v.component.uploadPolicy),
 					onProgress: (e) => {
-						I.value = I.value.map((t) => t.path === n.path ? {
+						F.value = F.value.map((t) => t.path === n.path ? {
 							...t,
 							progress: e
 						} : t);
 					}
 				});
-				L.value = [...L.value, {
+				I.value = [...I.value, {
 					path: i.key,
 					name: i.name,
 					size: i.size,
 					temporary: !0,
 					url: n.preview
-				}], I.value = I.value.filter((e) => e.path !== n.path);
-				let a = se(N.getValue(y.component.statePath, null));
-				r !== void 0 && a.includes(r) ? (q(a.map((e) => e === r ? i.key : e)), st(r)) : q(ue(a, i.key, y.component, W.value));
+				}], F.value = F.value.filter((e) => e.path !== n.path);
+				let a = le(M.getValue(v.component.statePath, null));
+				r !== void 0 && a.includes(r) ? (Y(a.map((e) => e === r ? i.key : e)), ct(r)) : Y(de(a, i.key, v.component, K.value));
 			} catch (e) {
 				let t = e.errors?.file?.[0] ?? e.message;
-				I.value = I.value.map((e) => e.path === n.path ? {
+				F.value = F.value.map((e) => e.path === n.path ? {
 					...e,
 					error: t,
 					progress: void 0
 				} : e);
 			}
-		}, ot = (e) => {
-			q(H.value.filter((t) => t !== e)), st(e);
 		}, st = (e) => {
-			Ze(F.get().find((t) => t.path === e)?.url), e.startsWith("tmp:") && k.value.endpoints.uploadDestroy && pe(k.value.endpoints.uploadDestroy, {
+			Y(W.value.filter((t) => t !== e)), ct(e);
+		}, ct = (e) => {
+			U(P.get().find((t) => t.path === e)?.url), e.startsWith("tmp:") && k.value.endpoints.uploadDestroy && me(k.value.endpoints.uploadDestroy, {
 				method: "DELETE",
 				body: { key: e }
 			}).catch(() => void 0);
-		}, ct = (e) => {
-			e.error || e.progress !== void 0 ? (Ze(e.preview), I.value = I.value.filter((t) => t.path !== e.path)) : ot(e.path);
 		}, lt = (e) => {
-			e.preventDefault(), R.value = !1, !M.value && e.dataTransfer && e.dataTransfer.files.length > 0 && J(e.dataTransfer.files);
+			e.error || e.progress !== void 0 ? (U(e.preview), F.value = F.value.filter((t) => t.path !== e.path)) : st(e.path);
 		}, ut = (e) => {
-			if (M.value || y.component.pasteable === !1) return;
-			let t = ce(e.clipboardData);
-			t.length > 0 && (e.preventDefault(), J(t));
+			e.preventDefault(), L.value = !1, !j.value && e.dataTransfer && e.dataTransfer.files.length > 0 && X(e.dataTransfer.files);
 		}, dt = (e) => {
+			if (j.value || v.component.pasteable === !1) return;
+			let t = ue(e.clipboardData);
+			t.length > 0 && (e.preventDefault(), X(t));
+		}, ft = (e) => {
 			let t = e.target, n = t.files ? Array.from(t.files) : [];
-			t.value = "", J(n);
-		}, X = (e, t) => q(de(H.value, e, t)), Z = p(() => !!(y.component.reorderable && y.component.multiple && !M.value)), ft = (e, t) => {
-			if (!Z.value || B.value === null) return;
+			t.value = "", X(n);
+		}, Z = (e, t) => Y(fe(W.value, e, t)), Q = f(() => !!(v.component.reorderable && v.component.multiple && !j.value)), pt = (e, t) => {
+			if (!Q.value || z.value === null) return;
 			e.preventDefault(), e.stopPropagation();
-			let n = H.value.indexOf(B.value);
-			n !== -1 && t < U.value.length && X(n, t), B.value = null;
-		}, Q = p(() => [
-			y.component.acceptedFileTypes?.join(", "),
-			y.component.maxSize ? `≤ ${le(y.component.maxSize * 1024, 0)}` : null,
-			y.component.minFiles ? Be("form.min_files", y.component.minFiles, {}, "At least :count file|At least :count files") : null
-		].filter(Boolean).join(" · ")), pt = (e) => y.component.previewable !== !1 && (y.component.image || /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(e.name)), $ = S(/* @__PURE__ */ new Set());
-		function mt(e) {
+			let n = W.value.indexOf(z.value);
+			n !== -1 && t < G.value.length && Z(n, t), z.value = null;
+		}, mt = f(() => [
+			v.component.acceptedFileTypes?.join(", "),
+			v.component.maxSize ? `≤ ${u(v.component.maxSize * 1024, O.value)}` : null,
+			v.component.minFiles ? He("form.min_files", v.component.minFiles, {}, "At least :count file|At least :count files") : null
+		].filter(Boolean).join(" · ")), ht = (e) => v.component.previewable !== !1 && (v.component.image || /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(e.name)), $ = x(/* @__PURE__ */ new Set());
+		function gt(e) {
 			return typeof e == "number" || /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e;
 		}
-		return (e, t) => (x(), m(te, {
-			field: y.component,
-			"html-for": w(A),
-			error: w(Ue)
+		return (e, t) => (b(), p(ne, {
+			field: v.component,
+			"html-for": C(Ke),
+			error: C(Ge)
 		}, {
-			default: T(() => [_("div", {
+			default: w(() => [g("div", {
 				"data-slot": "file-upload",
-				"data-layout": y.component.panelLayout,
-				class: b(w(r)("flex flex-col gap-3", $e.value && "rounded-md border p-2"))
+				"data-layout": v.component.panelLayout,
+				class: y(C(i)("flex flex-col gap-3", $e.value && "rounded-md border p-2"))
 			}, [
-				U.value.length > 0 || I.value.length > 0 ? (x(), g("ul", {
+				G.value.length > 0 || F.value.length > 0 ? (b(), h("ul", {
 					key: 0,
-					class: b(w(r)("grid gap-2", y.component.panelLayout === "grid" && "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", G.value && "justify-items-center"))
-				}, [(x(!0), g(f, null, _e([...U.value, ...I.value], (e, n) => (x(), g("li", {
+					class: y(C(i)("grid gap-2", v.component.panelLayout === "grid" && "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", q.value && "justify-items-center"))
+				}, [(b(!0), h(_e, null, ye([...G.value, ...F.value], (e, n) => (b(), h("li", {
 					key: e.path,
-					draggable: Z.value && n < U.value.length,
-					class: b(w(r)(B.value === e.path && "opacity-50", "bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm", G.value && "size-28 justify-center rounded-full border-0 p-0", e.error && "border-destructive")),
-					onDragstart: (t) => B.value = e.path,
-					onDragover: t[0] ||= (e) => Z.value && e.preventDefault(),
-					onDrop: (e) => ft(e, n),
-					onDragend: t[1] ||= (e) => B.value = null
+					draggable: Q.value && n < G.value.length,
+					class: y(C(i)(z.value === e.path && "opacity-50", "bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm", q.value && "size-28 justify-center rounded-full border-0 p-0", e.error && "border-destructive")),
+					onDragstart: (t) => z.value = e.path,
+					onDragover: t[0] ||= (e) => Q.value && e.preventDefault(),
+					onDrop: (e) => pt(e, n),
+					onDragend: t[1] ||= (e) => z.value = null
 				}, [
-					!G.value && et.value && y.component.deletable && !M.value ? (x(), m(a, {
+					!q.value && et.value && v.component.deletable && !j.value ? (b(), p(o, {
 						key: 0,
 						type: "button",
 						variant: "ghost",
 						size: "icon-xs",
-						"aria-label": w(O)("remove", {}, "Remove"),
-						onClick: (t) => ct(e)
+						"aria-label": C(D)("file_upload.remove", { name: e.name }, "Remove :name"),
+						onClick: (t) => lt(e)
 					}, {
-						default: T(() => [v(w(D))]),
+						default: w(() => [_(C(ke))]),
 						_: 1
-					}, 8, ["aria-label", "onClick"])) : h("", !0),
-					!G.value && tt.value && e.progress !== void 0 && !e.error ? (x(), m(o, { key: 1 })) : h("", !0),
-					pt(e) && (e.url || e.preview) && !$.value.has(e.path) ? (x(), g("img", {
+					}, 8, ["aria-label", "onClick"])) : m("", !0),
+					!q.value && tt.value && e.progress !== void 0 && !e.error ? (b(), p(s, { key: 1 })) : m("", !0),
+					ht(e) && (e.url || e.preview) && !$.value.has(e.path) ? (b(), h("img", {
 						key: 2,
 						src: e.url ?? e.preview,
 						alt: "",
-						class: b(w(r)("size-12 shrink-0 rounded object-cover", G.value && "size-28 rounded-full")),
-						style: ge(!G.value && y.component.imagePreviewHeight ? {
-							height: mt(y.component.imagePreviewHeight),
+						class: y(C(i)("size-12 shrink-0 rounded object-cover", q.value && "size-28 rounded-full")),
+						style: ve(!q.value && v.component.imagePreviewHeight ? {
+							height: gt(v.component.imagePreviewHeight),
 							width: "auto",
 							maxWidth: "50%"
 						} : void 0),
 						onError: (t) => $.value = new Set($.value).add(e.path)
-					}, null, 46, Ae)) : G.value ? h("", !0) : (x(), m(w(Te), {
+					}, null, 46, Me)) : q.value ? m("", !0) : (b(), p(C(Ee), {
 						key: 3,
 						class: "text-muted-foreground size-6 shrink-0"
 					})),
-					G.value ? h("", !0) : (x(), g("div", je, [_("p", Me, C(e.name), 1), _("p", { class: b(w(r)("text-muted-foreground text-xs", e.missing && "text-destructive")) }, C(e.error ?? (e.missing ? w(O)("form.file_missing", {}, "This file no longer exists.") : e.progress !== void 0 && !e.error ? y.component.uploadingMessage ?? w(O)("form.uploading", {}, "Uploading…") : e.size ? w(le)(e.size) : e.temporary ? w(O)("form.uploading", {}, "Pending") : "")), 3)])),
-					_("div", { class: b(w(r)("flex items-center gap-1", G.value && "absolute -end-1 -bottom-1")) }, [
-						(G.value || !tt.value) && e.progress !== void 0 && !e.error ? (x(), m(o, { key: 0 })) : h("", !0),
-						Z.value && n < U.value.length ? (x(), g(f, { key: 1 }, [v(a, {
+					q.value ? m("", !0) : (b(), h("div", Ne, [g("p", Pe, S(e.name), 1), g("p", { class: y(C(i)("text-muted-foreground text-xs", e.missing && "text-destructive")) }, S(e.error ?? (e.missing ? C(D)("form.file_missing", {}, "This file no longer exists.") : e.progress !== void 0 && !e.error ? v.component.uploadingMessage ?? C(D)("form.uploading", {}, "Uploading…") : e.size ? C(u)(e.size, C(O)) : e.temporary ? C(D)("form.uploading", {}, "Pending") : "")), 3)])),
+					g("div", { class: y(C(i)("flex items-center gap-1", q.value && "absolute -end-1 -bottom-1")) }, [
+						(q.value || !tt.value) && e.progress !== void 0 && !e.error ? (b(), p(s, { key: 0 })) : m("", !0),
+						Q.value && n < G.value.length ? (b(), h(_e, { key: 1 }, [_(o, {
 							type: "button",
 							variant: "ghost",
 							size: "icon-xs",
-							"aria-label": w(O)("form.move_up", {}, "Move up"),
+							"aria-label": C(D)("file_upload.move_up", { name: e.name }, "Move :name up"),
 							disabled: n === 0,
-							onClick: (e) => X(n, n - 1)
+							onClick: (e) => Z(n, n - 1)
 						}, {
-							default: T(() => [v(w(Se))]),
+							default: w(() => [_(C(Ce))]),
 							_: 1
 						}, 8, [
 							"aria-label",
 							"disabled",
 							"onClick"
-						]), v(a, {
+						]), _(o, {
 							type: "button",
 							variant: "ghost",
 							size: "icon-xs",
-							"aria-label": w(O)("form.move_down", {}, "Move down"),
-							disabled: n === U.value.length - 1,
-							onClick: (e) => X(n, n + 1)
+							"aria-label": C(D)("file_upload.move_down", { name: e.name }, "Move :name down"),
+							disabled: n === G.value.length - 1,
+							onClick: (e) => Z(n, n + 1)
 						}, {
-							default: T(() => [v(w(xe))]),
+							default: w(() => [_(C(Se))]),
 							_: 1
 						}, 8, [
 							"aria-label",
 							"disabled",
 							"onClick"
-						])], 64)) : h("", !0),
-						it(e, n) ? (x(), m(a, {
+						])], 64)) : m("", !0),
+						it(e, n) ? (b(), p(o, {
 							key: 2,
 							type: "button",
-							variant: G.value ? "secondary" : "ghost",
+							variant: q.value ? "secondary" : "ghost",
 							size: "icon-xs",
-							class: b(w(r)(G.value && "rounded-full shadow")),
-							"aria-label": w(O)("image_editor.title", {}, "Edit image"),
-							title: w(O)("image_editor.title", {}, "Edit image"),
+							class: y(C(i)(q.value && "rounded-full shadow")),
+							"aria-label": C(D)("file_upload.edit", { name: e.name }, "Edit :name"),
+							title: C(D)("image_editor.title", {}, "Edit image"),
 							"data-action": "edit-image",
 							onClick: (t) => void at(e)
 						}, {
-							default: T(() => [v(w(Ee))]),
+							default: w(() => [_(C(De))]),
 							_: 1
 						}, 8, [
 							"variant",
@@ -279,95 +279,95 @@ var Oe = ["data-layout"], ke = [
 							"aria-label",
 							"title",
 							"onClick"
-						])) : h("", !0),
-						y.component.openable && w(d)(e).open ? (x(), m(a, {
+						])) : m("", !0),
+						v.component.openable && C(d)(e).open ? (b(), p(o, {
 							key: 3,
 							"as-child": "",
 							type: "button",
 							variant: "ghost",
 							size: "icon-xs"
 						}, {
-							default: T(() => [_("a", {
-								href: w(d)(e).open,
+							default: w(() => [g("a", {
+								href: C(d)(e).open,
 								target: "_blank",
 								rel: "noopener noreferrer",
-								"aria-label": `${w(O)("open", {}, "Open")} ${w(O)("opens_in_new_tab", {}, "(opens in a new tab)")}`
-							}, [v(w(we))], 8, Ne)]),
+								"aria-label": `${C(D)("file_upload.open", { name: e.name }, "Open :name")} ${C(D)("opens_in_new_tab", {}, "(opens in a new tab)")}`
+							}, [_(C(Te))], 8, Fe)]),
 							_: 2
-						}, 1024)) : h("", !0),
-						y.component.downloadable && w(d)(e).download ? (x(), m(a, {
+						}, 1024)) : m("", !0),
+						v.component.downloadable && C(d)(e).download ? (b(), p(o, {
 							key: 4,
 							"as-child": "",
 							type: "button",
 							variant: "ghost",
 							size: "icon-xs"
 						}, {
-							default: T(() => [_("a", {
-								href: w(d)(e).download,
+							default: w(() => [g("a", {
+								href: C(d)(e).download,
 								download: "",
-								"aria-label": w(O)("download", {}, "Download")
-							}, [v(w(Ce))], 8, Pe)]),
+								"aria-label": C(D)("file_upload.download", { name: e.name }, "Download :name")
+							}, [_(C(we))], 8, Ie)]),
 							_: 2
-						}, 1024)) : h("", !0),
-						y.component.deletable && !M.value && (G.value || !et.value) ? (x(), m(a, {
+						}, 1024)) : m("", !0),
+						v.component.deletable && !j.value && (q.value || !et.value) ? (b(), p(o, {
 							key: 5,
 							type: "button",
-							variant: G.value ? "secondary" : "ghost",
+							variant: q.value ? "secondary" : "ghost",
 							size: "icon-xs",
-							class: b(w(r)(G.value && "rounded-full shadow")),
-							"aria-label": w(O)("remove", {}, "Remove"),
-							onClick: (t) => ct(e)
+							class: y(C(i)(q.value && "rounded-full shadow")),
+							"aria-label": C(D)("file_upload.remove", { name: e.name }, "Remove :name"),
+							onClick: (t) => lt(e)
 						}, {
-							default: T(() => [v(w(D))]),
+							default: w(() => [_(C(ke))]),
 							_: 1
 						}, 8, [
 							"variant",
 							"class",
 							"aria-label",
 							"onClick"
-						])) : h("", !0)
+						])) : m("", !0)
 					], 2)
-				], 42, ke))), 128))], 2)) : h("", !0),
-				Qe.value && !M.value ? (x(), g("div", {
+				], 42, je))), 128))], 2)) : m("", !0),
+				Qe.value && !j.value ? (b(), h("div", {
 					key: 1,
 					role: "button",
 					tabindex: "0",
-					"data-align": K.value,
-					style: ge(!G.value && y.component.panelAspectRatio ? { aspectRatio: w(ie)(y.component.panelAspectRatio) } : void 0),
-					class: b(w(r)("text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors", K.value === "start" ? "items-start text-start" : K.value === "end" ? "items-end text-end" : "items-center text-center", $e.value && "border-transparent", R.value && "border-ring bg-accent", G.value && "size-28 items-center rounded-full py-0")),
-					"aria-describedby": w(j)["aria-describedby"],
-					onClick: t[2] ||= (e) => z.value?.click(),
-					onKeydown: [t[3] ||= be(E((e) => z.value?.click(), ["prevent"]), ["enter"]), t[4] ||= be(E((e) => z.value?.click(), ["prevent"]), ["space"])],
-					onDragover: t[5] ||= E((e) => R.value = !0, ["prevent"]),
-					onDragleave: t[6] ||= (e) => R.value = !1,
-					onDrop: lt,
-					onPaste: ut
+					"data-align": J.value,
+					style: ve(!q.value && v.component.panelAspectRatio ? { aspectRatio: C(ae)(v.component.panelAspectRatio) } : void 0),
+					class: y(C(i)("text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors", J.value === "start" ? "items-start text-start" : J.value === "end" ? "items-end text-end" : "items-center text-center", $e.value && "border-transparent", L.value && "border-ring bg-accent", q.value && "size-28 items-center rounded-full py-0")),
+					"aria-describedby": C(A)["aria-describedby"],
+					onClick: t[2] ||= (e) => R.value?.click(),
+					onKeydown: [t[3] ||= T(E((e) => R.value?.click(), ["prevent"]), ["enter"]), t[4] ||= T(E((e) => R.value?.click(), ["prevent"]), ["space"])],
+					onDragover: t[5] ||= E((e) => L.value = !0, ["prevent"]),
+					onDragleave: t[6] ||= (e) => L.value = !1,
+					onDrop: ut,
+					onPaste: dt
 				}, [
-					v(w(De), { class: "size-5" }),
-					G.value ? h("", !0) : (x(), g("span", Ie, C(y.component.placeholder ?? w(O)("form.drop_files", {}, "Drop files here or click to browse")), 1)),
-					!G.value && Q.value ? (x(), g("span", Le, C(Q.value), 1)) : h("", !0)
-				], 46, Fe)) : h("", !0),
-				_("input", {
-					id: w(A),
+					_(C(Oe), { class: "size-5" }),
+					q.value ? m("", !0) : (b(), h("span", Re, S(v.component.placeholder ?? C(D)("form.drop_files", {}, "Drop files here or click to browse")), 1)),
+					!q.value && mt.value ? (b(), h("span", ze, S(mt.value), 1)) : m("", !0)
+				], 46, Le)) : m("", !0),
+				g("input", {
+					id: C(Ke),
 					ref_key: "inputRef",
-					ref: z,
+					ref: R,
 					type: "file",
 					class: "sr-only",
 					tabindex: "-1",
-					"aria-invalid": w(j)["aria-invalid"],
-					"aria-describedby": w(j)["aria-describedby"],
-					"aria-required": w(j)["aria-required"],
-					multiple: y.component.multiple,
-					accept: w(oe)(y.component),
-					disabled: M.value,
-					onChange: dt
-				}, null, 40, Re),
-				y.component.imageEditor && (V.value || Je.value) ? (x(), m(w(ze), {
+					"aria-invalid": C(A)["aria-invalid"],
+					"aria-describedby": C(A)["aria-describedby"],
+					"aria-required": C(A)["aria-required"],
+					multiple: v.component.multiple,
+					accept: C(ce)(v.component),
+					disabled: j.value,
+					onChange: ft
+				}, null, 40, Be),
+				v.component.imageEditor && (B.value || Ze.value) ? (b(), p(C(Ve), {
 					key: 2,
-					request: V.value,
-					options: y.component.imageEditor
-				}, null, 8, ["request", "options"])) : h("", !0)
-			], 10, Oe)]),
+					request: B.value,
+					options: v.component.imageEditor
+				}, null, 8, ["request", "options"])) : m("", !0)
+			], 10, Ae)]),
 			_: 1
 		}, 8, [
 			"field",
@@ -377,6 +377,6 @@ var Oe = ["data-layout"], ke = [
 	}
 });
 //#endregion
-export { O as default };
+export { D as default };
 
 //# sourceMappingURL=FileUploadField.vue_vue_type_script_setup_true_lang.js.map