@torpor/ui 0.3.6 → 0.4.0

package/dist/Charts/index.d.ts

@@ -0,0 +1,220 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface BarChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	series: DataSeries[],
+	height?: number,
+	width?: number,
+	xLabel?: string,
+	yLabel?: string,
+	maxValue?: number,
+	stepCount?: number,
+	stepValue?: number,
+	hideXAxis?: boolean,
+	hideYAxis?: boolean,
+	showHLines?: boolean,
+	showVLines?: boolean,
+}
+
+declare function BarChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: BarChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface GridLinesProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	showHLines?: boolean,
+	showVLines?: boolean,
+	width: number;
+	labels: string[];
+	xStepValue: number;
+	xStepLabels: number[];
+	yStepValue: number;
+	yStepLabels: number[];
+	itemWidth: number;
+	valueHeight: number;
+	chartLeft: number;
+	chartBottom: number;
+	type: string;
+}
+
+declare function GridLines(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: GridLinesProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface LineChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	series: DataSeries[],
+	height?: number,
+	width?: number,
+	xLabel?: string,
+	yLabel?: string,
+	maxValue?: number,
+	stepCount?: number,
+	stepValue?: number,
+	showPoints?: boolean,
+	hideXAxis?: boolean,
+	hideYAxis?: boolean,
+	showHLines?: boolean,
+	showVLines?: boolean,
+}
+
+declare function LineChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: LineChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PieChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	data: PieData[],
+	size?: number,
+	radius?: number,
+	cutout?: number,
+}
+
+declare function PieChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PieChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ScatterChartProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	series: DataSeries[],
+	height?: number,
+	width?: number,
+	xLabel?: string,
+	yLabel?: string,
+	xStepCount?: number,
+	xStepValue?: number,
+	yStepCount?: number,
+	yStepValue?: number,
+	hideXAxis?: boolean,
+	hideYAxis?: boolean,
+	showHLines?: boolean,
+	showVLines?: boolean,
+}
+
+declare function ScatterChart(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ScatterChartProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SparkLineProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue,
+	/** Styles for the root element */
+	style?: StyleValue,
+	data: number[];
+	color?: string,
+	height?: number,
+	width?: number,
+}
+
+declare function SparkLine(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SparkLineProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface XAxisProps {
+	showAxis: boolean,
+	height: number,
+	width: number,
+	itemWidth: number,
+	textHeight: number,
+	xLabel: string,
+	labels: string[] ,
+	stepLabels:number[] ,
+	stepValue: number,
+	chartLeft: number,
+	chartBottom: number,
+}
+
+declare function XAxis(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: XAxisProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface YAxisProps {
+	showAxis: boolean,
+	valueHeight: number,
+	textHeight: number,
+	yLabel: string,
+	stepLabels: number[],
+	stepValue: number,
+	chartLeft: number,
+	chartBottom: number,
+}
+
+declare function YAxis(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: YAxisProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { BarChart, GridLines, LineChart, PieChart, ScatterChart, SparkLine, XAxis, YAxis };

package/dist/Charts/index.js

@@ -0,0 +1,34 @@
+// src/Charts/BarChart.torp
+import BarChart_default from "./BarChart.torp";
+
+// src/Charts/GridLines.torp
+import GridLines_default from "./GridLines.torp";
+
+// src/Charts/LineChart.torp
+import LineChart_default from "./LineChart.torp";
+
+// src/Charts/PieChart.torp
+import PieChart_default from "./PieChart.torp";
+
+// src/Charts/ScatterChart.torp
+import ScatterChart_default from "./ScatterChart.torp";
+
+// src/Charts/SparkLine.torp
+import SparkLine_default from "./SparkLine.torp";
+
+// src/Charts/XAxis.torp
+import XAxis_default from "./XAxis.torp";
+
+// src/Charts/YAxis.torp
+import YAxis_default from "./YAxis.torp";
+export {
+  BarChart_default as BarChart,
+  GridLines_default as GridLines,
+  LineChart_default as LineChart,
+  PieChart_default as PieChart,
+  ScatterChart_default as ScatterChart,
+  SparkLine_default as SparkLine,
+  XAxis_default as XAxis,
+  YAxis_default as YAxis
+};
+//# sourceMappingURL=index.js.map

package/dist/Charts/index.js.map

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

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/TextArea.torp

@@ -19,6 +19,8 @@ interface TextAreaProps {
 	placeholder?: string,
 	/** Whether the input should be readonly */
 	readonly?: boolean,
+	/** Whether the input's value is required */
+	required?: boolean,
 	/** The maximum number of characters allowed for the input value */
 	maxlength?: number,
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */
@@ -94,6 +96,7 @@ export default function TextArea($props: TextAreaProps | undefined) {
 			{$props?.rows}
 			{$props?.placeholder}
 			{$props?.readonly}
+			{$props?.required}
 			{$props?.maxlength}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}

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;
@@ -322,6 +344,8 @@ interface TextAreaProps {
 	placeholder?: string,
 	/** Whether the input should be readonly */
 	readonly?: boolean,
+	/** Whether the input's value is required */
+	required?: boolean,
 	/** The maximum number of characters allowed for the input value */
 	maxlength?: number,
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */
@@ -343,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