ziko 0.45.0 → 0.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",

package/src/__helpers__/register/index.js

@@ -1,6 +1,8 @@
 import { register_to_class } from "./register-to-class.js";
-import { register_to_instance } from "./register-to-instance";
+import { register_to_instance } from "./register-to-instance"; // Not Overridable
 export const register = (target, ...mixins) => {
+  console.log(target)
+  // return register_to_class(target, ...mixins)
   if(typeof target === 'function') register_to_class(target, ...mixins)
   else register_to_instance(target, ...mixins)
   }

package/src/__helpers__/register/register-to-instance.js

@@ -1,18 +1,30 @@
 export function register_to_instance(target, ...mixins){
+    console.log('register to instance')
     mixins.forEach(n => _register_to_instance_(target, n))
 }
 function _register_to_instance_(instance, mixin) {
   const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
   for (const key of Reflect.ownKeys(descriptors)) {
     const desc = descriptors[key];
-
     if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(instance, key, desc);
+      Object.defineProperty(instance, key, {
+        ...desc,
+        configurable: true // 🔑 make it replaceable
+      });
     } else if (typeof desc.value === 'function') {
-      instance[key] = desc.value.bind(instance);
+      Object.defineProperty(instance, key, {
+        value: desc.value.bind(instance),
+        writable: true,     // 🔑 allow reassignment
+        configurable: true, // 🔑 allow redefinition
+        enumerable: false
+      });
     } else {
-      instance[key] = desc.value;
+      Object.defineProperty(instance, key, {
+        value: desc.value,
+        writable: true,
+        configurable: true,
+        enumerable: true
+      });
     }
   }
 }

package/src/app/spa.js

@@ -13,7 +13,7 @@ class ZikoSPA extends ZikoApp{
     }
     clear(){
         [...this.routes].forEach(n=>{
-            !isDynamic(n[0]) && n[1]?.isZikoUIElement && n[1].unrender()
+            !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unrender()
         })   
         // this.wrapper.clear();
         return this;
@@ -26,10 +26,10 @@ class ZikoSPA extends ZikoApp{
             element = callback.call(this,params)
         }
         else {
-            callback?.isZikoUIElement && callback.render(this.wrapper); 
+            callback?.isUIElement && callback.render(this.wrapper); 
             if(typeof callback === "function") element = callback();  
         }
-        if(element?.isZikoUIElement) element.render(this.wrapper);
+        if(element?.isUIElement) element.render(this.wrapper);
         // if(element?.isZikoApp) element.render(this.wrapper);
         if(element instanceof Promise){
             element.then(e=>e.render(this.wrapper))

package/src/app/ziko-app.js

@@ -21,7 +21,7 @@ class ZikoApp {
         return this;
     }
     setWrapper(wrapper){
-        if(wrapper?.isZikoUIElement) this.wrapper = wrapper;
+        if(wrapper?.isUIElement) this.wrapper = wrapper;
         else if(typeof wrapper === "function") this.wrapper = wrapper();
         return this;
     }

package/src/events/__Events__.js

@@ -1,7 +1,8 @@
 const Events = {
     'Click' : [
         'Click',
-        'DblClick'
+        'DblClick',
+        'ClickAway'
     ],
     'Ptr' : [
         'PtrMove',

package/src/events/binders/click.js

@@ -0,0 +1,20 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
+// import { register_click_away_event } from "./custom-events/click-away.js";
+class ZikoEventClick extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Click, details_setter, customizer);
+        // register_click_away_event(target.element)
+    }
+}
+function details_setter(){
+    if(this.currentEvent==="click") this.dx = 0
+    else this.dx = 1
+    // console.log(this.currentEvent)
+}
+const bind_click_event = (target, customizer) => new ZikoEventClick(target, customizer)
+
+export{
+    bind_click_event,
+    ZikoEventClick
+}

package/src/events/binders/clipboard.js

@@ -0,0 +1,16 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
+class ZikoEventClipboard extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Clipboard, details_setter, customizer)
+    }
+}
+function details_setter(){
+
+}
+const bind_clipboard_event = (target, customizer) => new ZikoEventClipboard(target, customizer)
+
+export{
+    bind_clipboard_event,
+    ZikoEventClipboard
+}

package/src/events/{custom-event.js → binders/custom-event.js}

@@ -1,4 +1,4 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
 class ZikoEventCustom extends __ZikoEvent__{
     constructor(target, events, customizer){
         super(target, events, details_setter, customizer)

package/src/events/binders/drag.js

@@ -0,0 +1,16 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
+class ZikoEventDrag extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Drag, details_setter, customizer)
+    }
+}
+function details_setter(){
+
+}
+const bind_drag_event = (target, customizer) => new ZikoEventDrag(target, customizer)
+
+export{
+    bind_drag_event,
+    ZikoEventDrag
+}

package/src/events/binders/focus.js

@@ -0,0 +1,16 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
+class ZikoEventFocus extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Focus, details_setter, customizer)
+    }
+}
+function details_setter(){
+
+}
+const bind_focus_event = (target, customizer) => new ZikoEventFocus(target, customizer)
+
+export{
+    bind_focus_event,
+    ZikoEventFocus
+}

package/src/events/{hash.js → binders/hash.js}

@@ -1,5 +1,5 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
 class ZikoEventHash extends __ZikoEvent__{
     constructor(target, customizer){
         super(target, Events.Hash, details_setter, customizer)

package/src/events/binders/index.js

@@ -0,0 +1,16 @@
+export * from "./click.js";
+export * from "./clipboard.js";
+export * from "./custom-event.js";
+export * from "./drag.js";
+export * from "./focus.js";
+export * from "./hash.js";
+export * from "./key.js";
+export * from "./mouse.js";
+export * from "./pointer.js";
+export * from "./touch.js";
+export * from "./wheel.js";
+
+
+
+
+export * from './custom-event.js'

package/src/events/{key.js → binders/key.js}

@@ -1,5 +1,5 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
 class ZikoEventKey extends __ZikoEvent__{
     constructor(target, customizer){
         super(target, Events.Key, details_setter, customizer)
@@ -19,9 +19,9 @@ function details_setter(){
 
     }
 }
-const bindKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer)
+const bind_key_event = (target, customizer) => new ZikoEventKey(target, customizer)
 
 export{
-    bindKeyEvent,
+    bind_key_event,
     ZikoEventKey
 }

package/src/events/binders/mouse.js

@@ -0,0 +1,16 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
+class ZikoEventMouse extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Mouse, details_setter, customizer)
+    }
+}
+function details_setter(){
+
+}
+const bind_mouse_event = (target, customizer) => new ZikoEventMouse(target, customizer)
+
+export{
+    bind_mouse_event,
+    ZikoEventMouse
+}

package/src/events/{pointer.js → binders/pointer.js}

@@ -1,5 +1,5 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
 class ZikoEventPointer extends __ZikoEvent__{
     constructor(target, customizer){
         super(target, Events.Ptr, details_setter, customizer);
@@ -39,9 +39,9 @@ function details_setter(){
     // else this.dx = 1
     // console.log(this.currentEvent)
 }
-const bindPointerEvent = (target, customizer) => new ZikoEventPointer(target, customizer)
+const bind_pointer_event = (target, customizer) => new ZikoEventPointer(target, customizer)
 
 export{
-    bindPointerEvent,
+    bind_pointer_event,
     ZikoEventPointer
 }

package/src/events/{touch.js → binders/touch.js}

@@ -1,5 +1,5 @@
-import { __ZikoEvent__ } from "./__ZikoEvent__.js";
-import { Events } from "./__Events__.js";
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
 class ZikoEventTouch extends __ZikoEvent__{
     constructor(target, customizer){
         super(target, Events.Touch, details_setter, customizer)

package/src/events/binders/wheel.js

@@ -0,0 +1,16 @@
+import { __ZikoEvent__ } from "../__ZikoEvent__.js";
+import { Events } from "../__Events__.js";
+class ZikoEventWheel extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Wheel, details_setter, customizer)
+    }
+}
+function details_setter(){
+
+}
+const bind_wheel_event = (target, customizer) => new ZikoEventWheel(target, customizer)
+
+export{
+    bind_wheel_event,
+    ZikoEventWheel
+}

package/src/events/custom-events/click-away.js

@@ -7,6 +7,7 @@ class ClickAwayEvent extends Event {
 }
 
 function register_click_away_event(element) {
+  console.log(element)
   function handler(e) {
     if (!element.contains(e.target)) {
       const clickAwayEvent = new ClickAwayEvent(e, element);

package/src/events/index.js

@@ -1,17 +1,3 @@
-export * from "./click.js";
-export * from "./clipboard.js";
-export * from "./custom-event.js";
-export * from "./drag.js";
-export * from "./focus.js";
-export * from "./hash.js";
-export * from "./key.js";
-export * from "./mouse.js";
-export * from "./pointer.js";
-export * from "./touch.js";
-export * from "./wheel.js";
-
+export * from './binders/index.js'
 export * from "./__ZikoEvent__.js";
-export * from "./utils.js";
-
-
-export * from './custom-event.js'
+export * from "./utils.js";

package/src/events/types/clipboard.d.ts

@@ -12,9 +12,9 @@ declare class ZikoEventClipboard extends __ZikoEvent__ {
 
 }
 
-declare const bindClipboardEvent: (target: UIElement, customizer?: Function) => ZikoEventClipboard;
+declare const bind_clipboard_event: (target: UIElement, customizer?: Function) => ZikoEventClipboard;
 
 export {
   ZikoEventClipboard,
-  bindClipboardEvent,
+  bind_clipboard_event,
 };

package/src/events/types/focus.d.ts

@@ -11,9 +11,9 @@ declare class ZikoEventFocus extends __ZikoEvent__ {
 
 }
 
-declare const bindFocusEvent: (target: UIElement, customizer?: Function) => ZikoEventFocus;
+declare const bind_focus_event: (target: UIElement, customizer?: Function) => ZikoEventFocus;
 
 export {
   ZikoEventFocus,
-  bindFocusEvent,
+  bind_focus_event,
 };

package/src/events/types/pointer.d.ts

@@ -37,9 +37,9 @@ declare class ZikoEventPointer extends __ZikoEvent__ implements PointerEventMeth
 
 }
 
-declare const bindPointerEvent: (target: UIElement, customizer?: Function) => ZikoEventPointer;
+declare const bind_pointer_event: (target: UIElement, customizer?: Function) => ZikoEventPointer;
 
 export {
   ZikoEventPointer,
-  bindPointerEvent,
+  bind_pointer_event,
 };

package/src/lite.js

@@ -0,0 +1,2 @@
+export * from './ui/constructors/UIElement-lite'
+export * from './ui/__methods__/index.js'

package/src/ui/__methods__/attrs.js

@@ -1,49 +1,33 @@
-import { isStateGetter } from "../../hooks/use-state.js";
-import { 
-  is_camelcase,
-  camel2hyphencase
- } from '../../data/string/index.js'
+import { _set_attrs_ } from "./utils/index.js";
+// import { 
+//   is_camelcase,
+//   camel2hyphencase
+//  } from '../../data/string/index.js'
 
-// To Do add getter, watchAttr
-export const AttrsMethods = {
-  setAttr(name, value) {
-    if(name instanceof Object){
-      const [names,values]=[Object.keys(name),Object.values(name)];
-      for(let i=0;i<names.length;i++){
-        if(values[i] instanceof Array)value[i] = values[i].join(" ");
-        _set_attrs_.call(this, names[i], values[i])
-      }
+export function setAttr(name, value) {
+  if(name instanceof Object){
+    const [names,values]=[Object.keys(name),Object.values(name)];
+    for(let i=0;i<names.length;i++){
+      if(values[i] instanceof Array)value[i] = values[i].join(" ");
+      _set_attrs_.call(this, names[i], values[i])
     }
-    else{
-      if(value instanceof Array) value = value.join(" ");
-      _set_attrs_.call(this, name, value)
-    }
-    return this;
-  },
-  removeAttr(...names) {
-    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-    return this;
-  },
-  getAttr(name){
-    name = is_camelcase(name) ? camel2hyphencase(name) : name;
-    return this.element.attributes[name].value;
-  },
-  setContentEditable(bool = true) {
-    this.setAttr("contenteditable", bool);
-    return this;
   }
-};
+  else{
+    if(value instanceof Array) value = value.join(" ");
+    _set_attrs_.call(this, name, value)
+  }
+  return this;
+}
+export function removeAttr(...names) {
+  for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
+  return this;
+}
+export function getAttr(name){
+  name = is_camelcase(name) ? camel2hyphencase(name) : name;
+  return this.element.attributes[name].value;
+}
+export function setContentEditable(bool = true) {
+  this.setAttr("contenteditable", bool);
+  return this;
+}
 
-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/__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 = {};