ziko 0.0.2 → 0.0.4

package/src/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, 
@@ -27,19 +29,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 +60,7 @@ class ZikoUIElement {
       padding:0,
      });
     this.size("auto", "auto");
-    globalThis.__UI__[this.cache.name]?.push(this)
+    globalThis.__UI__[this.cache.name]?.push(this);
   }
   get st(){
     return this.cache.style;
@@ -84,7 +83,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 +92,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 +261,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 +325,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 +441,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 +483,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/starter/bin/index.js

@@ -1,10 +0,0 @@
-#!/usr/bin/env node
-import path from "path"
-import { fileURLToPath } from 'node:url';
-import { createFolder,copyFolder , runCommand } from "./utils/commands.js";
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const TEMPLATE = path.join(__dirname,"../template");
-const PROJECT_TITLE = process.argv[2]||"zikojs-project";
-createFolder(PROJECT_TITLE);
-copyFolder(TEMPLATE,path.join(process.cwd(),PROJECT_TITLE));
-runCommand(`cd ${PROJECT_TITLE} && npm install`);