ziko 0.44.0 → 0.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.44.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

@@ -0,0 +1,39 @@
+class ClickAwayEvent extends Event {
+  constructor(originalEvent, targetElement) {
+    super("clickaway", { bubbles: true, cancelable: true });
+    this.originalEvent = originalEvent;
+    this.targetElement = targetElement;
+  }
+}
+
+function register_click_away_event(element) {
+  console.log(element)
+  function handler(e) {
+    if (!element.contains(e.target)) {
+      const clickAwayEvent = new ClickAwayEvent(e, element);
+      element.dispatchEvent(clickAwayEvent);
+    }
+  }
+
+  globalThis?.document?.addEventListener("click", handler);
+
+  return () => globalThis?.document?.removeEventListener("click", handler);
+  
+}
+
+export{
+    ClickAwayEvent,
+    register_click_away_event
+}
+
+// // Example usage
+// const box = document.querySelector("#my-box");
+
+// const stop = listenClickAway(box);
+
+// box.addEventListener("clickaway", (e) => {
+//   console.log("Clicked outside box!", e);
+// });
+
+// // later, you can stop listening:
+// // stop();

package/src/events/custom-events/index.js

@@ -0,0 +1 @@
+export * from './click-away.js'

package/src/events/custom-events/swipe.js

@@ -0,0 +1,58 @@
+class SwipeEvent extends Event {
+  constructor(type, direction, distX, distY, originalEvent) {
+    super(type, { bubbles: true, cancelable: true });
+    this.direction = direction; // "left" | "right" | "up" | "down"
+    this.distX = distX;
+    this.distY = distY;
+    this.originalEvent = originalEvent;
+  }
+}
+
+function register_swipe_event(element, threshold = 50, restraint = 100, allowedTime = 500) {
+  let startX, startY, startTime, isPointerDown = false;
+  function onPointerDown(e) {
+    startX = e.clientX;
+    startY = e.clientY;
+    startTime = Date.now();
+    isPointerDown = true;
+  }
+  function onPointerUp(e) {
+    if (!isPointerDown) return;
+    isPointerDown = false;
+
+    const distX = e.clientX - startX;
+    const distY = e.clientY - startY;
+    const elapsedTime = Date.now() - startTime;
+    let direction = null;
+    let eventName = null;
+
+    if (elapsedTime <= allowedTime) {
+      if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
+        direction = distX < 0 ? "left" : "right";
+        eventName = "swipe" + direction;
+      } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
+        direction = distY < 0 ? "up" : "down";
+        eventName = "swipe" + direction;
+      }
+    }
+
+    if (eventName && direction) {
+      element.dispatchEvent(
+        new SwipeEvent(eventName, direction, distX, distY, e),
+      );
+    }
+  }
+
+  element.addEventListener("pointerdown", onPointerDown, false);
+  element.addEventListener("pointerup", onPointerUp, false);
+
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown, false);
+    element.removeEventListener("pointerup", onPointerUp, false);
+  };
+}
+
+export{
+    SwipeEvent,
+    register_swipe_event
+}

package/src/events/custom-events/view.js

@@ -0,0 +1,43 @@
+class ViewEvent extends Event {
+    constructor(type, detail) {
+    super(type, { bubbles: true, cancelable: true });
+    this.detail = detail;
+    }
+}
+
+function register_view_event(element, { intersection = true, resize = true, threshold = 0 } = {}) {
+    let intersectionObserver, resizeObserver;
+    if (intersection) {
+        intersectionObserver = new IntersectionObserver(entries => {
+            for (let entry of entries) {
+            const type = entry.isIntersecting ? "enterView" : "exitView";
+            element.dispatchEvent(new ViewEvent(type, entry));
+            }
+        }, { threshold });
+        intersectionObserver.observe(element);
+    }
+    if (resize) {
+        resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+            const { width, height } = entry.contentRect;
+            element.dispatchEvent(new ViewEvent("resizeView", { width, height, entry }));
+            }
+        });
+        resizeObserver.observe(element);
+    }
+    return () => {
+        if (intersectionObserver) {
+            intersectionObserver.unobserve(element);
+            intersectionObserver.disconnect();
+        }
+        if (resizeObserver) {
+            resizeObserver.unobserve(element);
+            resizeObserver.disconnect();
+        }
+    };
+}
+
+export{
+    ViewEvent,
+    register_view_event
+}

package/src/events/index.js

@@ -1,15 +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 "./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});   
-}