@torpor/ui 0.3.7 → 1.0.0

package/dist/Calendar/Calendar.torp

@@ -1,31 +1,83 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { ReactiveDate } from "@torpor/view";
-import { areDatesEqual, dayNames, monthNames } from "../utils/dateUtils";
-import CalendarDay from "./CalendarDay.torp";
-import { type CalendarContext, type DayState, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
-import ChevronLeft from "../icons/ChevronLeft.torp";
-import ChevronRight from "../icons/ChevronRight.torp";
-
-// TODO: Split this out into Calendar, CalendarHeader, CalendarPreviousTrigger, CalendarGrid etc
+import { areDatesEqual } from "../utils/dateUtils";
+import getId from "../utils/getId";
+import { type PopoutContext, PopoutContextName } from "../utils/PopoutTypes";
+import {
+	type CalendarContext,
+	CalendarContextName,
+	type CalendarState,
+	type DayState,
+	type TriggerType,
+} from "./CalendarTypes";
+import buildDays from "./buildDays";
 
 interface CalendarProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** The starting index of the week, where 0 is Sunday */
+	startOfWeek?: number;
+	/** Whether a date can be selected. Set this to true for use in date pickers etc */
+	selectable?: boolean;
+	/** The selected date */
+	value?: Date;
+	// /** Events to show in the calendar */
+	// TODO: events?: CalendarEvent[],
+	/**
+	 * Raised when the user selects a date (only when `selectable` is true);
+	 * use this for the calendar's value
+	 */
+	onchange?: (value: Date) => void;
+	/**
+	 * Raised when the visible date changes, i.e. when the user navigates to a
+	 * different month via the previous/next triggers or the keyboard
+	 */
+	onchangedate?: (value: Date) => void;
+	/** Raised when the user presses Escape, so date pickers can close */
+	onclose?: () => void;
+	/**
+	 * Whether a date counts as selected, used for the day gridcells'
+	 * aria-selected. Defaults to the active date
+	 */
+	isSelected?: (date: Date) => boolean;
 }
 
+/**
+ * A basic calendar.
+ *
+ * The structure of a Calendar is:
+ *
+ * ```
+ * <Calendar>
+ * 	<CalendarHeader>
+ * 		<CalendarHeaderTrigger type="previous" />
+ * 		<h4>{$slot.monthName} {$slot.year}</h4>
+ * 		<CalendarHeaderTrigger type="next" />
+ * 	</CalendarHeader>
+ * 	<CalendarGridHeader>
+ * 		<CalendarDayHeader />
+ * 	</CalendarGridHeader>
+ * 	<CalendarGrid>
+ * 		<CalendarDay />
+ * 	</CalendarGrid>
+ * </Calendar>
+ * ```
+ *
+ * The CalendarGrid slot is rendered once per day, with the day passed back
+ * as `$slot.day`.
+ */
 export default function Calendar($props: CalendarProps) {
+	let defaultId = getId();
+
 	$props ??= $watch({});
-	$props.startOfWeek ??= 1;
-	$props.selectable ??= false;
-	$props.value ??= new Date();
-	$props.events ??= [];
 
-	// Ensure the value is a reactive date
-	$props.value = new ReactiveDate($unwrap($props.value));
+	// Ensure the value is a reactive date -- assigning a plain date to
+	// watched props/state wraps it automatically
+	$props.value = new Date($unwrap($props.value ?? new Date()));
+	let reactiveValue = $props.value;
 
 	// A note on dates:
 	// * value is the selected value
@@ -33,22 +85,42 @@ export default function Calendar($props: CalendarProps) {
 	// * visibleDate is the date that is currently being displayed in the calendar (really only the month part is important here)
 
 	let $state = $watch({
-		activeDate: $props.value,
-		visibleDate: $props.value,
-		get days() {
+		activeDate: reactiveValue,
+		visibleDate: reactiveValue,
+		visibleStartDate: reactiveValue,
+		visibleEndDate: reactiveValue,
+		get days(): DayState[] {
 			return $cache(() => {
-				return buildDays($state.visibleDate, $props.startOfWeek)
+				return buildDays($state, $props.startOfWeek ?? 1);
 			});
 		},
-	});
+	} satisfies CalendarState);
 
-	let visibleStartDate = $props.value;
-	let visibleEndDate = $props.value;
 	let container: HTMLElement;
 	let refocus = false;
 
+	// Maybe get stuff out of a popout context
+	const popoutContext = $context[PopoutContextName] as PopoutContext | undefined;
+	if (popoutContext) {
+		// Set the content ID and role so that triggers can use them with
+		// aria-controls / aria-haspopup
+		popoutContext.state.contentId = $props?.id ?? defaultId;
+		popoutContext.state.contentRole = "grid";
+	}
+
 	const context: CalendarContext = {
-		registerDay
+		get selectable() {
+			return $props.selectable === true;
+		},
+		startOfWeek: $props.startOfWeek ?? 1,
+		registerDay,
+		handleTrigger,
+		handleDay,
+		handleKey,
+		isSelected: (date: Date) => {
+			return $props.isSelected?.(date) ?? areDatesEqual(date, $state.activeDate);
+		},
+		state: $state,
 	};
 	$context[CalendarContextName] = context;
 
@@ -63,75 +135,35 @@ export default function Calendar($props: CalendarProps) {
 		}
 	});
 
-	function registerDay(date: ReactiveDate, setActive: (value: boolean) => void) {
-		const day = $state.days.find((day) => areDatesEqual(day.date, date));
+	function registerDay(date: Date, setActive: (value: boolean) => void) {
+		const day = $state.days.find((d) => areDatesEqual(d.date, date));
 		if (day) {
 			day.setActive = setActive;
 		}
 	}
 
-	function buildDays(date: ReactiveDate, start: number): DayState[] {
-		const newDays = [];
-
-		// Set the first day to the start of the week before the first day of
-		// the month (e.g. Monday the 28th of the previous month)
-		visibleStartDate = new Date();
-		visibleStartDate.setFullYear(date.getFullYear(), date.getMonth(), 1);
-		visibleStartDate.setDate(
-			visibleStartDate.getDate() - ((visibleStartDate.getDay() + 7 - start) % 7)
-		);
-
-		// Set the last day to the end of the week after the last day of the
-		// month (e.g. Sunday the 6th of the next month)
-		visibleEndDate = new Date();
-		visibleEndDate.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);
-		visibleEndDate.setDate(
-			visibleEndDate.getDate() + ((start - 1 - visibleEndDate.getDay() + 7) % 7)
-		);
-
-		const dayDiff =
-			Math.round((visibleEndDate.getTime() - visibleStartDate.getTime()) / (1000 * 60 * 60 * 24)) +
-			1;
-
-		for (let i = 0; i < dayDiff; i++) {
-			const dayDate = new ReactiveDate();
-			dayDate.setFullYear(
-				visibleStartDate.getFullYear(),
-				visibleStartDate.getMonth(),
-				visibleStartDate.getDate() + i
-			);
-			dayDate.setHours(0);
-			dayDate.setMinutes(0);
-			dayDate.setSeconds(0);
-			dayDate.setMilliseconds(0);
-			const newDay: DayState = {
-				date: dayDate,
-				muted: dayDate.getMonth() !== date.getMonth(),
-				active: areDatesEqual(dayDate, $state.activeDate)
-			};
-			newDays.push(newDay);
-		}
-
-		return newDays;
-	}
-
 	function setValue(date: Date) {
-		$state.value = new ReactiveDate(date);
+		// TODO: for date pickers etc
+		// $state.value = new Date(date);
 
 		// Also set the active date so that the user knows where they are
 		setActiveDate(date);
 
-		if ($props.onchange) $props.onchange(value);
+		if ($props.onchange) {
+			$props.onchange(date);
+		}
 	}
 
-	function setActiveDate(date: Date) {
-		$state.activeDate = new ReactiveDate(date);
+	function setActiveDate(date: Date, moveRange = false) {
+		$state.activeDate = new Date(date);
 
 		// If the selected date is outside the visible date range, move the date range
-		if (date < visibleStartDate || date > visibleEndDate) {
+		if (moveRange || date < $state.visibleStartDate || date > $state.visibleEndDate) {
 			refocus = true;
-			$state.visibleDate = new ReactiveDate(date);
-			if ($props.onchangedate) $props.onchangedate(date);
+			$state.visibleDate = new Date(date);
+			if ($props.onchangedate) {
+				$props.onchangedate(date);
+			}
 		}
 
 		$state.days.forEach((day) => {
@@ -139,31 +171,22 @@ export default function Calendar($props: CalendarProps) {
 			if (day.setActive) {
 				day.setActive(active);
 			}
-			day.active = active;
 		});
 	}
 
-	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
-		const el = e.currentTarget.getElementsByClassName("active")[0];
-		if (el && el.children[0] instanceof HTMLElement) {
-			el.children[0].focus();
-			e.preventDefault();
+	function handleTrigger(type: TriggerType) {
+		if (type === "previous") {
+			$state.visibleDate.setMonth($state.visibleDate.getMonth() - 1);
+		} else if (type === "next") {
+			$state.visibleDate.setMonth($state.visibleDate.getMonth() + 1);
 		}
-	}
 
-	function handlePrevMonth(e: Event) {
-		e.preventDefault();
-		$state.visibleDate.setMonth($state.visibleDate.getMonth() - 1);
-		if ($props.onchangedate) $props.onchangedate(visibleDate);
-	}
-
-	function handleNextMonth(e: Event) {
-		e.preventDefault();
-		$state.visibleDate.setMonth($state.visibleDate.getMonth() + 1);
-		if ($props.onchangedate) $props.onchangedate(visibleDate);
+		if ($props.onchangedate) {
+			$props.onchangedate($state.visibleDate);
+		}
 	}
 
-	async function handleDayClick(date: ReactiveDate) {
+	async function handleDay(date: Date) {
 		if (!$props.selectable) return;
 
 		setValue(date);
@@ -178,44 +201,73 @@ export default function Calendar($props: CalendarProps) {
 				setValue($state.activeDate);
 				break;
 			}
-			case "Esc":
 			case "Escape": {
 				e.preventDefault();
-				if ($props.onclose) $props.onclose();
+				if ($props.onclose) {
+					$props.onclose();
+				}
 				break;
 			}
-			case "Left":
 			case "ArrowLeft": {
 				e.preventDefault();
-				// Move to the date one day before
-				const newDate = new Date($state.activeDate.getTime() - 1 * 86400000)
+				const newDate = new Date($state.activeDate);
+				newDate.setDate(newDate.getDate() - 1);
 				setActiveDate(newDate);
 				break;
 			}
-			case "Up":
 			case "ArrowUp": {
 				e.preventDefault();
-				// Move to the date seven days before
-				const newDate = new Date($state.activeDate.getTime() - 7 * 86400000)
+				const newDate = new Date($state.activeDate);
+				newDate.setDate(newDate.getDate() - 7);
 				setActiveDate(newDate);
 				break;
 			}
-			case "Right":
 			case "ArrowRight": {
 				e.preventDefault();
-				// Move to the date one day after
-				const newDate = new Date($state.activeDate.getTime() + 1 * 86400000)
+				const newDate = new Date($state.activeDate);
+				newDate.setDate(newDate.getDate() + 1);
 				setActiveDate(newDate);
 				break;
 			}
-			case "Down":
 			case "ArrowDown": {
 				e.preventDefault();
-				// Move to the date seven days after
-				const newDate = new Date($state.activeDate.getTime() + 7 * 86400000)
+				const newDate = new Date($state.activeDate);
+				newDate.setDate(newDate.getDate() + 7);
+				setActiveDate(newDate);
+				break;
+			}
+			case "Home": {
+				e.preventDefault();
+				const newDate = new Date($state.activeDate);
+				const dayOfWeek = newDate.getDay();
+				const daysToSubtract = (dayOfWeek - context.startOfWeek + 7) % 7;
+				newDate.setDate(newDate.getDate() - daysToSubtract);
 				setActiveDate(newDate);
 				break;
 			}
+			case "End": {
+				e.preventDefault();
+				const newDate = new Date($state.activeDate);
+				const dayOfWeek = newDate.getDay();
+				const daysToAdd = (context.startOfWeek - 1 - dayOfWeek + 7) % 7;
+				newDate.setDate(newDate.getDate() + daysToAdd);
+				setActiveDate(newDate);
+				break;
+			}
+			case "PageUp": {
+				e.preventDefault();
+				const newDate = new Date($state.activeDate);
+				newDate.setMonth(newDate.getMonth() - 1);
+				setActiveDate(newDate, true);
+				break;
+			}
+			case "PageDown": {
+				e.preventDefault();
+				const newDate = new Date($state.activeDate);
+				newDate.setMonth(newDate.getMonth() + 1);
+				setActiveDate(newDate, true);
+				break;
+			}
 		}
 	}
 
@@ -226,52 +278,7 @@ export default function Calendar($props: CalendarProps) {
 			{$props?.style}
 			&ref={container}
 		>
-			<div class={`torp-calendar-header ${$props?.class ?? ""}`.trim()}>
-				<button class={`torp-calendar-previous-trigger ${$props?.class ?? ""}`.trim()} onclick={handlePrevMonth}>
-					<slot name="prev-button">
-						<ChevronLeft />
-					</slot>
-				</button>
-				<span class={`torp-calendar-month-name ${$props?.class ?? ""}`.trim()}>
-					{monthNames[$state.visibleDate.getMonth()] + " " + $state.visibleDate.getFullYear()}
-				</span>
-				<button class={`torp-calendar-next-trigger ${$props?.class ?? ""}`.trim()} onclick={handleNextMonth}>
-					<slot name="next-button">
-						<ChevronRight />
-					</slot>
-				</button>
-			</div>
-			<div
-				class={["torp-calendar-grid", $props?.class]}
-				{$props?.style}
-				tabindex={$props.selectable ? 0 : -1}
-				onfocus={handleFocus}
-				onkeydown={handleKey}
-			>
-				@for (let index of [0, 1, 2, 3, 4, 5, 6]) {
-					<span>
-						{dayNames[(Math.abs($props.startOfWeek) + index) % 7].substring(0, 2)}
-					</span>
-				}
-				@for (let day of $state.days) {
-					@key = day.date;
-					<CalendarDay
-						{day.date}
-						{day.muted}
-						{day.active}
-						{$props.selectable}
-						events={$props.events.filter((ev) => areDatesEqual(new Date(ev.date), day.date))}
-						onclick={handleDayClick}
-					/>
-				}
-			</div>
+			<slot />
 		</div>
 	}
-
-	@style {
-		.torp-calendar-grid {
-			display: grid;
-			grid-template-columns: repeat(7, 1fr);
-		}
-	}
 }

package/dist/Calendar/CalendarDay.torp

@@ -1,78 +1,124 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import { areDatesEqual } from "../utils/dateUtils";
-import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
+import { type CalendarContext, CalendarContextName } from "./CalendarTypes";
+
+// TODO: Internationalization?? On the server and/or the client...
+const formatDate = (date: Date): string => {
+	return new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	}).format(date);
+};
 
 interface CalendarDayProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** The date to display */
+	date: Date;
+	/** Whether the date is muted (i.e. not in the currently displayed month) */
+	muted?: boolean;
+	/** Whether the date is active */
+	active?: boolean;
+	/** An ARIA label for describing the day to screen readers  */
+	ariaLabel?: string | undefined;
+	onclick?: () => void;
+	onkeydown?: () => void;
 }
 
 export default function CalendarDay($props: CalendarDayProps) {
-	$props ??= $watch({});
-	$props.date ??= new Date();
-	$props.selectable ??= false;
-	$props.muted ??= false;
-	$props.active ??= false;
-	$props.events ??= [];
+	// Ensure the value is a reactive date -- assigning a plain date to
+	// watched props/state wraps it automatically
+	$props.date = new Date($unwrap($props.date ?? new Date()));
+	let reactiveDate = $props.date;
 
-	// HACK: can't unwrap in @render
-	let date = $unwrap($props.date);
+	// Get stuff out of the Calendar context
+	const context = $context[CalendarContextName] as CalendarContext;
+	if (!context) {
+		throw new Error("CalendarDay must be contained within a Calendar");
+	}
+	const { registerDay, handleDay } = context;
 
 	// Register this item with the parent Calendar, which will handle toggling active for all days
-	const { registerDay } = $context[CalendarContextName] as CalendarContext;
-	registerDay($props.date, setActive);
+	registerDay(reactiveDate, setActive);
 
 	// This function is called by the parent Calendar to set this item's active value
 	function setActive(value: boolean) {
-		//if (active !== value) {
-		//	active = value;
-		//	dispatch("activeChange", value);
-		//}
+		$props.active = value;
 	}
 
 	function isToday() {
 		const today = new Date();
-		return areDatesEqual(date, today);
+		return areDatesEqual($props.date, today);
 	}
 
 	async function handleClick() {
-		//dispatch("click", date);
-		if ($props.onclick) $props.onclick($props.date);
+		handleDay(reactiveDate);
+		if ($props.onclick) {
+			$props.onclick();
+		}
 	}
 
 	async function handleKey() {
-		//dispatch("click", date);
-		if ($props.onkeydown) $props.onkeydown();
+		if ($props.onkeydown) {
+			$props.onkeydown();
+		}
+	}
+
+	function buildClass() {
+		return [
+			"torp-calendar-day",
+			$props?.class,
+			{
+				muted: $props.muted,
+				today: isToday(),
+				active: context.selectable && $props.active,
+			},
+		];
 	}
 
 	@render {
-		<div 
-			{$props?.id}
-			class={[
-				`torp-calendar-day ${$props?.class ?? ""}`.trim(),
-				{
-					muted: $props.muted,
-					today: isToday(),
-					active: $props.selectable && $props.active
-				}
-			]}
-		>
-			@if ($props.selectable) {
-				<button type="button" tabindex="-1" onclick={handleClick} onkeydown={handleKey}>
-					<span>{date.getDate()}</span>
-				</button>
-			} else {
-				<span>{date.getDate()}</span>
+		@if (context.selectable) {
+			<button
+				{$props?.id}
+				class={buildClass()}
+				{$props?.style}
+				type="button"
+				tabindex="-1"
+				onclick={handleClick}
+				onkeydown={handleKey}
+				aria-label={$props?.ariaLabel ?? formatDate($props.date)}
+				aria-current={isToday() ? "date" : undefined}
+				aria-disabled={$props.muted ? "true" : undefined}
+			>
+				<slot>
+					{$props.date.getDate()}
+				</slot>
+			</button>
+		} else {
+			<span
+				{$props?.id}
+				class={buildClass()}
+				{$props?.style}
+				aria-label={$props?.ariaLabel ?? formatDate($props.date)}
+				aria-current={isToday() ? "date" : undefined}
+			>
+				<slot>
+					{$props.date.getDate()}
+				</slot>
+			</span>
+		}
+		@// TODO:
+		@/*
+		<ul class={`torp-calendar-day-events ${$props?.class ?? ""}`.trim()}>
+			@for (ev of $props.events) {
+				<li title={ev.content} />
 			}
-			<ul class={`torp-calendar-day-events ${$props?.class ?? ""}`.trim()}>
-				@for (ev of $props.events) {
-					<li title={ev.content} />
-				}
-			</ul>
-		</div>
+		</ul>
+		*/
 	}
 }

package/dist/Calendar/CalendarDayHeader.torp

@@ -0,0 +1,36 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
+interface CalendarDayHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The day to display */
+	dayName: string;
+	/** The short day to display */
+	shortDayName: string;
+	/** An ARIA label for describing the day header to screen readers  */
+	ariaLabel?: string | undefined;
+}
+
+/**
+ * The calendar grid header.
+ */
+export default function CalendarDayHeader($props: CalendarDayHeaderProps | undefined) {
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-calendar-day-header", $props?.class]}
+			{$props?.style}
+			role="columnheader"
+			aria-label={$props?.ariaLabel ?? $props?.dayName}
+			abbr={$props?.shortDayName}
+		>
+			<slot>
+				{$props?.shortDayName}
+			</slot>
+		</div>
+	}
+}