ziko 0.0.13 → 0.0.15

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input/index.js

@@ -1,98 +1,99 @@
-import ZikoUIElement from "../../../ZikoUIElement.js";
-import { useInputEvent } from "../../../../../../reactivity/index.js";
-class ZikoUIInput extends ZikoUIElement {
-  constructor(type, name , value = "", datalist) {
-    super("input", "input");
-    Object.assign(this.events, { input: null });
-    this.setValue(value);
-    this.setAttr("type", type);
-    this.setAttr("name", name);
-    if (datalist) this.linkDatalist(datalist);
-  }
-  get isInput() {
-    return true;
-  }
-  setName(name){
-    this.setAttr("name", name);
-    return this;
-  }
-  onInput(...callbacks) {
-    if (!this.events.input) this.events.input = useInputEvent(this);
-    this.events.input.onInput(...callbacks);
-    return this;
-  }
-  onChange(...callbacks) {
-    if (!this.events.input) this.events.input = useInputEvent(this);
-    this.events.input.onChange(...callbacks);
-    return this;
-  }
-  linkDatalist(datalist) {
-    let id;
-    if (datalist instanceof ZikoUIInputDatalist) id = datalist.Id;
-    else if (datalist instanceof Array) {
-      const Datalist = new ZikoUIInputDatalist(...datalist);
-      id = Datalist.Id;
-      console.log(Datalist);
-    } else id = datalist;
-    this.element?.setAttribute("list", id);
-    return this;
-  }
-  get value() {
-    return this.element.value;
-  }
-  // _setType(type) {
-  //   this.element.type = type;
-  //   return this;
-  // }
-  setValue(value = "") {
-    this.element.value = value;
-    return this;
-  }
-  useState(state) {
-    this.setValue(state);
-    return [{ value: this.value }, (e) => this.setValue(e)];
-  }
-  setPlaceholder(value) {
-    if (value) this.element.placeholder = value;
-    return this;
-  }
-  get isValide() {
-    return this.element.checkValidity();
-  }
-  setRequired(required = true) {
-    this.element.required = required;
-    return this;
-  }
-  select() {
-    this.element.select();
-    return this;
-  }
-  copy() {
-    this.element.select();
-    document.execCommand("copy");
-    return this;
-  }
-  cut() {
-    this.element.select();
-    document.execCommand("cut");
-    return this;
-  }
-  accept(value) {
-    this.element.accept = value;
-    return this;
-  }
-}
-
-const input = (value, datalist) => {
-  if (value instanceof Object) {
-    const { datalist, placeholder } = value;
-    value = value.value ?? "";
-    return new ZikoUIInput("text", "input", value, datalist).setPlaceholder(placeholder);
-  }
-  return new ZikoUIInput("text", "input", value, datalist);
-};
-
-export{
-    ZikoUIInput,
-    input
+import ZikoUIElement from "../../../ZikoUIElement.js";
+import { useInputEvent } from "../../../../../../reactivity/index.js";
+class ZikoUIInput extends ZikoUIElement {
+  constructor(type, name , value = "", datalist) {
+    super("input", "input");
+    Object.assign(this.events, { input: null });
+    this.setValue(value);
+    this.setAttr("type", type);
+    this.setAttr("name", name);
+    // this.setAttr("tab-index","0")
+    if (datalist) this.linkDatalist(datalist);
+  }
+  get isInput() {
+    return true;
+  }
+  setName(name){
+    this.setAttr("name", name);
+    return this;
+  }
+  onInput(...callbacks) {
+    if (!this.events.input) this.events.input = useInputEvent(this);
+    this.events.input.onInput(...callbacks);
+    return this;
+  }
+  onChange(...callbacks) {
+    if (!this.events.input) this.events.input = useInputEvent(this);
+    this.events.input.onChange(...callbacks);
+    return this;
+  }
+  linkDatalist(datalist) {
+    let id;
+    if (datalist instanceof ZikoUIInputDatalist) id = datalist.Id;
+    else if (datalist instanceof Array) {
+      const Datalist = new ZikoUIInputDatalist(...datalist);
+      id = Datalist.Id;
+      console.log(Datalist);
+    } else id = datalist;
+    this.element?.setAttribute("list", id);
+    return this;
+  }
+  get value() {
+    return this.element.value;
+  }
+  // _setType(type) {
+  //   this.element.type = type;
+  //   return this;
+  // }
+  setValue(value = "") {
+    this.element.value = value;
+    return this;
+  }
+  useState(state) {
+    this.setValue(state);
+    return [{ value: this.value }, (e) => this.setValue(e)];
+  }
+  setPlaceholder(value) {
+    if (value) this.element.placeholder = value;
+    return this;
+  }
+  get isValide() {
+    return this.element.checkValidity();
+  }
+  setRequired(required = true) {
+    this.element.required = required;
+    return this;
+  }
+  select() {
+    this.element.select();
+    return this;
+  }
+  copy() {
+    this.element.select();
+    document.execCommand("copy");
+    return this;
+  }
+  cut() {
+    this.element.select();
+    document.execCommand("cut");
+    return this;
+  }
+  accept(value) {
+    this.element.accept = value;
+    return this;
+  }
+}
+
+const input = (value, datalist) => {
+  if (value instanceof Object) {
+    const { datalist, placeholder } = value;
+    value = value.value ?? "";
+    return new ZikoUIInput("text", "input", value, datalist).setPlaceholder(placeholder);
+  }
+  return new ZikoUIInput("text", "input", value, datalist);
+};
+
+export{
+    ZikoUIInput,
+    input
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-camera/index.js

@@ -1,26 +1,26 @@
-import { ZikoUIVideo } from "../../../media";
-class ZikoUIWebcame extends ZikoUIVideo{
-    constructor(){
-      super()
-      this.element?.setAttribute("src", "");
-      this.constraints = { audio: true, video: { width: 1280, height: 720 } };
-      //this.video=this.element
-    }
-    get isInputCamera(){
-      return true;
-    }
-    start(){
-      navigator.mediaDevices.getUserMedia(this.constraints).then((mediaStream)=>{
-        this.element.srcObject = mediaStream;
-        this.element.onloadedmetadata = () =>{
-          this.element.play();
-        };
-      })
-      .catch(function(err) { console.log(err.name + ": " + err.message); });
-      return this;
-    }
-  }
-  const inputCamera=()=>new ZikoUIWebcame();
-  export{
-    inputCamera
-  }
+import { ZikoUIVideo } from "../../../media";
+class ZikoUIWebcame extends ZikoUIVideo{
+    constructor(){
+      super()
+      this.element?.setAttribute("src", "");
+      this.constraints = { audio: true, video: { width: 1280, height: 720 } };
+      //this.video=this.element
+    }
+    get isInputCamera(){
+      return true;
+    }
+    start(){
+      navigator.mediaDevices.getUserMedia(this.constraints).then((mediaStream)=>{
+        this.element.srcObject = mediaStream;
+        this.element.onloadedmetadata = () =>{
+          this.element.play();
+        };
+      })
+      .catch(function(err) { console.log(err.name + ": " + err.message); });
+      return this;
+    }
+  }
+  const inputCamera=()=>new ZikoUIWebcame();
+  export{
+    inputCamera
+  }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-checkbox/index.js

@@ -1,26 +1,26 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputCheckbox extends ZikoUIInput {
-    constructor() {
-      super("checkbox", "inputCheckbox");
-      this.cursor("pointer");
-    }
-    get isInputCheckbox(){
-      return true;
-    }
-    get checked() {
-      return this.element.checked;
-    }
-    check(checked = true) {
-      this.element.checked = checked;
-      return this;
-    }
-    color(color) {
-      this.element.style.accentColor = color;
-      return this;
-    }
-}
-const checkbox = () => new ZikoUIInputCheckbox();
-export{
-    ZikoUIInputCheckbox,
-    checkbox
+import { ZikoUIInput } from "../input";
+class ZikoUIInputCheckbox extends ZikoUIInput {
+    constructor() {
+      super("checkbox", "inputCheckbox");
+      this.cursor("pointer");
+    }
+    get isInputCheckbox(){
+      return true;
+    }
+    get checked() {
+      return this.element.checked;
+    }
+    check(checked = true) {
+      this.element.checked = checked;
+      return this;
+    }
+    color(color) {
+      this.element.style.accentColor = color;
+      return this;
+    }
+}
+const checkbox = () => new ZikoUIInputCheckbox();
+export{
+    ZikoUIInputCheckbox,
+    checkbox
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-color/index.js

@@ -1,16 +1,16 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputColor extends ZikoUIInput {
-    constructor() {
-      super("color", "inputColor");
-      this.background(this.value);
-      this.onInput(() => this.background(this.value));
-    }
-    get isInputColor(){
-      return true;
-    }
-}
-const inputColor = () => new ZikoUIInputColor();
-export{
-    ZikoUIInputColor,
-    inputColor
+import { ZikoUIInput } from "../input";
+class ZikoUIInputColor extends ZikoUIInput {
+    constructor() {
+      super("color", "inputColor");
+      this.background(this.value);
+      this.onInput(() => this.background(this.value));
+    }
+    get isInputColor(){
+      return true;
+    }
+}
+const inputColor = () => new ZikoUIInputColor();
+export{
+    ZikoUIInputColor,
+    inputColor
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-date-time/index.js

@@ -1,3 +1,3 @@
-export * from "./input-date";
-export * from "./input-time";
+export * from "./input-date";
+export * from "./input-time";
 export * from "./input-date-time";

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-date-time/input-date-time.js

@@ -1,14 +1,14 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputDateTime extends ZikoUIInput {
-    constructor() {
-      super("datetime-local", "inputDateTime");
-    }
-    get isInputDateTime(){
-      return true;
-    }
-}
-const inputDateTime = () => new ZikoUIInputDateTime();
-export{
-    ZikoUIInputDateTime,
-    inputDateTime
+import { ZikoUIInput } from "../input";
+class ZikoUIInputDateTime extends ZikoUIInput {
+    constructor() {
+      super("datetime-local", "inputDateTime");
+    }
+    get isInputDateTime(){
+      return true;
+    }
+}
+const inputDateTime = () => new ZikoUIInputDateTime();
+export{
+    ZikoUIInputDateTime,
+    inputDateTime
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-date-time/input-date.js

@@ -1,14 +1,14 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputDate extends ZikoUIInput {
-    constructor() {
-      super("date", "inputDate");
-    }
-    get isInputDate(){
-      return true;
-    }
-}
-const inputDate = () => new ZikoUIInputDate();
-export{
-    ZikoUIInputDate,
-    inputDate
+import { ZikoUIInput } from "../input";
+class ZikoUIInputDate extends ZikoUIInput {
+    constructor() {
+      super("date", "inputDate");
+    }
+    get isInputDate(){
+      return true;
+    }
+}
+const inputDate = () => new ZikoUIInputDate();
+export{
+    ZikoUIInputDate,
+    inputDate
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-date-time/input-time.js

@@ -1,14 +1,14 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputTime extends ZikoUIInput {
-    constructor() {
-      super("time", "inputTime");
-    }
-    get isInputTime(){
-      return true;
-    }
-}
-const inputTime = () => new ZikoUIInputTime();
-export{
-    ZikoUIInputTime,
-    inputTime
+import { ZikoUIInput } from "../input";
+class ZikoUIInputTime extends ZikoUIInput {
+    constructor() {
+      super("time", "inputTime");
+    }
+    get isInputTime(){
+      return true;
+    }
+}
+const inputTime = () => new ZikoUIInputTime();
+export{
+    ZikoUIInputTime,
+    inputTime
 }

package/src/ui/elements/primitives/io/Inputs/input-email-password/index.js

@@ -0,0 +1,2 @@
+export * from "./input-email";
+export * from "./input-password";

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-email-password/input-email.js

@@ -1,15 +1,15 @@
-
-import { ZikoUIInput } from "../input";
-class ZikoUIInputEmail extends ZikoUIInput {
-    constructor() {
-      super("email", "inputEmail");
-    }
-    get isInputEmail(){
-      return true;
-    }
-  }
-const inputEmail = () => new ZikoUIInputEmail();
-export{
-    ZikoUIInputEmail,
-    inputEmail
+
+import { ZikoUIInput } from "../input";
+class ZikoUIInputEmail extends ZikoUIInput {
+    constructor() {
+      super("email", "inputEmail");
+    }
+    get isInputEmail(){
+      return true;
+    }
+  }
+const inputEmail = () => new ZikoUIInputEmail();
+export{
+    ZikoUIInputEmail,
+    inputEmail
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-email-password/input-password.js

@@ -1,14 +1,14 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputPassword extends ZikoUIInput {
-    constructor() {
-      super("password", "inputPassword");
-    }
-    get isInputPassword(){
-      return true;
-    }
-  }
-  const inputPassword = () => new ZikoUIInputPassword();
-export{
-    ZikoUIInputPassword,
-    inputPassword
+import { ZikoUIInput } from "../input";
+class ZikoUIInputPassword extends ZikoUIInput {
+    constructor() {
+      super("password", "inputPassword");
+    }
+    get isInputPassword(){
+      return true;
+    }
+  }
+  const inputPassword = () => new ZikoUIInputPassword();
+export{
+    ZikoUIInputPassword,
+    inputPassword
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-file/input-image.js

@@ -1,43 +1,43 @@
-import ZikoUIElement from "../../../ZikoUIElement";
-import { btn } from "../../../misc";
-class ZikoUIInputImage extends ZikoUIElement {
-    constructor(text = "File") {
-      super("inputImage");
-      this._aux_element = btn(text).setTarget(this.target);
-      this.element = document?.createElement("input");
-      this.element?.setAttribute("type", "file");
-      this.element?.setAttribute("accept", "image");
-      this._aux_element.onClick(() => this.element.click());
-      this.element.onChange = this.handleImage.bind(this);
-    }
-    get isInputImage(){
-      return true;
-    }
-    handleImage(e) {
-      const reader = new FileReader();
-      const img = new Image();
-      reader.onload = function (event) {
-        img.src = event.target.result;
-        console.log(img.src);
-      };
-      reader.readAsDataURL(e.target.files[0]);
-      this.img = img;
-    }
-    get value() {
-      return this.img;
-    }
-    render(bool = true) {
-      if (bool) this.target.appendChild(this._aux_element.element);
-      else this.remove();
-      return this;
-    }
-    remove() {
-      if (this.target.children.length) this.target.removeChild(this._aux_element.element);
-      return this;
-    }
-}
-const inputImage = (text) => new ZikoUIInputImage(text);
-export{
-    ZikoUIInputImage,
-    inputImage
+import ZikoUIElement from "../../../ZikoUIElement";
+import { btn } from "../../../misc";
+class ZikoUIInputImage extends ZikoUIElement {
+    constructor(text = "File") {
+      super("inputImage");
+      this._aux_element = btn(text).setTarget(this.target);
+      this.element = document?.createElement("input");
+      this.element?.setAttribute("type", "file");
+      this.element?.setAttribute("accept", "image");
+      this._aux_element.onClick(() => this.element.click());
+      this.element.onChange = this.handleImage.bind(this);
+    }
+    get isInputImage(){
+      return true;
+    }
+    handleImage(e) {
+      const reader = new FileReader();
+      const img = new Image();
+      reader.onload = function (event) {
+        img.src = event.target.result;
+        console.log(img.src);
+      };
+      reader.readAsDataURL(e.target.files[0]);
+      this.img = img;
+    }
+    get value() {
+      return this.img;
+    }
+    render(bool = true) {
+      if (bool) this.target.appendChild(this._aux_element.element);
+      else this.remove();
+      return this;
+    }
+    remove() {
+      if (this.target.children.length) this.target.removeChild(this._aux_element.element);
+      return this;
+    }
+}
+const inputImage = (text) => new ZikoUIInputImage(text);
+export{
+    ZikoUIInputImage,
+    inputImage
 }

package/src/{user-interface → ui}/elements/primitives/io/Inputs/input-number/index.js

@@ -1,37 +1,37 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputNumber extends ZikoUIInput {
-    constructor(min, max, step = 1) {
-      super("number", "inpuNumber");
-      this.setMin(min).setMax(max).setStep(step);
-    }
-    get isInputNumber() {
-      return true;
-    }
-    get value() {
-      return +this.element.value;
-    }
-    setMin(min) {
-      this.element.min = min;
-      return this;
-    }
-    setMax(max) {
-      this.element.max = max;
-      return this;
-    }
-    setStep(step) {
-      this.element.step = step;
-      return this;
-    }
-  }
-  const inputNumber = (min, max, step) => {
-    if (min instanceof Object) {
-      const { value, max = 10, step = 1, placeholder = "" } = min;
-      min = min?.min ?? 0;
-      return new ZikoUIInputSlider(min, max, step)
-        .setValue(value)
-        .setPlaceholder(placeholder);
-    }
-    return new ZikoUIInputNumber(min, max, step);
-  };
-  export { inputNumber, ZikoUIInputNumber };
+import { ZikoUIInput } from "../input";
+class ZikoUIInputNumber extends ZikoUIInput {
+    constructor(min, max, step = 1) {
+      super("number", "inpuNumber");
+      this.setMin(min).setMax(max).setStep(step);
+    }
+    get isInputNumber() {
+      return true;
+    }
+    get value() {
+      return +this.element.value;
+    }
+    setMin(min) {
+      this.element.min = min;
+      return this;
+    }
+    setMax(max) {
+      this.element.max = max;
+      return this;
+    }
+    setStep(step) {
+      this.element.step = step;
+      return this;
+    }
+  }
+  const inputNumber = (min, max, step) => {
+    if (min instanceof Object) {
+      const { value, max = 10, step = 1, placeholder = "" } = min;
+      min = min?.min ?? 0;
+      return new ZikoUIInputSlider(min, max, step)
+        .setValue(value)
+        .setPlaceholder(placeholder);
+    }
+    return new ZikoUIInputNumber(min, max, step);
+  };
+  export { inputNumber, ZikoUIInputNumber };