@treeui/vue 0.13.0 → 0.15.0

package/dist/components/TFileUpload.vue_vue_type_script_setup_true_lang.js

@@ -1,34 +1,63 @@
 import e from "./TSpinner.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useAttrs as _, useSlots as v } from "vue";
-import { createId as y, isActivationKey as b } from "@treeui/utils";
+import t from "./TProgress.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as ee, useAttrs as te, useSlots as ne, watch as b } from "vue";
+import { createId as re, isActivationKey as ie } from "@treeui/utils";
 //#region src/components/TFileUpload.vue?vue&type=script&setup=true&lang.ts
-var x = [
+var ae = [
 	"id",
 	"accept",
 	"multiple",
 	"disabled"
-], S = [
+], oe = [
 	"aria-busy",
 	"aria-controls",
 	"aria-describedby",
 	"aria-disabled",
 	"aria-invalid",
 	"tabindex"
-], ee = {
+], se = {
 	key: 0,
 	class: "t-file-upload__icon",
 	"aria-hidden": "true"
-}, te = { class: "t-file-upload__content" }, C = { class: "t-file-upload__label" }, ne = { class: "t-file-upload__browse" }, re = {
+}, ce = { class: "t-file-upload__content" }, le = { class: "t-file-upload__label" }, ue = { class: "t-file-upload__browse" }, de = {
+	class: "t-file-upload__status-log t-visually-hidden",
+	role: "log",
+	"aria-live": "polite"
+}, fe = {
 	key: 1,
 	class: "t-file-upload__files"
-}, ie = { class: "t-file-upload__files-header" }, ae = ["disabled"], oe = { class: "t-file-upload__list" }, se = { class: "t-file-upload__file-copy" }, w = { class: "t-file-upload__file-name" }, T = { class: "t-file-upload__file-meta" }, E = [
+}, pe = { class: "t-file-upload__files-header" }, me = ["disabled"], he = { class: "t-file-upload__list" }, ge = ["aria-busy"], _e = {
+	class: "t-file-upload__thumb",
+	"aria-hidden": "true"
+}, ve = ["src"], ye = {
+	key: 1,
+	class: "t-file-upload__thumb-fallback"
+}, be = { class: "t-file-upload__file-copy" }, xe = { class: "t-file-upload__file-name" }, Se = { class: "t-file-upload__file-meta" }, Ce = {
+	key: 0,
+	class: "t-file-upload__file-progress"
+}, we = {
+	key: 1,
+	class: "t-file-upload__file-status"
+}, Te = {
+	key: 0,
+	class: "t-file-upload__proof",
+	"aria-hidden": "true"
+}, Ee = ["id"], De = [
+	"data-t-retry",
+	"disabled",
+	"aria-describedby",
+	"onFocus",
+	"onBlur",
+	"onClick"
+], Oe = [
+	"data-t-remove",
 	"disabled",
 	"aria-label",
 	"onClick"
-], ce = {
+], ke = {
 	key: 2,
 	class: "t-file-upload__actions"
-}, D = /*@__PURE__*/ s({
+}, x = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "TFileUpload",
 	props: {
@@ -68,32 +97,71 @@ var x = [
 		showFileList: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		uploadState: {
+			type: [Map, Function],
+			default: void 0
+		},
+		dragLabel: { default: "Release to upload" },
+		dragRejectLabel: { default: "This file type is not accepted" },
+		thumbnails: {
+			type: Boolean,
+			default: !0
+		},
+		maxThumbnailSize: { default: 10 * 1024 * 1024 },
+		retryLabel: { default: "Retry" },
+		resumeLabel: {
+			type: Function,
+			default: (e) => `Resume from ${e}%`
+		},
+		remainingTimeFormat: {
+			type: Function,
+			default: (e) => {
+				if (e < 5e3) return "Less than 5s left";
+				let t = Math.round(e / 1e3);
+				if (t < 60) return `About ${t}s left`;
+				let n = Math.round(t / 60);
+				return n < 60 ? `About ${n} min left` : `About ${Math.round(n / 60)}h left`;
+			}
+		},
+		statusLabels: { default: () => ({}) }
 	},
 	emits: [
 		"update:modelValue",
 		"files-accepted",
-		"files-rejected"
+		"files-rejected",
+		"retry",
+		"cancel"
 	],
-	setup(s, { emit: D }) {
-		let le = v(), O = s, k = D, A = _(), j = f(null), M = f(null), N = f(!1), P = f(!1), F = f(0), I = f([]), L = y("t-file-upload"), R = `${L}-description`, z = `${L}-feedback`, B = `${L}-files`, V = n(() => O.disabled || O.loading), H = n(() => O.modelValue.length > 0), U = n(() => !!le.default), W = n(() => O.multiple ? typeof O.maxFiles == "number" ? Math.max(O.maxFiles, 0) : Infinity : 1), ue = n(() => [
+	setup(u, { emit: x }) {
+		let Ae = {
+			pending: "Waiting",
+			uploading: "Uploading",
+			paused: "Paused",
+			error: "Upload failed",
+			success: "Uploaded"
+		}, je = ne(), S = u, C = x, w = te(), T = g(null), E = g(null), D = g(!1), O = g(!1), k = g(!1), A = g(0), j = g([]), M = g([]), N = 0, P = g(null), F = g(/* @__PURE__ */ new Map()), I = re("t-file-upload"), L = `${I}-description`, R = `${I}-feedback`, z = `${I}-files`, B = r(() => S.disabled), V = r(() => S.modelValue.length > 0), Me = r(() => !!je.default), Ne = r(() => ({
+			...Ae,
+			...S.statusLabels
+		})), H = r(() => S.multiple ? typeof S.maxFiles == "number" ? Math.max(S.maxFiles, 0) : Infinity : 1), Pe = r(() => [
 			"t-file-upload",
-			`t-file-upload--${O.size}`,
+			`t-file-upload--${S.size}`,
 			{
-				"is-disabled": V.value,
-				"is-invalid": O.invalid,
-				"is-loading": O.loading,
-				"is-drag-active": N.value,
-				"has-files": H.value
+				"is-disabled": B.value,
+				"is-invalid": S.invalid,
+				"is-loading": S.loading,
+				"is-drag-active": D.value,
+				"is-drag-reject": O.value,
+				"has-files": V.value
 			},
-			A.class
-		]), de = n(() => A.style), fe = n(() => {
-			let { class: e, style: t, ...n } = A;
+			w.class
+		]), Fe = r(() => w.style), Ie = r(() => {
+			let { class: e, style: t, ...n } = w;
 			return n;
-		}), pe = n(() => {
+		}), Le = r(() => {
 			let e = [];
-			return O.description && !U.value && e.push(R), I.value.length > 0 && e.push(z), O.showFileList && H.value && e.push(B), e.length > 0 ? e.join(" ") : void 0;
-		}), me = n(() => `${O.filesLabel} (${O.modelValue.length})`), G = (e) => {
+			return S.description && !Me.value && e.push(L), j.value.length > 0 && e.push(R), S.showFileList && V.value && e.push(z), e.length > 0 ? e.join(" ") : void 0;
+		}), Re = r(() => `${S.filesLabel} (${S.modelValue.length})`), ze = r(() => O.value ? S.dragRejectLabel : D.value ? S.dragLabel : S.label), U = (e) => {
 			if (e < 1024) return `${e} B`;
 			let t = [
 				"KB",
@@ -102,183 +170,364 @@ var x = [
 			], n = e / 1024, r = 0;
 			for (; n >= 1024 && r < t.length - 1;) n /= 1024, r += 1;
 			return `${n >= 10 || Number.isInteger(n) ? Math.round(n) : Number(n.toFixed(1))} ${t[r]}`;
-		}, he = (e, t) => `${e.name}-${e.size}-${e.lastModified}-${t}`, ge = (e) => {
-			if (!O.accept.trim()) return !0;
-			let t = O.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean), n = e.name.toLowerCase(), r = e.type.toLowerCase();
-			return t.some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
-		}, K = (e, t) => {
+		}, Be = (e) => {
+			let t = e.name.lastIndexOf("."), n = t > 0 && t < e.name.length - 1 ? e.name.slice(t + 1).toUpperCase() : "";
+			if (n && n.length <= 5) return n;
+			let r = e.type.includes("/") ? e.type.split("/")[1] : "";
+			return r ? r.toUpperCase() : "FILE";
+		}, Ve = 0, He = /* @__PURE__ */ new WeakMap(), Ue = (e) => {
+			let t = He.get(e);
+			return t || (Ve += 1, t = `${I}-f${Ve}`, He.set(e, t)), t;
+		}, W = r(() => S.accept.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean)), We = (e) => {
+			if (W.value.length === 0) return !0;
+			let t = e.name.toLowerCase(), n = e.type.toLowerCase();
+			return W.value.some((e) => e.startsWith(".") ? t.endsWith(e) : e.endsWith("/*") ? n.startsWith(e.slice(0, -1)) : n === e);
+		}, Ge = r(() => W.value.length > 0 && W.value.every((e) => e.includes("/"))), Ke = (e) => {
+			let t = e.toLowerCase();
+			return !t || W.value.some((e) => e.endsWith("/*") ? t.startsWith(e.slice(0, -1)) : t === e);
+		}, qe = (e) => {
+			if (!Ge.value || !e) return !1;
+			let t = e.items;
+			if (!t || t.length === 0) return !1;
+			let n = Array.from(t).filter((e) => e.kind === "file");
+			return n.length !== 0 && n.every((e) => !Ke(e.type));
+		}, Je = (e, t) => {
+			let n = S.uploadState;
+			if (n) return typeof n == "function" ? n(e, t) : n.get(e);
+		}, G = r(() => S.modelValue.map(Je)), Ye = () => typeof window < "u" && typeof URL < "u" && typeof URL.createObjectURL == "function" && typeof URL.revokeObjectURL == "function", Xe = (e) => e.type.startsWith("image/") && (S.maxThumbnailSize === null || e.size <= S.maxThumbnailSize), Ze = () => {
+			if (Ye()) for (let e of F.value.values()) URL.revokeObjectURL(e.url);
+			F.value.clear();
+		}, K = () => {
+			if (!S.thumbnails || !Ye()) {
+				Ze();
+				return;
+			}
+			let e = new Set(S.modelValue);
+			for (let [t, n] of [...F.value]) e.has(t) || (URL.revokeObjectURL(n.url), F.value.delete(t));
+			for (let e of S.modelValue) {
+				if (F.value.has(e) || !Xe(e)) continue;
+				let t = URL.createObjectURL(e);
+				F.value.set(e, {
+					url: t,
+					width: null,
+					height: null
+				});
+				let n = new Image();
+				n.onload = () => {
+					let r = F.value.get(e);
+					!r || r.url !== t || F.value.set(e, {
+						url: t,
+						width: n.naturalWidth,
+						height: n.naturalHeight
+					});
+				}, n.src = t;
+			}
+		}, q = (e, t) => {
 			switch (t) {
 				case "file-invalid-type": return `${e.name} is not an accepted file type.`;
-				case "file-too-large": return `${e.name} exceeds the ${G(O.maxFileSize ?? 0)} limit.`;
-				case "too-many-files": return `You can only add up to ${W.value} file${W.value === 1 ? "" : "s"}.`;
+				case "file-too-large": return `${e.name} exceeds the ${U(S.maxFileSize ?? 0)} limit.`;
+				case "too-many-files": return `You can only add up to ${H.value} file${H.value === 1 ? "" : "s"}.`;
 				default: return `${e.name} could not be added.`;
 			}
-		}, _e = () => {
-			M.value && (M.value.value = "");
-		}, q = () => {
-			V.value || M.value?.click();
-		}, ve = (e, t, n) => {
-			I.value = n.map((e) => e.message), n.length > 0 && k("files-rejected", n), t.length > 0 && (k("update:modelValue", e), k("files-accepted", t));
-		}, J = (e) => {
-			if (V.value || e.length === 0) return;
-			let t = O.multiple ? [...O.modelValue] : [], n = [], r = [], i = Number.isFinite(W.value) ? Math.max(W.value - t.length, 0) : Infinity;
+		}, Qe = () => {
+			E.value && (E.value.value = "");
+		}, J = () => {
+			B.value || E.value?.click();
+		}, $e = (e, t, n) => {
+			j.value = n.map((e) => e.message), n.length > 0 && C("files-rejected", n), t.length > 0 && (C("update:modelValue", e), C("files-accepted", t));
+		}, Y = (e) => {
+			if (B.value || e.length === 0) return;
+			let t = S.multiple ? [...S.modelValue] : [], n = [], r = [], i = Number.isFinite(H.value) ? Math.max(H.value - t.length, 0) : Infinity;
 			for (let a of e) {
 				if (i <= 0) {
 					r.push({
 						file: a,
 						reason: "too-many-files",
-						message: K(a, "too-many-files")
+						message: q(a, "too-many-files")
 					});
 					continue;
 				}
-				if (!ge(a)) {
+				if (!We(a)) {
 					r.push({
 						file: a,
 						reason: "file-invalid-type",
-						message: K(a, "file-invalid-type")
+						message: q(a, "file-invalid-type")
 					});
 					continue;
 				}
-				if (typeof O.maxFileSize == "number" && O.maxFileSize > 0 && a.size > O.maxFileSize) {
+				if (typeof S.maxFileSize == "number" && S.maxFileSize > 0 && a.size > S.maxFileSize) {
 					r.push({
 						file: a,
 						reason: "file-too-large",
-						message: K(a, "file-too-large")
+						message: q(a, "file-too-large")
 					});
 					continue;
 				}
 				n.push(a), t.push(a), Number.isFinite(i) && --i;
 			}
-			ve(t, n, r);
-		}, Y = (e) => {
-			V.value || (I.value = [], k("update:modelValue", O.modelValue.filter((t, n) => n !== e)));
+			$e(t, n, r);
+		}, et = (e, t, n) => {
+			let r = G.value[t];
+			!r || r.status !== "uploading" && r.status !== "paused" || C("cancel", {
+				file: e,
+				index: t,
+				fileKey: Ue(e),
+				state: r,
+				reason: n
+			});
+		}, tt = (e) => {
+			if (B.value) return;
+			let t = S.modelValue[e];
+			t && et(t, e, "remove"), j.value = [], C("update:modelValue", S.modelValue.filter((t, n) => n !== e));
 		}, X = () => {
-			V.value || !H.value || (I.value = [], k("update:modelValue", []));
-		}, Z = (e) => e ? e.files.length > 0 || Array.from(e.types).includes("Files") : !1, ye = (e) => e?.items ? Array.from(e.items).map((e) => e.getAsFile?.() ?? null).filter((e) => e instanceof File) : [], be = (e) => {
+			B.value || !V.value || (S.modelValue.forEach((e, t) => {
+				et(e, t, "clear");
+			}), j.value = [], C("update:modelValue", []));
+		}, nt = r(() => S.modelValue.map((e, t) => {
+			let n = G.value[t], r = n?.status, i = F.value.get(e), a = Ue(e), o = n?.progress, s = typeof o == "number" ? Math.round(o) : void 0, c = n?.resumable === !0, l = !!(n && (r === "error" || r === "paused") && n.retryable !== !1), u = c ? "resume" : "restart", d = U(e.size), f = Be(e), p = i && i.width !== null && i.height !== null ? `${i.width} × ${i.height}` : void 0, m = r === "uploading" && s !== void 0 ? `${s}%` : void 0, h;
+			r === "uploading" && (n?.remainingLabel ? h = n.remainingLabel : typeof n?.remainingMs == "number" && Number.isFinite(n.remainingMs) && n.remainingMs >= 0 && (h = S.remainingTimeFormat(n.remainingMs)));
+			let g = (r === "error" || r === "paused") && typeof n?.uploadedBytes == "number" ? `${U(n.uploadedBytes)} of ${d} uploaded` : void 0, _ = r ? Ne.value[r] : void 0, v;
+			l && (v = c && s !== void 0 ? S.resumeLabel(s) : S.retryLabel);
+			let y = r === "error" ? n?.error : void 0;
+			return {
+				slotProps: {
+					file: e,
+					index: t,
+					fileKey: a,
+					state: n,
+					thumbnailUrl: n?.thumbnailUrl ?? i?.url,
+					sizeLabel: d,
+					typeLabel: f,
+					dimensionsLabel: p,
+					progressLabel: m,
+					remainingLabel: h,
+					uploadedLabel: g,
+					statusLabel: _,
+					actionLabel: v,
+					canRetry: l,
+					retryMode: u,
+					isDragActive: D.value,
+					isDragReject: O.value,
+					removeFile: () => tt(t),
+					retryFile: () => {
+						!l || B.value || !n || C("retry", {
+							file: e,
+							index: t,
+							fileKey: a,
+							mode: u,
+							state: n
+						});
+					}
+				},
+				rowClass: r ? `is-${r}` : void 0,
+				metaText: [
+					f,
+					d,
+					p,
+					n?.meta
+				].filter(Boolean).join(" · "),
+				statusText: [
+					_,
+					m,
+					h,
+					g
+				].filter(Boolean).join(" · "),
+				errorText: y,
+				errorId: y ? `${a}-error` : void 0,
+				showProgress: !!(n && (r === "uploading" || r === "paused" || r === "error" || r === "success" && s !== void 0)),
+				progressValue: r === "uploading" ? o : o ?? 0,
+				progressAriaLabel: `${_ ?? ""} ${e.name}`.trim(),
+				isBusy: r === "uploading",
+				isSuccess: r === "success"
+			};
+		})), Z = (e) => e ? e.files.length > 0 || Array.from(e.types).includes("Files") : !1, rt = (e) => e?.items ? Array.from(e.items).map((e) => e.getAsFile?.() ?? null).filter((e) => e instanceof File) : [], it = (e) => {
 			let t = e.target;
-			J(Array.from(t.files ?? [])), _e();
-		}, xe = (e) => {
-			!b(e) || V.value || (e.preventDefault(), q());
-		}, Se = () => {
-			P.value = !0;
-		}, Ce = (e) => {
+			Y(Array.from(t.files ?? [])), Qe();
+		}, at = (e) => {
+			!ie(e) || B.value || (e.preventDefault(), J());
+		}, ot = () => {
+			k.value = !0;
+		}, st = (e) => {
 			let t = e.relatedTarget;
-			t && j.value?.contains(t) || (P.value = !1);
+			t && T.value?.contains(t) || (k.value = !1);
+		}, ct = (e) => {
+			P.value = e;
+		}, lt = (e) => {
+			P.value === e && (P.value = null);
+		}, ut = (e) => {
+			if (!S.paste || B.value) return;
+			let t = rt(e.clipboardData);
+			t.length !== 0 && (e.preventDefault(), Y(t));
 		}, Q = (e) => {
-			if (!O.paste || V.value) return;
-			let t = ye(e.clipboardData);
-			t.length !== 0 && (e.preventDefault(), J(t));
-		}, $ = (e) => {
-			!P.value || e.defaultPrevented || Q(e);
-		}, we = (e) => {
-			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), F.value += 1, N.value = !0);
-		}, Te = (e) => {
-			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"), N.value = !0);
-		}, Ee = (e) => {
-			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), F.value = Math.max(F.value - 1, 0), F.value === 0 && (N.value = !1));
-		}, De = (e) => {
-			!O.drop || V.value || !Z(e.dataTransfer) || (e.preventDefault(), F.value = 0, N.value = !1, J(Array.from(e.dataTransfer?.files ?? [])));
-		};
-		return u(() => {
-			document.addEventListener("paste", $);
-		}), l(() => {
-			document.removeEventListener("paste", $);
-		}), (n, l) => (d(), a("div", c({
+			!k.value || e.defaultPrevented || ut(e);
+		}, dt = (e) => {
+			!S.drop || B.value || !Z(e.dataTransfer) || (e.preventDefault(), A.value += 1, D.value = !0, O.value = qe(e.dataTransfer));
+		}, ft = (e) => {
+			!S.drop || B.value || !Z(e.dataTransfer) || (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"), D.value = !0, O.value = qe(e.dataTransfer));
+		}, pt = (e) => {
+			!S.drop || B.value || !Z(e.dataTransfer) || (e.preventDefault(), A.value = Math.max(A.value - 1, 0), A.value === 0 && (D.value = !1, O.value = !1));
+		}, mt = (e) => {
+			!S.drop || B.value || !Z(e.dataTransfer) || (e.preventDefault(), A.value = 0, D.value = !1, O.value = !1, Y(Array.from(e.dataTransfer?.files ?? [])));
+		}, $ = /* @__PURE__ */ new Map();
+		return b(G, (e) => {
+			let t = [], n = /* @__PURE__ */ new Set();
+			S.modelValue.forEach((r, i) => {
+				n.add(r);
+				let a = e[i]?.status;
+				if (!a) return;
+				let o = $.get(r);
+				o !== a && ($.set(r, a), o !== void 0 && (a === "success" ? t.push(`${r.name} uploaded.`) : a === "error" && t.push(`${r.name} failed. ${e[i]?.error ?? ""}`.trim())));
+			});
+			for (let e of [...$.keys()]) n.has(e) || $.delete(e);
+			t.length > 0 && (N += 1, M.value = [...M.value, {
+				id: N,
+				text: t.join(" ")
+			}].slice(-5));
+		}, {
+			flush: "post",
+			immediate: !0
+		}), b(G, () => {
+			let e = P.value, t = T.value;
+			!e || !t || document.activeElement && document.activeElement !== document.body || t.querySelector(`[data-t-retry="${e}"]`) || (P.value = null, (t.querySelector(`[data-t-remove="${e}"]`) ?? t.querySelector(".t-file-upload__dropzone"))?.focus());
+		}, { flush: "post" }), b(() => S.modelValue, K), b(() => S.thumbnails, K), m(() => {
+			document.addEventListener("paste", Q), K();
+		}), p(() => {
+			document.removeEventListener("paste", Q), Ze();
+		}), (r, p) => (h(), o("div", d({
 			ref_key: "rootRef",
-			ref: j
-		}, fe.value, {
-			class: ue.value,
-			style: de.value,
-			onFocusin: Se,
-			onFocusout: Ce,
-			onPaste: Q
+			ref: T
+		}, Ie.value, {
+			class: Pe.value,
+			style: Fe.value,
+			onFocusin: ot,
+			onFocusout: st,
+			onPaste: ut
 		}), [
-			o("input", {
-				id: g(L),
+			s("input", {
+				id: ee(I),
 				ref_key: "inputRef",
-				ref: M,
+				ref: E,
 				class: "t-visually-hidden",
 				type: "file",
-				accept: s.accept || void 0,
-				multiple: s.multiple,
-				disabled: V.value,
-				onChange: be
-			}, null, 40, x),
-			o("div", {
+				accept: u.accept || void 0,
+				multiple: u.multiple,
+				disabled: B.value,
+				onChange: it
+			}, null, 40, ae),
+			s("div", {
 				class: "t-file-upload__dropzone",
-				"aria-busy": s.loading || void 0,
-				"aria-controls": s.showFileList && H.value ? B : void 0,
-				"aria-describedby": pe.value,
-				"aria-disabled": V.value || void 0,
-				"aria-invalid": s.invalid || void 0,
+				"aria-busy": u.loading || void 0,
+				"aria-controls": u.showFileList && V.value ? z : void 0,
+				"aria-describedby": Le.value,
+				"aria-disabled": B.value || void 0,
+				"aria-invalid": u.invalid || void 0,
 				role: "button",
-				tabindex: V.value ? -1 : 0,
-				onClick: q,
-				onKeydown: xe,
-				onDragenter: we,
-				onDragover: Te,
-				onDragleave: Ee,
-				onDrop: De
+				tabindex: B.value ? -1 : 0,
+				onClick: J,
+				onKeydown: at,
+				onDragenter: dt,
+				onDragover: ft,
+				onDragleave: pt,
+				onDrop: mt
 			}, [
-				n.$slots.icon || !n.$slots.default ? (d(), a("div", ee, [m(n.$slots, "icon", {}, () => [l[0] ||= o("span", { class: "t-file-upload__icon-mark" }, "+", -1)])])) : i("", !0),
-				o("div", te, [m(n.$slots, "default", {
-					files: s.modelValue,
-					isDragActive: N.value,
-					openFileDialog: q,
+				r.$slots.icon || !r.$slots.default ? (h(), o("div", se, [v(r.$slots, "icon", {}, () => [p[0] ||= s("span", { class: "t-file-upload__icon-mark" }, "+", -1)])])) : a("", !0),
+				s("div", ce, [v(r.$slots, "default", {
+					files: u.modelValue,
+					isDragActive: D.value,
+					isDragReject: O.value,
+					openFileDialog: J,
 					clearFiles: X
 				}, () => [
-					o("p", C, h(s.label), 1),
-					s.description ? (d(), a("p", {
+					s("p", le, y(ze.value), 1),
+					u.description ? (h(), o("p", {
 						key: 0,
-						id: R,
+						id: L,
 						class: "t-file-upload__description"
-					}, h(s.description), 1)) : i("", !0),
-					o("span", ne, h(s.buttonLabel), 1)
+					}, y(u.description), 1)) : a("", !0),
+					s("span", ue, y(u.buttonLabel), 1)
 				])]),
-				s.loading ? (d(), r(e, {
+				u.loading ? (h(), i(e, {
 					key: 1,
 					class: "t-file-upload__spinner",
 					size: "sm",
 					label: "Uploading files"
-				})) : i("", !0)
-			], 40, S),
-			I.value.length > 0 ? (d(), a("ul", {
+				})) : a("", !0)
+			], 40, oe),
+			j.value.length > 0 ? (h(), o("ul", {
 				key: 0,
-				id: z,
+				id: R,
 				class: "t-file-upload__feedback",
 				"aria-live": "polite"
-			}, [(d(!0), a(t, null, p(I.value, (e) => (d(), a("li", { key: e }, h(e), 1))), 128))])) : i("", !0),
-			s.showFileList && H.value ? (d(), a("div", re, [o("div", ie, [o("p", {
-				id: B,
+			}, [(h(!0), o(n, null, _(j.value, (e) => (h(), o("li", { key: e }, y(e), 1))), 128))])) : a("", !0),
+			s("div", de, [(h(!0), o(n, null, _(M.value, (e) => (h(), o("p", {
+				key: e.id,
+				class: "t-file-upload__status-log-entry"
+			}, y(e.text), 1))), 128))]),
+			u.showFileList && V.value ? (h(), o("div", fe, [s("div", pe, [s("p", {
+				id: z,
 				class: "t-file-upload__files-label"
-			}, h(me.value), 1), o("button", {
+			}, y(Re.value), 1), s("button", {
 				class: "t-file-upload__clear",
 				type: "button",
-				disabled: V.value,
+				disabled: B.value,
 				onClick: X
-			}, " Clear all ", 8, ae)]), o("ul", oe, [(d(!0), a(t, null, p(s.modelValue, (e, t) => (d(), a("li", {
-				key: he(e, t),
-				class: "t-file-upload__file"
-			}, [m(n.$slots, "file", {
-				file: e,
-				index: t,
-				removeFile: () => Y(t)
-			}, () => [o("div", se, [o("p", w, h(e.name), 1), o("p", T, h(G(e.size)), 1)]), o("button", {
-				class: "t-file-upload__remove",
-				type: "button",
-				disabled: V.value,
-				"aria-label": `Remove ${e.name}`,
-				onClick: (e) => Y(t)
-			}, " Remove ", 8, E)])]))), 128))])])) : i("", !0),
-			n.$slots.actions ? (d(), a("div", ce, [m(n.$slots, "actions", {
-				files: s.modelValue,
-				openFileDialog: q,
+			}, " Clear all ", 8, me)]), s("ul", he, [(h(!0), o(n, null, _(nt.value, (e) => (h(), o("li", {
+				key: e.slotProps.fileKey,
+				class: f(["t-file-upload__file", e.rowClass]),
+				"aria-busy": e.isBusy || void 0
+			}, [v(r.$slots, "file", d({ ref_for: !0 }, e.slotProps), () => [
+				s("span", _e, [e.slotProps.thumbnailUrl ? (h(), o("img", {
+					key: 0,
+					class: "t-file-upload__thumb-image",
+					src: e.slotProps.thumbnailUrl,
+					alt: ""
+				}, null, 8, ve)) : (h(), o("span", ye, y(e.slotProps.typeLabel), 1))]),
+				s("div", be, [
+					s("p", xe, y(e.slotProps.file.name), 1),
+					s("p", Se, y(e.metaText), 1),
+					v(r.$slots, "file-status", d({ ref_for: !0 }, e.slotProps), () => [
+						e.showProgress ? (h(), o("div", Ce, [l(t, {
+							size: "sm",
+							value: e.progressValue,
+							label: e.progressAriaLabel
+						}, null, 8, ["value", "label"])])) : a("", !0),
+						e.statusText ? (h(), o("p", we, [e.isSuccess ? (h(), o("span", Te, "✓")) : a("", !0), c(y(e.statusText), 1)])) : a("", !0),
+						e.errorText ? (h(), o("p", {
+							key: 2,
+							id: e.errorId,
+							class: "t-file-upload__file-error"
+						}, y(e.errorText), 9, Ee)) : a("", !0)
+					])
+				]),
+				e.slotProps.canRetry ? (h(), o("button", {
+					key: 0,
+					class: "t-file-upload__retry",
+					type: "button",
+					"data-t-retry": e.slotProps.fileKey,
+					disabled: B.value,
+					"aria-describedby": e.errorId,
+					onFocus: (t) => ct(e.slotProps.fileKey),
+					onBlur: (t) => lt(e.slotProps.fileKey),
+					onClick: (t) => e.slotProps.retryFile()
+				}, y(e.slotProps.actionLabel), 41, De)) : a("", !0),
+				s("button", {
+					class: "t-file-upload__remove",
+					type: "button",
+					"data-t-remove": e.slotProps.fileKey,
+					disabled: B.value,
+					"aria-label": `Remove ${e.slotProps.file.name}`,
+					onClick: (t) => e.slotProps.removeFile()
+				}, " Remove ", 8, Oe)
+			])], 10, ge))), 128))])])) : a("", !0),
+			r.$slots.actions ? (h(), o("div", ke, [v(r.$slots, "actions", {
+				files: u.modelValue,
+				openFileDialog: J,
 				clearFiles: X
-			})])) : i("", !0)
+			})])) : a("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { D as default };
+export { x as default };
 
 //# sourceMappingURL=TFileUpload.vue_vue_type_script_setup_true_lang.js.map