/** Callback to inform of a value updates. */ declare type Subscriber = (value: T) => void; /** Unsubscribes from value updates. */ declare type Unsubscriber = () => void; /** Callback to update a value. */ declare type Updater = (value: T) => T; /** Cleanup logic callback. */ declare type Invalidator = (value?: T) => void; /** * Svelte readable store contract. */ interface Readable { /** * Subscribe on value changes. * @param run - subscription callback * @param invalidate - cleanup callback * @returns function to unsubscribe */ subscribe(run: Subscriber, invalidate?: Invalidator): Unsubscriber; } /** * Svelte writable store contract. */ interface Writable extends Readable { /** * Set value and inform subscribers. * @param value - to set */ set(value: T): void; /** * Update value using callback and inform subscribers. * @param updater - callback */ update(updater: Updater): void; } interface SvelteActionResult

{ update?: (parameters?: P) => void; destroy?: () => void; } /** * A [svelte action](https://svelte.dev/docs#use_action) to be applied on a element */ declare type SvelteAction

= (node: Element, parameters?: P) => SvelteActionResult

; /** * A DOM event. Common events are: * * - [change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) * - [input](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) * - [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) * - [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) */ declare type EventName = keyof GlobalEventHandlersEventMap | string; /** * Options for {@link FormupSchema.validate} and {@link FormupSchema.validateAt}. */ interface ValidateOptions, State = Record> { /** * Only validate the input, and skip and coercion or transformation. * * @defaultvalue true */ strict?: boolean; /** * Return from validation methods on the first error rather than after all validations run. * * @defaultvalue true */ abortEarly?: boolean; /** * Remove unspecified keys from objects. * * @defaultvalue true */ stripUnknown?: boolean; /** * When false validations will not descend into nested schema (relevant for objects or arrays). * * @defaultvalue true */ recursive?: boolean; /** * Any context needed for validating schema conditions. */ context: ValidateContext; } /** * Type of {@link ValidateOptions.context}. */ interface ValidateContext, State = Record> { /** * The formup context. */ formup: FormupContext; /** * To be notified if the validation is longer needed. */ signal: AbortSignal; /** * The event that caused the validation. */ event?: Event; } /** * A [yup](https://www.npmjs.com/package/yup) like schema to perform validation. */ interface FormupSchema, State = Record> { /** * Returns the value (a cast value if `options.strict` is false) if the value is valid, * and throws the errors otherwise. * * This method is asynchronous and returns a Promise object, that is fulfilled with the value, or rejected with a ValidationError. * * @param value - the data to validate * @param options - an object hash containing any schema options you may want to override (or specify for the first time). * @throws ValidationError */ validate(value: unknown, options?: ValidateOptions): Promise; /** * Validate a deeply nested path within the schema. Similar to how reach works, but uses the resulting schema as the subject for validation. * * @param path - to validate * @param value - the root value relative to the starting schema, not the value at the nested path. * @param options - an object hash containing any schema options you may want to override (or specify for the first time). * @throws ValidationError */ validateAt(path: string, value: Values, options?: ValidateOptions): Promise; } /** * CSS class name mapping used {@link FormupContext.validity}. * * These can be overriden using {@link FormupOptions.classes} when invoking {@link formup} * or {@link FormupContext.validity}. * * - on form: `.is-{dirty,pristine,error,validating,submitting,submitted}` * - on form elements (controls & fieldsets): * - `.is-{dirty,pristine,error,success,validating}` * - `:valid` & `:invalid` * - other elements: `has-{dirty,pristine,error,success,validating}` * * - dirty: field or one child dirty - `$dirty.has(field)` * - pristine: field or all childs pristine - `!$dirty.has(field)` * - error: field or one child - `$dirty.has(field) && !$validating.has(field) && $errors.has(field)` * - success: field or all child - `$dirty.has(field) && !$validating.has(field) && !\$errors.has(field)` * - validating: `$validating.has(field)` */ interface ValidityCSSClasses { /** * Set on the form if it is submitting. * @defaultvalue `"is-submitting"` */ readonly ['is-submitting']?: string; /** * Set on the form if it is has been submitted. * @defaultvalue `"is-submitted"` */ readonly ['is-submitted']?: string; /** * Set on the element if it or any of its children is dirty. * @defaultvalue `"is-dirty"` */ readonly ['is-dirty']?: string; /** * Set on the element if it or all its children is pristine. * @defaultvalue `"is-pristine"` */ readonly ['is-pristine']?: string; /** * Set on the element if it or any of its children: `$dirty.has(field) && !$validating.has(field) && $errors.has(field)` * @defaultvalue `"is-error"` */ readonly ['is-error']?: string; /** * Set on the element if it or all of its children: `$dirty.has(field) && !$validating.has(field) && !$errors.has(field)` * @defaultvalue `"is-success"` */ readonly ['is-success']?: string; /** * Set on the element if it or any of its children is validating. * @defaultvalue `"is-validating"` */ readonly ['is-validating']?: string; /** * Set on non form element if it or any of its children is dirty. * @defaultvalue `"has-dirty"` */ readonly ['has-dirty']?: string; /** * Set on non form element if it or all its children is pristine. * @defaultvalue `"has-pristine"` */ readonly ['has-pristine']?: string; /** * Set on non form element if any of its children * @defaultvalue `"has-error"` */ readonly ['has-error']?: string; /** * Set on non form element if all of its children * @defaultvalue `"has-success"` */ readonly ['has-success']?: string; /** * Set on non form element if it or any of its children is validating. * @defaultvalue `"has-validating"` */ readonly ['has-validating']?: string; } /** * Provides to all form properties. */ interface FormupContext, State = Record> { /** * A [yup](https://www.npmjs.com/package/yup) like schema to perform validation. */ readonly schema: FormupSchema; /** * The form values as a svelte store. * * ```html * * ``` */ readonly values: Writable>>; /** * A top-level status object that you can use to represent form state that can't otherwise be expressed/stored with other methods. * * This is useful for capturing and passing through API responses to your inner component. */ readonly state: Writable; /** * Whole form error, not associated with any field */ readonly formError: Readable; /** * The form errors keyed by field path as a svelte store. * * If a validate function is provided to a field, then when it is called this map will be modified. * * ```html * {#if $errors.has(email)} $errors.get(email).message {/if} * ``` */ readonly errors: Readable>; /** * The dirty fields by path as a svelte store. * * This allows to show errors conditionally if the user has already visited that field. * * ```html * {#if $dirty.has(email) && $errors.has(email)} $dirty.get(email).message {/if} * ``` */ readonly dirty: Readable>; /** * The currently validating fields by path as a svelte store. * * This allows to show a spinner if a field is validated. * * ```html * {#if $validating.has(email)}{/if} * ``` */ readonly validating: Readable>; /** * The valid, meaning dirty and not validating and no error, fields by path as a svelte store. */ readonly valid: Readable>; /** * The invalid, meaning dirty and not validating and error, fields by path as a svelte store. * * ```html * {#if $invalid.has(email)} $invalid.get(email).message {/if} * ``` */ readonly invalid: Readable>; /** * Determines if the whole form is validating (most likely because of a submit). * * This does not reflect individual field validation triggered by validateAt. * * When this becames `true` the {@link ValidityCSSClasses.validating} CSS class is added to the form. */ readonly isValidating: Readable; /** * Determines if the form is submitting (most likely because of a submit). * * When this becames `true` the {@link ValidityCSSClasses.submitting} CSS class is added to the form. */ readonly isSubmitting: Readable; /** * Determins if the form has been succesfully submitted. * * When this becames `true` the {@link ValidityCSSClasses.submitted} CSS class is added to the form. */ readonly isSubmitted: Readable; /** * Number of times the form was submitted. * * Resetted to zero after a succesful {@link FormupContext.submit} or a {@link FormupContext.reset}. */ readonly submitCount: Readable; /** * Boolean that is true when form is pristine. * * A form is pristine when it has not been touched && no values have been entered in any field. * * When this becames `true` the {@link ValidityCSSClasses.pristine} CSS class is added to the form. */ readonly isPristine: Readable; /** * Boolean that is true when pristine is false * * When this becames `true` the {@link ValidityCSSClasses.dirty} CSS class is added to the form. */ readonly isDirty: Readable; /** * Determines if the whole form is valid. * * When this becames `true` the {@link ValidityCSSClasses.valid} CSS class is added to the form. */ readonly isError: Readable; /** * This function will submit the form and trigger some lifecycle events. * * 1. abort all active field validation * 1. call {@link FormupSchema.validate}. * 2. call {@link FormupOptions.onSubmit} if the form is valid. * * @remarks * This function can be called manually however it is also called if you * have a `