@riducms/admin 0.2.2 → 0.3.0

package/src/features/versions/version-history.scss

@@ -0,0 +1,444 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-versions {
+		width: 100%;
+		min-width: 0;
+		font-size: var(--font-size-body);
+		line-height: var(--line-height-body);
+		&__header {
+			border-bottom: 1px solid var(--control-border);
+		}
+		&__count {
+			margin-inline-start: 7px;
+			padding: 0 4px;
+			border-radius: 2px;
+			background: var(--pill-surface);
+			font-size: 12px;
+			font-weight: 400;
+		}
+		&__list {
+			padding: 15px var(--admin-gutter) 80px;
+		}
+		&__message {
+			display: grid;
+			justify-items: start;
+			gap: 20px;
+			padding: 30px var(--admin-gutter);
+		}
+		&__empty {
+			padding-block: 30px;
+			color: var(--foreground-muted);
+		}
+		&__table-scroll {
+			overflow-x: auto;
+		}
+		&__table {
+			th {
+				height: 54px;
+			}
+			th,
+			td {
+				padding-block: 12px;
+			}
+			th:first-child {
+				width: 38%;
+				min-width: 270px;
+			}
+			th:nth-child(2) {
+				width: 26%;
+			}
+		}
+		&__select {
+			padding: 0;
+			border: 0;
+			background: none;
+			color: inherit;
+			font: inherit;
+			text-decoration: underline;
+			text-underline-offset: 2px;
+			cursor: pointer;
+		}
+	}
+
+	.ridu-version-status {
+		display: inline-flex;
+		align-items: center;
+		padding: 2px 8px;
+		border-radius: 2px;
+		color: var(--foreground);
+		background: var(--pill-surface);
+		white-space: nowrap;
+		font-size: 12px;
+		line-height: 20px;
+	}
+	.ridu-version-status--published {
+		color: var(--status-success-foreground);
+		background: color-mix(in srgb, var(--status-success-surface), var(--status-success-border));
+	}
+
+	.ridu-version-comparison {
+		&__toolbar {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 20px;
+			padding: 16px var(--admin-gutter);
+			border-bottom: 1px solid var(--control-border);
+		}
+		h2 {
+			margin: 0;
+			font-weight: 400;
+			font-size: 18px;
+			line-height: 32px;
+		}
+		&__options {
+			display: flex;
+			align-items: center;
+			gap: 20px;
+		}
+		&__options label,
+		&__locale-menu label {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			cursor: pointer;
+		}
+		&__locales {
+			display: flex;
+			align-items: center;
+			gap: 5px;
+			border: 0;
+			border-radius: 2px;
+			padding: 2px 8px;
+			color: var(--foreground-muted);
+			background: var(--pill-surface);
+			font: inherit;
+			cursor: pointer;
+		}
+		&__locale-menu {
+			display: grid;
+			gap: 12px;
+			padding: 16px;
+		}
+		&__controls {
+			position: relative;
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+			gap: 20px;
+			border-bottom: 1px solid var(--control-border);
+			padding: 16px var(--admin-gutter);
+		}
+		&__controls::after {
+			content: "";
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: 50%;
+			width: 1px;
+			background: var(--control-border);
+			pointer-events: none;
+		}
+		&__from,
+		&__to {
+			min-width: 0;
+		}
+		&__caption {
+			display: flex;
+			justify-content: space-between;
+			gap: 10px;
+			margin-bottom: 5px;
+			font-size: 12px;
+			> span:last-child {
+				color: var(--foreground-muted);
+			}
+		}
+		&__select {
+			width: 100%;
+			min-height: 40px;
+			height: auto;
+			text-align: start;
+			justify-content: flex-start;
+			gap: 10px;
+			.ridu-select__chevron {
+				margin-inline-start: auto;
+				flex-shrink: 0;
+			}
+		}
+		&__date {
+			color: var(--foreground-muted);
+			font-size: 12px;
+		}
+		&__current {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			gap: 10px;
+			min-height: 40px;
+			padding: 7px 12px;
+			background: var(--background-surface);
+		}
+		&__current-label {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+		&__restore {
+			display: flex;
+			align-items: stretch;
+			flex-shrink: 0;
+			.ridu-button {
+				min-height: 26px;
+				height: auto;
+				padding: 3px 7px;
+				font-size: 12px;
+				line-height: 20px;
+				white-space: nowrap;
+			}
+		}
+		&__restore-menu {
+			border-inline-start: 1px solid var(--background);
+			border-start-start-radius: 0;
+			border-end-start-radius: 0;
+			width: 26px;
+		}
+	}
+
+	.ridu-version-diff {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		padding: 20px var(--admin-gutter) 80px;
+		&::after {
+			content: "";
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: 50%;
+			width: 1px;
+			background: var(--control-border);
+			pointer-events: none;
+		}
+		&__label {
+			margin-bottom: 5px;
+			font-weight: 500;
+			font-size: 13px;
+		}
+		&__locale {
+			margin-inline-start: 8px;
+			font-size: 11px;
+			font-weight: 400;
+			padding: 2px 5px;
+			background: var(--pill-surface);
+			border-radius: 2px;
+		}
+		&__values {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		}
+		&__value {
+			min-width: 0;
+			padding: 10px;
+			background: var(--background-surface);
+			overflow-wrap: anywhere;
+			min-height: 40px;
+			p {
+				white-space: pre-wrap;
+				margin: 0;
+				min-height: 20px;
+			}
+			pre {
+				font-family: var(--font-mono);
+				font-size: 12px;
+				overflow-x: auto;
+				white-space: pre-wrap;
+			}
+			del {
+				color: var(--status-error-action);
+				background: var(--status-error-border);
+			}
+			ins {
+				color: var(--status-success-foreground);
+				background: var(--status-success-border);
+				text-decoration: none;
+			}
+		}
+		&__value--removed {
+			background: var(--status-error-surface);
+		}
+		&__value--added {
+			background: var(--status-success-surface);
+		}
+		&__value--references {
+			background: none;
+			display: flex;
+			flex-direction: column;
+			gap: 5px;
+			padding: 0;
+			padding-inline-end: 10px;
+			&:last-child {
+				padding-inline: 10px 0;
+			}
+		}
+		&__reference {
+			min-height: 36px;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			padding: 6px 10px;
+			border: 1px solid var(--control-border);
+			border-radius: 3px;
+			white-space: normal;
+			strong {
+				font-weight: 500;
+			}
+			img {
+				width: 26px;
+				height: 26px;
+				object-fit: contain;
+			}
+		}
+		&__value--removed &__reference {
+			border-color: var(--status-error-border);
+			background: var(--status-error-surface);
+		}
+		&__value--added &__reference {
+			border-color: var(--status-success-border);
+			background: var(--status-success-surface);
+		}
+		&__reference-type {
+			font-size: 12px;
+			background: var(--pill-surface);
+			padding: 0 3px;
+			border-radius: 2px;
+		}
+		&__group-label {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			background: none;
+			color: inherit;
+			font: inherit;
+			font-size: 16px;
+			border: 0;
+			padding: 0;
+			cursor: pointer;
+			margin-bottom: 15px;
+			svg {
+				width: 16px;
+				height: 16px;
+			}
+			list-style: none;
+			&::-webkit-details-marker {
+				display: none;
+			}
+		}
+		&__group:not([open]) > &__group-label svg {
+			transform: rotate(-90deg);
+		}
+		&__group-content {
+			display: flex;
+			flex-direction: column;
+			gap: 20px;
+			padding-inline: 20px;
+		}
+		&__empty {
+			color: var(--foreground-muted);
+		}
+	}
+
+	.ridu-version-picker-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 50;
+		background: var(--media-overlay);
+		backdrop-filter: blur(5px);
+	}
+	.ridu-version-picker {
+		position: fixed;
+		inset-block: 0;
+		inset-inline: var(--admin-gutter) 0;
+		z-index: 50;
+		padding: 48px var(--admin-gutter);
+		overflow: auto;
+		background: var(--background);
+		color: var(--foreground);
+		outline: none;
+		font-size: var(--font-size-body);
+		animation: ridu-version-picker-in 200ms ease-out;
+		header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 20px;
+			margin-bottom: 20px;
+		}
+		h2 {
+			font-size: 24px;
+			font-weight: 500;
+			margin: 0;
+		}
+		&__close {
+			padding: 0;
+			border: 1px solid currentColor;
+			background: none;
+			color: inherit;
+			width: 28px;
+			height: 28px;
+			cursor: pointer;
+			svg {
+				width: 26px;
+				height: 26px;
+			}
+		}
+	}
+	.ridu-version-picker button:focus-visible,
+	.ridu-version-comparison button:focus-visible,
+	.ridu-version-diff summary:focus-visible,
+	.ridu-versions__select:focus-visible {
+		@include ui.focus-outline;
+	}
+	@keyframes ridu-version-picker-in {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-version-picker {
+			animation: none;
+		}
+	}
+	@media (max-width: 768px) {
+		.ridu-version-comparison__toolbar {
+			align-items: flex-start;
+			flex-direction: column;
+			gap: 8px;
+		}
+		.ridu-version-comparison__caption {
+			flex-direction: column;
+			gap: 0;
+		}
+		.ridu-version-comparison__controls {
+			gap: 12px;
+		}
+		.ridu-version-comparison__current {
+			padding: 8px;
+		}
+		.ridu-version-comparison__restore {
+			flex-wrap: wrap;
+		}
+		.ridu-version-diff__group-content {
+			padding-inline: 10px;
+		}
+		.ridu-version-picker {
+			inset-inline-start: 10px;
+			padding: 24px 20px;
+		}
+	}
+}

package/src/features/versions/version-history.ts

@@ -0,0 +1,45 @@
+import type { AdminDocument, AdminVersion } from "@admin/core/api/admin-client";
+import type { AdminI18n } from "@riducms/translations";
+import { formatAdminDateTime } from "@admin/core/i18n/format-admin-date-time";
+import { listPageSizes, type ListPageSize } from "@admin/features/collections/list-workspace";
+
+export function versionStatus(version: AdminVersion, document: AdminDocument | undefined) {
+	const current = version.Revision === document?._revision;
+	if (version.Status === "draft") return current ? "currentDraft" : "draft";
+	return current && document?._status === "published"
+		? "currentlyPublished"
+		: "previouslyPublished";
+}
+
+export function versionDate(value: string, i18n: AdminI18n) {
+	return formatAdminDateTime(value, i18n);
+}
+
+export function versionListPage(versions: readonly AdminVersion[], search: URLSearchParams) {
+	const limitValue = Number(search.get("limit"));
+	const limit: ListPageSize = listPageSizes.find((size) => size === limitValue) ?? 10;
+	const totalPages = Math.max(1, Math.ceil(versions.length / limit));
+	const requested = Number(search.get("page"));
+	const page = Math.min(
+		totalPages,
+		Number.isSafeInteger(requested) && requested > 0 ? requested : 1
+	);
+	const sort = search.get("sort") === "updatedAt" ? "updatedAt" : "-updatedAt";
+	const ordered = [...versions].sort((a, b) => {
+		const difference =
+			new Date(a.CreatedAt).valueOf() - new Date(b.CreatedAt).valueOf() || a.Revision - b.Revision;
+		return sort === "updatedAt" ? difference : -difference;
+	});
+	return {
+		docs: ordered.slice((page - 1) * limit, page * limit),
+		sort,
+		pagination: {
+			page,
+			limit,
+			totalDocs: versions.length,
+			totalPages,
+			hasPrevPage: page > 1,
+			hasNextPage: page < totalPages,
+		},
+	};
+}

package/src/features/versions/version-table.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { AdminDocument, AdminVersion } from "@admin/core/api/admin-client";
+	import SortHeading from "@admin/features/collections/controls/sort-heading.svelte";
+	import ListPagination from "@admin/features/collections/controls/list-pagination.svelte";
+	import {
+		versionDate,
+		versionListPage,
+		versionStatus,
+	} from "@admin/features/versions/version-history";
+	import "@admin/components/data/list-table.scss";
+
+	let {
+		versions,
+		document,
+		search,
+		onQueryChange,
+		versionPath,
+		onSelect,
+	}: {
+		versions: readonly AdminVersion[];
+		document?: AdminDocument;
+		search: URLSearchParams;
+		onQueryChange: (changes: Record<string, string>) => void;
+		versionPath?: (version: AdminVersion) => string;
+		onSelect?: (version: AdminVersion) => void;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	const view = $derived(versionListPage(versions, search));
+</script>
+
+{#if versions.length === 0}
+	<p class="ridu-versions__empty">{i18n.t("versions:noRevisions")}</p>
+{:else}
+	<div class="ridu-versions__table-scroll">
+		<table class="ridu-list-table ridu-versions__table" aria-label={i18n.t("versions:history")}>
+			<thead>
+				<tr>
+					<SortHeading
+						column={{ path: "updatedAt", label: i18n.t("versions:updatedAt") }}
+						sort={view.sort}
+						onSort={(path, descending) =>
+							onQueryChange({ sort: descending ? `-${path}` : path, page: "1" })}
+					/>
+					<th scope="col">{i18n.t("versions:versionID")}</th>
+					<th scope="col">{i18n.t("versions:status")}</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each view.docs as version (version.ID)}
+					{const status = $derived(versionStatus(version, document))}
+					<tr>
+						<td>
+							{#if onSelect}
+								<button
+									type="button"
+									class="ridu-versions__select"
+									onclick={() => onSelect?.(version)}
+								>
+									{versionDate(version.CreatedAt, i18n)}
+								</button>
+							{:else if versionPath}
+								<Link to={versionPath(version)}>{versionDate(version.CreatedAt, i18n)}</Link>
+							{/if}
+						</td>
+						<td>{version.ID}</td>
+						<td>
+							<span
+								class={[
+									"ridu-version-status",
+									status === "currentlyPublished" && "ridu-version-status--published",
+								]}
+							>
+								{i18n.t(`versions:${status}`)}
+							</span>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+
+	<ListPagination
+		pagination={view.pagination}
+		pageSize={view.pagination.limit}
+		onPageChange={(page) => onQueryChange({ page: String(page) })}
+		onPageSizeChange={(limit) => onQueryChange({ limit: String(limit), page: "1" })}
+	/>
+{/if}

package/src/fields/embedded-schema-draft-editor.scss

@@ -0,0 +1,48 @@
+@use "@riducms/ui/styles.scss";
+
+@layer ridu.components {
+	.ridu-sheet.ridu-embedded-draft {
+		width: 100%;
+		max-width: 42rem;
+	}
+
+	.ridu-embedded-draft__header,
+	.ridu-embedded-draft__actions {
+		padding: 16px 24px;
+	}
+
+	.ridu-embedded-draft__header {
+		border-bottom: 1px solid var(--control-border);
+	}
+
+	.ridu-embedded-draft__name {
+		margin-top: 12px;
+	}
+
+	.ridu-embedded-draft__content {
+		min-height: 0;
+		flex: 1;
+		overflow-y: auto;
+		padding: 20px 24px;
+	}
+
+	.ridu-embedded-draft__error {
+		margin: 0 0 16px;
+		color: var(--destructive);
+	}
+
+	.ridu-embedded-draft__error p {
+		margin: 0;
+	}
+
+	.ridu-embedded-draft__error p + p {
+		margin-top: 4px;
+	}
+
+	.ridu-embedded-draft__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+		border-top: 1px solid var(--control-border);
+	}
+}