ziko 0.44.0 → 0.45.1

package/src/ui/__methods__/dom.js

@@ -1,115 +1,69 @@
 import { text } from "../text/index.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;
-  }
-
-};
-
-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]),
-        );
-      }
+import { __addItem__ } from "./utils/index.js";
+export function append(...ele) {
+  __addItem__.call(this, "append", "push", ...ele);
+  return this;
+}
+export function prepend(...ele) {
+  this.__addItem__.call(this, "prepend", "unshift", ...ele);
+  return this;
+}
+export function 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]);
     }
-  }
-  this.maintain();
   return this;
 }
+export function remove(...ele) {
+  const remove = (ele) => {
+    if (typeof ele === "number") ele = this.items[ele];
+    if (ele?.isUIElement) 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;
+}
+export function clear(){
+  this?.items?.forEach(n=>n.unrender());
+  this.element.innerHTML = "";
+  return this;
+}
+export function render(target = this.target) {
+  if(this.isBody)return ;
+  if(target?.isUIElement)target=target.element;
+  this.target=target;
+  this.target?.appendChild(this.element);
+  return this;
+}
+export function 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;
+}
+export function renderAfter(t = 1) {
+  setTimeout(() => this.render(), t);
+  return this;
+}
+export function unrenderAfter(t = 1) {
+  setTimeout(() => this.unrender(), t);
+  return this;
+}
+export function after(ui){
+  if(ui?.isUIElement) ui=ui.element;
+  this.element?.after(ui)
+  return this;
+}
+export function before(ui){
+  if(ui?.isUIElement) ui=ui.element;
+  this.element?.before(ui)
+  return this;
+}
+
+

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?.tagName !== "svg") 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
+}