ziko 0.45.2 → 0.45.4

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Sep 01 2025 13:22:11 GMT+0100 (UTC+01:00)
+  Date : Thu Sep 04 2025 20:47:52 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1207,11 +1207,11 @@ class UIElementCore extends UINode{
       switch(type){
         case "html" : {
           element = globalThis?.document?.createElement(element);
-          console.log('1');
+          // console.log('1')
         } break;
         case "svg" : {
           element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
-          console.log('2');
+          // console.log('2')
         } break;
         default : throw Error("Not supported")
       }
@@ -1673,6 +1673,13 @@ function unrender(){
   else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
   return this;
 }
+function replaceElementWith(new_element){
+    this.cache.element.replaceWith(new_element);
+    this.cache.element = new_element;
+
+    // To do : Dispose Events and States 
+    return this
+}
 function renderAfter(t = 1) {
   setTimeout(() => this.render(), t);
   return this;
@@ -1703,6 +1710,7 @@ var DomMethods = /*#__PURE__*/Object.freeze({
     remove: remove,
     render: render,
     renderAfter: renderAfter,
+    replaceElementWith: replaceElementWith,
     unrender: unrender,
     unrenderAfter: unrenderAfter
 });
@@ -3124,7 +3132,7 @@ const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQ
 let UIElement$1 = class UIElement extends UIElementCore{
   constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super();
-    console.log({type});
+    // console.log({type})
     // console.log(this)
     register_to_class(
       this, 
@@ -3134,7 +3142,7 @@ let UIElement$1 = class UIElement extends UIElementCore{
       IndexingMethods, 
       EventsMethodes
     );
-    this.init(element, name, type, render);
+    if(element)this.init(element, name, type, render);
   }
   get element(){
     return this.cache.element;
@@ -3424,13 +3432,13 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html';
     if(SVGTags.includes(tag)) type = 'svg';
-    console.log(type);
+    // console.log(type)
     return (...args)=>{
       // Fix undefined
       // console.log(isStateGetter(args[0]))
       // console.log(!!args)
       if(args.length === 0) {
-        console.log('length 0');
+        // console.log('length 0')
         return new UIElement$1({element : tag, name : tag, type})
       }
       if(
@@ -3698,6 +3706,38 @@ function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
     );
 }
 
+class UISwitch extends UIElement$1{
+    constructor(key, cases){
+        super();
+        this.key = key; 
+        this.cases = cases;
+        this.init();
+    }
+    init(){
+        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unrender());
+        super.init(this.current.element);
+    }
+    get current(){
+        const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default';
+        return this.cases[matched]
+    }
+    updateKey(key){
+        this.key = key;
+        this.replaceElementWith(this.current.element);
+        // this.cache.element.replaceWith(this.current.element)
+        // this.cache.element = this.current.element;
+        return this;
+    }
+    
+}
+
+const Switch=({key, cases})=> new UISwitch(key, cases);
+
+// export const Switch=({key, cases}) => {
+//     const matched = Object.keys(cases).find(n => n == key) ?? 'default';
+//     return this.cases[matched]()
+// }
+
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
 const svg2ascii=svg=>btoa(svg2str(svg));
 const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
@@ -5892,4 +5932,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.45.2",
+  "version": "0.45.4",
   "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/ui/__methods__/dom.js

@@ -47,6 +47,13 @@ export function unrender(){
   else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
   return this;
 }
+export function replaceElementWith(new_element){
+    this.cache.element.replaceWith(new_element)
+    this.cache.element = new_element;
+
+    // To do : Dispose Events and States 
+    return this
+}
 export function renderAfter(t = 1) {
   setTimeout(() => this.render(), t);
   return this;

package/src/ui/constructors/UIElement.js

@@ -18,7 +18,7 @@ import {
 class UIElement extends UIElementCore{
   constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super()
-    console.log({type})
+    // console.log({type})
     // console.log(this)
     register_to_class(
       this, 
@@ -28,7 +28,7 @@ class UIElement extends UIElementCore{
       IndexingMethods, 
       EventsMethodes
     );
-    this.init(element, name, type, render)
+    if(element)this.init(element, name, type, render)
   }
   get element(){
     return this.cache.element;

package/src/ui/constructors/UIElementCore.js

@@ -11,11 +11,11 @@ class UIElementCore extends UINode{
       switch(type){
         case "html" : {
           element = globalThis?.document?.createElement(element);
-          console.log('1')
+          // console.log('1')
         }; break;
         case "svg" : {
           element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
-          console.log('2')
+          // console.log('2')
         }; break;
         default : throw Error("Not supported")
       }

package/src/ui/index.js

@@ -7,4 +7,5 @@ export * from './flex/index.js';
 export * from './suspense/index.js';
 export * from './wrappers/index.js';
 // export * from './graphics/index.js'
-export * from './web-component/index.js'
+export * from './web-component/index.js'
+export * from './logic/index.js'

package/src/ui/logic/index.js

@@ -0,0 +1 @@
+export * from './switch/index.js'

package/src/ui/logic/switch/index.js

@@ -0,0 +1,38 @@
+import { UIElement } from "../../constructors/UIElement.js";
+
+class UISwitch extends UIElement{
+    constructor(key, cases){
+        super()
+        this.key = key; 
+        this.cases = cases;
+        this.init()
+    }
+    init(){
+        Object.values(this.cases).filter(n=>n != this.current).forEach(n=>n.unrender())
+        super.init(this.current.element)
+    }
+    get current(){
+        const matched = Object.keys(this.cases).find(n => n == this.key) ?? 'default'
+        return this.cases[matched]
+    }
+    updateKey(key){
+        this.key = key;
+        this.replaceElementWith(this.current.element)
+        // this.cache.element.replaceWith(this.current.element)
+        // this.cache.element = this.current.element;
+        return this;
+    }
+    
+}
+
+const Switch=({key, cases})=> new UISwitch(key, cases)
+
+export{
+    UISwitch, 
+    Switch
+}
+
+// export const Switch=({key, cases}) => {
+//     const matched = Object.keys(cases).find(n => n == key) ?? 'default';
+//     return this.cases[matched]()
+// }

package/src/ui/tags/index.js

@@ -19,13 +19,13 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html'
     if(SVGTags.includes(tag)) type = 'svg'
-    console.log(type)
+    // console.log(type)
     return (...args)=>{
       // Fix undefined
       // console.log(isStateGetter(args[0]))
       // console.log(!!args)
       if(args.length === 0) {
-        console.log('length 0')
+        // console.log('length 0')
         return new UIElement({element : tag, name : tag, type})
       }
       if(