@torpor/ui 0.1.6 → 0.2.0

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>
+	}
+}

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,38 @@
+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 Calendar(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, 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 CalendarDay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$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

@@ -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/dist/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/dist/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/dist/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/dist/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/dist/Dialog/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 Dialog(
+	$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 DialogBody(
+	$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 DialogButton(
+	$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 DialogFooter(
+	$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 DialogHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Dialog, DialogBody, DialogButton, DialogFooter, DialogHeader };

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

@@ -0,0 +1,74 @@
+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 Disclosure(
+	$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 DisclosureContent(
+	$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 DisclosureHeader(
+	$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 DisclosureTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Disclosure, DisclosureContent, DisclosureHeader, DisclosureTrigger };

package/dist/Disclosure/index.js

@@ -0,0 +1,18 @@
+// src/Disclosure/Disclosure.torp
+import Disclosure_default from "./Disclosure.torp";
+
+// src/Disclosure/DisclosureContent.torp
+import DisclosureContent_default from "./DisclosureContent.torp";
+
+// src/Disclosure/DisclosureHeader.torp
+import DisclosureHeader_default from "./DisclosureHeader.torp";
+
+// src/Disclosure/DisclosureTrigger.torp
+import DisclosureTrigger_default from "./DisclosureTrigger.torp";
+export {
+  Disclosure_default as Disclosure,
+  DisclosureContent_default as DisclosureContent,
+  DisclosureHeader_default as DisclosureHeader,
+  DisclosureTrigger_default as DisclosureTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/Disclosure/index.js.map

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

package/{src/Offscreen/Offscreen.torp → dist/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/dist/Drawer/index.d.ts

@@ -0,0 +1,20 @@
+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 Drawer(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Drawer };

package/dist/Drawer/index.js

@@ -0,0 +1,6 @@
+// src/Drawer/Drawer.torp
+import Drawer_default from "./Drawer.torp";
+export {
+  Drawer_default as Drawer
+};
+//# sourceMappingURL=index.js.map