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.
146 lines • 5.38 kB
text/typescript
export default TinyHtmlSelect;
/**
* TinyHtmlSelect is a helper class for managing <select> elements.
* It supports all standard attributes (multiple, autocomplete, autofocus, disabled, etc.)
* and provides helpers for managing <option> elements.
*
* @example
* const select = new TinyHtmlSelect({
* options: [
* { value: '1', label: 'One' },
* { value: '2', label: 'Two', selected: true }
* ],
* multiple: true,
* required: true,
* size: 5,
* name: 'numbers',
* });
*
* @extends TinyHtmlTemplate<HTMLSelectElement>
*/
declare class TinyHtmlSelect extends TinyHtmlTemplate<HTMLSelectElement> {
/**
* Creates a new custom <select> element with configurable options and attributes.
*
* @param {Object} [config={}] Configuration object for the select element.
* @param {Array<{
* value: string,
* label: string | Element | TinyHtml<any>,
* selected?: boolean,
* allowHtml?: boolean
* }>} [config.options=[]]
* An array of option definitions. Each option must provide a `value` and a `label`.
* The `label` can be a string, a DOM element, or a TinyHtml instance.
* The `selected` flag sets the option as initially selected.
* If `allowHtml` is true, the label will be interpreted as HTML instead of plain text.
*
* @param {boolean} [config.multiple=false]
* If true, allows selecting multiple options.
*
* @param {string} [config.autocomplete]
* Provides autocomplete hints for the control.
* Possible values include `"on"` or `"off"`.
*
* @param {boolean} [config.autofocus=false]
* If true, the element will automatically receive focus when the page loads.
*
* @param {boolean} [config.disabled=false]
* If true, disables the select element so it cannot be interacted with.
*
* @param {string} [config.form]
* Associates the select element with the `id` of a form element.
*
* @param {string} [config.name]
* The name of the select control, used when submitting forms.
*
* @param {boolean} [config.required=false]
* If true, the control must be selected before submitting the form.
*
* @param {number} [config.size]
* Defines the number of visible options in the dropdown (without scrolling).
*
* @param {string | string[] | Set<string>} [config.tags=[]]
* A set of tags or CSS classes that can be used for styling or categorization.
*
* @param {string} [config.mainClass='']
* A primary CSS class name to be applied to the select element.
*/
constructor({ options, multiple, autocomplete, autofocus, disabled, form, name, required, size, tags, mainClass, }?: {
options?: {
value: string;
label: string | Element | TinyHtml<any>;
selected?: boolean;
allowHtml?: boolean;
}[] | undefined;
multiple?: boolean | undefined;
autocomplete?: string | undefined;
autofocus?: boolean | undefined;
disabled?: boolean | undefined;
form?: string | undefined;
name?: string | undefined;
required?: boolean | undefined;
size?: number | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
});
/** @param {boolean} multiple */
set multiple(multiple: boolean);
/** @returns {boolean} */
get multiple(): boolean;
/** @param {string} autocomplete */
set autocomplete(autocomplete: string);
/** @returns {string|null} */
get autocomplete(): string | null;
/** @param {boolean} autofocus */
set autofocus(autofocus: boolean);
/** @returns {boolean} */
get autofocus(): boolean;
/** @param {boolean} disabled */
set disabled(disabled: boolean);
/** @returns {boolean} */
get disabled(): boolean;
/** @param {string} form */
set form(form: string);
/** @returns {string|null} */
get form(): string | null;
/** @param {string} name */
set name(name: string);
/** @returns {string|null} */
get name(): string | null;
/** @param {boolean} required */
set required(required: boolean);
/** @returns {boolean} */
get required(): boolean;
/** @param {number} size */
set sizeEl(size: number);
/** @returns {number|null} */
get sizeEl(): number | null;
/**
* Adds an option element.
* @param {{ value: string, label: string|Element|TinyHtml<any>, selected?: boolean, allowHtml?: boolean }} option
* @returns {this}
*/
addOption({ value, label, allowHtml, selected }: {
value: string;
label: string | Element | TinyHtml<any>;
selected?: boolean;
allowHtml?: boolean;
}): this;
/** @param {string} val */
set value(val: string);
/** @returns {string} */
get value(): string;
/** @param {string[]} vals */
set values(vals: string[]);
/** @returns {string[]} */
get values(): string[];
/**
* Internal: apply selection to options.
* @param {string|string[]} value
* @returns {this}
*/
setValue(value: string | string[]): this;
}
import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
import TinyHtml from '../TinyHtml.mjs';
//# sourceMappingURL=TinyHtmlSelect.d.mts.map