ziko 0.0.26 → 0.0.28

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Mar 08 2025 13:43:10 GMT+0000 (UTC)
+  Date : Wed Jul 23 2025 15:08:02 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));
@@ -4608,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 {
@@ -4659,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",
@@ -4671,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);
       }
@@ -4755,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 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) =>
@@ -5846,15 +6026,19 @@
         }
     }
     function html2dom(htmlString) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
-        doc.body.firstChild.style.display = "contents";
-        return doc.body.firstChild;
+        if(globalThis?.DOMParser){
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+            doc.body.firstChild.style.display = "contents";
+            return doc.body.firstChild;
+        }
       }
     function svg2dom(svgString) {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(svgString.replace(/\s+/g, ' ').trim(), 'image/svg+xml');
-        return doc.documentElement; // SVG elements are usually at the root
+        if(globalThis?.DOMParser){
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(svgString.replace(/\s+/g, ' ').trim(), 'image/svg+xml');
+            return doc.documentElement; // SVG elements are usually at the root
+        }
     }
     class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
         constructor(HTMLContent){
@@ -6057,7 +6241,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();
@@ -8466,6 +8649,7 @@
         ...__Functions__,
         ...__Complex__,
         ...__Matrix__,
+        ...__Random__,
         ...__Utils__,
         ...__Discrect__,
         // ...__Signal__,
@@ -9101,7 +9285,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:{
@@ -9119,10 +9324,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__
@@ -9226,6 +9438,7 @@
                 __UI__,
                 __HYDRATION_MAP__,
                 __Config__,
+                __CACHE__,
                 ExtractAll,
                 RemoveAll
             };
@@ -9363,9 +9576,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;
@@ -9419,6 +9634,7 @@
     exports.floor = floor;
     exports.gamma = gamma;
     exports.geomspace = geomspace;
+    exports.getEvent = getEvent;
     exports.h = h;
     exports.h1 = h1;
     exports.h2 = h2;