ziko 0.32.0 → 0.34.0

package/src/ui/elements/ZikoUIElement.js

@@ -1,15 +1,10 @@
+import { compose } from "../../__helpers__/index.js";
+import { DomMethods } from "../methods/dom.js";
+import { IndexingMethods } from "../methods/indexing.js";
+import { EventsMethodes } from "../methods/events.js";
 import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
 import { ZikoUIElementStyle } from "../style/index.js";
 import { 
-  usePointerEvent,
-  useMouseEvent, 
-  useWheelEvent,
-  useKeyEvent, 
-  useDragEvent , 
-  useDropEvent, 
-  useClickEvent , 
-  useClipboardEvent ,
-  useFocusEvent,
   useCustomEvent,
   useSwipeEvent,
   watchIntersection, 
@@ -19,7 +14,6 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
-import { text } from "./text/text.js";
 class ZikoUIElement {
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
@@ -34,6 +28,17 @@ class ZikoUIElement {
       this.target = element.parentElement;
     }
     if(element)this.__ele__ = element;
+    compose(
+      this, 
+      DomMethods,
+      IndexingMethods,
+      EventsMethodes
+    )
+    // if(false){
+    //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
+    //     compose(this, ExternalMethods);
+    //   });
+    // }
     this.cache = {
       name,
       parent:null,
@@ -77,7 +82,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()
+    element && globalThis.__Ziko__.__Config__.default.render && this?.render?.()
     if(
       // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
       // && 
@@ -99,6 +104,10 @@ class ZikoUIElement {
   get isZikoUIElement(){
     return true;
   }
+  register(){
+
+    return this;
+  }
   get st(){
     return this.cache.style;
   }
@@ -162,75 +171,6 @@ class ZikoUIElement {
     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 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) {
-        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?.isZikoUIElement) 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);
@@ -322,41 +262,6 @@ class ZikoUIElement {
   describe(label){
     if(label)this.setAttr("aria-label",label)
   }
-  clear(){
-    this?.items?.forEach(n=>n.unrender());
-    this.element.innerHTML = "";
-    return this;
-  }
-  render(target = this.target) {
-    if(this.isBody)return ;
-    if(target?.isZikoUIElement)target=target.element;
-    this.target=target;
-    this.target?.appendChild(this.element);
-    return this;
-  }
-  unrender(){
-    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);
-    return this;
-  }
-  renderAfter(t = 1) {
-    setTimeout(() => this.render(), t);
-    return this;
-  }
-  unrenderAfter(t = 1) {
-    setTimeout(() => this.unrender(), t);
-    return this;
-  }
-  after(ui){
-    if(ui?.isZikoUIElement) ui=ui.element;
-    this.element?.after(ui)
-    return this;
-  }
-  before(ui){
-    if(ui?.isZikoUIElement) ui=ui.element;
-    this.element?.before(ui)
-    return this;
-  }
   animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
     this.element?.animate(keyframe,{duration, iterations, easing});
     return this;
@@ -419,161 +324,22 @@ class ZikoUIElement {
   get id() {
     return this.element.getAttribute("id");
   }
-  onPtrMove(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onMove(...callbacks);
-    return this;
-  }
-  onPtrDown(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onDown(...callbacks);
-    return this;
-  }
-  onPtrUp(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onUp(...callbacks);
-    return this;
-  }
-  onPtrEnter(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onEnter(...callbacks);
-    return this;
-  }
-  onPtrLeave(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onLeave(...callbacks);
-    return this;
-  }
-  onPtrOut(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onOut(...callbacks);
-    return this;
-  }
-  onPtrCancel(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onCancel(...callbacks);
-    return this;
-  }
   onSwipe(width_threshold, height_threshold,...callbacks){
     if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
     this.events.swipe.onSwipe(...callbacks);
     return this;
   }
-  onMouseMove(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onMove(...callbacks);
-    return this;
-  }
-  onMouseDown(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onDown(...callbacks);
-    return this;
-  }
-  onMouseUp(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onUp(...callbacks);
-    return this;
-  }
-  onMouseEnter(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onEnter(...callbacks);
-    return this;
-  }
-  onMouseLeave(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onLeave(...callbacks);
-    return this;
-  }
-  onMouseOut(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onOut(...callbacks);
-    return this;
-  }
-  onWheel(...callbacks){
-    if(!this.events.wheel)this.events.wheel = useWheelEvent(this);
-    this.events.wheel.onWheel(...callbacks);
-    return this;
-  }
-  onKeyDown(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onDown(...callbacks);
-    return this;
-  }
-  onKeyPress(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onPress(...callbacks);
-    return this;
-  }
-  onKeyUp(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onUp(...callbacks);
-    return this;
-  }
-  onKeysDown({keys=[],callback}={}){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.handleSuccessifKeys({keys,callback});
-    return this;
-  }
-  onDragStart(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onStart(...callbacks);
-    return this;
-  }
-  onDrag(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onDrag(...callbacks);
-    return this;
-  }
-  onDragEnd(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onEnd(...callbacks);
-    return this;
-  }
-  onDrop(...callbacks){
-    if(!this.events.drop)this.events.drop = useDropEvent(this);
-    this.events.drop.onDrop(...callbacks);
-    return this;
-  }
-  onClick(...callbacks){
-    if(!this.events.click)this.events.click = useClickEvent(this);
-    this.events.click.onClick(...callbacks);
-    return this;
-  }
-  onDbClick(...callbacks){
-    if(!this.events.click)this.events.click = useClickEvent(this);
-    this.events.click.onDbClick(...callbacks);
-    return this;
-  }
-  onCopy(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onCopy(...callbacks);
-    return this;
-  }
-  onCut(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onCut(...callbacks);
-    return this;
-  }
-  onPaste(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onPaste(...callbacks);
-    return this;
-  }
-  onSelect(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onSelect(...callbacks);
-    return this;
-  }
-  onFocus(...callbacks){
-    if(!this.events.focus)this.events.focus = useFocusEvent(this);
-    this.events.focus.onFocus(...callbacks);
-    return this;
-  }
-  onBlur(...callbacks){
-    if(!this.events.focus)this.events.focus = useFocusEvent(this);
-    this.events.focus.onFocus(...callbacks);
-    return this;
-  }
+  // To Fix
+  // onKeysDown({keys=[],callback}={}){
+  //   if(!this.events.key)this.events.key = useKeyEvent(this);
+  //   this.events.key.handleSuccessifKeys({keys,callback});
+  //   return this;
+  // }
+  // onSelect(...callbacks){
+  //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+  //   this.events.clipboard.onSelect(...callbacks);
+  //   return this;
+  // }
   on(event_name,...callbacks){
     if(!this.events.custom)this.events.custom = useCustomEvent(this);
     this.events.custom.on(event_name,...callbacks);
@@ -602,25 +368,19 @@ class ZikoUIElement {
     this.observer.intersection.start();
     return this;
   }
-  setFullScreen(set = true, e) {
-    if(!this.element.requestFullscreen){
-      console.error("Fullscreen API is not supported in this browser.");
-      return this;
-    }
-    if (set) this.element.requestFullscreen(e);
-    else globalThis.document.exitFullscreen();
-    return this;
-  }
-  toggleFullScreen(e) {
-    if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-    else globalThis.document.exitFullscreen();
-    return this;
-  }
-  toPdf(){
-    if(__ZikoPdf__){
-
-    }
-    return this;
-  }
+  // setFullScreen(set = true, e) {
+  //   if(!this.element.requestFullscreen){
+  //     console.error("Fullscreen API is not supported in this browser.");
+  //     return this;
+  //   }
+  //   if (set) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
+  // toggleFullScreen(e) {
+  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
 }
 export default ZikoUIElement;

package/src/ui/elements/semantic/index.js

@@ -1,82 +1,42 @@
-import ZikoUIElement from "../ZikoUIElement";
-class ZikoUIMain extends ZikoUIElement{
-    constructor(){
-      super("main","Main");
-    }
-    get isMain(){
-      return true
-    }
-  }
-  class ZikoUIHeader extends ZikoUIElement{
-    constructor(){
-      super("header","Header");
-    }
-    get isHeader(){
-      return true
-    }
-  }
-  class ZikoUINav extends ZikoUIElement{
-    constructor(){
-      super("nav","Nav");
-    }
-    get isNav(){
-      return true
-    }
-  }
-  class ZikoUISection extends ZikoUIElement{
-    constructor(){
-      super("section","Section");
-      this.style({position:"relative"})
-    }
-    get isSection(){
-      return true
-    }
-  }
-  class ZikoUIArticle extends ZikoUIElement{
-    constructor(){
-      super("article","Article");
-    }
-    get isArticle(){
-      return true
-    }
-  }
-  class ZikoUIAside extends ZikoUIElement{
-    constructor(){
-      super("aside","Aside");
-    }
-    get isAside(){
-      return true
-    }
-  }
-  class ZikoUIFooter extends ZikoUIElement{
-    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);
-export{
-  Header,
+import ZikoUIElement from "../ZikoUIElement.js";
+const elements = ['Main', 'Header', 'Nav', 'Section', 'Article', 'Aside', 'Footer']
+
+// Storage for Classes and component functions
+const Classes = {};
+const Components = {};
+
+// Auto-generate Classes and factory functions
+for (let i=0; i<elements.length; i++) {
+  Classes[`ZikoUI${elements[i]}`] = class extends ZikoUIElement {
+    constructor() {
+      super(elements[i].toLowerCase());
+      this.style({ position: "relative" });
+    }
+    get [`is${elements[i]}`]() {
+      return true;
+    }
+  };
+
+  Components[elements[i]] = (...children) =>
+    new Classes[`ZikoUI${elements[i]}`]().append(...children);
+}
+
+export const {
   Main,
+  Header,
+  Nav,
   Section,
   Article,
   Aside,
-  Nav,
-  Footer,
-  ZikoUIHeader,
+  Footer
+} = Components;
+
+export const {
   ZikoUIMain,
+  ZikoUIHeader,
+  ZikoUINav,
   ZikoUISection,
   ZikoUIArticle,
   ZikoUIAside,
-  ZikoUINav,
   ZikoUIFooter
-}
+} = Classes;

package/src/ui/methods/dom.js

@@ -0,0 +1,99 @@
+import { text } from "../elements/text/text.js";
+export const DomMethods = {
+  append(...ele) {
+    __addItem__.call(this, "append", "push", ...ele);
+    return this;
+  },
+  prepend(...ele) {
+    this.__addItem__.call(this, "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?.isZikoUIElement) 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;
+  },
+  clear(){
+    this?.items?.forEach(n=>n.unrender());
+    this.element.innerHTML = "";
+    return this;
+  },
+  render(target = this.target) {
+    if(this.isBody)return ;
+    if(target?.isZikoUIElement)target=target.element;
+    this.target=target;
+    this.target?.appendChild(this.element);
+    return this;
+  },
+  unrender(){
+    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);
+    return this;
+  },
+  renderAfter(t = 1) {
+    setTimeout(() => this.render(), t);
+    return this;
+  },
+  unrenderAfter(t = 1) {
+    setTimeout(() => this.unrender(), t);
+    return this;
+  },
+  after(ui){
+    if(ui?.isZikoUIElement) ui=ui.element;
+    this.element?.after(ui)
+    return this;
+  },
+  before(ui){
+    if(ui?.isZikoUIElement) ui=ui.element;
+    this.element?.before(ui)
+    return this;
+  }
+
+};
+
+function __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 (
+      typeof globalThis?.Node === "function" &&
+      ele[i] instanceof globalThis?.Node
+    )
+      ele[i] = new this.constructor(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) {
+      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;
+}

package/src/ui/methods/events.js

@@ -0,0 +1,39 @@
+import { Events } from "../../events/__Events__";
+import {
+  bindPointerEvent,
+  bindMouseEvent,
+  bindKeyEvent,
+  bindClickEvent,
+  bindDragEvent,
+  bindClipboardEvent,
+  bindFocusEvent,
+  bindWheelEvent
+} from "../../events/index.js";
+
+const binderMap = {
+  ptr: bindPointerEvent,
+  mouse : bindMouseEvent,
+  key: bindKeyEvent,
+  click : bindClickEvent,
+  drag : bindDragEvent,
+  clipboard : bindClipboardEvent,
+  focus : bindFocusEvent,
+  wheel : bindWheelEvent
+};
+
+const EventsMethodes = {};
+
+Object.entries(Events).forEach(([name, eventList]) => {
+  eventList.forEach(event => {
+    const methodName = `on${event}`;
+    EventsMethodes[methodName] = function (...callbacks) {
+      if (!this.events[name]) this.events[name] = binderMap[name.toLowerCase()](this);
+      this.events[name][methodName](...callbacks);
+      return this;
+    };
+  });
+});
+
+
+
+export {EventsMethodes}

package/src/ui/methods/indexing.js

@@ -0,0 +1,15 @@
+export const IndexingMethods = {
+  at(index) {
+    return this.items.at(index);
+  },
+  forEach(callback) {
+    this.items.forEach(callback);
+    return this;
+  },
+  map(callback) {
+    return this.items.map(callback);
+  },
+  find(condition) {
+    return this.items.filter(condition);
+  },
+};

package/src/use/decorators/index.js

@@ -0,0 +1,2 @@
+export * from './use-debounce.js'
+export * from './use-throttle.js'

package/src/use/decorators/use-debounce.js

@@ -0,0 +1,4 @@
+export const useDebounce=(fn,delay=1000)=>{
+    let id;
+    return(...args)=> id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay)
+}

package/src/use/decorators/use-throttle.js

@@ -0,0 +1,9 @@
+export const useThrottle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args)=>{
+        const now=new Date().getTime()
+        if(now-lastTime<delay)return;
+        lastTime=now;
+        fn(...args); 
+    }
+}

package/src/use/index.js

@@ -0,0 +1,3 @@
+export * from './storage/index.js';
+export * from './decorators/index.js';
+export * from './interactions/index.js';

package/src/use/interactions/index.js

@@ -0,0 +1,3 @@
+export * from "./use-channel.js";
+export * from "./use-thread.js";
+export * from "./use-event-emmiter.js"