@marianmeres/stuic 3.181.0 → 3.183.0

package/dist/components/FieldsBuilder/utils.js

@@ -57,10 +57,102 @@ export function isKeyReserved(key, reservedKeys) {
         ? !!reservedKeys(key)
         : reservedKeys.includes(key);
 }
+/**
+ * The palette a column of `entry` may take: its own `columnTypes`, else the
+ * component's `types` without every entry that `supportsColumns` itself
+ * (columns never nest).
+ */
+export function resolveColumnTypes(entry, types) {
+    return entry.columnTypes ?? (types ?? []).filter((td) => !td.supportsColumns);
+}
+/**
+ * Materialize the `default` of every declared extra that the bag does not
+ * hold yet. Returns the same bag when nothing was seeded (so `undefined`
+ * stays `undefined` for a type without defaults).
+ */
+export function seedExtraDefaults(extras, entry) {
+    let next = extras;
+    for (const ex of entry?.extras ?? []) {
+        if (ex.default !== undefined && next?.[ex.key] === undefined) {
+            next = { ...(next ?? {}), [ex.key]: ex.default };
+        }
+    }
+    return next;
+}
+// ---------------------------------------------------------------------------
+// the single-value rules, shared by the field loop and the column loop so the
+// two cannot drift; each returns the FIRST offending message or undefined
+// ---------------------------------------------------------------------------
+function labelError(label, defaultLanguage, t) {
+    return getLocalizedText(label, defaultLanguage).trim()
+        ? undefined
+        : t("err_label_required");
+}
+function keyError(key, rules, t) {
+    // presence is checked trimmed, but pattern/length run on the RAW key —
+    // a whitespace-padded key must fail here, not at the consumer's gate
+    const k = key ?? "";
+    if (!k.trim())
+        return t("err_key_required");
+    if (k.length > rules.maxLength)
+        return t("err_key_maxlength", { max: rules.maxLength });
+    if (!rules.pattern.test(k))
+        return t("err_key_pattern");
+    if (rules.isDuplicate(k.trim()))
+        return t(rules.duplicateMessageKey);
+    if (rules.isReserved?.(k))
+        return t("err_key_reserved");
+    return undefined;
+}
+function optionsError(options, t) {
+    const list = options ?? [];
+    const values = list.map((o) => (o.value ?? "").trim());
+    if (!list.length)
+        return t("err_options_required");
+    if (values.some((v) => !v))
+        return t("err_option_value_required");
+    if (new Set(values).size !== values.length)
+        return t("err_option_value_duplicate");
+    return undefined;
+}
+// `maxlength` is re-checked here on purpose: the input's attribute stops
+// typing, it does not bound a seeded or pasted-then-mutated value
+function extrasError(extras, entry, displayLanguages, t) {
+    for (const ex of entry?.extras ?? []) {
+        if (ex.type !== "string" || !ex.maxlength)
+            continue;
+        const v = extras?.[ex.key];
+        if (typeof v === "string" && v.length > ex.maxlength) {
+            return t("err_extra_maxlength", {
+                label: getLocalizedText(ex.label, displayLanguages),
+                max: ex.maxlength,
+            });
+        }
+    }
+    return undefined;
+}
+function countKeys(items) {
+    const counts = new Map();
+    for (const it of items) {
+        const k = (it.key ?? "").trim();
+        if (k)
+            counts.set(k, (counts.get(k) ?? 0) + 1);
+    }
+    return counts;
+}
+/** First string member of an errors object (skips the `columnErrors` array). */
+function firstMessage(errs) {
+    if (!errs)
+        return "";
+    return Object.values(errs).find((v) => typeof v === "string") ?? "";
+}
 /**
  * Validate a list of field defs: label non-empty, key present/pattern/length/
  * unique/not-reserved, choice types have at least one option with non-empty
  * unique values, string extras within `maxlength`, `maxFields` not exceeded.
+ * A `supportsColumns` type additionally needs at least one column, at most
+ * `maxColumns`, and every column (of a known column type) passes the label /
+ * key (unique within the field) / options / extras rules above.
  *
  * This is client-side convenience only — a consumer persisting the list MUST
  * re-validate server-side; this function is not a security boundary.
@@ -73,76 +165,109 @@ export function validateFieldDefs(defs, opts = {}) {
     const displayLanguages = [opts.displayLanguage, opts.defaultLanguage].filter((l) => !!l);
     const rowErrors = defs.map(() => null);
     const put = (i, field, msg) => {
+        if (!msg)
+            return;
         rowErrors[i] ??= {};
         rowErrors[i][field] ??= msg;
     };
     // keys of ALL defs (incl. unknown types) occupy the key space
-    const keyCounts = new Map();
-    for (const d of defs) {
-        const k = (d.key ?? "").trim();
-        if (k)
-            keyCounts.set(k, (keyCounts.get(k) ?? 0) + 1);
-    }
+    const keyCounts = countKeys(defs);
     defs.forEach((d, i) => {
         // unknown type: keep as-is, do not block (see the doc comment above)
         if (typeMap && !typeMap.has(d.type))
             return;
-        if (!getLocalizedText(d.label, opts.defaultLanguage).trim()) {
-            put(i, "label", t("err_label_required"));
-        }
-        // presence is checked trimmed, but pattern/length run on the RAW key —
-        // a whitespace-padded key must fail here, not at the consumer's gate
-        const k = d.key ?? "";
-        if (!k.trim()) {
-            put(i, "key", t("err_key_required"));
-        }
-        else {
-            if (k.length > keyMaxLength) {
-                put(i, "key", t("err_key_maxlength", { max: keyMaxLength }));
-            }
-            else if (!keyPattern.test(k)) {
-                put(i, "key", t("err_key_pattern"));
-            }
-            if ((keyCounts.get(k.trim()) ?? 0) > 1)
-                put(i, "key", t("err_key_duplicate"));
-            if (isKeyReserved(k, opts.reservedKeys))
-                put(i, "key", t("err_key_reserved"));
-        }
-        if (typeMap?.get(d.type)?.supportsOptions) {
-            const options = d.options ?? [];
-            const values = options.map((o) => (o.value ?? "").trim());
-            if (!options.length) {
-                put(i, "options", t("err_options_required"));
-            }
-            else if (values.some((v) => !v)) {
-                put(i, "options", t("err_option_value_required"));
-            }
-            else if (new Set(values).size !== values.length) {
-                put(i, "options", t("err_option_value_duplicate"));
-            }
-        }
-        // `maxlength` is re-checked here on purpose: the input's attribute stops
-        // typing, it does not bound a seeded or pasted-then-mutated value
-        for (const ex of typeMap?.get(d.type)?.extras ?? []) {
-            if (ex.type !== "string" || !ex.maxlength)
-                continue;
-            const v = d.extras?.[ex.key];
-            if (typeof v === "string" && v.length > ex.maxlength) {
-                put(i, "extras", t("err_extra_maxlength", {
-                    label: getLocalizedText(ex.label, displayLanguages),
-                    max: ex.maxlength,
-                }));
-            }
+        const entry = typeMap?.get(d.type);
+        put(i, "label", labelError(d.label, opts.defaultLanguage, t));
+        put(i, "key", keyError(d.key, {
+            pattern: keyPattern,
+            maxLength: keyMaxLength,
+            isDuplicate: (k) => (keyCounts.get(k) ?? 0) > 1,
+            duplicateMessageKey: "err_key_duplicate",
+            isReserved: (k) => isKeyReserved(k, opts.reservedKeys),
+        }, t));
+        if (entry?.supportsOptions)
+            put(i, "options", optionsError(d.options, t));
+        if (entry?.supportsColumns) {
+            const { summary, columnErrors } = validateColumns(d.columns, entry, {
+                columnTypes: resolveColumnTypes(entry, opts.types),
+                keyPattern,
+                keyMaxLength,
+                defaultLanguage: opts.defaultLanguage,
+                displayLanguages,
+                t,
+            });
+            put(i, "columns", summary);
+            if (columnErrors)
+                rowErrors[i].columnErrors = columnErrors;
         }
+        put(i, "extras", extrasError(d.extras, entry, displayLanguages, t));
     });
-    let message = rowErrors.find(Boolean)
-        ? Object.values(rowErrors.find(Boolean))[0]
-        : "";
+    // the summary is the first STRING member of the first erroneous row —
+    // `columnErrors` (an array) must never be picked here
+    let message = firstMessage(rowErrors.find(Boolean));
     if (!message && opts.maxFields && defs.length > opts.maxFields) {
         message = t("err_max_fields", { max: opts.maxFields });
     }
     return { valid: !message, message, rowErrors };
 }
+/**
+ * The column rules of one `supportsColumns` def. A column whose type is not
+ * in the column palette is NOT validated (it round-trips untouched, like an
+ * unknown field type) but its key still counts toward uniqueness. `reservedKeys`
+ * does not apply: it guards the field-key namespace, and a column key lives
+ * inside one field's rows.
+ */
+function validateColumns(columns, entry, opts) {
+    const { t } = opts;
+    const list = columns ?? [];
+    // a `supportsColumns` entry inside the column palette is a plain column
+    // type here — nothing nests — so only `type` / `supportsOptions` / `extras` matter
+    const colTypeMap = new Map(opts.columnTypes.map((td) => [td.type, td]));
+    const keyCounts = countKeys(list);
+    let summary;
+    if (!list.length)
+        summary = t("err_columns_required");
+    else if (entry.maxColumns && list.length > entry.maxColumns) {
+        summary = t("err_max_columns", { max: entry.maxColumns });
+    }
+    const columnErrors = list.map((c) => {
+        const ct = colTypeMap.get(c.type);
+        if (!ct)
+            return null;
+        const e = {};
+        const label = labelError(c.label, opts.defaultLanguage, t);
+        if (label)
+            e.label = label;
+        const key = keyError(c.key, {
+            pattern: opts.keyPattern,
+            maxLength: opts.keyMaxLength,
+            isDuplicate: (k) => (keyCounts.get(k) ?? 0) > 1,
+            duplicateMessageKey: "err_column_key_duplicate",
+        }, t);
+        if (key)
+            e.key = key;
+        if (ct.supportsOptions) {
+            const options = optionsError(c.options, t);
+            if (options)
+                e.options = options;
+        }
+        const extras = extrasError(c.extras, ct, opts.displayLanguages, t);
+        if (extras)
+            e.extras = extras;
+        return Object.keys(e).length ? e : null;
+    });
+    const firstIdx = columnErrors.findIndex(Boolean);
+    if (!summary && firstIdx >= 0) {
+        summary = t("err_column", {
+            position: firstIdx + 1,
+            message: firstMessage(columnErrors[firstIdx]),
+        });
+    }
+    return {
+        summary,
+        columnErrors: firstIdx >= 0 ? columnErrors : undefined,
+    };
+}
 /**
  * A small general-purpose palette — handy for demos and for consumers with no
  * opinion. `types` is a required prop, so nobody gets this by accident.

package/dist/components/Input/FieldAssets.svelte

@@ -39,6 +39,11 @@
 	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
+	import { isAcceptedType } from "./_internal/asset-helpers.js";
+	import {
+		extractClipboardFiles,
+		registerPasteTarget,
+	} from "./_internal/paste-target.js";
 	import type { InputWrapClassProps } from "./types.js";
 	import Button from "../Button/Button.svelte";
 
@@ -92,27 +97,6 @@
 		blobUrl: string;
 	}
 
-	function is_accepted_type(allowedAccept?: string, type?: string) {
-		// on empty allow
-		if (!allowedAccept || !type) return true;
-
-		// normalize allowed (eg "images/*, video/mpg")
-		const allowed = (allowedAccept ?? "")
-			.split(",")
-			.map((v) => `${v || ""}`.trim().toLowerCase())
-			.map((v) => {
-				if (v.includes("*")) {
-					v = v.slice(0, v.indexOf("*"));
-				}
-				return v;
-			})
-			.filter(Boolean);
-
-		if (!allowed.length) return true;
-
-		return allowed.some((a) => type.toLowerCase().startsWith(a));
-	}
-
 	export function getAssetIcon(ext?: string) {
 		const map: Record<string, CallableFunction> = {
 			archive: iconFileZip,
@@ -131,96 +115,6 @@
 		return map[getFileTypeLabel(ext ?? "unknown")] ?? iconFile;
 	}
 
-	// --- Clipboard paste plumbing (see the `pasteable` prop) -------------------
-	// All mounted pasteable instances coordinate through ONE document-level
-	// `paste` listener (installed while at least one is mounted). Document-level
-	// (rather than a listener on the field wrapper) because browsers dispatch
-	// `paste` at the focused/selection node — with focus on <body> the event
-	// never bubbles through the field, which made the feature look dead unless
-	// the field was clicked first.
-	type PasteTarget = {
-		el: HTMLElement;
-		handle: (e: ClipboardEvent) => void;
-	};
-
-	const paste_targets = new Set<PasteTarget>();
-
-	// True only when NOTHING is focused (browsers park focus on <body>/<html>).
-	// The fallback below must never fire while the user has deliberately focused
-	// some other element — a text input obviously, but also any other widget
-	// (e.g. a different, non-pasteable FieldAssets): pasting "into" the thing
-	// they focused must not teleport files to an unrelated field.
-	function is_unclaimed_focus(el: Element | null): boolean {
-		return !el || el === document.body || el === document.documentElement;
-	}
-
-	// Text-entry elements own their pastes even when they live INSIDE the field
-	// (consumer content via the label/description/below snippets) — an editor's
-	// image paste must insert into the editor, not upload into the field.
-	function is_text_entry(el: Element | null): boolean {
-		if (!el) return false;
-		if ((el as HTMLElement).isContentEditable) return true;
-		return ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
-	}
-
-	// A field hidden by CSS (kept-mounted inactive tab panel etc.) must not
-	// claim the no-focus fallback — the user would see nothing happen.
-	function is_visible(el: HTMLElement): boolean {
-		return el.checkVisibility?.() ?? el.offsetParent !== null;
-	}
-
-	// A modal/dialog (drawer, modal) takes focus on open, so `active` is the
-	// dialog panel — or a control inside it — and NEVER <body>. When the field
-	// lives in such a dialog, treat a non-text focus within that SAME dialog as
-	// unclaimed too, so a bare Ctrl/Cmd-V attaches with no prior click. Scoped to
-	// a shared [aria-modal]/[role=dialog] ancestor on purpose: it must not make
-	// the field greedy on ordinary (non-modal) pages, where a deliberately
-	// focused control elsewhere still owns its paste.
-	function shares_modal(fieldEl: HTMLElement, active: Element | null): boolean {
-		if (!active) return false;
-		const modal = fieldEl.closest?.("[aria-modal='true'],[role='dialog']");
-		return !!modal && modal.contains(active);
-	}
-
-	function on_document_paste(e: ClipboardEvent) {
-		// someone (an editor, another paste handler) already claimed it
-		if (e.defaultPrevented) return;
-		const active = document.activeElement;
-		// 1) the field holding focus always wins — unless focus sits in a
-		// text-entry element nested inside it: stand down entirely
-		for (const t of paste_targets) {
-			if (t.el.contains(active)) {
-				if (is_text_entry(active)) return;
-				return t.handle(e);
-			}
-		}
-		// 2) fall back to the SINGLE mounted + visible pasteable field for a paste
-		// NOT owned by a focused text-entry element, when focus is EITHER unclaimed
-		// (fresh page, focus on <body>) OR parked on a non-text control inside the
-		// SAME modal/dialog as the field (the drawer/modal case: the panel or the
-		// row that opened it holds focus, so <body> is never active). A bare
-		// Ctrl/Cmd-V then works with no prior click. With several fields mounted the
-		// routing would be ambiguous, so focus (a click on the field) must decide.
-		if (paste_targets.size === 1 && !is_text_entry(active)) {
-			const [t] = paste_targets;
-			if (
-				is_visible(t.el) &&
-				(is_unclaimed_focus(active) || shares_modal(t.el, active))
-			) {
-				t.handle(e);
-			}
-		}
-	}
-
-	function register_paste_target(t: PasteTarget): () => void {
-		if (!paste_targets.size) document.addEventListener("paste", on_document_paste);
-		paste_targets.add(t);
-		return () => {
-			paste_targets.delete(t);
-			if (!paste_targets.size) document.removeEventListener("paste", on_document_paste);
-		};
-	}
-
 	type SnippetWithId = Snippet<[{ id: string }]>;
 
 	export interface Props extends InputWrapClassProps, Record<string, any> {
@@ -554,7 +448,7 @@
 		// processAssets (which would otherwise run with an empty batch).
 		if (!incoming.length) return;
 
-		if (accept && incoming.some((f) => !is_accepted_type(accept, f.type))) {
+		if (accept && incoming.some((f) => !isAcceptedType(accept, f.type, f.name))) {
 			const msg = t("invalid_type", { accept });
 			if (notifications) notifications.error(msg);
 			else alert(msg);
@@ -627,29 +521,12 @@
 	}
 
 	// --- Clipboard paste (opt-in via `pasteable`) -------------------------------
-	// Wired through the module-level document `paste` listener (see PasteTarget
-	// above): the instance registers itself while mounted, and receives the paste
+	// Wired through the document-level `paste` listener shared with FieldSingleAsset
+	// (see `_internal/paste-target.ts`): the instance registers itself while mounted, and receives the paste
 	// when it holds focus — or, as the only mounted pasteable field, when the
 	// paste is unclaimed (focus not in a text-entry element). Pasted files go
 	// through `handleIncomingFiles`, inheriting accept/cardinality validation and
 	// the processAssets upload — no synthetic `change` event.
-	function extractClipboardFiles(e: ClipboardEvent): File[] {
-		const dt = e.clipboardData;
-		if (!dt) return [];
-		const out: File[] = [];
-		// Prefer items (lets us keep only file-kind entries, e.g. a pasted
-		// screenshot); fall back to `.files` for browsers that only populate that.
-		for (let i = 0; i < (dt.items?.length ?? 0); i++) {
-			const it = dt.items[i];
-			if (it?.kind === "file") {
-				const f = it.getAsFile();
-				if (f) out.push(f);
-			}
-		}
-		if (!out.length && dt.files?.length) out.push(...dt.files);
-		return out;
-	}
-
 	function handlePaste(e: ClipboardEvent) {
 		if (!pasteable || typeof processAssets !== "function") return;
 		const files = extractClipboardFiles(e);
@@ -676,7 +553,7 @@
 		if (!pasteable || typeof processAssets !== "function" || !wrapEl) return;
 		if (disabled || isLoading) return;
 		const el = wrapEl;
-		const unregister = register_paste_target({ el, handle: handlePaste });
+		const unregister = registerPasteTarget({ el, handle: handlePaste });
 		// clicking still focuses the field: gives the `:focus-within` ring (the
 		// visible "paste lands here" affordance) and lets THIS field win the
 		// routing when several pasteable fields are mounted