@htmltools/hdom 0.1.0 → 0.1.3

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
      */
@@ -23,28 +27,67 @@ export class hdom {
     static createCheckBox(id: string, checked: boolean): HTMLInputElement;
     /**
      * @param {string} name
-     * @param {Object<string,string|number>|string} [attributes]
+     * @param {Object<string,string|number|undefined>|string} [attributes]
+     * @param {Element} [parent]
      * @returns {HTMLElement}
      */
     static createElement(name: string, attributes?: {
-        [x: string]: string | number;
-    } | string): HTMLElement;
+        [x: string]: string | number | undefined;
+    } | string, parent?: Element): HTMLElement;
     /**
-     * @param {Object.<string,string|number>|string} attributes
+     * @param {Object.<string,string|number|undefined>|string} attributes
      * @returns {HTMLInputElement}
      */
     static createInputElement(attributes: {
-        [x: string]: string | number;
+        [x: string]: string | number | undefined;
     } | string): HTMLInputElement;
+    /**
+     * @param {string} forId
+     * @param {string} text
+     * @returns {HTMLElement}
+     */
+    static createLabelElement(forId: string, text: 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>} attributes
+     * @param {Object<string,string>|string} attributes
      * @param {string|number} text
-     * @returns {Element}
+     * @param {Element} [parent]
+     * @returns {HTMLElement}
      */
     static createTextElement(name: string, attributes: {
         [x: string]: string;
-    }, text: string | number): Element;
+    } | string, text: string | number, parent?: Element): HTMLElement;
     /**
      * @param {string|HTMLElement} e
      * @param {boolean} [enable=true]
@@ -102,6 +145,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
    */
@@ -50,10 +61,11 @@ export class hdom {
 
   /**
    * @param {string} name
-   * @param {Object<string,string|number>|string} [attributes]
+   * @param {Object<string,string|number|undefined>|string} [attributes]
+   * @param {Element} [parent]
    * @returns {HTMLElement}
    */
-  static createElement(name, attributes) {
+  static createElement(name, attributes, parent) {
     const e = document.createElement(name);
     switch (typeof attributes) {
       case "string":
@@ -62,33 +74,105 @@ export class hdom {
         break;
       case "object":
         for (const [k, v] of Object.entries(attributes)) {
-          e.setAttribute(k, v.toString());
+          if (v !== undefined) {
+            e.setAttribute(k, v.toString());
+          }
         }
         break;
     }
+    if (parent) {
+      parent.appendChild(e);
+    }
     return e;
   }
 
   /**
-   * @param {Object.<string,string|number>|string} attributes
+   * @param {Object.<string,string|number|undefined>|string} attributes
    * @returns {HTMLInputElement}
    */
   static createInputElement(attributes) {
-    const e = this.createElement("input", attributes);
-    if (!(e instanceof HTMLInputElement)) {
-      throw new Error();
+    return /** @type {HTMLInputElement} */ (
+      this.createElement("input", attributes)
+    );
+  }
+
+  /**
+   * @param {string} forId
+   * @param {string} text
+   * @returns {HTMLElement}
+   */
+  static createLabelElement(forId, text) {
+    const el = this.createElement("label", { for: forId });
+    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());
     }
-    return e;
+    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>} attributes
+   * @param {Object<string,string>|string} attributes
    * @param {string|number} text
-   * @returns {Element}
+   * @param {Element} [parent]
+   * @returns {HTMLElement}
    */
-  static createTextElement(name, attributes, text) {
-    const elem = this.createElement(name, attributes);
+  static createTextElement(name, attributes, text, parent) {
+    const elem = this.createElement(name, attributes, parent);
     this.setTextValue(elem, text.toString());
     return elem;
   }
@@ -189,7 +273,7 @@ export class hdom {
    */
   static isHidden(e) {
     const elem = this.getElement(e);
-    return elem instanceof HTMLElement && elem.hidden;
+    return elem.hidden === true;
   }
 
   /**
@@ -235,6 +319,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.0",
+  "version": "0.1.3",
   "description": "Tools to interact with the HTML DOM.",
   "license": "MIT",
   "repository": {