@kizmann/pico-js 2.0.6 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/pico-js",
-    "version": "2.0.6",
+    "version": "2.0.8",
     "license": "MIT",
     "type": "module",
     "private": false,

package/src/dom/DomAttribute.js

@@ -130,6 +130,28 @@ export class PicoDomAttributeInstance
             value = { ...styles, ...value };
         }
 
+        if ( value.translate ) {
+            value.transform = `translate3d(${value.translate.join(',')}, 0)`;
+        }
+
+        delete value.translate;
+
+        if ( Mix.isNum(value.top) ) {
+            value.top += 'px';
+        }
+
+        if ( Mix.isNum(value.left) ) {
+            value.left += 'px';
+        }
+
+        if ( Mix.isNum(value.width) ) {
+            value.width += 'px';
+        }
+
+        if ( Mix.isNum(value.height) ) {
+            value.height += 'px';
+        }
+
         this.attr('style', value);
 
         return this;

package/src/dom/DomEvent.js

@@ -100,9 +100,10 @@ export class PicoDomEventInstance
             options = { id: options };
         }
 
-        if ( Mix.isArr(event) ) {
-            return (Arr.each(event, (e) => this.on(e, ...arguments)), this);
-        }
+        // geht so nicht
+        // if ( Mix.isArr(event) ) {
+        //     return (Arr.each(event, (e) => this.on(e, cb, options, pause, selector)), this);
+        // }
 
         let fn = (e) => {
             cb.call(e.target, e, e.target);
@@ -127,10 +128,15 @@ export class PicoDomEventInstance
      */
     off(event, selector = null, options = {})
     {
-        if ( Mix.isArr(event) ) {
-            return (Arr.each(event, (e) => this.off(e, ...arguments)), this);
+        if ( Mix.isPrim(options) ) {
+            options = { id: options };
         }
 
+        // geht so nicht
+        // if ( Mix.isArr(event) ) {
+        //     return (Arr.each(event, (e) => this.off(e, ...arguments)), this);
+        // }
+
         if ( Mix.isObj(selector) ) {
             (options = selector, selector = null);
         }
@@ -152,7 +158,7 @@ export class PicoDomEventInstance
      */
     optoff(options = {})
     {
-        Run.idle(() => {
+        Run.async(() => {
             Arr.filterRemove(Dom.$events, { options });
         });
 
@@ -220,11 +226,12 @@ export class PicoDomEventInstance
      * @example Dom.find("div").fire("click")
      *
      * @param {string} event Event name
+     * @param {object} [detail] Event detail
      * @returns {PicoDom} Current instance
      */
-    fire(event)
+    fire(event, detail = {})
     {
-        let callback = new Event(event);
+        let callback = new CustomEvent(event, { detail });
 
         this.each((el) => {
             el.dispatchEvent(callback);
@@ -233,6 +240,30 @@ export class PicoDomEventInstance
         return this;
     }
 
+    pointerdown(button = 1)
+    {
+        const rect = this.rect();
+
+        const [x, y] = [
+            rect.left + rect.width / 2,
+            rect.top + rect.height / 2,
+        ];
+
+        const event = new PointerEvent('pointerdown', {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+            buttons: 1,
+            clientX: x, clientY: y
+        });
+
+        this.each((el) => {
+            el.dispatchEvent(event);
+        });
+
+        return this;
+    }
+
 }
 
 /**

package/src/dom/DomFinder.js

@@ -28,20 +28,25 @@ export class PicoDomFinderStatic
      *
      * @example Dom.getNodePoint(100, 100)
      *
-     * @param {number} posx X position
-     * @param {number} posy Y position
+     * @param {object} event Event data
      * @returns {Array<Element>} Nodes at point
      */
-    static getNodePoint(posx, posy)
+    static getNodePoint(event)
     {
-        let el = null;
+        if ( event.touches?.[0] ) {
+            // event = event.touches[0];
+        }
+
+        let [el, src] = [
+            null, [event.clientX, event.clientY]
+        ];
 
         if ( Dom.doc().elementsFromPoint != null ) {
-            el = document.elementsFromPoint(posx, posy);
+            el = document.elementsFromPoint(src[0], src[1]);
         }
 
         if ( Dom.doc().msElementsFromPoint != null ) {
-            el = document.msElementsFromPoint(posx, posy);
+            el = document.msElementsFromPoint(src[0], src[1]);
         }
 
         return el;
@@ -64,10 +69,10 @@ export class PicoDomFinderStatic
             target = event.target;
         }
 
-        let { type, clientX, clientY } = event;
+        let { type } = event;
 
         if ( /^(drag[a-z]*|drop$)/.test(type) ) {
-            target = Dom.getNodePoint(clientX, clientY);
+            target = Dom.getNodePoint(event);
         }
 
         if ( Mix.isArr(target) ) {
@@ -389,12 +394,10 @@ export class PicoDomFinderInstance
      * @param {number} [filter] Node type
      * @returns {PicoDom} Child instance
      */
-    child(selector, filter = 1)
+    child(selector = null, filter = 1)
     {
-        for ( let el of this.els ) {
-            if ( el.nodeType === filter ) {
-                return Dom.find(el);
-            }
+        for ( let el of this.childs(selector, filter) ) {
+            return Dom.find(el);
         }
 
         return Dom.find(null);
@@ -443,6 +446,13 @@ export class PicoDomFinderInstance
         return null;
     }
 
+    upnode(selector)
+    {
+        return Dom.find(...[
+            this.closest(selector)
+        ]);
+    }
+
     /**
      * Get previous element
      *
@@ -499,16 +509,17 @@ export class PicoDomFinderInstance
      * @example Dom.find("div").is(".active") // => true
      *
      * @param {any} selector Test selector
+     * @param {boolean} [empty] Test selector
      * @returns {boolean} True if matches
      */
-    is(selector)
+    is(selector, empty = false)
     {
         if ( this.el === selector ) {
             return true;
         }
 
         if ( this.el == null ) {
-            return false;
+            return empty;
         }
 
         for ( let el of this.parent().find(selector).get() ) {
@@ -610,7 +621,7 @@ export class PicoDomFinderInstance
     contains(selector)
     {
         // Has child of selector
-        return this.find(selector) != null;
+        return this.el.contains(selector);
     }
 
 }

package/src/dom/DomObserver.js

@@ -15,28 +15,7 @@ export class PicoDomObserverStatic
  */
 export class PicoDomObserverInstance
 {
-
-    /**
-     * Get or set element value
-     *
-     * @example Dom.find("input").value("hello")
-     *
-     * @param {any} [value] New value
-     * @returns {any|PicoDom} Value or instance
-     */
-    value(value = undefined)
-    {
-        if ( value === undefined ) {
-            return this.el.value;
-        }
-
-        this.each((el) => {
-            el.value = value;
-        });
-
-        return this;
-    }
-
+    //
 }
 
 /**

package/src/dom/DomPopover.js

@@ -0,0 +1,264 @@
+import { Arr, Mix, Obj, Dom } from "../index.esm.js";
+import { PicoDom } from "../utils/Dom.js";
+
+/**
+ * @memberof PicoDom
+ */
+export class PicoDomPopoverStatic
+{
+    //
+}
+
+/**
+ * @memberof PicoDom
+ * @extends {PicoDom}
+ */
+export class PicoDomPopoverInstance
+{
+
+    popover(target, position = 'botttom-center', options = {})
+    {
+        if ( /^(top|bottom)-/.test(position) ) {
+            return this.popoverY(target, position, options);
+        }
+
+        if ( /^(left|right)-/.test(position) ) {
+            return this.popoverX(target, position, options);
+        }
+    }
+
+    popoverY(target, position = 'bottom-center', options = {})
+    {
+        target = Dom.find(target);
+
+        let [rect, self] = [
+            target.rect(), this.rect()
+        ];
+
+        if ( options.x ) {
+            rect = {...rect, left: options.x, width: 1 };
+        }
+
+        if ( options.y ) {
+            rect = {...rect, top: options.y, height: 1 };
+        }
+
+        if ( ! options.width ) {
+            // self.width = rect.width;
+        }
+
+        let [offset, recto] = [
+            { x: 0, y: 0 }, rect.width - self.width
+        ];
+
+        if ( /^top-/.test(position) ) {
+            offset.y = rect.top - self.height;
+        }
+
+        if ( /^bottom-/.test(position) ) {
+            offset.y = rect.top + rect.height;
+        }
+
+        if ( /-start$/.test(position) ) {
+            offset.x = rect.left;
+        }
+
+        if ( /-center$/.test(position) ) {
+            offset.x = rect.left + (recto * 0.5);
+        }
+
+        if ( /-end$/.test(position) ) {
+            offset.x = rect.left + recto;
+        }
+
+        let inverse = position;
+
+        if ( /^top-/.test(position) ) {
+            inverse = inverse.replace(/^top-/, 'bottom-');
+        }
+
+        if ( /^bottom-/.test(position) ) {
+            inverse = inverse.replace(/^bottom-/, 'top-');
+        }
+
+        let win = {
+            x: window.innerWidth, y: window.innerHeight
+        };
+
+        let broken = offset.y + self.height > win.y || offset.y < 0;
+
+        if ( offset.y < 0 ) {
+            broken = true;
+        }
+
+        const rebound = {
+            ...options, offset
+        };
+
+        if ( broken && ! options.offset ) {
+            return this.popoverY(target, inverse, rebound);
+        }
+
+        if ( broken && options.offset ) {
+            offset = options.offset;
+        }
+
+        if ( offset.y < 0 ) {
+            offset.y = 0;
+        }
+
+        if ( offset.y + self.height > win.height ) {
+            offset.y = win.height - self.height;
+        }
+
+        let result = this.popoverNormalize(...[
+            offset, self, rect, win
+        ]);
+
+        if ( broken ) {
+            position = 'auto';
+        }
+
+        return { ...result, position };
+    }
+
+    popoverX(target, position = 'left-center', options = {})
+    {
+        target = Dom.find(target);
+
+        let [rect, self] = [
+            target.rect(), this.rect()
+        ];
+
+        if ( ! options.height ) {
+            // self.height = rect.height;
+        }
+
+        let [offset, recto] = [
+            { x: 0, y: 0 }, rect.height - self.height
+        ];
+
+        if ( /^left-/.test(position) ) {
+            offset.x = rect.left - self.width;
+        }
+
+        if ( /^right-/.test(position) ) {
+            offset.x = rect.left + rect.width;
+        }
+
+        if ( /-start$/.test(position) ) {
+            offset.y = rect.top;
+        }
+
+        if ( /-center/.test(position) ) {
+            offset.y = rect.top + (recto * 0.5);
+        }
+
+        if ( /-end/.test(position) ) {
+            offset.y = rect.top + recto;
+        }
+
+        let inverse = position;
+
+        if ( /^left-/.test(position) ) {
+            inverse = inverse.replace(/^left-/, 'right-');
+        }
+
+        if ( /^right-/.test(position) ) {
+            inverse = inverse.replace(/^right-/, 'left-');
+        }
+
+        let win = {
+            x: window.innerWidth, y: window.innerHeight
+        };
+
+        let broken = offset.y + self.height > win.y;
+
+        if ( offset.y < 0 ) {
+            broken = true;
+        }
+
+        const rebound = {
+            ...options, offset
+        };
+
+        if ( broken && ! options.offset ) {
+            return this.popoverX(target, inverse, rebound);
+        }
+
+        if ( broken && options.offset ) {
+            offset = options.offset;
+        }
+
+        let result = this.popoverNormalize(...[
+            offset, self, rect, win
+        ]);
+
+        if ( broken ) {
+            position = 'auto';
+        }
+
+        return { ...result, position };
+    }
+
+    popoverNormalize(offset, self, rect, win)
+    {
+        const scroll = Dom.find(document.body).scroll();
+
+        if ( offset.y < 0 ) {
+            offset.y = 0;
+        }
+
+        if ( offset.y + self.height > win.y ) {
+            offset.y = win.y - self.height;
+        }
+
+        if ( offset.x < 0 ) {
+            offset.x = 0;
+        }
+
+        const dw = document.body.clientWidth;
+
+        if ( offset.x + self.width > win.x ) {
+            offset.x = win.x - self.width - (win.x - dw);
+        }
+
+        offset = {
+            x: offset.x + scroll.left, y: offset.y + scroll.top
+        }
+
+        Obj.each(offset, (v, k) => {
+            offset[k] = Math.round(v);
+        });
+
+        offset.self = {
+            width: self.width, height: self.height
+        };
+
+        offset.rect = {
+            width: rect.width, height: rect.height
+        };
+
+        return offset;
+    }
+
+}
+
+/**
+ * @param {typeof PicoDom} self
+ * @returns {typeof PicoDom}
+ */
+export const PicoDomPopoverPlugin = function (self) {
+
+    Obj.each(Mix.class(PicoDomPopoverStatic), (fn, id) => {
+        self[id] = fn;
+    });
+
+    Obj.each(Mix.proto(PicoDomPopoverInstance), (fn, id) => {
+        self.prototype[id] = fn;
+    });
+
+    // self.init.push(PicoDomPopoverInstance.constructor);
+
+    return self;
+}

package/src/dom/DomRectangle.js

@@ -30,6 +30,21 @@ export class PicoDomRectangleStatic
  */
 export class PicoDomRectangleInstance
 {
+    rect(fallback = { left: 0, top: 0, width: 0, height: 0 })
+    {
+        if ( ! this.el.getBoundingClientRect ) {
+            return fallback;
+        }
+
+        const rect = this.el.getBoundingClientRect();
+
+        if ( rect == null ) {
+            return fallback;
+        }
+        
+        return rect.toJSON();
+    }
+
     /**
      * Get margin values
      *

package/src/format/FormatOption.js

@@ -30,7 +30,7 @@ export class PicoFormatOptionStatic
             return this.castOption(key, val, null, space);
         });
 
-        return result.join(';') + ';';
+        return result.join(space ? '; ' : ';') + ';';
     }
 
     /**
@@ -57,10 +57,10 @@ export class PicoFormatOptionStatic
         }
 
         let result = Arr.map(value, (v, k) => {
-            return this.castOption(k, v, key);
+            return this.castOption(k, v, key, space);
         });
 
-        return result.join(';');
+        return result.join(space ? '; ' : ';');
     }
 
     /**

package/src/index.browser.js

@@ -27,4 +27,10 @@ import * as pi from "./index.esm.js";
 /**
  * @type {PicoLibrary}
  */
-globalThis.pi = pi;
+globalThis.pi = pi;
+
+globalThis.addEventListener && globalThis.addEventListener('beforeunload', (e) => {
+    pi.Arr.map(pi.Dom.$events, ({ el, cb, event }) => {
+        return (el.removeEventListener(event, cb), null);
+    });
+});

package/src/index.esm.js

@@ -5,7 +5,7 @@ import { PicoArray, default as Arr } from "./utils/Array.js";
 import { PicoObject, default as Obj } from "./utils/Object.js";
 import { PicoMixed, default as Mix } from "./utils/Mixed.js";
 import { PicoHash, default as Hash } from "./utils/Hash.js";
-import { PicoEvent, default as Event } from "./utils/Event.js";
+import { PicoSignal, default as Signal } from "./utils/Signal.js";
 import { PicoLocale, default as Locale } from "./utils/Locale.js";
 import { PicoCookie, default as Cookie } from "./utils/Cookie.js";
 
@@ -25,7 +25,7 @@ const Now = NowBuilder();
 const For = ForBuilder();
 
 export {
-    Dom, Now, For, Run, Str, Num, Arr, Obj, Mix, Hash, Event, Locale, Cookie
+    Dom, Now, For, Run, Str, Num, Arr, Obj, Mix, Hash, Signal, Locale, Cookie
 }
 
 import { PicoDom, default as DomBuilder } from "./utils/Dom.js";
@@ -61,6 +61,16 @@ export const Any = new Proxy({}, {
     }
 });
 
+/**
+ * @type {typeof PicoMixed}
+ */
+export const Event = new Proxy({}, {
+    get: function (target, prop) {
+        console.warn(`Event.${prop} is deprecated, use Signal.${prop}() instead.`);
+        return (...args) => Signal[prop](...args);
+    }
+});
+
 /**
  * @returns {string}
  */

package/src/now/NowFormat.js

@@ -5,7 +5,10 @@ export const NOW_FORMAT = {
     'L': 'DD/MM/YYYY',
     'LL': 'MMMM DD, YYYY',
     'LLL': 'MMMM DD, YYYY HH:mm',
-    'LLLL': 'dddd, MMMM DD, YYYY HH:mm'
+    'LLLL': 'dddd, MMMM DD, YYYY HH:mm',
+    'LT': 'HH:mm',
+    'LTS': 'HH:mm:ss',
+    'LTSD': 'DD/MM/YYYY HH:mm:ss',
 }
 
 export const NOW_PARSE = {
@@ -107,7 +110,7 @@ export class PicoNowFormatInstance
     format(format = 'YYYY-MM-DD HH:mm:ss')
     {
         if ( Obj.has(NOW_FORMAT, format) ) {
-            format = Locale.trans(NOW_FORMAT[format]);
+            format = Locale.$text[format] ?? NOW_FORMAT[format];
         }
 
         format = format.replace('dddd', () => {