@steveesamson/microform
Version:
`microform` is a tiny library for managing forms in `svelte/sveltekit`.
67 lines (66 loc) • 2.53 kB
TypeScript
import type { Params } from './internal.svelte.js';
export type Validator = `max:${number}` | `min:${number}` | `len:${number}` | `minlen:${number}` | `maxlen:${number}` | `file-size-mb:${number}` | `match:${string}` | 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip';
export type ValidatorKey = 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip' | `max` | `min` | `len` | `minlen` | `maxlen` | `file-size-mb` | `match`;
export type FieldProps = {
name: string;
value: string;
label: string;
node?: HTMLElement;
values: Params;
parts?: string[];
};
export type ValidatorType = (props: FieldProps) => string;
export type ValidatorMap<T> = {
[VAL in ValidatorKey]: T;
};
export type InputTypes = 'text' | 'number' | 'color' | 'time' | 'date' | 'range' | 'email' | 'hidden' | 'password' | 'tel' | 'url';
export type FieldType = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
export type InputType = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement;
export interface ValidateArgs {
name: string;
value: string;
validations?: Validator[];
node?: HTMLElement;
}
export type FormReturn = {
destroy: () => void;
};
export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur' | 'keydown';
export type FormValues = Params;
export type FormErrors = Params;
export type Dirty = boolean;
export type ActionOptions = {
validateEvent?: ValidateEvent;
name?: string;
validations?: Validator[];
node?: HTMLElement;
html?: boolean;
};
export type FormAction = (node: HTMLElement, eventProps?: ActionOptions) => void;
export type FormSubmitEvent = SubmitEvent & {
currentTarget: EventTarget & HTMLFormElement;
};
export type FormSubmit = (_data: Params) => (void | Promise<void>);
export type FormOptions = {
validateEvent?: ValidateEvent;
validators?: Partial<ValidatorMap<ValidatorType>>;
fieldWaitTimeInMilliSecond?: number;
debug?: boolean;
};
export type MicroFormProps = {
data?: Params;
options?: FormOptions;
};
export type FormSanity = {
ok: boolean;
};
export type MicroFormReturn = {
values: FormValues;
errors: FormErrors;
sanity: FormSanity;
form: (node: HTMLElement, eventProps?: ActionOptions) => void;
submit: (formNode: HTMLFormElement, handler: FormSubmit) => void;
onsubmit: (handler: FormSubmit) => (e: Event) => void;
reset: () => void;
};
export type Microform = (props?: MicroFormProps) => MicroFormReturn;