@torpor/ui 0.1.7 → 0.2.1

package/dist/Form/Field.torp

@@ -0,0 +1,93 @@
+import {
+	FormContextName,
+	FieldContextName,
+	type ValidationIssue,
+	type FormContext,
+	type FieldContext,
+} from "./FormTypes";
+import { StandardSchemaV1 } from "./StandardSchemaV1"
+
+interface FieldProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the data that this field contains */
+	name: string,
+	/** The data value that this field is bound to */
+	value?: any,
+	/** The schema validator to use for this form */
+	schema?: StandardSchemaV1,
+};
+
+/**
+ * A field in a form which automatically links up a Label and/or an input
+ * component and/or a Message.
+ */
+export default function Field($props: FieldProps) {
+	$props ??= $watch({ name: "" });
+
+	let $state = $watch({
+		inputId: "-1",
+		value: $props.value,
+		issues: [] as ValidationIssue[],
+		get valid() {
+			return this.issues.find((i) => i.path === $props.name) === undefined;
+		},
+		get message() {
+			return this.issues.filter((i) => i.path === $props.name).map((i) => i.message).join("\n");
+		},
+	});
+
+	// Binding
+	$run(() => {
+		$props.value = $state.value;
+	});
+
+	// Get stuff out of the FormContext, if applicable
+	const formContext = $context[FormContextName] as FormContext;
+	if (formContext) {
+		$run(() => {
+			$state.issues = formContext.state.issues;
+		});
+	}
+
+	// Set the context to pass down to Labels, Inputs and Messages
+	let context: FieldContext = {
+		name: $props.name,
+		state: $state,
+		validate: handleValidate
+	};
+	$context[FieldContextName] = context;
+
+	async function validate() {
+		if ($props.schema) {
+			const validator = $props.schema["~standard"];
+			let result = validator.validate($props.value);
+			if (result instanceof Promise) {
+				result = await result;
+			}
+			let issues: ValidationIssue[] = [];
+			if (result.issues) {
+				for (let issue of result.issues) {
+					issues.push({ path: $props.name, message: issue.message });
+				}
+			}
+			$state.issues = $state.issues.filter((e) => e.path !== $props.name).concat(issues);
+		}
+	}
+
+	async function handleValidate() {
+		await validate();
+	}
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-field ${$props.class ?? ""}`.trim()}
+			data-valid={$state.valid ? "valid" : "invalid"}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Form/Form.torp

@@ -0,0 +1,131 @@
+import { FormContextName, type ValidationIssue, type FormContext } from "./FormTypes";
+import { StandardSchemaV1 } from "./StandardSchemaV1"
+
+interface FormProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The data to display in the form */
+	data?: any,
+	/** Where to post the form's data **/
+	action?: string,
+	/** The schema validator to use for this form */
+	schema?: StandardSchemaV1,
+	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>,
+};
+
+/**
+ * A form for submitting values.
+ */
+export default function Form($props: FormProps) {
+	$props ??= $watch({});
+
+	let $state = $watch({
+		data: $props.data ?? {},
+		issues: [] as ValidationIssue[],
+		get valid() {
+			return this.issues.length === 0;
+		}
+	});
+
+	let submitted = false;
+
+	// TODO: Load context from build with a submit method that submits to a form action
+
+	// Set the context to pass down to Fields
+	let context: FormContext = {
+		schema: $props.schema,
+		state: $state,
+		validate: handleValidate
+	};
+	
+	$context[FormContextName] = context;
+
+	async function validate() {
+		if ($props.schema) {
+			const validator = $props.schema["~standard"];
+			let result = validator.validate($props.data);
+			if (result instanceof Promise) {
+				result = await result;
+			}
+			let issues: ValidationIssue[] = [];
+			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 });
+					}
+				}
+			}
+			$state.issues = issues;
+		}
+	}
+
+	async function handleSubmit(e: SubmitEvent) {
+		// Validate, and proceed with submission if there are no errors
+		await validate();
+		let proceed = $state.valid;
+
+		// Changing inputs from now on will cause revalidation
+		submitted = true;
+
+		// If validation failed, don't continue
+		if (!proceed) {
+			e.preventDefault();
+			return false;
+		}
+
+		// Dispatch the submit event for the user to handle
+		if ($props.onsubmit) {
+			let userSubmit = $props.onsubmit(e);
+			if (userSubmit instanceof Promise) {
+				userSubmit = await userSubmit;
+			}
+			proceed = userSubmit !== false && !e.defaultPrevented;
+		}
+		
+		// If the user handled the submit, don't continue
+		if (!proceed) {
+			e.preventDefault();
+			return false;
+		}
+
+		// If there's a @torpor/build context, call its submit event
+		let buildContext = $context["TorporBuildContext"];
+		if (buildContext?.onformsubmit) {
+			let buildSubmit = buildContext.onformsubmit(e);
+			if (buildSubmit instanceof Promise) {
+				buildSubmit = await buildSubmit;
+			}
+			proceed = buildSubmit !== false && !e.defaultPrevented;
+		}
+
+		// If @torpor/build handled the submit, don't continue
+		if (!proceed) {
+			e.preventDefault();
+			return false;
+		}
+
+		// Otherwise just let normal form submission go ahead...
+	}
+
+	async function handleValidate() {
+		if (submitted) {
+			await validate();
+		}
+	}
+
+	@render {
+		<form
+			{$props.id}
+			class={`torp-form ${$props.class ?? ""}`.trim()}
+			method="POST"
+			onsubmit={handleSubmit}
+			@// Set novalidate only if JS is enabled (to override HTML validation)
+			onmount={(e) => e.novalidate = true }
+		>
+			<slot />
+		</form>
+	}
+}

package/dist/Form/FormTypes.ts

@@ -0,0 +1,30 @@
+import { type StandardSchemaV1 } from "./StandardSchemaV1";
+
+export const FormContextName: unique symbol = Symbol("Form");
+export const FieldContextName: unique symbol = Symbol("Field");
+
+export interface ValidationIssue {
+	path: string;
+	message: string;
+}
+
+export interface FormContext {
+	schema?: StandardSchemaV1;
+	state: {
+		issues: ValidationIssue[];
+	};
+	validate: () => void;
+}
+
+export interface FieldContext {
+	name: string;
+	schema?: StandardSchemaV1;
+	state: {
+		inputId: string;
+		value?: any;
+		issues: ValidationIssue[];
+		valid: boolean;
+		message: string;
+	};
+	validate: () => void;
+}

package/dist/Form/Input.torp

@@ -0,0 +1,94 @@
+import getId from "../utils/getId";
+import { FormContextName, FieldContextName, type FormContext, type FieldContext } from "./FormTypes";
+
+interface InputProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The input type */
+	type?: "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 */
+	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,
+};
+
+/**
+ * A standard input in a form.
+ */
+export default function Input($props: InputProps) {
+	$props ??= $watch({});
+	$props.id ??= getId();
+	$props.type ??= "text";
+
+	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) {
+		$props.name ??= fieldContext.name;
+	}
+
+	// Use the FieldContext's state, or create a new one
+	let $state = fieldContext?.state ?? $watch({
+		inputId: $props.id,
+		value: $props.value,
+		errors: {} as Record<string, string>,
+		valid: false,
+		message: "",
+	});
+
+	// Binding
+	$run(() => {
+		$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;
+
+	// 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;
+		if (formContext) {
+			formContext.validate();
+		}
+		if (fieldContext && blurred) {
+			fieldContext.validate();
+		}
+	}
+
+	function handleBlur() {
+		if (fieldContext) {
+			fieldContext.validate();
+		}
+		blurred = true;
+	}
+
+	@render {
+		<input
+			{$props.id}
+			class={`torp-input ${$props.class ?? ""}`.trim()}
+			{$props.name}
+			&value={$state.value}
+			{$props.type}
+			{$props.placeholder}
+			{$props.readonly}
+			{$props.maxlength}
+			aria-label={$props.ariaLabel}
+			data-valid={$state.valid ? "valid" : "invalid"}
+			oninput={handleInput}
+			onblur={handleBlur}
+		/>
+	}
+}

package/dist/Form/Label.torp

@@ -0,0 +1,31 @@
+import { FieldContextName, type FieldContext } from "./FormTypes";
+
+interface LabelProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * A label to describe the contents of an input in a form.
+ */
+export default function Label($props?: LabelProps) {
+	// Get stuff out of the FieldContext
+	const context = $context[FieldContextName] as FieldContext;
+	if (!context) {
+		throw new Error("Label must be contained within a Field");
+	}
+	let { state: $state } = context;
+
+	@render {
+		<label
+			{$props?.id}
+			class={`torp-label ${$props?.class ?? ""}`.trim()}
+			for={$state.inputId}
+			data-valid={$state.valid ? "valid" : "invalid"}
+		>
+			<slot />
+		</label>
+	}
+}

package/dist/Form/Message.torp

@@ -0,0 +1,35 @@
+import { FieldContextName, type FieldContext } from "./FormTypes";
+
+interface MessageProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * A validation message to show when the contents of an input component have
+ * problems that need to be fixed.
+ */
+export default function Message($props?: MessageProps) {
+	// Get stuff out of the FieldContext
+	const context = $context[FieldContextName] as FieldContext;
+	if (!context) {
+		throw new Error("Message must be contained within a Field");
+	}
+	const { state: $state } = context;
+
+	@render {
+		@if ($state.message) {
+			<div 
+				{$props?.id}
+				class={`torp-message ${$props?.class ?? ""}`.trim()}
+				data-valid={$state.valid ? "valid" : "invalid"}
+			>
+				<slot name="message">
+					{$state.message}
+				</slot>
+			</div>
+		}
+	}
+}

package/dist/Form/StandardSchemaV1.ts

@@ -0,0 +1,70 @@
+// From https://github.com/standard-schema/standard-schema
+
+/** The Standard Schema interface. */
+export interface StandardSchemaV1<Input = unknown, Output = Input> {
+	/** The Standard Schema properties. */
+	readonly "~standard": StandardSchemaV1.Props<Input, Output>;
+}
+
+export declare namespace StandardSchemaV1 {
+	/** The Standard Schema properties interface. */
+	export interface Props<Input = unknown, Output = Input> {
+		/** The version number of the standard. */
+		readonly version: 1;
+		/** The vendor name of the schema library. */
+		readonly vendor: string;
+		/** Validates unknown input values. */
+		readonly validate: (value: unknown) => Result<Output> | Promise<Result<Output>>;
+		/** Inferred types associated with the schema. */
+		readonly types?: Types<Input, Output> | undefined;
+	}
+
+	/** The result interface of the validate function. */
+	export type Result<Output> = SuccessResult<Output> | FailureResult;
+
+	/** The result interface if validation succeeds. */
+	export interface SuccessResult<Output> {
+		/** The typed output value. */
+		readonly value: Output;
+		/** The non-existent issues. */
+		readonly issues?: undefined;
+	}
+
+	/** The result interface if validation fails. */
+	export interface FailureResult {
+		/** The issues of failed validation. */
+		readonly issues: ReadonlyArray<Issue>;
+	}
+
+	/** The issue interface of the failure output. */
+	export interface Issue {
+		/** The error message of the issue. */
+		readonly message: string;
+		/** The path of the issue, if any. */
+		readonly path?: ReadonlyArray<PropertyKey | PathSegment> | undefined;
+	}
+
+	/** The path segment interface of the issue. */
+	export interface PathSegment {
+		/** The key representing a path segment. */
+		readonly key: PropertyKey;
+	}
+
+	/** The Standard Schema types interface. */
+	export interface Types<Input = unknown, Output = Input> {
+		/** The input type of the schema. */
+		readonly input: Input;
+		/** The output type of the schema. */
+		readonly output: Output;
+	}
+
+	/** Infers the input type of a Standard Schema. */
+	export type InferInput<Schema extends StandardSchemaV1> = NonNullable<
+		Schema["~standard"]["types"]
+	>["input"];
+
+	/** Infers the output type of a Standard Schema. */
+	export type InferOutput<Schema extends StandardSchemaV1> = NonNullable<
+		Schema["~standard"]["types"]
+	>["output"];
+}

package/dist/Form/index.d.ts

@@ -0,0 +1,117 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface FieldProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The name of the data that this field contains */
+	name: string,
+	/** The data value that this field is bound to */
+	value?: any,
+	/** The schema validator to use for this form */
+	schema?: StandardSchemaV1,
+}
+
+/**
+ * A field in a form which automatically links up a Label and/or an input
+ * component and/or a Message.
+ */
+declare function Field(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: FieldProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface FormProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The data to display in the form */
+	data?: any,
+	/** Where to post the form's data **/
+	action?: string,
+	/** The schema validator to use for this form */
+	schema?: StandardSchemaV1,
+	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>,
+}
+
+/**
+ * A form for submitting values.
+ */
+declare function Form(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: FormProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface InputProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The input type */
+	type?: "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 */
+	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,
+}
+
+/**
+ * A standard input in a form.
+ */
+declare function Input(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: InputProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * A label to describe the contents of an input in a form.
+ */
+declare function Label(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: LabelProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * A validation message to show when the contents of an input component have
+ * problems that need to be fixed.
+ */
+declare function Message(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: MessageProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Field, Form, Input, Label, Message };

package/dist/Form/index.js

@@ -0,0 +1,22 @@
+// src/Form/Field.torp
+import Field_default from "./Field.torp";
+
+// src/Form/Form.torp
+import Form_default from "./Form.torp";
+
+// src/Form/Input.torp
+import Input_default from "./Input.torp";
+
+// src/Form/Label.torp
+import Label_default from "./Label.torp";
+
+// src/Form/Message.torp
+import Message_default from "./Message.torp";
+export {
+  Field_default as Field,
+  Form_default as Form,
+  Input_default as Input,
+  Label_default as Label,
+  Message_default as Message
+};
+//# sourceMappingURL=index.js.map

package/dist/Form/index.js.map

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