tiny-essentials 1.24.0 → 1.24.2

package/dist/v1/libs/TinyHtml/TinyHtmlScript.d.mts

@@ -0,0 +1,99 @@
+export default TinyHtmlScript;
+/**
+ * TinyHtmlScript is a helper class for creating and managing <script> elements.
+ * Supports both inline and external scripts, with attributes for async, defer, modules, etc.
+ *
+ * @extends TinyHtmlTemplate<HTMLScriptElement>
+ */
+declare class TinyHtmlScript extends TinyHtmlTemplate<HTMLScriptElement> {
+    /**
+     * Creates a new TinyHtmlScript instance.
+     * @param {Object} config - Configuration object.
+     * @param {string} [config.src] - URI of an external script.
+     * @param {string} [config.type] - The type of script (e.g., "module", "importmap", "speculationrules", or JS MIME type).
+     * @param {boolean} [config.async=false] - Whether the script should be executed asynchronously (requires src).
+     * @param {boolean} [config.defer=false] - Whether the script should be deferred until after parsing (requires src).
+     * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
+     * @param {string} [config.mainClass=""] - Main CSS class.
+     * @param {string} [config.content=""] - Inline script content (ignored if src is provided).
+     * @param {string|string[]} [config.blocking] - Space-separated list of blocking tokens (currently only "render").
+     * @param {"anonymous" | "use-credentials"} [config.crossorigin] - CORS setting ("anonymous" or "use-credentials").
+     * @param {"auto"|"high"|"low"} [config.fetchpriority="auto"] - Fetch priority.
+     * @param {string} [config.integrity] - Subresource integrity hash (only valid with src).
+     * @param {boolean} [config.nomodule=false] - Whether to prevent execution in browsers supporting modules.
+     * @param {string} [config.nonce] - Cryptographic nonce for CSP.
+     * @param {string} [config.referrerpolicy] - Referrer policy.
+     * @param {boolean|string|string[]} [config.attributionsrc] - Boolean or list of URLs for attribution reporting.
+     */
+    constructor({ src, type, async, defer, tags, mainClass, content, blocking, crossorigin, fetchpriority, integrity, nomodule, nonce, referrerpolicy, attributionsrc, }?: {
+        src?: string | undefined;
+        type?: string | undefined;
+        async?: boolean | undefined;
+        defer?: boolean | undefined;
+        tags?: string | string[] | Set<string> | undefined;
+        mainClass?: string | undefined;
+        content?: string | undefined;
+        blocking?: string | string[] | undefined;
+        crossorigin?: "anonymous" | "use-credentials" | undefined;
+        fetchpriority?: "auto" | "high" | "low" | undefined;
+        integrity?: string | undefined;
+        nomodule?: boolean | undefined;
+        nonce?: string | undefined;
+        referrerpolicy?: string | undefined;
+        attributionsrc?: string | boolean | string[] | undefined;
+    });
+    /** @param {string} src */
+    set src(src: string);
+    /** @returns {string|null} */
+    get src(): string | null;
+    /** @param {string} type */
+    set type(type: string);
+    /** @returns {string|null} */
+    get type(): string | null;
+    /** @param {boolean} async */
+    set async(async: boolean);
+    /** @returns {boolean} */
+    get async(): boolean;
+    /** @param {boolean} defer */
+    set defer(defer: boolean);
+    /** @returns {boolean} */
+    get defer(): boolean;
+    /** @param {string|string[]} blocking */
+    set blocking(blocking: string | string[]);
+    /** @returns {string[]|null} */
+    get blocking(): string[] | null;
+    /** @param {"anonymous"|"use-credentials"} crossorigin */
+    set crossorigin(crossorigin: "anonymous" | "use-credentials");
+    /** @returns {string|null} */
+    get crossorigin(): string | null;
+    /** @param {"auto"|"high"|"low"} fetchpriority */
+    set fetchpriority(fetchpriority: "auto" | "high" | "low");
+    /** @returns {string|null} */
+    get fetchpriority(): string | null;
+    /** @param {string} integrity */
+    set integrity(integrity: string);
+    /** @returns {string|null} */
+    get integrity(): string | null;
+    /** @param {boolean} nomodule */
+    set nomodule(nomodule: boolean);
+    /** @returns {boolean} */
+    get nomodule(): boolean;
+    /** @param {string} nonce */
+    set nonce(nonce: string);
+    /** @returns {string|null} */
+    get nonce(): string | null;
+    /** @param {string} referrerpolicy */
+    set referrerpolicy(referrerpolicy: string);
+    /** @returns {string|null} */
+    get referrerpolicy(): string | null;
+    /** @param {boolean|string|string[]} attributionsrc */
+    set attributionsrc(attributionsrc: boolean | string | string[]);
+    /** @returns {boolean|string[]|null} */
+    get attributionsrc(): boolean | string[] | null;
+    /** @param {string} code */
+    set content(code: string);
+    /** @returns {string|null} */
+    get content(): string | null;
+}
+import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
+//# sourceMappingURL=TinyHtmlScript.d.mts.map

package/dist/v1/libs/TinyHtml/TinyHtmlScript.mjs

@@ -0,0 +1,209 @@
+import TinyHtmlTemplate from './TinyHtmlTemplate.mjs';
+/**
+ * TinyHtmlScript is a helper class for creating and managing <script> elements.
+ * Supports both inline and external scripts, with attributes for async, defer, modules, etc.
+ *
+ * @extends TinyHtmlTemplate<HTMLScriptElement>
+ */
+class TinyHtmlScript extends TinyHtmlTemplate {
+    /**
+     * Creates a new TinyHtmlScript instance.
+     * @param {Object} config - Configuration object.
+     * @param {string} [config.src] - URI of an external script.
+     * @param {string} [config.type] - The type of script (e.g., "module", "importmap", "speculationrules", or JS MIME type).
+     * @param {boolean} [config.async=false] - Whether the script should be executed asynchronously (requires src).
+     * @param {boolean} [config.defer=false] - Whether the script should be deferred until after parsing (requires src).
+     * @param {string|string[]|Set<string>} [config.tags=[]] - Initial CSS classes.
+     * @param {string} [config.mainClass=""] - Main CSS class.
+     * @param {string} [config.content=""] - Inline script content (ignored if src is provided).
+     * @param {string|string[]} [config.blocking] - Space-separated list of blocking tokens (currently only "render").
+     * @param {"anonymous" | "use-credentials"} [config.crossorigin] - CORS setting ("anonymous" or "use-credentials").
+     * @param {"auto"|"high"|"low"} [config.fetchpriority="auto"] - Fetch priority.
+     * @param {string} [config.integrity] - Subresource integrity hash (only valid with src).
+     * @param {boolean} [config.nomodule=false] - Whether to prevent execution in browsers supporting modules.
+     * @param {string} [config.nonce] - Cryptographic nonce for CSP.
+     * @param {string} [config.referrerpolicy] - Referrer policy.
+     * @param {boolean|string|string[]} [config.attributionsrc] - Boolean or list of URLs for attribution reporting.
+     */
+    constructor({ src, type, async = false, defer = false, tags = [], mainClass = '', content = '', blocking, crossorigin, fetchpriority = 'auto', integrity, nomodule = false, nonce, referrerpolicy, attributionsrc, } = {}) {
+        super(document.createElement('script'), tags, mainClass);
+        if (src !== undefined)
+            this.src = src;
+        if (type !== undefined)
+            this.type = type;
+        this.async = async;
+        this.defer = defer;
+        if (blocking !== undefined)
+            this.blocking = blocking;
+        if (crossorigin !== undefined)
+            this.crossorigin = crossorigin;
+        this.fetchpriority = fetchpriority;
+        if (integrity !== undefined)
+            this.integrity = integrity;
+        this.nomodule = nomodule;
+        if (nonce !== undefined)
+            this.nonce = nonce;
+        if (referrerpolicy !== undefined)
+            this.referrerpolicy = referrerpolicy;
+        if (attributionsrc !== undefined)
+            this.attributionsrc = attributionsrc;
+        if (!src && content)
+            this.content = content;
+    }
+    /** @param {string} src */
+    set src(src) {
+        if (typeof src !== 'string')
+            throw new TypeError('TinyHtmlScript: "src" must be a string.');
+        this.setAttr('src', src);
+    }
+    /** @returns {string|null} */
+    get src() {
+        return this.attrString('src');
+    }
+    /** @param {string} type */
+    set type(type) {
+        if (typeof type !== 'string')
+            throw new TypeError('TinyHtmlScript: "type" must be a string.');
+        this.setAttr('type', type);
+    }
+    /** @returns {string|null} */
+    get type() {
+        return this.attrString('type');
+    }
+    /** @param {boolean} async */
+    set async(async) {
+        if (typeof async !== 'boolean')
+            throw new TypeError('TinyHtmlScript: "async" must be a boolean.');
+        if (async && !this.src)
+            throw new Error('TinyHtmlScript: "async" requires a "src" attribute.');
+        this.toggleProp('async', async);
+    }
+    /** @returns {boolean} */
+    get async() {
+        return this.hasProp('async');
+    }
+    /** @param {boolean} defer */
+    set defer(defer) {
+        if (typeof defer !== 'boolean')
+            throw new TypeError('TinyHtmlScript: "defer" must be a boolean.');
+        if (defer && !this.src)
+            throw new Error('TinyHtmlScript: "defer" requires a "src" attribute.');
+        this.toggleProp('defer', defer);
+    }
+    /** @returns {boolean} */
+    get defer() {
+        return this.hasProp('defer');
+    }
+    /** @param {string|string[]} blocking */
+    set blocking(blocking) {
+        const values = Array.isArray(blocking) ? blocking : String(blocking).trim().split(/\s+/);
+        for (const v of values) {
+            if (v !== 'render')
+                throw new Error(`TinyHtmlScript: invalid blocking token "${v}".`);
+        }
+        this.setAttr('blocking', values.join(' '));
+    }
+    /** @returns {string[]|null} */
+    get blocking() {
+        const val = this.attrString('blocking');
+        return val ? val.split(/\s+/) : null;
+    }
+    /** @param {"anonymous"|"use-credentials"} crossorigin */
+    set crossorigin(crossorigin) {
+        if (!['anonymous', 'use-credentials'].includes(crossorigin))
+            throw new Error('TinyHtmlScript: "crossorigin" must be "anonymous" or "use-credentials".');
+        this.setAttr('crossorigin', crossorigin);
+    }
+    /** @returns {string|null} */
+    get crossorigin() {
+        return this.attrString('crossorigin');
+    }
+    /** @param {"auto"|"high"|"low"} fetchpriority */
+    set fetchpriority(fetchpriority) {
+        if (!['auto', 'high', 'low'].includes(fetchpriority))
+            throw new Error('TinyHtmlScript: "fetchpriority" must be "auto", "high", or "low".');
+        this.setAttr('fetchpriority', fetchpriority);
+    }
+    /** @returns {string|null} */
+    get fetchpriority() {
+        return this.attrString('fetchpriority');
+    }
+    /** @param {string} integrity */
+    set integrity(integrity) {
+        if (!this.src)
+            throw new Error('TinyHtmlScript: "integrity" requires "src".');
+        if (typeof integrity !== 'string')
+            throw new TypeError('TinyHtmlScript: "integrity" must be a string.');
+        this.setAttr('integrity', integrity);
+    }
+    /** @returns {string|null} */
+    get integrity() {
+        return this.attrString('integrity');
+    }
+    /** @param {boolean} nomodule */
+    set nomodule(nomodule) {
+        if (typeof nomodule !== 'boolean')
+            throw new TypeError('TinyHtmlScript: "nomodule" must be a boolean.');
+        this.toggleProp('nomodule', nomodule);
+    }
+    /** @returns {boolean} */
+    get nomodule() {
+        return this.hasProp('nomodule');
+    }
+    /** @param {string} nonce */
+    set nonce(nonce) {
+        if (typeof nonce !== 'string')
+            throw new TypeError('TinyHtmlScript: "nonce" must be a string.');
+        this.setAttr('nonce', nonce);
+    }
+    /** @returns {string|null} */
+    get nonce() {
+        return this.attrString('nonce');
+    }
+    /** @param {string} referrerpolicy */
+    set referrerpolicy(referrerpolicy) {
+        if (typeof referrerpolicy !== 'string')
+            throw new TypeError('TinyHtmlScript: "referrerpolicy" must be a string.');
+        this.setAttr('referrerpolicy', referrerpolicy);
+    }
+    /** @returns {string|null} */
+    get referrerpolicy() {
+        return this.attrString('referrerpolicy');
+    }
+    /** @param {boolean|string|string[]} attributionsrc */
+    set attributionsrc(attributionsrc) {
+        if (attributionsrc === true) {
+            this.addProp('attributionsrc');
+        }
+        else if (typeof attributionsrc === 'string') {
+            this.setAttr('attributionsrc', attributionsrc);
+        }
+        else if (Array.isArray(attributionsrc) &&
+            attributionsrc.every((v) => typeof v === 'string')) {
+            this.setAttr('attributionsrc', attributionsrc.join(' '));
+        }
+        else {
+            throw new TypeError('TinyHtmlScript: "attributionsrc" must be boolean, string, or string[].');
+        }
+    }
+    /** @returns {boolean|string[]|null} */
+    get attributionsrc() {
+        if (this.hasProp('attributionsrc'))
+            return true;
+        const val = this.attrString('attributionsrc');
+        return val ? val.split(/\s+/) : null;
+    }
+    /** @param {string} code */
+    set content(code) {
+        if (typeof code !== 'string')
+            throw new TypeError('TinyHtmlScript: "content" must be a string.');
+        if (this.src)
+            throw new Error('TinyHtmlScript: Cannot set inline content when "src" is defined.');
+        this._preHtmlElem('content').textContent = code;
+    }
+    /** @returns {string|null} */
+    get content() {
+        return this._preHtmlElem('content').textContent || null;
+    }
+}
+export default TinyHtmlScript;

package/dist/v1/libs/TinyHtml/TinyHtmlSelect.cjs

@@ -0,0 +1,267 @@
+'use strict';
+
+var TinyHtml = require('../TinyHtml.cjs');
+var TinyHtmlTemplate = require('./TinyHtmlTemplate.cjs');
+
+/**
+ * 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>
+ */
+class TinyHtmlSelect extends TinyHtmlTemplate {
+  /**
+   * 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 = false,
+    autocomplete,
+    autofocus = false,
+    disabled = false,
+    form,
+    name,
+    required = false,
+    size,
+    tags = [],
+    mainClass = '',
+  } = {}) {
+    super(document.createElement('select'), tags, mainClass);
+
+    this.multiple = multiple;
+    if (autocomplete !== undefined) this.autocomplete = autocomplete;
+    this.autofocus = autofocus;
+    this.disabled = disabled;
+    if (form !== undefined) this.form = form;
+    if (name !== undefined) this.name = name;
+    this.required = required;
+    if (size !== undefined) this.sizeEl = size;
+
+    for (const opt of options) {
+      this.addOption(opt);
+    }
+  }
+
+  /** @param {boolean} multiple */
+  set multiple(multiple) {
+    if (typeof multiple !== 'boolean') throw new TypeError('"multiple" must be a boolean.');
+    if (multiple) this.addProp('multiple');
+    else this.removeProp('multiple');
+  }
+
+  /** @returns {boolean} */
+  get multiple() {
+    return this.hasProp('multiple');
+  }
+
+  /** @param {string} autocomplete */
+  set autocomplete(autocomplete) {
+    if (typeof autocomplete !== 'string') throw new TypeError('"autocomplete" must be a string.');
+    this.setAttr('autocomplete', autocomplete);
+  }
+
+  /** @returns {string|null} */
+  get autocomplete() {
+    return this.attrString('autocomplete');
+  }
+
+  /** @param {boolean} autofocus */
+  set autofocus(autofocus) {
+    if (typeof autofocus !== 'boolean') throw new TypeError('"autofocus" must be a boolean.');
+    if (autofocus) this.addProp('autofocus');
+    else this.removeProp('autofocus');
+  }
+
+  /** @returns {boolean} */
+  get autofocus() {
+    return this.hasProp('autofocus');
+  }
+
+  /** @param {boolean} disabled */
+  set disabled(disabled) {
+    if (typeof disabled !== 'boolean') throw new TypeError('"disabled" must be a boolean.');
+    if (disabled) this.addProp('disabled');
+    else this.removeProp('disabled');
+  }
+
+  /** @returns {boolean} */
+  get disabled() {
+    return this.hasProp('disabled');
+  }
+
+  /** @param {string} form */
+  set form(form) {
+    if (typeof form !== 'string') throw new TypeError('"form" must be a string (form id).');
+    this.setAttr('form', form);
+  }
+
+  /** @returns {string|null} */
+  get form() {
+    return this.attrString('form');
+  }
+
+  /** @param {string} name */
+  set name(name) {
+    if (typeof name !== 'string') throw new TypeError('"name" must be a string.');
+    this.setAttr('name', name);
+  }
+
+  /** @returns {string|null} */
+  get name() {
+    return this.attrString('name');
+  }
+
+  /** @param {boolean} required */
+  set required(required) {
+    if (typeof required !== 'boolean') throw new TypeError('"required" must be a boolean.');
+    if (required) this.addProp('required');
+    else this.removeProp('required');
+  }
+
+  /** @returns {boolean} */
+  get required() {
+    return this.hasProp('required');
+  }
+
+  /** @param {number} size */
+  set sizeEl(size) {
+    if (!Number.isInteger(size) || size < 0)
+      throw new TypeError('"size" must be a non-negative integer.');
+    this.setAttr('size', size);
+  }
+
+  /** @returns {number|null} */
+  get sizeEl() {
+    return this.attrNumber('size');
+  }
+
+  /**
+   * Adds an option element.
+   * @param {{ value: string, label: string|Element|TinyHtml<any>, selected?: boolean, allowHtml?: boolean }} option
+   * @returns {this}
+   */
+  addOption({ value, label, allowHtml = false, selected = false }) {
+    if (typeof value !== 'string') throw new TypeError('"value" must be a string.');
+    if (typeof selected !== 'boolean') throw new TypeError('"selected" must be a boolean.');
+
+    const opt = new TinyHtml(document.createElement('option'));
+    opt.setAttr('value', value);
+
+    if (typeof label === 'string') {
+      if (!allowHtml) opt.setText(label);
+      else opt.setHtml(label);
+    } else if (label instanceof Element || label instanceof TinyHtml) {
+      if (!allowHtml)
+        throw new Error('addOption: Passing an Element/TinyHtml requires allowHtml=true.');
+      opt.append(label);
+    } else {
+      throw new TypeError('"label" must be a string, Element, or TinyHtml instance.');
+    }
+
+    if (selected) opt.addProp('selected');
+    this.append(opt);
+    return this;
+  }
+
+  /** @returns {string} */
+  get value() {
+    if (this.multiple)
+      throw new Error('TinyHtmlSelect.value: Use "values" getter for multiple selects.');
+    return this.valTxt();
+  }
+
+  /** @param {string} val */
+  set value(val) {
+    if (this.multiple)
+      throw new Error('TinyHtmlSelect.value: Use "values" setter for multiple selects.');
+    if (typeof val !== 'string') throw new TypeError('"value" must be a string.');
+    this.setValue(val);
+  }
+
+  /** @returns {string[]} */
+  get values() {
+    if (!this.multiple)
+      throw new Error('TinyHtmlSelect.values: Use "value" getter for single select.');
+    return Array.from(this.prop('selectedOptions')).map((o) => o.value);
+  }
+
+  /** @param {string[]} vals */
+  set values(vals) {
+    if (!this.multiple)
+      throw new Error('TinyHtmlSelect.values: Use "value" setter for single select.');
+    if (!Array.isArray(vals) || !vals.every((v) => typeof v === 'string'))
+      throw new TypeError('"values" must be an array of strings.');
+    this.setValue(vals);
+  }
+
+  /**
+   * Internal: apply selection to options.
+   * @param {string|string[]} value
+   * @returns {this}
+   */
+  setValue(value) {
+    const values = Array.isArray(value) ? value : [value];
+    for (const opt of this.prop('options')) {
+      opt.selected = values.includes(opt.value);
+    }
+    return this;
+  }
+}
+
+module.exports = TinyHtmlSelect;