@riducms/admin 0.2.2 → 0.3.0

package/src/components/ui/combobox/combobox.scss

@@ -0,0 +1,163 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-combobox {
+		@include ui.control-surface;
+		display: flex;
+		align-items: center;
+		min-height: var(--control-height);
+		min-width: 0;
+		&:hover {
+			border-color: var(--control-border-hover);
+		}
+		&:focus-within {
+			border-color: var(--ring);
+		}
+		&[aria-invalid="true"] {
+			border-color: var(--control-invalid-border);
+		}
+		&[data-disabled="true"] {
+			opacity: 0.5;
+		}
+	}
+	.ridu-combobox-value {
+		position: relative;
+		min-width: 0;
+		flex: 1;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 5px;
+		padding-inline-start: var(--control-padding-inline);
+	}
+	.ridu-combobox-input {
+		min-width: 24px;
+		width: 0;
+		flex: 1;
+		height: calc(var(--control-height) - 2px);
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: var(--foreground);
+		font: inherit;
+		outline: 0;
+		box-shadow: none;
+		&::placeholder {
+			color: var(--ink-placeholder);
+		}
+	}
+	.ridu-combobox-value:has(.ridu-combobox-selection) .ridu-combobox-input {
+		color: transparent;
+		caret-color: var(--foreground);
+	}
+
+	.ridu-combobox-selection {
+		position: absolute;
+		inset-inline-start: var(--control-padding-inline);
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		max-width: calc(100% - 24px);
+		pointer-events: none;
+		span {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		button {
+			pointer-events: auto;
+		}
+	}
+	.ridu-combobox-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 24px;
+		height: 26px;
+		border: 0;
+		background: transparent;
+		color: var(--foreground-muted);
+		padding: 0;
+		cursor: pointer;
+		svg {
+			width: 14px;
+			height: 14px;
+		}
+		&:hover {
+			color: var(--foreground);
+		}
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+	.ridu-combobox-trigger {
+		margin-inline-end: 8px;
+	}
+	.ridu-combobox-add {
+		width: 40px;
+		height: calc(var(--control-height) - 2px);
+		border-inline-start: 1px solid var(--control-border);
+	}
+	.ridu-combobox-popup {
+		z-index: 80;
+		width: var(--bits-combobox-anchor-width);
+		max-height: min(320px, var(--bits-combobox-content-available-height));
+		overflow: auto;
+		background: var(--background-surface);
+		color: var(--foreground);
+		border: 1px solid var(--control-border);
+		border-radius: 0 0 var(--control-radius) var(--control-radius);
+		box-shadow: var(--shadow-popover);
+		outline: 0;
+	}
+	.ridu-combobox-option {
+		padding: 9px 14px;
+		cursor: pointer;
+		outline: none;
+		min-height: 36px;
+		&[data-highlighted] {
+			background: var(--control-surface-hover);
+		}
+		&[data-selected] {
+			background: var(--background-layer);
+		}
+		&[data-disabled] {
+			opacity: 0.5;
+		}
+	}
+	.ridu-combobox-message {
+		padding: 10px 14px;
+		color: var(--foreground-muted);
+		margin: 0;
+	}
+	.ridu-combobox-group {
+		margin: 0;
+		padding: 10px 14px 4px;
+		font-size: 12px;
+		color: var(--foreground-muted);
+	}
+	.ridu-combobox-browse {
+		display: flex;
+		gap: 8px;
+		width: 100%;
+		padding: 10px 14px;
+		border: 0;
+		background: transparent;
+		color: var(--foreground);
+		font: inherit;
+		cursor: pointer;
+		&:hover {
+			background: var(--control-surface-hover);
+		}
+	}
+	.ridu-combobox-tag {
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+		background: var(--background-layer);
+		padding-inline-start: 6px;
+		border-radius: 2px;
+		margin-block: 4px;
+	}
+}

package/src/components/ui/combobox/index.ts

@@ -0,0 +1,22 @@
+import { Combobox as _Combobox } from "bits-ui";
+
+// Done to reduce the compiled svelte output
+const Combobox = _Combobox.Root;
+const ComboboxInput = _Combobox.Input;
+const ComboboxTrigger = _Combobox.Trigger;
+const ComboboxPortal = _Combobox.Portal;
+const ComboboxContent = _Combobox.Content;
+const ComboboxViewport = _Combobox.Viewport;
+const ComboboxItem = _Combobox.Item;
+
+// Done to reduce the compiled svelte output
+//
+export {
+	Combobox,
+	ComboboxInput,
+	ComboboxTrigger,
+	ComboboxPortal,
+	ComboboxContent,
+	ComboboxViewport,
+	ComboboxItem,
+};

package/src/components/ui/date-value-control/date-value-calendar.svelte

@@ -1,37 +1,149 @@
 <script lang="ts">
-	import type { DateValue } from "@internationalized/date";
-
-	import { Calendar } from "@admin/components/ui/calendar";
+	import { Calendar, RadioGroup } from "bits-ui";
+	import {
+		toCalendarDateTime,
+		today,
+		getLocalTimeZone,
+		type DateValue,
+	} from "@internationalized/date";
+	import { getAdminI18n } from "@riducms/plugin";
+	import ChevronLeftIcon from "~icons/lucide/chevron-left";
+	import ChevronRightIcon from "~icons/lucide/chevron-right";
 
 	let {
 		value,
+		timeZone,
 		disabled = false,
 		readonly = false,
 		required = false,
 		locale,
 		calendarLabel,
+		withTime = false,
 		onValueChange,
 	}: {
 		value?: DateValue;
+		timeZone?: string;
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
 		locale: string;
 		calendarLabel: string;
+		withTime?: boolean;
 		onValueChange: (value: DateValue | undefined) => void;
 	} = $props();
+
+	const i18n = getAdminI18n();
+	const resolvedTimeZone = $derived(timeZone ?? i18n.timeZone ?? getLocalTimeZone());
+	const currentYear = $derived(today(resolvedTimeZone).year);
+	// Start on the selected date (or today in this control's timezone); navigation owns it thereafter.
+	// svelte-ignore state_referenced_locally
+	let placeholder = $state(value ?? today(resolvedTimeZone));
+	const years = $derived(
+		Array.from({ length: 201 }, (_, index) => (value?.year ?? currentYear) - 100 + index)
+	);
+	const selectedTime = $derived(
+		value && "hour" in value ? String(value.hour * 60 + value.minute) : ""
+	);
+	const times = $derived.by(() => {
+		const formatter = new Intl.DateTimeFormat(locale, {
+			hour: "numeric",
+			minute: "2-digit",
+			timeZone: "UTC",
+		});
+		return Array.from({ length: 48 }, (_, index) => {
+			const minutes = index * 30;
+			const date = new Date(Date.UTC(2000, 0, 1, Math.floor(minutes / 60), minutes % 60));
+			return {
+				value: String(minutes),
+				label: formatter.format(date),
+			};
+		});
+	});
+
+	function selectTime(minutes: string) {
+		if (disabled || readonly || minutes === "") return;
+		const date = toCalendarDateTime(value ?? today(resolvedTimeZone));
+		onValueChange(
+			date.set({ hour: Math.floor(Number(minutes) / 60), minute: Number(minutes) % 60 })
+		);
+	}
 </script>
 
-<Calendar
-	type="single"
-	{value}
-	{disabled}
-	{readonly}
-	preventDeselect={required}
-	initialFocus
-	fixedWeeks
-	captionLayout="dropdown"
-	{locale}
-	{calendarLabel}
-	onValueChange={(next) => onValueChange(next as DateValue | undefined)}
-/>
+<div class="ridu-date-picker">
+	<Calendar.Root
+		type="single"
+		bind:placeholder
+		{value}
+		{disabled}
+		{readonly}
+		preventDeselect={required}
+		initialFocus
+		fixedWeeks
+		weekdayFormat="short"
+		{locale}
+		{calendarLabel}
+		class="ridu-date-calendar"
+		{onValueChange}
+	>
+		{#snippet children({ months, weekdays })}
+			<Calendar.Header class="ridu-date-calendar__header">
+				<Calendar.PrevButton class="ridu-date-calendar__nav">
+					<ChevronLeftIcon />
+				</Calendar.PrevButton>
+				<Calendar.MonthSelect monthFormat="long" class="ridu-date-calendar__select" />
+				<Calendar.YearSelect {years} class="ridu-date-calendar__select" />
+				<Calendar.NextButton class="ridu-date-calendar__nav">
+					<ChevronRightIcon />
+				</Calendar.NextButton>
+			</Calendar.Header>
+			{#each months as month (month.value)}
+				<Calendar.Grid class="ridu-date-calendar__grid">
+					<Calendar.GridHead>
+						<Calendar.GridRow>
+							{#each weekdays as day, index (index)}
+								<Calendar.HeadCell>
+									{day.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as week (week)}
+							<Calendar.GridRow>
+								{#each week as date (date)}
+									<Calendar.Cell {date} month={month.value}>
+										<Calendar.Day class="ridu-date-calendar__day" />
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		{/snippet}
+	</Calendar.Root>
+	{#if withTime}
+		<div class="ridu-date-picker__time">
+			<span class="ridu-date-picker__time-label">{i18n.t("fields:time")}</span>
+			<RadioGroup.Root
+				class="ridu-date-picker__times"
+				value={selectedTime}
+				onValueChange={selectTime}
+				disabled={disabled || readonly}
+				aria-label={i18n.t("fields:time")}
+			>
+				{#each times as time (time.value)}
+					<RadioGroup.Item
+						value={time.value}
+						class="ridu-date-picker__time-option"
+						{@attach (element) => {
+							if (time.value === selectedTime) element.scrollIntoView({ block: "nearest" });
+						}}
+					>
+						{time.label}
+					</RadioGroup.Item>
+				{/each}
+			</RadioGroup.Root>
+		</div>
+	{/if}
+</div>

package/src/components/ui/date-value-control/date-value-control-loader.scss

@@ -0,0 +1,26 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-date-control-loader {
+		@include ui.control-surface;
+		display: flex;
+		align-items: center;
+		min-height: var(--control-height);
+		padding-inline: var(--control-padding-inline);
+		color: var(--foreground-muted);
+		font-size: var(--font-size-body);
+	}
+
+	.ridu-date-control-loader--failed {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 8px;
+		border-color: var(--control-invalid-border);
+		background: var(--control-invalid-surface);
+		color: var(--foreground);
+
+		p {
+			margin: 0;
+		}
+	}
+}

package/src/components/ui/date-value-control/date-value-control-loader.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import type { SchemaDateFormat } from "@riducms/protocol";
-	import { fieldControlARIA } from "@riducms/ui";
-	import type { Component } from "svelte";
+	import { fieldControlARIA, Button } from "@riducms/ui";
+	import { getAdminI18n } from "@riducms/plugin";
+
+	import { preparedAdminModule } from "@admin/core/bootstrap/admin-route-modules";
+	import "@admin/components/ui/date-value-control/date-value-control-loader.scss";
 
 	type ControlSize = "field" | "compact" | "toolbar";
 	type DateValueControlProps = {
@@ -9,6 +12,7 @@
 		name?: string;
 		appearance?: SchemaDateFormat;
 		value?: string;
+		timeZone?: string;
 		disabled?: boolean;
 		readonly?: boolean;
 		required?: boolean;
@@ -21,27 +25,45 @@
 	};
 
 	let props: DateValueControlProps = $props();
-	let Control = $state<Component<DateValueControlProps> | undefined>(undefined);
+	const i18n = getAdminI18n();
+	const control =
+		preparedAdminModule<
+			typeof import("@admin/components/ui/date-value-control/date-value-control.svelte")
+		>("date") ?? import("@admin/components/ui/date-value-control/date-value-control.svelte");
 	const controlARIA = $derived(
 		fieldControlARIA(props.id, props.hasDescription ?? false, props.invalid ?? false)
 	);
-
-	void import("@admin/components/ui/date-value-control/date-value-control.svelte").then(
-		({ default: component }) => (Control = component)
-	);
 </script>
 
-{#if Control !== undefined}
-	<Control {...props} />
-{:else}
+{#await control}
 	<div
 		id={props.id}
-		class={props.class}
+		class={["ridu-date-control-loader", props.class]}
+		data-ridu-loading-surface="date-control-module"
 		role="status"
 		aria-label={props.label}
 		aria-busy="true"
 		{...controlARIA}
 	>
-		Loading date control…
+		{i18n.t("general:loading")}
+	</div>
+{:then { default: Control }}
+	<Control {...props} />
+{:catch}
+	<div
+		id={props.id}
+		class={["ridu-date-control-loader ridu-date-control-loader--failed", props.class]}
+		role="alert"
+		{...controlARIA}
+	>
+		<p>{i18n.t("fields:dateControlLoadFailed")}</p>
+		<Button
+			variant="outline"
+			size="sm"
+			aria-label={i18n.t("general:reloadPage")}
+			onclick={() => window.location.reload()}
+		>
+			{i18n.t("general:reloadPage")}
+		</Button>
 	</div>
-{/if}
+{/await}

package/src/components/ui/date-value-control/date-value-control.scss

@@ -0,0 +1,223 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-date-control {
+		@include ui.control-surface;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		min-height: var(--control-height);
+		padding-inline: var(--control-padding-inline) 8px;
+		color: var(--ink-strong);
+		font-size: var(--font-size-body);
+		&:hover {
+			border-color: var(--control-border-hover);
+			box-shadow: var(--control-hover-shadow);
+		}
+		&:focus-within {
+			border-color: var(--ring);
+		}
+		&[data-disabled],
+		&[data-readonly] {
+			background: var(--control-surface-disabled);
+			color: var(--control-disabled-foreground);
+			box-shadow: none;
+			border-color: var(--control-border-disabled);
+		}
+		&[aria-invalid="true"] {
+			border-color: var(--control-invalid-border);
+			background: var(--control-invalid-surface);
+		}
+	}
+	.ridu-date-control--compact,
+	.ridu-date-control--toolbar {
+		min-height: 34px;
+	}
+	.ridu-date-control__input {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		min-width: 0;
+		flex: 1;
+		user-select: none;
+	}
+	.ridu-date-control__segment {
+		outline: none;
+		padding: 1px;
+		white-space: nowrap;
+		&:focus {
+			background: var(--control-surface-hover);
+		}
+		&[data-placeholder] {
+			color: var(--ink-placeholder);
+		}
+	}
+	.ridu-date-control__button {
+		display: grid;
+		place-items: center;
+		flex-shrink: 0;
+		width: 28px;
+		height: 28px;
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: var(--foreground-muted);
+		cursor: pointer;
+		&:first-of-type {
+			margin-inline-start: auto;
+		}
+		&:hover {
+			color: var(--foreground);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		&:disabled {
+			cursor: not-allowed;
+		}
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+	}
+	.ridu-popover.ridu-date-popup {
+		width: auto;
+		padding: 0;
+		gap: 0;
+	}
+	.ridu-date-picker {
+		display: flex;
+		max-width: calc(100vw - 24px);
+		background: var(--popover);
+		color: var(--foreground);
+	}
+	.ridu-date-calendar {
+		width: 264px;
+		padding: 10px;
+	}
+	.ridu-date-calendar__header {
+		display: flex;
+		align-items: center;
+		gap: 5px;
+		height: 35px;
+		margin-bottom: 5px;
+	}
+	.ridu-date-calendar__nav {
+		display: grid;
+		place-items: center;
+		width: 24px;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		svg {
+			width: 16px;
+			height: 16px;
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+	}
+	.ridu-date-calendar__select {
+		min-width: 0;
+		flex: 1;
+		appearance: auto;
+		background: transparent;
+		color: inherit;
+		border: 0;
+		font: inherit;
+		option {
+			color: var(--foreground);
+			background: var(--popover);
+		}
+	}
+	.ridu-date-calendar__grid {
+		width: 100%;
+		border-collapse: separate;
+		border-spacing: 2px;
+		th {
+			font-weight: 400;
+			height: 25px;
+		}
+		td {
+			padding: 0;
+		}
+	}
+	.ridu-date-calendar__day {
+		display: grid;
+		place-items: center;
+		width: 30px;
+		height: 30px;
+		border: 1px solid var(--control-border);
+		background: transparent;
+		border-radius: 2px;
+		color: inherit;
+		cursor: pointer;
+		&[data-outside-month] {
+			color: var(--ink-faint);
+		}
+		&:hover,
+		&[data-selected] {
+			background: var(--control-surface-hover);
+		}
+		&[data-selected] {
+			border-color: var(--foreground-muted);
+		}
+		&:focus-visible {
+			@include ui.focus-outline;
+		}
+		&[data-disabled] {
+			opacity: 0.4;
+			cursor: not-allowed;
+		}
+	}
+	.ridu-date-picker__time {
+		display: flex;
+		flex-direction: column;
+		flex: 0 0 110px;
+		border-inline-start: 1px solid var(--control-border);
+	}
+	.ridu-date-picker__time-label {
+		display: grid;
+		place-items: center;
+		height: 50px;
+		flex-shrink: 0;
+	}
+	.ridu-date-picker__times {
+		overflow-y: auto;
+		height: 236px;
+		padding: 0 6px 6px;
+	}
+	.ridu-date-picker__time-option {
+		display: block;
+		width: 100%;
+		padding: 7px 5px;
+		border: 0;
+		border-radius: 2px;
+		background: transparent;
+		color: inherit;
+		text-align: center;
+		font: inherit;
+		cursor: pointer;
+		&:hover,
+		&[data-state="checked"] {
+			background: var(--control-surface-hover);
+		}
+		&:focus-visible {
+			@include ui.focus-outline(-2px);
+		}
+	}
+	@media (max-width: 420px) {
+		.ridu-date-calendar {
+			width: 240px;
+			padding: 5px;
+		}
+		.ridu-date-calendar__day {
+			width: 28px;
+		}
+		.ridu-date-picker__time {
+			flex-basis: 85px;
+		}
+	}
+}