ziko 0.0.6 → 0.0.8

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Apr 13 2024 14:35:44 GMT+0000 (UTC)
+  Date : Mon May 20 2024 20:27:08 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
@@ -16,10 +16,6 @@
 
   class ZikoMath {}
 
-  /** @module Math */
-   /**
-   * @class
-   */
   class Complex extends ZikoMath{
       constructor(a = 0, b = 0) {
           super();
@@ -183,13 +179,6 @@
           return "<span>" + this.a + " + i * " + this.b + "</span>";
       }
   }
-   /**
-   * Performs complex number operations on numbers, arrays, ArrayBuffers, or Matrices.
-   * @param {number|number[]|ArrayBuffer|Matrix} a 
-   * @param {number|number[]|ArrayBuffer|Matrix} b
-   * @param {number|number[]|ArrayBuffer|Matrix} b
-   * @returns {Complex|Complex[]}
-   */
   const complex=(a,b)=>{
       if((a instanceof Array||ArrayBuffer.isView(a)) && (b instanceof Array||ArrayBuffer.isView(a)))return a.map((n,i)=>complex(a[i],b[i]));
       if(a instanceof Matrix && b instanceof Matrix){
@@ -7203,8 +7192,8 @@
   //import { debounce,throttle} from "../../Data/decorators.js";
 
   class ZikoUIInput extends ZikoUIElement {
-    constructor(value = "",datalist) {
-      super();
+    constructor(name , value = "",datalist) {
+      super("input",name);
       this.element = document.createElement("input");
       Object.assign(this.events,{input:null});
       this.setValue(value);
@@ -7279,7 +7268,7 @@
   }
   class ZikoUIInputSearch extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputSearch");
       this._setType("search");
       this.Length = 0;
     }
@@ -7316,7 +7305,7 @@
   }
   class ZikoUIInputNumber extends ZikoUIInput {
     constructor(min, max ,step = 1) {
-      super();
+      super("inpuNumber");
       this._setType("number");
       this.setMin(min).setMax(max).setStep(step);
     }
@@ -7338,14 +7327,14 @@
   }
   class ZikoUIInputSlider extends ZikoUIInputNumber {
     constructor(val = 0, min = 0, max = 10, step = 1) {
-      super();
+      super("inputSlider");
       this._setType("range");
       this.setMin(min).setMax(max).setValue(val).setStep(step);
     }
   }
   class ZikoUIInputColor extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputColor");
       this._setType("color");
       this.background(this.value);
       this.onInput(() => this.background(this.value));
@@ -7353,37 +7342,37 @@
   }
   class ZikoUIInputPassword extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputPassword");
       this._setType("password");
     }
   }
   class ZikoUIInputEmail extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputEmail");
       this._setType("email");
     }
   }
   class ZikoUIInputTime extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputTime");
       this._setType("time");
     }
   }
   class ZikoUIInputDate extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputDate");
       this._setType("date");
     }
   }
   class ZikoUIInputDateTime extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputDateTime");
       this._setType("datetime-local");
     }
   }
   class ZikoUIInputCheckbox extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputCheckbox");
       this._setType("checkbox");
       this.cursor("pointer");
     }
@@ -7401,7 +7390,7 @@
   }
   class ZikoUIInputRadio extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputRadio");
       this._setType("radio");
       this.cursor("pointer");
     }
@@ -7421,7 +7410,7 @@
 
   class ZikoUIInputImage extends ZikoUIElement {
     constructor(text = "File") {
-      super();
+      super("inputImage");
       this._aux_element = btn(text).setTarget(this.Target);
       this.element = document.createElement("input");
       this.element.setAttribute("type", "file");
@@ -9940,6 +9929,39 @@
       init:()=>document.documentElement.setAttribute("data-engine","zikojs")
   };
 
+  class ZikoUIComponent extends HTMLElement{
+      constructor(){
+          super();
+          this.shadowDOM = this.attachShadow({ mode: 'open' });
+          this.wrapper=document.createElement("div");
+      }
+      connectedCallback() {
+          this.setAttribute('role', 'region');
+          this.setAttribute('data-engine',"zikojs");
+          this.shadowDOM.append(this.wrapper);
+          this.observeContentChanges();
+      }
+      observeContentChanges() {
+          const observer = new MutationObserver((mutations) => {
+              mutations.forEach((mutation) => {
+                  if (mutation.type === 'childList' || mutation.type === 'characterData') {
+                      this.wrapper.innerHTML="";
+                      __Ziko__.__Config__.setDefault({ target: this.wrapper });
+                      globalThis.eval(this.innerHTML);
+                  }
+              });
+          });
+          observer.observe(this, { childList: true, subtree: true, characterData: true });
+      }
+
+      disconnectedCallback() {
+          console.log('ZikoUIComponent removed from page.');
+      }
+  }
+  if(globalThis.document){
+      globalThis.customElements.define('ziko-ui', ZikoUIComponent);
+  }
+
   class ZikoSeo{
       constructor(app){
           this.app=app;
@@ -10123,6 +10145,7 @@
   exports.ZikoUIBr = ZikoUIBr;
   exports.ZikoUICanvas = ZikoUICanvas;
   exports.ZikoUICodeNote = ZikoUICodeNote;
+  exports.ZikoUIComponent = ZikoUIComponent;
   exports.ZikoUIElement = ZikoUIElement;
   exports.ZikoUIFigure = ZikoUIFigure;
   exports.ZikoUIFooter = ZikoUIFooter;