ziko 0.0.4 → 0.0.5

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Mar 18 2024 11:29:55 GMT+0000 (UTC)
+  Date : Thu Mar 21 2024 19:27:32 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -4251,7 +4251,7 @@ const Events = {
   Focus,
   Input: Input$1,
   HashEvent,
-  CustomEvent,
+  customEvent,
   ExtractAll: function () {
     const keys = Object.keys(this);
     for (let i = 0; i < keys.length; i++) {
@@ -6428,7 +6428,8 @@ const Use = {
 
 class ZikoUIElement {
   constructor(element, name = "") {
-    this.target = globalThis.__Target__ || globalThis.document.body;
+    //this.target = globalThis.__Target__||globalThis.document.body;
+    this.target = globalThis.__ZikoConfig__.default.target || globalThis.document.body;
     if (typeof element === "string") element = globalThis.document.createElement(element);
     this.element = element;
     this.uuid = this.constructor.name + "-" + Random.string(10);
@@ -6470,6 +6471,7 @@ class ZikoUIElement {
     });
     this.size("auto", "auto");
     globalThis.__UI__[this.cache.name]?.push(this);
+    this.render(globalThis.__ZikoConfig__.default.render);
   }
   get st() {
     return this.cache.style;
@@ -6955,7 +6957,6 @@ class ZikoUIText extends ZikoUIElement {
     this.text = "";
     this.addValue(...value);
     this.st.display("inline-block");
-    this.render();
   }
   clear() {
     this.element.textContent = "";
@@ -7012,7 +7013,6 @@ class ZikoUIParagraphe extends ZikoUIElement {
       margin: 0,
       padding: 0
     });
-    this.render();
   }
   addValue(...value) {
     for (let i = 0; i < value.length; i++) {
@@ -7040,7 +7040,6 @@ class ZikoUIHeading extends ZikoUIElement {
     super(`h${type}`, `h${type}`);
     this.element = document.createElement("h" + type);
     this.element.textContent = value;
-    this.render();
   }
   get value() {
     return this.element.innerText;
@@ -7063,21 +7062,18 @@ const h6 = (text = "") => new ZikoUIHeading(6, text);
 
 class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
-    super(element, "ZikoHtml");
-    this.render();
+    super(element, "html");
   }
 }
 class ZikoUIBr extends ZikoUIElement {
   constructor() {
     super("br", "br");
-    this.render();
     delete this.append;
   }
 }
 class ZikoUIHr extends ZikoUIElement {
   constructor() {
     super("hr", "hr");
-    this.render();
     delete this.append;
   }
 }
@@ -7085,7 +7081,6 @@ class ZikoUILink extends ZikoUIElement {
   constructor(href) {
     super("a", "link");
     this.setHref(href);
-    this.render();
   }
   setHref(href) {
     this.element.href = href;
@@ -7096,14 +7091,13 @@ const hr = () => new ZikoUIHr();
 const brs = (n = 1) => new Array(n).fill(new ZikoUIBr());
 const hrs = (n = 1) => new Array(n).fill(new ZikoUIHr());
 const link = (href, ...UIElement) => new ZikoUILink(href).append(...UIElement);
-const ZikoHtml = (tag, ...UIElement) => new ZikoUIHtmlTag(tag).append(...UIElement);
+const html = (tag, ...UIElement) => new ZikoUIHtmlTag(tag).append(...UIElement);
 
 class ZikoUILI extends ZikoUIElement {
   constructor(UI) {
     super();
     this.element = document.createElement("li");
     this.append(UI);
-    this.render();
   }
 }
 class ZikoUIList extends ZikoUIElement {
@@ -7187,7 +7181,6 @@ class ZikoUIOList extends ZikoUIList {
   constructor(...arr) {
     super("ol", "ol");
     this.append(...arr);
-    this.render();
   }
   type(tp = 1) {
     this.element.setAttribute("type", tp);
@@ -7202,7 +7195,6 @@ class ZikoUIUList extends ZikoUIList {
   constructor(...arr) {
     super("ul", "ul");
     this.append(...arr);
-    this.render();
   }
 }
 const li = UI => new ZikoUILI(UI);
@@ -7211,10 +7203,9 @@ const ul = (...arr) => new ZikoUIUList(...arr);
 
 class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
-    super();
+    super("button", "btn");
     this.element = document.createElement("button");
     this.setValue(value);
-    this.render();
     this.st.cursor("pointer");
   }
   setValue(value) {
@@ -7260,7 +7251,6 @@ class ZikoUITextArea extends ZikoUIElement {
     super();
     this.element = document.createElement("textarea");
     //Object.assign(this,inputComposer.call(this));
-    this.render();
   }
   get value() {
     return this.element.textContent;
@@ -7280,7 +7270,6 @@ class ZikoUIInput extends ZikoUIElement {
     });
     this.setValue(value);
     if (datalist) this.linkDatalist(datalist);
-    this.render();
   }
   onInput(...callbacks) {
     if (!this.events.input) this.events.input = Input$1(this);
@@ -7389,7 +7378,6 @@ class ZikoUIInputNumber extends ZikoUIInput {
     super();
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
-    this.render();
   }
   get value() {
     return +this.element.value;
@@ -7412,7 +7400,6 @@ class ZikoUIInputSlider extends ZikoUIInputNumber {
     super();
     this._setType("range");
     this.setMin(min).setMax(max).setValue(val).setStep(step);
-    this.render();
   }
 }
 class ZikoUIInputColor extends ZikoUIInput {
@@ -7420,7 +7407,6 @@ class ZikoUIInputColor extends ZikoUIInput {
     super();
     this._setType("color");
     this.background(this.value);
-    this.render();
     this.onInput(() => this.background(this.value));
   }
 }
@@ -7428,35 +7414,30 @@ class ZikoUIInputPassword extends ZikoUIInput {
   constructor() {
     super();
     this._setType("password");
-    this.render();
   }
 }
 class ZikoUIInputEmail extends ZikoUIInput {
   constructor() {
     super();
     this._setType("email");
-    this.render();
   }
 }
 class ZikoUIInputTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("time");
-    this.render();
   }
 }
 class ZikoUIInputDate extends ZikoUIInput {
   constructor() {
     super();
     this._setType("date");
-    this.render();
   }
 }
 class ZikoUIInputDateTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("datetime-local");
-    this.render();
   }
 }
 class ZikoUIInputCheckbox extends ZikoUIInput {
@@ -7532,7 +7513,6 @@ class ZikoUIInputDatalist extends ZikoUIElement {
     super();
     this.element = document.createElement("datalist");
     this.addOptions(...options).setId("ziko-datalist-id" + Random.string(10));
-    this.render();
   }
   addOptions(...options) {
     options.map(n => this.append(new ZikoUIInputOption(n)));
@@ -7591,7 +7571,6 @@ class ZikoUISelect extends ZikoUIElement {
   constructor() {
     super();
     this.element = document.createElement("select");
-    this.render();
   }
   addOptions(...options) {
     options.map(n => this.append(new ZikoUIInputOption(n)));
@@ -7612,7 +7591,6 @@ class ZikoUIImage extends ZikoUIElement {
       width: w,
       height: h
     });
-    this.render();
   }
   updateSrc(url) {
     this.value = url;
@@ -7640,7 +7618,6 @@ class ZikoUIFigure extends ZikoUIElement {
     this.caption.append(caption.element);
     this.element.append(this.img);
     this.element.append(this.caption);
-    this.render();
   }
 }
 const figure = (image, caption) => new ZikoUIFigure(image, caption);
@@ -7655,7 +7632,6 @@ class ZikoUIVideo extends ZikoUIElement {
       width: w,
       height: h
     });
-    this.render();
   }
   get t() {
     return this.element.currentTime;
@@ -7693,7 +7669,6 @@ class ZikoUIAudio extends ZikoUIElement {
   constructor(src) {
     super("audio", "audio");
     this.element.setAttribute("src", src);
-    this.render();
     this.useControls();
   }
   get t() {
@@ -7906,7 +7881,7 @@ const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIEleme
 class ZikoUIAccordion extends ZikoUIElement {
   constructor(summary, content, icon = "😁") {
     super("details", "Accordion");
-    this.summary = ZikoHtml("summary", summary).style({
+    this.summary = html("summary", summary).style({
       fontSize: "1.1em",
       padding: "0.625rem",
       fontWeight: "bold",
@@ -8058,7 +8033,7 @@ class ZikoUICodeNote extends ZikoUIFlex {
 }
 const CodeNote = () => new ZikoUICodeNote();
 
-const Input = (codeText = "") => ZikoHtml("code", codeText).style({
+const Input = (codeText = "") => html("code", codeText).style({
   width: "100%",
   height: "auto",
   padding: "10px",
@@ -8072,7 +8047,7 @@ const Input = (codeText = "") => ZikoHtml("code", codeText).style({
   background: "#f6f8fa",
   color: "#0062C3"
 }).setAttr("contenteditable", true).setAttr("spellcheck", false);
-const Output = () => ZikoHtml("output").style({
+const Output = () => html("output").style({
   width: "100%",
   height: "auto",
   padding: "5px 0"
@@ -8096,7 +8071,7 @@ const BTN_STYLE = {
 const Right = ctx => Flex(text$1('▶️').style(BTN_STYLE).onClick(e => {
   if (ctx.parent instanceof ZikoUICodeNote) ctx.parent.setCurrentNote(ctx);
   ctx.execute();
-  globalThis.__Target__ = e.target.parent.parent[1][1];
+  globalThis.__ZikoConfig__.default.target = e.target.parent.parent[1][1];
 }), text$1('📋').style(BTN_STYLE).onClick(() => {
   navigator.clipboard.writeText(ctx.codeText);
 }), text$1('✖️').style(BTN_STYLE).onClick(() => ctx.remove()), text$1('✖️').style(BTN_STYLE).onClick(() => ctx.remove())).style({
@@ -8228,7 +8203,7 @@ class ZikoUICodeCell extends ZikoUIFlex {
   #evaluateMd() {}
   #evaluateHtml() {}
   evaluate(order) {
-    globalThis.__Target__ = this.Output.element;
+    globalThis.__ZikoConfig__.default.target = this.Output.element;
     switch (this.cache.type) {
       case "js":
         this.#evaluateJs(order);
@@ -8365,19 +8340,16 @@ const Tabs = (Controllers, Contents) => new ZikoUITabs(Controllers, Contents);
 class ZikoUIMain extends ZikoUIElement {
   constructor() {
     super("main", "Main");
-    this.render();
   }
 }
 class ZikoUIHeader extends ZikoUIElement {
   constructor() {
     super("header", "Header");
-    this.render();
   }
 }
 class ZikoUINav extends ZikoUIElement {
   constructor() {
     super("nav", "Nav");
-    this.render();
   }
 }
 class ZikoUISection extends ZikoUIElement {
@@ -8386,26 +8358,22 @@ class ZikoUISection extends ZikoUIElement {
     this.style({
       position: "relative"
     });
-    this.render();
   }
 }
 class ZikoUIArticle extends ZikoUIElement {
   constructor() {
     super("article", "Article");
-    this.render();
   }
 }
 class ZikoUIAside extends ZikoUIElement {
   constructor() {
     super("aside", "Aside");
-    this.render();
   }
 }
 class ZikoUIFooter extends ZikoUIElement {
   constructor() {
     super("footer", "Footer");
     this.element = document.createElement("footer");
-    this.render();
   }
 }
 const Section$1 = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
@@ -8496,7 +8464,6 @@ class ZikoUITable extends ZikoUIElement {
     };
     if (body) this.fromMatrix(body);
     if (caption) this.setCaption(caption);
-    this.render();
   }
   get caption() {
     return this.structure.caption;
@@ -8595,7 +8562,7 @@ class ZikoUITable extends ZikoUIElement {
 const Table = (matrix, config) => new ZikoUITable(matrix, config);
 
 const UI$1 = {
-  ZikoHtml,
+  html,
   text: text$1,
   p,
   h1,
@@ -9326,7 +9293,7 @@ class ZikoUICanvas extends ZikoUIElement {
     });
     this.transformMatrix = new Matrix([[1, 0, 0], [0, 1, 0], [0, 0, 1]]);
     this.axisMatrix = new Matrix([[-10, -10], [10, 10]]);
-    this.render();
+    this.render(globalThis.__ZikoConfig__.default.render);
     setTimeout(() => this.resize(w, h), 0);
     this.on("sizeupdated", () => this.adjust());
   }
@@ -9822,8 +9789,20 @@ const SPA = (root_UI, routes, patterns) => new ZikoSPA(root_UI, routes, patterns
 
 const __init__ = () => document.documentElement.setAttribute("data-engine", "zikojs");
 
-var __Target__ = null;
-if (globalThis?.document?.body) __Target__ = document.body;
+// var __Target__=null;
+// if(globalThis?.document?.body)__Target__=document.body;
+const __ZikoConfig__ = {
+  default: {
+    target: null,
+    render: true
+  },
+  setDefault: function (pairs) {
+    const keys = Object.keys(pairs);
+    const values = Object.values(pairs);
+    for (let i = 0; i < keys.length; i++) this.default[keys[i]] = values[i];
+  },
+  init: () => document.documentElement.setAttribute("data-engine", "zikojs")
+};
 
 class ZikoSeo {
   constructor(app) {
@@ -9882,7 +9861,7 @@ class ZikoUIApp extends ZikoUIFlex {
       theme: null,
       isRoot: true
     });
-    this.render();
+    this.render(globalThis.__ZikoConfig__.default.render);
   }
   #init() {
     this.root.setAttribute("data-engine", "zikojs");
@@ -9920,7 +9899,7 @@ const Ziko = {
 };
 globalThis.__Ziko__ = Ziko;
 globalThis.__UI__ = __UI__;
-globalThis.__Target__ = __Target__;
+globalThis.__ZikoConfig__ = __ZikoConfig__;
 function ExtractAll() {
   UI$1.ExtractAll();
   Math$1.ExtractAll();
@@ -9941,4 +9920,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, ZikoHtml, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __init__, abs, accum, acos, acosh, acot, add, 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, 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, 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, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __ZikoConfig__, __init__, abs, accum, acos, acosh, acot, add, 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, 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.4",
+  "version": "0.0.5",
   "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",
@@ -15,11 +15,13 @@
     "Single Page Application"
   ],
   "type": "module",
-  "source": "src/index.js",
+  "source": "core/index.js",
   "main": "dist/ziko.cjs",
   "module": "dist/ziko.mjs",
+  "unpkg": "dist/ziko.min.js",
   "files": [
-    "src",
+    "core",
+    "wrapper",
     "dist",
     "LICENCE"
   ],

package/wrapper/react/index.jsx

@@ -0,0 +1,16 @@
+import React, { useRef, useEffect } from "react";
+import {ZikoUIElement} from "ziko";
+function ZikoUI({ ui }) {
+  const containerRef = useRef(null);
+  useEffect(() => {
+    console.log(globalThis.__ZikoConfig__)
+    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/react/readme.md

@@ -0,0 +1,19 @@
+# Overview
+is a tool designed for rendering [ziko](https://github.com/zakarialaoui10/ziko.js) elements within a React application.
+
+# 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>
+  );
+}
+
+```

package/wrapper/vue/ZikoUI.vue

@@ -0,0 +1,17 @@
+<template>
+  <div ref="containerRef" data-engine="ziko">Test</div>
+</template>
+<script>
+import {ZikoUIElement} from "ziko"
+export default {
+  props: {
+    ui: Object
+  },
+  mounted() {
+    if (this.$refs.containerRef && this.ui instanceof ZikoUIElement) {
+      this.$refs.containerRef.innerHTML = "";
+      this.$refs.containerRef.appendChild(this.ui.element);
+    }
+  }
+};
+</script>

package/src/App/Globals/index.js

@@ -1,3 +0,0 @@
-export * from "./__init__";
-export * from "./__Target__";
-export * from "./__UI__"