@kizmann/pico-js 2.0.6 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kizmann/pico-js",
-    "version": "2.0.6",
+    "version": "2.0.7",
     "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);
         }
@@ -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);

package/src/dom/DomFinder.js

@@ -443,6 +443,13 @@ export class PicoDomFinderInstance
         return null;
     }
 
+    upnode(selector)
+    {
+        return Dom.find(...[
+            this.closest(selector)
+        ]);
+    }
+
     /**
      * Get previous element
      *
@@ -610,7 +617,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,17 @@ export class PicoDomRectangleStatic
  */
 export class PicoDomRectangleInstance
 {
+    rect(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', () => {

package/src/utils/Array.js

@@ -111,10 +111,14 @@ export class PicoArray
             return this.findIndex(value, search) !== - 1;
         }
 
-        if ( !Mix.isArr(value) ) {
+        if ( !Mix.isRef(value) ) {
             value = [value];
         }
 
+        if ( !Mix.isArr(value) ) {
+            value = Mix.vals(value);
+        }
+
         let index = value.findIndex((val) => {
             return val == search;
         });
@@ -331,6 +335,10 @@ export class PicoArray
             ...this.clone(cascade), value
         ];
 
+        if ( value == null ) {
+            return value;
+        }
+
         if ( Mix.isObj(value[key]) ) {
             value[key] = fn(cascade)(value[key]);
         }

package/src/utils/Dom.js

@@ -9,6 +9,7 @@ import { PicoDomAttributePlugin } from "../dom/DomAttribute.js";
 import { PicoDomInviewPlugin } from "../dom/DomInview.js";
 import { PicoDomMetaPlugin } from "../dom/DomMeta.js";
 import { PicoDomObserverPlugin } from "../dom/DomObserver.js";
+import { PicoDomPopoverPlugin } from "../dom/DomPopover.js";
 
 export const PicoDomPlugins = [
     PicoDomFinderPlugin,
@@ -21,6 +22,7 @@ export const PicoDomPlugins = [
     PicoDomInviewPlugin,
     PicoDomMetaPlugin,
     PicoDomObserverPlugin,
+    PicoDomPopoverPlugin,
 ];
 
 /**
@@ -43,6 +45,8 @@ export const PicoDomPlugins = [
  * @typedef {import('../dom/DomMeta.js').PicoDomMetaInstance} PicoDomMetaInstance
  * @typedef {import('../dom/DomObserver.js').PicoDomObserverStatic} PicoDomObserverStatic
  * @typedef {import('../dom/DomObserver.js').PicoDomObserverInstance} PicoDomObserverInstance
+ * @typedef {import('../dom/DomPopover.js').PicoDomPopoverStatic} PicoDomPopoverStatic
+ * @typedef {import('../dom/DomPopover.js').PicoDomPopoverInstance} PicoDomPopoverInstance
  *
  * @mixes PicoDomFinderStatic
  * @mixes PicoDomGlobalStatic
@@ -54,6 +58,7 @@ export const PicoDomPlugins = [
  * @mixes PicoDomInviewStatic
  * @mixes PicoDomMetaStatic
  * @mixes PicoDomObserverStatic
+ * @mixes PicoDomPopoverStatic
  *
  * @extends PicoDomFinderInstance
  * @extends PicoDomGlobalInstance
@@ -65,6 +70,7 @@ export const PicoDomPlugins = [
  * @extends PicoDomInviewInstance
  * @extends PicoDomMetaInstance
  * @extends PicoDomObserverInstance
+ * @extends PicoDomPopoverInstance
  */
 export class PicoDom {
 

package/src/utils/Mixed.js

@@ -454,6 +454,10 @@ export class PicoMixed
             return [];
         }
 
+        if ( this.isFunc(value.toJSON) ) {
+            value = value.toJSON();
+        }
+
         if ( this.isIter(value) ) {
             value = this.iter(value);
         }
@@ -476,6 +480,10 @@ export class PicoMixed
             return [];
         }
 
+        if ( this.isFunc(value.toJSON) ) {
+            value = value.toJSON();
+        }
+
         if ( this.isIter(value) ) {
             value = this.iter(value);
         }

package/src/utils/Runner.js

@@ -244,17 +244,17 @@ export class PicoRunner
 
         Arr.add(this.$buffer, item);
 
-        let fn = () => {
-            this.runFramebuffer();
-        };
-
         return (e, ...args) => {
 
+            if ( /^drag/.test(e.type) ) {
+                e.preventDefault();
+            }
+
             Obj.assign(item, {
                 args: [e, ...args], active: true
             });
 
-            (e.preventDefault(), fn());
+            this.runFramebuffer();
         };
     }
 
@@ -272,7 +272,6 @@ export class PicoRunner
         }
 
         this.$idler = setTimeout(() => {
-            console.log('delayed runFramebuffer')
             this.runFramebuffer();
         }, 50);
 

package/src/utils/{Event.js → Signal.js}

@@ -1,5 +1,6 @@
 import { Str, Event, For, Mix, Arr } from "../index.esm.js";
-export class PicoEvent
+
+export class PicoSignal
 {
     static $events = [];
 
@@ -13,7 +14,7 @@ export class PicoEvent
      * @param {function} cb Event callback
      * @param {any} [options] Listener options
      * @param {boolean} [paused] Start paused
-     * @returns {typeof PicoEvent} Event class
+     * @returns {typeof PicoSignal} Event class
      */
     static bind(event, cb, options = {}, paused = false)
     {
@@ -40,7 +41,7 @@ export class PicoEvent
      *
      * @param {any} event Event name(s)
      * @param {any} [options] Listener options
-     * @returns {typeof PicoEvent} Event class
+     * @returns {typeof PicoSignal} Event class
      */
     static unbind(event, options = {})
     {
@@ -66,7 +67,7 @@ export class PicoEvent
      *
      * @param {string} event Event name
      * @param {...any} args Event args
-     * @returns {typeof PicoEvent} Event class
+     * @returns {typeof PicoSignal} Event class
      */
     static fire(event, ...args)
     {
@@ -90,7 +91,7 @@ export class PicoEvent
      *
      * @param {any} event Event name(s)
      * @param {any} [options] Listener options
-     * @returns {typeof PicoEvent} Event class
+     * @returns {typeof PicoSignal} Event class
      */
     static pause(event, options = {})
     {
@@ -116,7 +117,7 @@ export class PicoEvent
      *
      * @param {any} event Event name(s)
      * @param {any} [options] Listener options
-     * @returns {typeof PicoEvent} Event class
+     * @returns {typeof PicoSignal} Event class
      */
     static unpause(event, options = {})
     {
@@ -137,4 +138,4 @@ export class PicoEvent
 
 }
 
-export default PicoEvent;
+export default PicoSignal;