@torpor/ui 0.3.7 → 1.0.0

package/dist/NavMenu/index.js

@@ -1,42 +1,11 @@
-// src/NavMenu/NavMenu.torp
-import NavMenu_default from "./NavMenu.torp";
-
-// src/NavMenu/NavMenuButton.torp
-import NavMenuButton_default from "./NavMenuButton.torp";
-
-// src/NavMenu/NavMenuElement.torp
-import NavMenuElement_default from "./NavMenuElement.torp";
-
-// src/NavMenu/NavMenuGroup.torp
-import NavMenuGroup_default from "./NavMenuGroup.torp";
-
-// src/NavMenu/NavMenuGroupHeader.torp
-import NavMenuGroupHeader_default from "./NavMenuGroupHeader.torp";
-
-// src/NavMenu/NavMenuLink.torp
-import NavMenuLink_default from "./NavMenuLink.torp";
-
-// src/NavMenu/NavMenuPopout.torp
-import NavMenuPopout_default from "./NavMenuPopout.torp";
-
-// src/NavMenu/NavMenuPopoutButton.torp
-import NavMenuPopoutButton_default from "./NavMenuPopoutButton.torp";
-
-// src/NavMenu/NavMenuPopoutContent.torp
-import NavMenuPopoutContent_default from "./NavMenuPopoutContent.torp";
-
-// src/NavMenu/NavMenuSeparator.torp
-import NavMenuSeparator_default from "./NavMenuSeparator.torp";
-export {
-  NavMenu_default as NavMenu,
-  NavMenuButton_default as NavMenuButton,
-  NavMenuElement_default as NavMenuElement,
-  NavMenuGroup_default as NavMenuGroup,
-  NavMenuGroupHeader_default as NavMenuGroupHeader,
-  NavMenuLink_default as NavMenuLink,
-  NavMenuPopout_default as NavMenuPopout,
-  NavMenuPopoutButton_default as NavMenuPopoutButton,
-  NavMenuPopoutContent_default as NavMenuPopoutContent,
-  NavMenuSeparator_default as NavMenuSeparator
-};
-//# sourceMappingURL=index.js.map
+import NavMenu from "./NavMenu.torp";
+import NavMenuButton from "./NavMenuButton.torp";
+import NavMenuElement from "./NavMenuElement.torp";
+import NavMenuGroup from "./NavMenuGroup.torp";
+import NavMenuGroupHeader from "./NavMenuGroupHeader.torp";
+import NavMenuLink from "./NavMenuLink.torp";
+import NavMenuPopout from "./NavMenuPopout.torp";
+import NavMenuPopoutContent from "./NavMenuPopoutContent.torp";
+import NavMenuPopoutTrigger from "./NavMenuPopoutTrigger.torp";
+import NavMenuSeparator from "./NavMenuSeparator.torp";
+export { NavMenu, NavMenuButton, NavMenuElement, NavMenuGroup, NavMenuGroupHeader, NavMenuLink, NavMenuPopout, NavMenuPopoutContent, NavMenuPopoutTrigger, NavMenuSeparator };

package/dist/Notification/Notification.torp

@@ -1,19 +1,19 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import { type NotificationContext, NotificationContextName } from "./NotificationTypes";
 
 interface NotificationProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the notification is visible */
-	visible?: boolean,
+	visible: Bindable<boolean | undefined>;
 	/** The duration, in milliseconds, to keep the notification visible */
-	duration?: number,
+	duration?: number;
 	/** Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button */
-	onclose?: () => void,
+	onclose?: () => void;
 }
 
 /**
@@ -26,25 +26,18 @@ export default function Notification($props: NotificationProps | undefined) {
 	let defaultDuration = 5000;
 
 	let $state = $watch({
-		visible: false
+		visible: $props?.visible ?? true,
 	});
 
-	$run(() => {
-		$state.visible = $props?.visible ?? true;
-	});
-	$run(() => {
-		if ($props !== undefined) {
-			$props.visible = $state.visible;
-		}
-	});
+	$bind($state, $props, "visible");
 
 	// Set the context to pass down to items
 	let context: NotificationContext = {
-		closeNotification
+		closeNotification,
 	};
 	$context[NotificationContextName] = context;
 
-	$mount(() => {
+	$onmount(() => {
 		setTimeout(closeNotification, $props?.duration ?? defaultDuration);
 	});
 
@@ -58,12 +51,7 @@ export default function Notification($props: NotificationProps | undefined) {
 
 	@render {
 		@if ($state.visible) {
-			<div 
-				{$props?.id}
-				class={["torp-notification", $props?.class]}
-				{$props?.style}
-				role="alert"
-			>
+			<div {$props?.id} class={["torp-notification", $props?.class]} {$props?.style} role="alert">
 				<slot />
 			</div>
 		}

package/dist/Notification/NotificationClose.torp

@@ -1,13 +1,15 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { NotificationContextName, type NotificationContext } from "./NotificationTypes";
+import { type NotificationContext, NotificationContextName } from "./NotificationTypes";
 
 interface NotificationCloseProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** An ARIA label for the close button, for screen readers when the button contains no text */
+	ariaLabel?: string;
 }
 
 /**
@@ -31,6 +33,7 @@ export default function NotificationClose($props: NotificationCloseProps | undef
 			class={["torp-notification-close", $props?.class]}
 			{$props?.style}
 			type="button"
+			aria-label={$props?.ariaLabel ?? "Dismiss"}
 			onclick={handleClick}
 		>
 			<slot />

package/dist/Notification/NotificationContainer.torp

@@ -4,9 +4,9 @@ interface NotificationContainerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -15,11 +15,7 @@ interface NotificationContainerProps {
  */
 export default function NotificationContainer($props: NotificationContainerProps | undefined) {
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-notification-container", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-notification-container", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Notification/NotificationContent.torp

@@ -4,9 +4,9 @@ interface NotificationContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -14,11 +14,7 @@ interface NotificationContentProps {
  */
 export default function NotificationContent($props: NotificationContentProps | undefined) {
 	@render {
-		<div 
-			{$props?.id}
-			class={["torp-notification-content", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-notification-content", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Notification/NotificationTypes.ts

@@ -1,4 +1,4 @@
-export const NotificationContextName = 'Notification';
+export const NotificationContextName = "Notification";
 
 export interface NotificationContext {
 	closeNotification: () => void;

package/dist/Notification/index.d.ts

@@ -5,15 +5,15 @@ interface NotificationProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the notification is visible */
-	visible?: boolean,
+	visible: Bindable<boolean | undefined>;
 	/** The duration, in milliseconds, to keep the notification visible */
-	duration?: number,
+	duration?: number;
 	/** Raised when the notification has closed, either after the duration has elapsed, or when the user has pressed the close button */
-	onclose?: () => void,
+	onclose?: () => void;
 }
 
 /**
@@ -36,9 +36,11 @@ interface NotificationCloseProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
+	/** An ARIA label for the close button, for screen readers when the button contains no text */
+	ariaLabel?: string;
 }
 
 /**
@@ -58,9 +60,9 @@ interface NotificationContainerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -81,9 +83,9 @@ interface NotificationContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -97,4 +99,5 @@ declare function NotificationContent(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Notification, NotificationClose, NotificationContainer, NotificationContent };
+export { Notification, NotificationClose, NotificationContainer, NotificationContent };
+export { default as showNotification } from "./showNotification";

package/dist/Notification/index.js

@@ -1,36 +1,26 @@
-// src/Notification/Notification.torp
-import Notification_default from "./Notification.torp";
-
-// src/Notification/NotificationClose.torp
-import NotificationClose_default from "./NotificationClose.torp";
-
-// src/Notification/NotificationContainer.torp
-import NotificationContainer_default from "./NotificationContainer.torp";
-
-// src/Notification/NotificationContent.torp
-import NotificationContent_default from "./NotificationContent.torp";
-
-// src/Notification/showNotification.ts
 import { mount } from "@torpor/view";
+import Notification from "./Notification.torp";
+import NotificationClose from "./NotificationClose.torp";
+import NotificationContainer from "./NotificationContainer.torp";
+import NotificationContent from "./NotificationContent.torp";
+//#region src/Notification/showNotification.ts
+/**
+* Shows a notification component in code.
+* @param notification The notification component
+* @param props The properties for the notification component
+* @param target The target element to show the notification in
+*/
 function showNotification(notification, props, target) {
-  if (!target) {
-    target = document.getElementsByClassName("torp-notification-container")[0];
-    if (!target) {
-      throw new Error("No notification container found");
-    }
-  }
-  var fragment = document.createDocumentFragment();
-  while (target.firstChild) {
-    fragment.append(target.firstChild);
-  }
-  mount(target, notification, props);
-  target.prepend(fragment);
+	if (!target) {
+		target = document.getElementsByClassName("torp-notification-container")[0];
+		if (!target) throw new Error("No notification container found");
+	}
+	var fragment = document.createDocumentFragment();
+	while (target.firstChild) fragment.append(target.firstChild);
+	mount(target, notification, props);
+	target.prepend(fragment);
 }
-export {
-  Notification_default as Notification,
-  NotificationClose_default as NotificationClose,
-  NotificationContainer_default as NotificationContainer,
-  NotificationContent_default as NotificationContent,
-  showNotification
-};
+//#endregion
+export { Notification, NotificationClose, NotificationContainer, NotificationContent, showNotification };
+
 //# sourceMappingURL=index.js.map

package/dist/Notification/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Notification/showNotification.ts"],"sourcesContent":["import { mount } from \"@torpor/view\";\n\n/**\n * Shows a notification component in code.\n * @param notification The notification component\n * @param props The properties for the notification component\n * @param target The target element to show the notification in\n */\nexport default function showNotification(notification: any, props: any, target?: Element): void {\n\tif (!target) {\n\t\t// Put the notification in the first NotificationContainer, or the\n\t\t// document body if there are no NotificationContainers\n\t\ttarget = document.getElementsByClassName(\"torp-notification-container\")[0];\n\t\tif (!target) {\n\t\t\tthrow new Error(\"No notification container found\");\n\t\t}\n\t}\n\n\t// HACK: Should allow mounting in a non-empty container\n\t// Move existing nodes into a fragment, and add them back after mounting\n\tvar fragment = document.createDocumentFragment();\n\twhile (target.firstChild) {\n\t\tfragment.append(target.firstChild);\n\t}\n\n\t// Create the notification\n\tmount(target, notification, props);\n\n\ttarget.prepend(fragment);\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,aAAa;AAQP,SAAR,iBAAkC,cAAmB,OAAY,QAAwB;AAC/F,MAAI,CAAC,QAAQ;AAGZ,aAAS,SAAS,uBAAuB,6BAA6B,EAAE,CAAC;AACzE,QAAI,CAAC,QAAQ;AACZ,YAAM,IAAI,MAAM,iCAAiC;AAAA,IAClD;AAAA,EACD;AAIA,MAAI,WAAW,SAAS,uBAAuB;AAC/C,SAAO,OAAO,YAAY;AACzB,aAAS,OAAO,OAAO,UAAU;AAAA,EAClC;AAGA,QAAM,QAAQ,cAAc,KAAK;AAEjC,SAAO,QAAQ,QAAQ;AACxB;","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Notification/showNotification.ts"],"sourcesContent":["import { mount } from \"@torpor/view\";\n\n/**\n * Shows a notification component in code.\n * @param notification The notification component\n * @param props The properties for the notification component\n * @param target The target element to show the notification in\n */\nexport default function showNotification(notification: any, props: any, target?: Element): void {\n\tif (!target) {\n\t\t// Put the notification in the first NotificationContainer, or the\n\t\t// document body if there are no NotificationContainers\n\t\ttarget = document.getElementsByClassName(\"torp-notification-container\")[0];\n\t\tif (!target) {\n\t\t\tthrow new Error(\"No notification container found\");\n\t\t}\n\t}\n\n\t// HACK: Should allow mounting in a non-empty container\n\t// Move existing nodes into a fragment, and add them back after mounting\n\tvar fragment = document.createDocumentFragment();\n\twhile (target.firstChild) {\n\t\tfragment.append(target.firstChild);\n\t}\n\n\t// Create the notification\n\tmount(target, notification, props);\n\n\ttarget.prepend(fragment);\n}\n"],"mappings":";;;;;;;;;;;;AAQA,SAAwB,iBAAiB,cAAmB,OAAY,QAAwB;CAC/F,IAAI,CAAC,QAAQ;EAGZ,SAAS,SAAS,uBAAuB,6BAA6B,CAAC,CAAC;EACxE,IAAI,CAAC,QACJ,MAAM,IAAI,MAAM,iCAAiC;CAEnD;CAIA,IAAI,WAAW,SAAS,uBAAuB;CAC/C,OAAO,OAAO,YACb,SAAS,OAAO,OAAO,UAAU;CAIlC,MAAM,QAAQ,cAAc,KAAK;CAEjC,OAAO,QAAQ,QAAQ;AACxB"}

package/dist/NumberInput/NumberInput.torp

@@ -0,0 +1,255 @@
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "../Form/FormTypes";
+import FormValues from "../Form/FormValues.torp";
+import createFormField from "../utils/formField";
+
+interface NumberInputProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The current value of the input; null if the field is empty */
+	value?: Bindable<number | null>;
+	/** The minimum allowed value */
+	min?: number;
+	/** The maximum allowed value */
+	max?: number;
+	/** The amount by which the value is increased or decreased (default 1) */
+	step?: number;
+	/** If set to true, the user cannot interact with this input */
+	disabled?: boolean;
+	/** An accessible name for the input */
+	ariaLabel?: string;
+	/** The name of the component's form data field */
+	name?: string;
+	/** Raised when the value has changed */
+	onchange?: (value: number | null) => void;
+}
+
+/**
+ * An input where the user enters or steps a number between minimum and
+ * maximum values, by typing, by pressing the arrow keys, or by pressing the
+ * Home, End, PageUp or PageDown keys.
+ *
+ * See [the WAI ARIA guidelines for Spin Buttons](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).
+ */
+export default function NumberInput($props: NumberInputProps | undefined) {
+	let input: HTMLInputElement;
+
+	// Wire up the enclosing Form and Field, if any
+	const form = createFormField(
+		$props?.name,
+		$context[FormContextName] as FormContext | undefined,
+		$context[FieldContextName] as FieldContext | undefined,
+	);
+
+	function getMin(): number | undefined {
+		return $props?.min;
+	}
+	function getMax(): number | undefined {
+		return $props?.max;
+	}
+	function getStep(): number {
+		const step = $props?.step ?? 1;
+		return step > 0 ? step : 1;
+	}
+	function getDisabled(): boolean {
+		return $props?.disabled === true;
+	}
+
+	// The number of decimal places implied by the step, e.g. 0.25 -> 2
+	function getPrecision(): number {
+		const text = String(getStep());
+		const dot = text.indexOf(".");
+		return dot === -1 ? 0 : text.length - dot - 1;
+	}
+
+	let $state = $watch({
+		value: null as number | null,
+		text: "",
+		editing: false,
+	});
+
+	$bind($state, $props, "value");
+
+	// Keep the stored value clamped, so that out-of-range initial values
+	// don't later surface as user changes
+	$run(() => {
+		const clamped = clamp($state.value);
+		if (clamped !== $state.value) {
+			$state.value = clamped;
+		}
+	});
+
+	// The text tracks the value, unless the user is typing
+	$run(() => {
+		if (!$state.editing) {
+			$state.text = $state.value == null ? "" : String($state.value);
+		}
+	});
+
+	// Keep the input's value in sync with the text; typing sets the property
+	// directly, so an attribute alone would not update it
+	function syncInput() {
+		if (input && !$state.editing && input.value !== $state.text) {
+			input.value = $state.text;
+		}
+	}
+	$run(() => {
+		const text = $state.text;
+		const editing = $state.editing;
+		if (input && !editing && input.value !== text) {
+			input.value = text;
+		}
+	});
+	$onmount(() => syncInput());
+
+	// Dispatch the change event when a committed value changes
+	$handle((first) => {
+		const value = $state.value;
+		if (!first && !$state.editing) $props?.onchange?.(value);
+	});
+
+	function clamp(value: number | null): number | null {
+		if (value == null) return null;
+		let result = value;
+		if (getMin() != null) result = Math.max(getMin()!, result);
+		if (getMax() != null) result = Math.min(getMax()!, result);
+		return round(result);
+	}
+
+	function round(value: number): number {
+		const precision = getPrecision();
+		return precision ? Number(value.toFixed(precision)) : value;
+	}
+
+	function parse(text: string): number | null {
+		const trimmed = text.trim();
+		if (trimmed === "") return null;
+		const parsed = Number(trimmed);
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+
+	function setValue(value: number | null) {
+		const next = clamp(value);
+		$state.editing = false;
+		if (next !== $state.value) {
+			$state.value = next;
+			form.handleInput();
+		}
+		// The text always matches what was committed
+		$state.text = next == null ? "" : String(next);
+	}
+
+	function stepValue(delta: number) {
+		if (getDisabled()) return;
+		const base = $state.value ?? 0;
+		setValue(base + delta);
+	}
+
+	function handleInput(e: Event) {
+		const el = e.currentTarget as HTMLInputElement;
+		$state.editing = true;
+		$state.text = el.value;
+	}
+
+	// Typing commits on blur or Enter; invalid text reverts
+	function commit() {
+		const text = $state.text;
+		$state.editing = false;
+		const parsed = parse(text);
+		if (parsed == null && text.trim() !== "") {
+			// Not a number: revert to the last committed value
+			$state.text = $state.value == null ? "" : String($state.value);
+			return;
+		}
+		setValue(parsed);
+	}
+
+	function handleBlur() {
+		commit();
+		form.handleBlur();
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (getDisabled()) return;
+
+		switch (e.key) {
+			case "ArrowUp": {
+				e.preventDefault();
+				stepValue(getStep());
+				break;
+			}
+			case "ArrowDown": {
+				e.preventDefault();
+				stepValue(-getStep());
+				break;
+			}
+			case "PageUp": {
+				e.preventDefault();
+				stepValue(getStep() * 10);
+				break;
+			}
+			case "PageDown": {
+				e.preventDefault();
+				stepValue(-getStep() * 10);
+				break;
+			}
+			case "Home": {
+				if (getMin() != null) {
+					e.preventDefault();
+					setValue(getMin()!);
+				}
+				break;
+			}
+			case "End": {
+				if (getMax() != null) {
+					e.preventDefault();
+					setValue(getMax()!);
+				}
+				break;
+			}
+			case "Enter": {
+				e.preventDefault();
+				commit();
+				break;
+			}
+		}
+	}
+
+	@render {
+		<input
+			id={$props?.id}
+			class={["torp-number-input", $props?.class]}
+			{$props?.style}
+			type="text"
+			inputmode="decimal"
+			role="spinbutton"
+			value={$state.text}
+			&ref={input}
+			tabindex={getDisabled() ? -1 : 0}
+			aria-label={$props?.ariaLabel}
+			aria-valuemin={getMin()}
+			aria-valuemax={getMax()}
+			aria-valuenow={$state.value == null ? undefined : $state.value}
+			aria-disabled={getDisabled() ? "true" : undefined}
+			data-valid={form.valid ? "valid" : "invalid"}
+			aria-describedby={form.messageId}
+			aria-invalid={form.inField && !form.valid ? "true" : undefined}
+			disabled={getDisabled()}
+			oninput={handleInput}
+			onblur={handleBlur}
+			onkeydown={handleKey}
+		/>
+
+		<FormValues name={form.name} value={$state.value} />
+	}
+}

package/dist/NumberInput/index.d.ts

@@ -0,0 +1,44 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface NumberInputProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The current value of the input; null if the field is empty */
+	value?: Bindable<number | null>;
+	/** The minimum allowed value */
+	min?: number;
+	/** The maximum allowed value */
+	max?: number;
+	/** The amount by which the value is increased or decreased (default 1) */
+	step?: number;
+	/** If set to true, the user cannot interact with this input */
+	disabled?: boolean;
+	/** An accessible name for the input */
+	ariaLabel?: string;
+	/** The name of the component's form data field */
+	name?: string;
+	/** Raised when the value has changed */
+	onchange?: (value: number | null) => void;
+}
+
+/**
+ * An input where the user enters or steps a number between minimum and
+ * maximum values, by typing, by pressing the arrow keys, or by pressing the
+ * Home, End, PageUp or PageDown keys.
+ *
+ * See [the WAI ARIA guidelines for Spin Buttons](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).
+ */
+declare function NumberInput(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: NumberInputProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { NumberInput };

package/dist/NumberInput/index.js

@@ -0,0 +1,2 @@
+import NumberInput from "./NumberInput.torp";
+export { NumberInput };