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.
65 lines • 2.53 kB
text/typescript
export default TinyHtmlDatalist;
/**
* TinyHtmlDatalist is a helper class for creating and managing <datalist> elements.
* A <datalist> provides predefined options for <input> elements via the `list` attribute.
*
* Only <option> children are valid inside <datalist>.
*
* @example
* const datalist = new TinyHtmlDatalist({ id: 'browsers' });
* datalist.addOption({ value: 'Firefox' });
* datalist.addOption({ value: 'Chrome' });
* document.body.appendChild(datalist.el);
*
* <input list="browsers">
*
* @extends TinyHtmlTemplate<HTMLDataListElement>
*/
declare class TinyHtmlDatalist extends TinyHtmlTemplate<HTMLDataListElement> {
/**
* Creates a new TinyHtmlDatalist instance.
* @param {Object} config - Configuration object.
* @param {string} [config.id] - The unique identifier for the datalist (to be linked with <input list="...">).
* @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
* @param {string} [config.mainClass=""] - Main CSS class.
* @param {Array<{value: string, label?: string}>} [config.options=[]] - Initial <option> elements.
*/
constructor({ id, tags, mainClass, options }?: {
id?: string | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
options?: {
value: string;
label?: string;
}[] | undefined;
});
/** @param {Array<{value: string, label?: string}>} options */
set options(options: Array<{
value: string;
label?: string;
}>);
/** @returns {Array<{value: string, label: string|null}>} */
get options(): Array<{
value: string;
label: string | null;
}>;
/**
* Adds a new <option> to the datalist.
* @param {Object} config - Option configuration.
* @param {string} config.value - The value of the option (required).
* @param {string} [config.label] - Optional label for accessibility or display.
* @returns {HTMLOptionElement} The created <option> element.
*/
addOption({ value, label }: {
value: string;
label?: string | undefined;
}): HTMLOptionElement;
/**
* Removes an option by its value.
* @param {string} value - The value of the option to remove.
* @returns {boolean} True if an option was removed, false otherwise.
*/
removeOption(value: string): boolean;
}
import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
//# sourceMappingURL=TinyHtmlDatalist.d.mts.map