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.
150 lines • 8.31 kB
text/typescript
export default TinyHtmlButton;
/**
* TinyHtmlButton is a helper class for <button> elements with full attribute support and validation.
* It extends TinyHtmlTemplate for direct DOM manipulation.
*
* Supported attributes:
* - autofocus
* - command, commandfor
* - disabled
* - form, formaction, formenctype, formmethod, formnovalidate, formtarget
* - name
* - popovertarget, popovertargetaction
* - type (button|submit|reset)
* - value
*
* @extends TinyHtmlTemplate<HTMLButtonElement>
*/
declare class TinyHtmlButton extends TinyHtmlTemplate<HTMLButtonElement> {
/**
* Creates a new TinyHtmlButton instance.
*
* @param {Object} config - Configuration object for the button.
* @param {string|Element|TinyHtml<any>} config.label - The text/HTML/element to place inside the button.
* If a non-string Element/TinyHtml is provided, `allowHtml` must be true.
* @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes to apply.
* @param {boolean} [config.allowHtml=false] - Whether to allow HTML or DOM nodes as label.
* @param {'button'|'submit'|'reset'} [config.type='button'] - Button type. Allowed values: "button", "submit", "reset".
* @param {boolean} [config.autofocus=false] - Whether the button should autofocus on load.
* @param {'show-modal'|'close'|'request-close'|'show-popover'|'hide-popover'|'toggle-popover'} [config.command] - Command action (built-ins: "show-modal","close","request-close","show-popover","hide-popover","toggle-popover")
* or a custom command which MUST start with `--` (two hyphens).
* @param {string} [config.commandfor] - ID of the element controlled by the command. Must be a non-empty string.
* @param {boolean} [config.disabled=false] - Whether the button is disabled.
* @param {string} [config.form] - ID of the associated <form>. Must be a non-empty string if provided.
* @param {string} [config.formaction] - URL that overrides the form action when this button is used to submit.
* @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} [config.formenctype]
* - Encoding type used when the button submits the form.
* @param {'get'|'post'|'dialog'} [config.formmethod] - HTTP method used for this button submission.
* @param {boolean} [config.formnovalidate=false] - If true, disables validation when this button submits.
* @param {'_self'|'_blank'|'_parent'|'_top'|'_unfencedTop'} [config.formtarget] - Target browsing context for this button's submission (keywords or name).
* @param {string} [config.name] - Button name (sent with value when submitting).
* @param {string} [config.popovertarget] - ID of the popover to control (non-empty string).
* @param {'show'|'hide'|'toggle'} [config.popovertargetaction] - Action for popovertarget.
* @param {string} [config.value] - Value submitted with the form when this button is used.
* @param {string} [config.mainClass=''] - Main CSS class to append to the element.
*
* @throws {TypeError} If `label` is not a string, Element, or TinyHtml instance.
* @throws {Error} If an Element/TinyHtml `label` is passed but `allowHtml` is false.
* @throws {TypeError} If `type` is not one of "button", "submit", "reset".
* @throws {TypeError} If `allowHtml` is not a boolean.
* @throws {TypeError} If `autofocus`, `disabled` or `formnovalidate` are not booleans.
* @throws {TypeError} If `command` is not a valid builtin command nor a custom `--*` token.
* @throws {TypeError} If `commandfor`, `form`, `formaction`, `name`, `popovertarget`, or `value` are not strings.
* @throws {TypeError} If `formenctype` is not one of the allowed encodings.
* @throws {TypeError} If `formmethod` is not one of 'get','post','dialog'.
* @throws {TypeError} If `formtarget` is not a valid keyword or browsing context name.
*/
constructor({ label, tags, allowHtml, type, autofocus, command, commandfor, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, popovertarget, popovertargetaction, value, mainClass, }: {
label: string | Element | TinyHtml<any>;
tags?: string | string[] | Set<string> | undefined;
allowHtml?: boolean | undefined;
type?: "button" | "reset" | "submit" | undefined;
autofocus?: boolean | undefined;
command?: "close" | "show-modal" | "request-close" | "show-popover" | "hide-popover" | "toggle-popover" | undefined;
commandfor?: string | undefined;
disabled?: boolean | undefined;
form?: string | undefined;
formaction?: string | undefined;
formenctype?: "text/plain" | "application/x-www-form-urlencoded" | "multipart/form-data" | undefined;
formmethod?: "dialog" | "get" | "post" | undefined;
formnovalidate?: boolean | undefined;
formtarget?: "_blank" | "_self" | "_parent" | "_top" | "_unfencedTop" | undefined;
name?: string | undefined;
popovertarget?: string | undefined;
popovertargetaction?: "hide" | "show" | "toggle" | undefined;
value?: string | undefined;
mainClass?: string | undefined;
});
/** @param {'button'|'submit'|'reset'} val */
set type(val: "button" | "submit" | "reset");
/** @returns {string|null} */
get type(): string | null;
/** @param {boolean} state */
set autofocus(state: boolean);
/** @returns {boolean} */
get autofocus(): boolean;
/** @param {boolean} state */
set disabled(state: boolean);
/** @returns {boolean} */
get disabled(): boolean;
/** @param {boolean} state */
set formnovalidate(state: boolean);
/** @returns {boolean} */
get formnovalidate(): boolean;
/** @param {'show-modal'|'close'|'request-close'|'show-popover'|'hide-popover'|'toggle-popover'} cmd */
set command(cmd: "show-modal" | "close" | "request-close" | "show-popover" | "hide-popover" | "toggle-popover");
/** @returns {string|null} */
get command(): string | null;
/** @param {string} val */
set commandfor(val: string);
/** @returns {string|null} */
get commandfor(): string | null;
/** @param {string} val */
set form(val: string);
/** @returns {string|null} */
get form(): string | null;
/** @param {string} val */
set formaction(val: string);
/** @returns {string|null} */
get formaction(): string | null;
/** @param {'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'} val */
set formenctype(val: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain");
/** @returns {string|null} */
get formenctype(): string | null;
/** @param {'get'|'post'|'dialog'} val */
set formmethod(val: "get" | "post" | "dialog");
/** @returns {string|null} */
get formmethod(): string | null;
/** @param {'_self'|'_blank'|'_parent'|'_top'|'_unfencedTop'} val */
set formtarget(val: "_self" | "_blank" | "_parent" | "_top" | "_unfencedTop");
/** @returns {string|null} */
get formtarget(): string | null;
/** @param {string} val */
set name(val: string);
/** @returns {string|null} */
get name(): string | null;
/** @param {string} val */
set popovertarget(val: string);
/** @returns {string|null} */
get popovertarget(): string | null;
/** @param {'show'|'hide'|'toggle'} val */
set popovertargetaction(val: "show" | "hide" | "toggle");
/** @returns {string|null} */
get popovertargetaction(): string | null;
set value(val: string | null);
/** @returns {string|null} */
get value(): string | null;
/**
* Updates the button label with text, HTML, or an element.
*
* @param {string|Element|TinyHtml<any>} label - The new label.
* @param {boolean} [allowHtml=false] - Whether to allow raw HTML or DOM elements.
* @returns {this}
* @throws {TypeError} If the label is invalid.
* @throws {Error} If DOM/HTML is passed but allowHtml=false.
*/
setLabel(label: string | Element | TinyHtml<any>, allowHtml?: boolean): this;
}
import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
import TinyHtml from '../TinyHtml.mjs';
//# sourceMappingURL=TinyHtmlButton.d.mts.map