@riducms/admin 0.2.3 → 0.3.0

package/src/fields/nested/block-picker.scss

@@ -0,0 +1,128 @@
+@use "@riducms/ui/styles.scss" as ui;
+@layer ridu.components {
+	.ridu-block-picker-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 70;
+		background: var(--media-overlay);
+		backdrop-filter: blur(4px);
+	}
+	.ridu-block-picker {
+		position: fixed;
+		inset-block: 0;
+		inset-inline-end: 0;
+		inset-inline-start: min(calc(var(--drawer-depth) * var(--admin-gutter)), 40vw);
+		z-index: 70;
+		padding: 40px var(--admin-gutter);
+		overflow-y: auto;
+		outline: none;
+		background: var(--background);
+		color: var(--foreground);
+		animation: ridu-block-picker-in 200ms ease-out;
+	}
+	.ridu-block-picker__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 20px;
+		margin-bottom: 30px;
+	}
+	.ridu-block-picker__title {
+		font-size: 26px;
+		line-height: 32px;
+		font-weight: 500;
+		margin: 0;
+	}
+	.ridu-block-picker__close {
+		display: grid;
+		place-items: center;
+		width: 40px;
+		height: 40px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		svg {
+			width: 24px;
+			height: 24px;
+			stroke-width: 1;
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-block-picker__description {
+		@include ui.visually-hidden;
+	}
+	.ridu-block-picker__search {
+		position: relative;
+		margin-bottom: 30px;
+		> svg {
+			position: absolute;
+			inset-inline-start: 12px;
+			top: 12px;
+			width: 16px;
+			height: 16px;
+			color: var(--foreground-muted);
+		}
+		input {
+			padding-inline-start: 36px;
+		}
+	}
+	.ridu-block-picker__cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
+		gap: 20px;
+		align-items: start;
+	}
+	.ridu-block-picker__card {
+		@include ui.control-surface;
+		padding: 10px;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		max-width: 320px;
+		img {
+			display: block;
+			width: 100%;
+			aspect-ratio: 231 / 151;
+			object-fit: cover;
+		}
+		span {
+			display: block;
+			padding: 15px 10px 5px;
+			font-weight: 600;
+		}
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-block-picker__empty {
+		grid-column: 1 / -1;
+		margin: 0;
+		padding: 20px;
+		border: 1px dashed var(--control-border);
+		border-radius: var(--control-radius);
+		color: var(--foreground-muted);
+		text-align: center;
+	}
+	@keyframes ridu-block-picker-in {
+		from {
+			opacity: 0;
+			translate: 40px;
+		}
+		to {
+			opacity: 1;
+			translate: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-block-picker {
+			animation: none;
+		}
+	}
+}

package/src/fields/nested/block-picker.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	import { getAdminI18n } from "@riducms/plugin";
+	import type { SchemaBlockType } from "@riducms/protocol";
+	import { Input } from "@riducms/ui";
+	import { provideDrawerDepth } from "@admin/components/ui/drawer/drawer-depth";
+	import SearchIcon from "~icons/lucide/search";
+	import XIcon from "~icons/lucide/x";
+	import placeholder from "@admin/fields/nested/block-placeholder.svg";
+	import "@admin/fields/nested/block-picker.scss";
+
+	let {
+		open,
+		label,
+		blocks,
+		onOpenChange,
+		onSelect,
+	}: {
+		open: boolean;
+		label: string;
+		blocks: readonly SchemaBlockType[];
+		onOpenChange: (open: boolean) => void;
+		onSelect: (slug: string) => void;
+	} = $props();
+
+	const i18n = getAdminI18n();
+	const depth = provideDrawerDepth();
+	let query = $state("");
+	const visible = $derived(
+		blocks.filter((block) =>
+			block.labels.singular
+				.toLocaleLowerCase(i18n.language)
+				.includes(query.trim().toLocaleLowerCase(i18n.language))
+		)
+	);
+</script>
+
+<Dialog.Root {open} {onOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="ridu-block-picker-overlay" />
+		<Dialog.Content
+			class="ridu-block-picker"
+			style={`--drawer-depth: ${depth}`}
+			dir={i18n.direction}
+		>
+			<header class="ridu-block-picker__header">
+				<Dialog.Title class="ridu-block-picker__title">
+					{i18n.t("fields:add", { label })}
+				</Dialog.Title>
+				<Dialog.Close class="ridu-block-picker__close" aria-label={i18n.t("general:close")}>
+					<XIcon />
+				</Dialog.Close>
+			</header>
+			<Dialog.Description class="ridu-block-picker__description">
+				{i18n.t("fields:chooseBlockFor", { label })}
+			</Dialog.Description>
+			<div class="ridu-block-picker__search">
+				<SearchIcon />
+				<Input
+					placeholder={i18n.t("fields:searchBlock")}
+					aria-label={i18n.t("fields:searchBlock")}
+					bind:value={query}
+				/>
+			</div>
+			<div class="ridu-block-picker__cards">
+				{#each visible as block (block.slug)}
+					<button
+						type="button"
+						class="ridu-block-picker__card"
+						onclick={() => onSelect(block.slug)}
+					>
+						<img src={placeholder} alt="" />
+						<span>{block.labels.singular}</span>
+					</button>
+				{:else}
+					<p class="ridu-block-picker__empty">{i18n.t("fields:noBlocks")}</p>
+				{/each}
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

package/src/fields/nested/block-placeholder.svg

@@ -0,0 +1,2 @@
+<!-- Adapted from Payload CMS DefaultBlockImage, MIT. See THIRD_PARTY_NOTICES.md. -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="151" preserveAspectRatio="xMidYMid slice" viewBox="0 0 231 151" width="231"><g clip-path="url(#block)"><rect fill="#D9D9D9" height="100%" rx="2" width="100%"/><rect fill="#BCBCBC" height="116.063" transform="rotate(52.0687 33.7051 79.3051)" width="85.8593" x="33.7051" y="79.3051"/><rect fill="#BCBCBC" height="116.063" transform="rotate(52.0687 86.1219 92.6272)" width="85.8593" x="86.1219" y="92.6272"/><circle cx="189" cy="45" fill="#BCBCBC" r="19"/><rect fill="#B8B8B8" height="5" rx="2.5" width="98" x="66" y="70"/><rect fill="#B8B8B8" height="5" rx="2.5" width="76" x="77" y="82"/></g><defs><clipPath id="block"><rect fill="white" height="151" width="231"/></clipPath></defs></svg>

package/src/fields/nested/nested-field.scss

@@ -0,0 +1,331 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-group-field,
+	.ridu-repeated-field {
+		display: grid;
+		min-width: 0;
+	}
+
+	.ridu-group-field {
+		gap: 20px;
+	}
+
+	.ridu-group-field__header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 12px;
+		border-bottom: 1px solid var(--control-border);
+		padding-bottom: 10px;
+	}
+
+	.ridu-group-field__heading,
+	.ridu-repeated-field__heading-wrap {
+		min-width: 0;
+	}
+
+	.ridu-group-field__title {
+		margin: 0;
+		color: var(--foreground);
+		font-size: 17px;
+		font-weight: 500;
+		line-height: 24px;
+	}
+
+	.ridu-group-field[data-invalid="true"] .ridu-group-field__title {
+		color: var(--destructive);
+	}
+
+	.ridu-group-field__status,
+	.ridu-repeated-field__status {
+		display: inline-block;
+		margin-top: 4px;
+	}
+
+	.ridu-nested-actions-trigger svg {
+		width: 16px;
+		height: 16px;
+	}
+
+	.ridu-nested-field__note {
+		margin: 0;
+		color: var(--foreground-muted);
+		font-family: var(--font-mono);
+		font-size: 10px;
+		line-height: 16px;
+	}
+
+	.ridu-repeated-field {
+		gap: 12px;
+	}
+
+	.ridu-repeated-field__header {
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 12px;
+	}
+
+	.ridu-repeated-field__heading {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin: 0;
+		font-size: 19px;
+		line-height: 28px;
+		font-weight: 500;
+		color: var(--foreground);
+	}
+
+	.ridu-repeated-field[data-invalid="true"] > .ridu-field-feedback .ridu-repeated-field__heading {
+		color: var(--destructive);
+	}
+
+	.ridu-error-count {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+		border: 0;
+		border-radius: 10px;
+		padding: 0 5px;
+		background: var(--field-error-surface);
+		color: var(--field-error-foreground);
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 18px;
+	}
+
+	button.ridu-error-count {
+		cursor: pointer;
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+
+	.ridu-repeated-field__actions,
+	.ridu-repeated-row__actions {
+		display: flex;
+		align-items: center;
+	}
+
+	.ridu-repeated-field__actions {
+		gap: 4px;
+	}
+
+	.ridu-repeated-field__header-action {
+		padding-inline: 6px;
+	}
+
+	.ridu-repeated-field__recovery {
+		margin: 0;
+		color: var(--destructive);
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	.ridu-repeated-field__rows {
+		display: grid;
+		gap: 12px;
+	}
+
+	.ridu-repeated-row-sortable {
+		position: relative;
+		display: grid;
+		min-width: 0;
+		&[data-dragging="true"] {
+			z-index: 1;
+		}
+		&[data-dnd-placeholder] {
+			opacity: 0.5;
+		}
+	}
+
+	.ridu-repeated-row {
+		display: grid;
+		overflow: hidden;
+		border: 1px solid var(--control-border);
+		border-radius: 4px;
+		background: var(--background);
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+		&[data-invalid="true"] {
+			border-color: var(--control-invalid-border);
+			> .ridu-repeated-row__header {
+				background: var(--control-invalid-surface);
+				color: var(--field-error-foreground);
+			}
+		}
+	}
+
+	.ridu-repeated-row__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		min-height: 40px;
+		padding: 8px 12px;
+		background: var(--control-surface);
+	}
+
+	.ridu-repeated-row__drag {
+		flex-shrink: 0;
+		color: var(--foreground-muted);
+		cursor: grab;
+		&:is(:hover, :focus-visible) {
+			--button-background: var(--background);
+			--button-color: var(--foreground);
+		}
+		&:active:not(:disabled) {
+			cursor: grabbing;
+		}
+		svg {
+			width: 14px;
+			height: 14px;
+		}
+	}
+
+	.ridu-repeated-row__heading {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+		flex: 1;
+		color: var(--foreground-muted);
+		font-size: 12.5px;
+		line-height: 20px;
+	}
+
+	.ridu-repeated-row__number {
+		flex-shrink: 0;
+		color: var(--foreground-muted);
+		font-family: var(--font-mono);
+		font-size: 10px;
+	}
+
+	.ridu-repeated-row__type {
+		flex-shrink: 0;
+		border-radius: 2px;
+		padding: 2px 6px;
+		background: var(--background);
+		color: var(--foreground);
+		font-size: 11px;
+		line-height: 16px;
+	}
+
+	.ridu-repeated-row__label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+		flex: 1;
+		color: var(--foreground);
+	}
+
+	.ridu-repeated-row__toggle {
+		order: 9999;
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 24px;
+		height: 24px;
+		border: 0;
+		border-radius: var(--control-radius);
+		padding: 0;
+		outline: none;
+		background: transparent;
+		color: var(--foreground-muted);
+		cursor: pointer;
+		&:hover {
+			background: var(--background);
+			color: var(--foreground);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		svg {
+			width: 14px;
+			height: 14px;
+			transition: transform 200ms ease;
+		}
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
+		}
+	}
+
+	.ridu-repeated-row__actions {
+		gap: 2px;
+	}
+
+	.ridu-repeated-row__remove-action,
+	.ridu-repeated-row__remove-action[data-highlighted] {
+		color: var(--destructive);
+	}
+
+	.ridu-repeated-row__content {
+		display: grid;
+		grid-template-rows: 1fr;
+		opacity: 1;
+		transition:
+			grid-template-rows 200ms ease-out,
+			opacity 200ms ease-out;
+		&[data-collapsed="true"] {
+			visibility: hidden;
+			grid-template-rows: 0fr;
+			opacity: 0;
+		}
+	}
+
+	.ridu-repeated-row__content-clip {
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.ridu-repeated-row__fields {
+		display: grid;
+		gap: 20px;
+		padding: 20px;
+	}
+
+	.ridu-repeated-field__add {
+		justify-self: start;
+		width: fit-content;
+		padding-inline: 0;
+		--button-color: var(--foreground-muted);
+		--button-hover-background: transparent;
+		--button-hover-color: var(--foreground);
+		svg {
+			width: 20px;
+			height: 20px;
+		}
+	}
+
+	.ridu-block-name {
+		min-width: 0;
+		flex: 1;
+	}
+
+	.ridu-block-name__input {
+		min-width: 0;
+		height: 32px;
+	}
+	.ridu-block-name__label {
+		@include ui.visually-hidden;
+	}
+
+	.ridu-block-name__localization {
+		margin: 4px 0 0;
+		color: var(--foreground-muted);
+		font-size: 12px;
+		line-height: 18px;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ridu-repeated-row__content,
+		.ridu-repeated-row__toggle svg {
+			transition: none;
+		}
+	}
+}