ziko 0.0.7 → 0.0.8

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon May 20 2024 19:37:06 GMT+0100 (UTC+01:00)
+  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
@@ -7186,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);
@@ -7262,7 +7262,7 @@ class ZikoUIInput extends ZikoUIElement {
 }
 class ZikoUIInputSearch extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputSearch");
     this._setType("search");
     this.Length = 0;
   }
@@ -7299,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);
   }
@@ -7321,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));
@@ -7336,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");
   }
@@ -7384,7 +7384,7 @@ class ZikoUIInputCheckbox extends ZikoUIInput {
 }
 class ZikoUIInputRadio extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputRadio");
     this._setType("radio");
     this.cursor("pointer");
   }
@@ -7404,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");

package/package.json

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