@kizmann/pico-js 1.0.14 → 2.0.1

package/package.json

@@ -1,48 +1,60 @@
 {
     "name": "@kizmann/pico-js",
-    "version": "1.0.14",
+    "version": "2.0.1",
     "license": "MIT",
     "type": "module",
     "private": false,
     "author": "Eduard Kizmann <kizmann@protonmail.ch>",
     "repository": "https://github.com/vankizmann/pico-js",
-    "main": "src/index.js",
-    "unpkg": "dist/pico-js.js",
+    "main": "src/index.esm.js",
+    "unpkg": "dist/pico-js.browser.js",
     "types": "types/index.d.ts",
+    "imports": {
+        "#src/*": "./src/*"
+    },
     "files": [
         "dist/",
         "src/",
         "types/",
         "package.json"
     ],
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
     "scripts": {
         "build": "webpack --mode production --config webpack.config.cjs",
-        "watch": "webpack --watch --mode development --config webpack.config.cjs"
+        "watch": "webpack --watch --mode development --config webpack.config.cjs",
+        "test:unit": "node --test ./tests/unit.test.js",
+        "test:load": "node ./tests/load.test.js"
     },
     "devDependencies": {
         "@babel/core": "^7.4.5",
         "@babel/plugin-proposal-class-properties": "^7.4.4",
         "@babel/plugin-proposal-export-default-from": "^7.2.0",
         "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+        "@babel/plugin-transform-runtime": "^7.28.5",
         "@babel/preset-env": "^7.4.4",
         "babel-loader": "^8.0.6",
         "cross-env": "^5.1",
         "css-loader": "^3.2.0",
         "html-webpack-plugin": "^5.0.0",
+        "lodash": "^4.17.23",
         "mini-css-extract-plugin": "^2.0.0",
+        "mitata": "^1.0.34",
         "postcss": "^8.4.31",
         "postcss-inline-svg": "^5.0.0",
         "postcss-loader": "^5.0.0",
         "sass": "^1.87.0",
         "sass-loader": "^12.0.0",
         "terser-webpack-plugin": "^4.2.3",
-        "uuid": "^3.3.2",
+        "tinybench": "^6.0.0",
+        "typescript": "^5.9.3",
         "webpack": "^5.0.0",
         "webpack-cli": "^4.0.0",
         "webpack-dev-server": "^4.0.0"
     },
     "dependencies": {
-        "docsify": "^4.13.1",
-        "moment": "^2.30.1"
+        "docsify": "^4.13.1"
     }
 }

package/src/dom/DomAttribute.js

@@ -0,0 +1,376 @@
+import { Arr, Dom, For, Mix, Obj } from "../index.esm.js";
+import { PicoDom } from "../utils/Dom.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomAttributeStatic
+{
+    //
+}
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomAttributeInstance
+{
+    /**
+     * Get or set attribute
+     *
+     * @example Dom.find("div").attr("id")
+     *
+     * @param {string} key Attr key
+     * @param {any} [value] Attr value
+     * @param {any} [fallback] Fallback value
+     * @returns {any|PicoDom} Attr value or instance
+     */
+    attr(key, value = undefined, fallback = null)
+    {
+        if ( this.el == null ) {
+            return value ? this : fallback;
+        }
+
+        let attr = this.el.getAttribute(key);
+
+        if ( Mix.isUndef(value) ) {
+            return attr || fallback;
+        }
+
+        if ( value === null ) {
+            return (this.el.removeAttribute(key), attr);
+        }
+
+        if ( Mix.isArr(value) ) {
+            value = value.join(' ');
+        }
+
+        if ( Mix.isObj(value) ) {
+            value = For.castOptions(value);
+        }
+
+        this.el.setAttribute(key, value);
+
+        return this;
+    }
+
+    /**
+     * Get or set data attribute
+     *
+     * @example Dom.find("div").data("id")
+     *
+     * @param {string} key Data key
+     * @param {any} [value] Data value
+     * @param {any} [fallback] Fallback value
+     * @returns {any|PicoDom} Data value or instance
+     */
+    data(key, value = undefined, fallback = null)
+    {
+        return this.attr('data-' + key, value, fallback);
+    }
+
+    /**
+     * Get computed style
+     *
+     * @example Dom.find("div").computed("width")
+     *
+     * @param {any} [key] Style key
+     * @param {any} [fallback] Fallback value
+     * @returns {any} Computed style
+     */
+    computed(key = null, fallback = null)
+    {
+        if ( this.el == null ) {
+            return fallback;
+        }
+
+        if ( this.getNodeType() !== 1 ) {
+            return fallback;
+        }
+
+        let computed = getComputedStyle(this.el);
+
+        if ( key == null ) {
+            return computed;
+        }
+
+        return Obj.get(computed, key, fallback);
+    }
+
+    /**
+     * Get or set style
+     *
+     * @example Dom.find("div").style({ color: "red" })
+     *
+     * @param {any} [value] Style value
+     * @param {boolean} [combine] Combine style
+     * @returns {any|PicoDom} Style or instance
+     */
+    style(value = undefined, combine = true)
+    {
+        if ( this.el == null ) {
+            return this;
+        }
+
+        if ( value === null ) {
+            return this.attr('style', null);
+        }
+
+        let styles = this.attr('style', undefined, {});
+
+        if ( Mix.isStr(styles) ) {
+            styles = For.parseOptions(styles);
+        }
+
+        if ( Mix.isUndef(value) ) {
+            return styles;
+        }
+
+        if ( combine ) {
+            value = { ...styles, ...value };
+        }
+
+        this.attr('style', value);
+
+        return this;
+    }
+
+    /**
+     * Get or set classes
+     *
+     * @example Dom.find("div").class(["active"])
+     *
+     * @param {any} [value] Class value
+     * @param {boolean} [combine] Combine classes
+     * @returns {any|PicoDom} Classes or instance
+     */
+    class(value = undefined, combine = false)
+    {
+        if ( this.el == null ) {
+            return this;
+        }
+
+        if ( value === null ) {
+            return this.attr('class', '');
+        }
+
+        let classes = this.attr('class', undefined, []);
+
+        if ( Mix.isStr(classes) ) {
+            classes = classes.split(' ');
+        }
+
+        if ( Mix.isUndef(value) ) {
+            return classes;
+        }
+
+        if ( combine ) {
+            value = [...classes, ...value];
+        }
+
+        this.attr('class', value);
+
+        return this;
+    }
+
+    /**
+     * Get or set inner HTML
+     *
+     * @example Dom.find("div").html("<span></span>")
+     *
+     * @param {any} [html] HTML content
+     * @returns {string|PicoDom} HTML or instance
+     */
+    html(html = undefined)
+    {
+        if ( html === undefined ) {
+            return this.el.innerHTML;
+        }
+
+        this.each((el) => {
+            el.innerHTML = html;
+        });
+
+        return this;
+    }
+
+    /**
+     * Get actual style value
+     *
+     * @example Dom.find("div").actual((el) => el.offsetWidth, { display: "block" })
+     *
+     * @param {function} cb Callback fn
+     * @param {any} [style] Temp style
+     * @returns {any} Callback result
+     */
+    actual(cb, style = null)
+    {
+        let backup = this.attr('style');
+
+        this.style(style);
+
+        let result = cb(this.el, this.el);
+
+        this.attr('style', backup);
+
+        return result;
+    }
+
+    /**
+     * Check if has class
+     *
+     * @example Dom.find("div").hasClass("active") // => true
+     *
+     * @param {any} cls Class name
+     * @returns {boolean} True if has class
+     */
+    hasClass(cls)
+    {
+        if ( ! Mix.isArr(cls) ) {
+            cls = [cls];
+        }
+
+        return Arr.isect(this.class(), cls).length > 0;
+    }
+
+    /**
+     * Add class to element
+     *
+     * @example Dom.find("div").addClass("active")
+     *
+     * @param {any} cls Class name
+     * @returns {PicoDom} Current instance
+     */
+    addClass(cls)
+    {
+        if ( this.el == null ) {
+            return this;
+        }
+
+        if ( this.els.length > 1 ) {
+            return this.each((el) => Dom.find(el).addClass(cls));
+        }
+
+        let result = this.el.className.split(' ');
+
+        if ( Mix.isStr(cls) ) {
+            cls = cls.split(' ');
+        }
+
+        result = Arr.append(result, ...cls);
+
+        this.el.className = Arr.unique(result).join(' ');
+
+        return this;
+    }
+
+    /**
+     * Remove class from element
+     *
+     * @example Dom.find("div").remClass("active")
+     *
+     * @param {any} cls Class name
+     * @returns {PicoDom} Current instance
+     */
+    remClass(cls)
+    {
+        if ( this.el == null ) {
+            return this;
+        }
+
+        if ( this.els.length > 1 ) {
+            return this.each((el) => Dom.find(el).remClass(cls));
+        }
+
+        let result = this.el.className.split(' ');
+
+        if ( Mix.isStr(cls) ) {
+            cls = cls.split(' ');
+        }
+
+        result = Arr.diff(result, cls);
+
+        this.el.className = Arr.unique(result).join(' ');
+
+        return this;
+    }
+
+    /**
+     * Toggle class on element
+     *
+     * @example Dom.find("div").toggleClass("active")
+     *
+     * @param {any} cls Class name
+     * @returns {PicoDom} Current instance
+     */
+    toggleClass(cls)
+    {
+        if ( this.els.length > 1 ) {
+            return this.each((el) => Dom.find(el).toggleClass(cls));
+        }
+
+        if ( this.hasClass(cls) ) {
+            return this.remClass(cls);
+        }
+
+        return this.addClass(cls);
+    }
+
+    /**
+     * Set class by state
+     *
+     * @example Dom.find("div").stateClass("active", true)
+     *
+     * @param {any} cls Class name
+     * @param {boolean} [state] Target state
+     * @returns {PicoDom} Current instance
+     */
+    stateClass(cls, state = true)
+    {
+        if ( this.els.length > 1 ) {
+            return this.each((el) => Dom.find(el).stateClass(cls));
+        }
+
+        if ( ! state ) {
+            return this.remClass(cls);
+        }
+
+        return this.addClass(cls);
+    }
+
+}
+
+/**
+ * @see PicoDom.style
+ */
+PicoDomAttributeInstance.prototype.css = function (...args) {
+    console.warn('Dom.css() is deprecated, use Dom.style() instead.');
+    return this.style(...args);
+};
+
+/**
+ * @see PicoDom.remClass
+ */
+PicoDomAttributeInstance.prototype.removeClass = function (...args) {
+    console.warn('Dom.removeClass() is deprecated, use Dom.remClass() instead.');
+    return this.remClass(...args);
+};
+
+/**
+ * @param {typeof PicoDom} self
+ * @returns {typeof PicoDom}
+ */
+export const PicoDomAttributePlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomAttributeStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomAttributeInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomAttributeInstance.constructor);
+
+    return self;
+}

package/src/dom/DomBuilder.js

@@ -0,0 +1,154 @@
+import { Arr, Dom, Mix, Obj } from "../index.esm.js";
+import { PicoDom } from "../utils/Dom.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomBuilderStatic
+{
+    /**
+     * Create element from tag
+     *
+     * @example Dom.make("div", { class: "active" })
+     *
+     * @param {any} el Tag or element
+     * @param {any} [options] Attr options
+     * @returns {PicoDom} Dom instance
+     */
+    static make(el, options = {})
+    {
+        if ( el instanceof Dom ) {
+            el = el.el;
+        }
+
+        if ( Mix.isStr(el) ) {
+            el = document.createElement(el);
+        }
+
+        el = Obj.assign(el, options);
+
+        let ini = new Dom(el);
+
+        if ( options.class ) {
+            ini.class(options.class);
+        }
+
+        if ( options.html ) {
+            ini.html(options.html);
+        }
+
+        return ini;
+    }
+}
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomBuilderInstance
+{
+    /**
+     * Prepend value to element
+     *
+     * @example Dom.find("div").prepend("<span></span>")
+     *
+     * @param {any} value Prepend value
+     * @returns {PicoDom} Current instance
+     */
+    prepend(value)
+    {
+        this.each((el) => {
+            if ( el.prepend != null ) el.prepend(value);
+        });
+
+        return this;
+    }
+
+    /**
+     * Prepend element to value
+     *
+     * @example Dom.find("span").prependTo("div")
+     *
+     * @param {any} value Target element
+     * @returns {PicoDom} Current instance
+     */
+    prependTo(value)
+    {
+        Dom.find(value).each((el) => {
+            if ( el.prepend != null ) el.prepend(this.el);
+        });
+
+        return this;
+    }
+
+    /**
+     * Append value to element
+     *
+     * @example Dom.find("div").append("<span></span>")
+     *
+     * @param {any} value Append value
+     * @returns {PicoDom} Current instance
+     */
+    append(value)
+    {
+        this.each((el) => {
+            if ( el.append != null ) el.append(value);
+        });
+
+        return this;
+    }
+
+    /**
+     * Append element to value
+     *
+     * @example Dom.find("span").appendTo("div")
+     *
+     * @param {any} value Target element
+     * @returns {PicoDom} Current instance
+     */
+    appendTo(value)
+    {
+        Dom.find(value).each((el) => {
+            if ( el.append != null ) el.append(this.el);
+        });
+
+        return this;
+    }
+
+    /**
+     * Replace element with value
+     *
+     * @example Dom.find("div").replace("<span></span>")
+     *
+     * @param {any} value Replacement value
+     * @returns {PicoDom} Current instance
+     */
+    replace(value)
+    {
+        this.parent().each(el, (el) => {
+            (el.insertBefore(value, el), el.removeChild(el));
+        });
+
+        return this;
+    }
+
+}
+
+/**
+ * @param {typeof PicoDom} self
+ * @returns {typeof PicoDom}
+ */
+export const PicoDomBuilderPlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomBuilderStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomBuilderInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomBuilderInstance.constructor);
+
+    return self;
+}