@torpor/ui 0.4.0 → 1.0.1

package/dist/Form/index.d.ts

@@ -5,19 +5,19 @@ interface CheckBoxProps {
 	/** 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 checkbox's form data field */
-	name?: string,
+	name?: string;
 	/** Whether the checkbox is checked */
-	checked?: boolean,
+	checked?: boolean;
 	/** An ARIA label for describing the checkbox 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;
 }
 
 /**
@@ -37,15 +37,15 @@ interface FieldProps {
 	/** 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 data that this field contains */
-	name: string,
+	name: string;
 	/** The data value that this field is bound to */
-	value?: any,
+	value: Bindable<any>;
 	/** The schema validator to use for this form */
-	schema?: StandardSchemaV1,
+	schema?: StandardSchemaV1;
 }
 
 /**
@@ -66,25 +66,25 @@ interface FileProps {
 	/** 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 type of files that this input accepts e.g. `image/*` */
-	accept?: string,
+	accept?: string;
 	/** Text to display when the input value is empty */
-	placeholder?: string,
+	placeholder?: string;
 	/** Whether the input should be readonly */
-	readonly?: boolean,
+	readonly?: 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;
 }
 
 /**
@@ -100,36 +100,99 @@ declare function File(
 
 
 
-interface FormProps {
+interface FileDropProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The data to display in the form */
-	data?: any,
+	style?: StyleValue;
+	/** The name of the input's form data field */
+	name?: string;
+	/** The type of files that this input accepts e.g. `image/*` */
+	accept?: string;
+	/** Whether the user can drop or select multiple files at once */
+	multiple?: boolean;
+	/** If set to true, the user cannot interact with this dropzone */
+	disabled?: boolean;
+	/** An accessible name for the dropzone */
+	ariaLabel?: string;
+	/** Raised when files have been dropped or selected */
+	onfiles?: (files: File[]) => void;
+}
+
+/**
+ * A file input in a form, where the user can drop one or more files onto it,
+ * or activate it to select files with a file dialog.
+ *
+ * See [the MDN docs for the Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API).
+ */
+declare function FileDrop(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: FileDropProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface FormProps<Data = Record<string, any>> {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/**
+	 * The data to display in the form. Type it with the page's form result
+	 * (e.g. `PageForm<typeof server>`) to get field name autocomplete
+	 */
+	data?: Data;
 	/** Where to post the form's data **/
-	action?: string,
+	action?: string;
 	/** The action to use when submitting the form, which defaults to POST */
-	method?: string,
+	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,
+	enctype?: string;
 	/** The schema validator to use for this form */
-	schema?: StandardSchemaV1,
-	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>,
+	schema?: StandardSchemaV1;
+	onsubmit?: (e: SubmitEvent) => boolean | void | Promise<boolean | void>;
 }
 
 /**
  * A form for submitting values.
  */
-declare function Form(
+declare function Form<Data = Record<string, any>>(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: FormProps<Data> | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface FormValuesProps {
+	/** The name of the form data field(s) */
+	name?: string;
+	/** The value, or an array of values, to submit with the form */
+	value?: any;
+}
+
+/**
+ * Renders hidden inputs for a component's value, so that it can take part
+ * in native form submission. One input per entry when the value is an array.
+ * Nothing is rendered when the value is null or undefined, so that the
+ * field is omitted from the submitted form data.
+ */
+declare function FormValues(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: FormProps | undefined,
+	$props: FormValuesProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -140,9 +203,9 @@ interface HiddenProps {
 	/** An ID for the root element */
 	id?: string;
 	/** 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?: any;
 }
 
 /**
@@ -162,29 +225,29 @@ interface InputProps {
 	/** 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 input type */
-	type?: string, // TODO: "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,
+	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;
 	/** 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;
 }
 
 /**
@@ -204,9 +267,9 @@ interface LabelProps {
 	/** 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;
 }
 
 /**
@@ -226,9 +289,9 @@ interface MessageProps {
 	/** 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;
 }
 
 /**
@@ -249,9 +312,9 @@ interface MessageSummaryProps {
 	/** 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;
 }
 
 /**
@@ -271,11 +334,11 @@ interface OptionProps {
 	/** 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 data value that this option has */
-	value?: any,
+	value?: any;
 }
 
 /**
@@ -295,23 +358,23 @@ 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;
 }
 
 /**
@@ -331,29 +394,29 @@ 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;
 }
 
 /**
@@ -367,4 +430,40 @@ declare function TextArea(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { CheckBox, Field, File, Form, Hidden, Input, Label, Message, MessageSummary, Option, Select, TextArea };
+
+
+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/).
+ */
+declare function Toggle(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToggleProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { CheckBox, Field, File, FileDrop, Form, FormValues, Hidden, Input, Label, Message, MessageSummary, Option, Select, TextArea, Toggle };

package/dist/Form/index.js

@@ -1,50 +1,16 @@
-// src/Form/CheckBox.torp
-import CheckBox_default from "./CheckBox.torp";
-
-// src/Form/Field.torp
-import Field_default from "./Field.torp";
-
-// src/Form/File.torp
-import File_default from "./File.torp";
-
-// src/Form/Form.torp
-import Form_default from "./Form.torp";
-
-// src/Form/Hidden.torp
-import Hidden_default from "./Hidden.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";
-
-// src/Form/MessageSummary.torp
-import MessageSummary_default from "./MessageSummary.torp";
-
-// src/Form/Option.torp
-import Option_default from "./Option.torp";
-
-// src/Form/Select.torp
-import Select_default from "./Select.torp";
-
-// src/Form/TextArea.torp
-import TextArea_default from "./TextArea.torp";
-export {
-  CheckBox_default as CheckBox,
-  Field_default as Field,
-  File_default as File,
-  Form_default as Form,
-  Hidden_default as Hidden,
-  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
-};
-//# sourceMappingURL=index.js.map
+import CheckBox from "./CheckBox.torp";
+import Field from "./Field.torp";
+import File from "./File.torp";
+import FileDrop from "./FileDrop.torp";
+import Form from "./Form.torp";
+import FormValues from "./FormValues.torp";
+import Hidden from "./Hidden.torp";
+import Input from "./Input.torp";
+import Label from "./Label.torp";
+import Message from "./Message.torp";
+import MessageSummary from "./MessageSummary.torp";
+import Option from "./Option.torp";
+import Select from "./Select.torp";
+import TextArea from "./TextArea.torp";
+import Toggle from "./Toggle.torp";
+export { CheckBox, Field, File, FileDrop, Form, FormValues, Hidden, Input, Label, Message, MessageSummary, Option, Select, TextArea, Toggle };