@riducms/admin 0.2.3 → 0.4.0

package/src/fields/nested/sortable-row.svelte

@@ -6,11 +6,13 @@
 		id,
 		index,
 		disabled = false,
+		invalid = false,
 		children,
 	}: {
 		id: string;
 		index: number;
 		disabled?: boolean;
+		invalid?: boolean;
 		children: Snippet<[ReturnType<typeof useSortable>]>;
 	} = $props();
 	const sortable = useSortable({
@@ -21,12 +23,12 @@
 	});
 </script>
 
-<section
-	class={[
-		"grid overflow-hidden rounded-[4px] border border-control-border bg-background transition-colors hover:border-control-border-hover",
-		sortable.isDragging.current && "opacity-50",
-	]}
+<div
+	class="ridu-repeated-row-sortable"
+	data-dragging={sortable.isDragging.current}
 	{@attach sortable.ref}
 >
-	{@render children(sortable)}
-</section>
+	<section class="ridu-repeated-row" data-invalid={invalid}>
+		{@render children(sortable)}
+	</section>
+</div>

package/src/fields/plugin-field.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, type Component } from "svelte";
+	import type { Component } from "svelte";
 	import { SvelteMap } from "svelte/reactivity";
 	import type {
 		EmbeddedSchemaDraft,
@@ -46,12 +46,9 @@
 	const Editor = extension.registration.component as Component<
 		Omit<PluginFieldProps<unknown, unknown, FieldType>, "config"> & { config?: unknown }
 	>;
-	onDestroy(field.destroy);
+	$effect(() => field.destroy);
 	const drafts = new SvelteMap<EmbeddedSchemaDraft, HostedSchemaDraft>();
 	const draftAliases = new WeakMap<EmbeddedSchemaDraft, EmbeddedSchemaDraft>();
-	onDestroy(() => {
-		for (const draft of drafts.keys()) draft.discard();
-	});
 	const authoring: FieldAuthoringHost = {
 		schemaForm,
 		schemaHeader,
@@ -90,13 +87,14 @@
 		get locale() {
 			return form.contentLocale;
 		},
+		canCreateDocument: (collection) => runtime.collectionOperations[collection]?.create === true,
 		referenceBrowser: ReferenceBrowser,
 		findDocument: (collection, id, signal) =>
 			runtime.client.find(collection, id, { signal, locale: form.contentLocale }),
 		async requestPlugin<Result>(path: string, body: unknown, signal?: AbortSignal) {
 			const owner = extension.owner;
 			if (owner === undefined) {
-				throw new Error("This field renderer does not have an owning plugin");
+				throw new Error("This field editor does not have an owning plugin");
 			}
 			return runtime.client.requestPlugin<Result>(owner, path, body, { signal });
 		},

package/src/fields/point/point-field.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
+	import "@admin/fields/field-layout.scss";
 	import type { SchemaField } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
+	import { fieldControlARIA, Input } from "@riducms/ui";
 
-	import { Input } from "@admin/components/ui/input";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-	import FieldShell from "@admin/fields/field-shell.svelte";
+	import FieldMessages from "@admin/fields/field-messages.svelte";
 
 	let { field, form }: { field: SchemaField; form: FormController } = $props();
 	const runtime = getAdminRuntime();
-	const value = $derived(
-		Array.isArray(form.get(field.path)) ? (form.get(field.path) as number[]) : []
-	);
+	const value = $derived.by(() => {
+		const current = form.get(field.path);
+		return Array.isArray(current) ? (current as number[]) : [];
+	});
 	const issues = $derived(form.issuesFor(field.path));
 	const editingBlocked = $derived(field.admin.readOnly === true || form.editingBlocked);
 	const controlARIA = $derived(
@@ -28,35 +29,47 @@
 	}
 </script>
 
-<FieldShell {field} {issues}>
-	<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-		<label class="grid gap-1.5 text-[12px] text-foreground-muted">
-			{runtime.i18n.t("fields:longitude")}
-			<Input
-				id={field.id}
-				type="number"
-				min="-180"
-				max="180"
-				step="any"
-				value={value[0] ?? ""}
-				readonly={editingBlocked}
-				{...controlARIA}
-				oninput={(event) => setCoordinate(0, event.currentTarget.valueAsNumber)}
-			/>
-		</label>
-		<label class="grid gap-1.5 text-[12px] text-foreground-muted">
-			{runtime.i18n.t("fields:latitude")}
-			<Input
-				id={`${field.id}-latitude`}
-				type="number"
-				min="-90"
-				max="90"
-				step="any"
-				value={value[1] ?? ""}
-				readonly={editingBlocked}
-				{...controlARIA}
-				oninput={(event) => setCoordinate(1, event.currentTarget.valueAsNumber)}
-			/>
-		</label>
-	</div>
-</FieldShell>
+<div data-field-path={field.path}>
+	<FieldMessages controlID={field.id} {issues} description={field.admin.description}>
+		<div class="ridu-point-field">
+			<label class="ridu-point-field__coordinate">
+				<span>
+					{field.admin.label} - {runtime.i18n.t("fields:longitude")}
+					{#if field.required}
+						<span class="ridu-field-required" aria-hidden="true">*</span>
+					{/if}
+				</span>
+				<Input
+					id={field.id}
+					type="number"
+					min="-180"
+					max="180"
+					step="any"
+					value={value[0] ?? ""}
+					readonly={editingBlocked}
+					{...controlARIA}
+					oninput={(event) => setCoordinate(0, event.currentTarget.valueAsNumber)}
+				/>
+			</label>
+			<label class="ridu-point-field__coordinate">
+				<span>
+					{field.admin.label} - {runtime.i18n.t("fields:latitude")}
+					{#if field.required}
+						<span class="ridu-field-required" aria-hidden="true">*</span>
+					{/if}
+				</span>
+				<Input
+					id={`${field.id}-latitude`}
+					type="number"
+					min="-90"
+					max="90"
+					step="any"
+					value={value[1] ?? ""}
+					readonly={editingBlocked}
+					{...controlARIA}
+					oninput={(event) => setCoordinate(1, event.currentTarget.valueAsNumber)}
+				/>
+			</label>
+		</div>
+	</FieldMessages>
+</div>

package/src/fields/primitive-list/primitive-list-field.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { tick } from "svelte";
 	import type { SchemaField } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
+	import { fieldControlARIA, Button, Input } from "@riducms/ui";
+	import PlusIcon from "~icons/lucide/plus";
+	import "@admin/fields/primitive-list/primitive-list.scss";
 	import ArrowUpIcon from "~icons/lucide/arrow-up";
 	import ArrowDownIcon from "~icons/lucide/arrow-down";
 	import XIcon from "~icons/lucide/x";
-	import { Button } from "@admin/components/ui/button";
-	import { Input } from "@admin/components/ui/input";
+
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import { getAdminI18n } from "@riducms/plugin";
 	import FieldShell from "@admin/fields/field-shell.svelte";
@@ -38,7 +39,7 @@
 	let container: HTMLDivElement;
 	let announcement = $state("");
 	// Only DOM identity lives here. The form owns all values, including unfinished numeric input.
-	let keys = $state<string[]>([]);
+	let keys = $state.raw<string[]>([]);
 	const itemKey = (index: number) => keys[index] ?? `initial-${index}`;
 
 	async function focusItem(index: number) {
@@ -59,6 +60,20 @@
 		announcement = i18n.t("fields:listAdded", { number: index + 1 });
 		await focusItem(index);
 	}
+	async function typeNewItem(event: Event) {
+		const input = event.currentTarget as HTMLInputElement;
+		if (!canAdd || input.value === "") return;
+		const index = values.length;
+		update(
+			[...values, field.type === "number-list" ? primitiveNumberInput(input.value) : input.value],
+			[...values.map((_, at) => itemKey(at)), crypto.randomUUID()]
+		);
+		input.value = "";
+		await focusItem(index);
+		const item = container.querySelector<HTMLInputElement>(`[data-list-item="${index}"]`);
+		item?.setSelectionRange(item.value.length, item.value.length);
+	}
+
 	function edit(index: number, value: string) {
 		if (editingBlocked) return;
 		const next = [...values];
@@ -87,6 +102,11 @@
 		await focusItem(destination);
 	}
 	function keyboard(event: KeyboardEvent, index: number) {
+		if (event.key === "Enter" && !event.isComposing) {
+			event.preventDefault();
+			container.querySelector<HTMLInputElement>("[data-list-entry]")?.focus();
+			return;
+		}
 		if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
 		event.preventDefault();
 		return move(index, event.key === "ArrowUp" ? -1 : 1);
@@ -94,21 +114,32 @@
 </script>
 
 <FieldShell {field} {issues}>
-	<div bind:this={container} class="grid gap-2">
-		<p id="{field.id}-count" class="text-xs text-foreground-muted">
+	<div
+		bind:this={container}
+		class="ridu-primitive-list"
+		data-invalid={issues.length > 0}
+		data-readonly={editingBlocked}
+	>
+		<p id="{field.id}-count" class="ridu-primitive-list__count">
 			{i18n.t("fields:itemCount", { count: values.length })}
 			{#if minimum > 0}
-				· {i18n.t("fields:minimum", { count: minimum })}{/if}
+				· {i18n.t("fields:minimum", { count: minimum })}
+			{/if}
 			{#if field.list?.maxRows}
-				· {i18n.t("fields:maximum", { count: field.list.maxRows })}{/if}
+				· {i18n.t("fields:maximum", { count: field.list.maxRows })}
+			{/if}
 		</p>
-		{#if values.length === 0}<p class="text-sm text-foreground-muted">
+		{#if values.length === 0}
+			<p class="ridu-primitive-list__empty">
 				{i18n.t("fields:listEmpty")}
-			</p>{/if}
-		<ol class="grid gap-2" aria-label={field.admin.label}>
+			</p>
+		{/if}
+		<ol class="ridu-primitive-list__items" aria-label={field.admin.label}>
 			{#each values as value, index (itemKey(index))}
-				<li class="flex items-center gap-1">
+				<li class="ridu-primitive-list__item">
 					<Input
+						class="ridu-primitive-list__input"
+						style={`width: ${Math.max(1, String(value ?? "").length) + 1}ch`}
 						id={index === 0 ? field.id : `${field.id}-item-${itemKey(index)}`}
 						data-list-item={index}
 						aria-label={i18n.t("fields:listItem", {
@@ -126,45 +157,58 @@
 					<Button
 						variant="ghost"
 						size="icon"
+						class="ridu-primitive-list__move"
 						aria-label={i18n.t("fields:listMoveUp", { number: index + 1 })}
 						disabled={editingBlocked || index === 0}
 						onclick={() => move(index, -1)}
 					>
-						<ArrowUpIcon class="size-4" />
+						<ArrowUpIcon />
 					</Button>
 					<Button
 						variant="ghost"
 						size="icon"
+						class="ridu-primitive-list__move"
 						aria-label={i18n.t("fields:listMoveDown", { number: index + 1 })}
 						disabled={editingBlocked || index === values.length - 1}
 						onclick={() => move(index, 1)}
 					>
-						<ArrowDownIcon class="size-4" />
+						<ArrowDownIcon />
 					</Button>
 					<Button
 						variant="ghost"
 						size="icon"
+						class="ridu-primitive-list__remove"
 						aria-label={i18n.t("fields:listRemove", { number: index + 1 })}
 						disabled={editingBlocked}
 						onclick={() => remove(index)}
 					>
-						<XIcon class="size-4" />
+						<XIcon />
 					</Button>
 				</li>
 			{/each}
 		</ol>
+		<input
+			class="ridu-primitive-list__entry"
+			data-list-entry
+			aria-label={`${field.admin.label}: ${i18n.t("fields:listAdd")}`}
+			placeholder={field.admin.placeholder}
+			disabled={!canAdd}
+			autocomplete="off"
+			oninput={typeNewItem}
+		/>
 		<Button
 			id={values.length === 0 ? field.id : undefined}
 			data-list-add
 			aria-label={i18n.t("fields:listAdd")}
 			{...controlARIA}
-			variant="outline"
-			class="w-fit"
+			variant="ghost"
+			size="icon-sm"
+			class="ridu-primitive-list__add"
 			disabled={!canAdd}
 			onclick={add}
 		>
-			{i18n.t("fields:listAdd")}
+			<PlusIcon aria-hidden="true" />
 		</Button>
-		<p class="sr-only" role="status">{announcement}</p>
+		<p class="ridu-primitive-list__announcement" role="status">{announcement}</p>
 	</div>
 </FieldShell>

package/src/fields/primitive-list/primitive-list.scss

@@ -0,0 +1,109 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-primitive-list {
+		@include ui.control-surface;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 4px;
+		min-height: 40px;
+		padding: 5px 10px;
+		&[data-invalid="true"] {
+			border-color: var(--control-invalid-border);
+			background: var(--control-invalid-surface);
+		}
+		&[data-readonly="true"] {
+			background: var(--control-surface-disabled);
+			color: var(--control-disabled-foreground);
+		}
+	}
+	.ridu-primitive-list__items {
+		display: contents;
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.ridu-primitive-list__item {
+		display: flex;
+		align-items: center;
+		max-width: 100%;
+		gap: 2px;
+		padding: 0 3px 0 6px;
+		background: var(--background-layer);
+		border: 1px solid var(--control-border);
+		border-radius: 2px;
+	}
+	.ridu-primitive-list__input {
+		min-width: 2ch;
+		max-width: 100%;
+		min-height: 24px;
+		height: 24px;
+		padding: 0;
+		border: 0;
+		border-radius: 0;
+		background: transparent;
+		box-shadow: none;
+		font: inherit;
+		&:focus-visible {
+			outline: none;
+		}
+	}
+	.ridu-primitive-list__item:focus-within {
+		outline: 1px solid var(--control-border-hover);
+	}
+	.ridu-primitive-list__entry {
+		flex: 1;
+		width: 2ch;
+		min-width: 2ch;
+		padding: 0;
+		border: 0;
+		outline: none;
+		color: inherit;
+		font: inherit;
+		background: transparent;
+	}
+	.ridu-primitive-list__empty {
+		color: var(--ink-faint);
+		margin: 0;
+	}
+	.ridu-primitive-list__count,
+	.ridu-primitive-list__announcement {
+		@include ui.visually-hidden;
+	}
+	.ridu-primitive-list__remove,
+	.ridu-primitive-list__add,
+	.ridu-primitive-list__move {
+		width: 22px;
+		height: 24px;
+		padding: 0;
+		color: var(--foreground-muted);
+		svg {
+			width: 12px;
+			height: 12px;
+		}
+	}
+	.ridu-primitive-list__move {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		&:focus-visible {
+			position: static;
+			width: 22px;
+			height: 24px;
+			clip-path: none;
+		}
+	}
+	.ridu-primitive-list__remove,
+	.ridu-primitive-list__move {
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+	}
+	.ridu-primitive-list__add {
+		margin-inline-start: auto;
+	}
+}

package/src/fields/radio/radio-field.svelte

@@ -5,6 +5,7 @@
 	import { RadioCardItem, RadioGroup } from "@admin/components/ui/radio-group";
 	import type { FormController } from "@admin/core/forms/form-controller.svelte";
 	import FieldShell from "@admin/fields/field-shell.svelte";
+	import "@admin/fields/field-layout.scss";
 
 	let { field, form }: { field: SchemaField; form: FormController } = $props();
 	const value = $derived(String(form.get(field.path) ?? ""));
@@ -20,7 +21,7 @@
 <FieldShell {field} {issues}>
 	<RadioGroup
 		id={field.id}
-		class="flex flex-wrap gap-x-7 gap-y-1"
+		class="ridu-field-radio-options"
 		name={field.path}
 		{value}
 		required={field.required && (!field.dynamicDefault || form.get(field.path) !== undefined)}

package/src/fields/relationship/relationship-field-controller.svelte.ts

@@ -1,3 +1,4 @@
+import { documentLabel } from "@admin/features/documents/document-title";
 import type { SchemaField } from "@riducms/protocol";
 
 import type { AdminDocument } from "@admin/core/api/admin-client";
@@ -7,6 +8,9 @@ import { localizeSchemaCollection } from "@admin/core/i18n/localized-schema";
 
 import {
 	selectedRelationshipIDs,
+	relationshipReferences,
+	relationshipKey,
+	type PolymorphicReference,
 	updateRelationshipValue,
 } from "@admin/fields/relationship/relationship-value";
 
@@ -23,6 +27,8 @@ export class RelationshipFieldController {
 	browserOpen = $state(false);
 	initialDocument = $state.raw<AdminDocument>();
 	initialDocumentID = $state<string>();
+	initialCreate = $state(false);
+	initialFile = $state.raw<File>();
 	#formRevision = 0;
 
 	constructor(readonly options: RelationshipFieldControllerOptions) {
@@ -52,16 +58,16 @@ export class RelationshipFieldController {
 		});
 
 		$effect(() => {
-			const slug = this.currentTarget?.collectionSlug;
-			const ids = [...this.selectedIDs];
+			const references = this.references;
+			const locale = this.options.form.contentLocale;
 			const revision = this.options.runtime.documentRevision;
-			if (slug === undefined || ids.length === 0) {
+			if (references.length === 0) {
 				this.documents = {};
 				this.hydrationError = undefined;
 				return;
 			}
 			const request = new AbortController();
-			this.#hydrateSelected(slug, ids, revision, request.signal);
+			this.#hydrateSelected(references, locale, revision, request.signal);
 			return () => request.abort();
 		});
 	}
@@ -95,6 +101,48 @@ export class RelationshipFieldController {
 			: localizeSchemaCollection(collection, this.options.runtime.i18n);
 	}
 
+	get references() {
+		return relationshipReferences(
+			this.options.form.get(this.options.field.path),
+			this.hasMany,
+			this.polymorphic,
+			this.targets[0]?.collectionSlug ?? ""
+		);
+	}
+
+	get selections() {
+		return this.references.map((reference) => ({
+			...reference,
+			key: relationshipKey(reference),
+			label: this.label(reference.id, reference.relationTo),
+			document: this.documents[relationshipKey(reference)],
+		}));
+	}
+
+	setReferences = (references: readonly PolymorphicReference[]) => {
+		if (this.options.field.admin.readOnly || this.options.form.editingBlocked) return;
+		const values = references.map((reference) => (this.polymorphic ? reference : reference.id));
+		this.options.form.set(
+			this.options.field.path,
+			this.hasMany ? values : (values[0] ?? (this.polymorphic ? null : ""))
+		);
+	};
+
+	removeReference = (reference: PolymorphicReference) => {
+		this.setReferences(
+			this.references.filter(
+				(candidate) => relationshipKey(candidate) !== relationshipKey(reference)
+			)
+		);
+	};
+
+	move = (from: number, to: number) => {
+		const references = [...this.references];
+		const [moved] = references.splice(from, 1);
+		if (moved) references.splice(to, 0, moved);
+		this.setReferences(references);
+	};
+
 	get selectedIDs() {
 		return selectedRelationshipIDs(
 			this.options.form.get(this.options.field.path),
@@ -116,32 +164,30 @@ export class RelationshipFieldController {
 		this.selectedTarget = target;
 	};
 
-	label = (id: string) => {
-		const document = this.documents[id];
+	label = (id: string, target = this.selectedTarget) => {
+		const document = this.documents[relationshipKey({ relationTo: target, id })];
 		if (document === undefined) return id;
-		if (this.targetCollection?.capabilities.upload) return String(document.filename ?? id);
-		const titleField = findDisplayField(this.targetCollection?.fields ?? []);
-		return String((titleField === undefined ? undefined : document[titleField.name]) ?? id);
+		const collection = this.options.runtime.manifest?.collections.find(
+			(collection) => collection.slug === target
+		);
+		if (collection?.capabilities.upload) return String(document.filename ?? id);
+		return documentLabel(collection, document);
 	};
 
-	initials = (id: string) =>
-		this.label(id)
-			.trim()
-			.split(/\s+/)
-			.filter(Boolean)
-			.slice(0, 2)
-			.map((part) => part[0]?.toLocaleUpperCase(this.options.runtime.i18n.language) ?? "")
-			.join("");
-
-	mediaURL = (document: AdminDocument | undefined) =>
-		typeof document?.url === "string" ? document.url : undefined;
-
-	isImage = (document: AdminDocument | undefined) =>
-		typeof document?.mimeType === "string" && document.mimeType.startsWith("image/");
-
-	openBrowser = (documentID?: string) => {
+	openBrowser = (
+		documentID?: string,
+		create = false,
+		target = this.selectedTarget,
+		file?: File
+	) => {
+		this.selectedTarget = target;
+		this.initialFile = file;
+		this.initialCreate = create;
 		this.initialDocumentID = documentID;
-		this.initialDocument = documentID === undefined ? undefined : this.documents[documentID];
+		this.initialDocument =
+			documentID === undefined
+				? undefined
+				: this.documents[relationshipKey({ relationTo: target, id: documentID })];
 		this.browserOpen = true;
 	};
 
@@ -152,6 +198,7 @@ export class RelationshipFieldController {
 	commit = (ids: string[]) => {
 		const field = this.options.field;
 		const form = this.options.form;
+		if (field.admin.readOnly || form.editingBlocked) return;
 		form.set(
 			field.path,
 			updateRelationshipValue(
@@ -169,16 +216,16 @@ export class RelationshipFieldController {
 	};
 
 	async #hydrateSelected(
-		slug: string,
-		ids: readonly string[],
+		references: readonly PolymorphicReference[],
+		locale: string | undefined,
 		revision: number,
 		signal: AbortSignal
 	) {
 		const results = await Promise.allSettled(
-			ids.map((id) =>
-				this.options.runtime.client.find(slug, id, {
+			references.map((reference) =>
+				this.options.runtime.client.find(reference.relationTo, reference.id, {
 					signal,
-					locale: this.options.form.contentLocale,
+					locale,
 				})
 			)
 		);
@@ -187,8 +234,9 @@ export class RelationshipFieldController {
 		let failed = false;
 		for (let index = 0; index < results.length; index += 1) {
 			const result = results[index];
-			const id = ids[index];
-			if (result?.status === "fulfilled" && id !== undefined) documents[id] = result.value;
+			const reference = references[index];
+			if (result?.status === "fulfilled" && reference !== undefined)
+				documents[relationshipKey(reference)] = result.value;
 			else failed = true;
 		}
 		this.documents = documents;
@@ -235,11 +283,3 @@ function relationshipTargets(field: SchemaField) {
 	}
 	return [];
 }
-
-function findDisplayField(fields: readonly SchemaField[]) {
-	return (
-		fields.find((field) => field.name === "title" || field.name === "name") ??
-		fields.find((field) => field.type === "text" && field.name !== "email") ??
-		fields.find((field) => field.type === "text" || field.type === "email")
-	);
-}