ziko 0.45.0 → 0.45.2

package/src/ui/__methods__/events.js

@@ -1,24 +1,24 @@
 import { Events } from "../../events/__Events__";
 import {
-  bindPointerEvent,
-  bindMouseEvent,
-  bindKeyEvent,
-  bindClickEvent,
-  bindDragEvent,
-  bindClipboardEvent,
-  bindFocusEvent,
-  bindWheelEvent
-} from "../../events/index.js";
+  bind_pointer_event,
+  bind_mouse_event,
+  bind_key_event,
+  bind_click_event,
+  bind_drag_event,
+  bind_clipboard_event,
+  bind_focus_event,
+  bind_wheel_event
+} from "../../events/binders/index.js";
 
 const binderMap = {
-  ptr: bindPointerEvent,
-  mouse : bindMouseEvent,
-  key: bindKeyEvent,
-  click : bindClickEvent,
-  drag : bindDragEvent,
-  clipboard : bindClipboardEvent,
-  focus : bindFocusEvent,
-  wheel : bindWheelEvent
+  ptr: bind_pointer_event,
+  mouse : bind_mouse_event,
+  key: bind_key_event,
+  click : bind_click_event,
+  drag : bind_drag_event,
+  clipboard : bind_clipboard_event,
+  focus : bind_focus_event,
+  wheel : bind_wheel_event
 };
 
 const EventsMethodes = {};

package/src/ui/__methods__/index.js

@@ -1,5 +1,14 @@
 export * from './attrs.js'
+export * as AttrsMethods from './attrs.js'
+
 export * from './dom.js'
+export * as DomMethods from './dom.js'
+
 export * from './events.js'
+
 export * from './indexing.js'
-export * from './style.js'
+export * as IndexingMethods from './indexing.js'
+
+
+export * from './style.js'
+export * as StyleMethods from './style.js'

package/src/ui/__methods__/indexing.js

@@ -1,15 +1,14 @@
-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);
-  },
-};
+export function at(index) {
+  return this.items.at(index);
+}
+export function forEach(callback) {
+  this.items.forEach(callback);
+  return this;
+}
+export function map(callback) {
+  return this.items.map(callback);
+}
+export function find(condition) {
+  return this.items.filter(condition);
+}
+

package/src/ui/__methods__/style.js

@@ -1,34 +1,32 @@
 import { isStateGetter } from '../../hooks/use-state.js'
-export const StyleMethods = {
-    style(styles){
-        for(let key in styles){
-            const value = styles[key];
-            if(isStateGetter(value)){
-                const getter = value()
-                Object.assign(this.element.style, {[key] : getter.value})
-                getter._subscribe(
-                    (newValue) => {
-                        console.log({newValue})
-                        Object.assign(this.element.style, {[key] : newValue})
-                    },
-                    // this 
-                );
-            }
-            else Object.assign(this.element.style, {[key] : value})
+export function style(styles){
+    for(let key in styles){
+        const value = styles[key];
+        if(isStateGetter(value)){
+            const getter = value()
+            Object.assign(this.element.style, {[key] : getter.value})
+            getter._subscribe(
+                (newValue) => {
+                    console.log({newValue})
+                    Object.assign(this.element.style, {[key] : newValue})
+                },
+                // this 
+            );
         }
-        return this;
-    },
-    size(width, height){
-        return this.style({width, height})
-    },
-    hide(){
+        else Object.assign(this.element.style, {[key] : value})
+    }
+    return this;
+}
+export function size(width, height){
+    return this.style({width, height})
+}
+export function hide(){
 
-    },
-    show(){
+}
+export function show(){
 
-    },
-    animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-        this.element?.animate(keyframe,{duration, iterations, easing});
-        return this;
-    }
-}
+}
+export function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+    this.element?.animate(keyframe,{duration, iterations, easing});
+    return this;
+}

package/src/ui/__methods__/utils/index.js

@@ -0,0 +1,64 @@
+import { isStateGetter } from "../../../hooks/use-state.js";
+import { 
+  is_camelcase,
+  camel2hyphencase
+ } from '../../../data/string/index.js'
+ import { text } from "../../text/index.js";
+export async 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]);
+        // Fix Items Latter
+    if (ele[i] instanceof Function) {
+     const getter = ele[i]();
+      if (getter.isStateGetter) {
+        ele[i] = text(getter.value);
+        getter._subscribe(
+            (newValue) => (ele[i].element.textContent = newValue),
+            ele[i] 
+        );
+        // this.element.appendChild(textNode);
+      }
+    }
+    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
+    if (ele[i]?.isZikoUINode) {
+        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 Promise){
+      const UIEle = await ele[i]
+      UIEle.cache.parent = this;
+      this.element?.[adder](UIEle.element);
+      UIEle.target = this.element;
+      this.items[pusher](UIEle)
+    }
+    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;
+}
+export function _set_attrs_(name, value){
+    if(this.element instanceof globalThis?.SVGAElement) name = is_camelcase(name) ? camel2hyphencase(name) : name;
+    if(this?.attr[name] && this?.attr[name]===value) return;
+    if(isStateGetter(value)){
+        const getter = value()
+        getter._subscribe(
+            (newValue) => this.element?.setAttribute(name, newValue),
+            this 
+        );
+    }
+    else this.element?.setAttribute(name, value)
+    Object.assign(this.cache.attributes, {[name]:value});   
+}

package/src/ui/constructors/UIElement-lite.js

@@ -0,0 +1,10 @@
+import { UIElementCore } from "./UIElementCore";
+class UIElement extends UIElementCore{
+    constructor({element, name, type, render}){
+        super({element, name, type, render})
+    }
+}
+
+export {
+    UIElement
+}

package/src/ui/constructors/UIElement.js

@@ -1,5 +1,5 @@
-import {UINode} from "./UINode.js";
-import { register } from "../../__helpers__/register/index.js";
+import { UIElementCore } from "./UIElementCore.js";
+import { register_to_class } from "../../__helpers__/register/register-to-class.js";
 import { 
   AttrsMethods,
   DomMethods,
@@ -15,24 +15,12 @@ import {
   watchAttr,
   watchChildren
 } from "../../reactivity/index.js"
-// import { Random } from "../../math/index.js";
-import {__init__global__, UIStore} from '../../__ziko__/index.js';
-__init__global__()
-class UIElement extends UINode{
-  constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
+class UIElement extends UIElementCore{
+  constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super()
-    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
-    if(typeof element === "string") {
-      switch(type){
-        case "html" : element = globalThis?.document?.createElement(element); break;
-        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
-        default : throw Error("Not supported")
-      }
-    }
-    else{
-      this.target = element?.parentElement;
-    }
-    register(
+    console.log({type})
+    // console.log(this)
+    register_to_class(
       this, 
       AttrsMethods, 
       DomMethods, 
@@ -40,61 +28,7 @@ class UIElement extends UINode{
       IndexingMethods, 
       EventsMethodes
     );
-    Object.assign(this.cache, {
-      name,
-      isInteractive : [true, false][Math.floor(2*Math.random())],
-      parent:null,
-      isBody:false,
-      isRoot:false,
-      isHidden: false,
-      isFrozzen:false,
-      legacyParent : null,
-      attributes: {},
-      filters: {},
-      temp:{}
-    })
-    this.events = {
-      ptr:null,
-      mouse:null,
-      wheel:null,
-      key:null,
-      drag:null,
-      drop:null,
-      click:null,
-      clipboard:null,
-      focus:null,
-      swipe:null,
-      custom:null,
-    }
-    this.observer={
-      resize:null,
-      intersection:null
-    }
-    if(element) Object.assign(this.cache,{element});
-    // this.uuid = `${this.cache.name}-${Random.string(16)}`
-    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
-    useDefaultStyle && this.style({ 
-      position: "relative",
-      boxSizing:"border-box",
-      margin:0,
-      padding:0,
-      width : "auto",
-      height : "auto"
-     });
-    this.items = new UIStore();
-    globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-    element && render && this?.render?.()
-    if(
-      // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
-      // && 
-      // !globalThis.__Ziko__.__Config__.isSSC
-      // && 
-      this.isInteractive()
-    ){
-      this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-      globalThis.__Ziko__.__HYDRATION__.register(() => this)
-    }
-    globalThis.__Ziko__.__UI__.push(this)
+    this.init(element, name, type, render)
   }
   get element(){
     return this.cache.element;
@@ -102,9 +36,9 @@ class UIElement extends UINode{
   isInteractive(){
     return this.cache.isInteractive;
   }
-  isZikoUIElement(){
-    return true;
-  }
+  // isUIElement(){
+  //   return true;
+  // }
   get st(){
     return this.cache.style;
   }
@@ -144,73 +78,73 @@ class UIElement extends UINode{
   get left(){
     return this.element.getBoundingClientRect().left;
   }
-  clone(render=false) {
-    // UI.__proto__=this.__proto__;
-    // if(this.items.length){
-    //   const items = [...this.items].map(n=>n.clone());
-    //   UI.append(...items);
-    // }
-    // else UI.element=this.element.cloneNode(true);
-    // return UI.render(render);
-  }
-  [Symbol.iterator]() {
-    return this.items[Symbol.iterator]();
-  }
-  maintain() {
-    for (let i = 0; i < this.items.length; i++) {
-      Object.defineProperty(this, i, {
-        value: this.items[i],
-        writable: true,
-        configurable: true,
-        enumerable: false 
-        });
-    }
-  }
-  freeze(freeze){
-    this.cache.isFrozzen=freeze;
-    return this;
-  }
+  // clone(render=false) {
+  //   // UI.__proto__=this.__proto__;
+  //   // if(this.items.length){
+  //   //   const items = [...this.items].map(n=>n.clone());
+  //   //   UI.append(...items);
+  //   // }
+  //   // else UI.element=this.element.cloneNode(true);
+  //   // return UI.render(render);
+  // }
+  // [Symbol.iterator]() {
+  //   return this.items[Symbol.iterator]();
+  // }
+  // maintain() {
+  //   for (let i = 0; i < this.items.length; i++) {
+  //     Object.defineProperty(this, i, {
+  //       value: this.items[i],
+  //       writable: true,
+  //       configurable: true,
+  //       enumerable: false 
+  //       });
+  //   }
+  // }
+  // freeze(freeze){
+  //   this.cache.isFrozzen=freeze;
+  //   return this;
+  // }
   // setTarget(tg) {
   //   if(this.isBody) return ;
-  //   if (tg?.isZikoUIElement) tg = tg.element;
+  //   if (tg?.isUIElement) tg = tg.element;
   //   this.unrender();
   //   this.target = tg;
   //   this.render();
   //   return this;
   // }
-  describe(label){
-    if(label)this.setAttr("aria-label",label)
-  }
-  get children() {
-    return [...this.element.children];
-  }
-  get cloneElement() {
-    return this.element.cloneNode(true);
-  }
-  setClasses(...value) {
-    this.setAttr("class", value.join(" "));
-    return this;
-  }
-  get classes(){
-    const classes=this.element.getAttribute("class");
-    return classes===null?[]:classes.split(" ");
-  }
-  addClass() {
-    /*this.setAttr("class", value);
-        return this;*/
-  }
-  setId(id) {
-    this.setAttr("id", id);
-    return this;
-  }
-  get id() {
-    return this.element.getAttribute("id");
-  }
-  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;
-  }
+  // describe(label){
+  //   if(label)this.setAttr("aria-label",label)
+  // }
+  // get children() {
+  //   return [...this.element.children];
+  // }
+  // get cloneElement() {
+  //   return this.element.cloneNode(true);
+  // }
+  // setClasses(...value) {
+  //   this.setAttr("class", value.join(" "));
+  //   return this;
+  // }
+  // get classes(){
+  //   const classes=this.element.getAttribute("class");
+  //   return classes===null?[]:classes.split(" ");
+  // }
+  // addClass() {
+  //   /*this.setAttr("class", value);
+  //       return this;*/
+  // }
+  // setId(id) {
+  //   this.setAttr("id", id);
+  //   return this;
+  // }
+  // get id() {
+  //   return this.element.getAttribute("id");
+  // }
+  // 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;
+  // }
   // To Fix
   // onKeysDown({keys=[],callback}={}){
   //   if(!this.events.key)this.events.key = useKeyEvent(this);
@@ -232,24 +166,24 @@ class UIElement extends UINode{
     this.events.custom.emit(event_name,detail);
     return this;
   }
-  watchAttr(callback){
-    if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-    return this;
-  }
-  watchChildren(callback){
-    if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-    return this;
-  }
-  watchSize(callback){
-    if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-    this.observer.resize.start();
-    return this;
-  }
-  watchIntersection(callback,config){
-    if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-    this.observer.intersection.start();
-    return this;
-  }
+  // watchAttr(callback){
+  //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
+  //   return this;
+  // }
+  // watchChildren(callback){
+  //   if(!this.observer.children)this.observer.children = watchChildren(this,callback);
+  //   return this;
+  // }
+  // watchSize(callback){
+  //   if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
+  //   this.observer.resize.start();
+  //   return this;
+  // }
+  // watchIntersection(callback,config){
+  //   if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
+  //   this.observer.intersection.start();
+  //   return this;
+  // }
 
 }
 export { UIElement }