@torpor/ui 0.1.6 → 0.2.0

package/src/Calendar/Calendar.torp

@@ -0,0 +1,265 @@
+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
+
+export default function Calendar() {
+	$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,67 @@
+import { areDatesEqual } from "../utils/dateUtils";
+import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
+
+export default function CalendarDay() {
+	$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

@@ -138,7 +138,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 +147,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>
 	}
 }

package/src/Dialog/DialogBody.torp

@@ -25,10 +25,10 @@ export default function DialogBody($props: any) {
 
 	@render {
 		<div
-			id={$props.id} 
+			{$props.id} 
 			class={`torp-dialog-body ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Dialog/DialogButton.torp

@@ -36,13 +36,13 @@ export default function DialogButton($props: any) {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-dialog-button ${$props.class ?? ""}`.trim()}
 			disabled={$props.disabled}
 			onclick={handleClick}
 			&ref={button}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/Dialog/DialogFooter.torp

@@ -4,10 +4,10 @@
 export default function DialogFooter($props: any) {
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Dialog/DialogHeader.torp

@@ -25,10 +25,10 @@ export default function DialogHeader($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Disclosure/Disclosure.torp

@@ -0,0 +1,69 @@
+import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+
+/**
+ * An interactive header that enables users to reveal or hide an associated section of content.
+ *
+ * See [the WAI ARIA guidelines for Disclosures](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+ *
+ * The structure of a Disclosure is:
+ *
+ * ```
+ * <Disclosure>
+ *     <DisclosureHeader>
+ *         <DisclosureTrigger />
+ *     </DisclosureHeader>
+ *     <DisclosureContent />
+ * </Disclosure>
+ * ```
+ *
+ * @prop {boolean} [expanded] -- Whether the Disclosure is expanded and its content visible
+ * @prop {boolean} [disabled] -- If set to true, the user cannot interact with this Disclosure
+ * @prop {(boolean) => void} [ontoggle] -- Raised when this item is opened or closed
+ */
+export default function Disclosure($props: any) {
+	$props.expanded ??= false;
+	$props.disabled ??= false;
+
+	let $state: DisclosureState = $watch({
+		expanded: $props.expanded && $props.expanded !== "false",
+		disabled: $props.disabled,
+		get dataState() {
+			return this.expanded ? "open" : "closed";
+		},
+	});
+
+	// Update $state with $props
+	$run(() => {
+		$state.expanded = $props.expanded && $props.expanded !== "false";
+		$state.disabled = $props.disabled;
+	});
+
+	// Put stuff into a DisclosureContext
+	const itemContext: DisclosureContext = {
+		state: $state,
+	};
+	$context[DisclosureContextName] = itemContext;
+
+	// Dispatch the toggle event when the value of expanded changes
+	let firstToggle = true;
+	$run(() => {
+		const ev = $props.ontoggle;
+		const expanded = $state.expanded;
+		if (firstToggle) {
+			firstToggle = false;
+		} else if (ev) {
+			ev(expanded);
+		}
+	});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-disclosure-item ${$props.class ?? ""}`.trim()}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Disclosure/DisclosureContent.torp

@@ -0,0 +1,36 @@
+import getId from "../utils/getId";
+import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+
+/**
+ * Content for a Disclosure, which can be revealed or hidden by an associated DisclosureTrigger.
+ *
+ * @prop {string} [id] -- An ID for the DisclosureContent's div container
+ * @prop {boolean} [ariaRegion] -- Whether this content should act as a region. Set this when the content contains heading elements or a nested Disclosure
+ */
+export default function DisclosureContent($props: any) {
+	$props.id ||= getId();
+
+	const context = $context[DisclosureContextName] as DisclosureContext;
+	if (!context) {
+		throw new Error("DisclosureContent must be contained within a Disclosure");
+	}
+	let $state = $context[DisclosureContextName].state
+
+	// Set the content ID so that it can be used with aria-controls in DisclosureTrigger
+	$state.contentId = $props.id;
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-disclosure-content ${$props.class ?? ""}`.trim()}
+			role={$props.ariaRegion ? "region" : undefined}
+			aria-labelledby={$state.headerId}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			@if ($state.expanded) {
+				<slot />
+			}
+		</div>
+	}
+}

package/src/Disclosure/DisclosureHeader.torp

@@ -0,0 +1,34 @@
+import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+
+/**
+ * The header for a Disclosure, which contains the DisclosureTrigger.
+ *
+ * The structure of a DisclosureHeader is:
+ * 
+ * ```
+ * <DisclosureHeader>
+ *    <DisclosureTrigger />
+ * </DisclosureHeader>
+ * ```
+ *
+ * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
+ */
+export default function DisclosureHeader($props: any) {
+	const context = $context[DisclosureContextName] as DisclosureContext;
+	if (!context) {
+		throw new Error("DisclosureHeader must be contained within a Disclosure");
+	}
+	let $state = $context[DisclosureContextName].state
+
+	@render {
+		@// TODO: $props.as
+		<h4
+			{$props.id}
+			class={`torp-disclosure-header ${$props.class ?? ""}`.trim()}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			<slot />
+		</h4>
+	}
+}

package/src/Disclosure/DisclosureTrigger.torp

@@ -0,0 +1,36 @@
+import getId from "../utils/getId";
+import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+
+/**
+ * A header button for a Disclosure, which can be used to reveal or hide an associated DisclosureContent.
+ */
+export default function DisclosureTrigger() {
+	$props.id ||= getId();
+
+	// Get stuff out of the DisclosureContext
+	const context = $context[DisclosureContextName] as DisclosureContext;
+	if (!context) {
+		throw new Error("DisclosureTrigger must be contained within a Disclosure");
+	}
+	let $state = $context[DisclosureContextName].state;
+
+	// Set the header ID so that it can be used with aria-labelledby in DisclosureContent
+	$state.headerId = $props.id;
+
+	@render {
+		<button
+			type="button"
+			{$props.id}
+			class={`torp-disclosure-trigger ${$props.class ?? ""}`.trim()}
+			disabled={$state.disabled || $state.parentDisabled}
+			aria-expanded={$state.expanded.toString()}
+			aria-disabled={$state.disabled}
+			aria-controls={$state.contentId}
+			data-state={$state.dataState}
+			data-disabled={$state.disabled}
+			onclick={() => $state.expanded = !$state.expanded}
+		>
+			<slot />
+		</button>
+	}
+}

package/src/Disclosure/DisclosureTypes.ts

@@ -0,0 +1,14 @@
+export const DisclosureContextName = "Disclosure";
+
+export interface DisclosureContext {
+	/** The reactive state for a Disclosure */
+	state: DisclosureState;
+}
+
+export interface DisclosureState {
+	headerId: string;
+	contentId: string;
+	expanded: boolean;
+	disabled: boolean;
+	dataState: "open" | "closed";
+}

package/src/Disclosure/index.ts

@@ -0,0 +1,6 @@
+import Disclosure from "./Disclosure.torp";
+import DisclosureContent from "./DisclosureContent.torp";
+import DisclosureHeader from "./DisclosureHeader.torp";
+import DisclosureTrigger from "./DisclosureTrigger.torp";
+
+export { Disclosure, DisclosureHeader, DisclosureTrigger, DisclosureContent };

package/{dist/Offscreen/Offscreen.torp → src/Drawer/Drawer.torp}

@@ -1,6 +1,6 @@
 
-export default function Offscreen($props: any) {
-	$props.visible ||= true;
+export default function Drawer($props: any) {
+	$props.visible ??= true;
 	$props.position ||= "left";
 
 	let offscreen: HTMLElement | undefined;
@@ -66,25 +66,16 @@ export default function Offscreen($props: any) {
 		}
 	}
 
-	function close() {
-		$props.visible = false;
-		if ($props.onclose) {
-			$props.onclose()
-		}
-	}
-
 	@render {
 		@if ($props.visible) {
-			<div onclick={close} >
-				<div
-					id={$props.id}
-					class={`torp-offscreen ${$props.class ?? ""}`.trim()}
-					style="position: fixed;"
-					:transition={transitionArgs()}
-					&ref={offscreen}
-				>
-					<:slot />
-				</div>
+			<div
+				{$props.id}
+				class={`torp-offscreen ${$props.class ?? ""}`.trim()}
+				style="position: fixed;"
+				transition={transitionArgs()}
+				&ref={offscreen}
+			>
+				<slot />
 			</div>
 		}
 	}

package/src/Drawer/index.ts

@@ -0,0 +1,3 @@
+import Drawer from "./Drawer.torp";
+
+export { Drawer };