@riducms/admin 0.2.2 → 0.3.0

package/src/features/auth/verify-email-route.svelte

@@ -3,56 +3,90 @@
 	import { RiduError } from "@riducms/sdk";
 
 	import { Banner } from "@admin/components/ui/banner";
-	import { Button } from "@admin/components/ui/button";
+	import { Button } from "@riducms/ui";
 	import { adminRoutePatterns } from "@admin/core/routing/admin-paths";
 	import { getAdminRuntime } from "@admin/core/runtime/admin-runtime.svelte";
 	import AuthFrame from "@admin/features/auth/auth-frame.svelte";
 
 	const runtime = getAdminRuntime();
-	const location = $derived(useLocation());
-	const token = $derived(new URLSearchParams(location.search).get("token") ?? "");
+	const location = useLocation();
+
+	const token = $derived(new URLSearchParams(location.current.search).get("token") ?? "");
 	const authCollection = $derived(runtime.authCollection);
+	const owner = $derived(JSON.stringify([authCollection?.id, authCollection?.slug, token]));
+
 	let pending = $state(false);
 	let complete = $state(false);
 	let error = $state<string>();
+	let request: AbortController | undefined;
+
+	$effect.pre(() => {
+		// A retained route must reset its outcome before rendering a different token owner.
+		owner;
+		pending = false;
+		complete = false;
+		error = undefined;
+		return () => {
+			request?.abort();
+			request = undefined;
+		};
+	});
 
 	async function verify() {
-		if (authCollection === undefined || token === "") return;
+		if (authCollection === undefined || token === "" || pending || complete) return;
+		const requestOwner = owner;
+		const activeRequest = new AbortController();
+		request = activeRequest;
+		const current = () => request === activeRequest && requestOwner === owner;
+
 		pending = true;
 		error = undefined;
+
 		try {
-			await runtime.client.verifyEmail(authCollection.slug, token);
+			await runtime.client.verifyEmail(authCollection.slug, token, {
+				signal: activeRequest.signal,
+			});
+			if (!current()) return;
 			complete = true;
 		} catch (cause) {
+			if (!current()) return;
 			error =
 				cause instanceof RiduError ? cause.message : runtime.i18n.t("auth:emailVerificationFailed");
 		} finally {
-			pending = false;
+			if (current()) {
+				request = undefined;
+				pending = false;
+			}
 		}
 	}
 </script>
 
 <AuthFrame>
-	<div class="grid gap-5">
-		<h1 class="text-[32px] leading-tight font-medium tracking-[-0.025em] text-foreground">
+	<div class="ridu-auth__stack">
+		<h1 class="ridu-auth__heading">
 			{runtime.i18n.t("auth:verifyYourEmail")}
 		</h1>
 		{#if complete}
 			<Banner>{runtime.i18n.t("auth:emailVerified")}</Banner>
-			<Link
-				class="w-fit text-[12.5px] text-foreground underline underline-offset-2 hover:text-foreground-muted"
-				to={adminRoutePatterns.login}
-			>
+			<Link class="ridu-auth__link" to={adminRoutePatterns.login}>
 				{runtime.i18n.t("auth:backToLogin")}
 			</Link>
 		{:else if token === ""}
 			<Banner tone="destructive">{runtime.i18n.t("auth:missingVerificationToken")}</Banner>
 		{:else}
-			<p class="text-[13.5px] leading-5.5 text-foreground-muted">
+			<p class="ridu-auth__description">
 				{runtime.i18n.t("auth:verifyDescription")}
 			</p>
-			{#if error !== undefined}<Banner tone="destructive">{error}</Banner>{/if}
-			<Button class="h-10 w-full" size="lg" onclick={verify} disabled={pending}>
+			{#if error !== undefined}
+				<Banner tone="destructive">{error}</Banner>
+			{/if}
+			<Button
+				class="ridu-auth__submit"
+				size="lg"
+				onclick={verify}
+				disabled={pending}
+				aria-busy={pending}
+			>
 				{pending ? runtime.i18n.t("auth:verifying") : runtime.i18n.t("auth:verifyEmail")}
 			</Button>
 		{/if}

package/src/features/bulk-edit/bulk-edit-fields.ts

@@ -0,0 +1,23 @@
+import type { SchemaField } from "@riducms/protocol";
+
+import { initialFormValues, type FormValues } from "@admin/core/forms/form-schema";
+
+/** Initialize each selected scalar so clearing it remains an explicit bulk patch. */
+export function initialBulkEditValues(
+	fields: readonly SchemaField[],
+	current: Readonly<FormValues> = {}
+): FormValues {
+	const values = initialFormValues(fields, current as FormValues);
+	for (const field of fields) {
+		if (field.category !== "scalar" || Object.hasOwn(values, field.name)) continue;
+		values[field.name] = emptyScalarValue(field);
+	}
+	return values;
+}
+
+function emptyScalarValue(field: SchemaField): unknown {
+	if (field.type === "checkbox") return false;
+	if (field.type === "number" || field.type === "point") return null;
+	if (field.type === "select" && field.select?.hasMany) return [];
+	return "";
+}

package/src/features/bulk-edit/bulk-edit.scss

@@ -0,0 +1,152 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-bulk-edit-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		@include ui.confirmation-overlay;
+	}
+
+	.ridu-bulk-edit-drawer {
+		--bulk-edit-slide: 60px;
+		position: fixed;
+		inset-block: 0;
+		inset-inline: var(--admin-gutter) 0;
+		z-index: 50;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) 300px;
+		background: var(--background);
+		color: var(--foreground);
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		outline: none;
+		animation: ridu-bulk-edit-in 200ms linear;
+
+		&[dir="rtl"] {
+			--bulk-edit-slide: -60px;
+		}
+
+		&[data-state="closed"] {
+			animation: ridu-bulk-edit-out 200ms linear;
+		}
+	}
+
+	.ridu-bulk-edit-main {
+		min-width: 0;
+		overflow: auto;
+		padding: 40px var(--admin-gutter);
+	}
+
+	.ridu-bulk-edit-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 20px;
+		margin-bottom: 20px;
+	}
+
+	.ridu-bulk-edit-title {
+		margin: 0;
+		font-size: 26px;
+		font-weight: 500;
+		line-height: 32px;
+		overflow-wrap: anywhere;
+	}
+
+	.ridu-bulk-edit-close {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 32px;
+		height: 32px;
+		border: 0;
+		padding: 0;
+		background: none;
+		color: inherit;
+		cursor: pointer;
+
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		svg {
+			width: 24px;
+			height: 24px;
+			stroke-width: 1px;
+		}
+	}
+
+	.ridu-bulk-edit-fields {
+		margin-top: 24px;
+	}
+
+	.ridu-bulk-edit-sidebar {
+		display: flex;
+		align-items: flex-start;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+		align-content: flex-start;
+		gap: 10px;
+		border-inline-start: 1px solid var(--border);
+		padding: 40px 20px;
+		overflow: auto;
+	}
+
+	.ridu-bulk-edit-description {
+		@include ui.visually-hidden;
+	}
+
+	.ridu-bulk-field-picker {
+		display: grid;
+		gap: 6px;
+		min-width: 0;
+
+		.ridu-combobox-tag {
+			font-size: 13px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		.ridu-bulk-edit-drawer {
+			inset-inline: 0;
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: minmax(0, 1fr) auto;
+		}
+
+		.ridu-bulk-edit-main {
+			padding-block: 24px;
+		}
+
+		.ridu-bulk-edit-sidebar {
+			border-inline-start: 0;
+			border-top: 1px solid var(--border);
+			padding: 16px var(--admin-gutter);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-bulk-edit-drawer[data-state] {
+			animation: none;
+		}
+	}
+}
+
+@keyframes ridu-bulk-edit-in {
+	from {
+		transform: translateX(var(--bulk-edit-slide));
+		opacity: 0;
+	}
+}
+
+@keyframes ridu-bulk-edit-out {
+	to {
+		transform: translateX(var(--bulk-edit-slide));
+		opacity: 0;
+	}
+}

package/src/features/bulk-edit/field-picker.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { SchemaField } from "@riducms/protocol";
+	import { flushSync } from "svelte";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
+	import XIcon from "~icons/lucide/x";
+
+	import {
+		Combobox,
+		ComboboxContent,
+		ComboboxInput,
+		ComboboxItem,
+		ComboboxPortal,
+		ComboboxTrigger,
+		ComboboxViewport,
+	} from "@admin/components/ui/combobox";
+	import "@admin/components/ui/combobox/combobox.scss";
+	import "@admin/features/bulk-edit/bulk-edit.scss";
+
+	let {
+		fields,
+		value,
+		onValueChange,
+		disabled = false,
+	}: {
+		fields: readonly SchemaField[];
+		value: string[];
+		onValueChange: (paths: string[]) => void;
+		disabled?: boolean;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	const id = $props.id();
+	let anchor = $state<HTMLDivElement | null>(null);
+	// Only the remove handler reads this DOM binding.
+	// svelte-ignore non_reactive_update
+	let input: HTMLInputElement | null = null;
+	let open = $state(false);
+	let query = $state("");
+
+	const options = $derived(
+		fields.map((field) => ({
+			value: field.path,
+			label: i18n.text(field.admin.label, field.admin.labelTranslations),
+		}))
+	);
+	const available = $derived(
+		options.filter(
+			(option) =>
+				!value.includes(option.value) &&
+				option.label
+					.toLocaleLowerCase(i18n.language)
+					.includes(query.toLocaleLowerCase(i18n.language))
+		)
+	);
+	const selected = $derived(
+		value.flatMap((path) => options.find((option) => option.value === path) ?? [])
+	);
+
+	$effect(() => {
+		if (disabled) changeOpen(false);
+	});
+
+	function changeOpen(next: boolean) {
+		open = next && !disabled;
+		if (!open) query = "";
+	}
+
+	function select(next: string[]) {
+		if (disabled) return;
+		onValueChange(next);
+		changeOpen(false);
+	}
+
+	function remove(path?: string) {
+		if (disabled) return;
+		onValueChange(path === undefined ? [] : value.filter((item) => item !== path));
+		query = "";
+		input?.focus();
+	}
+</script>
+
+<div class="ridu-bulk-field-picker">
+	<label for={id}>{i18n.t("collections:selectFieldsToEdit")}</label>
+	<Combobox
+		type="multiple"
+		{value}
+		onValueChange={select}
+		inputValue={query}
+		items={options}
+		bind:open={() => open, changeOpen}
+		{disabled}
+		allowDeselect={false}
+		loop
+	>
+		<div bind:this={anchor} class="ridu-combobox" data-disabled={disabled}>
+			<div class="ridu-combobox-value">
+				{#each selected as option (option.value)}
+					<span class="ridu-combobox-tag">
+						{option.label}
+						<button
+							type="button"
+							class="ridu-combobox-icon"
+							{disabled}
+							aria-label={i18n.t("fields:remove", { label: option.label })}
+							onclick={() => remove(option.value)}
+						>
+							<XIcon />
+						</button>
+					</span>
+				{/each}
+				<ComboboxInput
+					{id}
+					bind:ref={input}
+					class="ridu-combobox-input"
+					autocomplete="off"
+					autocorrect="off"
+					autocapitalize="none"
+					spellcheck={false}
+					placeholder={value.length === 0 ? i18n.t("collections:selectFieldsPlaceholder") : ""}
+					onpointerdown={() => changeOpen(true)}
+					oninput={(event) => {
+						const value = event.currentTarget.value;
+						// Bits highlights immediately after this callback. Filter first so it
+						// cannot retain a removed option as its keyboard navigation origin.
+						flushSync(() => {
+							query = value;
+							changeOpen(true);
+						});
+					}}
+				>
+					{#snippet child({ props })}
+						<!-- Bits tracks picked labels internally; this input only displays the search. -->
+						<input {...props} value={query} />
+					{/snippet}
+				</ComboboxInput>
+			</div>
+			{#if value.length > 0}
+				<button
+					type="button"
+					class="ridu-combobox-icon"
+					{disabled}
+					aria-label={i18n.t("general:clearSelection")}
+					onclick={() => remove()}
+				>
+					<XIcon />
+				</button>
+			{/if}
+			<ComboboxTrigger
+				type="button"
+				class="ridu-combobox-icon ridu-combobox-trigger"
+				aria-label={i18n.t("collections:selectFieldsToEdit")}
+			>
+				<ChevronDownIcon />
+			</ComboboxTrigger>
+		</div>
+		<ComboboxPortal>
+			<ComboboxContent
+				customAnchor={anchor}
+				sideOffset={0}
+				align="start"
+				class="ridu-combobox-popup"
+			>
+				<ComboboxViewport>
+					{#each available as option (option.value)}
+						<ComboboxItem value={option.value} label={option.label} class="ridu-combobox-option">
+							{option.label}
+						</ComboboxItem>
+					{:else}
+						<p class="ridu-combobox-message">{i18n.t("collections:noFieldsFound")}</p>
+					{/each}
+				</ComboboxViewport>
+			</ComboboxContent>
+		</ComboboxPortal>
+	</Combobox>
+</div>

package/src/features/collections/bulk/bulk-actions.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+
+	import { getCollectionList } from "@admin/features/collections/collection-list.svelte";
+
+	let {
+		onEdit,
+		onRequestPublish,
+		onRequestUnpublish,
+		onRequestDelete,
+		onRequestRestore,
+		onRequestDeletePermanent,
+	}: {
+		onEdit: () => void;
+		onRequestPublish: () => void;
+		onRequestUnpublish: () => void;
+		onRequestDelete: () => void;
+		onRequestRestore: () => void;
+		onRequestDeletePermanent: () => void;
+	} = $props();
+
+	const list = getCollectionList();
+	const i18n = getAdminI18n();
+	const { controller } = list;
+
+	const { trashOnly } = $derived(list);
+	const versioned = $derived(list.collection?.capabilities.versions === true);
+	const hasBulkEditableFields = $derived(list.bulkEditableFields.length > 0);
+
+	const {
+		bulkPending,
+		canBulkDelete,
+		canBulkDeletePermanent,
+		canBulkPublish,
+		canBulkRestore,
+		canBulkUnpublish,
+		canBulkUpdate,
+		canSelectAllMatches,
+		pagination,
+		selectedIDs,
+		selectionLimitExceeded,
+		selectionLimit,
+		selectionPending,
+		showSelectAllMatches,
+	} = $derived(controller);
+</script>
+
+{#if selectedIDs.size > 0}
+	<div class="ridu-list-selection" role="region" aria-label={i18n.t("collections:bulkActions")}>
+		<button
+			type="button"
+			class="ridu-list__text-action"
+			onclick={controller.clearSelection}
+			aria-label={i18n.t("collections:clearSelection")}
+		>
+			<span role="status" aria-live="polite">
+				{i18n.t("collections:selected", { count: selectedIDs.size })}
+			</span>
+		</button>
+		{#if showSelectAllMatches}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				aria-disabled={selectionPending || selectionLimitExceeded || !canSelectAllMatches}
+				title={selectionLimitExceeded
+					? i18n.t("collections:selectionLimitDescription", {
+							maximum: i18n.formatNumber(selectionLimit),
+						})
+					: undefined}
+				onclick={controller.selectAllMatches}
+			>
+				{selectionPending
+					? i18n.t("collections:selecting")
+					: selectionLimitExceeded
+						? i18n.t("collections:selectAllUnavailable", {
+								maximum: i18n.formatNumber(selectionLimit),
+							})
+						: canSelectAllMatches
+							? i18n.t("collections:selectAll", {
+									count: i18n.formatNumber(pagination.totalDocs),
+								})
+							: i18n.t("collections:allSelected", {
+									count: i18n.formatNumber(pagination.totalDocs),
+								})}
+			</button>
+		{/if}
+		{#if trashOnly && canBulkRestore}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				disabled={bulkPending || selectionPending}
+				onclick={onRequestRestore}
+			>
+				{i18n.t("documents:restore")}
+			</button>
+		{/if}
+		{#if trashOnly && canBulkDeletePermanent}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				disabled={bulkPending || selectionPending}
+				onclick={onRequestDeletePermanent}
+			>
+				{i18n.t("general:delete")}
+			</button>
+		{/if}
+		{#if !trashOnly && hasBulkEditableFields && canBulkUpdate}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				disabled={bulkPending || selectionPending}
+				onclick={onEdit}
+			>
+				{i18n.t("general:edit")}
+			</button>
+		{/if}
+		{#if !trashOnly && versioned && canBulkPublish}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				disabled={bulkPending || selectionPending}
+				onclick={onRequestPublish}
+			>
+				{i18n.t("documents:publish")}
+			</button>
+		{/if}
+		{#if !trashOnly && versioned && canBulkUnpublish}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				disabled={bulkPending || selectionPending}
+				onclick={onRequestUnpublish}
+			>
+				{i18n.t("documents:unpublish")}
+			</button>
+		{/if}
+		{#if !trashOnly && canBulkDelete}
+			<button
+				type="button"
+				class="ridu-list__text-action"
+				disabled={bulkPending || selectionPending}
+				onclick={onRequestDelete}
+			>
+				{i18n.t("general:delete")}
+			</button>
+		{/if}
+	</div>
+{/if}