@torpor/ui 0.1.7 → 0.2.1

package/src/Accordion/AccordionItem.torp

@@ -1,4 +1,19 @@
-import { AccordionContextName, AccordionItemContextName, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
+import { AccordionContextName, AccordionItemContextName, type ItemState, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
+
+interface AccordionItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
+	index?: number,
+	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
+	value?: string,
+	/** If set to true, the user cannot interact with this AccordionItem */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
 
 /**
  * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
@@ -13,17 +28,16 @@ import { AccordionContextName, AccordionItemContextName, type AccordionContext,
  * 	<AccordionContent />
  * </AccordionItem>
  * ```
- *
- * @prop {number} [index] -- The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically
- * @prop {string} [value] -- A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index
- * @prop {boolean} [disabled] -- If set to true, the user cannot interact with this AccordionItem
- * @prop {(boolean) => void} [ontoggle] -- Raised when this item is opened or closed
  */
-export default function AccordionItem($props: any) {
+export default function AccordionItem($props: AccordionItemProps) {
+	$props ??= $watch({});
+
 	let $state: ItemState = $watch({
 		index: -1,
 		value: "",
 		expanded: false,
+		headerId: "",
+		contentId: "",
 		disabled: $props.disabled,
 		parentDisabled: false,
 		get dataState() {
@@ -69,12 +83,12 @@ export default function AccordionItem($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Accordion/AccordionTrigger.torp

@@ -1,20 +1,28 @@
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
  */
-export default function AccordionTrigger() {
-	let button: HTMLButtonElement;
-
+export default function AccordionTrigger($props: AccordionTriggerProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
+	let button: HTMLButtonElement;
+
 	// Get stuff out of the AccordionItemContext
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionTrigger must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state;
+	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in AccordionContent
 	$state.headerId = $props.id;
@@ -41,19 +49,19 @@ export default function AccordionTrigger() {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-trigger ${$props.class ?? ""}`.trim()}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
-			aria-disabled={$state.disabled}
+			aria-disabled={$state.disabled ? "true" : undefined}
 			aria-controls={$state.contentId}
 			data-state={$state.dataState}
-			data-disabled={$state.disabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/Accordion/AccordionTypes.ts

@@ -25,6 +25,8 @@ export interface ItemState {
 	index: number;
 	value: string;
 	expanded: boolean;
+	headerId: string;
+	contentId: string;
 	disabled: boolean;
 	parentDisabled: boolean;
 	dataState: "open" | "closed";

package/src/Breadcrumb/Breadcrumb.torp

@@ -0,0 +1,42 @@
+
+interface BreadcrumbProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the popover to screen readers  */
+	ariaLabel?: string | undefined,
+}
+
+/**
+ *
+ * A list of links to the parent pages of the current page in hierarchical order.
+ *
+ * See [the WAI ARIA guidelines for Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
+ *
+ * The structure of a Breadcrumb is:
+ *
+ * ```
+ * <Breadcrumb>
+ *     <BreadcrumbItem />
+ *     <BreadcrumbSeparator /> (optional)
+ *     <BreadcrumbItem />
+ * 	...
+ * </Breadcrumb>
+ * ```
+ *
+ * You can separate BreadcrumbItems using BreadcrumbSeparators or by using CSS.
+ */
+export default function Breadcrumb($props: BreadcrumbProps) {
+	$props ??= $watch({});
+
+	@render {
+		<nav
+			{$props.id}
+			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
+			aria-label={$props.ariaLabel}
+		>
+			<slot />
+		</nav>
+	}
+}

package/src/Breadcrumb/BreadcrumbItem.torp

@@ -0,0 +1,28 @@
+
+interface BreadcrumbItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this is the current page */
+	current?: boolean,
+}
+
+/**
+ * An item in a breadcrumb, containing a link to one of the parent pages of the
+ * current page (or the current page).
+ */
+export default function BreadcrumbItem($props: BreadcrumbItemProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
+			aria-current={$props.current ? "page" : undefined}
+			data-current={$props.current ? "current" : undefined}
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Breadcrumb/BreadcrumbSeparator.torp

@@ -0,0 +1,25 @@
+
+interface BreadcrumbSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * A separator between links in a Breadcrumb component. It is hidden from
+ * screen readers.
+ */
+export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-breadcrumb-separator ${$props.class ?? ""}`.trim()}
+			aria-hidden="true"
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Breadcrumb/index.ts

@@ -0,0 +1,5 @@
+import Breadcrumb from "./Breadcrumb.torp";
+import BreadcrumbItem from "./BreadcrumbItem.torp";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.torp";
+
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator };

package/src/Calendar/Calendar.torp

@@ -0,0 +1,273 @@
+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
+
+interface CalendarProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+export default function Calendar($props: CalendarProps) {
+	$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));
+
+	// A note on dates:
+	// * value is the selected value
+	// * activeDate is the date that is active when the user is navigating via keyboard
+	// * 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() {
+		//	// TODO: $cache
+		//	return buildDays($state.visibleDate, $props.startOfWeek)
+		//},
+	});
+
+	let visibleStartDate = $props.value;
+	let visibleEndDate = $props.value;
+	let container: HTMLElement;
+	let refocus = false;
+
+	const context: CalendarContext = {
+		registerDay
+	};
+	$context[CalendarContextName] = context;
+
+	$run(() => {
+		$state.days = buildDays($state.visibleDate, $props.startOfWeek)
+
+		// HACK: Shouldn't need this
+		if (refocus) {
+			refocus = false;
+			const el = container.getElementsByClassName("active")[0];
+			if (el && el.children[0] instanceof HTMLElement) {
+				el.children[0].focus();
+			}
+		}
+	});
+
+	function registerDay(date: ReactiveDate, setActive: (value: boolean) => void) {
+		const day = $state.days.find((day) => areDatesEqual(day.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);
+
+		// Also set the active date so that the user knows where they are
+		setActiveDate(date);
+
+		if ($props.onchange) $props.onchange(value);
+	}
+
+	function setActiveDate(date: Date) {
+		$state.activeDate = new ReactiveDate(date);
+
+		// If the selected date is outside the visible date range, move the date range
+		if (date < visibleStartDate || date > visibleEndDate) {
+			refocus = true;
+			$state.visibleDate = new ReactiveDate(date);
+			if ($props.onchangedate) $props.onchangedate(date);
+		}
+
+		$state.days.forEach((day) => {
+			const active = areDatesEqual(day.date, new Date(date));
+			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 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);
+	}
+
+	async function handleDayClick(date: ReactiveDate) {
+		if (!$props.selectable) return;
+
+		setValue(date);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (!$props.selectable) return;
+
+		switch (e.key) {
+			case "Enter": {
+				e.preventDefault();
+				setValue($state.activeDate);
+				break;
+			}
+			case "Esc":
+			case "Escape": {
+				e.preventDefault();
+				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)
+				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)
+				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)
+				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)
+				setActiveDate(newDate);
+				break;
+			}
+		}
+	}
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-calendar ${$props.class ?? ""}`.trim()}
+			&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 ?? ""}`.trim()}
+				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>
+		</div>
+	}
+
+	@style {
+		.torp-calendar-grid {
+			display: grid;
+			grid-template-columns: repeat(7, 1fr);
+		}
+	}
+}

package/src/Calendar/CalendarDay.torp

@@ -0,0 +1,75 @@
+import { areDatesEqual } from "../utils/dateUtils";
+import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
+
+interface CalendarDayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+export default function CalendarDay($props: CalendarDayProps) {
+	$props ??= $watch({});
+	$props.date ??= new Date();
+	$props.selectable ??= false;
+	$props.muted ??= false;
+	$props.active ??= false;
+	$props.events ??= [];
+
+	// HACK: can't unwrap in @render
+	let date = $unwrap($props.date);
+
+	// 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);
+
+	// 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);
+		//}
+	}
+
+	function isToday() {
+		const today = new Date();
+		return areDatesEqual(date, today);
+	}
+
+	async function handleClick() {
+		//dispatch("click", date);
+		if ($props.onclick) $props.onclick($props.date);
+	}
+
+	async function handleKey() {
+		//dispatch("click", date);
+		if ($props.onkeydown) $props.onkeydown();
+	}
+
+	@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>
+			}
+			<ul class={`torp-calendar-day-events ${$props.class ?? ""}`.trim()}>
+				@for (ev of $props.events) {
+					<li title={ev.content} />
+				}
+			</ul>
+		</div>
+	}
+}

package/src/Calendar/CalendarTypes.ts

@@ -0,0 +1,22 @@
+export const CalendarContextName = "Calendar";
+
+export interface CalendarContext {
+	// 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;
+}
+
+export interface DayState {
+	date: Date;
+	muted: boolean;
+	state: {
+		active: boolean;
+	};
+	setActive?: (value: boolean) => void;
+}
+
+export interface CalendarEvent {
+	date: Date;
+	content: string;
+	color: string;
+}

package/src/Calendar/index.ts

@@ -0,0 +1,4 @@
+import Calendar from "./Calendar.torp";
+import CalendarDay from "./CalendarDay.torp";
+
+export { Calendar, CalendarDay };

package/src/Dialog/Dialog.torp

@@ -4,6 +4,17 @@ import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
 import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
 import { DialogContextName, type DialogContext, type DialogState } from "./DialogTypes";
 
+interface DialogProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the popover to screen readers  */
+	ariaLabel?: string,
+	/** Whether the dialog should alert the user via the screen reader */
+	alert?: boolean,
+}
+
 /**
  * Content for a window displayed in a Popover.
  * 
@@ -21,10 +32,9 @@ import { DialogContextName, type DialogContext, type DialogState } from "./Dialo
  * </Dialog>
  * ```
  * 
- * @prop {string | undefined} ariaLabel -- An ARIA label for describing the popover to screen readers 
- * @prop {boolean} alert -- Whether the dialog should alert the user via the screen reader
  */
-export default function Dialog($props: any) {
+export default function Dialog($props: DialogProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 	$props.dialog ??= false;
 
@@ -138,7 +148,7 @@ export default function Dialog($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-dialog ${$props.class ?? ""}`.trim()}
 			tabindex="0"
 			role={$props.alert ? "alertdialog" : "dialog"}
@@ -147,10 +157,10 @@ export default function Dialog($props: any) {
 			aria-labelledby={!$props.ariaLabel && $state.headerId ? $state.headerId : undefined}
 			aria-describedby={$state.bodyId ? $state.bodyId : undefined}
 			onkeydown={handleKey}
-			:onmount={(el) => trapFocus(el, trapFocusOptions)}
+			onmount={(el) => trapFocus(el, trapFocusOptions)}
 			&ref={div}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }