ziko 0.0.25 → 0.0.27

package/README.md

@@ -1,4 +1,4 @@
-<img src="docs/assets/zikojs.png" width="200" align="right" alt="zikojs logo">
+<img src="docs/assets/logo-200.svg" width="100" align="right" alt="zikojs logo">
 
 *💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities* 
 

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Feb 09 2025 19:26:57 GMT+0100 (UTC+01:00)
+  Date : Thu Feb 13 2025 17:40:20 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1947,7 +1947,49 @@ class ZikoEventClick extends ZikoEvent{
         return this;
      }     
 }
-const useClickEvent=target=>new ZikoEventClick(target);
+const useClickEvent=target=>new ZikoEventClick(target);
+
+
+// 
+
+
+// import { ZikoEvent, EVENT_CONTROLLER } from "./ZikoEvent.js";
+
+// class ZikoEventClick extends ZikoEvent {
+//     constructor(target) {
+//         super(target);
+//         this.event = null;
+//         this.cache = {
+//             prefixe: "",
+//             preventDefault: { click: false, dbclick: false },
+//             paused: { click: false, dbclick: false },
+//             stream: {
+//                 enabled: { click: false, dbclick: false },
+//                 clear: { click: false, dbclick: false },
+//                 history: { click: [], dbclick: [] }
+//             },
+//             callbacks: { click: [], dbclick: [] }
+//         };
+        
+//         this.__controller = {};
+//         ["click", "dbclick"].forEach(evt => {
+//             this.__controller[evt] = (e) => EVENT_CONTROLLER.call(this, e, evt, null, null);
+//         });
+//     }
+
+//     onClick(...callbacks) {
+//         return this.__onEvent("click", {}, ...callbacks);
+//     }
+
+//     onDbClick(...callbacks) {
+//         return this.__onEvent("dbclick", {}, ...callbacks);
+//     }
+// }
+
+// const useClickEvent = (target) => new ZikoEventClick(target);
+
+// export default useClickEvent;
+// export { useClickEvent, ZikoEventClick };
 
 function pointerdown_controller(e){
     EVENT_CONTROLLER.call(
@@ -4711,7 +4753,7 @@ class ZikoUIElement {
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      if (ele[i] instanceof ZikoUIElement) {
+      if (ele[i]?.isZikoUIElement) {
         ele[i].cache.parent = this;
         this.element[adder](ele[i].element);
         ele[i].target = this.element;
@@ -4749,7 +4791,7 @@ class ZikoUIElement {
   remove(...ele) {
     const remove = (ele) => {
       if (typeof ele === "number") ele = this.items[ele];
-      if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+      if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
       this.items = this.items.filter((n) => n !== ele);
     };
     for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -4850,7 +4892,7 @@ class ZikoUIElement {
   }
   setTarget(tg) {
     if(this.isBody) return ;
-    if (tg instanceof ZikoUIElement) tg = tg.element;
+    if (tg?.isZikoUIElement) tg = tg.element;
     this.unrender();
     this.target = tg;
     this.render();
@@ -4866,7 +4908,7 @@ class ZikoUIElement {
   }
   render(target = this.target) {
     if(this.isBody)return ;
-    if(target instanceof ZikoUIElement)target=target.element;
+    if(target?.isZikoUIElement)target=target.element;
     this.target=target;
     this.target?.appendChild(this.element);
     return this;
@@ -4885,12 +4927,12 @@ class ZikoUIElement {
     return this;
   }
   after(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.after(ui);
     return this;
   }
   before(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.before(ui);
     return this;
   }

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Feb 09 2025 19:26:57 GMT+0100 (UTC+01:00)
+  Date : Thu Jul 10 2025 11:49:56 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1013,6 +1013,11 @@
         }
     }
 
+    var __Random__ = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Random: Random
+    });
+
     const luDecomposition=matrix=>{
         if(matrix instanceof Matrix)matrix=matrix.arr;
         const n = matrix.length;
@@ -1808,6 +1813,7 @@
     function EVENT_CONTROLLER(e,EVENT,setter,push_object){
         this.event=e;
         if(this.cache.preventDefault[EVENT])e.preventDefault();
+        console.log({setter});
         if(setter)setter();
         if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
         this.cache.callbacks[EVENT].map(n=>n(this));
@@ -1949,7 +1955,49 @@
             return this;
          }     
     }
-    const useClickEvent=target=>new ZikoEventClick(target);
+    const useClickEvent=target=>new ZikoEventClick(target);
+
+
+    // 
+
+
+    // import { ZikoEvent, EVENT_CONTROLLER } from "./ZikoEvent.js";
+
+    // class ZikoEventClick extends ZikoEvent {
+    //     constructor(target) {
+    //         super(target);
+    //         this.event = null;
+    //         this.cache = {
+    //             prefixe: "",
+    //             preventDefault: { click: false, dbclick: false },
+    //             paused: { click: false, dbclick: false },
+    //             stream: {
+    //                 enabled: { click: false, dbclick: false },
+    //                 clear: { click: false, dbclick: false },
+    //                 history: { click: [], dbclick: [] }
+    //             },
+    //             callbacks: { click: [], dbclick: [] }
+    //         };
+            
+    //         this.__controller = {};
+    //         ["click", "dbclick"].forEach(evt => {
+    //             this.__controller[evt] = (e) => EVENT_CONTROLLER.call(this, e, evt, null, null);
+    //         });
+    //     }
+
+    //     onClick(...callbacks) {
+    //         return this.__onEvent("click", {}, ...callbacks);
+    //     }
+
+    //     onDbClick(...callbacks) {
+    //         return this.__onEvent("dbclick", {}, ...callbacks);
+    //     }
+    // }
+
+    // const useClickEvent = (target) => new ZikoEventClick(target);
+
+    // export default useClickEvent;
+    // export { useClickEvent, ZikoEventClick };
 
     function pointerdown_controller(e){
         EVENT_CONTROLLER.call(
@@ -4566,10 +4614,181 @@
         useType: useType
     });
 
+    const getEvent=(event = "")=>{
+        if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
+        return event.toLowerCase()
+    };
+
+    function event_controller(e, event_name, details_setter, customizer, push_object){
+        this.cache.currentEvent = event_name;
+        this.cache.event = e;
+        details_setter?.call(this);
+        if(customizer?.hasOwnProperty("prototype"))customizer?.call(this);
+        else customizer?.call(null, this);
+        if(this.cache.preventDefault[event_name]) e.preventDefault();
+        if(this.cache.stopPropagation[event_name]) e.stopPropagation();
+        if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
+        
+        if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
+        this.cache.callbacks[event_name]?.map(n=>n(this));
+    }
+    class __ZikoEvent__ {
+        constructor(target = null, Events = [], details_setter, customizer){
+            this.target = target;
+            this.cache = {
+                currentEvent : null,
+                event: null,
+                options : {},
+                preventDefault : {},
+                stopPropagation : {},
+                stopImmediatePropagation : {},
+                event_flow : {},
+                paused : {},
+                stream : {
+                    enabled : {},
+                    clear : {},
+                    history : {}
+                },
+                callbacks : {},
+                __controllers__:{}
+            };
+            const events = Events.map(n=>getEvent(n));
+            events.forEach((event,i)=>{
+                Object.assign(this.cache.preventDefault, {[event] : false});
+                Object.assign(this.cache.options, {[event] : {}});
+                Object.assign(this.cache.paused, {[event] : false});
+                Object.assign(this.cache.stream.enabled, {[event] : false});
+                Object.assign(this.cache.stream.clear, {[event] : false});
+                Object.assign(this.cache.stream.history, {[event] : []});
+                Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
+                Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)});
+            });
+        }
+        get targetElement(){
+            return this.target?.element;
+        }
+        get isParent(){
+            return this.target?.element === this.event.srcElement;
+        }
+        get item(){
+            return this.target.find(n=>n.element == this.event?.srcElement)?.[0];
+        }
+        get currentEvent(){
+            return this.cache.currentEvent;
+        }
+        get event(){
+            return this.cache.event;
+        }
+        setTarget(UI){
+            this.target=UI;
+            return this;
+        }
+        __handle(event, handler, options, dispose){
+            this.targetElement?.addEventListener(event, handler, options);
+            return this;
+        }
+        __onEvent(event, options, dispose, ...callbacks){
+            if(callbacks.length===0){
+                console.log("00");
+                if(this.cache.callbacks[event]){
+                    console.log("Call");
+                    // this.cache.callbacks.map(n=>e=>n.call(this,e));
+                    this.cache.callbacks[event].map(n=>e=>n.call(this,e));
+                }   
+                else {
+                    return this;
+                }
+            }
+            else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
+            this.__handle(event, this.cache.__controllers__[event],options, dispose);
+            return this;  
+        }
+        #override(methode, overrides, defaultValue){
+            if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
+            const all = defaultValue === "default" 
+            ? this.cache[methode]
+            : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]));
+            Object.assign(this.cache[methode], {...all,...overrides});
+            return this       
+        }
+        preventDefault(overrides = {}, defaultValue = "default"){
+            this.#override("preventDefault", overrides, defaultValue);
+            // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+            // Object.assign(this.cache.preventDefault, {...all,...overrides});
+            return this;
+        }
+        stopPropagation(overrides = {}, defaultValue = "default"){
+            this.#override("stopPropagation", overrides, defaultValue);
+            return this;
+        }
+        stopImmediatePropagation(overrides = {}, defaultValue = "default"){
+            this.#override("stopImmediatePropagation", overrides, defaultValue);
+            return this;
+        }
+        setEventOptions(event, options){
+            this.pause({[event] : true, }, "default");
+            Object.assign(this.cache.options[getEvent(event)], options);
+            this.resume({[event] : true, }, "default");
+            return this;
+        }
+        pause(overrides = {}, defaultValue = "default"){
+            const all = defaultValue === "default" 
+              ? this.cache.stream.enabled
+              : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+            overrides={...all,...overrides};
+            for(let key in overrides){
+                if(overrides[key]){
+                    this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
+                    this.cache.paused[key]=true;
+                }
+            }
+            return this;
+        }
+        resume(overrides = {}, defaultValue = "default"){
+            const all = defaultValue === "default" 
+              ? this.cache.stream.enabled
+              : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+            overrides={...all,...overrides};
+            for(let key in overrides){
+                if(overrides[key]){
+                    this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
+                    this.cache.paused[key]=false;
+                }
+            }
+            return this;
+         }
+        stream(overrides = {}, defaultValue = "default"){
+            this.cache.stream.t0=Date.now();
+            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+            overrides={...all,...overrides};
+            Object.assign(this.cache.stream.enabled,overrides);
+            return this;
+         }
+        clear(){
+
+        }
+        dispose(overrides = {}, defaultValue = "default"){
+            this.pause(overrides, defaultValue);
+
+            return this;
+        }
+    }
+
+    // export * from "./click.js";
+    // export * from "./key.js";
+    // export * from "./pointer.js"
+
+    var EventsExp = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        __ZikoEvent__: __ZikoEvent__,
+        getEvent: getEvent
+    });
+
     const Reactivity={
         ...Events,
         ...Observer,
         ...Hooks,
+        ...EventsExp,
     };
 
     class ZikoUIElement {
@@ -4617,6 +4836,7 @@
           intersection:null
         };
         this.uuid = `${this.cache.name}-${Random.string(16)}`;
+        this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index(); 
         this.cache.style.linkTo(this);
         useDefaultStyle && this.style({ 
           position: "relative",
@@ -4629,7 +4849,7 @@
         this.items = [];
         globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
         element && globalThis.__Ziko__.__Config__.default.render && this.render();
-        this.setAttr("data-ref", this.uuid);
+        this.setAttr("data-ui-index", this.ui_index);
         if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
           globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this);
       }
@@ -4713,12 +4933,14 @@
         }
         for (let i = 0; i < ele.length; i++) {
           if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-          if (ele[i] instanceof ZikoUIElement) {
+          if(ele[i] instanceof Node) ele[i] = new ZikoUIElement(ele[i]);
+          if (ele[i]?.isZikoUIElement) {
             ele[i].cache.parent = this;
             this.element[adder](ele[i].element);
             ele[i].target = this.element;
             this.items[pusher](ele[i]);
-          } else if (ele[i] instanceof Object) {
+          } 
+          else if (ele[i] instanceof Object) {
             if (ele[i]?.style) this.style(ele[i]?.style);
             if (ele[i]?.attr) {
               Object.entries(ele[i].attr).forEach((n) =>
@@ -4751,7 +4973,7 @@
       remove(...ele) {
         const remove = (ele) => {
           if (typeof ele === "number") ele = this.items[ele];
-          if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+          if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
           this.items = this.items.filter((n) => n !== ele);
         };
         for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -4852,7 +5074,7 @@
       }
       setTarget(tg) {
         if(this.isBody) return ;
-        if (tg instanceof ZikoUIElement) tg = tg.element;
+        if (tg?.isZikoUIElement) tg = tg.element;
         this.unrender();
         this.target = tg;
         this.render();
@@ -4868,7 +5090,7 @@
       }
       render(target = this.target) {
         if(this.isBody)return ;
-        if(target instanceof ZikoUIElement)target=target.element;
+        if(target?.isZikoUIElement)target=target.element;
         this.target=target;
         this.target?.appendChild(this.element);
         return this;
@@ -4887,12 +5109,12 @@
         return this;
       }
       after(ui){
-        if(ui instanceof ZikoUIElement) ui=ui.element;
+        if(ui?.isZikoUIElement) ui=ui.element;
         this.element?.after(ui);
         return this;
       }
       before(ui){
-        if(ui instanceof ZikoUIElement) ui=ui.element;
+        if(ui?.isZikoUIElement) ui=ui.element;
         this.element?.before(ui);
         return this;
       }
@@ -5197,9 +5419,9 @@
             
             if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
           });
-          if(this.element?.innerHTML){
-            this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
-          }
+          // if(this.element?.innerHTML){
+          //   this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
+          // }
           return this
         }
         setValue(...value) {
@@ -6015,7 +6237,6 @@
     class ZikoUIBtn extends ZikoUIElement {
       constructor(value = "button") {
         super("button","btn");
-        this.element = document?.createElement("button");
         this.setValue(value);
         this.st.cursor("pointer");
         globalThis.__Ziko__.__Config__.default.render && this.render();
@@ -8424,6 +8645,7 @@
         ...__Functions__,
         ...__Complex__,
         ...__Matrix__,
+        ...__Random__,
         ...__Utils__,
         ...__Discrect__,
         // ...__Signal__,
@@ -9059,7 +9281,28 @@
         });
     }
 
-    const __UI__={};
+    const __UI__={
+        __all__(){
+            return Object.values(this)
+              .filter(Array.isArray)
+              .flat();
+        },
+        querySelectorAll(){
+            return this.__all__().filter(n=>n)
+        },
+        getElementByIndex(index){
+            return this.__all__().find(n=>n.ui_index===index);
+        },
+        getElementById(id){
+            return null;
+        },
+        getElementsByClass(){
+
+        },
+        getElementsByTagName(){
+            
+        }
+    };
     const __HYDRATION_MAP__ = new Map();
     const __Config__={
         default:{
@@ -9077,10 +9320,17 @@
         init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
         renderingMode :"spa",
         isSSC : false,
+    };
+    const __CACHE__ = {
+        ui_index : 0,
+        get_ui_index:function(){
+            return this.ui_index ++
+        }
     };
 
     var Global = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        __CACHE__: __CACHE__,
         __Config__: __Config__,
         __HYDRATION_MAP__: __HYDRATION_MAP__,
         __UI__: __UI__
@@ -9184,6 +9434,7 @@
                 __UI__,
                 __HYDRATION_MAP__,
                 __Config__,
+                __CACHE__,
                 ExtractAll,
                 RemoveAll
             };
@@ -9321,9 +9572,11 @@
     exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
     exports.ZikoUseRoot = ZikoUseRoot;
     exports.ZikoUseStyle = ZikoUseStyle;
+    exports.__CACHE__ = __CACHE__;
     exports.__Config__ = __Config__;
     exports.__HYDRATION_MAP__ = __HYDRATION_MAP__;
     exports.__UI__ = __UI__;
+    exports.__ZikoEvent__ = __ZikoEvent__;
     exports.abbrText = abbrText;
     exports.abs = abs;
     exports.accum = accum;
@@ -9377,6 +9630,7 @@
     exports.floor = floor;
     exports.gamma = gamma;
     exports.geomspace = geomspace;
+    exports.getEvent = getEvent;
     exports.h = h;
     exports.h1 = h1;
     exports.h2 = h2;