ziko 0.0.20 → 0.0.21

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Nov 16 2024 22:09:26 GMT+0100 (UTC+01:00)
+  Date : Sun Dec 08 2024 12:19:40 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
@@ -33,36 +33,46 @@
         }
     };
 
-    const { PI, E } = Math;
+    const { PI: PI$1, E } = Math;
     const EPSILON=Number.EPSILON;
 
     var __Const__ = /*#__PURE__*/Object.freeze({
         __proto__: null,
         E: E,
         EPSILON: EPSILON,
-        PI: PI
+        PI: PI$1
     });
 
-    const Fixed={
-        cos:x=>+Math.cos(x).toFixed(15),
-        sin:x=>+Math.sin(x).toFixed(15),
-        tan:x=>+Math.tan(x).toFixed(31),
-        sinc:x=>+Math.sin(Math.PI*x)/(Math.PI*x),
-        sec:x=>+1/Math.cos(x).toFixed(15),
-        csc:x=>+1/Math.sin(x).toFixed(15),
-        cot:x=>+1/Math.tan(x).toFixed(15),
-        acos:x=>+Math.acos(x).toFixed(15),
-        asin:x=>+Math.asin(x).toFixed(15),
-        atan:x=>+Math.atan(x).toFixed(15),
-        acot:x=>+Math.PI/2-Math.atan(x).toFixed(15),
-        cosh:x=>+Math.cosh(x).toFixed(15),
-        sinh:x=>+Math.sinh(x).toFixed(15),
-        tanh:x=>+Math.tanh(x).toFixed(15),
-        coth:n=>+(1/2*Math.log((1+n)/(1-n))).toFixed(15),
-        acosh:x=>+Math.acosh(x).toFixed(15),
-        asinh:x=>+Math.asinh(x).toFixed(15),
-        atanh:x=>+Math.atanh(x).toFixed(15),
-    };
+    const {PI, cos: cos$1, sin: sin$1, tan: tan$1, acos: acos$1, asin: asin$1, atan: atan$1, cosh: cosh$1, sinh: sinh$1, tanh: tanh$1, acosh: acosh$1, asinh: asinh$1, atanh: atanh$1, log} = Math;
+    let Fixed={
+        cos: cos$1,
+        sin: sin$1,
+        tan: tan$1,
+        sinc: x => sin$1(PI*x)/(PI*x),
+        sec: x => 1/cos$1(x),
+        csc: x => 1/sin$1(x),
+        cot: x => 1/tan$1(x),
+        acos: acos$1,
+        asin: asin$1,
+        atan: atan$1,
+        acot: x => PI/2-atan$1(x),
+        cosh: cosh$1,
+        sinh: sinh$1,
+        tanh: tanh$1,
+        coth: n => (1/2*log((1+n)/(1-n))),
+        acosh: acosh$1,
+        asinh: asinh$1,
+        atanh: atanh$1,
+    };
+
+    Fixed = new Proxy(Fixed, {
+        get(target, prop) {
+            if(prop in target){
+                return x => + target[prop](x).toFixed(15);
+            }
+            return undefined;
+        }
+    });
 
     class ZikoMath {}
 
@@ -106,8 +116,9 @@
                     default : return fun(x)
                 }
             }
-            else if(x instanceof Object)return Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun$1(fun,n[1])]))
-
+            else if(x instanceof Object){
+                return fun(Object) || Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun$1(fun,n[1])]))
+            }
         });
        return Y.length==1?Y[0]:Y; 
     };
@@ -4845,7 +4856,7 @@
         if(typeof element === "string") {
           element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
         }
-        if(element)this.element = element;
+        if(element)this.__ele__ = element;
         this.uuid=this.constructor.name+"-"+Random.string(10);
         this.cache = {
           name,
@@ -4881,14 +4892,17 @@
         this.style({ 
           position: "relative",
           boxSizing:"border-box",
-          // fontFamily:"verdana",
           margin:0,
           padding:0,
          });
+        this.items = [];
         this.size("auto", "auto");
         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();
       }
+      get element(){
+        return this.__ele__
+      }
       get isZikoUIElement(){
         return true
       }
@@ -4910,15 +4924,6 @@
       get isBody(){
         return this.element === globalThis?.document.body;
       }
-      get __app__(){
-        if(this.cache.isRoot)return this;
-        let root=this.cache.parent;
-        while(1){
-          if(!root)return null;
-          if(root.cache.isRoot)return root;
-          root=root.parent;
-        }
-      }
       get parent(){
         return this.cache.parent;
       }
@@ -4958,6 +4963,120 @@
         this.st.size(width,height);
         return this; 
       }
+      maintain() {
+        for (let i = 0; i < this.items.length; i++)
+          Object.assign(this, { [[i]]: this.items[i] });
+        this.length = this.items.length;
+        return this;
+      }
+      at(index) {
+        return this.items.at(index);
+      }
+      #addItem(adder, pusher, ...ele) {
+        if (this.cache.isFrozzen) {
+          console.warn("You can't append new item to frozzen element");
+          return this;
+        }
+        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) {
+            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) {
+            if (ele[i]?.style) this.style(ele[i]?.style);
+            if (ele[i]?.attr) {
+              Object.entries(ele[i].attr).forEach((n) =>
+                this.setAttr("" + n[0], n[1]),
+              );
+            }
+          }
+        }
+        this.maintain();
+        return this;
+      }
+      append(...ele) {
+        this.#addItem("append", "push", ...ele);
+        return this;
+      }
+      prepend(...ele) {
+        this.#addItem("prepend", "unshift", ...ele);
+        return this;
+      }
+      insertAt(index, ...ele) {
+        if (index >= this.element.children.length) this.append(...ele);
+        else
+          for (let i = 0; i < ele.length; i++) {
+            if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+            this.element?.insertBefore(ele[i].element, this.items[index].element);
+            this.items.splice(index, 0, ele[i]);
+          }
+        return this;
+      }
+      remove(...ele) {
+        const remove = (ele) => {
+          if (typeof ele === "number") ele = this.items[ele];
+          if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+          this.items = this.items.filter((n) => n !== ele);
+        };
+        for (let i = 0; i < ele.length; i++) remove(ele[i]);
+        for (let i = 0; i < this.items.length; i++)
+          Object.assign(this, { [[i]]: this.items[i] });
+        // Remove from item
+        return this;
+      }
+      forEach(callback) {
+        this.items.forEach(callback);
+        return this;
+      }
+      map(callback) {
+        return this.items.map(callback);
+      }
+      find(condition) {
+        return this.items.filter(condition);
+      }
+      filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
+        const FilterItems = this.items.filter(condition_callback);
+        FilterItems.forEach(if_callback);
+        this.items
+          .filter((item) => !FilterItems.includes(item))
+          .forEach(else_callback);
+        return this;
+      }
+      filterByTextContent(text, exactMatch = false) {
+        this.items.forEach((n) => n.render());
+        this.filter(
+          (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
+          (e) => e.unrender(),
+        );
+        // this.items.filter(n=>{
+        //   const content=n.element.textContent;
+        //   return !(exactMatch?content===text:content.includes(text))
+        // }).map(n=>n.unrender());
+        //  return this;
+      }
+      filterByClass(value) {
+        this.items.map((n) => n.render());
+        this.items
+          .filter((n) => !n.classes.includes(value))
+          .map((n) => n.unrender());
+        return this;
+      }
+      sortByTextContent(value, displays) {
+        let item = this.children;
+        item
+          .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+          .map((n) => {
+            n.style.display = "none";
+          });
+        item
+          .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+          .map((n, i) => (n.style.display = displays[i]));
+        //return item.filter(n=>n.style.display!="none")
+        item.filter((n) => n.style.display != "none");
+        return this;
+      }
       get #SwitchedStyleRTL_LTR(){
         const CalculedStyle = globalThis.getComputedStyle(this.element); 
         const SwitchedStyle = {};
@@ -5313,161 +5432,120 @@
         super(element, name);
         this.items = [];
       }
-      maintain() {
-        for (let i = 0; i < this.items.length; i++)
-          Object.assign(this, { [[i]]: this.items[i] });
-        this.length = this.items.length;
-        return this;
-      }
-      at(index) {
-        return this.items.at(index);
-      }
-      #addItem(adder, pusher, ...ele) {
-        if (this.cache.isFrozzen) {
-          console.warn("You can't append new item to frozzen element");
-          return this;
-        }
-        for (let i = 0; i < ele.length; i++) {
-          if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
-          if (ele[i] instanceof ZikoUIElement) {
-            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) {
-            if (ele[i]?.style) this.style(ele[i]?.style);
-            if (ele[i]?.attr) {
-              Object.entries(ele[i].attr).forEach((n) =>
-                this.setAttr("" + n[0], n[1]),
-              );
-            }
-          }
-        }
-        this.maintain();
-        return this;
-      }
-      append(...ele) {
-        this.#addItem("append", "push", ...ele);
-        return this;
-      }
-      prepend(...ele) {
-        this.#addItem("prepend", "unshift", ...ele);
-        return this;
-      }
-      // append(...ele) {
-      //     if(this.cache.isFrozzen){
-      //       console.warn("You can't append new item to frozzen element");
-      //       return this;
-      //     }
-      //     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) {
-      //         ele[i].cache.parent=this;
-      //         this.element?.appendChild(ele[i].element);
-      //         ele[i].target = this.element;
-      //         this.items.push(ele[i]);
-      //       } 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) =>
-      //             this.setAttr("" + n[0], n[1]),
-      //           );
-      //         }
+      // maintain() {
+      //   for (let i = 0; i < this.items.length; i++)
+      //     Object.assign(this, { [[i]]: this.items[i] });
+      //   this.length = this.items.length;
+      //   return this;
+      // }
+      // at(index) {
+      //   return this.items.at(index);
+      // }
+      // #addItem(adder, pusher, ...ele) {
+      //   if (this.cache.isFrozzen) {
+      //     console.warn("You can't append new item to frozzen element");
+      //     return this;
+      //   }
+      //   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) {
+      //       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) {
+      //       if (ele[i]?.style) this.style(ele[i]?.style);
+      //       if (ele[i]?.attr) {
+      //         Object.entries(ele[i].attr).forEach((n) =>
+      //           this.setAttr("" + n[0], n[1]),
+      //         );
       //       }
       //     }
-      //     this.maintain();
-      //     return this;
       //   }
-      insertAt(index, ...ele) {
-        if (index >= this.element.children.length) this.append(...ele);
-        else
-          for (let i = 0; i < ele.length; i++) {
-            if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
-            this.element?.insertBefore(ele[i].element, this.items[index].element);
-            this.items.splice(index, 0, ele[i]);
-          }
-        return this;
-      }
+      //   this.maintain();
+      //   return this;
+      // }
+      // append(...ele) {
+      //   this.#addItem("append", "push", ...ele);
+      //   return this;
+      // }
+      // prepend(...ele) {
+      //   this.#addItem("prepend", "unshift", ...ele);
+      //   return this;
+      // }
+      // insertAt(index, ...ele) {
+      //   if (index >= this.element.children.length) this.append(...ele);
+      //   else
+      //     for (let i = 0; i < ele.length; i++) {
+      //       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+      //       this.element?.insertBefore(ele[i].element, this.items[index].element);
+      //       this.items.splice(index, 0, ele[i]);
+      //     }
+      //   return this;
+      // }
       // remove(...ele) {
-      //   if(ele.length==0){
-      //     if(this.cache.parent)this.cache.parent.remove(this);
-      //     else if(this.target.children.length && [...this.target.children].includes(this.element)) this.target.removeChild(this.element);
-      //   }
-      //   else {
-      //     const remove = (ele) => {
-      //       if(typeof ele === "number") ele=this.items[ele];
-      //       if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.element);
-      //         this.items=this.items.filter(n=>n!==ele);
-      //     };
-      //     for (let i = 0; i < ele.length; i++) remove(ele[i]);
-      //     for (let i = 0; i < this.items.length; i++)Object.assign(this, { [[i]]: this.items[i] });
-      //     // Remove from item
-      //   }
+      //   const remove = (ele) => {
+      //     if (typeof ele === "number") ele = this.items[ele];
+      //     if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+      //     this.items = this.items.filter((n) => n !== ele);
+      //   };
+      //   for (let i = 0; i < ele.length; i++) remove(ele[i]);
+      //   for (let i = 0; i < this.items.length; i++)
+      //     Object.assign(this, { [[i]]: this.items[i] });
+      //   // Remove from item
+      //   return this;
+      // }
+      // forEach(callback) {
+      //   this.items.forEach(callback);
+      //   return this;
+      // }
+      // map(callback) {
+      //   return this.items.map(callback);
+      // }
+      // find(condition) {
+      //   return this.items.filter(condition);
+      // }
+      // filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
+      //   const FilterItems = this.items.filter(condition_callback);
+      //   FilterItems.forEach(if_callback);
+      //   this.items
+      //     .filter((item) => !FilterItems.includes(item))
+      //     .forEach(else_callback);
+      //   return this;
+      // }
+      // filterByTextContent(text, exactMatch = false) {
+      //   this.items.forEach((n) => n.render());
+      //   this.filter(
+      //     (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
+      //     (e) => e.unrender(),
+      //   );
+      //   // this.items.filter(n=>{
+      //   //   const content=n.element.textContent;
+      //   //   return !(exactMatch?content===text:content.includes(text))
+      //   // }).map(n=>n.unrender());
+      //   //  return this;
+      // }
+      // filterByClass(value) {
+      //   this.items.map((n) => n.render());
+      //   this.items
+      //     .filter((n) => !n.classes.includes(value))
+      //     .map((n) => n.unrender());
+      //   return this;
+      // }
+      // sortByTextContent(value, displays) {
+      //   let item = this.children;
+      //   item
+      //     .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+      //     .map((n) => {
+      //       n.style.display = "none";
+      //     });
+      //   item
+      //     .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+      //     .map((n, i) => (n.style.display = displays[i]));
+      //   //return item.filter(n=>n.style.display!="none")
+      //   item.filter((n) => n.style.display != "none");
       //   return this;
       // }
-      remove(...ele) {
-        const remove = (ele) => {
-          if (typeof ele === "number") ele = this.items[ele];
-          if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
-          this.items = this.items.filter((n) => n !== ele);
-        };
-        for (let i = 0; i < ele.length; i++) remove(ele[i]);
-        for (let i = 0; i < this.items.length; i++)
-          Object.assign(this, { [[i]]: this.items[i] });
-        // Remove from item
-        return this;
-      }
-      forEach(callback) {
-        this.items.forEach(callback);
-        return this;
-      }
-      map(callback) {
-        return this.items.map(callback);
-      }
-      find(condition) {
-        return this.items.filter(condition);
-      }
-      filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-        const FilterItems = this.items.filter(condition_callback);
-        FilterItems.forEach(if_callback);
-        this.items
-          .filter((item) => !FilterItems.includes(item))
-          .forEach(else_callback);
-        return this;
-      }
-      filterByTextContent(text, exactMatch = false) {
-        this.items.forEach((n) => n.render());
-        this.filter(
-          (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-          (e) => e.unrender(),
-        );
-        // this.items.filter(n=>{
-        //   const content=n.element.textContent;
-        //   return !(exactMatch?content===text:content.includes(text))
-        // }).map(n=>n.unrender());
-        //  return this;
-      }
-      filterByClass(value) {
-        this.items.map((n) => n.render());
-        this.items
-          .filter((n) => !n.classes.includes(value))
-          .map((n) => n.unrender());
-        return this;
-      }
-      sortByTextContent(value, displays) {
-        let item = this.children;
-        item
-          .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-          .map((n) => {
-            n.style.display = "none";
-          });
-        item
-          .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-          .map((n, i) => (n.style.display = displays[i]));
-        //return item.filter(n=>n.style.display!="none")
-        item.filter((n) => n.style.display != "none");
-        return this;
-      }
     }
 
     class __ZikoUIText__ extends ZikoUIContainerElement {
@@ -6136,6 +6214,53 @@
     const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
     const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
 
+    // function loadComponent() {
+    //     return new Promise((resolve) => {
+    //       setTimeout(() => {
+    //         resolve(p(1000))
+    //       }, 500);
+    //     });
+    //   }
+
+    //   Suspense(p("Loading ..."),()=>fetch('https://jsonplaceholder.typicode.com/todos/1')
+    //   .then(response => response.json())
+    //   .then(json => h2(json.title)))
+
+     
+
+    class ZikoUISuspense extends ZikoUIElement{
+        constructor(fallback_ui, callback){
+            super("div", "suspense");
+            this.setAttr({
+                dataTemp : "suspense"
+            });
+            this.fallback_ui = fallback_ui;
+            this.append(fallback_ui);
+            (async ()=>{
+                try{
+                    const ui = await callback();
+                    fallback_ui.unrender();
+                    this.append(ui);
+                    // console.log(content)
+                }
+                catch(error){
+                    console.log({error});
+                }
+            })();
+        }
+    }
+
+    const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
+
+    function h(tag, attributes = {}, ...children){
+        const {name, style, ...attrs} = attributes;
+        let element = new ZikoUIElement(tag,name);
+        style && element.style(style);
+        attrs && element.setAttr(attrs);
+        children && element.append(...children);
+        return element
+    }
+
     class ZikoUIHtmlTag extends ZikoUIContainerElement {
       constructor(element) {
         super(element,"html");
@@ -6226,16 +6351,19 @@
         __proto__: null,
         HTMLWrapper: HTMLWrapper,
         SVGWrapper: SVGWrapper,
+        Suspense: Suspense,
         ZikoUIBr: ZikoUIBr,
         ZikoUIHTMLWrapper: ZikoUIHTMLWrapper,
         ZikoUIHr: ZikoUIHr,
         ZikoUIHtmlTag: ZikoUIHtmlTag,
         ZikoUILink: ZikoUILink,
         ZikoUISVGWrapper: ZikoUISVGWrapper,
+        ZikoUISuspense: ZikoUISuspense,
         ZikoUIXMLWrapper: ZikoUIXMLWrapper,
         br: br,
         brs: brs,
         btn: btn,
+        h: h,
         hr: hr,
         hrs: hrs,
         html: html,
@@ -11645,7 +11773,7 @@
     exports.Matrix = Matrix;
     exports.Modal = Modal;
     exports.Nav = Nav;
-    exports.PI = PI;
+    exports.PI = PI$1;
     exports.Permutation = Permutation;
     exports.Random = Random;
     exports.SPA = SPA;
@@ -11654,6 +11782,7 @@
     exports.Slider = Slider;
     exports.Splitter = Splitter;
     exports.Str = Str;
+    exports.Suspense = Suspense;
     exports.Svg = Svg;
     exports.Table = Table$1;
     exports.Tabs = Tabs;
@@ -11739,6 +11868,7 @@
     exports.ZikoUISelect = ZikoUISelect;
     exports.ZikoUISubText = ZikoUISubText;
     exports.ZikoUISupText = ZikoUISupText;
+    exports.ZikoUISuspense = ZikoUISuspense;
     exports.ZikoUISvg = ZikoUISvg;
     exports.ZikoUIText = ZikoUIText;
     exports.ZikoUITextArea = ZikoUITextArea;
@@ -11810,6 +11940,7 @@
     exports.floor = floor;
     exports.gamma = gamma;
     exports.geomspace = geomspace;
+    exports.h = h;
     exports.h1 = h1;
     exports.h2 = h2;
     exports.h3 = h3;