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.
101 lines • 3.58 kB
text/typescript
export default TinyHtmlTemplate;
/**
* Represents a set of CSS classes that can be applied to an element.
* - Can be a single class name string.
* - Can be an array of class name strings.
* - Can be a Set of class name strings.
*/
export type ClassSetter = string | string[] | Set<string>;
/**
* @typedef {string|string[]|Set<string>} ClassSetter
* Represents a set of CSS classes that can be applied to an element.
* - Can be a single class name string.
* - Can be an array of class name strings.
* - Can be a Set of class name strings.
*/
/**
* TinyHtmlTemplate is a base helper class that extends TinyHtml and is designed
* to simplify the creation of reusable HTML element templates.
*
* It is primarily intended as a foundation for specialized UI components
* where consistent structure and styling are needed, similar in spirit to how React
* components abstract HTML into reusable elements.
*
* As a result, TinyHtmlTemplate provides a small-scale, component-like
* abstraction for HTML elements, serving as a lightweight building block
* for higher-level UI helpers.
*
* @template {Element} TinyHtmlT
* @extends TinyHtml<TinyHtmlT>
*/
declare class TinyHtmlTemplate<TinyHtmlT extends Element> extends TinyHtml<TinyHtmlT> {
/**
* Ensures a given value is a valid ClassSetter.
* @param {ClassSetter} value
* @returns {Set<string>}
*/
static "__#private@#normalizeClasses"(value: ClassSetter): Set<string>;
/**
* Creates a new TinyHtmlTemplate instance.
* @param {TinyHtmlT} tag - The HTML tag name to create (e.g., 'div', 'span').
* @param {ClassSetter} [tags=[]] - Initial CSS classes to apply.
* @param {ClassSetter} [mainClass=[]] - Main CSS classes to apply.
*/
constructor(tag: TinyHtmlT, tags?: ClassSetter, mainClass?: ClassSetter);
/** @returns {TinyHtmlT} */
get el(): TinyHtmlT;
/**
* Returns the combined list of all classes (regular + main).
* @returns {string[]}
*/
get fullClass(): string[];
/**
* Sets the list of CSS classes applied to this element.
* Automatically updates the element's `className` attribute.
* @param {ClassSetter} value
*/
set classes(value: ClassSetter);
/**
* Gets the current list of CSS classes applied to this element.
* @returns {string[]}
*/
get classes(): string[];
/**
* Sets the main CSS class applied to this element.
* Automatically updates the element's `className` attribute.
* @param {ClassSetter} value
*/
set mainClass(value: ClassSetter);
/**
* Gets the main CSS class applied to this element.
* This class is always present in addition to the regular classes.
* @returns {string[]}
*/
get mainClass(): string[];
/**
* Add one or more CSS classes to the element.
* @param {...string|string[]} tags
* @returns {this}
*/
addClass(...tags: (string | string[])[]): this;
/**
* Remove one or more CSS classes from the element.
* @param {...string|string[]} tags
* @returns {this}
*/
removeClass(...tags: (string | string[])[]): this;
/**
* Toggles the presence of a given CSS class on the element.
* @param {string} tag - The class name to toggle.
* @returns {this}
*/
toggleClass(tag: string): this;
/**
* Clears all CSS classes from the element.
* @returns {this}
*/
resetClasses(): this;
#private;
}
import TinyHtml from '../TinyHtml.mjs';
//# sourceMappingURL=TinyHtmlTemplate.d.mts.map