tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
129 lines • 6.47 kB
text/typescript
export default TinyHtmlForm;
/**
* TinyHtmlForm is a helper for creating and managing <form> elements
* with full attribute support and validation.
*
* @example
* const form = new TinyHtmlForm({
* action: '/submit',
* method: 'post',
* enctype: 'multipart/form-data',
* autocomplete: 'on',
* novalidate: true,
* target: '_blank',
* tags: ['form', 'signup'],
* mainClass: 'primary-form'
* });
*
* @extends TinyHtmlTemplate<HTMLFormElement>
*/
declare class TinyHtmlForm extends TinyHtmlTemplate<HTMLFormElement> {
/**
* Creates a new TinyHtmlForm instance.
*
* The constructor accepts a single `config` object with named options to
* configure the created `<form>` element. Validation is performed for each
* option and a `TypeError` is thrown when an invalid type or value is
* provided. Deprecated attributes are accepted but will emit a console.warn.
*
* @param {Object} [config={}] - Configuration object.
* @param {string} [config.action=""] - The URL that processes the form submission.
* If omitted the form will submit to the current document URL.
* @param {'get'|'post'|'dialog'} [config.method='get'] - The HTTP method to submit the form with.
* - `get` (default): form data appended to the action URL.
* - `post`: form data sent in request body; `enctype` is relevant.
* - `dialog`: when the form is inside a `<dialog>`, closes the dialog and fires a submit event without sending data.
* @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} [config.enctype]
* The encoding type for form submission (only used when method is `post`).
* @param {string} [config.acceptCharset] - The character encoding accepted by the server (e.g. "UTF-8").
* The specification recommends "UTF-8".
* @param {'none'|'off'|'sentences'|'on'|'words'|'characters'} [config.autocapitalize]
* Controls automatic capitalization for text inputs inside the form.
* @param {'on'|'off'} [config.autocomplete] - Hint to the browser whether autofill is allowed for controls in the form.
* @param {string} [config.name] - The form name. Must be a non-empty string when provided.
* @param {string} [config.rel] - Space-separated relationship tokens describing the form's link semantics.
* @param {boolean} [config.novalidate=false] - When true, disables built-in form validation on submit.
* @param {string} [config.target] - Target browsing context for the response.
* Can be one of `_self`, `_blank`, `_parent`, `_top`, `_unfencedTop` or a valid browsing context name
* (pattern: starts with a letter/underscore, then alphanumeric/`-`/`_`).
* @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes to apply to the form element.
* @param {string} [config.mainClass=''] - Main CSS class to append to the element.
*
* @throws {TypeError} If `action` is provided and is not a string.
* @throws {TypeError} If `method` is not one of 'get', 'post' or 'dialog'.
* @throws {TypeError} If `enctype` is provided and is not one of the allowed encodings.
* @throws {TypeError} If `acceptCharset` is provided and is not a string.
* @throws {TypeError} If `autocapitalize` is provided and is not one of the allowed tokens.
* @throws {TypeError} If `autocomplete` is provided and is not 'on' or 'off'.
* @throws {TypeError} If `name` is provided and is not a non-empty string.
* @throws {TypeError} If `rel` is provided and is not a string.
* @throws {TypeError} If `novalidate` is not a boolean.
* @throws {TypeError} If `target` is not a valid target keyword or a valid browsing context name.
*/
constructor({ action, method, enctype, acceptCharset, autocapitalize, autocomplete, name, rel, novalidate, target, tags, mainClass, }?: {
action?: string | undefined;
method?: "dialog" | "get" | "post" | undefined;
enctype?: "text/plain" | "application/x-www-form-urlencoded" | "multipart/form-data" | undefined;
acceptCharset?: string | undefined;
autocapitalize?: "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
autocomplete?: "off" | "on" | undefined;
name?: string | undefined;
rel?: string | undefined;
novalidate?: boolean | undefined;
target?: string | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
});
/** @param {string} action */
set action(action: string);
/** @returns {string|null} */
get action(): string | null;
/** @param {'get'|'post'|'dialog'} method */
set method(method: "get" | "post" | "dialog");
/** @returns {string|null} */
get method(): string | null;
/** @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} enctype */
set enctype(enctype: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain");
/** @returns {string|null} */
get enctype(): string | null;
/** @param {string} charset */
set acceptCharset(charset: string);
/** @returns {string|null} */
get acceptCharset(): string | null;
/** @param {'none'|'off'|'sentences'|'on'|'words'|'characters'} value */
set autocapitalize(value: "none" | "off" | "sentences" | "on" | "words" | "characters");
/** @returns {string|null} */
get autocapitalize(): string | null;
/** @param {'on'|'off'} value */
set autocomplete(value: "on" | "off");
/** @returns {string|null} */
get autocomplete(): string | null;
/** @param {string} name */
set name(name: string);
/** @returns {string|null} */
get name(): string | null;
/** @param {string} rel */
set rel(rel: string);
/** @returns {string|null} */
get rel(): string | null;
/** @param {boolean} novalidate */
set novalidate(novalidate: boolean);
/** @returns {boolean} */
get novalidate(): boolean;
/** @param {string} target */
set target(target: string);
/** @returns {string|null} */
get target(): string | null;
/**
* Programmatically submits the form.
* @returns {this}
*/
submit(): this;
/**
* Resets the form.
* @returns {this}
*/
reset(): this;
}
import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
//# sourceMappingURL=TinyHtmlForm.d.mts.map