@joewinke/jatui 0.41.0 → 0.42.0

package/dist/components/DatePicker.svelte

@@ -0,0 +1,419 @@
+<script lang="ts">
+	/**
+	 * DatePicker — a date field: trigger button + popover month grid + typed entry.
+	 *
+	 * The drop-in replacement for a native `<input type="date">`: `value` is the
+	 * same `YYYY-MM-DD` string (bindable), `name` posts it with a form, and
+	 * `min`/`max` take the same strings. On top of that it adds the shared
+	 * calendar grid (APG keys, locale week start), a typed field that reads the
+	 * locale's own order (MM/DD/YYYY in en-US, DD/MM/YYYY in en-GB — commits on
+	 * Enter/blur, reverts on Escape or input it can't read) and an optional
+	 * pending/Apply step (`commit="apply"`).
+	 *
+	 * Built from BoardUI's public date-picker behaviour (jatui-lfxyy); no BoardUI
+	 * source is copied. The popover rides `use:floating`.
+	 */
+	import { tick } from 'svelte';
+	import { floating, type Placement } from '../actions/floating';
+	import MonthGrid from './calendar/MonthGrid.svelte';
+	import CalendarHeader from './calendar/CalendarHeader.svelte';
+	import IconButton from './IconButton.svelte';
+	import { createCalendarGrid } from './calendar/createCalendarGrid';
+	import {
+		calendarAccentStyle,
+		datePlaceholder,
+		formatMonthYear,
+		formatTypedDate,
+		makeIsDisabled,
+		parseTypedDate,
+		resolveWeekStart,
+		startOfDay,
+		toDay,
+		toIsoDate,
+		type Weekday
+	} from './calendar/calendarGrid';
+
+	type Size = 'sm' | 'md' | 'lg';
+
+	let {
+		value = $bindable(null),
+		open = $bindable(false),
+		onChange,
+		label,
+		id = `jatui-date-${Math.random().toString(36).slice(2, 9)}`,
+		name,
+		placeholder = 'Pick a date',
+		min,
+		max,
+		isDateEnabled,
+		weekdaysOnly = false,
+		weekStart = 'locale',
+		locale,
+		format = { month: 'short', day: 'numeric', year: 'numeric' },
+		commit = 'instant',
+		typed = true,
+		clearable = true,
+		showToday = true,
+		disabled = false,
+		required = false,
+		error,
+		helpText,
+		size = 'md',
+		accentColor,
+		placement = 'bottom-start',
+		zIndex = 60,
+		class: className = ''
+	}: {
+		/** `YYYY-MM-DD` (local calendar day) or null. */
+		value?: string | null;
+		/** Popover open state (bindable). */
+		open?: boolean;
+		/** Fires on every committed change, with the parsed local-midnight Date. */
+		onChange?: (value: string | null, date: Date | null) => void;
+		label?: string;
+		id?: string;
+		/** Posts `value` with the enclosing form (a native date input's `name`). */
+		name?: string;
+		placeholder?: string;
+		min?: string | Date | null;
+		max?: string | Date | null;
+		isDateEnabled?: (date: Date) => boolean;
+		weekdaysOnly?: boolean;
+		/** 0 = Sunday … 6 = Saturday, or `'locale'` (default). */
+		weekStart?: Weekday | 'locale';
+		locale?: string;
+		/** Intl options for the trigger label. */
+		format?: Intl.DateTimeFormatOptions;
+		/** `instant`: a click commits and closes. `apply`: pick, then Apply / Cancel. */
+		commit?: 'instant' | 'apply';
+		/** Show the typed-entry field in the popover. */
+		typed?: boolean;
+		clearable?: boolean;
+		showToday?: boolean;
+		disabled?: boolean;
+		required?: boolean;
+		error?: string;
+		helpText?: string;
+		size?: Size;
+		/** primary | secondary | accent | info | success | warning | error | neutral */
+		accentColor?: string;
+		placement?: Placement;
+		zIndex?: number;
+		class?: string;
+	} = $props();
+
+	const SIZE: Record<Size, string> = { sm: 'input-sm', md: '', lg: 'input-lg' };
+
+	const firstDay = $derived(resolveWeekStart(weekStart, locale));
+	const minDay = $derived(toDay(min ?? null));
+	const maxDay = $derived(toDay(max ?? null));
+	const isDisabled = $derived(makeIsDisabled({ min: minDay, max: maxDay, isDateEnabled, weekdaysOnly }));
+	const committed = $derived(toDay(value));
+	const display = $derived(committed ? new Intl.DateTimeFormat(locale, format).format(committed) : '');
+	const popId = $derived(`${id}-calendar`);
+
+	let triggerEl = $state<HTMLButtonElement | null>(null);
+	let popEl = $state<HTMLDivElement | null>(null);
+	let pending = $state<Date | null>(null);
+	const cal = createCalendarGrid({ initial: () => committed, min: () => minDay, max: () => maxDay });
+	let typedText = $state('');
+	let typedMessage = $state('');
+	let lastDismiss = 0;
+
+	// Re-key the panel every time it opens, so the visible month follows the value.
+	async function openPopover() {
+		pending = committed;
+		cal.reset(committed);
+		typedText = formatTypedDate(pending, locale);
+		typedMessage = '';
+		open = true;
+		await tick();
+		popEl?.querySelector<HTMLElement>('.jatui-month-grid__day[tabindex="0"]')?.focus();
+	}
+
+	function close() {
+		open = false;
+		lastDismiss = performance.now();
+	}
+
+	function toggle() {
+		if (disabled) return;
+		if (open) return close();
+		// The outside-click dismiss runs (capture phase) before this click; don't reopen.
+		if (performance.now() - lastDismiss < 250) return;
+		void openPopover();
+	}
+
+	function commitValue(date: Date | null) {
+		const next = date ? toIsoDate(date) : null;
+		if (next !== value) {
+			value = next;
+			onChange?.(next, date);
+		}
+	}
+
+	function choose(date: Date) {
+		pending = date;
+		typedText = formatTypedDate(date, locale);
+		typedMessage = '';
+		if (commit === 'instant') {
+			commitValue(date);
+			close();
+		}
+	}
+
+	function apply() {
+		commitValue(pending);
+		close();
+	}
+
+	function clear() {
+		commitValue(null);
+		triggerEl?.focus();
+	}
+
+	/** Commit what was typed, or revert it. Returns true when a date was accepted. */
+	function commitTyped(): boolean {
+		const current = formatTypedDate(pending, locale);
+		if (typedText.trim() === current) return false;
+		if (!typedText.trim()) {
+			pending = null;
+			if (commit === 'instant') commitValue(null);
+			return false;
+		}
+		const parsed = parseTypedDate(typedText, locale);
+		if (!parsed || isDisabled(parsed)) {
+			typedMessage = parsed ? 'That date is not available.' : `Couldn't read that date — use ${datePlaceholder(locale)}.`;
+			typedText = current;
+			return false;
+		}
+		typedMessage = '';
+		pending = parsed;
+		cal.focus(parsed);
+		if (commit === 'instant') commitValue(parsed);
+		return true;
+	}
+
+	function handleTypedKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			if (commitTyped() && commit === 'instant') close();
+		} else if (e.key === 'Escape') {
+			const current = formatTypedDate(pending, locale);
+			if (typedText !== current) {
+				// First Escape reverts the field; the next one closes the popover.
+				e.stopPropagation();
+				typedText = current;
+				typedMessage = '';
+			}
+		}
+	}
+
+	const today = startOfDay(new Date());
+	const todayEnabled = $derived(!isDisabled(today));
+	const describedBy = $derived(error ? `${id}-error` : helpText ? `${id}-help` : undefined);
+</script>
+
+<div class="form-control jatui-date-picker {className}">
+	{#if label}
+		<label for={id} class="label">
+			<span class="text-[0.8125rem] font-medium text-base-content/85">
+				{label}
+				{#if required}<span class="text-error ml-1" aria-hidden="true">*</span>{/if}
+			</span>
+		</label>
+	{/if}
+
+	<div class="jatui-date-picker__field">
+		<button
+			bind:this={triggerEl}
+			{id}
+			type="button"
+			class="input {SIZE[size]} {error ? 'input-error' : ''} jatui-date-picker__trigger"
+			aria-haspopup="dialog"
+			aria-expanded={open}
+			aria-controls={open ? popId : undefined}
+			aria-describedby={describedBy}
+			{disabled}
+			onclick={toggle}
+		>
+			<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true" class="jatui-date-picker__icon">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+			</svg>
+			<span class="jatui-date-picker__value" class:is-placeholder={!display}>{display || placeholder}</span>
+		</button>
+		{#if clearable && value && !disabled}
+			<span class="jatui-date-picker__clear">
+				<IconButton label="Clear date" size="xs" shape="circle" onclick={clear}>
+					<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+						<path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+					</svg>
+				</IconButton>
+			</span>
+		{/if}
+		{#if name || required}
+			<!-- Form value + native required validation (hidden inputs skip both). -->
+			<input
+				class="jatui-date-picker__native"
+				type="text"
+				tabindex="-1"
+				aria-hidden="true"
+				{name}
+				value={value ?? ''}
+				{required}
+				{disabled}
+				onfocus={() => triggerEl?.focus()}
+			/>
+		{/if}
+	</div>
+
+	{#if error}
+		<div class="label"><span id="{id}-error" class="text-[0.8125rem] text-error">{error}</span></div>
+	{:else if helpText}
+		<div class="label"><span id="{id}-help" class="text-[0.8125rem] text-base-content/55">{helpText}</span></div>
+	{/if}
+</div>
+
+{#if open}
+	<div
+		bind:this={popEl}
+		id={popId}
+		role="dialog"
+		aria-label={label ? `Choose ${label.toLowerCase()}` : 'Choose date'}
+		class="jatui-date-picker__pop bg-base-100 rounded-box border border-base-300"
+		style="z-index: {zIndex}; {calendarAccentStyle(accentColor)}"
+		data-calendar-root
+		use:floating={{ anchor: triggerEl, placement, offset: 6, onDismiss: close }}
+	>
+		{#if typed}
+			<div class="jatui-date-picker__typed">
+				<input
+					type="text"
+					inputmode="numeric"
+					autocomplete="off"
+					dir="ltr"
+					class="input input-sm w-full font-mono"
+					aria-label="Type a date, {datePlaceholder(locale)}"
+					placeholder={datePlaceholder(locale)}
+					bind:value={typedText}
+					onkeydown={handleTypedKeydown}
+					onblur={() => commitTyped()}
+				/>
+				<p class="jatui-date-picker__msg" role="status" aria-live="polite">{typedMessage}</p>
+			</div>
+		{/if}
+
+		<CalendarHeader
+			label={formatMonthYear(cal.viewMonth, locale)}
+			onPrev={() => cal.shift(-1)}
+			onNext={() => cal.shift(1)}
+			canPrev={cal.canPrev}
+			canNext={cal.canNext}
+			size="sm"
+		/>
+		<MonthGrid
+			month={cal.viewMonth}
+			focusedDate={cal.focusedDate}
+			weekStart={firstDay}
+			{locale}
+			selected={pending}
+			{isDisabled}
+			min={minDay}
+			max={maxDay}
+			fixedWeeks
+			size="sm"
+			onSelect={choose}
+			onFocusDate={cal.focus}
+		/>
+
+		{#if showToday || commit === 'apply'}
+			<div class="jatui-date-picker__footer">
+				{#if showToday}
+					<button type="button" class="btn btn-ghost btn-xs" disabled={!todayEnabled} onclick={() => choose(today)}>Today</button>
+				{/if}
+				{#if commit === 'apply'}
+					<span class="jatui-date-picker__actions">
+						<button type="button" class="btn btn-ghost btn-sm" onclick={close}>Cancel</button>
+						<button type="button" class="btn btn-primary btn-sm" onclick={apply}>Apply</button>
+					</span>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.jatui-date-picker {
+		position: relative;
+	}
+	.jatui-date-picker__field {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+	.jatui-date-picker__trigger {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		text-align: start;
+		cursor: pointer;
+		padding-inline-end: 2.25rem;
+	}
+	.jatui-date-picker__icon {
+		flex-shrink: 0;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-date-picker__value {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-variant-numeric: tabular-nums;
+	}
+	.jatui-date-picker__value.is-placeholder {
+		color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+	}
+	.jatui-date-picker__clear {
+		position: absolute;
+		inset-inline-end: 0.375rem;
+	}
+	.jatui-date-picker__native {
+		position: absolute;
+		inset: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+	.jatui-date-picker__pop {
+		width: max-content;
+		min-width: 17rem;
+		padding: 0.75rem;
+	}
+	.jatui-date-picker__typed {
+		margin-block-end: 0.5rem;
+	}
+	.jatui-date-picker__msg {
+		margin: 0.25rem 0 0;
+		min-height: 0;
+		font-size: 0.75rem;
+		color: var(--color-error);
+	}
+	.jatui-date-picker__msg:empty {
+		margin: 0;
+	}
+	.jatui-date-picker__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin-block-start: 0.5rem;
+		padding-block-start: 0.5rem;
+		border-block-start: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-date-picker__actions {
+		display: inline-flex;
+		gap: 0.375rem;
+		margin-inline-start: auto;
+	}
+</style>

package/dist/components/DatePicker.svelte.d.ts

@@ -0,0 +1,44 @@
+import { type Placement } from '../actions/floating';
+import { type Weekday } from './calendar/calendarGrid';
+type Size = 'sm' | 'md' | 'lg';
+type $$ComponentProps = {
+    /** `YYYY-MM-DD` (local calendar day) or null. */
+    value?: string | null;
+    /** Popover open state (bindable). */
+    open?: boolean;
+    /** Fires on every committed change, with the parsed local-midnight Date. */
+    onChange?: (value: string | null, date: Date | null) => void;
+    label?: string;
+    id?: string;
+    /** Posts `value` with the enclosing form (a native date input's `name`). */
+    name?: string;
+    placeholder?: string;
+    min?: string | Date | null;
+    max?: string | Date | null;
+    isDateEnabled?: (date: Date) => boolean;
+    weekdaysOnly?: boolean;
+    /** 0 = Sunday … 6 = Saturday, or `'locale'` (default). */
+    weekStart?: Weekday | 'locale';
+    locale?: string;
+    /** Intl options for the trigger label. */
+    format?: Intl.DateTimeFormatOptions;
+    /** `instant`: a click commits and closes. `apply`: pick, then Apply / Cancel. */
+    commit?: 'instant' | 'apply';
+    /** Show the typed-entry field in the popover. */
+    typed?: boolean;
+    clearable?: boolean;
+    showToday?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string;
+    helpText?: string;
+    size?: Size;
+    /** primary | secondary | accent | info | success | warning | error | neutral */
+    accentColor?: string;
+    placement?: Placement;
+    zIndex?: number;
+    class?: string;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value" | "open">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;