@torpor/ui 0.4.0 → 1.0.1

package/dist/Calendar/CalendarGrid.torp

@@ -0,0 +1,104 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type CalendarContext, CalendarContextName, type DayState } from "./CalendarTypes";
+
+interface CalendarGridProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for describing the grid to screen readers  */
+	ariaLabel?: string | undefined;
+}
+
+/**
+ * The grid of calendar days, wrapped in the row/gridcell structure that the
+ * grid role requires: each week is a `role="row"` and each day is a
+ * `role="gridcell"`.
+ *
+ * The days come from the Calendar's state as a flat list; they are grouped
+ * into rows of seven here. The slot is rendered once per day, with the day
+ * passed back to the slot content (`$slot.day`).
+ */
+export default function CalendarGrid($props: CalendarGridProps | undefined) {
+	// Get stuff out of the Calendar context
+	const context = $context[CalendarContextName] as CalendarContext;
+	if (!context) {
+		throw new Error("CalendarGrid must be contained within a Calendar");
+	}
+	const { handleKey, state: $state } = context;
+
+	// Group the flat days list into rows of seven (one row per week)
+	let $grid = $watch({
+		get weeks(): DayState[][] {
+			return $cache(() => {
+				const days = $state.days;
+				const weeks: DayState[][] = [];
+				for (let i = 0; i < days.length; i += 7) {
+					weeks.push(days.slice(i, i + 7));
+				}
+				return weeks;
+			});
+		},
+	});
+
+	// The selected date is marked on the gridcell (aria-selected is only
+	// valid there, not on the day component's button); the Calendar decides
+	// which dates count via its isSelected hook
+	function isSelected(day: DayState): boolean {
+		return context.isSelected(day.date);
+	}
+
+	// Focus the day with `class=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();
+		}
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-calendar-grid", $props?.class]}
+			{$props?.style}
+			tabindex={context.selectable ? 0 : -1}
+			onfocus={handleFocus}
+			onkeydown={handleKey}
+			role="grid"
+			aria-label={$props?.ariaLabel ?? "Calendar"}
+			aria-colcount="7"
+			aria-readonly={!context.selectable ? "true" : undefined}
+		>
+			@for (let week of $grid.weeks) {
+				<div role="row" class="torp-calendar-row">
+					@for (let day of week) {
+						@key = day.date
+						<span
+							role="gridcell"
+							class="torp-calendar-cell"
+							aria-selected={context.selectable ? (isSelected(day) ? "true" : "false") : undefined}
+						>
+							<slot {day} />
+						</span>
+					}
+				</div>
+			}
+		</div>
+	}
+
+	@style {
+		.torp-calendar-grid {
+			display: grid;
+		}
+		.torp-calendar-row {
+			display: grid;
+			grid-template-columns: repeat(7, 1fr);
+		}
+		.torp-calendar-cell {
+			display: grid;
+		}
+	}
+}

package/dist/Calendar/CalendarGridHeader.torp

@@ -0,0 +1,43 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { dayNames, shortDayNames } from "../utils/dateUtils";
+import { type CalendarContext, CalendarContextName } from "./CalendarTypes";
+
+interface CalendarGridHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * The calendar grid header.
+ */
+export default function CalendarGridHeader($props: CalendarGridHeaderProps | undefined) {
+	// Get stuff out of the Calendar context
+	const context = $context[CalendarContextName] as CalendarContext;
+	if (!context) {
+		throw new Error("CalendarGridHeader must be contained within a Calendar");
+	}
+	const { startOfWeek } = context;
+
+	const days = [0, 1, 2, 3, 4, 5, 6].map((i) => ({
+		dayNumber: (startOfWeek + i) % 7,
+		dayName: dayNames[(startOfWeek + i) % 7],
+		shortDayName: shortDayNames[(startOfWeek + i) % 7],
+	}));
+
+	@render {
+		<div {$props?.id} class={["torp-calendar-grid-header", $props?.class]} {$props?.style} role="row">
+			<slot {days} />
+		</div>
+	}
+
+	@style {
+		.torp-calendar-grid-header {
+			display: grid;
+			grid-template-columns: repeat(7, 1fr);
+		}
+	}
+}

package/dist/Calendar/CalendarHeader.torp

@@ -0,0 +1,48 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { monthNames } from "../utils/dateUtils";
+import { type CalendarContext, CalendarContextName } from "./CalendarTypes";
+
+interface CalendarHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * The calendar header, containing the name of the active month and previous and next triggers.
+ */
+export default function CalendarHeader($props: CalendarHeaderProps | undefined) {
+	// Get stuff out of the Calendar context
+	const context = $context[CalendarContextName] as CalendarContext;
+	if (!context) {
+		throw new Error("CalendarHeader must be contained within a Calendar");
+	}
+	const { state: $calState } = context;
+
+	let $state = $watch({
+		get monthNumber() {
+			return $calState.visibleDate.getMonth();
+		},
+		get monthName() {
+			return monthNames[$state.monthNumber];
+		},
+		get year() {
+			return $calState.visibleDate.getFullYear();
+		},
+	});
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-calendar-header", $props?.class]}
+			{$props?.style}
+			aria-live="polite"
+			aria-atomic="true"
+		>
+			<slot {$state.monthNumber} {$state.monthName} {$state.year} />
+		</div>
+	}
+}

package/dist/Calendar/CalendarHeaderTrigger.torp

@@ -0,0 +1,54 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import ChevronLeft from "../icons/ChevronLeft.torp";
+import ChevronRight from "../icons/ChevronRight.torp";
+import { type CalendarContext, CalendarContextName, type TriggerType } from "./CalendarTypes";
+
+interface CalendarTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The type for the button */
+	type: TriggerType;
+	/** Whether this item is disabled */
+	disabled?: boolean;
+	/** An ARIA label for describing the button to screen readers  */
+	ariaLabel?: string | undefined;
+}
+
+export default function CalendarHeaderTrigger($props: CalendarTriggerProps) {
+	// Get stuff out of the Calendar context
+	const context = $context[CalendarContextName] as CalendarContext;
+	if (!context) {
+		throw new Error("CalendarHeaderTrigger must be contained within a Calendar");
+	}
+	const { handleTrigger } = context;
+
+	function handleClick() {
+		// Pass the value to the toggleItem method in the parent Calendar which will handle toggling
+		// the value for all items
+		handleTrigger($props.type);
+	}
+
+	@render {
+		<button
+			type="button"
+			{$props?.id}
+			class={["torp-calendar-trigger", $props?.class]}
+			{$props?.disabled}
+			data-type={$props.type}
+			onclick={handleClick}
+			aria-label={$props?.ariaLabel ?? ($props.type === "previous" ? "Previous month" : "Next month")}
+		>
+			<slot>
+				@if ($props.type === "previous") {
+					<ChevronLeft />
+				} else if ($props.type === "next") {
+					<ChevronRight />
+				}
+			</slot>
+		</button>
+	}
+}

package/dist/Calendar/CalendarTypes.ts

@@ -1,17 +1,36 @@
 export const CalendarContextName: unique symbol = Symbol.for("torp.Calendar");
 
 export interface CalendarContext {
+	selectable: boolean;
+	startOfWeek: number;
 	// The registerDay function is called from each CalendarDay to register itself with this
 	// Calendar. They pass us a setActive method that we can call
 	registerDay: (date: Date, setActive: (value: boolean) => void) => void;
+	handleTrigger: (type: TriggerType) => void;
+	handleDay: (date: Date) => void;
+	handleKey: (e: KeyboardEvent) => void;
+	/**
+	 * Whether a date counts as selected, used for the day gridcells'
+	 * aria-selected (which is only valid on a gridcell). Defaults to the
+	 * active date; date range pickers override it so both range endpoints
+	 * are announced
+	 */
+	isSelected: (date: Date) => boolean;
+	state: CalendarState;
+}
+
+export interface CalendarState {
+	activeDate: Date;
+	visibleDate: Date;
+	visibleStartDate: Date;
+	visibleEndDate: Date;
+	days: DayState[];
 }
 
 export interface DayState {
 	date: Date;
 	muted: boolean;
-	state: {
-		active: boolean;
-	};
+	active: boolean;
 	setActive?: (value: boolean) => void;
 }
 
@@ -20,3 +39,5 @@ export interface CalendarEvent {
 	content: string;
 	color: string;
 }
+
+export type TriggerType = "previous" | "next";

package/dist/Calendar/buildDays.ts

@@ -0,0 +1,54 @@
+import { areDatesEqual } from "../utils/dateUtils";
+import { type CalendarState, type DayState } from "./CalendarTypes";
+
+// The dates created here are plain dates -- they get wrapped automatically
+// when they're assigned to watched state
+export default function buildDays($state: CalendarState, startOfWeek: number): DayState[] {
+	const newDays = [];
+
+	const date = $state.visibleDate;
+	const activeDate = $state.activeDate;
+
+	// 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)
+	let visibleStartDate = new Date();
+	visibleStartDate.setFullYear(date.getFullYear(), date.getMonth(), 1);
+	visibleStartDate.setDate(
+		visibleStartDate.getDate() - ((visibleStartDate.getDay() + 7 - startOfWeek) % 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)
+	let visibleEndDate = new Date();
+	visibleEndDate.setFullYear(date.getFullYear(), date.getMonth() + 1, 0);
+	visibleEndDate.setDate(
+		visibleEndDate.getDate() + ((startOfWeek - 1 - visibleEndDate.getDay() + 7) % 7),
+	);
+
+	$state.visibleStartDate = visibleStartDate;
+	$state.visibleEndDate = visibleEndDate;
+
+	const dayDiff =
+		Math.round((visibleEndDate.getTime() - visibleStartDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;
+
+	for (let i = 0; i < dayDiff; i++) {
+		const dayDate = new Date();
+		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, activeDate),
+		};
+		newDays.push(newDay);
+	}
+
+	return newDays;
+}

package/dist/Calendar/index.d.ts

@@ -5,11 +5,60 @@ 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`.
+ */
 declare function Calendar(
 	$parent: ParentNode,
 	$anchor: Node | null,
@@ -24,9 +73,19 @@ 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;
 }
 
 declare function CalendarDay(
@@ -37,4 +96,131 @@ declare function CalendarDay(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Calendar, CalendarDay };
+
+
+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.
+ */
+declare function CalendarDayHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarDayHeaderProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CalendarGridProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for describing the grid to screen readers  */
+	ariaLabel?: string | undefined;
+}
+
+/**
+ * The grid of calendar days, wrapped in the row/gridcell structure that the
+ * grid role requires: each week is a `role="row"` and each day is a
+ * `role="gridcell"`.
+ *
+ * The days come from the Calendar's state as a flat list; they are grouped
+ * into rows of seven here. The slot is rendered once per day, with the day
+ * passed back to the slot content (`$slot.day`).
+ */
+declare function CalendarGrid(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarGridProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CalendarGridHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * The calendar grid header.
+ */
+declare function CalendarGridHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarGridHeaderProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CalendarHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * The calendar header, containing the name of the active month and previous and next triggers.
+ */
+declare function CalendarHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarHeaderProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CalendarTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The type for the button */
+	type: TriggerType;
+	/** Whether this item is disabled */
+	disabled?: boolean;
+	/** An ARIA label for describing the button to screen readers  */
+	ariaLabel?: string | undefined;
+}
+
+declare function CalendarHeaderTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarTriggerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Calendar, CalendarDay, CalendarDayHeader, CalendarGrid, CalendarGridHeader, CalendarHeader, CalendarHeaderTrigger };

package/dist/Calendar/index.js

@@ -1,10 +1,8 @@
-// src/Calendar/Calendar.torp
-import Calendar_default from "./Calendar.torp";
-
-// src/Calendar/CalendarDay.torp
-import CalendarDay_default from "./CalendarDay.torp";
-export {
-  Calendar_default as Calendar,
-  CalendarDay_default as CalendarDay
-};
-//# sourceMappingURL=index.js.map
+import Calendar from "./Calendar.torp";
+import CalendarDay from "./CalendarDay.torp";
+import CalendarDayHeader from "./CalendarDayHeader.torp";
+import CalendarGrid from "./CalendarGrid.torp";
+import CalendarGridHeader from "./CalendarGridHeader.torp";
+import CalendarHeader from "./CalendarHeader.torp";
+import CalendarHeaderTrigger from "./CalendarHeaderTrigger.torp";
+export { Calendar, CalendarDay, CalendarDayHeader, CalendarGrid, CalendarGridHeader, CalendarHeader, CalendarHeaderTrigger };