eyjs 7.0.0 → 7.1.0

package/changelog.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [7.1.0] - 2025-10-01
+
+### Changed
+
+ - `.append` function only affect first selected element, also fixed to accept multiple selected element using `e` function.
+ - functions now only affect first selected element in general.
+ - library had been re-structured better.
+
+### Added
+
+ - `e` our dear library now accepts arrays of elements like `e([HTMLDivElement, HTMLSpanElement, HTMLInputElement...])`
+ - `.css` function may accept only numbers for properties such as `width` `height` `left` `top`...
+
 ## [7.0.0] - 2025-09-01
 
 ### Changed

package/dist/eye.cjs.js

@@ -12,6 +12,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @property {String} html - set element html
  */
 
+const unitlessProps = new Set([
+  "opacity", "zIndex", "fontWeight", "lineHeight",
+  "flex", "flexGrow", "flexShrink", "order"
+]);
+
 /**
  * Returns the associated class event of that event
  * example: for click event it returns new MouseEvent("click")
@@ -379,7 +384,7 @@ let normalSetterGetter = (action, v, elm) => v;
 class EyeElement {
   /**
    * Raw html element
-   * @type {HTMLElement}
+   * @type {Array<HTMLElement>}
    */
   #raw = null;
 
@@ -410,17 +415,14 @@ class EyeElement {
   constructor(selector, attrs, css) {
     let _this = this;
     if (selector instanceof HTMLElement) {
-      this.#raw = selector;
+      this.#raw = [selector];
     } else if (htmlElements.includes(selector)) {
       // creating a new element
-      this.#raw = document.createElement(selector.substring(1, selector.length - 1));
+      this.#raw = [document.createElement(selector.substring(1, selector.length - 1))];
     } else {
       // selecting
       let s = selector.slice(-1) === "!";
-      this.#raw = document.querySelectorAll(s ? selector.slice(0, -1) : selector);
-
-      if (this.#raw.length == 0) return null; // we stop everything here
-      if (this.length == 1 || s) this.#raw = this.#raw.item(0);
+      this.#raw = [...document.querySelectorAll(s ? selector.slice(0, -1) : selector)];
     }
 
     /**
@@ -484,7 +486,6 @@ class EyeElement {
       };
     });
 
-
     return this;
   }
 
@@ -493,7 +494,7 @@ class EyeElement {
    * @type {Number}
    */
   get length() {
-    return this.#raw instanceof NodeList ? this.#raw.length : 1;
+    return this.#raw.length;
   }
 
   /**
@@ -511,10 +512,9 @@ class EyeElement {
    * @returns {EyeElement}
    */
   each(cb) {
-    let list = (this.#raw instanceof NodeList ? [...this.#raw.entries()] : [[0, this.#raw]]);
-    for (let i = 0; i < list.length; i++) {
-      const [idx, elm] = list[i];
-      let exit = cb(elm, idx, this);
+    for (let i = 0; i < this.#raw.length; i++) {
+      const elm = this.#raw[i];
+      let exit = cb(elm, i, this);
       if (exit === false) break;
     }
     return this;
@@ -680,46 +680,39 @@ class EyeElement {
     return this;
   }
   /**
-   * Append one or more elements to the current element
+   * Append one or more elements to the current element, only effect the first element in the selected list
    * @method EyeElement#append
    * @param {HTMLElement|Array<Node|EyeElement>} elm
    * @param {"next" | "after" | "previous" | "before" | "first" | "afterbegin" | "last" | "beforeend"} [pos] [optional]
    * @returns {EyeElement}
    */
   append(elm, pos) {
-    let nodes = [];
     (Array.isArray(elm) ? elm : [elm]).forEach(item => {
-      if (item instanceof EyeElement) nodes.push(item.#raw);
-      else if (item instanceof HTMLElement) nodes.push(item);
-    });
-    if (this.#raw instanceof NodeList) {
-      console.warn(`[EyeJS] beware while using .append with multi selected elements`);
-      this.#raw.forEach((itm, idx) => {
-        if (!nodes[idx]) return;
-        itm.append(nodes[idx]);
+      let nodes = [];
+      if (item instanceof EyeElement) nodes = [...item.raw];
+      else if (item instanceof HTMLElement) nodes = [item];
+
+      nodes.forEach(node => {
+        switch (pos) {
+          case "next":
+          case "after":
+            this.#raw[0].after(node);
+            break;
+          case "previous":
+          case "before":
+            this.#raw[0].before(node);
+            break;
+          case "afterbegin":
+          case "first":
+            this.#raw[0].prepend(node);
+            break;
+          case "beforeend":
+          case "last":
+          default:
+            this.#raw[0].append(node);
+        }
       });
-      return this;
-    }
-    if (!pos) this.#raw.append(...nodes);
-    else
-      switch (pos) {
-        case "next":
-        case "after":
-          this.#raw.after(...nodes);
-          break;
-        case "previous":
-        case "before":
-          this.#raw.before(...nodes);
-          break;
-        case "afterbegin":
-        case "first":
-          this.#raw.prepend(...nodes);
-          break;
-        case "beforeend":
-        case "last":
-          this.#raw.append(...nodes);
-
-      }
+    });
     return this;
   }
   /**
@@ -729,7 +722,7 @@ class EyeElement {
    * @returns {EyeElement}
    */
   after(elm) {
-    (this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw).after(elm instanceof EyeElement ? elm.raw : elm);
+    this.#raw[0].after(elm instanceof EyeElement ? elm.raw : elm);
     return this;
   }
   /**
@@ -739,7 +732,7 @@ class EyeElement {
    * @returns {EyeElement}
    */
   before(elm) {
-    (this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw).before(elm instanceof EyeElement ? elm.raw : elm);
+    this.#raw[0].before(elm instanceof EyeElement ? elm.raw : elm);
     return this;
   }
   /**
@@ -752,17 +745,10 @@ class EyeElement {
   replaceWith(...elms) {
     let nodes = [];
     (Array.isArray(elms) ? elms : [elms]).forEach(item => {
-      if (item instanceof EyeElement) nodes.push(item.#raw);
+      if (item instanceof EyeElement) nodes = nodes.concat(...item.raw);
       else if (item instanceof HTMLElement) nodes.push(item);
     });
-    if (this.#raw instanceof NodeList) {
-      [...this.#raw.entries()].forEach(([idx, elm]) => {
-        if (!nodes[idx]) return;
-        elm.replaceWith(nodes[idx]);
-      });
-    } else {
-      this.#raw.replaceWith(...nodes);
-    }
+    this.#raw[0].replaceWith(...nodes);
     return this;
   }
   /**
@@ -783,27 +769,23 @@ class EyeElement {
       });
       return this;
     }
-    return e(this.#raw instanceof NodeList ? this.#raw.item(0).parentElement : this.#raw.parentElement);
+    return e(this.#raw[0].parentElement);
   }
   /**
-   * Returns whether current node is the same/equal(depending on `check`) as the passed node or not
+   * Returns whether current node is the same/equal (depending on `check`) as the passed node or not
    * @method EyeElement#is
    * @param {HTMLElement|EyeElement} node
    * @param {"connected" | "same" | "equal"} [check] check type `same`, `equal`
    * @returns {boolean}
    */
   is(node, check) {
-    node = node instanceof EyeElement ? node.#raw : node;
-    if (this.#raw instanceof NodeList) {
-      console.warn(`[EyeJS] .is is not functional with multi selected elements`);
-      return this;
-    }
-    if (node === "connected") return this.#raw.isConnected;
+    node = node instanceof EyeElement ? node.#raw[0] : node;
+    if (node === "connected") return this.#raw[0].isConnected;
     switch (check) {
       case "same":
-        return this.#raw.isSameNode(node);
+        return this.#raw[0].isSameNode(node);
       case "equal":
-        return this.#raw.isEqualNode(node);
+        return this.#raw[0].isEqualNode(node);
       default:
         console.error(
           `[EyeJS] Unknown check "${check}", possible values are ["same","equal","connected"]`
@@ -820,6 +802,7 @@ class EyeElement {
    */
   css(attr, value) {
     if (attr) {
+      if (!unitlessProps.has(attr) && typeof value === "number" && value != 0) value = `${value}px`;
       let out = undefined;
       attr = flat(attr);
       this.each((elm, idx) => {
@@ -827,7 +810,7 @@ class EyeElement {
         elm.style[attr] = value;
       });
       return out != undefined ? out : this;
-    } else return console.error(`[EyeJS] mission argument "attr" in function .css`);
+    } else return console.error(`[EyeJS] missing argument "attr" in function .css`);
   }
   /**
    * Remove current element
@@ -870,8 +853,6 @@ class EyeElement {
         "[EyeJS] .on method is missing the actuall callback `cb` or not of type function"
       );
 
-    let elms = (this.#raw instanceof NodeList ? [...this.#raw.entries()] : [[0, this.#raw]]);
-
     let outsider = null;
     ev.forEach(evt => {
       if (target) {
@@ -882,7 +863,7 @@ class EyeElement {
           _this.#dlgListeners.set(evt, new Set());
         _this.#dlgListeners.get(evt).add({ callback: cb, target });
       } else {
-        elms.forEach(([idx, elm]) => {
+        _this.each((elm) => {
           elm.addEventListener(evt, cb);
         });
       }
@@ -954,21 +935,15 @@ class EyeElement {
    * Returns a clone of current selected element/s
    * @method EyeElement#clone
    * @param {HTMLElement} [parent] optionally append new clone to a parent
-   * @returns {Array<EyeElement>|EyeElement}
+   * @returns {Array<EyeElement>}
    */
   clone(parent) {
-    if (this.#raw instanceof NodeList) {
-      let list = [];
-      this.#raw.forEach(nd => {
-        list.push(nd.cloneNode(true));
-      });
-      if (parent instanceof HTMLElement || parent instanceof EyeElement) list.forEach(el => parent.append(el));
-      return list;
-    } else {
-      let clone = this.#raw.cloneNode(true);
-      if (parent instanceof HTMLElement || parent instanceof EyeElement) parent.append(clone);
-      return clone;
-    }
+    let list = [];
+    this.each((nd) => {
+      list.push(nd.cloneNode(true));
+    });
+    if (parent instanceof HTMLElement || parent instanceof EyeElement) list.forEach(el => parent.append(el));
+    return list;
   }
   /**
    * Compute DOMRect or style declaration of current element
@@ -979,10 +954,10 @@ class EyeElement {
   compute(type) {
     type = type || "bounds";
     if (type === "bounds")
-      return (this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw).getBoundingClientRect();
+      return (this.#raw[0]).getBoundingClientRect();
     else if (type == "style")
-      return getComputedStyle(this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw)
-    console.error(`[EyeJS] unkown type "${type}" in function .compute, possible values are "bounds" "style"`);
+      return getComputedStyle(this.#raw[0])
+    console.error(`[EyeJS] unknown type "${type}" in function .compute, possible values are "bounds" "style"`);
   }
 
   /**
@@ -992,7 +967,7 @@ class EyeElement {
    */
   client(attr) {
     if (['width', 'height', 'left', 'top'].includes(attr))
-      return (this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw)[`client${attr[0].toUpperCase()}${attr.substring(1, attr.length)}`];
+      return this.#raw[0][`client${attr[0].toUpperCase()}${attr.substring(1, attr.length)}`];
     else console.error(`[EyeJS] Unknown client* attribute "${attr}" in .client(attr)`);
     return this;
   }
@@ -1030,9 +1005,8 @@ class EyeElement {
    * @returns {EyeElement|null}
    */
   child(index) {
-    let it = (this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw);
-    if (index === undefined) return it.children.length;
-    if (it.children[index]) return e(it.children[index]);
+    if (index === undefined) return this.#raw[0].children.length;
+    if (this.#raw[0].children[index]) return e(this.#raw[0].children[index]);
     return null;
   }
   /**
@@ -1042,11 +1016,8 @@ class EyeElement {
    * @returns 
    */
   val(value) {
-    if (value != undefined) (this.#raw instanceof NodeList ? [...this.#raw.entries()] : [[0, this.#raw]]).forEach(([idx, a]) => a.value = this.#customSet.value("set", value, a));
-    else {
-      let it = (this.#raw instanceof NodeList ? this.#raw.item(0) : this.#raw);
-      return this.#customSet.value("get", it.value, it);
-    }
+    if (value != undefined) this.each((a) => a.value = this.#customSet.value("set", value, a));
+    else return this.#customSet.value("get", this.#raw[0].value, this.#raw[0]);
     return this;
   }
   /**
@@ -1060,31 +1031,29 @@ class EyeElement {
     let {
       inputs = ["input", "textarea", "select"],
     } = opts;
-    if (this.#raw instanceof HTMLElement) {
-      let out = {
-        json: {},
-        url: "",
-        fd: new FormData()
-      };
-      this.#raw.querySelectorAll(inputs.join(','))
-        .forEach((inp, i) => {
-          let name = inp.name || inp.dataset.name;
-          let value = inp.value || inp.textContent;
-          if (typeof opts[name] === "function") value = opts[name](inp);
-
-          if (inp.type == "file")
-            inp.files.forEach(file => {
-              out.fd.append(name, file);
-            });
-          else {
-            out.json[name] = value;
-            out.fd.append(name, value);
-          }
-        });
+    let out = {
+      json: {},
+      url: "",
+      fd: new FormData()
+    };
+    this.#raw[0].querySelectorAll(inputs.join(','))
+      .forEach((inp, i) => {
+        let name = inp.name || inp.dataset.name;
+        let value = inp.value || inp.textContent;
+        if (typeof opts[name] === "function") value = opts[name](inp);
+
+        if (inp.type == "file")
+          inp.files.forEach(file => {
+            out.fd.append(name, file);
+          });
+        else {
+          out.json[name] = value;
+          out.fd.append(name, value);
+        }
+      });
 
-      out.url = new URLSearchParams(out.json).toString();
-      return out;
-    } else console.warn(`[EyeJS] this is a multi selection, it's not serializable!`);
+    out.url = new URLSearchParams(out.json).toString();
+    return out;
   }
   /**
    * Redefine the way `.text` or `.val` set or get data to and from this element.
@@ -1118,20 +1087,20 @@ class EyeElement {
   }
 
   /**
-   * Find element/s position/s within parent element
+   * Find first element position within parent element
    * @method EyeElement#position
    * @returns {number}
    */
   position() {
-    let poses = [];
-    this.each((elm) => {
-      for (let i = 0; i < elm.parentNode.children.length; i++) {
-        const child = elm.parentNode.children[i];
-        if (elm.isSameNode(child)) poses.push(i);
+    let pos = -1;
+    for (let i = 0; i < this.#raw[0].parentNode.children.length; i++) {
+      const child = this.#raw[0].parentNode.children[i];
+      if (this.#raw[0].isSameNode(child)) {
+        pos = i;
+        break;
       }
-
-    });
-    return poses.length == 0 ? poses[0] : poses;
+    }
+    return pos;
   }
 }
 /**
@@ -1179,7 +1148,6 @@ function e(tag, attrs, css) {
   }
 }
 
-
 // gloablly exposed
 window.e = e;
 window.EyeElement = EyeElement;