ziko 0.0.2 → 0.0.5

package/{src → core}/UI/Inputs/Primitives/inputs.js

@@ -13,7 +13,6 @@ class ZikoUIInput extends ZikoUIElement {
     Object.assign(this.events,{input:null})
     this.setValue(value);
     if(datalist)this.linkDatalist(datalist)
-    this.render();
   }
   onInput(...callbacks){
     if(!this.events.input)this.events.input = Input(this);
@@ -124,7 +123,6 @@ class ZikoUIInputNumber extends ZikoUIInput {
     super();
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
-    this.render();
   }
   get value() {
     return +this.element.value;
@@ -147,7 +145,6 @@ class ZikoUIInputSlider extends ZikoUIInputNumber {
     super();
     this._setType("range");
     this.setMin(min).setMax(max).setValue(val).setStep(step);
-    this.render();
   }
 }
 class ZikoUIInputColor extends ZikoUIInput {
@@ -155,7 +152,6 @@ class ZikoUIInputColor extends ZikoUIInput {
     super();
     this._setType("color");
     this.background(this.value);
-    this.render();
     this.onInput(() => this.background(this.value));
   }
 }
@@ -163,35 +159,30 @@ class ZikoUIInputPassword extends ZikoUIInput {
   constructor() {
     super();
     this._setType("password");
-    this.render();
   }
 }
 class ZikoUIInputEmail extends ZikoUIInput {
   constructor() {
     super();
     this._setType("email");
-    this.render();
   }
 }
 class ZikoUIInputTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("time");
-    this.render();
   }
 }
 class ZikoUIInputDate extends ZikoUIInput {
   constructor() {
     super();
     this._setType("date");
-    this.render();
   }
 }
 class ZikoUIInputDateTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("datetime-local");
-    this.render();
   }
 }
 class ZikoUIInputCheckbox extends ZikoUIInput {
@@ -271,7 +262,6 @@ class ZikoUIInputDatalist extends ZikoUIElement {
     super();
     this.element = document.createElement("datalist");
     this.addOptions(...options).setId("ziko-datalist-id"+Random.string(10));
-    this.render();
   }
   addOptions(...options) {
     options.map((n) => this.append(new ZikoUIInputOption(n)));

package/{src → core}/UI/Inputs/Primitives/select.js

@@ -4,7 +4,6 @@ class ZikoUISelect extends ZikoUIElement {
     constructor(){
       super();
       this.element=document.createElement("select");
-      this.render()
     }
     addOptions(...options) {
       options.map(n => this.append(new ZikoUIInputOption(n)));

package/{src → core}/UI/Inputs/Primitives/textarea.js

@@ -5,7 +5,6 @@ class ZikoUITextArea extends ZikoUIElement {
       super();
       this.element = document.createElement("textarea");
       //Object.assign(this,inputComposer.call(this));
-      this.render();
     }
     get value(){
       return this.element.textContent;

package/{src → core}/UI/List/index.js

@@ -5,7 +5,6 @@ class ZikoUILI extends ZikoUIElement{
     super();
     this.element=document.createElement("li");
     this.append(UI);
-    this.render()
   }
 }
 class ZikoUIList extends ZikoUIElement {
@@ -105,7 +104,6 @@ class ZikoUIOList extends ZikoUIList{
   constructor(...arr){
     super("ol","ol");
     this.append(...arr);
-    this.render();
   }
   type(tp = 1) {
     this.element.setAttribute("type", tp);
@@ -120,7 +118,6 @@ class ZikoUIUList extends ZikoUIList{
   constructor(...arr){
     super("ul","ul");
     this.append(...arr);
-    this.render();
   }
 }
 const li=UI=>new ZikoUILI(UI)

package/{src → core}/UI/Media/Audio/index.js

@@ -3,8 +3,10 @@ class ZikoUIAudio extends ZikoUIElement {
     constructor(src) {
       super("audio","audio");
       this.element.setAttribute("src", src);
-      this.render();
-      this.controls();
+      this.useControls();
+    }
+    get t(){
+      return this.element.currentTime;  
     }
     useControls(enabled = true) {
       this.element.controls = enabled;
@@ -18,6 +20,16 @@ class ZikoUIAudio extends ZikoUIElement {
       this.element.pause();
       return this;
     }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay(){
+
+    }
+    onPause(){
+
+    }
   }
 const audio = (src) => new ZikoUIAudio(src);
 export {

package/{src → core}/UI/Media/Image/figure.js

@@ -7,7 +7,6 @@ class ZikoUIFigure extends ZikoUIElement{
       this.caption.append(caption.element)
       this.element.append(this.img);
       this.element.append(this.caption);
-      this.render();
     }
 }
 const figure =(image,caption) =>new ZikoUIFigure(image,caption);

package/{src → core}/UI/Media/Image/image.js

@@ -8,7 +8,6 @@ class ZikoUIImage extends ZikoUIElement {
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
       this.style({ border: "1px solid black", width: w, height: h });
-      this.render();
     }
      updateSrc(url){
       this.value=url;

package/{src → core}/UI/Media/Video/index.js

@@ -7,7 +7,9 @@ class ZikoUIVideo extends ZikoUIElement {
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
       this.style({ width: w, height: h });
-      this.render();
+    }
+    get t(){
+      return this.element.currentTime;  
     }
     useControls(enabled = true) {
       this.element.controls = enabled;
@@ -29,6 +31,16 @@ class ZikoUIVideo extends ZikoUIElement {
       this.element.requestPictureInPicture(e);
       return this;
     }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay(){
+
+    }
+    onPause(){
+
+    }
   }
 const video = (src, width, height) => new ZikoUIVideo(src, width, height);
 export {

package/{src → core}/UI/Misc/index.js

@@ -1,29 +1,25 @@
 import ZikoUIElement from "../ZikoUIElement.js";
 class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
-    super(element,"ZikoHtml");
-      this.render();
+    super(element,"html");
   }
 }
 class ZikoUIBr extends ZikoUIElement {
     constructor() {
       super("br","br");
-        this.render();
-        delete this.append
+          delete this.append
     }
   }
   class ZikoUIHr extends ZikoUIElement {
     constructor() {
       super("hr","hr");
-        this.render();
-        delete this.append
+          delete this.append
     }
   }
   class ZikoUILink extends ZikoUIElement{
     constructor(href){
       super("a","link");
       this.setHref(href);
-      this.render();
     }
     setHref(href){
       this.element.href=href;
@@ -34,9 +30,9 @@ class ZikoUIBr extends ZikoUIElement {
   const brs = (n=1)=> new Array(n).fill(new ZikoUIBr());
   const hrs = (n=1)=> new Array(n).fill(new ZikoUIHr());
   const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
-  const ZikoHtml=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
+  const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
 export{
-  ZikoHtml,
+  html,
   br,
   hr,
   brs,

package/{src → core}/UI/Semantic/index.js

@@ -2,45 +2,38 @@ import ZikoUIElement from "../ZikoUIElement.js";
 class ZikoUIMain extends ZikoUIElement{
     constructor(){
       super("main","Main");
-      this.render();
     }
   }
   class ZikoUIHeader extends ZikoUIElement{
     constructor(){
       super("header","Header");
-      this.render();
     }
   }
   class ZikoUINav extends ZikoUIElement{
     constructor(){
       super("nav","Nav");
-      this.render();
     }
   }
   class ZikoUISection extends ZikoUIElement{
     constructor(){
       super("section","Section");
       this.style({position:"relative"})
-      this.render();
     }
   }
   class ZikoUIArticle extends ZikoUIElement{
     constructor(){
       super("article","Article");
-      this.render();
     }
   }
   class ZikoUIAside extends ZikoUIElement{
     constructor(){
       super("aside","Aside");
-      this.render();
     }
   }
   class ZikoUIFooter extends ZikoUIElement{
     constructor(){
       super("footer","Footer");
       this.element=document.createElement("footer");
-      this.render();
     }
   }
 const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);

package/{src → core}/UI/Table/table.js

@@ -13,7 +13,6 @@ class ZikoUITable extends ZikoUIElement {
         }
         if(body)this.fromMatrix(body);
         if(caption)this.setCaption(caption)
-        this.render();
     }
     get caption(){
         return this.structure.caption;

package/{src → core}/UI/Text/heading.js

@@ -4,7 +4,6 @@ class ZikoUIHeading extends ZikoUIElement {
       super(`h${type}`,`h${type}`);
       this.element = document.createElement("h" + type);
       this.element.textContent = value;
-      this.render();
     }
     get value() {
       return this.element.innerText;

package/{src → core}/UI/Text/p.js

@@ -6,7 +6,6 @@ class ZikoUIParagraphe extends ZikoUIElement {
       super("p","p");
       this.addValue(...value);
       this.style({margin:0,padding:0});
-      this.render();
     }
     addValue(...value) {
       for (let i = 0; i < value.length; i++) {

package/{src → core}/UI/Text/text.js

@@ -8,7 +8,6 @@ class ZikoUIText extends ZikoUIElement {
       this.text = "";
       this.addValue(...value);
       this.st.display("inline-block");
-      this.render();
     }
     clear() {
       this.element.textContent = "";

package/{src → core}/UI/ZikoUIElement.js

@@ -1,13 +1,15 @@
 import { ZikoStyle } from "./Style";
 import { 
-  Pointer, 
+  Pointer,
+  Mouse, 
+  Wheel,
   Key, 
   Drag , 
   Drop, 
   Click , 
   Clipboard ,
   Focus,
-  CustomEvent,
+  customEvent,
 } from "../Reactivity/Events"
 import { 
   WatchIntersection, 
@@ -17,7 +19,8 @@ import { text } from "./Text";
 import { Random } from "../Math/Random";
 class ZikoUIElement {
   constructor(element,name="") {
-    this.target = globalThis.__Target__||globalThis.document.body;
+    //this.target = globalThis.__Target__||globalThis.document.body;
+    this.target = globalThis.__ZikoConfig__.default.target||globalThis.document.body
     if(typeof element === "string") element = globalThis.document.createElement(element);
     this.element = element;
     this.uuid=this.constructor.name+"-"+Random.string(10);
@@ -27,19 +30,16 @@ class ZikoUIElement {
       isRoot:false,
       isHidden: false,
       isFrozzen:false,
-      // transformMatrix:matrix([
-      //   [0,0,0],
-      //   [0,0,0],
-      //   [1,1,0]
-      // ]),
       style: ZikoStyle({}),
       attributes: {},
       filters: {},
-      
+      temp:{}
     };
     this.items = [];
     this.events = {
       ptr:null,
+      mouse:null,
+      Wheel:null,
       key:null,
       drag:null,
       drop:null,
@@ -61,7 +61,8 @@ class ZikoUIElement {
       padding:0,
      });
     this.size("auto", "auto");
-    globalThis.__UI__[this.cache.name]?.push(this)
+    globalThis.__UI__[this.cache.name]?.push(this);
+    this.render(globalThis.__ZikoConfig__.default.render);
   }
   get st(){
     return this.cache.style;
@@ -84,7 +85,7 @@ class ZikoUIElement {
       root=root.parent;
     }
   }
-  clone() {
+  clone(render=false) {
     // Not working For Table 
     const UI = new this.constructor();
     UI.__proto__=this.__proto__;
@@ -93,7 +94,7 @@ class ZikoUIElement {
       UI.append(...items);
     }
     else UI.element=this.element.cloneNode(true);
-    return UI;
+    return UI.render(render);
   }
   style(styles,{target = "parent", maskVector = null } = {}){
     this.st.style(styles,{target,maskVector});
@@ -262,14 +263,17 @@ class ZikoUIElement {
     this.items.forEach(callback);
     return this;
   }
-  filter(condition_callback,if_callback,else_callback){
+  where(condition_callback,if_callback,else_callback){
     this.items.filter(condition_callback).forEach(if_callback)
     return this;
   }
+  filter(condition){
+    return this.items.filter(condition);
+  }
   filterByTextContent(text,exactMatch=false){
     this.items.map(n=>n.render());
     this.items.filter(n=>{
-      const content=n.element.textContent
+      const content=n.element.textContent;
       return !(exactMatch?content===text:content.includes(text))
     }).map(n=>n.render(false));
      return this;
@@ -323,6 +327,41 @@ class ZikoUIElement {
     this.events.ptr.onOut(...callbacks);
     return this;
   }
+  onMouseMove(...callbacks){
+    if(!this.events.mouse)this.events.mouse = Mouse(this);
+    this.events.mouse.onMove(...callbacks);
+    return this;
+  }
+  onMouseDown(...callbacks){
+    if(!this.events.mouse)this.events.mouse = Mouse(this);
+    this.events.mouse.onDown(...callbacks);
+    return this;
+  }
+  onMouseUp(...callbacks){
+    if(!this.events.mouse)this.events.mouse = Mouse(this);
+    this.events.mouse.onUp(...callbacks);
+    return this;
+  }
+  onMouseEnter(...callbacks){
+    if(!this.events.mouse)this.events.mouse = Mouse(this);
+    this.events.mouse.onEnter(...callbacks);
+    return this;
+  }
+  onMouseLeave(...callbacks){
+    if(!this.events.mouse)this.events.mouse = Mouse(this);
+    this.events.mouse.onLeave(...callbacks);
+    return this;
+  }
+  onMouseOut(...callbacks){
+    if(!this.events.mouse)this.events.mouse = Mouse(this);
+    this.events.mouse.onOut(...callbacks);
+    return this;
+  }
+  onWheel(...callbacks){
+    if(!this.events.wheel)this.events.wheel = Wheel(this);
+    this.events.wheel.onWheel(...callbacks);
+    return this;
+  }
   onKeyDown(...callbacks){
     if(!this.events.key)this.events.key = Key(this);
     this.events.key.onDown(...callbacks);
@@ -404,12 +443,12 @@ class ZikoUIElement {
     return this;
   }
   on(event_name,...callbacks){
-    if(!this.events.custom)this.events.custom = CustomEvent(this);
+    if(!this.events.custom)this.events.custom = customEvent(this);
     this.events.custom.on(event_name,...callbacks);
     return this;
   }
   emit(event_name,detail={}){
-    if(!this.events.custom)this.events.custom = CustomEvent(this);
+    if(!this.events.custom)this.events.custom = customEvent(this);
     this.events.custom.emit(event_name,detail);
     return this;
   }
@@ -446,20 +485,6 @@ class ZikoUIElement {
       isVisible: topVisible || bottomVisible || rightVisible || leftVisible,
     };
   }
-
-  
-  // toggleSlide() {}
-
-
-  // Glassmorphism(background = "rgba(255,255,255,0.1)", blur = "1px") {
-  //   this.style({ background: background, backdropFilter: blur });
-  //   return this;
-  // }
-  // Neumorphism(r = "50px", bg = "cyan", box = "13px -13px 49px #5d8fac") {
-  //   this.style({ borderRadius: r, background: bg, boxShadow: box });
-  //   return this;
-  // }
-
   setFullScreen(set = true, e) {
     if(!this.element.requestFullscreen){
       console.error("Fullscreen API is not supported in this browser.");

package/{src → core}/UI/index.js

@@ -14,7 +14,7 @@ import {
     brs,
     hrs,
     link,
-    ZikoHtml
+    html
 } from "./Misc";
 import {
     ol,
@@ -66,7 +66,7 @@ import{
     } from "./Semantic";
 import { Table } from "./Table";
 const UI={
-    ZikoHtml,
+    html,
     text,
     p,
     h1,
@@ -149,6 +149,6 @@ export * from "./Semantic";
 export * from "./Misc";
 export * from "./CustomElement";
 export {
-    ZikoHtml
+    html
 }
 export default UI;

package/{src → core}/index.js

@@ -9,6 +9,7 @@ import {SPA} from "./App/Router";
 import { 
     __UI__,
     __Target__,
+    __ZikoConfig__
  } from "./App/Globals";
 import ZikoUIElement from "./UI/ZikoUIElement.js";
 import { App } from "./App";
@@ -25,7 +26,7 @@ const Ziko={
 }
 globalThis.__Ziko__=Ziko;
 globalThis.__UI__=__UI__;
-globalThis.__Target__=__Target__;
+globalThis.__ZikoConfig__=__ZikoConfig__;
 function ExtractAll(){
     UI.ExtractAll();
     Math.ExtractAll();
@@ -61,6 +62,7 @@ export {
     Data,
     ZikoUIElement,
     SPA,
+    __ZikoConfig__,
     ExtractAll,
     RemoveAll
 };