@torpor/ui 0.1.7 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @torpor/ui
 
+## 0.2.0
+
+### Minor Changes
+
+- 51dbba7: Chore: drop CJS build and go ESM only
+
+### Patch Changes
+
+- e613d99: Feat: create UI component d.ts files
+- 55750d4: Feat: UI Notification component
+- 94e8f0b: !Refactor: renamed OffScreen to Drawer
+- ede55da: Feat: add some basic UI icons
+- 7000755: Feat: UI Breadcrumb component
+- 2232fae: Feat: UI Menu and MenuBar components
+- 5492230: Feat: UI Calendar component
+- Updated dependencies [be98b35]
+- Updated dependencies [51dbba7]
+- Updated dependencies [2298a87]
+- Updated dependencies [3a8431a]
+- Updated dependencies [eb58d37]
+- Updated dependencies [e0637be]
+- Updated dependencies [9fcc613]
+- Updated dependencies [f5f84e6]
+- Updated dependencies [6cc57ff]
+- Updated dependencies [c4f9d18]
+- Updated dependencies [5598bc9]
+- Updated dependencies [18f1ccf]
+- Updated dependencies [c2b5c02]
+- Updated dependencies [91d1536]
+- Updated dependencies [4dc16df]
+- Updated dependencies [543b229]
+- Updated dependencies [3cf3ae6]
+  - @torpor/view@0.3.0
+  - @torpor/unplugin@0.2.0
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/Accordion/Accordion.torp

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

package/dist/Accordion/AccordionContent.torp

@@ -21,7 +21,7 @@ export default function AccordionContent($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-content ${$props.class ?? ""}`.trim()}
 			role={$props.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
@@ -29,7 +29,7 @@ export default function AccordionContent($props: any) {
 			data-disabled={$state.dataDisabled}
 		>
 			@if ($state.expanded) {
-				<:slot />
+				<slot />
 			}
 		</div>
 	}

package/dist/Accordion/AccordionHeader.torp

@@ -23,12 +23,12 @@ export default function AccordionHeader($props: any) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 }

package/dist/Accordion/AccordionItem.torp

@@ -69,12 +69,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}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/Accordion/AccordionTrigger.torp

@@ -41,7 +41,7 @@ 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()}
@@ -53,7 +53,7 @@ export default function AccordionTrigger() {
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/Accordion/index.d.ts

@@ -0,0 +1,92 @@
+import { type SlotRender } from "@torpor/view";
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function Accordion(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function AccordionContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function AccordionHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function AccordionItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function AccordionTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/Breadcrumb/Breadcrumb.torp

@@ -0,0 +1,33 @@
+
+/**
+ *
+ * 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.
+ *
+ * @prop {string | undefined} ariaLabel -- An ARIA label for describing the popover to screen readers 
+ */
+export default function Breadcrumb($props: any) {
+	@render {
+		<nav
+			{$props.id}
+			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
+			aria-label={$props.ariaLabel}
+		>
+			<slot />
+		</nav>
+	}
+}

package/dist/Breadcrumb/BreadcrumbItem.torp

@@ -0,0 +1,19 @@
+
+/**
+ * An item in a breadcrumb, containing a link to one of the parent pages of the
+ * current page (or the current page).
+ *
+ * @prop {boolean | undefined} current -- Whether this is the current page
+ */
+export default function BreadcrumbItem($props: any) {
+	@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/dist/Breadcrumb/BreadcrumbSeparator.torp

@@ -0,0 +1,16 @@
+
+/**
+ * A separator between links in a Breadcrumb component. It is hidden from
+ * screen readers.
+ */
+export default function BreadcrumbSeparator($props: any) {
+	@render {
+		<div
+			{$props.id}
+			class={`torp-breadcrumb-separator ${$props.class ?? ""}`.trim()}
+			aria-hidden="true"
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,56 @@
+import { type SlotRender } from "@torpor/view";
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function Breadcrumb(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function BreadcrumbItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Mounts or hydrates the component into the supplied parent node.
+ * @param $parent -- The parent node.
+ * @param $anchor -- The node to mount the component before.
+ * @param $props -- The values that have been passed into the component as properties.
+ * @param $context -- Values that have been passed into the component from its ancestors.
+ * @param $slots -- Functions for rendering children into slot nodes within the component.
+ */
+declare function BreadcrumbSeparator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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,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/dist/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>
+	}
+}