@vielzeug/refine 2.2.5 → 2.4.0

package/dist/file-input.js

@@ -7,179 +7,180 @@ import { bindRefCallback as c } from "./core/ref-callback.js";
 import { FILE_INPUT_SIZE_PRESET as l } from "./shared/size-presets.js";
 import u from "./inputs/file-input/file-input.css.js";
 import { createFileQueue as d, formatBytes as f } from "./inputs/file-input/file-input-upload.js";
-import { bind as p, createStableId as m, define as h, html as g, onCleanup as _, onElement as v, onEvent as y, onMounted as b, prop as x, ref as S, useEmit as C, useField as w, when as T } from "@vielzeug/ore";
-import { computed as E, signal as D, watch as O } from "@vielzeug/ripple";
-import { createDropZone as k } from "@vielzeug/dnd";
+import { bind as p, createStableId as m, define as h, getHost as g, html as _, onCleanup as v, onElement as y, onEvent as b, onMounted as x, prop as S, ref as C, useEmit as w, useField as T, when as E } from "@vielzeug/ore";
+import { computed as D, signal as O, watch as k } from "@vielzeug/ripple";
+import { createDropZone as A } from "@vielzeug/dnd";
 //#region src/inputs/file-input/file-input.ts
-var A = (e) => e.type.startsWith("image/"), j = "ore-file-input";
-h(j, {
+var j = (e) => e.type.startsWith("image/"), M = "ore-file-input";
+h(M, {
 	formAssociated: !0,
 	props: {
-		accept: x.string(),
-		color: x.string(),
-		disabled: x.bool(!1),
-		error: x.string(),
-		gallery: x.bool(!1),
-		helper: x.string(),
-		label: x.string(),
-		"max-files": x.number(0),
-		"max-size": x.number(0),
-		multiple: x.bool(!1),
-		name: x.string(),
-		ref: x.data(),
-		required: x.bool(!1),
-		size: x.string(),
-		upload: x.data()
+		accept: S.string(),
+		color: S.string(),
+		disabled: S.bool(!1),
+		error: S.string(),
+		gallery: S.bool(!1),
+		helper: S.string(),
+		label: S.string(),
+		"max-files": S.number(0),
+		"max-size": S.number(0),
+		multiple: S.bool(!1),
+		name: S.string(),
+		ref: S.data(),
+		required: S.bool(!1),
+		size: S.string(),
+		upload: S.data()
 	},
 	setup(e) {
-		let t = C(), n = D(!1), r = D(null), i = E(() => !!e.disabled.value), a = E(() => e["max-files"].value ?? 0), o = E(() => e["max-size"].value ?? 0), l = d({
+		let t = g(), n = w(), r = O(!1), i = O(null), a = D(() => !!e.disabled.value), o = D(() => e["max-files"].value ?? 0), l = D(() => e["max-size"].value ?? 0), u = d({
 			accept: e.accept,
-			disabled: i,
-			maxFiles: a,
-			maxSize: o,
-			multiple: E(() => !!e.multiple.value),
-			onChange: (e, n) => t("change", {
+			disabled: a,
+			document: t.ownerDocument,
+			maxFiles: o,
+			maxSize: l,
+			multiple: D(() => !!e.multiple.value),
+			onChange: (e, t) => n("change", {
 				files: e,
-				originalEvent: n,
+				originalEvent: t,
 				value: e
 			}),
-			onRemove: (e, n, r) => t("remove", {
+			onRemove: (e, t, r) => n("remove", {
 				file: e,
-				files: n,
+				files: t,
 				originalEvent: r,
-				value: n
+				value: t
 			}),
-			onUploadError: (e, n) => t("upload-error", {
-				error: n,
+			onUploadError: (e, t) => n("upload-error", {
+				error: t,
 				file: e
 			}),
-			onUploadProgress: (e, n, r) => t("upload-progress", {
+			onUploadProgress: (e, t, r) => n("upload-progress", {
 				file: e,
-				loaded: n,
+				loaded: t,
 				total: r
 			}),
-			onUploadSuccess: (e) => t("upload-success", { file: e }),
-			upload: E(() => e.upload.value ?? void 0)
+			onUploadSuccess: (e) => n("upload-success", { file: e }),
+			upload: D(() => e.upload.value ?? void 0)
 		});
-		_(() => l.dispose()), w({
-			disabled: i,
+		v(() => u.dispose()), T({
+			disabled: a,
 			toFormValue: (t) => {
 				if (t.length === 0) return null;
 				let n = e.name.value || "file", r = new FormData();
 				for (let e of t) r.append(n, e);
 				return r;
 			},
-			value: l.files
+			value: u.files
 		});
-		let u = E(() => !!e.error.value);
+		let h = D(() => !!e.error.value);
 		p({ attr: {
-			"drag-over": () => n.value ? !0 : void 0,
-			invalid: () => u.value ? !0 : void 0,
+			"drag-over": () => r.value ? !0 : void 0,
+			invalid: () => h.value ? !0 : void 0,
 			size: e.size
 		} });
-		let h = m("file-input"), x = `label-${h}`, j = `helper-${h}`, M = `error-${h}`, N = S(), P = S(), F = E(() => {
+		let S = m("file-input"), M = `label-${S}`, N = `helper-${S}`, P = `error-${S}`, F = C(), I = C(), L = D(() => {
 			let t = [];
 			e.accept.value && t.push(e.accept.value.split(",").map((e) => e.trim()).join(", "));
-			let n = o.value;
+			let n = l.value;
 			n > 0 && t.push(`max ${f(n)}`);
-			let r = a.value;
+			let r = o.value;
 			return r > 0 && t.push(`up to ${r} file${r === 1 ? "" : "s"}`), t.join(" · ");
 		});
-		function I(e) {
-			r.value = e, P.value?.click();
-		}
-		let L = /* @__PURE__ */ new Map();
 		function R(e) {
-			let t = L.get(e);
-			return t || (t = URL.createObjectURL(e), L.set(e, t)), t;
+			i.value = e, I.value?.click();
+		}
+		let z = /* @__PURE__ */ new Map();
+		function B(e) {
+			let t = z.get(e);
+			return t || (t = URL.createObjectURL(e), z.set(e, t)), t;
 		}
-		function z(e) {
+		function V(e) {
 			let t = new Set(e);
-			for (let [e, n] of L) t.has(e) || (URL.revokeObjectURL(n), L.delete(e));
+			for (let [e, n] of z) t.has(e) || (URL.revokeObjectURL(n), z.delete(e));
 		}
-		return O(l.files, z), _(() => {
-			for (let e of L.values()) URL.revokeObjectURL(e);
-			L.clear();
-		}), v(P, (t) => c(e.ref, t)), b(() => {
-			let e = P.value, t = N.value, a = !1, o = s({
-				disabled: i,
+		return k(u.files, V), v(() => {
+			for (let e of z.values()) URL.revokeObjectURL(e);
+			z.clear();
+		}), y(I, (t) => c(e.ref, t)), x(() => {
+			let e = I.value, t = F.value, n = !1, o = s({
+				disabled: a,
 				onPress: () => {
 					e.click();
 				}
 			});
-			y(e, "change", (e) => {
-				let t = e.target, n = r.value;
-				r.value = null, n && t.files?.[0] ? l.replaceFile(n, t.files[0], e) : t.files?.length && l.addFiles(Array.from(t.files), e), t.value = "";
-			}), y(t, "click", (t) => {
+			b(e, "change", (e) => {
+				let t = e.target, n = i.value;
+				i.value = null, n && t.files?.[0] ? u.replaceFile(n, t.files[0], e) : t.files?.length && u.addFiles(Array.from(t.files), e), t.value = "";
+			}), b(t, "click", (t) => {
 				if (t.target !== e) {
-					if (a) {
-						a = !1;
+					if (n) {
+						n = !1;
 						return;
 					}
-					i.value || e.click();
+					a.value || e.click();
 				}
-			}), y(t, "keydown", (e) => {
-				a = o.handleKeydown(e) && e.key === "Enter";
-			}), O(i, (e) => {
-				let r = k({
+			}), b(t, "keydown", (e) => {
+				n = o.handleKeydown(e) && e.key === "Enter";
+			}), k(a, (e) => {
+				let n = A({
 					disabled: e,
 					element: t,
-					onDrop: (e) => l.addFiles(e),
+					onDrop: (e) => u.addFiles(e),
 					onHoverChange: (e) => {
-						n.value = e;
+						r.value = e;
 					}
 				});
-				return () => r.dispose();
+				return () => n.dispose();
 			}, { immediate: !0 });
-		}), g`
+		}), _`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${x}" part="label" ?hidden=${() => !e.label.value}>
+        <label class="label-outside" id="${M}" part="label" ?hidden=${() => !e.label.value}>
           ${e.label}
         </label>
         <div
           class="dropzone"
           part="dropzone"
-          ref=${N}
+          ref=${F}
           role="button"
-          tabindex="${() => i.value ? "-1" : "0"}"
-          aria-disabled="${() => String(i.value)}"
+          tabindex="${() => a.value ? "-1" : "0"}"
+          aria-disabled="${() => String(a.value)}"
           aria-label="${() => e.label.value ? null : "File upload drop zone"}"
-          aria-labelledby="${() => e.label.value ? x : null}"
-          aria-describedby="${j}">
+          aria-labelledby="${() => e.label.value ? M : null}"
+          aria-describedby="${N}">
           <input
             type="file"
-            ref=${P}
+            ref=${I}
             part="input"
-            id="${h}"
+            id="${S}"
             accept="${e.accept}"
             ?multiple="${e.multiple}"
             ?required="${e.required}"
-            ?disabled="${i}"
+            ?disabled="${a}"
             name="${e.name}"
             hidden
             inert
             tabindex="-1" />
           <div class="dropzone-content">
-            <span class="dropzone-icon" aria-hidden="true" data-status="${() => u.value ? "error" : null}">
-              ${() => u.value ? g`
+            <span class="dropzone-icon" aria-hidden="true" data-status="${() => h.value ? "error" : null}">
+              ${() => h.value ? _`
                       <ore-icon name="alert-circle" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
-                    ` : g`
+                    ` : _`
                       <ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
                     `}
             </span>
             <!-- Signal 01: the copy itself shifts on drag-entry (not just border/glow) — a
                  static "Drop files here" during an active drag reads as if the drop target
                  hasn't noticed the file yet. -->
-            ${T(() => n.value, () => g`
+            ${E(() => r.value, () => _`
                 <span class="dropzone-title dropzone-title-active">Release to upload</span>
               `)}
-            ${T(() => !n.value, () => g`
+            ${E(() => !r.value, () => _`
                 <span class="dropzone-title">
                   Drop files here or
                   <u>click to browse</u>
                 </span>
               `)}
-            <span class="dropzone-hint" ?hidden=${() => !F.value}>${F}</span>
+            <span class="dropzone-hint" ?hidden=${() => !L.value}>${L}</span>
           </div>
         </div>
         <ul
@@ -187,48 +188,48 @@ h(j, {
           part="${() => e.gallery.value ? "gallery" : null}"
           role="list"
           aria-label="Selected files"
-          ?hidden=${() => l.files.value.length === 0}>
-          ${() => l.files.value.map((t) => e.gallery.value ? g`
-                    <li class="file-card" data-status=${() => l.fileState(t).status}>
+          ?hidden=${() => u.files.value.length === 0}>
+          ${() => u.files.value.map((t) => e.gallery.value ? _`
+                    <li class="file-card" data-status=${() => u.fileState(t).status}>
                       <span class="file-thumb-frame">
-                        ${A(t) ? g`
+                        ${j(t) ? _`
                                 <img
                                   class="file-thumb"
                                   alt=""
                                   ref="${(e) => {
-			e && (e.src = R(t));
+			e && (e.src = B(t));
 		}}" />
-                              ` : g`
+                              ` : _`
                                 <span class="file-thumb file-thumb-generic" aria-hidden="true">
                                   <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
                                 </span>
                               `}
-                        ${T(() => l.fileState(t).status === "success", () => g`
+                        ${E(() => u.fileState(t).status === "success", () => _`
                             <span class="file-status-badge file-status-badge-success" aria-hidden="true">
                               <ore-icon name="check" size="11" stroke-width="3" aria-hidden="true"></ore-icon>
                             </span>
                           `)}
-                        ${T(() => l.fileState(t).status === "error", () => g`
+                        ${E(() => u.fileState(t).status === "error", () => _`
                             <span class="file-status-badge file-status-badge-error" aria-hidden="true">
                               <ore-icon name="alert-circle" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                             </span>
                           `)}
                         <span class="file-card-actions">
-                          ${T(() => l.fileState(t).status === "error", () => g`
+                          ${E(() => u.fileState(t).status === "error", () => _`
                               <button
                                 class="file-card-action"
                                 type="button"
                                 aria-label="${`Retry uploading ${t.name}`}"
-                                @click=${() => l.retryUpload(t)}>
+                                @click=${() => u.retryUpload(t)}>
                                 <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                               </button>
                             `)}
-                          ${T(() => l.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => g`
+                          ${E(() => u.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => _`
                               <button
                                 class="file-card-action"
                                 type="button"
                                 aria-label="${`Replace ${t.name}`}"
-                                @click=${() => I(t)}>
+                                @click=${() => R(t)}>
                                 <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                               </button>
                             `)}
@@ -236,66 +237,66 @@ h(j, {
                             class="file-card-action file-card-remove"
                             type="button"
                             aria-label="${`Remove ${t.name}`}"
-                            @click=${(e) => l.removeFile(t, e)}>
+                            @click=${(e) => u.removeFile(t, e)}>
                             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                           </button>
                         </span>
                       </span>
                       <span class="file-card-name" title="${t.name}">${t.name}</span>
-                      ${T(() => l.fileState(t).status === "uploading", () => g`
+                      ${E(() => u.fileState(t).status === "uploading", () => _`
                           <ore-progress
                             type="linear"
                             size="sm"
-                            value=${() => l.uploadPercent(t)}
-                            label=${() => `${l.uploadPercent(t)}%`}></ore-progress>
-                          <span class="file-progress-meta">${() => l.uploadMetaText(t)}</span>
+                            value=${() => u.uploadPercent(t)}
+                            label=${() => `${u.uploadPercent(t)}%`}></ore-progress>
+                          <span class="file-progress-meta">${() => u.uploadMetaText(t)}</span>
                         `)}
-                      ${T(() => l.fileState(t).status === "error", () => g`
-                          <span class="file-error-text">${() => l.fileState(t).error}</span>
+                      ${E(() => u.fileState(t).status === "error", () => _`
+                          <span class="file-error-text">${() => u.fileState(t).error}</span>
                         `)}
                     </li>
-                  ` : g`
-                    <li class="file-item" data-status=${() => l.fileState(t).status}>
+                  ` : _`
+                    <li class="file-item" data-status=${() => u.fileState(t).status}>
                       <span class="file-icon" aria-hidden="true">
                         <ore-icon
-                          name=${() => l.statusIconName(t)}
+                          name=${() => u.statusIconName(t)}
                           size="18"
                           stroke-width="1.75"
                           aria-hidden="true"></ore-icon>
                       </span>
                       <span class="file-meta">
                         <span class="file-name" title="${t.name}">${t.name}</span>
-                        ${T(() => l.fileState(t).status === "uploading", () => g`
+                        ${E(() => u.fileState(t).status === "uploading", () => _`
                             <ore-progress
                               type="linear"
                               size="sm"
-                              value=${() => l.uploadPercent(t)}
-                              label=${() => `${l.uploadPercent(t)}%`}></ore-progress>
-                            <span class="file-progress-meta">${() => l.uploadMetaText(t)}</span>
+                              value=${() => u.uploadPercent(t)}
+                              label=${() => `${u.uploadPercent(t)}%`}></ore-progress>
+                            <span class="file-progress-meta">${() => u.uploadMetaText(t)}</span>
                           `)}
-                        ${T(() => l.fileState(t).status === "error", () => g`
-                            <span class="file-error-text">${() => l.fileState(t).error}</span>
+                        ${E(() => u.fileState(t).status === "error", () => _`
+                            <span class="file-error-text">${() => u.fileState(t).error}</span>
                           `)}
-                        ${T(() => l.fileState(t).status === "idle" || l.fileState(t).status === "success", () => g`
+                        ${E(() => u.fileState(t).status === "idle" || u.fileState(t).status === "success", () => _`
                             <span class="file-size">${f(t.size)}</span>
                           `)}
                       </span>
                       <span class="file-actions">
-                        ${T(() => l.fileState(t).status === "error", () => g`
+                        ${E(() => u.fileState(t).status === "error", () => _`
                             <button
                               class="file-action"
                               type="button"
                               aria-label="${`Retry uploading ${t.name}`}"
-                              @click=${() => l.retryUpload(t)}>
+                              @click=${() => u.retryUpload(t)}>
                               <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                             </button>
                           `)}
-                        ${T(() => l.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => g`
+                        ${E(() => u.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => _`
                             <button
                               class="file-action"
                               type="button"
                               aria-label="${`Replace ${t.name}`}"
-                              @click=${() => I(t)}>
+                              @click=${() => R(t)}>
                               <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                             </button>
                           `)}
@@ -303,22 +304,22 @@ h(j, {
                           class="file-remove"
                           type="button"
                           aria-label="${`Remove ${t.name}`}"
-                          @click=${(e) => l.removeFile(t, e)}>
+                          @click=${(e) => u.removeFile(t, e)}>
                           <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                         </button>
                       </span>
                     </li>
                   `)}
         </ul>
-        <div class="helper-text" id="${j}" part="helper" ?hidden=${() => u.value || !e.helper.value}>
+        <div class="helper-text" id="${N}" part="helper" ?hidden=${() => h.value || !e.helper.value}>
           ${e.helper}
         </div>
         <div
           class="helper-text helper-text-error"
-          id="${M}"
+          id="${P}"
           role="alert"
           part="error"
-          ?hidden=${() => !u.value}>
+          ?hidden=${() => !h.value}>
           ${() => e.error.value ?? ""}
         </div>
       </div>
@@ -337,6 +338,6 @@ h(j, {
 	]
 });
 //#endregion
-export { j as FILE_INPUT_TAG };
+export { M as FILE_INPUT_TAG };
 
 //# sourceMappingURL=file-input.js.map