@torpor/ui 0.1.7 → 0.2.1

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,84 @@
+import { type SlotRender } from "@torpor/view";
+
+
+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.
+ */
+declare function Breadcrumb(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: BreadcrumbProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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).
+ */
+declare function BreadcrumbItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: BreadcrumbItemProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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.
+ */
+declare function BreadcrumbSeparator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: BreadcrumbSeparatorProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator };

package/dist/Breadcrumb/index.js

@@ -0,0 +1,14 @@
+// src/Breadcrumb/Breadcrumb.torp
+import Breadcrumb_default from "./Breadcrumb.torp";
+
+// src/Breadcrumb/BreadcrumbItem.torp
+import BreadcrumbItem_default from "./BreadcrumbItem.torp";
+
+// src/Breadcrumb/BreadcrumbSeparator.torp
+import BreadcrumbSeparator_default from "./BreadcrumbSeparator.torp";
+export {
+  Breadcrumb_default as Breadcrumb,
+  BreadcrumbItem_default as BreadcrumbItem,
+  BreadcrumbSeparator_default as BreadcrumbSeparator
+};
+//# sourceMappingURL=index.js.map

package/dist/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/dist/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/dist/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/dist/Calendar/index.d.ts

@@ -0,0 +1,36 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface CalendarProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+declare function Calendar(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CalendarDayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+declare function CalendarDay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CalendarDayProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Calendar, CalendarDay };

package/dist/Calendar/index.js

@@ -0,0 +1,10 @@
+// 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

package/dist/Calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/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>
 	}
 }

package/dist/Dialog/DialogBody.torp

@@ -1,13 +1,21 @@
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
+interface DialogBodyProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the body content will be announced by screen readers when the Dialog is opened */
+	ariaAnnounce?: boolean,
+}
+
 /**
  * The body information for a Dialog. Content in the body will be announced by
  * screen readers when the Dialog is opened, unless ariaAnnounce is false.
- * 
- * @prop {boolean} ariaAnnounce -- Whether the body content will be announced by screen readers when the Dialog is opened
  */
-export default function DialogBody($props: any) {
+export default function DialogBody($props: DialogBodyProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 	$props.ariaAnnounce ??= true;
 
@@ -25,10 +33,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/dist/Dialog/DialogButton.torp

@@ -1,13 +1,25 @@
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
+interface DialogButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
+	value?: any,
+	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
+	type?: "confirm" | "cancel",
+	/** Whether this button is disabled */
+	disabled?: boolean,
+}
+
 /**
  * A button that is placed in a DialogFooter and signals a response by a user.
  * 
- * @prop {any | undefined} value -- The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover
- * @prop {"confirm" | "cancel" | undefined} type -- "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key
- * @prop {boolean} disabled -- Whether this button is disabled
  */
-export default function DialogButton($props: any) {
+export default function DialogButton($props: DialogButtonProps) {
+	$props ??= $watch({});
+
 	let button: HTMLButtonElement;
 
 	// Get stuff out of the DialogContext
@@ -36,13 +48,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/dist/Dialog/DialogFooter.torp

@@ -1,13 +1,23 @@
+
+interface DialogFooterProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The footer for a Dialog, which may contain one or more DialogButtons.
  */
-export default function DialogFooter($props: any) {
+export default function DialogFooter($props: DialogFooterProps) {
+	$props ??= $watch({});
+
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }