@torpor/ui 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @torpor/ui
 
+## 0.3.2
+
+### Patch Changes
+
+- 3f4eef3: Fix: File component name
+- dddec65: Feat: Hidden UI form component
+- fae47e6: Fix: TextArea should be a textarea
+- e9fe640: Fix: get checkbox checked from state value
+- 00c4d30: Feat: allow setting input required
+- e1a3f46: Fix: string unions don't work in $props
+- 14cd367: Fix: valibot uses a different path format
+
+## 0.3.1
+
+### Patch Changes
+
+- b670819: Feat: more UI form components
+- Updated dependencies [3cc2168]
+- Updated dependencies [13f2afb]
+  - @torpor/view@0.4.7
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/Form/CheckBox.torp

@@ -0,0 +1,91 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface CheckBoxProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the checkbox's form data field */
+	name?: string,
+	/** Whether the checkbox is checked */
+	checked?: boolean,
+	/** An ARIA label for describing the checkbox 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 checkbox input in a form.
+ */
+export default function CheckBox($props: CheckBoxProps | 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-check-box
+			 ${$props?.class ?? ""}`.trim()}
+			type="checkbox"
+			{name}
+			&checked={$state.value}
+			aria-label={$props?.ariaLabel}
+			data-valid={$state.valid ? "valid" : "invalid"}
+			onchange={$props?.onchange}
+			oninput={handleInput}
+			onblur={handleBlur}
+		/>
+	}
+}

package/dist/Form/File.torp

@@ -0,0 +1,106 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface FileProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the input's form data field */
+	name?: string,
+	/** The type of files that this input accepts e.g. `image/*` */
+	accepts?: string,
+	/** The data value that this field is bound to */
+	value?: any,
+	/** Text to display when the input value is empty */
+	placeholder?: string,
+	/** Whether the input should be readonly */
+	readonly?: 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 */
+	ariaLabel?: string,
+	/** Raised on change */
+	onchange?: (e: Event) => void,
+	/** Raised on input */
+	oninput?: (e: Event) => void,
+};
+
+/**
+ * A file input in a form.
+ */
+export default function File($props: FileProps | 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;
+	}
+
+	// This will change the form's enctype to `multipart/form-data`
+	if (formContext) {
+		formContext.state.hasFile = true;
+	}
+
+	// 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;
+		}
+	});
+
+	// 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 & { currentTarget: EventTarget & HTMLInputElement }) {
+		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-file ${$props?.class ?? ""}`.trim()}
+			type="file"
+			{name}
+			&value={$state.value}
+			{$props?.placeholder}
+			{$props?.readonly}
+			{$props?.maxlength}
+			aria-label={$props?.ariaLabel}
+			data-valid={$state.valid ? "valid" : "invalid"}
+			onchange={$props?.onchange}
+			oninput={handleInput}
+			onblur={handleBlur}
+		/>
+	}
+}

package/dist/Form/Form.torp

@@ -10,6 +10,13 @@ interface FormProps {
 	data?: any,
 	/** Where to post the form's data **/
 	action?: string,
+	/** The action to use when submitting the form, which defaults to POST */
+	method?: string,
+	/**
+	 * The form's encoding type e.g. `multipart/form-data` where there are file
+	 * inputs. This will be automatically set unless overridden
+	 */
+	enctype?: string,
 	/** The schema validator to use for this form */
 	schema?: StandardSchemaV1,
 	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>,
@@ -21,6 +28,7 @@ interface FormProps {
 export default function Form($props: FormProps | undefined) {
 	let $state = $watch({
 		data: $props?.data ?? {},
+		hasFile: false,
 		issues: [] as ValidationIssue[],
 		get valid() {
 			return this.issues.length === 0;
@@ -51,8 +59,12 @@ export default function Form($props: FormProps | undefined) {
 			if (result.issues) {
 				for (let issue of result.issues) {
 					if (issue.path) {
-						// TODO: arrays with `[0]`
-						issues.push({ path: issue.path.join("."), message: issue.message });
+						// TODO: arrays with `[0]` etc
+						issues.push({ 
+							// @ts-ignore
+							path: issue.path.map((p) => p.key ?? p).join("."),
+							message: issue.message
+						});
 					}
 				}
 			}
@@ -118,7 +130,8 @@ export default function Form($props: FormProps | undefined) {
 		<form
 			{$props?.id}
 			class={`torp-form ${$props?.class ?? ""}`.trim()}
-			method="POST"
+			method={$props?.method ?? "POST"}
+			enctype={$props?.enctype ?? ($state.hasFile ? "multipart/form-data" : undefined)}
 			onsubmit={handleSubmit}
 			@// Set novalidate only if JS is enabled (to override HTML validation)
 			onmount={(e) => e.novalidate = true }

package/dist/Form/FormTypes.ts

@@ -11,6 +11,11 @@ export interface ValidationIssue {
 export interface FormContext {
 	schema?: StandardSchemaV1;
 	state: {
+		/**
+		 * Whether there is a file input in the form. If so, the form's enctype
+		 * will be set to `multipart/form-data`
+		 */
+		hasFile: boolean;
 		issues: ValidationIssue[];
 	};
 	validate: () => void;

package/dist/Form/Hidden.torp

@@ -0,0 +1,25 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface HiddenProps {
+	/** An ID for the root element */
+	id?: string;
+	/** The name of the input's form data field */
+	name?: string,
+	/** The data value that this field is bound to */
+	value?: any,
+};
+
+/**
+ * A standard input in a form.
+ */
+export default function Input($props: HiddenProps | undefined) {
+	@render {
+		<input
+			{$props?.id}
+			type="hidden"
+			{$props?.name}
+			{$props?.value}
+		/>
+	}
+}

package/dist/Form/Input.torp

@@ -7,7 +7,7 @@ interface InputProps {
 	/** Class name(s) for the root element */
 	class?: string,
 	/** The input type */
-	type?: "text" | "number" | "password" | "email" | "url" | "tel",
+	type?: string, // TODO: "text" | "number" | "password" | "email" | "url" | "tel",
 	/** The name of the input's form data field */
 	name?: string,
 	/** The data value that this field is bound to */
@@ -16,10 +16,16 @@ interface InputProps {
 	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 */
 	ariaLabel?: string,
+	/** Raised on change */
+	onchange?: (e: Event) => void,
+	/** Raised on input */
+	oninput?: (e: Event) => void,
 };
 
 /**
@@ -69,6 +75,9 @@ export default function Input($props: InputProps | undefined) {
 		if (fieldContext && blurred) {
 			fieldContext.validate();
 		}
+		if ($props?.oninput) {
+			$props.oninput(e);
+		}
 	}
 
 	function handleBlur() {
@@ -87,9 +96,11 @@ export default function Input($props: InputProps | undefined) {
 			&value={$state.value}
 			{$props?.placeholder}
 			{$props?.readonly}
+			{$props?.required}
 			{$props?.maxlength}
 			aria-label={$props?.ariaLabel}
 			data-valid={$state.valid ? "valid" : "invalid"}
+			onchange={$props?.onchange}
 			oninput={handleInput}
 			onblur={handleBlur}
 		/>

package/dist/Form/Option.torp

@@ -0,0 +1,24 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface OptionProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The data value that this option has */
+	value?: any,
+};
+
+/**
+ * An option in a select.
+ */
+export default function Option($props: OptionProps | undefined) {
+	@render {
+		<option
+			{$props?.id}
+			class={`torp-option ${$props?.class ?? ""}`.trim()}
+			&value={$state.value}
+		/>
+	}
+}

package/dist/Form/Select.torp

@@ -0,0 +1,97 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface SelectProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the input's form data field */
+	name?: string,
+	/** The data value that this field is bound to */
+	value?: any,
+	/** Text to display when the input value is empty */
+	placeholder?: string,
+	/** Whether the input should be readonly */
+	readonly?: boolean,
+	/** An ARIA label for describing the input 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 select in a form.
+ */
+export default function Select($props: SelectProps | 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?.value,
+		errors: {} as Record<string, string>,
+		valid: false,
+		message: "",
+	});
+
+	// Binding
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
+
+	// 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 & { currentTarget: EventTarget & HTMLInputElement }) {
+		if (formContext) {
+			formContext.validate();
+		}
+		if (fieldContext && blurred) {
+			fieldContext.validate();
+		}
+		if ($props?.oninput) {
+			$props.oninput(e);
+		}
+	}
+
+	function handleBlur() {
+		if (fieldContext) {
+			fieldContext.validate();
+		}
+		blurred = true;
+	}
+
+	@render {
+		<select
+			id={$props?.id ?? defaultId}
+			class={`torp-select ${$props?.class ?? ""}`.trim()}
+			{name}
+			&value={$state.value}
+			{$props?.placeholder}
+			{$props?.readonly}
+			aria-label={$props?.ariaLabel}
+			data-valid={$state.valid ? "valid" : "invalid"}
+			onchange={$props?.onchange}
+			oninput={handleInput}
+			onblur={handleBlur}
+		>
+			<slot />
+		</select>
+	}
+}

package/dist/Form/TextArea.torp

@@ -0,0 +1,101 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface TextAreaProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the input's form data field */
+	name?: string,
+	/** The data value that this field is bound to */
+	value?: any,
+	/** The number of rows to show in the input */
+	rows?: number,
+	/** Text to display when the input's value is empty */
+	placeholder?: string,
+	/** Whether the input should be readonly */
+	readonly?: 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 */
+	ariaLabel?: string,
+	/** Raised on change */
+	onchange?: (e: Event) => void,
+	/** Raised on input */
+	oninput?: (e: Event) => void,
+};
+
+/**
+ * A standard input in a form.
+ */
+export default function TextArea($props: TextAreaProps | 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?.value,
+		errors: {} as Record<string, string>,
+		valid: false,
+		message: "",
+	});
+
+	// Binding
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
+
+	// 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 {
+		<textarea
+			id={$props?.id ?? defaultId}
+			class={`torp-text-area ${$props?.class ?? ""}`.trim()}
+			{name}
+			&value={$state.value}
+			{$props?.rows}
+			{$props?.placeholder}
+			{$props?.readonly}
+			{$props?.maxlength}
+			aria-label={$props?.ariaLabel}
+			data-valid={$state.valid ? "valid" : "invalid"}
+			onchange={$props?.onchange}
+			oninput={handleInput}
+			onblur={handleBlur}
+		/>
+	}
+}