@vielzeug/refine 2.1.0 → 2.1.3

package/dist/file-input.js

@@ -1,15 +1,14 @@
-import { bindRefCallback as e } from "./core/ref-callback.js";
-import { createInteraction as t } from "./core/keyboard.js";
-import { coarsePointerMixin as n, reducedMotionMixin as r } from "./styles/mixins/accessibility.css.js";
-import { roundedVariantMixin as i, sizeVariantMixin as a } from "./styles/mixins/shape.css.js";
-import { disabledLoadingMixin as o } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as s, forcedColorsFocusMixin as c } from "./styles/mixins/theme.css.js";
+import { coarsePointerMixin as e, reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import { roundedVariantMixin as n, sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as i } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as a, forcedColorsFocusMixin as o } from "./styles/mixins/theme.css.js";
+import { createInteraction as s } from "./core/keyboard.js";
+import { bindRefCallback as c } from "./core/ref-callback.js";
 import { FILE_INPUT_SIZE_PRESET as l } from "./shared/size-presets.js";
-import { createFileQueue as u, formatBytes as d } from "./inputs/file-input/file-input-upload.js";
-import f from "./inputs/file-input/file-input.css.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 } from "@vielzeug/ripple";
-import { watch as O } from "@vielzeug/ripple/watch";
+import { computed as E, signal as D, watch as O } from "@vielzeug/ripple";
 import { createDropZone as k } from "@vielzeug/dnd";
 //#region src/inputs/file-input/file-input.ts
 var A = (e) => e.type.startsWith("image/"), j = "ore-file-input";
@@ -32,62 +31,62 @@ h(j, {
 		size: x.string(),
 		upload: x.data()
 	},
-	setup(n) {
-		let r = C(), i = D(!1), a = D(null), o = E(() => !!n.disabled.value), s = E(() => n["max-files"].value ?? 0), c = E(() => n["max-size"].value ?? 0), l = u({
-			accept: n.accept,
-			disabled: o,
-			maxFiles: s,
-			maxSize: c,
-			multiple: E(() => !!n.multiple.value),
-			onChange: (e, t) => r("change", {
+	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({
+			accept: e.accept,
+			disabled: i,
+			maxFiles: a,
+			maxSize: o,
+			multiple: E(() => !!e.multiple.value),
+			onChange: (e, n) => t("change", {
 				files: e,
-				originalEvent: t,
+				originalEvent: n,
 				value: e
 			}),
-			onRemove: (e, t, n) => r("remove", {
+			onRemove: (e, n, r) => t("remove", {
 				file: e,
-				files: t,
-				originalEvent: n,
-				value: t
+				files: n,
+				originalEvent: r,
+				value: n
 			}),
-			onUploadError: (e, t) => r("upload-error", {
-				error: t,
+			onUploadError: (e, n) => t("upload-error", {
+				error: n,
 				file: e
 			}),
-			onUploadProgress: (e, t, n) => r("upload-progress", {
+			onUploadProgress: (e, n, r) => t("upload-progress", {
 				file: e,
-				loaded: t,
-				total: n
+				loaded: n,
+				total: r
 			}),
-			onUploadSuccess: (e) => r("upload-success", { file: e }),
-			upload: E(() => n.upload.value ?? void 0)
+			onUploadSuccess: (e) => t("upload-success", { file: e }),
+			upload: E(() => e.upload.value ?? void 0)
 		});
 		_(() => l.dispose()), w({
-			disabled: o,
-			toFormValue: (e) => {
-				if (e.length === 0) return null;
-				let t = n.name.value || "file", r = new FormData();
-				for (let n of e) r.append(t, n);
+			disabled: i,
+			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
 		});
-		let f = E(() => !!n.error.value);
+		let u = E(() => !!e.error.value);
 		p({ attr: {
-			"drag-over": () => i.value ? !0 : void 0,
-			invalid: () => f.value ? !0 : void 0,
-			size: n.size
+			"drag-over": () => n.value ? !0 : void 0,
+			invalid: () => u.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 e = [];
-			n.accept.value && e.push(n.accept.value.split(",").map((e) => e.trim()).join(", "));
-			let t = c.value;
-			t > 0 && e.push(`max ${d(t)}`);
-			let r = s.value;
-			return r > 0 && e.push(`up to ${r} file${r === 1 ? "" : "s"}`), e.join(" · ");
+			let t = [];
+			e.accept.value && t.push(e.accept.value.split(",").map((e) => e.trim()).join(", "));
+			let n = o.value;
+			n > 0 && t.push(`max ${f(n)}`);
+			let r = a.value;
+			return r > 0 && t.push(`up to ${r} file${r === 1 ? "" : "s"}`), t.join(" · ");
 		});
 		function I(e) {
-			a.value = e, P.value?.click();
+			r.value = e, P.value?.click();
 		}
 		let L = /* @__PURE__ */ new Map();
 		function R(e) {
@@ -101,68 +100,68 @@ h(j, {
 		return O(l.files, z), _(() => {
 			for (let e of L.values()) URL.revokeObjectURL(e);
 			L.clear();
-		}), v(P, (t) => e(n.ref, t)), b(() => {
-			let e = P.value, n = N.value, r = !1, s = t({
-				disabled: o,
+		}), v(P, (t) => c(e.ref, t)), b(() => {
+			let e = P.value, t = N.value, a = !1, o = s({
+				disabled: i,
 				onPress: () => {
 					e.click();
 				}
 			});
 			y(e, "change", (e) => {
-				let t = e.target, n = a.value;
-				a.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(n, "click", (t) => {
+				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) => {
 				if (t.target !== e) {
-					if (r) {
-						r = !1;
+					if (a) {
+						a = !1;
 						return;
 					}
-					o.value || e.click();
+					i.value || e.click();
 				}
-			}), y(n, "keydown", (e) => {
-				r = s.handleKeydown(e) && e.key === "Enter";
-			}), O(o, (e) => {
-				let t = k({
+			}), y(t, "keydown", (e) => {
+				a = o.handleKeydown(e) && e.key === "Enter";
+			}), O(i, (e) => {
+				let r = k({
 					disabled: e,
-					element: n,
+					element: t,
 					onDrop: (e) => l.addFiles(e),
 					onHoverChange: (e) => {
-						i.value = e;
+						n.value = e;
 					}
 				});
-				return () => t.dispose();
+				return () => r.dispose();
 			}, { immediate: !0 });
 		}), g`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${x}" part="label" ?hidden=${() => !n.label.value}>
-          ${n.label}
+        <label class="label-outside" id="${x}" part="label" ?hidden=${() => !e.label.value}>
+          ${e.label}
         </label>
         <div
           class="dropzone"
           part="dropzone"
           ref=${N}
           role="button"
-          tabindex="${() => o.value ? "-1" : "0"}"
-          aria-disabled="${() => String(o.value)}"
-          aria-label="${() => n.label.value ? null : "File upload drop zone"}"
-          aria-labelledby="${() => n.label.value ? x : null}"
+          tabindex="${() => i.value ? "-1" : "0"}"
+          aria-disabled="${() => String(i.value)}"
+          aria-label="${() => e.label.value ? null : "File upload drop zone"}"
+          aria-labelledby="${() => e.label.value ? x : null}"
           aria-describedby="${j}">
           <input
             type="file"
             ref=${P}
             part="input"
             id="${h}"
-            accept="${n.accept}"
-            ?multiple="${n.multiple}"
-            ?required="${n.required}"
-            ?disabled="${o}"
-            name="${n.name}"
+            accept="${e.accept}"
+            ?multiple="${e.multiple}"
+            ?required="${e.required}"
+            ?disabled="${i}"
+            name="${e.name}"
             hidden
             inert
             tabindex="-1" />
           <div class="dropzone-content">
-            <span class="dropzone-icon" aria-hidden="true" data-status="${() => f.value ? "error" : null}">
-              ${() => f.value ? g`
+            <span class="dropzone-icon" aria-hidden="true" data-status="${() => u.value ? "error" : null}">
+              ${() => u.value ? g`
                       <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>
@@ -171,10 +170,10 @@ h(j, {
             <!-- 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(() => i.value, () => g`
+            ${T(() => n.value, () => g`
                 <span class="dropzone-title dropzone-title-active">Release to upload</span>
               `)}
-            ${T(() => !i.value, () => g`
+            ${T(() => !n.value, () => g`
                 <span class="dropzone-title">
                   Drop files here or
                   <u>click to browse</u>
@@ -184,157 +183,157 @@ h(j, {
           </div>
         </div>
         <ul
-          class="${() => n.gallery.value ? "file-grid" : "file-list"}"
-          part="${() => n.gallery.value ? "gallery" : null}"
+          class="${() => e.gallery.value ? "file-grid" : "file-list"}"
+          part="${() => e.gallery.value ? "gallery" : null}"
           role="list"
           aria-label="Selected files"
           ?hidden=${() => l.files.value.length === 0}>
-          ${() => l.files.value.map((e) => n.gallery.value ? g`
-                    <li class="file-card" data-status=${() => l.fileState(e).status}>
+          ${() => l.files.value.map((t) => e.gallery.value ? g`
+                    <li class="file-card" data-status=${() => l.fileState(t).status}>
                       <span class="file-thumb-frame">
-                        ${A(e) ? g`
+                        ${A(t) ? g`
                                 <img
                                   class="file-thumb"
                                   alt=""
-                                  ref="${(t) => {
-			t && (t.src = R(e));
+                                  ref="${(e) => {
+			e && (e.src = R(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(e).status === "success", () => g`
+                        ${T(() => l.fileState(t).status === "success", () => g`
                             <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(e).status === "error", () => g`
+                        ${T(() => l.fileState(t).status === "error", () => g`
                             <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(e).status === "error", () => g`
+                          ${T(() => l.fileState(t).status === "error", () => g`
                               <button
                                 class="file-card-action"
                                 type="button"
-                                aria-label="${`Retry uploading ${e.name}`}"
-                                @click=${() => l.retryUpload(e)}>
+                                aria-label="${`Retry uploading ${t.name}`}"
+                                @click=${() => l.retryUpload(t)}>
                                 <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                               </button>
                             `)}
-                          ${T(() => l.fileState(e).status === "success" && !!n.multiple.value && !!n.upload.value, () => g`
+                          ${T(() => l.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => g`
                               <button
                                 class="file-card-action"
                                 type="button"
-                                aria-label="${`Replace ${e.name}`}"
-                                @click=${() => I(e)}>
+                                aria-label="${`Replace ${t.name}`}"
+                                @click=${() => I(t)}>
                                 <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                               </button>
                             `)}
                           <button
                             class="file-card-action file-card-remove"
                             type="button"
-                            aria-label="${`Remove ${e.name}`}"
-                            @click=${(t) => l.removeFile(e, t)}>
+                            aria-label="${`Remove ${t.name}`}"
+                            @click=${(e) => l.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="${e.name}">${e.name}</span>
-                      ${T(() => l.fileState(e).status === "uploading", () => g`
+                      <span class="file-card-name" title="${t.name}">${t.name}</span>
+                      ${T(() => l.fileState(t).status === "uploading", () => g`
                           <ore-progress
                             type="linear"
                             size="sm"
-                            value=${() => l.uploadPercent(e)}
-                            label=${() => `${l.uploadPercent(e)}%`}></ore-progress>
-                          <span class="file-progress-meta">${() => l.uploadMetaText(e)}</span>
+                            value=${() => l.uploadPercent(t)}
+                            label=${() => `${l.uploadPercent(t)}%`}></ore-progress>
+                          <span class="file-progress-meta">${() => l.uploadMetaText(t)}</span>
                         `)}
-                      ${T(() => l.fileState(e).status === "error", () => g`
-                          <span class="file-error-text">${() => l.fileState(e).error}</span>
+                      ${T(() => l.fileState(t).status === "error", () => g`
+                          <span class="file-error-text">${() => l.fileState(t).error}</span>
                         `)}
                     </li>
                   ` : g`
-                    <li class="file-item" data-status=${() => l.fileState(e).status}>
+                    <li class="file-item" data-status=${() => l.fileState(t).status}>
                       <span class="file-icon" aria-hidden="true">
                         <ore-icon
-                          name=${() => l.statusIconName(e)}
+                          name=${() => l.statusIconName(t)}
                           size="18"
                           stroke-width="1.75"
                           aria-hidden="true"></ore-icon>
                       </span>
                       <span class="file-meta">
-                        <span class="file-name" title="${e.name}">${e.name}</span>
-                        ${T(() => l.fileState(e).status === "uploading", () => g`
+                        <span class="file-name" title="${t.name}">${t.name}</span>
+                        ${T(() => l.fileState(t).status === "uploading", () => g`
                             <ore-progress
                               type="linear"
                               size="sm"
-                              value=${() => l.uploadPercent(e)}
-                              label=${() => `${l.uploadPercent(e)}%`}></ore-progress>
-                            <span class="file-progress-meta">${() => l.uploadMetaText(e)}</span>
+                              value=${() => l.uploadPercent(t)}
+                              label=${() => `${l.uploadPercent(t)}%`}></ore-progress>
+                            <span class="file-progress-meta">${() => l.uploadMetaText(t)}</span>
                           `)}
-                        ${T(() => l.fileState(e).status === "error", () => g`
-                            <span class="file-error-text">${() => l.fileState(e).error}</span>
+                        ${T(() => l.fileState(t).status === "error", () => g`
+                            <span class="file-error-text">${() => l.fileState(t).error}</span>
                           `)}
-                        ${T(() => l.fileState(e).status === "idle" || l.fileState(e).status === "success", () => g`
-                            <span class="file-size">${d(e.size)}</span>
+                        ${T(() => l.fileState(t).status === "idle" || l.fileState(t).status === "success", () => g`
+                            <span class="file-size">${f(t.size)}</span>
                           `)}
                       </span>
                       <span class="file-actions">
-                        ${T(() => l.fileState(e).status === "error", () => g`
+                        ${T(() => l.fileState(t).status === "error", () => g`
                             <button
                               class="file-action"
                               type="button"
-                              aria-label="${`Retry uploading ${e.name}`}"
-                              @click=${() => l.retryUpload(e)}>
+                              aria-label="${`Retry uploading ${t.name}`}"
+                              @click=${() => l.retryUpload(t)}>
                               <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                             </button>
                           `)}
-                        ${T(() => l.fileState(e).status === "success" && !!n.multiple.value && !!n.upload.value, () => g`
+                        ${T(() => l.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => g`
                             <button
                               class="file-action"
                               type="button"
-                              aria-label="${`Replace ${e.name}`}"
-                              @click=${() => I(e)}>
+                              aria-label="${`Replace ${t.name}`}"
+                              @click=${() => I(t)}>
                               <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
                             </button>
                           `)}
                         <button
                           class="file-remove"
                           type="button"
-                          aria-label="${`Remove ${e.name}`}"
-                          @click=${(t) => l.removeFile(e, t)}>
+                          aria-label="${`Remove ${t.name}`}"
+                          @click=${(e) => l.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=${() => f.value || !n.helper.value}>
-          ${n.helper}
+        <div class="helper-text" id="${j}" part="helper" ?hidden=${() => u.value || !e.helper.value}>
+          ${e.helper}
         </div>
         <div
           class="helper-text helper-text-error"
           id="${M}"
           role="alert"
           part="error"
-          ?hidden=${() => !f.value}>
-          ${() => n.error.value ?? ""}
+          ?hidden=${() => !u.value}>
+          ${() => e.error.value ?? ""}
         </div>
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		s,
+		a,
+		e,
+		t,
 		n,
-		r,
 		i,
-		o,
-		a(l),
-		c(".dropzone"),
-		f
+		r(l),
+		o(".dropzone"),
+		u
 	]
 });
 //#endregion