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.
125 lines • 5.69 kB
text/typescript
export default TinyHtmlImage;
/**
* {boolean} [config.fetchMode=TinyHtmlImage.#defaultFetchMode] - Whether to enable or disable fetch mode. Must be a boolean.
*/
/**
* TinyImage is a helper class for managing <img> elements.
* It supports modern attributes like srcset, sizes, decoding, fetchpriority,
* as well as width, height, alt, crossorigin, loading, and more.
*
* @example
* const img = new TinyHtmlImage({
* src: '/logo.png',
* alt: 'Logo',
* width: 200,
* height: 100,
* loading: 'lazy',
* decoding: 'async',
* });
*
* @extends TinyHtmlTemplate<HTMLImageElement>
*/
declare class TinyHtmlImage extends TinyHtmlTemplate<HTMLImageElement> {
/** @type {boolean} */
/** @returns {boolean} */
/** @param {boolean} value */
/** @type {boolean} */
/** @returns {boolean} */
/**
* Creates a new TinyHtmlImage instance wrapping an <img> element.
* This class simplifies working with images by providing a structured API
* for common attributes and configuration options.
*
* @param {Object} config - Image configuration object.
* @param {string} config.src - Image source URL (**required**).
* @param {string} [config.alt=""] - Alternate text for the image. Defaults to an empty string.
* @param {number} [config.width] - Width of the image in pixels.
* @param {number} [config.height] - Height of the image in pixels.
* @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes to apply.
* @param {string} [config.mainClass=""] - Main CSS class applied to the element.
* @param {string|string[]|boolean} [config.attributionsrc] - Attribution source; may be a string, array of strings, or `true/false`.
* @param {"anonymous"|"use-credentials"} [config.crossorigin] - Cross-origin policy for loading the image.
* @param {"sync"|"async"|"auto"} [config.decoding] - Decoding mode for the image.
* @param {string} [config.elementtiming] - Name used for performance timing attribution.
* @param {"high"|"low"|"auto"} [config.fetchpriority] - Fetch priority for the image resource.
* @param {boolean} [config.ismap=false] - Whether the image is part of a server-side image map.
* @param {"eager"|"lazy"} [config.loading] - Loading behavior hint (`"lazy"` defers off-screen images).
* @param {string} [config.referrerpolicy] - Referrer policy when fetching the image.
* @param {string} [config.sizes] - Sizes attribute, used with `srcset` for responsive images.
* @param {string} [config.srcset] - List of image sources for responsive loading.
* @param {string} [config.usemap] - Name of an associated image map to use.
*/
constructor({ src, alt, width, height, tags, mainClass, attributionsrc, crossorigin, decoding, elementtiming, fetchpriority, ismap, loading, referrerpolicy, sizes, srcset, usemap, }: {
src: string;
alt?: string | undefined;
width?: number | undefined;
height?: number | undefined;
tags?: string | string[] | Set<string> | undefined;
mainClass?: string | undefined;
attributionsrc?: string | boolean | string[] | undefined;
crossorigin?: "anonymous" | "use-credentials" | undefined;
decoding?: "auto" | "async" | "sync" | undefined;
elementtiming?: string | undefined;
fetchpriority?: "auto" | "high" | "low" | undefined;
ismap?: boolean | undefined;
loading?: "eager" | "lazy" | undefined;
referrerpolicy?: string | undefined;
sizes?: string | undefined;
srcset?: string | undefined;
usemap?: string | undefined;
});
/** @param {string} value */
set src(value: string);
/** @returns {string|null} */
get src(): string | null;
/** @param {string} value */
set alt(value: string);
/** @returns {string|null} */
get alt(): string | null;
/** @param {string|string[]|boolean} value */
set attributionsrc(value: string | string[] | boolean);
/** @returns {string|null} */
get attributionsrc(): string | null;
/** @param {'anonymous'|'use-credentials'} value */
set crossorigin(value: "anonymous" | "use-credentials");
/** @returns {string|null} */
get crossorigin(): string | null;
/** @param {'sync'|'async'|'auto'} value */
set decoding(value: "sync" | "async" | "auto");
/** @returns {string|null} */
get decoding(): string | null;
/** @param {string} value */
set elementtiming(value: string);
/** @returns {string|null} */
get elementtiming(): string | null;
/** @param {'high'|'low'|'auto'} value */
set fetchpriority(value: "high" | "low" | "auto");
/** @returns {string|null} */
get fetchpriority(): string | null;
/** @param {boolean} value */
set ismap(value: boolean);
/** @returns {boolean} */
get ismap(): boolean;
/** @param {'eager'|'lazy'} value */
set loading(value: "eager" | "lazy");
/** @returns {string|null} */
get loading(): string | null;
/** @param {string} value */
set referrerpolicy(value: string);
/** @returns {string|null} */
get referrerpolicy(): string | null;
/** @param {string} value */
set sizes(value: string);
/** @returns {string|null} */
get sizes(): string | null;
/** @param {string} value */
set srcset(value: string);
/** @returns {string|null} */
get srcset(): string | null;
/** @param {string} value */
set usemap(value: string);
/** @returns {string|null} */
get usemap(): string | null;
}
import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
//# sourceMappingURL=TinyHtmlImage.d.mts.map