@torpor/ui 0.4.0 → 1.0.1

package/dist/Form/Select.torp

@@ -1,29 +1,34 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "./FormTypes";
 
 interface SelectProps {
 	/** 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;
 	/** The name of the input's form data field */
-	name?: string,
+	name?: string;
 	/** The data value that this field is bound to */
-	value?: any,
+	value: Bindable<any>;
 	/** Text to display when the input value is empty */
-	placeholder?: string,
+	placeholder?: string;
 	/** Whether the input should be readonly */
-	readonly?: boolean,
+	readonly?: boolean;
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** Raised on change */
-	onchange?: (e: Event) => void,
+	onchange?: (e: Event) => void;
 	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
+	oninput?: (e: Event) => void;
+}
 
 /**
  * A select in a form.
@@ -31,7 +36,7 @@ interface SelectProps {
 export default function Select($props: SelectProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name
+	let name = $props?.name;
 
 	let blurred = false;
 
@@ -43,24 +48,21 @@ export default function Select($props: SelectProps | undefined) {
 	}
 
 	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.value,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
+	let $state =
+		fieldContext?.state ??
+		$watch({
+			inputId: $props?.id ?? defaultId,
+			value: $props?.value,
+			errors: {} as Record<string, string>,
+			valid: false,
+			message: "",
+		});
 
 	// Set the input ID now that we know it and it will get linked with the associated label
 	$state.inputId = $props?.id ?? defaultId;
 
+	$bind($state, $props, "value");
+
 	function handleInput(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
 		if (formContext) {
 			formContext.validate();
@@ -91,7 +93,9 @@ export default function Select($props: SelectProps | undefined) {
 			{$props?.readonly}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
+			aria-describedby={$state.messageId}
+			aria-invalid={fieldContext && !$state.valid ? "true" : undefined}
+			{$props?.onchange}
 			oninput={handleInput}
 			onblur={handleBlur}
 		>

package/dist/Form/TextArea.torp

@@ -1,35 +1,40 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "./FormTypes";
 
 interface TextAreaProps {
 	/** 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;
 	/** The name of the input's form data field */
-	name?: string,
+	name?: string;
 	/** The data value that this field is bound to */
-	value?: any,
+	value: Bindable<any>;
 	/** The number of rows to show in the input */
-	rows?: number,
+	rows?: number;
 	/** Text to display when the input's value is empty */
-	placeholder?: string,
+	placeholder?: string;
 	/** Whether the input should be readonly */
-	readonly?: boolean,
+	readonly?: boolean;
 	/** Whether the input's value is required */
-	required?: boolean,
+	required?: boolean;
 	/** The maximum number of characters allowed for the input value */
-	maxlength?: number,
+	maxlength?: number;
 	/** An ARIA label for describing the input to screen readers when there is no associated label element */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** Raised on change */
-	onchange?: (e: Event) => void,
+	onchange?: (e: Event) => void;
 	/** Raised on input */
-	oninput?: (e: Event) => void,
-};
+	oninput?: (e: Event) => void;
+}
 
 /**
  * A standard input in a form.
@@ -37,7 +42,7 @@ interface TextAreaProps {
 export default function TextArea($props: TextAreaProps | undefined) {
 	let defaultId = getId();
 
-	let name = $props?.name
+	let name = $props?.name;
 
 	let blurred = false;
 
@@ -49,24 +54,21 @@ export default function TextArea($props: TextAreaProps | undefined) {
 	}
 
 	// Use the FieldContext's state, or create a new one
-	let $state = fieldContext?.state ?? $watch({
-		inputId: $props?.id ?? defaultId,
-		value: $props?.value,
-		errors: {} as Record<string, string>,
-		valid: false,
-		message: "",
-	});
-
-	// Binding
-	$run(() => {
-		if ($props !== undefined) {
-			$props.value = $state.value;
-		}
-	});
+	let $state =
+		fieldContext?.state ??
+		$watch({
+			inputId: $props?.id ?? defaultId,
+			value: $props?.value,
+			errors: {} as Record<string, string>,
+			valid: false,
+			message: "",
+		});
 
 	// Set the input ID now that we know it and it will get linked with the associated label
 	$state.inputId = $props?.id ?? defaultId;
 
+	$bind($state, $props, "value");
+
 	function handleInput(e: Event) {
 		if (formContext) {
 			formContext.validate();
@@ -100,7 +102,9 @@ export default function TextArea($props: TextAreaProps | undefined) {
 			{$props?.maxlength}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}
-			onchange={$props?.onchange}
+			aria-describedby={$state.messageId}
+			aria-invalid={fieldContext && !$state.valid ? "true" : undefined}
+			{$props?.onchange}
 			oninput={handleInput}
 			onblur={handleBlur}
 		/>

package/dist/Form/Toggle.torp

@@ -0,0 +1,109 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import getId from "../utils/getId";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "./FormTypes";
+
+interface ToggleProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The name of the toggle's form data field */
+	name?: string;
+	/** Whether the toggle is switched on */
+	checked?: boolean;
+	/** If set to true, the user cannot interact with this toggle */
+	disabled?: boolean;
+	/** An ARIA label for describing the toggle to screen readers when there is no associated label element */
+	ariaLabel?: string;
+	/** Raised on change */
+	onchange?: (e: Event) => void;
+	/** Raised on input */
+	oninput?: (e: Event) => void;
+}
+
+/**
+ * A switch input in a form, which can be turned on or off.
+ *
+ * See [the WAI ARIA guidelines for Switches](https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
+ */
+export default function Toggle($props: ToggleProps | undefined) {
+	let defaultId = getId();
+
+	let name = $props?.name;
+
+	let blurred = false;
+
+	// Get stuff out of the FormContext and FieldContext
+	const formContext = $context[FormContextName] as FormContext;
+	const fieldContext = $context[FieldContextName] as FieldContext;
+	if (fieldContext) {
+		name ??= fieldContext.name;
+	}
+
+	// Use the FieldContext's state, or create a new one
+	let $state =
+		fieldContext?.state ??
+		$watch({
+			inputId: $props?.id ?? defaultId,
+			value: $props?.checked,
+			errors: {} as Record<string, string>,
+			valid: false,
+			message: "",
+		});
+
+	// Binding
+	$run(() => {
+		if ($props !== undefined) {
+			$props.checked = $state.value === true;
+		}
+	});
+
+	// Set the input ID now that we know it and it will get linked with the associated label
+	$state.inputId = $props?.id ?? defaultId;
+
+	function handleInput(e: Event) {
+		if (formContext) {
+			formContext.validate();
+		}
+		if (fieldContext && blurred) {
+			fieldContext.validate();
+		}
+		if ($props?.oninput) {
+			$props.oninput(e);
+		}
+	}
+
+	function handleBlur() {
+		if (fieldContext) {
+			fieldContext.validate();
+		}
+		blurred = true;
+	}
+
+	@render {
+		<input
+			id={$props?.id ?? defaultId}
+			class={["torp-toggle", $props?.class]}
+			type="checkbox"
+			role="switch"
+			{name}
+			&checked={$state.value}
+			aria-checked={$state.value === true ? "true" : "false"}
+			disabled={$props?.disabled}
+			aria-label={$props?.ariaLabel}
+			data-valid={$state.valid ? "valid" : "invalid"}
+			aria-describedby={$state.messageId}
+			aria-invalid={fieldContext && !$state.valid ? "true" : undefined}
+			{$props?.onchange}
+			oninput={handleInput}
+			onblur={handleBlur}
+		/>
+	}
+}