@marianmeres/stuic 3.182.0 → 3.183.0

package/README.md

@@ -175,7 +175,7 @@ AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header,
 
 ### Forms & Inputs
 
-FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldOptions, FieldKeyValues, FieldTable, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
+FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldSingleAsset, FieldOptions, FieldKeyValues, FieldTable, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
 
 ### Buttons & Controls
 

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