@marianmeres/stuic 2.8.1 → 2.10.0

package/dist/components/Circle/Circle.svelte

@@ -24,13 +24,13 @@
 
 	let container: HTMLDivElement = $state()!;
 
+	// Note: completeness and rotate are NOT included here - they're updated via setters
+	// to avoid recreating the SVG on every change
 	let circle = $derived(
 		svgCircle({
 			strokeWidth,
-			completeness,
 			bgStrokeColor,
 			roundedEdges,
-			rotate,
 			strokeWidthRatio,
 			class: circleClass,
 			circleStyle:
@@ -43,6 +43,9 @@
 
 	$effect(() => {
 		container.appendChild(circle.svg);
+		return () => {
+			circle.svg.remove();
+		};
 	});
 
 	$effect(() => {

package/dist/components/Input/FieldAssets.svelte

@@ -174,6 +174,7 @@
 		) => Promise<FieldAssetWithBlobUrl[]>;
 		withOnProgress?: boolean;
 		classControls?: string;
+		isLoading?: boolean;
 	}
 </script>
 
@@ -231,6 +232,7 @@
 		processAssets,
 		withOnProgress,
 		classControls = "",
+		isLoading = false,
 		parseValue = (strigifiedModels: string) => {
 			const val = strigifiedModels ?? "[]";
 			try {
@@ -280,7 +282,8 @@
 			// return value and uses it directly as the error message.
 
 			if (required && !assets.length) return t("field_req_att");
-			if (assets.length > cardinality) return t("cardinality_reached", { max: cardinality });
+			if (assets.length > cardinality)
+				return t("cardinality_reached", { max: cardinality });
 
 			// normally, with other fieldtypes, we would continue with provided validator:
 			// return (validate as any)?.customValidator?.(value, context, el) || "";
@@ -369,72 +372,78 @@
 />
 
 {#snippet default_render()}
-	<div class={["p-2 flex items-center gap-0.5 flex-wrap"]}>
-		{#each assets as asset, idx}
-			{@const { thumb, full, original } = asset_urls(asset)}
-			{@const _is_img = isImage(asset.type ?? thumb)}
-			<div class="relative group">
-				<button
-					class={[objectSize, "bg-black/10 grid place-content-center", classControls]}
-					onclick={(e) => {
-						e.stopPropagation();
-						e.preventDefault();
-						previewIdx = idx;
-						modal.open();
-					}}
-					type="button"
-				>
-					{#if _is_img}
-						<img
-							src={thumb}
-							alt={asset.name}
-							class={[objectSize, objectFitStyle, "hover:saturate-150"]}
-						/>
-					{:else}
-						{@html getAssetIcon((asset.name ?? "").split(".").at(-1))({
-							size: 32,
-							class: "mx-auto",
-						})}
-					{/if}
-					<span
-						class="absolute bottom-1 left-1 right-1 grid bg-white/50 rounded"
-						use:tooltip={() => ({ content: asset.name })}
+	{#if isLoading}
+		<div class="p-2 pl-8 flex items-center justify-center min-h-24">
+			<SpinnerCircle />
+		</div>
+	{:else}
+		<div class={["p-2 flex items-center gap-0.5 flex-wrap"]}>
+			{#each assets as asset, idx}
+				{@const { thumb, full, original } = asset_urls(asset)}
+				{@const _is_img = isImage(asset.type ?? thumb)}
+				<div class="relative group">
+					<button
+						class={[objectSize, "bg-black/10 grid place-content-center", classControls]}
+						onclick={(e) => {
+							e.stopPropagation();
+							e.preventDefault();
+							previewIdx = idx;
+							modal.open();
+						}}
+						type="button"
 					>
-						<span class="truncate px-2 text-xs">{asset.name}</span>
-					</span>
-
-					{#if asset.meta?.isUploading}
+						{#if _is_img}
+							<img
+								src={thumb}
+								alt={asset.name}
+								class={[objectSize, objectFitStyle, "hover:saturate-150"]}
+							/>
+						{:else}
+							{@html getAssetIcon((asset.name ?? "").split(".").at(-1))({
+								size: 32,
+								class: "mx-auto",
+							})}
+						{/if}
 						<span
-							class="absolute inset-0 grid place-content-center pointer-events-none text-white"
+							class="absolute bottom-1 left-1 right-1 grid bg-white/50 rounded"
+							use:tooltip={() => ({ content: asset.name })}
 						>
-							{#if withOnProgress}
-								<Circle
-									class="text-white"
-									animateCompletenessMs={300}
-									bgStrokeColor="rgba(0 0 0 / 0.2)"
-									completeness={progress[asset.id] / 100}
-									rotate={-90}
-								/>
-							{:else}
-								<SpinnerCircle bgStrokeColor="gray" />
-							{/if}
+							<span class="truncate px-2 text-xs">{asset.name}</span>
 						</span>
-					{/if}
-				</button>
-			</div>
-		{/each}
-		<button
-			type="button"
-			onclick={(e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				inputEl.click();
-			}}
-			class={[objectSize, " grid place-content-center group", classControls]}
-		>
-			{@html iconAdd({ size: 32, class: "opacity-75 group-hover:opacity-100" })}
-		</button>
-	</div>
+
+						{#if asset.meta?.isUploading}
+							<span
+								class="absolute inset-0 grid place-content-center pointer-events-none text-white"
+							>
+								{#if withOnProgress}
+									<Circle
+										class="text-white"
+										animateCompletenessMs={300}
+										bgStrokeColor="rgba(0 0 0 / 0.2)"
+										completeness={progress[asset.id] / 100}
+										rotate={-90}
+									/>
+								{:else}
+									<SpinnerCircle bgStrokeColor="gray" />
+								{/if}
+							</span>
+						{/if}
+					</button>
+				</div>
+			{/each}
+			<button
+				type="button"
+				onclick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					inputEl.click();
+				}}
+				class={[objectSize, " grid place-content-center group", classControls]}
+			>
+				{@html iconAdd({ size: 32, class: "opacity-75 group-hover:opacity-100" })}
+			</button>
+		</div>
+	{/if}
 {/snippet}
 
 <div

package/dist/components/Input/FieldAssets.svelte.d.ts

@@ -64,6 +64,7 @@ export interface Props extends Record<string, any> {
     processAssets?: (assets: FieldAsset[], onProgress?: (blobUrl: string, progress: number) => any) => Promise<FieldAssetWithBlobUrl[]>;
     withOnProgress?: boolean;
     classControls?: string;
+    isLoading?: boolean;
 }
 declare const FieldAssets: import("svelte").Component<Props, {}, "value">;
 type FieldAssets = ReturnType<typeof FieldAssets>;

package/dist/components/Input/FieldKeyValues.svelte

@@ -47,6 +47,7 @@
 		addLabel?: string;
 		emptyMessage?: string;
 		onChange?: (value: string) => void;
+		strictJsonValidation?: boolean;
 		t?: TranslateFn;
 	}
 </script>
@@ -79,6 +80,7 @@
 			empty_message: "No entries",
 			remove_entry: "Remove entry",
 			duplicate_keys: "Duplicate keys are not allowed",
+			invalid_json_syntax: "Invalid JSON syntax. Check for missing quotes or brackets.",
 		};
 		let out = m[k] ?? fallback ?? k;
 		return isPlainObject(values) ? replaceMap(out, values as any) : out;
@@ -118,26 +120,37 @@
 		addLabel,
 		emptyMessage,
 		onChange,
+		strictJsonValidation = true,
 		t = t_default,
 	}: Props = $props();
 
 	let hiddenInputEl: HTMLInputElement | undefined = $state();
 	let keyInputRefs: HTMLInputElement[] = $state([]);
+	let entryJsonErrors: boolean[] = $state([]);
 
 	// Internal state - handle undefined value from async form initialization
 	let entries: KeyValueEntry[] = $state(parseValue(value ?? SERIALIZED_DEFAULT));
 
 	// Parse JSON value with auto-detect: try JSON first, fallback to plain string
-	function parseJsonValue(input: string): { value: unknown } {
+	// Returns intendedJson=true if input looks like JSON (starts with { or [)
+	// Returns parseError=true if JSON parse failed
+	function parseJsonValue(input: string): {
+		value: unknown;
+		intendedJson: boolean;
+		parseError: boolean;
+	} {
 		const trimmed = input.trim();
-		if (trimmed === "") return { value: "" };
+		if (trimmed === "") return { value: "", intendedJson: false, parseError: false };
+
+		// Heuristics: input looks like it's trying to be JSON
+		const intendedJson = trimmed.startsWith("{") || trimmed.startsWith("[");
 
 		try {
 			const parsed = JSON.parse(trimmed);
-			return { value: parsed };
+			return { value: parsed, intendedJson, parseError: false };
 		} catch {
-			// If parse fails, treat as plain string
-			return { value: trimmed };
+			// If parse fails, treat as plain string but flag the error
+			return { value: trimmed, intendedJson, parseError: intendedJson };
 		}
 	}
 
@@ -183,6 +196,8 @@
 		const newSerialized = serializeValue(newEntries);
 		if (currentSerialized !== newSerialized) {
 			entries = newEntries;
+			// Reset JSON errors when external value changes (assume valid JSON from external source)
+			entryJsonErrors = new Array(newEntries.length).fill(false);
 		}
 	});
 
@@ -190,6 +205,7 @@
 	function addEntry() {
 		const newEntry: KeyValueEntry = { key: "", value: "", parsedValue: "" };
 		entries = [...entries, newEntry];
+		entryJsonErrors = [...entryJsonErrors, false];
 		syncToValue();
 		// Focus the new key input after render
 		tick().then(() => {
@@ -201,15 +217,17 @@
 	// Remove entry by index
 	function removeEntry(idx: number) {
 		entries = entries.filter((_, i) => i !== idx);
+		entryJsonErrors = entryJsonErrors.filter((_, i) => i !== idx);
 		syncToValue();
 	}
 
 	// Update entry field
 	function updateEntry(idx: number, field: "key" | "value", newValue: string) {
 		if (field === "value") {
-			const { value: parsed } = parseJsonValue(newValue);
+			const { value: parsed, parseError } = parseJsonValue(newValue);
 			entries[idx].value = newValue;
 			entries[idx].parsedValue = parsed;
+			entryJsonErrors[idx] = parseError;
 		} else {
 			entries[idx].key = newValue;
 		}
@@ -243,6 +261,11 @@
 				return t("duplicate_keys");
 			}
 
+			// Check for JSON syntax errors when strictJsonValidation is enabled
+			if (strictJsonValidation && entryJsonErrors.some(Boolean)) {
+				return t("invalid_json_syntax");
+			}
+
 			// Continue with provided validator
 			return (validate as any)?.customValidator?.(val, context, el) || "";
 		},

package/dist/components/Input/FieldKeyValues.svelte.d.ts

@@ -42,6 +42,7 @@ export interface Props extends Record<string, any> {
     addLabel?: string;
     emptyMessage?: string;
     onChange?: (value: string) => void;
+    strictJsonValidation?: boolean;
     t?: TranslateFn;
 }
 declare const FieldKeyValues: import("svelte").Component<Props, {}, "value">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.8.1",
+  "version": "2.10.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",