ziko 0.0.13 → 0.0.14

package/dist/ziko.mjs

@@ -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
@@ -3257,7 +3257,7 @@ class ZikoIntersectionObserver{
             margin
         };
         if(!globalThis.IntersectionObserver){
-            console.log("IntersectionObserver Nor Supported");
+            console.log("IntersectionObserver Not Supported");
             return;
         }
         this.observer=new IntersectionObserver((entries)=>{
@@ -5706,7 +5706,7 @@ class ZikoUIElement {
     this.style({ 
       position: "relative",
       boxSizing:"border-box",
-      fontFamily:"verdana",
+      // fontFamily:"verdana",
       margin:0,
       padding:0,
      });
@@ -5861,24 +5861,24 @@ class ZikoUIElement {
     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;
   }
@@ -5887,6 +5887,7 @@ class ZikoUIElement {
     return this;
   }
   getAttr(name){
+    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
     return this.element.attributes[name].value;
   }
   setContentEditable(bool = true) {
@@ -6122,13 +6123,14 @@ class ZikoUIElement {
 }
 
 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(){
@@ -6151,7 +6153,7 @@ let ZikoUIImage$1 = class ZikoUIImage extends ZikoUIElement {
       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));
@@ -8328,6 +8330,7 @@ class ZikoUIBr extends ZikoUIElement {
   class ZikoUIHr extends ZikoUIElement {
     constructor() {
       super("hr","hr");
+      this.setAttr("role", "none");
     }
     get isHr(){
       return true
@@ -8508,6 +8511,7 @@ class ZikoUIInput extends ZikoUIElement {
     this.setValue(value);
     this.setAttr("type", type);
     this.setAttr("name", name);
+    // this.setAttr("tab-index","0")
     if (datalist) this.linkDatalist(datalist);
   }
   get isInput() {
@@ -8844,13 +8848,14 @@ class ZikoUIInputImage extends ZikoUIElement {
 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(){
@@ -8873,7 +8878,7 @@ class ZikoUIImage extends ZikoUIElement {
       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){
@@ -9351,6 +9356,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();
@@ -10526,72 +10597,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();
@@ -10769,6 +10774,58 @@ class ZikoUITable extends ZikoUIElement {
 }
 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,
@@ -10821,7 +10878,7 @@ const UI$1={
     Grid: Grid$1,
     Header,
     Main,
-    Section: Section$1,
+    Section,
     Article,
     Aside,
     Nav,
@@ -10840,6 +10897,7 @@ const UI$1={
     infoAlert,
     warningAlert,
     dangerAlert,
+    PDFViewer,
     ExtractAll: function () {
         const keys = Object.keys(this);
         for (let i = 0; i < keys.length; i++) {
@@ -11054,7 +11112,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",
       );
@@ -11491,7 +11549,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(){
@@ -12083,4 +12141,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { Accordion, App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, ExtractAll, Fixed, Flex, Footer, Form, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Modal, Nav, PI, Permutation, Random, Reactivity, RemoveAll, SPA, Section$1 as Section, Signal, Str, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSplitter, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUIMenu3d, ZikoUIModal, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSplitter, ZikoUIVideo, __Config__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hSplitter, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, menu3d, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useBluetooth, useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useGeolocation, useHashEvent, useInputEvent, useKeyEvenent as useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useTheme, useThread, useThrottle, useTimeLoop, useTitle, useWheelEventnent as useWheelEvent, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { Accordion, App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, ExtractAll, Fixed, Flex, Footer, Form, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Modal, Nav, PI, Permutation, Random, Reactivity, RemoveAll, SPA, Section, Signal, Str, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSplitter, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUIMenu3d, ZikoUIModal, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSplitter, ZikoUIVideo, __Config__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hSplitter, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, menu3d, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useBluetooth, useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useGeolocation, useHashEvent, useInputEvent, useKeyEvenent as useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useTheme, useThread, useThrottle, useTimeLoop, useTitle, useWheelEventnent as useWheelEvent, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
   "keywords": [
     "Zikojs",
@@ -28,6 +28,9 @@
       "import": "./dist/ziko.mjs",
       "require": "./dist/ziko.cjs"
     },
+    "./type": {
+      "import": "./src/type.js"
+    },
     "./math": {
       "import": "./src/math/index.js"
     },
@@ -57,9 +60,6 @@
     },
     "./graphics": {
       "import": "./src/data/graphics.js"
-    },
-    "./jsx-runtime": {
-      "import": "./src/runtime/jsx-runtime/index.js"
     }
   },
   "bin": {

package/src/graphics/canvas/canvas.js

@@ -124,7 +124,7 @@ class ZikoUICanvas extends ZikoUIContainerElement{
         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(){

package/src/graphics/svg/Elements/Basic/circle.js

@@ -2,7 +2,7 @@ import ZikoSvgElement from "../ZikoSvgElement.js";
 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",
       );

package/src/reactivity/observer/intersection.js

@@ -6,7 +6,7 @@ class ZikoIntersectionObserver{
             margin
         }
         if(!globalThis.IntersectionObserver){
-            console.log("IntersectionObserver Nor Supported")
+            console.log("IntersectionObserver Not Supported")
             return;
         }
         this.observer=new IntersectionObserver((entries)=>{

package/src/types.js

@@ -0,0 +1,71 @@
+import ZikoUIElement from "./user-interface/elements/primitives/ZikoUIElement";
+import ZikoUIContainerElement from "./user-interface/elements/primitives/ZikoUIContainerElement";
+
+export {
+    ZikoUIElement,
+    ZikoUIContainerElement
+}
+export {
+    ZikoUIAbbrText,
+    ZikoUIAccordion,
+    ZikoUIArticle,
+    ZikoUIAside,
+    ZikoUIAudio,
+    ZikoUIBlockQuote,
+    ZikoUIBr,
+    ZikoUIBreadcrumbs,
+    ZikoUICodeNote,
+    ZikoUICodeText,
+    ZikoUIDefintion,
+    ZikoUIFigure,
+    ZikoUIFlex,
+    ZikoUIFooter,
+    ZikoUIForm,
+    ZikoUIGrid,
+    ZikoUIHeader,
+    ZikoUIHeading,
+    ZikoUIHorizontalSplitter,
+    ZikoUIHr,
+    ZikoUIHtmlTag,
+    ZikoUIImage,
+    ZikoUIInput,
+    ZikoUIInputCheckbox,
+    ZikoUIInputColor,
+    ZikoUIInputDatalist,
+    ZikoUIInputDate,
+    ZikoUIInputDateTime,
+    ZikoUIInputEmail,
+    ZikoUIInputImage,
+    ZikoUIInputNumber,
+    ZikoUIInputOption,
+    ZikoUIInputPassword,
+    ZikoUIInputRadio,
+    ZikoUIInputSearch,
+    ZikoUIInputSlider,
+    ZikoUIInputTime,
+    ZikoUILabel,
+    ZikoUILink,
+    ZikoUIMain,
+    ZikoUIMenu3d,
+    ZikoUIModal,
+    ZikoUINav,
+    ZikoUIParagraphe,
+    ZikoUIQuote,
+    ZikoUISection,
+    ZikoUISelect,
+    ZikoUISubText,
+    ZikoUISupText,
+    ZikoUIText,
+    ZikoUITextArea,
+    ZikoUIVerticalSplitter,
+    ZikoUIVideo,
+} from "./user-interface/index.js"
+
+export{
+    Matrix,
+    LinearSystem,
+    Complex,
+    Random,
+} from "./math/index.js"
+
+

package/src/user-interface/elements/derived/elements/carousel/index.js

@@ -1,4 +1,5 @@
 import { ZikoUIFlex } from "../../Flex";
+import { Section } from "../../../primitives/semantic";
 class ZikoUICarousel extends ZikoUIFlex{
     constructor(...ZikoUIElement){
         super()

package/src/user-interface/elements/primitives/ZikoUIElement.js

@@ -18,6 +18,7 @@ import {
   watchChildren
 } from "../../../reactivity/index.js"
 import { Random } from "../../../math/index.js";
+import { Str } from "../../../data/index.js";
 class ZikoUIElement {
   constructor(element ,name="") {
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
@@ -59,7 +60,7 @@ class ZikoUIElement {
     this.style({ 
       position: "relative",
       boxSizing:"border-box",
-      fontFamily:"verdana",
+      // fontFamily:"verdana",
       margin:0,
       padding:0,
      });
@@ -214,24 +215,24 @@ class ZikoUIElement {
     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;
   }
@@ -240,6 +241,7 @@ class ZikoUIElement {
     return this;
   }
   getAttr(name){
+    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
     return this.element.attributes[name].value;
   }
   setContentEditable(bool = true) {

package/src/user-interface/elements/primitives/embaded/html.js

@@ -0,0 +1,21 @@
+import ZikoUIElement from "../ZikoUIElement";
+
+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
+export{
+    YoutubePlayer,
+    ZikoUIHtmlViewer
+}

package/src/user-interface/elements/primitives/embaded/index.js

@@ -1 +1,3 @@
-
+export * from "./html.js"
+export * from "./pdf.js"
+export * from "./youtube.js"

package/src/user-interface/elements/primitives/embaded/pdf.js

@@ -0,0 +1,18 @@
+import  ZikoUIElement  from "../ZikoUIElement.js";
+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",
+        })
+    }
+}
+const PDFViewer=(src, title)=>new ZikoUIPdf(src, title);
+window.PDFViewer = PDFViewer
+export{
+    ZikoUIPdf,
+    PDFViewer
+}

package/src/user-interface/elements/primitives/embaded/youtube.js

@@ -0,0 +1,26 @@
+import ZikoUIElement from "../ZikoUIElement";
+import { Str } from "../../../../data";
+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
+export{
+    YoutubePlayer,
+    ZikoUIYoutubePlayer
+}

package/src/user-interface/elements/primitives/io/Inputs/input/index.js

@@ -7,6 +7,7 @@ class ZikoUIInput extends ZikoUIElement {
     this.setValue(value);
     this.setAttr("type", type);
     this.setAttr("name", name);
+    // this.setAttr("tab-index","0")
     if (datalist) this.linkDatalist(datalist);
   }
   get isInput() {