@riducms/admin 0.1.0

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { useSortable } from "@dnd-kit-svelte/svelte/sortable";
+	import type { Snippet } from "svelte";
+
+	let {
+		id,
+		index,
+		disabled = false,
+		children,
+	}: {
+		id: string;
+		index: number;
+		disabled?: boolean;
+		children: Snippet<[ReturnType<typeof useSortable>]>;
+	} = $props();
+	const sortable = useSortable({
+		id: () => id,
+		index: () => index,
+		group: "ridu-array",
+		disabled: () => disabled,
+	});
+</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",
+	]}
+	{@attach sortable.ref}
+>
+	{@render children(sortable)}
+</section>

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+
+	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";
+
+	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 issues = $derived(form.issuesFor(field.path));
+
+	$effect(() => form.register(field.path));
+
+	function setCoordinate(index: number, next: number) {
+		const coordinates = [Number(value[0] ?? 0), Number(value[1] ?? 0)];
+		coordinates[index] = next;
+		form.set(field.path, coordinates);
+	}
+</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
+				type="number"
+				min="-180"
+				max="180"
+				step="any"
+				value={value[0] ?? ""}
+				readonly={field.admin.readOnly}
+				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
+				type="number"
+				min="-90"
+				max="90"
+				step="any"
+				value={value[1] ?? ""}
+				readonly={field.admin.readOnly}
+				oninput={(event) => setCoordinate(1, event.currentTarget.valueAsNumber)}
+			/>
+		</label>
+	</div>
+</FieldShell>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { SchemaField } from "@riducms/protocol";
+
+	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";
+
+	let { field, form }: { field: SchemaField; form: FormController } = $props();
+	const value = $derived(String(form.get(field.path) ?? ""));
+	const issues = $derived(form.issuesFor(field.path));
+	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+
+	$effect(() => form.register(field.path));
+</script>
+
+<FieldShell {field} {issues}>
+	<RadioGroup
+		id={field.id}
+		class="flex flex-wrap gap-x-7 gap-y-1"
+		name={field.path}
+		{value}
+		required={field.required}
+		readonly={field.admin.readOnly}
+		aria-labelledby={`${field.id}-label`}
+		aria-invalid={issues.length > 0}
+		aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+		aria-errormessage={issues.length > 0 ? `${field.id}-message` : undefined}
+		onValueChange={(next) => form.set(field.path, next)}
+	>
+		{#each field.select?.choices ?? [] as choice (choice.value)}
+			<RadioCardItem value={choice.value} label={choice.label} />
+		{/each}
+	</RadioGroup>
+</FieldShell>

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

@@ -0,0 +1,245 @@
+import type { SchemaField } from "@riducms/protocol";
+
+import type { AdminDocument } from "@admin/core/api/admin-client";
+import type { FormController } from "@admin/core/forms/form-controller.svelte";
+import type { AdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+import { localizeSchemaCollection } from "@admin/core/i18n/localized-schema";
+
+import {
+	selectedRelationshipIDs,
+	updateRelationshipValue,
+} from "@admin/fields/relationship/relationship-value";
+
+interface RelationshipFieldControllerOptions {
+	runtime: AdminRuntime;
+	get field(): SchemaField;
+	get form(): FormController;
+}
+
+export class RelationshipFieldController {
+	selectedTarget = $state("");
+	documents = $state.raw<Record<string, AdminDocument>>({});
+	hydrationError = $state<string>();
+	browserOpen = $state(false);
+	initialDocument = $state.raw<AdminDocument>();
+	initialDocumentID = $state<string>();
+	#formRevision = 0;
+
+	constructor(readonly options: RelationshipFieldControllerOptions) {
+		this.selectedTarget =
+			selectedRelationshipTarget(options.form.get(options.field.path)) ??
+			relationshipTargets(options.field)[0]?.collectionSlug ??
+			"";
+
+		$effect(() => this.options.form.register(this.options.field.path));
+
+		$effect(() => {
+			const revision = this.options.form.revision;
+			if (revision === this.#formRevision) return;
+			this.#formRevision = revision;
+			const target = selectedRelationshipTarget(this.options.form.get(this.options.field.path));
+			if (
+				target !== undefined &&
+				this.targets.some((candidate) => candidate.collectionSlug === target)
+			) {
+				this.selectedTarget = target;
+			}
+		});
+
+		$effect(() => {
+			if (this.targets.some((target) => target.collectionSlug === this.selectedTarget)) return;
+			this.selectedTarget = this.targets[0]?.collectionSlug ?? "";
+		});
+
+		$effect(() => {
+			const slug = this.currentTarget?.collectionSlug;
+			const ids = [...this.selectedIDs];
+			const revision = this.options.runtime.documentRevision;
+			if (slug === undefined || ids.length === 0) {
+				this.documents = {};
+				this.hydrationError = undefined;
+				return;
+			}
+			const request = new AbortController();
+			this.#hydrateSelected(slug, ids, revision, request.signal);
+			return () => request.abort();
+		});
+	}
+
+	get targets() {
+		return relationshipTargets(this.options.field);
+	}
+
+	get hasMany() {
+		const field = this.options.field;
+		return field.relationship?.hasMany ?? field.upload?.hasMany ?? false;
+	}
+
+	get polymorphic() {
+		return this.options.field.relationship?.polymorphic === true;
+	}
+
+	get currentTarget() {
+		return (
+			this.targets.find((target) => target.collectionSlug === this.selectedTarget) ??
+			this.targets[0]
+		);
+	}
+
+	get targetCollection() {
+		const collection = this.options.runtime.manifest?.collections.find(
+			(collection) => collection.slug === this.currentTarget?.collectionSlug
+		);
+		return collection === undefined
+			? undefined
+			: localizeSchemaCollection(collection, this.options.runtime.i18n);
+	}
+
+	get selectedIDs() {
+		return selectedRelationshipIDs(
+			this.options.form.get(this.options.field.path),
+			this.hasMany,
+			this.polymorphic,
+			this.selectedTarget
+		);
+	}
+
+	get selectedID() {
+		return this.selectedIDs[0];
+	}
+
+	get issues() {
+		return this.options.form.issuesFor(this.options.field.path);
+	}
+
+	selectTarget = (target: string) => {
+		this.selectedTarget = target;
+	};
+
+	label = (id: string) => {
+		const document = this.documents[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);
+	};
+
+	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) => {
+		this.initialDocumentID = documentID;
+		this.initialDocument = documentID === undefined ? undefined : this.documents[documentID];
+		this.browserOpen = true;
+	};
+
+	setBrowserOpen = (open: boolean) => {
+		this.browserOpen = open;
+	};
+
+	commit = (ids: string[]) => {
+		const field = this.options.field;
+		const form = this.options.form;
+		form.set(
+			field.path,
+			updateRelationshipValue(
+				form.get(field.path),
+				ids,
+				this.hasMany,
+				this.polymorphic,
+				this.selectedTarget
+			)
+		);
+	};
+
+	remove = (id: string) => {
+		this.commit(this.selectedIDs.filter((candidate) => candidate !== id));
+	};
+
+	async #hydrateSelected(
+		slug: string,
+		ids: readonly string[],
+		revision: number,
+		signal: AbortSignal
+	) {
+		const results = await Promise.allSettled(
+			ids.map((id) =>
+				this.options.runtime.client.find(slug, id, {
+					signal,
+					locale: this.options.form.contentLocale,
+				})
+			)
+		);
+		if (signal.aborted || revision !== this.options.runtime.documentRevision) return;
+		const documents: Record<string, AdminDocument> = {};
+		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;
+			else failed = true;
+		}
+		this.documents = documents;
+		this.hydrationError = failed
+			? this.options.runtime.i18n.t("errors:selectedDocumentsLoad")
+			: undefined;
+	}
+}
+
+function selectedRelationshipTarget(value: unknown): string | undefined {
+	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+		const target = (value as Record<string, unknown>).relationTo;
+		return typeof target === "string" ? target : undefined;
+	}
+	if (Array.isArray(value)) {
+		for (const candidate of value) {
+			const target: string | undefined = selectedRelationshipTarget(candidate);
+			if (target !== undefined) return target;
+		}
+	}
+	return undefined;
+}
+
+function relationshipTargets(field: SchemaField) {
+	if (field.upload !== undefined) {
+		return [
+			{
+				collectionId: field.upload.collectionId,
+				collectionSlug: field.upload.collectionSlug,
+			},
+		];
+	}
+	if ((field.relationship?.targets?.length ?? 0) > 0) return field.relationship?.targets ?? [];
+	if (
+		field.relationship?.collectionId !== undefined &&
+		field.relationship.collectionSlug !== undefined
+	) {
+		return [
+			{
+				collectionId: field.relationship.collectionId,
+				collectionSlug: field.relationship.collectionSlug,
+			},
+		];
+	}
+	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")
+	);
+}

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

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { FieldAuthoringHost } from "@riducms/plugin";
+	import type { SchemaField } from "@riducms/protocol";
+	import FileIcon from "~icons/lucide/file";
+	import PencilIcon from "~icons/lucide/pencil";
+	import PlusIcon from "~icons/lucide/plus";
+	import SearchIcon from "~icons/lucide/search";
+	import XIcon from "~icons/lucide/x";
+
+	import { Button } from "@admin/components/ui/button";
+	import type { FormController } from "@admin/core/forms/form-controller.svelte";
+	import { localizeSchemaCollection } from "@admin/core/i18n/localized-schema";
+	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
+	import FieldShell from "@admin/fields/field-shell.svelte";
+
+	import { RelationshipFieldController } from "@admin/fields/relationship/relationship-field-controller.svelte";
+	import RelationshipQuickPicker from "@admin/fields/relationship/relationship-quick-picker.svelte";
+	import { relationshipOptionFilters } from "@admin/fields/relationship/relationship-query";
+
+	let {
+		field,
+		form,
+		authoring,
+	}: { field: SchemaField; form: FormController; authoring?: FieldAuthoringHost } = $props();
+	const runtime = getAdminRuntime();
+	const ReferenceBrowser = $derived(authoring?.referenceBrowser);
+	const controller = new RelationshipFieldController({
+		runtime,
+		get field() {
+			return field;
+		},
+		get form() {
+			return form;
+		},
+	});
+	const {
+		browserOpen,
+		documents,
+		hasMany,
+		hydrationError,
+		initialDocument,
+		initialDocumentID,
+		issues,
+		polymorphic,
+		selectedID,
+		selectedIDs,
+		selectedTarget,
+		targetCollection,
+		targets,
+	} = $derived(controller);
+	const {
+		commit,
+		initials,
+		isImage,
+		label,
+		mediaURL,
+		openBrowser,
+		remove,
+		selectTarget,
+		setBrowserOpen,
+	} = controller;
+	const hasMessage = $derived(issues.length > 0 || field.admin.description !== undefined);
+	const optionFilter = $derived(
+		relationshipOptionFilters(field, form.values, targetCollection?.slug)
+	);
+	const quickPickerTargets = $derived(
+		targets.flatMap((target) => {
+			const collection = runtime.manifest?.collections.find(
+				(candidate) => candidate.slug === target.collectionSlug
+			);
+			return collection === undefined
+				? []
+				: [
+						{
+							collection: localizeSchemaCollection(collection, runtime.i18n),
+							filter: relationshipOptionFilters(field, form.values, collection.slug),
+						},
+					];
+		})
+	);
+
+	function pickRelationship(target: string, id: string) {
+		selectTarget(target);
+		commit([id]);
+	}
+
+	function browseRelationships(target: string) {
+		selectTarget(target);
+		openBrowser();
+	}
+</script>
+
+<FieldShell {field} {issues}>
+	{#if targetCollection === undefined}
+		<div
+			class="rounded-[4px] border border-destructive/25 bg-destructive/7 p-3 text-[12.5px] text-destructive"
+			role="alert"
+		>
+			{runtime.i18n.t("errors:relationshipTargetUnavailable")}
+		</div>
+	{:else if field.upload !== undefined && !hasMany && selectedID !== undefined}
+		{const document = documents[selectedID]}
+		<div
+			class="flex min-h-17 items-center gap-2.5 rounded-[4px] border border-control-border bg-control p-2"
+		>
+			<button
+				type="button"
+				class="group flex min-w-0 flex-1 items-center gap-2.5 rounded-[3px] text-start outline-none focus-visible:ring-2 focus-visible:ring-ring/70"
+				onclick={() => openBrowser(selectedID)}
+				aria-label={runtime.i18n.t("fields:edit", { label: label(selectedID) })}
+			>
+				<span
+					class="grid size-14 shrink-0 place-items-center overflow-hidden rounded-[3px] border border-control-border bg-background"
+				>
+					{#if isImage(document) && mediaURL(document) !== undefined}
+						<img
+							class="size-full object-cover"
+							src={mediaURL(document)}
+							alt={typeof document?.alt === "string" ? document.alt : ""}
+						/>
+					{:else}
+						<FileIcon class="size-5 text-foreground-faint" />
+					{/if}
+				</span>
+				<span class="min-w-0 flex-1">
+					<span class="block truncate text-[13px] text-foreground-strong group-hover:text-primary">
+						{label(selectedID)}
+					</span>
+					<span class="font-mono mt-0.5 block truncate text-[9.5px] text-foreground-faint">
+						{selectedID}
+					</span>
+					<span class="mt-1.5 flex items-center gap-1 text-[11px] text-foreground-sub">
+						<PencilIcon class="size-3" />
+						{runtime.i18n.t("fields:inspectEdit")}
+					</span>
+				</span>
+			</button>
+			{#if !field.admin.readOnly}
+				<div class="flex shrink-0 flex-wrap justify-end gap-1">
+					<Button variant="outline" size="xs" onclick={() => openBrowser()}>
+						<SearchIcon class="size-3" />
+						{runtime.i18n.t("general:replace")}
+					</Button>
+					<Button variant="ghost" size="xs" onclick={() => commit([])}>
+						<XIcon class="size-3" />
+						{runtime.i18n.t("general:remove")}
+					</Button>
+				</div>
+			{/if}
+		</div>
+	{:else}
+		{#if !hasMany}
+			<RelationshipQuickPicker
+				id={field.id}
+				label={field.admin.label}
+				targets={quickPickerTargets}
+				{selectedTarget}
+				{selectedID}
+				selectedLabel={selectedID === undefined ? undefined : label(selectedID)}
+				selectedInitials={selectedID === undefined ? undefined : initials(selectedID)}
+				placeholder={field.admin.placeholder}
+				readOnly={field.admin.readOnly}
+				locale={form.contentLocale}
+				upload={field.upload !== undefined}
+				invalid={issues.length > 0}
+				describedBy={hasMessage ? `${field.id}-message` : undefined}
+				onPick={pickRelationship}
+				onRemove={() => commit([])}
+				onBrowse={browseRelationships}
+				onEdit={selectedID === undefined ? undefined : () => openBrowser(selectedID)}
+			/>
+		{:else}
+			<div
+				class="flex min-h-10 min-w-0 rounded-[3px] border border-control-border bg-control transition-colors hover:border-control-border-hover aria-invalid:border-destructive/65"
+				aria-invalid={issues.length > 0}
+			>
+				{#if selectedIDs.length === 0}
+					<button
+						id={field.id}
+						type="button"
+						class="flex min-h-10 min-w-0 flex-1 items-center px-3 text-start text-[13px] text-foreground-placeholder outline-none hover:text-foreground focus-visible:text-primary"
+						onclick={() => openBrowser()}
+						aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+					>
+						<span class="px-1.5 text-[13px] text-foreground-placeholder">
+							{field.admin.placeholder ??
+								runtime.i18n.t("fields:select", {
+									label: targetCollection.labels.singular.toLocaleLowerCase(runtime.i18n.language),
+								})}
+						</span>
+					</button>
+				{:else}
+					<div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5 p-1.5">
+						{#each selectedIDs as id (id)}
+							<div
+								class="inline-flex max-w-full items-center gap-1 rounded-[3px] border border-control-border bg-background py-0.5 pe-0.5 ps-2 text-[12px] text-foreground-muted"
+							>
+								<button
+									type="button"
+									class="min-w-0 flex-1 truncate text-start outline-none hover:text-foreground focus-visible:text-primary"
+									onclick={() => openBrowser(id)}
+									aria-label={runtime.i18n.t("fields:edit", { label: label(id) })}
+								>
+									{label(id)}
+								</button>
+								{#if !field.admin.readOnly}
+									<Button
+										variant="ghost"
+										size="icon-xs"
+										onclick={() => remove(id)}
+										aria-label={runtime.i18n.t("fields:remove", { label: label(id) })}
+									>
+										<XIcon class="size-3" />
+									</Button>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+				<Button
+					variant="ghost"
+					size="icon"
+					class="h-auto min-h-10 w-10 rounded-s-none border-s border-control-border"
+					onclick={() => openBrowser()}
+					aria-describedby={hasMessage ? `${field.id}-message` : undefined}
+					aria-label={runtime.i18n.t("fields:browse", {
+						label: targetCollection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
+					})}
+				>
+					{#if selectedIDs.length === 0}<PlusIcon class="size-3.5" />{:else}<SearchIcon
+							class="size-3.5"
+						/>{/if}
+				</Button>
+			</div>
+		{/if}
+	{/if}
+
+	{#if hydrationError !== undefined}
+		<p class="ridu-field-error" role="alert">{hydrationError}</p>
+	{/if}
+</FieldShell>
+
+{#if browserOpen && targetCollection !== undefined && ReferenceBrowser !== undefined}
+	<ReferenceBrowser
+		bind:open={() => browserOpen, setBrowserOpen}
+		{field}
+		collection={targetCollection}
+		{hasMany}
+		{selectedIDs}
+		readOnly={field.admin.readOnly}
+		{initialDocument}
+		{initialDocumentID}
+		{optionFilter}
+		locale={form.contentLocale}
+		onCommit={commit}
+		onClose={() => setBrowserOpen(false)}
+	/>
+{/if}