ziko 0.0.13 → 0.0.14

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Sep 16 2024 15:12:38 GMT+0100 (UTC+01:00)
+  Date : Mon Sep 30 2024 19:06:30 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
@@ -3261,7 +3261,7 @@ class ZikoIntersectionObserver{
             margin
         };
         if(!globalThis.IntersectionObserver){
-            console.log("IntersectionObserver Nor Supported");
+            console.log("IntersectionObserver Not Supported");
             return;
         }
         this.observer=new IntersectionObserver((entries)=>{
@@ -5710,7 +5710,7 @@ class ZikoUIElement {
     this.style({ 
       position: "relative",
       boxSizing:"border-box",
-      fontFamily:"verdana",
+      // fontFamily:"verdana",
       margin:0,
       padding:0,
      });
@@ -9355,6 +9355,72 @@ class ZikoUIAccordion extends ZikoUIContainerElement{
 }
 const Accordion = (... Collapsible) => new ZikoUIAccordion(...Collapsible);
 
+class ZikoUIMain extends ZikoUIContainerElement{
+    constructor(){
+      super("main","Main");
+    }
+    get isMain(){
+      return true
+    }
+  }
+  class ZikoUIHeader extends ZikoUIContainerElement{
+    constructor(){
+      super("header","Header");
+    }
+    get isHeader(){
+      return true
+    }
+  }
+  class ZikoUINav extends ZikoUIContainerElement{
+    constructor(){
+      super("nav","Nav");
+    }
+    get isNav(){
+      return true
+    }
+  }
+  class ZikoUISection extends ZikoUIContainerElement{
+    constructor(){
+      super("section","Section");
+      this.style({position:"relative"});
+    }
+    get isSection(){
+      return true
+    }
+  }
+  class ZikoUIArticle extends ZikoUIContainerElement{
+    constructor(){
+      super("article","Article");
+    }
+    get isArticle(){
+      return true
+    }
+  }
+  class ZikoUIAside extends ZikoUIContainerElement{
+    constructor(){
+      super("aside","Aside");
+    }
+    get isAside(){
+      return true
+    }
+  }
+  class ZikoUIFooter extends ZikoUIContainerElement{
+    constructor(){
+      super("footer","Footer");
+      this.element=document?.createElement("footer");
+    }
+    get isFooter(){
+      return true
+    }
+  }
+const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
+const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
+const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
+const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
+const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
+const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
+const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
+
 class ZikoUICarousel extends ZikoUIFlex{
     constructor(...ZikoUIElement){
         super();
@@ -10530,72 +10596,6 @@ a=Modal(text("Hello")).style({
 Flex(a).size("400px","400px").style({border:"1px red solid"})
 */
 
-class ZikoUIMain extends ZikoUIContainerElement{
-    constructor(){
-      super("main","Main");
-    }
-    get isMain(){
-      return true
-    }
-  }
-  class ZikoUIHeader extends ZikoUIContainerElement{
-    constructor(){
-      super("header","Header");
-    }
-    get isHeader(){
-      return true
-    }
-  }
-  class ZikoUINav extends ZikoUIContainerElement{
-    constructor(){
-      super("nav","Nav");
-    }
-    get isNav(){
-      return true
-    }
-  }
-  class ZikoUISection extends ZikoUIContainerElement{
-    constructor(){
-      super("section","Section");
-      this.style({position:"relative"});
-    }
-    get isSection(){
-      return true
-    }
-  }
-  class ZikoUIArticle extends ZikoUIContainerElement{
-    constructor(){
-      super("article","Article");
-    }
-    get isArticle(){
-      return true
-    }
-  }
-  class ZikoUIAside extends ZikoUIContainerElement{
-    constructor(){
-      super("aside","Aside");
-    }
-    get isAside(){
-      return true
-    }
-  }
-  class ZikoUIFooter extends ZikoUIContainerElement{
-    constructor(){
-      super("footer","Footer");
-      this.element=document?.createElement("footer");
-    }
-    get isFooter(){
-      return true
-    }
-  }
-const Section$1 = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
-const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
-const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
-const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
-const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
-const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
-const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
-
 class ZikoUITr extends ZikoUIElement{
     constructor(...ZikoUIElement){
         super();
@@ -10825,7 +10825,7 @@ const UI$1={
     Grid: Grid$1,
     Header,
     Main,
-    Section: Section$1,
+    Section,
     Article,
     Aside,
     Nav,
@@ -11058,7 +11058,7 @@ class ZikoSvgRectangle extends ZikoSvgElement{
 class ZikoSvgCircle extends ZikoSvgElement{
     constructor(cx,cy,r){
       super("circle");
-      this.element=document?.createElementttNS(
+      this.element=document.createElementNS(
         "http://www.w3.org/2000/svg",
         "circle",
       );
@@ -11495,7 +11495,7 @@ class ZikoUICanvas extends ZikoUIContainerElement{
     lineWidth(w){
         this.ctx.lineWidth=w/this.transformMatrix[0][0];        return this
     }
-    ImageData(x=0,y=0,w=this.Width,h=this.Height){
+    getImageData(x=0,y=0,w=this.Width,h=this.Height){
         return this.ctx.getImageData(x,y,w,h);
     }
     clear(){
@@ -12127,7 +12127,7 @@ exports.Random = Random;
 exports.Reactivity = Reactivity;
 exports.RemoveAll = RemoveAll;
 exports.SPA = SPA;
-exports.Section = Section$1;
+exports.Section = Section;
 exports.Signal = Signal;
 exports.Str = Str;
 exports.Svg = Svg;

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Sep 16 2024 15:20:35 GMT+0100 (UTC+01:00)
+  Date : Tue Oct 01 2024 12:12:32 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
@@ -3263,7 +3263,7 @@
               margin
           };
           if(!globalThis.IntersectionObserver){
-              console.log("IntersectionObserver Nor Supported");
+              console.log("IntersectionObserver Not Supported");
               return;
           }
           this.observer=new IntersectionObserver((entries)=>{
@@ -5712,7 +5712,7 @@
       this.style({ 
         position: "relative",
         boxSizing:"border-box",
-        fontFamily:"verdana",
+        // fontFamily:"verdana",
         margin:0,
         padding:0,
        });
@@ -5867,24 +5867,24 @@
       this.element?.animate(keyframe,{duration, iterations, easing});
       return this;
     }
-    // Attributes
+      // Attributes
+    #setAttr(name, value){
+      name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+      if(this?.attr[name] && this?.attr[name]===value) return;
+      this.element.setAttribute(name, value);
+      Object.assign(this.cache.attributes, {[name]:value});
+    }
     setAttr(name, value) {
       if(name instanceof Object){
         const [names,values]=[Object.keys(name),Object.values(name)];
         for(let i=0;i<names.length;i++){
           if(values[i] instanceof Array)value[i] = values[i].join(" ");
-          if(this?.attr[name[i]]!==value[i]){
-            this.element?.setAttribute(names[i], values[i]);
-            Object.assign(this.cache.attributes, Object.fromEntries([[names[i], values[i]]]));
-          }
+          this.#setAttr(names[i], values[i]);
         }
       }
       else {
         if(value instanceof Array)value = value.join(" ");
-        if(this?.attr[name]!==value){
-          this.element?.setAttribute(name, value);
-          Object.assign(this.cache.attributes, Object.fromEntries([[name, value]]));
-        }
+        this.#setAttr(name, value);
       }
       return this;
     }
@@ -5893,6 +5893,7 @@
       return this;
     }
     getAttr(name){
+      name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
       return this.element.attributes[name].value;
     }
     setContentEditable(bool = true) {
@@ -6128,13 +6129,14 @@
   }
 
   let ZikoUIImage$1 = class ZikoUIImage extends ZikoUIElement {
-      constructor(src, w, h) {
+      constructor(src,alt, w, h) {
         super("img","image");
         this.value=src;
-        if (src.nodeName === "IMG")this.element?.setAttribute("src", src.src);
+        if (src.nodeName === "IMG")this.element.setAttribute("src", src.src);
         else this.element?.setAttribute("src", src);
         if (typeof w == "number") w += "%";
         if (typeof h == "number") h += "%";
+        this.setAttr("alt", alt);
         this.style({ border: "1px solid black", width: w, height: h });
       }
       get isImg(){
@@ -6157,7 +6159,7 @@
         return this;
       }
     };
-  const image$1 = (src, width, height) => new ZikoUIImage$1(src, width, height);
+  const image$1 = (src,alt, width, height) => new ZikoUIImage$1(src,alt, width, height);
 
   const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
   const svg2ascii=svg=>btoa(svg2str(svg));
@@ -8334,6 +8336,7 @@
     class ZikoUIHr extends ZikoUIElement {
       constructor() {
         super("hr","hr");
+        this.setAttr("role", "none");
       }
       get isHr(){
         return true
@@ -8514,6 +8517,7 @@
       this.setValue(value);
       this.setAttr("type", type);
       this.setAttr("name", name);
+      // this.setAttr("tab-index","0")
       if (datalist) this.linkDatalist(datalist);
     }
     get isInput() {
@@ -8850,13 +8854,14 @@
   const inputImage = (text) => new ZikoUIInputImage(text);
 
   class ZikoUIImage extends ZikoUIElement {
-      constructor(src, w, h) {
+      constructor(src,alt, w, h) {
         super("img","image");
         this.value=src;
-        if (src.nodeName === "IMG")this.element?.setAttribute("src", src.src);
+        if (src.nodeName === "IMG")this.element.setAttribute("src", src.src);
         else this.element?.setAttribute("src", src);
         if (typeof w == "number") w += "%";
         if (typeof h == "number") h += "%";
+        this.setAttr("alt", alt);
         this.style({ border: "1px solid black", width: w, height: h });
       }
       get isImg(){
@@ -8879,7 +8884,7 @@
         return this;
       }
     }
-  const image = (src, width, height) => new ZikoUIImage(src, width, height);
+  const image = (src,alt, width, height) => new ZikoUIImage(src,alt, width, height);
 
   class ZikoUIFigure extends ZikoUIElement{
       constructor(src,caption){
@@ -9357,6 +9362,72 @@
   }
   const Accordion = (... Collapsible) => new ZikoUIAccordion(...Collapsible);
 
+  class ZikoUIMain extends ZikoUIContainerElement{
+      constructor(){
+        super("main","Main");
+      }
+      get isMain(){
+        return true
+      }
+    }
+    class ZikoUIHeader extends ZikoUIContainerElement{
+      constructor(){
+        super("header","Header");
+      }
+      get isHeader(){
+        return true
+      }
+    }
+    class ZikoUINav extends ZikoUIContainerElement{
+      constructor(){
+        super("nav","Nav");
+      }
+      get isNav(){
+        return true
+      }
+    }
+    class ZikoUISection extends ZikoUIContainerElement{
+      constructor(){
+        super("section","Section");
+        this.style({position:"relative"});
+      }
+      get isSection(){
+        return true
+      }
+    }
+    class ZikoUIArticle extends ZikoUIContainerElement{
+      constructor(){
+        super("article","Article");
+      }
+      get isArticle(){
+        return true
+      }
+    }
+    class ZikoUIAside extends ZikoUIContainerElement{
+      constructor(){
+        super("aside","Aside");
+      }
+      get isAside(){
+        return true
+      }
+    }
+    class ZikoUIFooter extends ZikoUIContainerElement{
+      constructor(){
+        super("footer","Footer");
+        this.element=document?.createElement("footer");
+      }
+      get isFooter(){
+        return true
+      }
+    }
+  const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
+  const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
+  const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
+  const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
+  const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
+  const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
+  const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
+
   class ZikoUICarousel extends ZikoUIFlex{
       constructor(...ZikoUIElement){
           super();
@@ -10532,72 +10603,6 @@
   Flex(a).size("400px","400px").style({border:"1px red solid"})
   */
 
-  class ZikoUIMain extends ZikoUIContainerElement{
-      constructor(){
-        super("main","Main");
-      }
-      get isMain(){
-        return true
-      }
-    }
-    class ZikoUIHeader extends ZikoUIContainerElement{
-      constructor(){
-        super("header","Header");
-      }
-      get isHeader(){
-        return true
-      }
-    }
-    class ZikoUINav extends ZikoUIContainerElement{
-      constructor(){
-        super("nav","Nav");
-      }
-      get isNav(){
-        return true
-      }
-    }
-    class ZikoUISection extends ZikoUIContainerElement{
-      constructor(){
-        super("section","Section");
-        this.style({position:"relative"});
-      }
-      get isSection(){
-        return true
-      }
-    }
-    class ZikoUIArticle extends ZikoUIContainerElement{
-      constructor(){
-        super("article","Article");
-      }
-      get isArticle(){
-        return true
-      }
-    }
-    class ZikoUIAside extends ZikoUIContainerElement{
-      constructor(){
-        super("aside","Aside");
-      }
-      get isAside(){
-        return true
-      }
-    }
-    class ZikoUIFooter extends ZikoUIContainerElement{
-      constructor(){
-        super("footer","Footer");
-        this.element=document?.createElement("footer");
-      }
-      get isFooter(){
-        return true
-      }
-    }
-  const Section$1 = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
-  const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
-  const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
-  const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
-  const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
-  const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
-  const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
-
   class ZikoUITr extends ZikoUIElement{
       constructor(...ZikoUIElement){
           super();
@@ -10775,6 +10780,58 @@
   }
   const Table=(matrix,config)=>new ZikoUITable(matrix,config);
 
+  class ZikoUIHtmlViewer extends ZikoUIElement{
+      constructor(src, title){
+          super("iframe", "HTMLViewer");
+          this.setAttr({
+              src,
+              title,
+              // ariaLabel : "Interactive YouTube video player for zikojs apps",
+              role:"application",
+              loading:"lazy" 
+          });
+      }
+  }
+
+  const HTMLViewer = (src, title) => new ZikoUIHtmlViewer(src, title);
+  window.HTMLViewer = HTMLViewer;
+
+  class ZikoUIPdf extends ZikoUIElement{
+      constructor(src, title = "Pdf Document Embaded in Zikojs App"){
+          super("embed","PDFViewer");
+          this.setAttr({
+              src:src,
+              type: "application/pdf",
+              ariaLabel: title,
+              tabIndex: "0",
+              laoding:"lazy"
+          });
+      }
+  }
+  const PDFViewer=(src, title)=>new ZikoUIPdf(src, title);
+  window.PDFViewer = PDFViewer;
+
+  class ZikoUIYoutubePlayer extends ZikoUIElement{
+      constructor(src, title){
+          super("iframe", "YoutubePlayer");
+          const id = Str.isUrl(src)?getYouTubeVideoId(src):src;
+          this.setAttr({
+              src:`https://www.youtube.com/embed/${id}`,
+              title,
+              ariaLabel : title ?? "Interactive YouTube video player for zikojs apps",
+              role:"application"
+          });
+      }
+  }
+  function getYouTubeVideoId(url) {
+      const regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|embed)\/|.*[?&]v=)|youtu\.be\/|embed\/)([a-zA-Z0-9_-]{11})/;
+      const match = url.match(regex);
+      return match ? match[1] : null;
+    }
+  const YoutubePlayer = (id, title) => new ZikoUIYoutubePlayer(id, title);
+  window.YoutubePlayer = YoutubePlayer;
+  window.YB = YoutubePlayer;
+
   const UI$1={
       html,
       text: text$1,
@@ -10827,7 +10884,7 @@
       Grid: Grid$1,
       Header,
       Main,
-      Section: Section$1,
+      Section,
       Article,
       Aside,
       Nav,
@@ -10846,6 +10903,7 @@
       infoAlert,
       warningAlert,
       dangerAlert,
+      PDFViewer,
       ExtractAll: function () {
           const keys = Object.keys(this);
           for (let i = 0; i < keys.length; i++) {
@@ -11060,7 +11118,7 @@
   class ZikoSvgCircle extends ZikoSvgElement{
       constructor(cx,cy,r){
         super("circle");
-        this.element=document?.createElementttNS(
+        this.element=document.createElementNS(
           "http://www.w3.org/2000/svg",
           "circle",
         );
@@ -11497,7 +11555,7 @@
       lineWidth(w){
           this.ctx.lineWidth=w/this.transformMatrix[0][0];        return this
       }
-      ImageData(x=0,y=0,w=this.Width,h=this.Height){
+      getImageData(x=0,y=0,w=this.Width,h=this.Height){
           return this.ctx.getImageData(x,y,w,h);
       }
       clear(){
@@ -12129,7 +12187,7 @@
   exports.Reactivity = Reactivity;
   exports.RemoveAll = RemoveAll;
   exports.SPA = SPA;
-  exports.Section = Section$1;
+  exports.Section = Section;
   exports.Signal = Signal;
   exports.Str = Str;
   exports.Svg = Svg;