@vielzeug/refine 1.8.0 → 2.0.0

package/dist/file-input.js

@@ -1,306 +1,343 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { forcedColorsFocusMixin as t } from "./styles/mixins/theme.css.js";
-import { fieldMixins as n } from "./styles/index.js";
-import { FILE_INPUT_SIZE_PRESET as r } from "./shared/size-presets.js";
-import { bindRefCallback as i } from "./headless/ref-callback.js";
-import { createInteraction as a } from "./headless/keyboard.js";
-import { FORM_CTX as o, useFormContext as s } from "./inputs/shared/form-context.js";
-import { createFileQueue as c, formatBytes as l } from "./inputs/file-input/file-input-upload.js";
-import u from "./inputs/file-input/file-input.css.js";
-import { bind as d, createStableId as f, define as p, html as m, inject as h, onCleanup as g, onElement as _, onEvent as v, onMounted as y, prop as b, ref as x, useEmit as S, when as C } from "@vielzeug/ore";
-import { computed as w, signal as T, watch as E } from "@vielzeug/ripple";
-import { useField as D } from "@vielzeug/ore/forms";
-import { createDropZone as O } from "@vielzeug/dnd";
+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 { 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 { 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 { createDropZone as k } from "@vielzeug/dnd";
 //#region src/inputs/file-input/file-input.ts
-var k = (e) => e.type.startsWith("image/"), A = "ore-file-input";
-p(A, {
+var A = (e) => e.type.startsWith("image/"), j = "ore-file-input";
+h(j, {
 	formAssociated: !0,
 	props: {
-		accept: b.string(),
-		color: b.string(),
-		disabled: b.bool(!1),
-		error: b.string(),
-		gallery: b.bool(!1),
-		helper: b.string(),
-		label: b.string(),
-		"max-files": b.number(0),
-		"max-size": b.number(0),
-		multiple: b.bool(!1),
-		name: b.string(),
-		ref: b.data(),
-		required: b.bool(!1),
-		size: b.string(),
-		upload: b.data()
+		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()
 	},
-	setup(e) {
-		let t = S(), n = T(!1), r = T(null), u = s(e, h(o)), p = u.disabled, b = w(() => e["max-files"].value ?? 0), A = w(() => e["max-size"].value ?? 0), j = c({
-			accept: e.accept,
-			disabled: p,
-			maxFiles: b,
-			maxSize: A,
-			multiple: w(() => !!e.multiple.value),
-			onChange: (e, n) => t("change", {
+	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", {
 				files: e,
-				originalEvent: n,
+				originalEvent: t,
 				value: e
 			}),
-			onRemove: (e, n, r) => t("remove", {
+			onRemove: (e, t, n) => r("remove", {
 				file: e,
-				files: n,
-				originalEvent: r,
-				value: n
+				files: t,
+				originalEvent: n,
+				value: t
 			}),
-			onUploadError: (e, n) => t("upload-error", {
-				error: n,
+			onUploadError: (e, t) => r("upload-error", {
+				error: t,
 				file: e
 			}),
-			onUploadProgress: (e, n, r) => t("upload-progress", {
+			onUploadProgress: (e, t, n) => r("upload-progress", {
 				file: e,
-				loaded: n,
-				total: r
+				loaded: t,
+				total: n
 			}),
-			onUploadSuccess: (e) => t("upload-success", { file: e }),
-			upload: w(() => e.upload.value ?? void 0)
+			onUploadSuccess: (e) => r("upload-success", { file: e }),
+			upload: E(() => n.upload.value ?? void 0)
 		});
-		g(() => j.dispose()), D({
-			disabled: p,
-			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);
+		_(() => 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);
 				return r;
 			},
-			value: j.files
+			value: l.files
 		});
-		let M = w(() => !!e.error.value);
-		d({ attr: {
-			"drag-over": () => n.value ? !0 : void 0,
-			invalid: () => M.value ? !0 : void 0,
-			size: u.size
+		let f = E(() => !!n.error.value);
+		p({ attr: {
+			"drag-over": () => i.value ? !0 : void 0,
+			invalid: () => f.value ? !0 : void 0,
+			size: n.size
 		} });
-		let N = f("file-input"), P = `label-${N}`, F = `helper-${N}`, I = `error-${N}`, L = x(), R = x(), z = w(() => {
-			let t = [];
-			e.accept.value && t.push(e.accept.value.split(",").map((e) => e.trim()).join(", "));
-			let n = A.value;
-			n > 0 && t.push(`max ${l(n)}`);
-			let r = b.value;
-			return r > 0 && t.push(`up to ${r} file${r === 1 ? "" : "s"}`), t.join(" · ");
+		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(" · ");
 		});
-		function B(e) {
-			r.value = e, R.value?.click();
+		function I(e) {
+			a.value = e, P.value?.click();
 		}
-		let V = /* @__PURE__ */ new Map();
-		function H(e) {
-			let t = V.get(e);
-			return t || (t = URL.createObjectURL(e), V.set(e, t)), t;
+		let L = /* @__PURE__ */ new Map();
+		function R(e) {
+			let t = L.get(e);
+			return t || (t = URL.createObjectURL(e), L.set(e, t)), t;
 		}
-		function U(e) {
+		function z(e) {
 			let t = new Set(e);
-			for (let [e, n] of V) t.has(e) || (URL.revokeObjectURL(n), V.delete(e));
+			for (let [e, n] of L) t.has(e) || (URL.revokeObjectURL(n), L.delete(e));
 		}
-		return E(j.files, U), g(() => {
-			for (let e of V.values()) URL.revokeObjectURL(e);
-			V.clear();
-		}), _(R, (t) => i(e.ref, t)), y(() => {
-			let e = R.value, t = L.value, i = !1, o = a({
-				disabled: p,
+		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,
 				onPress: () => {
 					e.click();
 				}
 			});
-			v(e, "change", (e) => {
-				let t = e.target, n = r.value;
-				r.value = null, n && t.files?.[0] ? j.replaceFile(n, t.files[0], e) : t.files?.length && j.addFiles(Array.from(t.files), e), t.value = "";
-			}), v(t, "click", (t) => {
+			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) => {
 				if (t.target !== e) {
-					if (i) {
-						i = !1;
+					if (r) {
+						r = !1;
 						return;
 					}
-					p.value || e.click();
+					o.value || e.click();
 				}
-			}), v(t, "keydown", (e) => {
-				i = o.handleKeydown(e) && e.key === "Enter";
-			}), E(p, (e) => {
-				let r = O({
+			}), y(n, "keydown", (e) => {
+				r = s.handleKeydown(e) && e.key === "Enter";
+			}), O(o, (e) => {
+				let t = k({
 					disabled: e,
-					element: t,
-					onDrop: (e) => j.addFiles(e),
+					element: n,
+					onDrop: (e) => l.addFiles(e),
 					onHoverChange: (e) => {
-						n.value = e;
+						i.value = e;
 					}
 				});
-				return () => r.dispose();
+				return () => t.dispose();
 			}, { immediate: !0 });
-		}), m`
+		}), g`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${P}" part="label" ?hidden=${() => !e.label.value}
-          >${e.label}</label
-        >
+        <label class="label-outside" id="${x}" part="label" ?hidden=${() => !n.label.value}>
+          ${n.label}
+        </label>
         <div
           class="dropzone"
           part="dropzone"
-          ref=${L}
+          ref=${N}
           role="button"
-          :tabindex="${() => p.value ? "-1" : "0"}"
-          :aria-disabled="${() => String(p.value)}"
-          :aria-label="${() => e.label.value ? null : "File upload drop zone"}"
-          :aria-labelledby="${() => e.label.value ? P : null}"
-          aria-describedby="${F}">
+          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}"
+          aria-describedby="${j}">
           <input
             type="file"
-            ref=${R}
+            ref=${P}
             part="input"
-            id="${N}"
-            :accept="${e.accept}"
-            ?multiple="${e.multiple}"
-            ?required="${e.required}"
-            ?disabled="${p}"
-            :name="${e.name}"
+            id="${h}"
+            accept="${n.accept}"
+            ?multiple="${n.multiple}"
+            ?required="${n.required}"
+            ?disabled="${o}"
+            name="${n.name}"
             hidden
             inert
             tabindex="-1" />
           <div class="dropzone-content">
-            <span class="dropzone-icon" aria-hidden="true" :data-status="${() => M.value ? "error" : null}">
-              ${() => M.value ? m`<ore-icon name="alert-circle" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>` : m`<ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>`}
+            <span class="dropzone-icon" aria-hidden="true" data-status="${() => f.value ? "error" : null}">
+              ${() => f.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>
+                    `}
             </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. -->
-            ${C(() => n.value, () => m`<span class="dropzone-title dropzone-title-active">Release to upload</span>`)}
-            ${C(() => !n.value, () => m`<span class="dropzone-title">Drop files here or <u>click to browse</u></span>`)}
-            <span class="dropzone-hint" ?hidden=${() => !z.value}>${z}</span>
+            ${T(() => i.value, () => g`
+                <span class="dropzone-title dropzone-title-active">Release to upload</span>
+              `)}
+            ${T(() => !i.value, () => g`
+                <span class="dropzone-title">
+                  Drop files here or
+                  <u>click to browse</u>
+                </span>
+              `)}
+            <span class="dropzone-hint" ?hidden=${() => !F.value}>${F}</span>
           </div>
         </div>
         <ul
-          class="${() => e.gallery.value ? "file-grid" : "file-list"}"
-          part="${() => e.gallery.value ? "gallery" : null}"
+          class="${() => n.gallery.value ? "file-grid" : "file-list"}"
+          part="${() => n.gallery.value ? "gallery" : null}"
           role="list"
           aria-label="Selected files"
-          ?hidden=${() => j.files.value.length === 0}>
-          ${() => j.files.value.map((t) => e.gallery.value ? m`
-                    <li class="file-card" data-status=${() => j.fileState(t).status}>
+          ?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}>
                       <span class="file-thumb-frame">
-                        ${k(t) ? m`<img
-                                class="file-thumb"
-                                alt=""
-                                ref="${(e) => {
-			e && (e.src = H(t));
-		}}" />` : m`<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>`}
-                        ${C(() => j.fileState(t).status === "success", () => m`<span class="file-status-badge file-status-badge-success" aria-hidden="true">
+                        ${A(e) ? g`
+                                <img
+                                  class="file-thumb"
+                                  alt=""
+                                  ref="${(t) => {
+			t && (t.src = R(e));
+		}}" />
+                              ` : 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`
+                            <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>`)}
-                        ${C(() => j.fileState(t).status === "error", () => m`<span class="file-status-badge file-status-badge-error" aria-hidden="true">
+                            </span>
+                          `)}
+                        ${T(() => l.fileState(e).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>
+                          `)}
                         <span class="file-card-actions">
-                          ${C(() => j.fileState(t).status === "error", () => m`<button
+                          ${T(() => l.fileState(e).status === "error", () => g`
+                              <button
                                 class="file-card-action"
                                 type="button"
-                                aria-label="${`Retry uploading ${t.name}`}"
-                                @click=${() => j.retryUpload(t)}>
+                                aria-label="${`Retry uploading ${e.name}`}"
+                                @click=${() => l.retryUpload(e)}>
                                 <ore-icon name="refresh-cw" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                              </button>`)}
-                          ${C(() => j.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => m`<button
+                              </button>
+                            `)}
+                          ${T(() => l.fileState(e).status === "success" && !!n.multiple.value && !!n.upload.value, () => g`
+                              <button
                                 class="file-card-action"
                                 type="button"
-                                aria-label="${`Replace ${t.name}`}"
-                                @click=${() => B(t)}>
+                                aria-label="${`Replace ${e.name}`}"
+                                @click=${() => I(e)}>
                                 <ore-icon name="upload" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                              </button>`)}
+                              </button>
+                            `)}
                           <button
                             class="file-card-action file-card-remove"
                             type="button"
-                            aria-label="${`Remove ${t.name}`}"
-                            @click=${(e) => j.removeFile(t, e)}>
+                            aria-label="${`Remove ${e.name}`}"
+                            @click=${(t) => l.removeFile(e, t)}>
                             <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>
-                      ${C(() => j.fileState(t).status === "uploading", () => m`
+                      <span class="file-card-name" title="${e.name}">${e.name}</span>
+                      ${T(() => l.fileState(e).status === "uploading", () => g`
                           <ore-progress
                             type="linear"
                             size="sm"
-                            :value=${() => j.uploadPercent(t)}
-                            label=${() => `${j.uploadPercent(t)}%`}></ore-progress>
-                          <span class="file-progress-meta">${() => j.uploadMetaText(t)}</span>
+                            value=${() => l.uploadPercent(e)}
+                            label=${() => `${l.uploadPercent(e)}%`}></ore-progress>
+                          <span class="file-progress-meta">${() => l.uploadMetaText(e)}</span>
+                        `)}
+                      ${T(() => l.fileState(e).status === "error", () => g`
+                          <span class="file-error-text">${() => l.fileState(e).error}</span>
                         `)}
-                      ${C(() => j.fileState(t).status === "error", () => m`<span class="file-error-text">${() => j.fileState(t).error}</span>`)}
                     </li>
-                  ` : m`
-                    <li class="file-item" data-status=${() => j.fileState(t).status}>
+                  ` : g`
+                    <li class="file-item" data-status=${() => l.fileState(e).status}>
                       <span class="file-icon" aria-hidden="true">
                         <ore-icon
-                          name=${() => j.statusIconName(t)}
+                          name=${() => l.statusIconName(e)}
                           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>
-                        ${C(() => j.fileState(t).status === "uploading", () => m`
+                        <span class="file-name" title="${e.name}">${e.name}</span>
+                        ${T(() => l.fileState(e).status === "uploading", () => g`
                             <ore-progress
                               type="linear"
                               size="sm"
-                              :value=${() => j.uploadPercent(t)}
-                              label=${() => `${j.uploadPercent(t)}%`}></ore-progress>
-                            <span class="file-progress-meta">${() => j.uploadMetaText(t)}</span>
+                              value=${() => l.uploadPercent(e)}
+                              label=${() => `${l.uploadPercent(e)}%`}></ore-progress>
+                            <span class="file-progress-meta">${() => l.uploadMetaText(e)}</span>
+                          `)}
+                        ${T(() => l.fileState(e).status === "error", () => g`
+                            <span class="file-error-text">${() => l.fileState(e).error}</span>
+                          `)}
+                        ${T(() => l.fileState(e).status === "idle" || l.fileState(e).status === "success", () => g`
+                            <span class="file-size">${d(e.size)}</span>
                           `)}
-                        ${C(() => j.fileState(t).status === "error", () => m`<span class="file-error-text">${() => j.fileState(t).error}</span>`)}
-                        ${C(() => j.fileState(t).status === "idle" || j.fileState(t).status === "success", () => m`<span class="file-size">${l(t.size)}</span>`)}
                       </span>
                       <span class="file-actions">
-                        ${C(() => j.fileState(t).status === "error", () => m`<button
+                        ${T(() => l.fileState(e).status === "error", () => g`
+                            <button
                               class="file-action"
                               type="button"
-                              aria-label="${`Retry uploading ${t.name}`}"
-                              @click=${() => j.retryUpload(t)}>
+                              aria-label="${`Retry uploading ${e.name}`}"
+                              @click=${() => l.retryUpload(e)}>
                               <ore-icon name="refresh-cw" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-                            </button>`)}
-                        ${C(() => j.fileState(t).status === "success" && !!e.multiple.value && !!e.upload.value, () => m`<button
+                            </button>
+                          `)}
+                        ${T(() => l.fileState(e).status === "success" && !!n.multiple.value && !!n.upload.value, () => g`
+                            <button
                               class="file-action"
                               type="button"
-                              aria-label="${`Replace ${t.name}`}"
-                              @click=${() => B(t)}>
+                              aria-label="${`Replace ${e.name}`}"
+                              @click=${() => I(e)}>
                               <ore-icon name="upload" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
-                            </button>`)}
+                            </button>
+                          `)}
                         <button
                           class="file-remove"
                           type="button"
-                          aria-label="${`Remove ${t.name}`}"
-                          @click=${(e) => j.removeFile(t, e)}>
+                          aria-label="${`Remove ${e.name}`}"
+                          @click=${(t) => l.removeFile(e, t)}>
                           <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
                         </button>
                       </span>
                     </li>
                   `)}
         </ul>
-        <div class="helper-text" id="${F}" part="helper" ?hidden=${() => M.value || !e.helper.value}>
-          ${e.helper}
+        <div class="helper-text" id="${j}" part="helper" ?hidden=${() => f.value || !n.helper.value}>
+          ${n.helper}
         </div>
         <div
           class="helper-text helper-text-error"
-          id="${I}"
+          id="${M}"
           role="alert"
           part="error"
-          ?hidden=${() => !M.value}>
-          ${() => e.error.value ?? ""}
+          ?hidden=${() => !f.value}>
+          ${() => n.error.value ?? ""}
         </div>
       </div>
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		...n,
-		e(r),
-		t(".dropzone"),
-		u
+		s,
+		n,
+		r,
+		i,
+		o,
+		a(l),
+		c(".dropzone"),
+		f
 	]
 });
 //#endregion
-export { A as FILE_INPUT_TAG };
+export { j as FILE_INPUT_TAG };
 
 //# sourceMappingURL=file-input.js.map