ziko 0.0.27 → 0.0.28

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Thu Feb 13 2025 17:40:20 GMT+0100 (UTC+01:00)
+  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
@@ -1011,6 +1011,11 @@ class Random {
     }
 }
 
+var __Random__ = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Random: Random
+});
+
 const luDecomposition=matrix=>{
     if(matrix instanceof Matrix)matrix=matrix.arr;
     const n = matrix.length;
@@ -1806,6 +1811,7 @@ class ZikoUIElementStyle{
 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));
@@ -4606,10 +4612,181 @@ var Hooks = /*#__PURE__*/Object.freeze({
     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 {
@@ -4657,6 +4834,7 @@ class ZikoUIElement {
       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",
@@ -4669,7 +4847,7 @@ class ZikoUIElement {
     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);
   }
@@ -4753,12 +4931,14 @@ 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 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) =>
@@ -5237,9 +5417,9 @@ class __ZikoUIText__ extends ZikoUIElement {
         
         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) {
@@ -5844,15 +6024,19 @@ class ZikoUIXMLWrapper extends ZikoUIElement{
     }
 }
 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){
@@ -6055,7 +6239,6 @@ class ZikoUIHtmlTag extends ZikoUIElement {
 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();
@@ -8464,6 +8647,7 @@ const Math$1 = {
     ...__Functions__,
     ...__Complex__,
     ...__Matrix__,
+    ...__Random__,
     ...__Utils__,
     ...__Discrect__,
     // ...__Signal__,
@@ -9099,7 +9283,28 @@ function defineParamsGetter(target ){
     });
 }
 
-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:{
@@ -9117,10 +9322,17 @@ const __Config__={
     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__
@@ -9224,6 +9436,7 @@ if ( globalThis.__Ziko__ ) {
             __UI__,
             __HYDRATION_MAP__,
             __Config__,
+            __CACHE__,
             ExtractAll,
             RemoveAll
         };
@@ -9361,9 +9574,11 @@ exports.ZikoUIVideo = ZikoUIVideo;
 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;
@@ -9417,6 +9632,7 @@ exports.figure = figure;
 exports.floor = floor;
 exports.gamma = gamma;
 exports.geomspace = geomspace;
+exports.getEvent = getEvent;
 exports.h = h;
 exports.h1 = h1;
 exports.h2 = h2;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Thu Jul 10 2025 11:49:56 GMT+0100 (UTC+01:00)
+  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
@@ -6026,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){