includio-cms 0.24.1 → 0.26.0

package/dist/admin/components/fields/simple-array-field.svelte

@@ -5,29 +5,82 @@
 	import { onMount } from 'svelte';
 	import CirclePlus from '@tabler/icons-svelte/icons/circle-plus';
 	import X from '@tabler/icons-svelte/icons/x';
+	import GripVertical from '@tabler/icons-svelte/icons/grip-vertical';
+	import ChevronUp from '@tabler/icons-svelte/icons/chevron-up';
+	import ChevronDown from '@tabler/icons-svelte/icons/chevron-down';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { droppable, draggable } from '@thisux/sveltednd';
+	import { arrayMove } from '../../utils/arrayMove.js';
+	import { flip } from 'svelte/animate';
+	import UrlField from './url-field.svelte';
+	import type { UrlField as UrlFieldType } from '../../../types/fields.js';
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
 
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	const arrayLang: Record<InterfaceLanguage, {
-		typeAndEnter: string; add: string; typeNumber: string; addLink: string;
-		urlPlaceholder: string; linkText: string; newTab: string;
-		removeItem: string; removeLink: string;
-	}> = {
-		pl: { typeAndEnter: 'Wpisz i naciśnij Enter...', add: 'Dodaj', typeNumber: 'Wpisz liczbę...', addLink: 'Dodaj link', urlPlaceholder: 'URL...', linkText: 'Tekst linku...', newTab: 'Nowa karta', removeItem: 'Usuń element', removeLink: 'Usuń link' },
-		en: { typeAndEnter: 'Type and press Enter...', add: 'Add', typeNumber: 'Enter a number...', addLink: 'Add link', urlPlaceholder: 'URL...', linkText: 'Link text...', newTab: 'New tab', removeItem: 'Remove item', removeLink: 'Remove link' }
+	const arrayLang: Record<
+		InterfaceLanguage,
+		{
+			typeAndEnter: string;
+			add: string;
+			typeNumber: string;
+			addLink: string;
+			urlPlaceholder: string;
+			linkText: string;
+			newTab: string;
+			removeItem: string;
+			removeLink: string;
+			reorder: string;
+			moveUp: string;
+			moveDown: string;
+		}
+	> = {
+		pl: {
+			typeAndEnter: 'Wpisz i naciśnij Enter...',
+			add: 'Dodaj',
+			typeNumber: 'Wpisz liczbę...',
+			addLink: 'Dodaj link',
+			urlPlaceholder: 'URL...',
+			linkText: 'Tekst linku...',
+			newTab: 'Nowa karta',
+			removeItem: 'Usuń element',
+			removeLink: 'Usuń link',
+			reorder: 'Zmień kolejność',
+			moveUp: 'Przenieś wyżej',
+			moveDown: 'Przenieś niżej'
+		},
+		en: {
+			typeAndEnter: 'Type and press Enter...',
+			add: 'Add',
+			typeNumber: 'Enter a number...',
+			addLink: 'Add link',
+			urlPlaceholder: 'URL...',
+			linkText: 'Link text...',
+			newTab: 'New tab',
+			removeItem: 'Remove item',
+			removeLink: 'Remove link',
+			reorder: 'Reorder',
+			moveUp: 'Move up',
+			moveDown: 'Move down'
+		}
 	};
 	const at = $derived(arrayLang[interfaceLanguage.current]);
 
+	import * as Form from '../../../components/ui/form/index.js';
+	import type { FormPathLeaves, SuperForm } from 'sveltekit-superforms';
+
 	type Props = {
 		field: ArrayField;
 		value: unknown[] | undefined;
+		// Optional — passed by field-renderer when present, lets array items
+		// render their own Form.FieldErrors at the right nested path.
+		form?: SuperForm<Record<string, unknown>>;
+		path?: string;
 	};
 
-	let { field, value = $bindable(), ...props }: Props = $props();
+	let { field, value = $bindable(), form, path, ...props }: Props = $props();
 
 	onMount(() => {
 		if (!value || !Array.isArray(value)) {
@@ -35,8 +88,38 @@
 		}
 	});
 
+	// Stable per-item keys for the {#each} blocks. Kept in lockstep with `value`
+	// by the mutation handlers below so animate:flip can track items through
+	// reorder (index/object-ref keying was unreliable through the form proxy).
+	let itemKeys = $state<string[]>([]);
+
+	// Safety net: only fires when an external `value` change (mount, version or
+	// language switch) desyncs the lengths — no flip is expected there anyway.
+	$effect.pre(() => {
+		const len = value?.length ?? 0;
+		if (itemKeys.length !== len) {
+			itemKeys = Array.from({ length: len }, () => crypto.randomUUID());
+		}
+	});
+
 	const atMax = $derived(field.maxItems !== undefined && (value?.length ?? 0) >= field.maxItems);
 
+	// --- Reorder (shared across text/number/url) ---
+	function moveItem(fromIndex: number, toIndex: number) {
+		const arr = value ?? [];
+		if (toIndex < 0 || toIndex >= arr.length) return;
+		value = [...arrayMove(arr, fromIndex, toIndex)];
+		itemKeys = arrayMove(itemKeys, fromIndex, toIndex);
+	}
+
+	function onDropAt(targetIndex: number, sourceIndexStr: string | undefined) {
+		const fromIndex = parseInt(sourceIndexStr ?? '');
+		if (!isNaN(fromIndex) && fromIndex !== targetIndex) {
+			value = [...arrayMove(value ?? [], fromIndex, targetIndex)];
+			itemKeys = arrayMove(itemKeys, fromIndex, targetIndex);
+		}
+	}
+
 	// --- Text ---
 	let textInput = $state('');
 
@@ -49,6 +132,7 @@
 		} else {
 			value = [...(value ?? []), textInput.trim()];
 		}
+		itemKeys = [...itemKeys, crypto.randomUUID()];
 		textInput = '';
 	}
 
@@ -66,6 +150,7 @@
 		const num = Number(numberInput);
 		if (numberInput === '' || isNaN(num) || atMax) return;
 		value = [...(value ?? []), num];
+		itemKeys = [...itemKeys, crypto.randomUUID()];
 		numberInput = '';
 	}
 
@@ -81,12 +166,14 @@
 		if (atMax) return;
 		const item: UrlFieldData = { url: '', text: '', newTab: false };
 		value = [...(value ?? []), item];
+		itemKeys = [...itemKeys, crypto.randomUUID()];
 	}
 
 	// --- Common ---
 	function removeItem(index: number) {
 		if (!value) return;
 		value = value.filter((_, i) => i !== index);
+		itemKeys = itemKeys.filter((_, i) => i !== index);
 	}
 
 	function getTextDisplay(item: unknown): string {
@@ -97,109 +184,152 @@
 		}
 		return String(item);
 	}
-</script>
 
-{#if field.of === 'text'}
-	<!-- Tag chips for text items -->
-	<div class="space-y-3">
-		{#if value && value.length > 0}
-			<div class="flex flex-wrap gap-2">
-				{#each value as item, index}
-					<span
-						class="bg-[#EEEAF8] text-[#1A1A2E] inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium"
-					>
-						{#if field.localized}
-							<!-- Localized: show editable input per current lang -->
-							<input
-								type="text"
-								class="bg-transparent border-none outline-none w-auto min-w-[4ch] text-sm"
-								style="width: {getTextDisplay(item).length + 1}ch"
-								value={getTextDisplay(item)}
-								oninput={(e) => {
-									const val = e.currentTarget.value;
-									if (typeof item === 'object' && item !== null) {
-										const rec = { ...(item as Record<string, string>) };
-										rec[contentLanguage.current] = val;
-										const arr = [...(value ?? [])];
-										arr[index] = rec;
-										value = arr;
-									}
-								}}
-							/>
-						{:else}
-							{item}
-						{/if}
-						<button
-							type="button"
-							class="text-[#555566] hover:text-[#C44B4B] transition-colors"
-							onclick={() => removeItem(index)}
-							aria-label={at.removeItem}
-						>
-							<X class="h-3.5 w-3.5" />
-						</button>
-					</span>
-				{/each}
-			</div>
-		{/if}
-
-		<div class="flex items-center gap-2">
-			<Input
-				type="text"
-				placeholder={at.typeAndEnter}
-				bind:value={textInput}
-				onkeydown={handleTextKeydown}
-				disabled={atMax}
-				class="max-w-xs"
-			/>
-			<Button size="sm" type="button" variant="outline" disabled={atMax || !textInput.trim()} onclick={addTextItem}>
-				<CirclePlus class="h-4 w-4" />
-				{at.add}
-			</Button>
-		</div>
+	const itemLabel = $derived(field.of === 'url' ? at.removeLink : at.removeItem);
 
-		{#if field.maxItems !== undefined}
-			<p class="text-xs {atMax ? 'text-destructive' : 'text-muted-foreground'}">
-				{value?.length ?? 0} / {field.maxItems}
-			</p>
-		{/if}
-	</div>
+	// Synthetic UrlField config for items inside array.of=url. Match what a
+	// standalone url field exposes by default — text + newTab. Don't force
+	// `rel: true`: a standalone url only shows the Indexing panel when the
+	// collection author opts in, so array items mirror that behaviour for
+	// visual parity.
+	const urlItemField: UrlFieldType = $derived({
+		type: 'url',
+		slug: `${field.slug}_item`,
+		text: true,
+		newTab: true
+	});
+</script>
 
-{:else if field.of === 'number'}
-	<!-- Tag chips for number items -->
+{#if field.of === 'text' || field.of === 'number'}
+	<!--
+		Chip layout: keeps text/number compact. Each chip carries the same
+		reorder affordances as url/relation (grip-drag + arrow buttons + remove)
+		so the editor's mental model is consistent across array kinds.
+	-->
 	<div class="space-y-3">
 		{#if value && value.length > 0}
 			<div class="flex flex-wrap gap-2">
-				{#each value as item, index}
-					<span
-						class="bg-[#EEEAF8] text-[#1A1A2E] inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium tabular-nums"
+				{#each value as item, index (itemKeys[index])}
+					<div
+						use:droppable={{
+							container: index.toString(),
+							callbacks: {
+								onDrop: (state) => {
+									const dropIndex = parseInt(state.targetContainer ?? '');
+									if (!isNaN(dropIndex)) onDropAt(dropIndex, state.sourceContainer);
+								}
+							}
+						}}
+						animate:flip={{ duration: 200 }}
 					>
-						{item}
-						<button
-							type="button"
-							class="text-[#555566] hover:text-[#C44B4B] transition-colors"
-							onclick={() => removeItem(index)}
-							aria-label={at.removeItem}
+						<span
+							class="inline-flex items-center gap-1.5 rounded-lg bg-[#EEEAF8] px-2.5 py-1.5 text-sm font-medium text-[#1A1A2E]"
 						>
-							<X class="h-3.5 w-3.5" />
-						</button>
-					</span>
+							<button
+								type="button"
+								use:draggable={{ container: index.toString(), dragData: { index } }}
+								class="cursor-grab text-[#8888A0] hover:text-[#555566]"
+								aria-label="{at.reorder} {getTextDisplay(item) || index + 1}"
+								onpointerdown={(e) => e.stopPropagation()}
+								ondragstart={(e) => e.stopPropagation()}
+								tabindex="-1"
+							>
+								<GripVertical class="h-3 w-3" />
+							</button>
+							{#if field.of === 'text' && field.localized}
+								<input
+									type="text"
+									class="min-w-[4ch] border-none bg-transparent text-sm outline-none"
+									style="width: {getTextDisplay(item).length + 1}ch"
+									value={getTextDisplay(item)}
+									oninput={(e) => {
+										const val = e.currentTarget.value;
+										if (typeof item === 'object' && item !== null) {
+											const rec = { ...(item as Record<string, string>) };
+											rec[contentLanguage.current] = val;
+											const arr = [...(value ?? [])];
+											arr[index] = rec;
+											value = arr;
+										}
+									}}
+								/>
+							{:else}
+								<span class={field.of === 'number' ? 'tabular-nums' : ''}>{item}</span>
+							{/if}
+							{#if index > 0}
+								<button
+									type="button"
+									class="text-[#8888A0] transition-colors hover:text-[#555566]"
+									onclick={() => moveItem(index, index - 1)}
+									aria-label="{at.moveUp} {index + 1}"
+								>
+									<ChevronUp class="h-3 w-3" />
+								</button>
+							{/if}
+							{#if index < value.length - 1}
+								<button
+									type="button"
+									class="text-[#8888A0] transition-colors hover:text-[#555566]"
+									onclick={() => moveItem(index, index + 1)}
+									aria-label="{at.moveDown} {index + 1}"
+								>
+									<ChevronDown class="h-3 w-3" />
+								</button>
+							{/if}
+							<button
+								type="button"
+								class="text-[#555566] transition-colors hover:text-[#C44B4B]"
+								onclick={() => removeItem(index)}
+								aria-label="{itemLabel} {index + 1}"
+							>
+								<X class="h-3.5 w-3.5" />
+							</button>
+						</span>
+					</div>
 				{/each}
 			</div>
 		{/if}
 
 		<div class="flex items-center gap-2">
-			<Input
-				type="number"
-				placeholder={at.typeNumber}
-				bind:value={numberInput}
-				onkeydown={handleNumberKeydown}
-				disabled={atMax}
-				class="max-w-[160px]"
-			/>
-			<Button size="sm" type="button" variant="outline" disabled={atMax || numberInput === ''} onclick={addNumberItem}>
-				<CirclePlus class="h-4 w-4" />
-				{at.add}
-			</Button>
+			{#if field.of === 'text'}
+				<Input
+					type="text"
+					placeholder={at.typeAndEnter}
+					bind:value={textInput}
+					onkeydown={handleTextKeydown}
+					disabled={atMax}
+					class="max-w-xs"
+				/>
+				<Button
+					size="sm"
+					type="button"
+					variant="outline"
+					disabled={atMax || !textInput.trim()}
+					onclick={addTextItem}
+				>
+					<CirclePlus class="h-4 w-4" />
+					{at.add}
+				</Button>
+			{:else}
+				<Input
+					type="number"
+					placeholder={at.typeNumber}
+					bind:value={numberInput}
+					onkeydown={handleNumberKeydown}
+					disabled={atMax}
+					class="max-w-[160px]"
+				/>
+				<Button
+					size="sm"
+					type="button"
+					variant="outline"
+					disabled={atMax || numberInput === ''}
+					onclick={addNumberItem}
+				>
+					<CirclePlus class="h-4 w-4" />
+					{at.add}
+				</Button>
+			{/if}
 		</div>
 
 		{#if field.maxItems !== undefined}
@@ -208,66 +338,106 @@
 			</p>
 		{/if}
 	</div>
-
 {:else if field.of === 'url'}
-	<!-- Compact list for URL items -->
+	<!--
+		URL items keep the card layout because each item carries three values
+		(url + text + newTab) — there is no compact chip form that doesn't
+		hide editable data. Reorder affordances (grip + up/down) match the
+		chip variant for consistent behaviour across kinds.
+	-->
 	<div class="space-y-3">
 		{#if value && value.length > 0}
 			<div class="space-y-2">
-				{#each value as item, index}
+				<!--
+					Keys come from the parallel `itemKeys` array kept in lockstep
+					with `value` by the mutation handlers, so animate:flip can
+					track items reliably through reorder.
+				-->
+				{#each value as item, index (itemKeys[index])}
 					{@const urlItem = item as UrlFieldData}
-					<div class="flex items-start gap-2 rounded-xl border border-[#E2DFF0] bg-[#F4F2FA] p-3">
-						<div class="flex-1 space-y-2">
-							<Input
-								type="url"
-								placeholder={at.urlPlaceholder}
-								value={typeof urlItem.url === 'string' ? urlItem.url : ''}
-								oninput={(e) => {
-									const val = e.currentTarget.value;
-									const updated = { ...urlItem, url: val };
-									const arr = [...(value ?? [])];
-									arr[index] = updated;
-									value = arr;
-								}}
-							/>
-							<div class="flex items-center gap-2">
-								<Input
-									type="text"
-									placeholder={at.linkText}
-									class="flex-1"
-									value={typeof urlItem.text === 'string' ? urlItem.text : ''}
-									oninput={(e) => {
-										const val = e.currentTarget.value;
-										const updated = { ...urlItem, text: val };
-										const arr = [...(value ?? [])];
-										arr[index] = updated;
-										value = arr;
-									}}
-								/>
-								<label class="flex items-center gap-1.5 text-xs text-[#555566] whitespace-nowrap">
-									<input
-										type="checkbox"
-										checked={urlItem.newTab ?? false}
-										onchange={(e) => {
-											const updated = { ...urlItem, newTab: e.currentTarget.checked };
-											const arr = [...(value ?? [])];
-											arr[index] = updated;
-											value = arr;
-										}}
-										class="accent-[#5B4A9E]"
-									/>
-									{at.newTab}
-								</label>
+					<div
+						use:droppable={{
+							container: index.toString(),
+							callbacks: {
+								onDrop: (state) => {
+									const dropIndex = parseInt(state.targetContainer ?? '');
+									if (!isNaN(dropIndex)) onDropAt(dropIndex, state.sourceContainer);
+								}
+							}
+						}}
+						animate:flip={{ duration: 200 }}
+					>
+						<div
+							class="flex items-start gap-2 rounded-xl border border-[#E2DFF0] bg-[#F4F2FA] p-3"
+						>
+							<div
+								class="mt-2 flex flex-col items-center gap-0.5 text-[#8888A0]"
+							>
+								<button
+									type="button"
+									use:draggable={{ container: index.toString(), dragData: { index } }}
+									class="cursor-grab hover:text-[#555566]"
+									aria-label="{at.reorder} {index + 1}"
+									onpointerdown={(e) => e.stopPropagation()}
+									ondragstart={(e) => e.stopPropagation()}
+									tabindex="-1"
+								>
+									<GripVertical class="h-3.5 w-3.5" />
+								</button>
+								{#if index > 0}
+									<button
+										type="button"
+										class="hover:text-[#555566]"
+										onclick={() => moveItem(index, index - 1)}
+										aria-label="{at.moveUp} {index + 1}"
+									>
+										<ChevronUp class="h-3.5 w-3.5" />
+									</button>
+								{/if}
+								{#if index < value.length - 1}
+									<button
+										type="button"
+										class="hover:text-[#555566]"
+										onclick={() => moveItem(index, index + 1)}
+										aria-label="{at.moveDown} {index + 1}"
+									>
+										<ChevronDown class="h-3.5 w-3.5" />
+									</button>
+								{/if}
+							</div>
+							<!--
+								Render the SAME UrlField component used for a standalone
+								url field (badge external/internal, autocomplete picker,
+								rel collapsible, schema validation) instead of a parallel
+								mini-implementation. Two-way binding via bind:value on the
+								array index — array proxy reactivity propagates writes.
+							-->
+							<div class="flex-1">
+								<UrlField field={urlItemField} bind:value={(value as UrlFieldData[])[index]} />
+								<!--
+									Schema flags the bad URL at `<arrayPath>.<index>.url`.
+									Render FieldErrors at exactly that path so the message
+									appears inline under the item instead of only in the
+									banner. Requires `form` + `path` from field-renderer.
+								-->
+								{#if form && path}
+									<Form.Field
+										{form}
+										name={`${path}.${index}.url` as FormPathLeaves<Record<string, unknown>>}
+									>
+										<Form.FieldErrors />
+									</Form.Field>
+								{/if}
 							</div>
+							<button
+								type="button"
+								class="mt-1.5 text-[#555566] transition-colors hover:text-[#C44B4B]"
+								onclick={() => removeItem(index)}
+								aria-label="{at.removeLink} {index + 1}"
+							>
+								<X class="h-4 w-4" />
+							</button>
 						</div>
-						<button
-							type="button"
-							class="mt-1.5 text-[#555566] hover:text-[#C44B4B] transition-colors"
-							onclick={() => removeItem(index)}
-							aria-label={at.removeLink}
-						>
-							<X class="h-4 w-4" />
-						</button>
 					</div>
 				{/each}
 			</div>

package/dist/admin/components/fields/simple-array-field.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { ArrayField } from '../../../types/fields.js';
+import type { SuperForm } from 'sveltekit-superforms';
 type Props = {
     field: ArrayField;
     value: unknown[] | undefined;
+    form?: SuperForm<Record<string, unknown>>;
+    path?: string;
 };
 declare const SimpleArrayField: import("svelte").Component<Props, {}, "value">;
 type SimpleArrayField = ReturnType<typeof SimpleArrayField>;