@htmltools/hdom 0.1.1 → 0.1.4

package/lib/hdom.d.ts

@@ -11,6 +11,10 @@ export class hdom {
      * @returns {Element}
      */
     static addEventListener(e: string | Element, type: string, fn: (arg0: Event) => void): Element;
+    /**
+     * @param {string|HTMLElement} e
+     */
+    static clickElement(e: string | HTMLElement): void;
     /**
      * @param {string|HTMLDialogElement} e
      */
@@ -37,6 +41,46 @@ export class hdom {
     static createInputElement(attributes: {
         [x: string]: string | number | undefined;
     } | string): HTMLInputElement;
+    /**
+     * @param {string} forId
+     * @param {string} text
+     * @param {Object<string,string>} [extraAtts]
+     * @returns {HTMLElement}
+     */
+    static createLabelElement(forId: string, text: string, extraAtts?: {
+        [x: string]: string;
+    }): HTMLElement;
+    /**
+     * @param {URL|string|undefined} url
+     * @param {Node|string|number} eLinkText
+     * @param {Object.<string,string>|string} [attributes]
+     * @returns {HTMLElement}
+     */
+    static createLinkElement(url: URL | string | undefined, eLinkText: Node | string | number, attributes?: {
+        [x: string]: string;
+    } | string): HTMLElement;
+    /**
+     * @param {string} id
+     * @param {{value?:string,label?:string}[]} options
+     * @returns {HTMLElement}
+     */
+    static createSelectElement(id: string, options: {
+        value?: string;
+        label?: string;
+    }[]): HTMLElement;
+    /**
+     * @param {string} id
+     * @param {string} label
+     * @param {{value?:string,label?:string}[]} options
+     * @returns {{label:HTMLElement,select:HTMLElement}}
+     */
+    static createSelectElementWithLabel(id: string, label: string, options: {
+        value?: string;
+        label?: string;
+    }[]): {
+        label: HTMLElement;
+        select: HTMLElement;
+    };
     /**
      * @param {string} name
      * @param {Object<string,string>|string} attributes
@@ -104,6 +148,11 @@ export class hdom {
      * @param {string} value
      */
     static setAttribute(e: string | HTMLElement, attName: string, value: string): void;
+    /**
+     * @param {string|HTMLElement} e
+     * @param {boolean} state
+     */
+    static setCheckBoxState(e: string | HTMLElement, state: boolean): void;
     /**
      * @param {string|Element} e
      * @param {string|number} text

package/lib/hdom.js

@@ -22,6 +22,17 @@ export class hdom {
     return elem;
   }
 
+  /**
+   * @param {string|HTMLElement} e
+   */
+  static clickElement(e) {
+    const elem = this.getElement(e);
+    if (!(elem instanceof HTMLInputElement)) {
+      throw new Error();
+    }
+    elem.click();
+  }
+
   /**
    * @param {string|HTMLDialogElement} e
    */
@@ -85,6 +96,76 @@ export class hdom {
     );
   }
 
+  /**
+   * @param {string} forId
+   * @param {string} text
+   * @param {Object<string,string>} [extraAtts]
+   * @returns {HTMLElement}
+   */
+  static createLabelElement(forId, text, extraAtts = {}) {
+    const attributes = { for: forId, ...extraAtts };
+    const el = this.createElement("label", attributes);
+    this.setTextValue(el, text);
+    return el;
+  }
+
+  /**
+   * @param {URL|string|undefined} url
+   * @param {Node|string|number} eLinkText
+   * @param {Object.<string,string>|string} [attributes]
+   * @returns {HTMLElement}
+   */
+  static createLinkElement(url, eLinkText, attributes) {
+    const eLink = this.createElement("a", attributes);
+    if (url !== undefined) {
+      eLink.setAttribute("href", url.toString());
+    }
+    eLink.appendChild(
+      eLinkText instanceof Node
+        ? eLinkText
+        : document.createTextNode(eLinkText.toString()),
+    );
+    return eLink;
+  }
+
+  /**
+   * @param {string} id
+   * @param {{value?:string,label?:string}[]} options
+   * @returns {HTMLElement}
+   */
+  static createSelectElement(id, options) {
+    const select = this.createElement("select", { id: id });
+    for (const option of options) {
+      const optionEl = this.createElement(
+        "option",
+        option.value
+          ? {
+              value: option.value,
+            }
+          : {},
+      );
+      if (option.label) {
+        this.setTextValue(optionEl, option.label);
+      }
+      select.appendChild(optionEl);
+    }
+    return select;
+  }
+
+  /**
+   * @param {string} id
+   * @param {string} label
+   * @param {{value?:string,label?:string}[]} options
+   * @returns {{label:HTMLElement,select:HTMLElement}}
+   */
+  static createSelectElementWithLabel(id, label, options) {
+    const labelEl = this.createLabelElement(id, label);
+    return {
+      label: labelEl,
+      select: this.createSelectElement(id, options),
+    };
+  }
+
   /**
    * @param {string} name
    * @param {Object<string,string>|string} attributes
@@ -194,7 +275,7 @@ export class hdom {
    */
   static isHidden(e) {
     const elem = this.getElement(e);
-    return elem instanceof HTMLElement && elem.hidden;
+    return elem.hidden === true;
   }
 
   /**
@@ -240,6 +321,18 @@ export class hdom {
     elem.setAttribute(attName, value);
   }
 
+  /**
+   * @param {string|HTMLElement} e
+   * @param {boolean} state
+   */
+  static setCheckBoxState(e, state) {
+    const elem = this.getElement(e);
+    if (!(elem instanceof HTMLInputElement)) {
+      return;
+    }
+    elem.checked = state;
+  }
+
   /**
    * @param {string|Element} e
    * @param {string|number} text

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmltools/hdom",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "Tools to interact with the HTML DOM.",
   "license": "MIT",
   "repository": {