@torpor/ui 0.3.7 → 0.4.0

package/dist/Accordion/Accordion.torp

@@ -11,11 +11,11 @@ interface AccordionProps {
 	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
-	value?: string | string[],
+	value?: any | any[],
 	/** If set to true, the user cannot interact with any items in the Accordion */
 	disabled?: boolean,
 	/** Raised when the expanded item(s) have changed */
-	onchange?: (value: string | string[]) => void,
+	onchange?: (value: any | any[]) => void,
 }
 
 /**
@@ -41,9 +41,15 @@ export default function Accordion($props: AccordionProps | undefined) {
 	let type = $props?.type ?? "single";
 
 	let $state = $watch({
-		value: $props?.value ?? (type === "single" ? "" : [] as string[])
+		value: $props?.value ?? (type === "single" ? undefined : [])
 	});
 
+	// Update $state on $props change
+	$run(() => {
+		$state.value = $props?.value ?? (type === "single" ? undefined : [])
+	});
+
+	// Update $props on $state change
 	$run(() => {
 		if ($props !== undefined) {
 			$props.value = $state.value;
@@ -65,48 +71,43 @@ export default function Accordion($props: AccordionProps | undefined) {
 	$context[AccordionContextName] = context;
 
 	$run(() => {
-		// HACK: This should probably be done with setters?
-		let newValue = $state.value;
+		// Get the value to ensure that this effect will be subscribed
+		let value = $state.value;
 
-		// Get the value
+		// And set the expanded item(s)
 		switch (type) {
 			case "single": {
-				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-				newValue = newValue.toString();
 				for (let item of itemStates) {
-					item.expanded = item.value === newValue;
+					item.expanded = item.value === value;
 				}
 				break;
 			}
 			case "multiple": {
-				// Ensure the value passed in is an array
-				if (!Array.isArray(newValue)) {
-					newValue = [newValue];
+				if (!Array.isArray(value)) {
+					value = [value];
 				}
 				for (let item of itemStates) {
-					item.expanded = newValue.indexOf(item.value) !== -1;
+					item.expanded = value.indexOf(item.value) !== -1;
 				}
 				break;
 			}
 		}
-
-		// Set the value
-		$state.value = newValue;
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
+		let disabled = $props?.disabled;
+		itemStates.forEach((s) => s.parentDisabled = disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props?.onchange;
+		const onchange = $props?.onchange;
 		const value = $state.value;
 		if (firstChange) {
 			firstChange = false;
-		} else if (ev) {
-			ev(value);
+		} else if (onchange) {
+			onchange(value);
 		}
 	});
 
@@ -118,11 +119,11 @@ export default function Accordion($props: AccordionProps | undefined) {
 
 		// If a value wasn't set for the item, set it to the index
 		if (!itemState.value) {
-			itemState.value = itemState.index.toString();
+			itemState.value = itemState.index;
 		}
 
 		// If we have a value, set whether the item should be expanded
-		if ($state.value) {
+		if ($state.value !== undefined && $state.value !== null) {
 			switch (type) {
 				case "single": {
 					itemState.expanded = $state.value === itemState.value;
@@ -166,7 +167,7 @@ export default function Accordion($props: AccordionProps | undefined) {
 				break;
 			}
 			case "multiple": {
-				let newValue = [];
+				let value = [];
 				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) or if it
 					// was already expanded
@@ -174,10 +175,10 @@ export default function Accordion($props: AccordionProps | undefined) {
 						(item.value === toggleValue && !item.expanded) ||
 						(item.value !== toggleValue && item.expanded)
 					) {
-						newValue.push(item.value);
+						value.push(item.value);
 					}
 				}
-				$state.value = newValue.sort();
+				$state.value = value.sort();
 				break;
 			}
 		}

package/dist/Accordion/AccordionItem.torp

@@ -71,12 +71,12 @@ export default function AccordionItem($props: AccordionItemProps | undefined) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props?.ontoggle;
+		const ontoggle = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
-		} else if (ev) {
-			ev(expanded);
+		} else if (ontoggle) {
+			ontoggle(expanded);
 		}
 	});
 

package/dist/Accordion/AccordionTypes.ts

@@ -1,5 +1,5 @@
-export const AccordionContextName = "Accordion";
-export const AccordionItemContextName = "AccordionItem";
+export const AccordionContextName: unique symbol = Symbol.for("torp.Accordion");
+export const AccordionItemContextName: unique symbol = Symbol.for("torp.AccordionItem");
 
 export interface AccordionContext {
 	/** Called from an AccordionItem when it is added */
@@ -7,14 +7,14 @@ export interface AccordionContext {
 	/** Called from an AccordionItem when it is removed */
 	removeItem: (index: number) => void;
 	/** Called from an AccordionItem when it is toggled */
-	toggleItem: (value: string) => void;
+	toggleItem: (value: any) => void;
 	/** Called from an AccordionHeader when it receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 }
 
 export interface AccordionItemContext {
 	/** Raised when an AccordionItem is toggled */
-	toggleItem: (value: string) => void;
+	toggleItem: (value: any) => void;
 	/** Raised when an AccordionHeader receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 	/** The reactive state for an AccordionItem */
@@ -25,7 +25,7 @@ export interface AccordionItemContext {
 
 export interface ItemState {
 	index: number;
-	value: string;
+	value: any;
 	expanded: boolean;
 	headerId: string;
 	contentId: string;

package/dist/Accordion/index.d.ts

@@ -11,11 +11,11 @@ interface AccordionProps {
 	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
 	type?: "single" | "multiple",
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
-	value?: string | string[],
+	value?: any | any[],
 	/** If set to true, the user cannot interact with any items in the Accordion */
 	disabled?: boolean,
 	/** Raised when the expanded item(s) have changed */
-	onchange?: (value: string | string[]) => void,
+	onchange?: (value: any | any[]) => void,
 }
 
 /**

package/dist/Calendar/CalendarTypes.ts

@@ -1,4 +1,4 @@
-export const CalendarContextName = "Calendar";
+export const CalendarContextName: unique symbol = Symbol.for("torp.Calendar");
 
 export interface CalendarContext {
 	// The registerDay function is called from each CalendarDay to register itself with this

package/dist/{Chart → Charts}/GridLines.torp

@@ -32,6 +32,7 @@ export default function GridLines($props: GridLinesProps) {
 						y1={$props.chartBottom - i * $props.yStepValue * $props.valueHeight}
 						x2={$props.width ?? 0}
 						y2={$props.chartBottom - i * $props.yStepValue * $props.valueHeight}
+						stroke="currentcolor"
 					/>
 				}
 			}
@@ -44,6 +45,7 @@ export default function GridLines($props: GridLinesProps) {
 							y1={$props.chartBottom}
 							x2={$props.chartLeft + i * $props.xStepValue * $props.itemWidth}
 							y2={0}
+							stroke="currentcolor"
 						/>
 					}
 				} else {
@@ -53,6 +55,7 @@ export default function GridLines($props: GridLinesProps) {
 							y1={$props.chartBottom}
 							x2={$props.chartLeft + i * $props.itemWidth + ($props.type === "bar" ? 0 : $props.itemWidth / 2)}
 							y2={0}
+							stroke="currentcolor"
 						/>
 					}
 				}

package/dist/{Chart → Charts}/XAxis.torp

@@ -20,7 +20,13 @@ export default function XAxis($props: XAxisProps) {
 	@render {
 		<svg>
 			@if ($props.showAxis) {
-				<line x1={$props.chartLeft} y1={$props.chartBottom} x2={$props.width} y2={$props.chartBottom} />
+				<line
+					x1={$props.chartLeft}
+					y1={$props.chartBottom}
+					x2={$props.width}
+					y2={$props.chartBottom}
+					stroke="currentcolor"
+				/>
 			}
 			@if ($props.xLabel) {
 				<text

package/dist/{Chart → Charts}/YAxis.torp

@@ -13,7 +13,13 @@ export default function YAxis($props: YAxisProps) {
 	@render {
 		<svg>
 			@if ($props.showAxis) {
-				<line x1={$props.chartLeft} y1={$props.chartBottom} x2={$props.chartLeft} y2={0} />
+				<line
+					x1={$props.chartLeft}
+					y1={$props.chartBottom}
+					x2={$props.chartLeft}
+					y2={0}
+					stroke="currentcolor"
+				/>
 			}
 			@if ($props.yLabel) {
 				<text

package/dist/{Chart → Charts}/index.js

@@ -1,25 +1,25 @@
-// src/Chart/BarChart.torp
+// src/Charts/BarChart.torp
 import BarChart_default from "./BarChart.torp";
 
-// src/Chart/GridLines.torp
+// src/Charts/GridLines.torp
 import GridLines_default from "./GridLines.torp";
 
-// src/Chart/LineChart.torp
+// src/Charts/LineChart.torp
 import LineChart_default from "./LineChart.torp";
 
-// src/Chart/PieChart.torp
+// src/Charts/PieChart.torp
 import PieChart_default from "./PieChart.torp";
 
-// src/Chart/ScatterChart.torp
+// src/Charts/ScatterChart.torp
 import ScatterChart_default from "./ScatterChart.torp";
 
-// src/Chart/SparkLine.torp
+// src/Charts/SparkLine.torp
 import SparkLine_default from "./SparkLine.torp";
 
-// src/Chart/XAxis.torp
+// src/Charts/XAxis.torp
 import XAxis_default from "./XAxis.torp";
 
-// src/Chart/YAxis.torp
+// src/Charts/YAxis.torp
 import YAxis_default from "./YAxis.torp";
 export {
   BarChart_default as BarChart,

package/dist/Contextual/Contextual.torp

@@ -1,5 +1,6 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import { ContextualContextName, type Point, type ContextualContext, type ContextualState } from "./ContextualTypes";
+import { PopoutContextName, type PopoutContext } from "../utils/PopoutTypes";
 
 interface ContextualProps {
 	/** An ID for the root element */
@@ -62,11 +63,15 @@ export default function Contextual($props: ContextualProps | undefined) {
 		handleButton,
 		handleClickOutside,
 		state: $state,
-		modal: $props?.modal,
+		//modal: $props?.modal,
 		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
 	};
 	$context[ContextualContextName] = context;
 
+	// Set the context to pass down to items
+	let popoutContext: PopoutContext = context;
+	$context[PopoutContextName] = popoutContext;
+
 	// Dispatch the toggle event when the contextual is opened or closed
 	let firstToggle = true;
 	$run(() => {
@@ -90,11 +95,11 @@ export default function Contextual($props: ContextualProps | undefined) {
 		// Get the button's result
 		switch (type) {
 			case "confirm": {
-				result = value || true;
+				result = value ?? true;
 				break;
 			}
 			case "cancel": {
-				result = value || false;
+				result = value ?? false;
 				break;
 			}
 			default: {

package/dist/Contextual/ContextualTypes.ts

@@ -1,4 +1,4 @@
-export const ContextualContextName = "Contextual";
+export const ContextualContextName: unique symbol = Symbol.for("torp.Contextual");
 
 /** The shared context for popover components (Contextual, Prompt and Contextual) */
 export interface ContextualContext {

package/dist/Dialog/Dialog.torp

@@ -1,9 +1,8 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
 import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
-import { ModalContextName, type ModalContext } from "../Modal/ModalTypes";
-import { PopoverContextName } from "../Popover/PopoverTypes";
-import { DialogContextName, type DialogContext, type DialogState, type HandleButtonPress } from "./DialogTypes";
+import { PopoutContextName, type PopoutContext, type HandleButtonPress } from "../utils/PopoutTypes";
+import { DialogContextName, type DialogContext, type DialogState } from "./DialogTypes";
 
 interface DialogProps {
 	/** An ID for the root element */
@@ -48,20 +47,18 @@ export default function Dialog($props: DialogProps | undefined) {
 		focusableElements: []
 	};
 
-	// Maybe get stuff out of a Modal context
+	// Maybe get stuff out of a popout context
 	let modal = false;
-	let visible = true;
 	let handleButton: HandleButtonPress | undefined = undefined;
-	const modalContext = $context[ModalContextName] ?? $context[PopoverContextName] as ModalContext;
-	if (modalContext) {
+	const popoutContext = $context[PopoutContextName] as PopoutContext;
+	if (popoutContext) {
 		modal = true;
-		visible = modalContext.state.visible;
-		handleButton = modalContext.handleButton;
+		handleButton = popoutContext.handleButton;
 
-		modalContext.handleClickOutside = handleClickOutside;
-		// Set the focusFirstElement method in the ModalContext so that it can be
+		popoutContext.handleClickOutside = handleClickOutside;
+		// Set the focusFirstElement method in the PopoutContext so that it can be
 		// called after everything has been shown
-		modalContext.focusFirstElement = focusFirstElement;
+		popoutContext.focusFirstElement = focusFirstElement;
 	}
 
 	// Set the IDs for using in the Dialog's ARIA attributes
@@ -69,14 +66,13 @@ export default function Dialog($props: DialogProps | undefined) {
 		dialogId: $props?.id ?? defaultId,
 		headerId: "",
 		bodyId: "",
-		visible
-	})
+	});
 
 	// Set the context to pass down to items
 	let context: DialogContext = {
 		handleButton,
 		state: $state,
-		anchorElement: modalContext ? modalContext.anchorElement : undefined
+		anchorElement: popoutContext ? popoutContext.anchorElement : undefined
 	};
 	$context[DialogContextName] = context;
 
@@ -91,7 +87,7 @@ export default function Dialog($props: DialogProps | undefined) {
 		// the Esc key
 		e.preventDefault();
 		if (!modal) {
-			modalContext.state.visible = false;
+			popoutContext.state.visible = false;
 		}
 	}
 

package/dist/Dialog/DialogButton.torp

@@ -16,6 +16,8 @@ interface DialogButtonProps {
 	disabled?: boolean,
 	/** Raised when the button is clicked */
 	onclick?: (e: MouseEvent) => void,
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void,
 }
 
 /**
@@ -58,6 +60,7 @@ export default function DialogButton($props: DialogButtonProps | undefined) {
 			{$props?.style}
 			disabled={$props?.disabled}
 			onclick={handleClick}
+			{$props?.onkeydown}
 			&ref={button}
 		>
 			<slot />

package/dist/Dialog/DialogTypes.ts

@@ -1,6 +1,6 @@
-export const DialogContextName = "Dialog";
+import { type HandleButtonPress } from "../utils/PopoutTypes";
 
-export type HandleButtonPress = (type: "confirm" | "cancel" | undefined, value?: any) => void;
+export const DialogContextName: unique symbol = Symbol.for("torp.Dialog");
 
 export interface DialogContext {
 	handleButton?: HandleButtonPress;

package/dist/Dialog/index.d.ts

@@ -85,6 +85,8 @@ interface DialogButtonProps {
 	disabled?: boolean,
 	/** Raised when the button is clicked */
 	onclick?: (e: MouseEvent) => void,
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void,
 }
 
 /**

package/dist/Disclosure/Disclosure.torp

@@ -59,12 +59,12 @@ export default function Disclosure($props: DisclosureProps | undefined) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props?.ontoggle;
+		const ontoggle = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
-		} else if (ev) {
-			ev(expanded);
+		} else if (ontoggle) {
+			ontoggle(expanded);
 		}
 	});
 

package/dist/Disclosure/DisclosureTypes.ts

@@ -1,4 +1,4 @@
-export const DisclosureContextName = "Disclosure";
+export const DisclosureContextName: unique symbol = Symbol.for("torp.Disclosure");
 
 export interface DisclosureContext {
 	/** The reactive state for a Disclosure */

package/dist/Drawer/Drawer.torp

@@ -88,11 +88,11 @@ export default function Drawer($props: DrawerProps | undefined) {
 		// Get the button's result
 		switch (type) {
 			case "confirm": {
-				result = value || true;
+				result = value ?? true;
 				break;
 			}
 			case "cancel": {
-				result = value || false;
+				result = value ?? false;
 				break;
 			}
 			default: {

package/dist/Drawer/DrawerTypes.ts

@@ -1,4 +1,4 @@
-export const DrawerContextName = "Drawer";
+export const DrawerContextName: unique symbol = Symbol.for("torp.Drawer");
 
 /** The shared context for drawer components (Contextual, Prompt and Drawer) */
 export interface DrawerContext {

package/dist/Form/CheckBox.torp

@@ -79,8 +79,7 @@ export default function CheckBox($props: CheckBoxProps | undefined) {
 	@render {
 		<input
 			id={$props?.id ?? defaultId}
-			class={`torp-check-box
-			 ${$props?.class ?? ""}`.trim()}
+			class={["torp-check-box", $props?.class]}
 			type="checkbox"
 			{name}
 			&checked={$state.value}

package/dist/Form/Input.torp

@@ -71,7 +71,7 @@ export default function Input($props: InputProps | undefined) {
 	// NOTE: Adapted this from https://stackoverflow.com/a/57393751,
 	// not sure if it's still a good way to do things
 	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		$state.value = $props!.type?.match(/^(number|range)$/) ? +e.currentTarget.value : e.currentTarget.value;
+		$state.value = $props?.type?.match(/^(number|range)$/) ? +e.currentTarget.value : e.currentTarget.value;
 		if (formContext) {
 			formContext.validate();
 		}

package/dist/Form/MessageSummary.torp

@@ -0,0 +1,38 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { FormContextName, type FormContext } from "./FormTypes";
+
+interface MessageSummaryProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+}
+
+/**
+ * Shows all validation messages for a form in a list.
+ */
+export default function MessageSummary($props: MessageSummaryProps | undefined) {
+	// Get stuff out of the FormContext
+	const context = $context[FormContextName] as FormContext;
+	if (!context) {
+		throw new Error("MessageSummary must be contained within a Form");
+	}
+	const { state: $state } = context;
+
+	@render {
+		@if ($state.issues.length > 0) {
+			<ul 
+				{$props?.id}
+				class={["torp-message-summary", $props?.class]}
+				{$props?.style}
+			>
+				<slot />
+				@for (let issue of $state.issues) {
+					<li>{issue.message}</li>
+				}
+			</ul>
+		}
+	}
+}

package/dist/Form/index.d.ts

@@ -245,6 +245,28 @@ declare function Message(
 
 
 
+interface MessageSummaryProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+}
+
+/**
+ * Shows all validation messages for a form in a list.
+ */
+declare function MessageSummary(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: MessageSummaryProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 interface OptionProps {
 	/** An ID for the root element */
 	id?: string;
@@ -345,4 +367,4 @@ declare function TextArea(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { CheckBox, Field, File, Form, Hidden, Input, Label, Message, Option, Select, TextArea };
+export { CheckBox, Field, File, Form, Hidden, Input, Label, Message, MessageSummary, Option, Select, TextArea };

package/dist/Form/index.js

@@ -22,6 +22,9 @@ import Label_default from "./Label.torp";
 // src/Form/Message.torp
 import Message_default from "./Message.torp";
 
+// src/Form/MessageSummary.torp
+import MessageSummary_default from "./MessageSummary.torp";
+
 // src/Form/Option.torp
 import Option_default from "./Option.torp";
 
@@ -39,6 +42,7 @@ export {
   Input_default as Input,
   Label_default as Label,
   Message_default as Message,
+  MessageSummary_default as MessageSummary,
   Option_default as Option,
   Select_default as Select,
   TextArea_default as TextArea