@riducms/admin 0.2.2 → 0.3.0

package/src/fields/relationship/relationship-quick-picker.svelte

@@ -1,21 +1,27 @@
 <script lang="ts">
-	import { Combobox } from "bits-ui";
-	import { tick } from "svelte";
+	import type { Snippet } from "svelte";
+	import {
+		Combobox,
+		ComboboxInput,
+		ComboboxTrigger,
+		ComboboxPortal,
+		ComboboxViewport,
+		ComboboxContent,
+		ComboboxItem,
+	} from "@admin/components/ui/combobox";
 	import ChevronDownIcon from "~icons/lucide/chevron-down";
 	import ArrowRightIcon from "~icons/lucide/arrow-right";
-	import ImageIcon from "~icons/lucide/image";
 	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 { fieldControlARIA, TooltipContent, TooltipRoot, TooltipTrigger } from "@riducms/ui";
-
-	import { Skeleton } from "@admin/components/ui/skeleton";
+	import { fieldControlARIA } from "@riducms/ui";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
-
 	import {
 		RelationshipQuickPickerController,
 		type RelationshipQuickPickerTarget,
 	} from "@admin/fields/relationship/relationship-quick-picker-controller.svelte";
+	import "@admin/components/ui/combobox/combobox.scss";
 
 	let {
 		id,
@@ -24,7 +30,6 @@
 		selectedTarget,
 		selectedID,
 		selectedLabel,
-		selectedInitials,
 		placeholder,
 		readOnly = false,
 		blocked = false,
@@ -32,10 +37,15 @@
 		onPick,
 		onRemove,
 		onBrowse,
+		onCreate,
 		onEdit,
 		upload = false,
 		invalid = false,
 		hasDescription = false,
+		multiple = false,
+		values = [],
+		onValuesChange,
+		selections,
 	}: {
 		id: string;
 		label: string;
@@ -43,7 +53,6 @@
 		selectedTarget?: string;
 		selectedID?: string;
 		selectedLabel?: string;
-		selectedInitials?: string;
 		placeholder?: string;
 		readOnly?: boolean;
 		blocked?: boolean;
@@ -51,12 +60,16 @@
 		onPick: (target: string, id: string) => void;
 		onRemove: () => void;
 		onBrowse: (target: string) => void;
+		onCreate?: (target: string) => void;
 		onEdit?: () => void;
 		upload?: boolean;
 		invalid?: boolean;
 		hasDescription?: boolean;
+		multiple?: boolean;
+		values?: string[];
+		onValuesChange?: (values: string[]) => void;
+		selections?: Snippet;
 	} = $props();
-
 	const runtime = getAdminRuntime();
 	const controller = new RelationshipQuickPickerController({
 		runtime,
@@ -67,7 +80,10 @@
 			return selectedTarget;
 		},
 		get selectedID() {
-			return selectedID;
+			return multiple ? undefined : selectedID;
+		},
+		get excludedValues() {
+			return multiple ? values : [];
 		},
 		get locale() {
 			return locale;
@@ -77,236 +93,183 @@
 		onBrowse: (target) => onBrowse(target),
 	});
 	const { comboboxItems, groups, open, query, selectedValue } = $derived(controller);
-	const {
-		browseAll,
-		changeOpen: setOpen,
-		documentLabel,
-		initials,
-		pick,
-		remove: removeSelection,
-		setQuery,
-		toggleOpen,
-	} = controller;
+	const { browseAll, changeOpen, documentLabel, pick, remove, setQuery } = controller;
+	let anchor = $state<HTMLDivElement | null>(null);
+
 	const selectedCollection = $derived(
 		targets.find((target) => target.collection.slug === selectedTarget)?.collection ??
 			targets[0]?.collection
 	);
-	const searchLabel = $derived(
-		targets.length === 1 ? (selectedCollection?.labels.plural ?? label) : label
+	const editingBlocked = $derived(readOnly || blocked);
+	const canCreate = $derived(
+		!editingBlocked &&
+			onCreate !== undefined &&
+			selectedCollection !== undefined &&
+			runtime.collectionOperations[selectedCollection.slug]?.create === true
 	);
 	const controlARIA = $derived(fieldControlARIA(id, hasDescription, invalid));
-	const editingBlocked = $derived(readOnly || blocked);
-	let triggerElement = $state<HTMLButtonElement | null>(null);
-	let searchInput = $state<HTMLInputElement | null>(null);
+	const inputValue = $derived(open || multiple ? query : (selectedLabel ?? ""));
+	const inputPlaceholder = $derived(
+		placeholder ??
+			runtime.i18n.t(upload ? "fields:choose" : "fields:select", {
+				label: (
+					selectedCollection?.labels.singular ??
+					runtime.i18n.t(upload ? "fields:asset" : "fields:document")
+				).toLocaleLowerCase(runtime.i18n.language),
+			})
+	);
+
+	const selection = $derived(
+		multiple
+			? {
+					type: "multiple" as const,
+					value: values,
+					onValueChange: (next: string[]) => {
+						if (!editingBlocked) onValuesChange?.(next);
+						setQuery("");
+					},
+				}
+			: { type: "single" as const, value: selectedValue, onValueChange: pick }
+	);
 
 	$effect(() => {
-		if (editingBlocked) setOpen(false);
+		if (editingBlocked) changeOpen(false);
 	});
-
-	function changePickerOpen(next: boolean) {
-		if (editingBlocked && next) return;
-		setOpen(next);
-	}
-
-	async function togglePicker() {
-		if (editingBlocked) return;
-		if (!toggleOpen()) return;
-		await tick();
-		searchInput?.focus();
-	}
-
-	function beginSearch(event: Event) {
-		if (editingBlocked) return;
-		setQuery((event.currentTarget as HTMLInputElement).value);
-	}
-
-	function choose(value: string) {
-		if (editingBlocked) return;
-		pick(value);
-	}
-
-	function remove(event: MouseEvent) {
-		event.stopPropagation();
-		if (editingBlocked) return;
-		removeSelection();
-	}
-
-	function browse(event: MouseEvent, target?: string) {
-		event.stopPropagation();
-		if (blocked) return;
-		browseAll(target);
-	}
-
-	function edit(event: MouseEvent) {
-		event.stopPropagation();
-		if (blocked) return;
-		onEdit?.();
-	}
 </script>
 
-<Combobox.Root
-	type="single"
-	value={selectedValue}
-	inputValue={query}
+<Combobox
+	{...selection}
+	{inputValue}
 	items={comboboxItems}
-	{open}
-	onOpenChange={changePickerOpen}
-	onValueChange={choose}
+	bind:open={() => open, changeOpen}
+	disabled={editingBlocked}
 	allowDeselect={false}
 	loop
 >
 	<div
-		class="flex h-10.5 min-w-0 rounded-[3px] border border-control-border bg-control transition-[background-color,border-color] duration-150 hover:bg-background focus-within:border-primary/65 aria-invalid:!border-destructive/65"
+		bind:this={anchor}
+		class="ridu-combobox"
 		aria-invalid={invalid}
+		data-disabled={editingBlocked}
 	>
-		<button
-			bind:this={triggerElement}
-			{id}
-			type="button"
-			class="flex min-w-0 flex-1 items-center gap-2 rounded-s-[3px] px-2.75 text-start outline-none disabled:cursor-not-allowed disabled:opacity-45"
-			disabled={editingBlocked}
-			aria-label={label}
-			{...controlARIA}
-			aria-haspopup="listbox"
-			aria-expanded={open}
-			onclick={togglePicker}
-		>
-			{#if selectedID !== undefined}
-				<span
-					class="font-mono grid size-[19px] shrink-0 place-items-center rounded-full bg-sidebar-accent text-[8px] font-semibold tracking-[0.04em] text-sidebar-accent-foreground"
-					aria-hidden="true"
-				>
-					{selectedInitials}
-				</span>
-				<span class="min-w-0 flex-1 truncate text-[13px] text-foreground-strong">
-					{selectedLabel}
-				</span>
-			{:else}
-				{#if upload}<ImageIcon class="size-3.5 shrink-0 text-foreground-sub" />{/if}
-				<span class="min-w-0 flex-1 truncate text-[13px] text-foreground-placeholder">
-					{placeholder ??
-						runtime.i18n.t(upload ? "fields:choose" : "fields:select", {
-							label: (
-								selectedCollection?.labels.singular ??
-								runtime.i18n.t(upload ? "fields:asset" : "fields:document")
-							).toLocaleLowerCase(runtime.i18n.language),
-						})}
-				</span>
-			{/if}
-			<ChevronDownIcon class="size-3.5 shrink-0 text-foreground-sub" aria-hidden="true" />
-		</button>
-
-		{#if selectedID !== undefined && onEdit !== undefined}
-			<TooltipRoot>
-				<TooltipTrigger>
-					{#snippet child({ props })}
+		<div class="ridu-combobox-value">
+			{@render selections?.()}
+			<ComboboxInput
+				{id}
+				class="ridu-combobox-input"
+				autocomplete="off"
+				autocorrect="off"
+				autocapitalize="none"
+				spellcheck={false}
+				aria-label={label}
+				{...controlARIA}
+				placeholder={selectedID || values.length > 0 ? "" : inputPlaceholder}
+				clearOnDeselect
+				onpointerdown={() => changeOpen(true)}
+				oninput={(event) => {
+					setQuery(event.currentTarget.value);
+					changeOpen(true);
+				}}
+			>
+				{#snippet child({ props })}
+					<!-- Keep the visible search controlled: Bits writes the last picked label internally. -->
+					<input {...props} value={inputValue} />
+				{/snippet}
+			</ComboboxInput>
+			{#if !multiple && selectedID && !query}
+				<div class="ridu-combobox-selection">
+					<span>{selectedLabel}</span>
+					{#if onEdit}
 						<button
-							{...props}
 							type="button"
-							class="grid w-9 shrink-0 place-items-center border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-primary disabled:cursor-not-allowed disabled:opacity-45"
+							class="ridu-combobox-icon"
 							disabled={blocked}
-							onpointerdown={(event) => event.preventDefault()}
-							onclick={edit}
 							aria-label={runtime.i18n.t("fields:edit", { label: selectedLabel ?? "" })}
-						>
-							<PencilIcon class="size-3.25" />
-						</button>
-					{/snippet}
-				</TooltipTrigger>
-				<TooltipContent>{runtime.i18n.t("fields:editRelationship")}</TooltipContent>
-			</TooltipRoot>
-		{/if}
-
-		{#if selectedID !== undefined && !readOnly}
-			<TooltipRoot>
-				<TooltipTrigger>
-					{#snippet child({ props })}
-						<button
-							{...props}
-							type="button"
-							disabled={editingBlocked}
-							class="grid w-9 shrink-0 place-items-center border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-destructive/7 hover:text-destructive focus-visible:text-destructive"
 							onpointerdown={(event) => event.preventDefault()}
-							onclick={remove}
-							aria-label={runtime.i18n.t("fields:remove", { label: selectedLabel ?? "" })}
+							onclick={onEdit}
 						>
-							<XIcon class="size-3.5" />
+							<PencilIcon />
 						</button>
-					{/snippet}
-				</TooltipTrigger>
-				<TooltipContent>{runtime.i18n.t("fields:removeRelationship")}</TooltipContent>
-			</TooltipRoot>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if (selectedID || values.length > 0) && !readOnly}
+			<button
+				type="button"
+				class="ridu-combobox-icon"
+				disabled={editingBlocked}
+				aria-label={multiple
+					? runtime.i18n.t("general:clearSelection")
+					: runtime.i18n.t("fields:remove", { label: selectedLabel ?? "" })}
+				onclick={() => (multiple ? onValuesChange?.([]) : remove())}
+			>
+				<XIcon />
+			</button>
 		{/if}
-
-		<TooltipRoot>
-			<TooltipTrigger>
-				{#snippet child({ props })}
-					<button
-						{...props}
-						type="button"
-						disabled={blocked}
-						class="grid w-9 shrink-0 place-items-center rounded-e-[3px] border-s border-control-border text-foreground-sub outline-none transition-colors hover:bg-background hover:text-foreground focus-visible:text-primary"
-						onpointerdown={(event) => event.preventDefault()}
-						onclick={(event) => browse(event, selectedCollection?.slug)}
-						aria-label={runtime.i18n.t("fields:browse", {
-							label: (
-								selectedCollection?.labels.plural ?? runtime.i18n.t("fields:relationships")
-							).toLocaleLowerCase(runtime.i18n.language),
-						})}
-					>
-						<PlusIcon class="size-3.5" />
-					</button>
-				{/snippet}
-			</TooltipTrigger>
-			<TooltipContent>{runtime.i18n.t("fields:addRelationship")}</TooltipContent>
-		</TooltipRoot>
-	</div>
-
-	<Combobox.Portal>
-		<Combobox.Content
-			customAnchor={triggerElement}
-			align="start"
-			sideOffset={4}
-			class="ridu-popover-enter z-50 flex flex-col overflow-hidden rounded-[4px] border border-control-border bg-popover p-1.5 text-popover-foreground shadow-lg outline-none"
-			style="width: var(--bits-combobox-anchor-width);"
+		<ComboboxTrigger
+			type="button"
+			class="ridu-combobox-icon ridu-combobox-trigger"
+			aria-label={inputPlaceholder}
 		>
-			<Combobox.Input
-				bind:ref={searchInput}
-				disabled={editingBlocked}
-				aria-label={runtime.i18n.t("fields:searchLabel", { label: searchLabel })}
-				placeholder={runtime.i18n.t("fields:search", {
-					label: searchLabel.toLocaleLowerCase(runtime.i18n.language),
+			<ChevronDownIcon />
+		</ComboboxTrigger>
+		{#if canCreate && selectedCollection}
+			<button
+				type="button"
+				class="ridu-combobox-icon ridu-combobox-add"
+				aria-label={runtime.i18n.t("fields:add", { label: selectedCollection.labels.singular })}
+				onclick={() => {
+					changeOpen(false);
+					onCreate?.(selectedCollection!.slug);
+				}}
+			>
+				<PlusIcon />
+			</button>
+		{:else if upload || readOnly}
+			<button
+				type="button"
+				class="ridu-combobox-icon ridu-combobox-add"
+				disabled={blocked}
+				aria-label={runtime.i18n.t("fields:browse", {
+					label: (readOnly
+						? (selectedCollection?.labels.plural ?? label)
+						: label
+					).toLocaleLowerCase(runtime.i18n.language),
 				})}
-				class="mb-1.25 h-[29px] w-full rounded-[3px] border border-control-border bg-control px-[9px] text-[12.5px] text-foreground caret-primary outline-none placeholder:text-foreground-faint focus-visible:border-primary/55"
-				oninput={beginSearch}
-			/>
+				onclick={() => browseAll(selectedCollection?.slug)}
+			>
+				{#if readOnly}
+					<SearchIcon />
+				{:else}
+					<PlusIcon />
+				{/if}
+			</button>
+		{/if}
+	</div>
 
-			<Combobox.Viewport class="grid max-h-64 min-h-8 overflow-y-auto">
+	<ComboboxPortal>
+		<ComboboxContent customAnchor={anchor} align="start" sideOffset={0} class="ridu-combobox-popup">
+			<ComboboxViewport>
 				{#each groups as group (group.collection.id)}
 					<div role="group" aria-label={group.collection.labels.plural}>
 						{#if groups.length > 1}
-							<p
-								class="px-2 pt-2 pb-1 text-[10px] font-medium tracking-[0.08em] text-foreground-faint uppercase"
-							>
+							<p class="ridu-combobox-group">
 								{group.collection.labels.plural}
 							</p>
 						{/if}
 						{#if group.status === "initial" || group.status === "loading"}
-							<div
-								class="grid gap-1 p-0.5"
-								aria-label={runtime.i18n.t("fields:loading", {
-									label: group.collection.labels.plural,
-								})}
+							<p
+								class="ridu-combobox-message"
+								role="status"
+								data-ridu-loading-surface="relationship-options"
 							>
-								<Skeleton class="h-[31px]" />
-								<Skeleton class="h-[31px]" />
-							</div>
-						{:else if group.error !== undefined}
-							<p class="px-3 py-2 text-[12px] leading-4 text-destructive" role="alert">
-								{group.error}
+								{runtime.i18n.t("fields:loading", { label: group.collection.labels.plural })}
 							</p>
-						{:else if group.docs.length === 0}
-							<p class="px-3 py-2 text-[12px] text-foreground-faint">
+						{:else if group.error}
+							<p class="ridu-combobox-message" role="alert">{group.error}</p>
+						{:else if !group.docs.length && query.trim()}
+							<p class="ridu-combobox-message">
 								{runtime.i18n.t("fields:noMatch", {
 									label: group.collection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
 								})}
@@ -314,42 +277,30 @@
 						{:else}
 							{#each group.docs as document (document.id)}
 								{const optionLabel = documentLabel(group.collection, document)}
-								<Combobox.Item
+								<ComboboxItem
 									value={JSON.stringify([group.collection.slug, document.id])}
 									label={optionLabel}
 									disabled={editingBlocked}
-									class="flex w-full cursor-default items-center gap-[9px] rounded-[3px] px-2 py-1.5 text-start text-[12.5px] text-foreground-muted outline-none select-none data-[highlighted]:bg-control data-[selected]:text-foreground-strong"
+									class="ridu-combobox-option"
 								>
-									{#snippet children({ selected })}
-										<span
-											class="font-mono grid size-[19px] shrink-0 place-items-center rounded-full bg-sidebar-accent text-[8px] font-semibold text-sidebar-accent-foreground"
-											aria-hidden="true"
-										>
-											{initials(optionLabel)}
-										</span>
-										<span class="min-w-0 flex-1 truncate">{optionLabel}</span>
-										<span class="font-mono text-[9.5px] text-primary" aria-hidden="true">
-											{selected ? "✓" : ""}
-										</span>
-									{/snippet}
-								</Combobox.Item>
+									{optionLabel}
+								</ComboboxItem>
 							{/each}
 						{/if}
 						<button
 							type="button"
-							disabled={editingBlocked}
-							class="mt-0.5 flex w-full items-center gap-1 px-2 py-1.5 text-start text-[11.5px] text-primary outline-none hover:text-primary-hover focus-visible:text-primary-hover"
+							class="ridu-combobox-browse"
+							disabled={blocked}
 							onpointerdown={(event) => event.preventDefault()}
-							onclick={(event) => browse(event, group.collection.slug)}
+							onclick={() => browseAll(group.collection.slug)}
 						>
 							{runtime.i18n.t("fields:browseAll", {
 								label: group.collection.labels.plural.toLocaleLowerCase(runtime.i18n.language),
-							})}
-							<ArrowRightIcon class="size-3 rtl:rotate-180" aria-hidden="true" />
+							})}<ArrowRightIcon />
 						</button>
 					</div>
 				{/each}
-			</Combobox.Viewport>
-		</Combobox.Content>
-	</Combobox.Portal>
-</Combobox.Root>
+			</ComboboxViewport>
+		</ComboboxContent>
+	</ComboboxPortal>
+</Combobox>

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { useSortable } from "@dnd-kit-svelte/svelte/sortable";
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { AdminDocument } from "@admin/core/api/admin-client";
+	import FileIcon from "~icons/lucide/file";
+	import PencilIcon from "~icons/lucide/pencil";
+	import XIcon from "~icons/lucide/x";
+	import GripVerticalIcon from "~icons/lucide/grip-vertical";
+	import "@admin/fields/relationship/relationship.scss";
+
+	let {
+		id,
+		index,
+		label,
+		document,
+		upload = false,
+		sortable = false,
+		readOnly = false,
+		blocked = false,
+		onEdit,
+		onRemove,
+	}: {
+		id: string;
+		index: number;
+		label: string;
+		document?: AdminDocument;
+		upload?: boolean;
+		sortable?: boolean;
+		readOnly?: boolean;
+		blocked?: boolean;
+		onEdit: () => void;
+		onRemove: () => void;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	const sortableItem = useSortable({
+		id: () => id,
+		index: () => index,
+		disabled: () => !sortable || readOnly || blocked,
+	});
+	const metadata = $derived(
+		[
+			typeof document?.filesize === "number"
+				? i18n.formatNumber(document.filesize, { style: "unit", unit: "byte", unitDisplay: "long" })
+				: undefined,
+			typeof document?.width === "number" && typeof document?.height === "number"
+				? `${document.width} × ${document.height}`
+				: undefined,
+			typeof document?.mimeType === "string" ? document.mimeType : undefined,
+		]
+			.filter(Boolean)
+			.join(" — ")
+	);
+</script>
+
+<!-- dnd-kit's popover reset belongs on the drag container, outside the styled surface. -->
+<div
+	class="ridu-relationship-selection"
+	data-dragging={sortableItem.isDragging.current}
+	{@attach sortable && sortableItem.ref}
+>
+	<div
+		class={[
+			upload ? "ridu-upload-reference" : "ridu-relationship-chip",
+			{ "ridu-upload-reference--compact": upload && sortable },
+		]}
+	>
+		{#if sortable}
+			<button
+				type="button"
+				class="ridu-relationship-grip"
+				hidden={readOnly}
+				disabled={blocked || readOnly}
+				aria-label={i18n.t("fields:drag", { label })}
+				{@attach sortableItem.handleRef}
+			>
+				<GripVerticalIcon />
+			</button>
+		{/if}
+		{#if upload}
+			<div class="ridu-upload-reference__thumbnail">
+				{#if typeof document?.mimeType === "string" && document.mimeType.startsWith("image/") && typeof document.url === "string"}
+					<img src={document.url} alt="" />
+				{:else}
+					<FileIcon />
+				{/if}
+			</div>
+		{/if}
+		<div class="ridu-relationship-label">
+			<button type="button" class="ridu-relationship-title" disabled={blocked} onclick={onEdit}>
+				{label}
+			</button>
+			{#if upload && !sortable && metadata}
+				<span class="ridu-upload-reference__metadata">
+					{metadata}
+				</span>
+			{/if}
+		</div>
+		<button
+			type="button"
+			class="ridu-relationship-action"
+			disabled={blocked}
+			aria-label={i18n.t("fields:edit", { label })}
+			onclick={onEdit}
+		>
+			<PencilIcon />
+		</button>
+		{#if !readOnly}
+			<button
+				type="button"
+				class="ridu-relationship-action"
+				disabled={blocked}
+				aria-label={i18n.t("fields:remove", { label })}
+				onclick={onRemove}
+			>
+				<XIcon />
+			</button>
+		{/if}
+	</div>
+</div>