@marianmeres/stuic 2.7.0 → 2.7.2

package/dist/README.md

@@ -44,6 +44,7 @@ npm install @marianmeres/stuic
 - **FieldFile** - File upload input
 - **FieldAssets** - Multi-file upload with preview
 - **FieldOptions** - Modal-based multi-select picker
+- **FieldKeyValues** - Key-value pairs editor with JSON serialization
 - **FieldSwitch** - Toggle switch within a form
 - **Fieldset** - Group of form fields with legend
 

package/dist/actions/tooltip/tooltip.svelte.d.ts

@@ -20,7 +20,7 @@ export declare function isTooltipSupported(): boolean;
 /**
  * Valid positions for tooltip placement relative to the anchor element.
  */
-export type TooltipPosition = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
+export type TooltipPosition = "top" | "top-left" | "top-right" | "top-span-left" | "top-span-right" | "bottom" | "bottom-left" | "bottom-right" | "bottom-span-left" | "bottom-span-right" | "left" | "right";
 /**
  * A Svelte action that displays a tooltip anchored to an element using CSS Anchor Positioning.
  *

package/dist/actions/tooltip/tooltip.svelte.js

@@ -37,9 +37,13 @@ const POSITION_MAP = {
     top: "top",
     "top-left": "top left",
     "top-right": "top right",
+    "top-span-left": "top span-left",
+    "top-span-right": "top span-right",
     bottom: "bottom",
     "bottom-left": "bottom left",
     "bottom-right": "bottom right",
+    "bottom-span-left": "bottom span-left",
+    "bottom-span-right": "bottom span-right",
     left: "left",
     right: "right",
 };

package/dist/components/Input/FieldAssets.svelte

@@ -173,6 +173,7 @@
 			onProgress?: (blobUrl: string, progress: number) => any
 		) => Promise<FieldAssetWithBlobUrl[]>;
 		withOnProgress?: boolean;
+		classControls?: string;
 	}
 </script>
 
@@ -229,6 +230,7 @@
 		// onChange,
 		processAssets,
 		withOnProgress,
+		classControls = "",
 		parseValue = (strigifiedModels: string) => {
 			const val = strigifiedModels ?? "[]";
 			try {
@@ -378,7 +380,7 @@
 			{@const _is_img = isImage(asset.type ?? thumb)}
 			<div class="relative group">
 				<button
-					class={[objectSize, "bg-black/10 grid place-content-center"]}
+					class={[objectSize, "bg-black/10 grid place-content-center", classControls]}
 					onclick={(e) => {
 						e.stopPropagation();
 						e.preventDefault();
@@ -433,7 +435,7 @@
 				e.stopPropagation();
 				inputEl.click();
 			}}
-			class={[objectSize, " grid place-content-center group"]}
+			class={[objectSize, " grid place-content-center group", classControls]}
 		>
 			{@html iconAdd({ size: 32, class: "opacity-75 group-hover:opacity-100" })}
 		</button>
@@ -441,7 +443,7 @@
 {/snippet}
 
 <div
-	class="w-full"
+	class="w-full stuic-field-assets"
 	use:highlightDragover={() => ({
 		enabled: typeof processAssets === "function",
 		classes: ["outline-dashed outline-2 outline-neutral-300"],
@@ -559,7 +561,7 @@
 	classBackdrop="p-4 md:p-4"
 	classInner="max-w-full h-full"
 	class="max-h-full md:max-h-full"
-	classMain="flex items-center justify-center relative "
+	classMain="flex items-center justify-center relative stuic-field-assets stuic-field-assets-open"
 >
 	{@const previewAsset = assets?.[previewIdx]}
 	{#if previewAsset}
@@ -585,13 +587,21 @@
 
 		{#if assets?.length > 1}
 			<div class={["absolute inset-0 flex items-center justify-between"]}>
-				<button class="p-4 focus:outline-0" onclick={preview_previous} type="button">
+				<button
+					class={twMerge("p-4", classControls)}
+					onclick={preview_previous}
+					type="button"
+				>
 					<span class="bg-white rounded-full p-3 block">
 						{@html iconPrevious()}
 					</span>
 				</button>
 
-				<button class="p-4 focus:outline-0" onclick={preview_next} type="button">
+				<button
+					class={twMerge("p-4", classControls)}
+					onclick={preview_next}
+					type="button"
+				>
 					<span class="bg-white rounded-full p-3 block">
 						{@html iconNext()}
 					</span>
@@ -602,7 +612,7 @@
 		<!--  bg-white rounded-md p-2 -->
 		<div class="absolute top-4 right-4 flex items-center space-x-3">
 			<button
-				class={TOP_BUTTON_CLS}
+				class={twMerge(TOP_BUTTON_CLS, classControls)}
 				onclick={(e) => {
 					e.preventDefault();
 					remove_by_idx(previewIdx);
@@ -615,7 +625,7 @@
 				{@html iconDelete({ class: "size-6" })}
 			</button>
 			<button
-				class={TOP_BUTTON_CLS}
+				class={twMerge(TOP_BUTTON_CLS, classControls)}
 				type="button"
 				onclick={(e) => {
 					e.preventDefault();
@@ -627,7 +637,7 @@
 				{@html iconDownload({ class: "size-6" })}
 			</button>
 			<button
-				class={TOP_BUTTON_CLS}
+				class={twMerge(TOP_BUTTON_CLS, classControls)}
 				onclick={modal.close}
 				aria-label={t("close")}
 				type="button"

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

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

package/dist/components/Input/FieldKeyValues.svelte

@@ -86,15 +86,17 @@
 		return isPlainObject(values) ? replaceMap(out, values as any) : out;
 	}
 
+	const SERIALIZED_DEFAULT = "[]";
+
 	let {
-		value = $bindable("[]"),
+		value = $bindable(),
 		name,
 		id = getId(),
 		label,
 		description,
 		class: classProp,
 		tabindex = 0,
-		renderSize = "md",
+		renderSize = "sm",
 		required = false,
 		disabled = false,
 		validate,
@@ -124,13 +126,13 @@
 	let hiddenInputEl: HTMLInputElement | undefined = $state();
 	let keyInputRefs: HTMLInputElement[] = $state([]);
 
-	// Internal state
-	let entries: KeyValueEntry[] = $state(parseValue(value));
+	// Internal state - handle undefined value from async form initialization
+	let entries: KeyValueEntry[] = $state(parseValue(value ?? SERIALIZED_DEFAULT));
 
 	// Parse external JSON string to internal entries
 	function parseValue(jsonString: string): KeyValueEntry[] {
 		try {
-			const parsed = JSON.parse(jsonString || "[]");
+			const parsed = JSON.parse(jsonString || SERIALIZED_DEFAULT);
 			if (!Array.isArray(parsed)) return [];
 			return parsed.map(([key, val]: [string, string]) => ({
 				id: getId("entry-"),
@@ -158,7 +160,7 @@
 
 	// Sync external value to internal state when it changes externally
 	$effect(() => {
-		const newEntries = parseValue(value);
+		const newEntries = parseValue(value ?? SERIALIZED_DEFAULT);
 		const currentSerialized = serializeValue(entries);
 		const newSerialized = serializeValue(newEntries);
 		if (currentSerialized !== newSerialized) {
@@ -210,7 +212,7 @@
 		customValidator(val: any, context: Record<string, any> | undefined, el: any) {
 			// Validate JSON structure
 			try {
-				const parsed = JSON.parse(val || "[]");
+				const parsed = JSON.parse(val || SERIALIZED_DEFAULT);
 				if (!Array.isArray(parsed)) return "typeMismatch";
 				for (const entry of parsed) {
 					if (!Array.isArray(entry) || entry.length !== 2) return "typeMismatch";
@@ -386,7 +388,7 @@
 <input
 	type="hidden"
 	{name}
-	{value}
+	value={value ?? SERIALIZED_DEFAULT}
 	bind:this={hiddenInputEl}
 	use:validateAction={() => wrappedValidate}
 />

package/dist/components/Input/README.md

@@ -14,6 +14,7 @@ A comprehensive form input system with multiple field components, validation sup
 | `FieldSwitch` | Toggle switch field |
 | `FieldFile` | File upload input |
 | `FieldAssets` | Asset/image upload with preview |
+| `FieldKeyValues` | Key-value pairs editor with JSON serialization |
 | `FieldLikeButton` | Like/favorite toggle button |
 | `Fieldset` | Fieldset with legend |
 
@@ -172,6 +173,47 @@ A comprehensive form input system with multiple field components, validation sup
 />
 ```
 
+### Key-Value Pairs
+
+```svelte
+<script lang="ts">
+  import { FieldKeyValues } from 'stuic';
+
+  // Value is a JSON string of [[key, value], [key, value], ...]
+  let headers = $state('[]');
+</script>
+
+<FieldKeyValues
+  label="HTTP Headers"
+  description="Add custom headers as key-value pairs"
+  bind:value={headers}
+  name="headers"
+  required
+/>
+```
+
+#### FieldKeyValues Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | `"[]"` | JSON string of `[[key, value], ...]` (bindable) |
+| `name` | `string` | - | Form field name |
+| `keyPlaceholder` | `string` | `"Key"` | Placeholder for key input |
+| `valuePlaceholder` | `string` | `"Value"` | Placeholder for value textarea |
+| `addLabel` | `string` | `"Add"` | Label for add button |
+| `emptyMessage` | `string` | `"No entries"` | Message when no entries |
+| `classEntry` | `string` | - | CSS for each entry row |
+| `classKeyInput` | `string` | - | CSS for key inputs |
+| `classValueInput` | `string` | - | CSS for value textareas |
+| `onChange` | `(value: string) => void` | - | Callback on value change |
+
+Features:
+- Add/remove key-value pairs with + and trash buttons
+- Reorder entries with up/down arrow buttons
+- Duplicate keys are allowed
+- Value is serialized as ordered map: `[[key, value], [key2, value2]]`
+- Validation at top level only (not individual pairs)
+
 ## Validation
 
 Validation is handled by the `validate` action. Pass `validate={true}` for default HTML5 validation, or pass options:

package/package.json

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