ziko 0.0.6 → 0.0.8

package/dist/ziko.mjs

@@ -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
@@ -10,10 +10,6 @@
 
 class ZikoMath {}
 
-/** @module Math */
- /**
- * @class
- */
 class Complex extends ZikoMath{
     constructor(a = 0, b = 0) {
         super();
@@ -177,13 +173,6 @@ class Complex extends ZikoMath{
         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){
@@ -7197,8 +7186,8 @@ class ZikoUITextArea extends ZikoUIElement {
 //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);
@@ -7273,7 +7262,7 @@ class ZikoUIInput extends ZikoUIElement {
 }
 class ZikoUIInputSearch extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputSearch");
     this._setType("search");
     this.Length = 0;
   }
@@ -7310,7 +7299,7 @@ class ZikoUIInputSearch extends ZikoUIInput {
 }
 class ZikoUIInputNumber extends ZikoUIInput {
   constructor(min, max ,step = 1) {
-    super();
+    super("inpuNumber");
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
   }
@@ -7332,14 +7321,14 @@ class ZikoUIInputNumber extends ZikoUIInput {
 }
 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));
@@ -7347,37 +7336,37 @@ class ZikoUIInputColor extends ZikoUIInput {
 }
 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");
   }
@@ -7395,7 +7384,7 @@ class ZikoUIInputCheckbox extends ZikoUIInput {
 }
 class ZikoUIInputRadio extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputRadio");
     this._setType("radio");
     this.cursor("pointer");
   }
@@ -7415,7 +7404,7 @@ class ZikoUIInputRadio extends ZikoUIInput {
 
 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");
@@ -9934,6 +9923,39 @@ const __Config__={
     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;
@@ -10066,4 +10088,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, Events, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, RemoveAll, SPA, Section$1 as Section, Signal, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __Config__, abs, accum, acos, acosh, acot, add, adoc2html, animation, arange, asin, asinh, atan, atan2, atanh, audio, bessel, beta, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, complex, cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, loop, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, rad2deg, radio, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGroupe, svgImage, svgLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useDebounce, useThrottle, video, wait, waitForUIElm, waitForUIElmSync, zeros };
+export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, Events, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, RemoveAll, SPA, Section$1 as Section, Signal, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIComponent, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __Config__, abs, accum, acos, acosh, acot, add, adoc2html, animation, arange, asin, asinh, atan, atan2, atanh, audio, bessel, beta, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, complex, cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, loop, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, rad2deg, radio, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGroupe, svgImage, svgLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useDebounce, useThrottle, video, wait, waitForUIElm, waitForUIElmSync, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
   "keywords": [
     "Zikojs",

package/starter/bin/index.js

@@ -7,4 +7,5 @@ const TEMPLATE = path.join(__dirname,"../template");
 const PROJECT_TITLE = process.argv[2]||"zikojs-project";
 createFolder(PROJECT_TITLE);
 copyFolder(TEMPLATE,path.join(process.cwd(),PROJECT_TITLE));
-runCommand(`cd ${PROJECT_TITLE} && npm install`);
+runCommand(`cd ${PROJECT_TITLE} && npm install`);
+

package/wrapper/react/README.md

@@ -1,26 +0,0 @@
-# Overview
-react-ziko is a tool designed for rendering [ziko](https://github.com/zakarialaoui10/ziko.js) elements within a React application.
-
-# Install 
-```bash
-  npm i react-ziko
-```
-# Usage
-```jsx
-import ZikoUI from "react-ziko";
-import { text } from "ziko";
-const ui = text("Hello World").style({
-    color:"darkblue"
-});
-export default function App() {
-  return (
-    <main>
-      <ZikoUI ui={ui.render(false)} />
-    </main>
-  );
-}
-
-```
-# Dependencies
- - [React](https://react.dev/) :  
- - [Zikojs](https://github.com/zakarialaoui10/ziko.js) :

package/wrapper/react/index.jsx

@@ -1,22 +0,0 @@
-import React, { useRef, useEffect } from "react";
-import {ZikoUIElement} from "ziko";
-/**
- * A React component for rendering ZikoUIElement.
- * @param {Object} props - Component props.
- * @param {ZikoUIElement} props.ui - The ZikoUIElement to render.
- * @returns {JSX.Element} JSX representation of the ZikoUI component.
- */
-function ZikoUI({ ui }) {
-  const containerRef = useRef(null);
-  useEffect(() => {
-    globalThis.__Ziko__.__Config__.setDefault({render:false})
-    if (containerRef.current && ui && ui instanceof ZikoUIElement) {
-      containerRef.current.innerHTML = "";
-      containerRef.current.appendChild(ui.element);
-    }
-  }, [ui]);
-  return (
-      <ziko-ui ref={containerRef} data-engine="ziko"></ziko-ui>
-  );
-}
-export default ZikoUI;

package/wrapper/svelte/ZikoUI.svelte

@@ -1,15 +0,0 @@
-<ziko-ui bind:this={containerRef} data-engine="ziko"></ziko-ui>
-
-<script>
-  import { onMount } from 'svelte';
-  import {ZikoUIElement} from "ziko";
-  let containerRef;
-  
-  onMount(() => {
-    if (containerRef && ui instanceof ZikoUIElement) {
-      containerRef.innerHTML = "";
-      containerRef.appendChild(ui.element);
-    }
-  });
-  export let ui;
-</script>

package/wrapper/vue/ZikoUI.vue

@@ -1,23 +0,0 @@
-<template>
-  <ziko-ui ref="containerRef" data-engine="ziko"></ziko-ui>
-</template>
-<script>
-import {ZikoUIElement} from "ziko"
-export default {
-  props: {
-    ui: Object
-  },
-  mounted() {
-    //globalThis.__Ziko__.__Config__.setDefault({render:false})
-    if (this.$refs.containerRef && this.ui instanceof ZikoUIElement) {
-      this.$refs.containerRef.innerHTML = "";
-      this.$refs.containerRef.appendChild(this.ui.render(false).element);
-    }
-  }
-};
-</script>
-<style scoped>
-  ziko-ui{
-    display:block;
-  }
-</style>