ziko 0.0.16 → 0.0.18

package/src/graphics/svg/svg.js

@@ -1,27 +1,26 @@
-import ZikoUIElement from "../../UI/elements/primitives/ZikoUIElement.js";
-// import svgRect from "./Elements/rect.js";
-// import svgCircle from "./Elements/circle.js";
-// import svgEllipse from "./Elements/ellipse.js";
-// import svgLine from "./Elements/line.js";
-// //import svgPath from "./Elements/path.js";
-// import svgPolygon from "./Elements/polygon.js";
-// import svgImage from "./Elements/image.js";
-// import svgText from "./Elements/text.js";
-// import svgGroupe from "./Elements/groupe.js";
-// import svgLink from "./Elements/link.js";
-// //import svgObject from "./Elements/foreignObject.js";
-// //import svgGrid from "./Elements/grid.js";
-
-  class ZikoUISvg extends ZikoUIElement {
+import { ZikoUIContainerElement } from "../../ui/index.js";
+class ZikoUISvg extends ZikoUIContainerElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};
-      this.setAttr("width",w);
-      this.setAttr("height",h);
+      // this.setAttr("width",w);
+      // this.setAttr("height",h);
+      // this.setAttr({
+      //   width : w,
+      //   height : h
+      // })
       this.style({border:"1px black solid"});
-      //this.view(-w/2,-h/2,w/2,h/2)
+      //this.view(-w/2,-h/2,w/2,h/2);
+      this.size(w, h)
       this.view(-10,-10,10,10);
     }
+    size(w, h){
+      this.setAttr({
+        width : w,
+        height : h
+      });
+      return this
+    }
     view(x1,y1,x2,y2){
       let width=Math.abs(x2-x1);
       let height=Math.abs(y2-y1);
@@ -31,7 +30,7 @@ import ZikoUIElement from "../../UI/elements/primitives/ZikoUIElement.js";
     }
     add(...svgElement){
       for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChildddddddd(svgElement[i].element);
+        this.element.append(svgElement[i].element);
         this.items.push(svgElement[i])
       }
       this.maintain()
@@ -45,43 +44,6 @@ import ZikoUIElement from "../../UI/elements/primitives/ZikoUIElement.js";
       this.maintain();
       return this;     
     }
-    // text(text,x,y){
-    //   let item=svgText(text,x,y);
-    //   this.element?.appendChildd(item.element);
-    //   item.x(x-item.element.getComputedTextLength()/2);
-    //   return item;
-    // }
-    // rect(x,y,w,h){
-    //   let item=svgRect(x,y,w,h);
-    //   this.add(item);
-    //   return item;
-    // }
-    // line(x1,y1,x2,y2){
-    //   let item=svgLine(x1,y1,x2,y2);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // circle(cx,cy,r){
-    //   let item=svgCircle(cx,cy,r);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // ellipse(cx,cy,rx,ry){
-    //   let item=svgEllipse(cx,cy,rx,ry);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // polygon(X,Y){
-    //   let item=svgPolygon(X,Y);
-    //   this.element?.appendChildd(item.element);
-    //   item.addPoints(X,Y)
-    //   return item;
-    // }
-    // image(src,w,h,x,y){
-    //   let item=svgImage(src,w,h,x,y);
-    //   this.element?.appendddChild(item.element);
-    //   return item;
-    // }
     mask(){
   
     }
@@ -97,19 +59,11 @@ import ZikoUIElement from "../../UI/elements/primitives/ZikoUIElement.js";
     toImg2(){
       return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
     }
+    
   }
 
   const Svg =(w,h)=>new ZikoUISvg(w,h);
   export{
     Svg,
     ZikoUISvg,
-    // svgLink,
-    // svgCircle,
-    // svgEllipse,
-    // svgImage,
-    // svgLine,
-    // svgPolygon,
-    // svgRect,
-    // svgText,
-    // svgGroupe
 }

package/src/index.js

@@ -21,7 +21,8 @@ export * from "./app";
     UI,
     Time,
     Data,
-    Reactivity
+    Reactivity,
+    Graphics
 ].forEach(n=>Object.assign(n,{
     ExtractAll:()=>__ExtractAll__(n),
     RemoveAll:()=>__RemoveAll__(n)

package/src/reactivity/events/index.js

@@ -1,63 +1,12 @@
-import { useClickEvent } from "./click.js";
-import {usePointerEvent} from "./pointer.js";
-import {useMouseEvent} from "./mouse.js";
-import {useWheelEvent} from "./wheel.js";
-import {useKeyEvent} from "./key.js";
-import {useDragEvent,useDropEvent} from "./drag.js";
-import {useClipboardEvent} from "./clipboard.js";
-import {useFocusEvent} from "./focus.js";
-import {useInputEvent} from "./Input.js";
-import {useHashEvent} from "./hash.js";
-import {useCustomEvent} from "./custom-event.js";
-import {useSwipeEvent} from "./swipe.js"
-const Events={
-    usePointerEvent,
-    useMouseEvent,
-    useWheelEvent,
-    useKeyEvent,
-    useDragEvent,
-    useDropEvent,
-    useClickEvent,
-    useClipboardEvent,
-    useFocusEvent,
-    useInputEvent,
-    useHashEvent,
-    useCustomEvent,
-    useSwipeEvent,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
-}
-export {
-    usePointerEvent,
-    useMouseEvent,
-    useWheelEvent,
-    useKeyEvent,
-    useDragEvent,
-    useDropEvent,
-    useClickEvent,
-    useClipboardEvent,
-    useFocusEvent,
-    useInputEvent,
-    useHashEvent,
-    useCustomEvent,
-    useSwipeEvent
-}
-export default Events
+export * from "./click.js";
+export * from "./pointer.js";
+export * from "./mouse.js";
+export * from "./wheel.js";
+export * from "./key.js";
+export * from "./drag.js";
+export * from "./clipboard.js";
+export * from "./focus.js";
+export * from "./Input.js";
+export * from "./hash.js";
+export * from "./custom-event.js";
+export * from "./swipe.js"

package/src/reactivity/hooks/index.js

@@ -1,91 +1,8 @@
-import {
-    useTitle,
-    useFavIcon,
-    useMeta,
-    useHead
-} from "./Head"
-import { 
-    useStyle,
-    useTheme,
-    useMediaQuery
- } from "./UI";
-import { 
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth
- } from "./Interactions";
-import { 
-    useBattery,
-    useGeolocation
- } from "./Sensors";
-import { 
-    useThrottle,
-    useDebounce
- } from "./Decorators";
-import {
-    useLocaleStorage,
-    useSessionStorage
-} from "./Storage"
-import { 
-    useSuccesifKeys
- } from "./Contexte";
-const Hooks={
-    useStyle,
-    useTheme,
-    useMediaQuery,
-    useBattery,
-    useGeolocation,
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth,
-    useTitle,
-    useFavIcon,
-    useMeta,
-    useHead,
-    useThrottle,
-    useDebounce,
-    useLocaleStorage,
-    useSessionStorage,
-    useSuccesifKeys,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
-}
-export default Hooks;
-export{
-    useStyle,
-    useTheme,
-    useMediaQuery,
-    useTitle,
-    useFavIcon,
-    useBattery,
-    useGeolocation,
-    useEventEmitter,
-    useChannel,
-    useThread,
-    useBluetooth,
-    useThrottle,
-    useDebounce,
-    useLocaleStorage,
-    useSessionStorage,
-    useSuccesifKeys
-}
+export * from "./contexte"
+export * from "./decorators"
+export * from "./head"
+export * from "./interactions"
+export * from "./sensors"
+export * from "./storage"
+export * from "./ui"
+// export * from "./window"

package/src/reactivity/hooks/ui/index.js

@@ -2,4 +2,5 @@ export * from "./useStyle";
 export * from "./useTheme";
 // export * from "../Head/useTitle";
 // export * from "../Head/useFavIcon";
-export * from "./useMediaQuery"
+export * from "./useMediaQuery"
+export * from "./useRoot.js"

package/src/reactivity/hooks/ui/useRoot.js

@@ -0,0 +1,39 @@
+import { Str } from "../../../data"
+class ZikoUseRoot{
+    constructor(props){
+        this.props={};
+        props && this.set(props)
+    }
+    get(prop){
+        return this.props[prop]
+    }
+    // getStaticValue(){
+    //     return document.documentElement.style.getPropertyValue("--primary-col")
+    // }
+    set(props){
+        Object.entries(props).forEach(([key,value])=>this.#setOneProp(key, value));
+        return this;
+    }
+    #setOneProp(prop, value){
+        const CssProp = `--${Str.camel2hyphencase(prop)}`
+        document.documentElement.style.setProperty(CssProp,value);
+        Object.assign(this.props, {[prop]: `var(${CssProp})`})
+        Object.assign(this, {[prop] : `var(${CssProp})`})
+    }
+}
+
+const useRootValue=CssVar=>{
+    if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
+    return `var(${CssVar})`
+}
+// const useRootStaticValue=CssVar=>{
+//     if(!CssVar.startsWith("--")) CssVar = `--${Str.camel2hyphencase(CssVar)}`
+//     return globalThis.document.documentElement.style.getPropertyValue(CssVar)  
+// }
+const useRoot=(props)=>new ZikoUseRoot(props)
+export{
+    ZikoUseRoot,
+    useRoot,
+    useRootValue,
+    // useRootStaticValue
+}

package/src/reactivity/index.js

@@ -1,6 +1,6 @@
-import Events from "./events";
+import * as Events from "./events";
 import * as Observer from "./observer"
-import Hooks from "./hooks"
+import * as Hooks from "./hooks"
 const Reactivity={
     ...Events,
     ...Observer,

package/src/ui/elements/primitives/ZikoUIContainerElement.js

@@ -1,127 +1,164 @@
 import ZikoUIElement from "./ZikoUIElement";
 import { text } from "./text";
-class ZikoUIContainerElement extends ZikoUIElement{
-    constructor(element, name=""){
-        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;
+class ZikoUIContainerElement extends ZikoUIElement {
+  constructor(element, name = "") {
+    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;
     }
-    at(index) {
-      return this.items.at(index);
-    }
-    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]),
-              );
-            }
-          }
+    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(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 
-      //   }
-      //   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;
+    }
+    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]),
+  //           );
+  //         }
+  //       }
+  //     }
+  //     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(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
+  //   }
+  //   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;
+  }
 }
 export default ZikoUIContainerElement;

package/src/ui/elements/primitives/ZikoUIElement.js

@@ -25,7 +25,7 @@ class ZikoUIElement {
     if(typeof element === "string") {
       element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
     }
-    this.element = element;
+    if(element)this.element = element;
     this.uuid=this.constructor.name+"-"+Random.string(10);
     this.cache = {
       name,
@@ -67,7 +67,7 @@ class ZikoUIElement {
      });
     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];
-    globalThis.__Ziko__.__Config__.default.render && this.render()
+    element && globalThis.__Ziko__.__Config__.default.render && this.render()
   }
   get isZikoUIElement(){
     return true
@@ -229,7 +229,7 @@ class ZikoUIElement {
   }
     // Attributes
   #setAttr(name, value){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this.element.tagName !== "svg") 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});