ziko 0.0.12 → 0.0.14

package/src/user-interface/elements/primitives/io/Inputs/__helpers__.js

@@ -0,0 +1,52 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+import { Random } from "../../../../../math/index.js";
+class ZikoUILabel extends ZikoUIElement{
+    constructor(){
+      super();
+      this.element=document?.createElement("label");
+    }
+    get isLabel(){
+      return true;
+  }
+  }
+class ZikoUIInputOption extends ZikoUIElement {
+    constructor(value = "") {
+      super();
+      this.element = document?.createElement("option");
+      if(value instanceof Object&&"value" in value){
+        this.setValue(value.value);
+        this.setText(value?.text??value.value)
+      }
+      else this.setValue(value);
+    }
+    setValue(str = "") {
+      this.element.value = str;
+      return this;
+    }
+    setText(text=""){
+      if(text)this.element.textContent=text;
+      return this;
+    }
+}
+class ZikoUIInputDatalist extends ZikoUIElement {
+  constructor(...options){
+    super();
+    this.element = document?.createElement("datalist");
+    this.addOptions(...options).setId("ziko-datalist-id"+Random.string(10));
+  }
+  get isDatalist(){
+    return true;
+  }
+  addOptions(...options) {
+    options.map((n) => this.append(new ZikoUIInputOption(n)));
+    return this;
+  }
+}
+
+const datalist = (...options) => new ZikoUIInputDatalist(...options);
+export{
+  datalist,
+  ZikoUIInputDatalist,
+  ZikoUILabel,
+  ZikoUIInputOption
+}

package/src/user-interface/elements/primitives/io/Inputs/index.js

@@ -0,0 +1,12 @@
+export * from "./input/index.js";
+export * from "./input-number/index.js";
+export * from "./input-slider/index.js";
+export * from "./input-color/index.js";
+export * from "./input-search/index.js";
+export * from "./input-checkbox/index.js";
+export * from "./input-radio/index.js";
+export * from "./input-email-password/index.js";
+export * from "./input-date-time/index.js";
+export * from "./input-file/index.js";
+export * from "./input-camera/index.js";
+export * from "./__helpers__.js";

package/src/user-interface/elements/primitives/io/Inputs/input/index.js

@@ -0,0 +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);
+    // 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/elements/primitives/io/Inputs/input-camera/index.js

@@ -0,0 +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
+  }

package/src/user-interface/elements/primitives/io/Inputs/input-checkbox/index.js

@@ -0,0 +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
+}

package/src/user-interface/elements/primitives/io/Inputs/input-color/index.js

@@ -0,0 +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
+}

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

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

package/src/user-interface/elements/primitives/io/Inputs/input-date-time/input-date-time.js

@@ -0,0 +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
+}

package/src/user-interface/elements/primitives/io/Inputs/input-date-time/input-date.js

@@ -0,0 +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
+}

package/src/user-interface/elements/primitives/io/Inputs/input-date-time/input-time.js

@@ -0,0 +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
+}

package/src/user-interface/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/elements/primitives/io/Inputs/input-email-password/input-email.js

@@ -0,0 +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
+}

package/src/user-interface/elements/primitives/io/Inputs/input-email-password/input-password.js

@@ -0,0 +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
+}

package/src/user-interface/elements/primitives/io/Inputs/input-file/index.js

@@ -0,0 +1 @@
+export * from "./input-image"

package/src/user-interface/elements/primitives/io/Inputs/input-file/input-image.js

@@ -0,0 +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
+}

package/src/user-interface/elements/primitives/io/Inputs/input-number/index.js

@@ -0,0 +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 };
+  

package/src/user-interface/elements/primitives/io/Inputs/input-radio/index.js

@@ -0,0 +1,26 @@
+import { ZikoUIInput } from "../input";
+class ZikoUIInputRadio extends ZikoUIInput {
+    constructor() {
+      super("radio", "inputRadio");
+      this.cursor("pointer");
+    }
+    get isInputRadio(){
+      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 radio = () => new ZikoUIInputRadio();
+export{
+  ZikoUIInputRadio,
+  radio
+}

package/src/user-interface/elements/primitives/io/Inputs/input-search/index.js

@@ -0,0 +1,45 @@
+import { ZikoUIInput } from "../input";
+class ZikoUIInputSearch extends ZikoUIInput {
+  constructor() {
+    super("search", "inputSearch");
+    this.Length = 0;
+  }
+  get isInputSearch() {
+    return true;
+  }
+  onsearch(callback) {
+    this.element?.addEventListener("search", () => callback());
+    return this;
+  }
+  connect(...UIElement) {
+    /* 
+      let memory = new Array(UIElement.length).fill([]);
+      UIElement.map((n, i) => {
+        //console.log(n)
+        n.items.map((m, j) => {
+          memory[i][j] = m.element.style.display;
+        });
+      });
+      UIElement.map((n, i) =>
+        this.onInput(() => {
+          n.filterByTextContent(this.value, memory[i]);
+          this.Length = n.children.filter(
+            (n) => n.style.display != "none"
+          ).length;
+        })
+      );
+      */
+    return this;
+  }
+  displayLength(UIElement) {
+    this.element?.addEventListener("keyup", () =>
+      UIElement.setValue(this.Length),
+    );
+    return this;
+  }
+}
+const search = (...a) => new ZikoUIInputSearch().connect(...a);
+export { 
+    ZikoUIInputSearch, 
+    search 
+};

package/src/user-interface/elements/primitives/io/Inputs/input-slider/index.js

@@ -0,0 +1,34 @@
+import { ZikoUIInput } from "../input";
+class ZikoUIInputSlider extends ZikoUIInput {
+    constructor(val = 0, min = 0, max = 10, step = 1) {
+      super("range", "inputSlider");
+      this.setMin(min).setMax(max).setValue(val).setStep(step);
+    }
+    get isInputSlider(){
+      return true;
+    }
+    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 slider = (value, min, max, step) =>{
+    if(value instanceof Object){
+      const {min=0,max=10,step=1}=value;
+      value=value?.value??5;
+      return new ZikoUIInputSlider(value, min, max, step);
+    }
+    return new ZikoUIInputSlider(value, min, max, step);
+}
+export{
+    ZikoUIInputSlider,
+    slider
+}

package/src/user-interface/elements/primitives/io/Select/index.js

@@ -0,0 +1,20 @@
+import ZikoUIElement from "../../ZikoUIElement";
+import { ZikoUIInputOption } from "../Inputs/__helpers__";
+class ZikoUISelect extends ZikoUIElement {
+    constructor(){
+      super();
+      this.element=document?.createElement("select");
+    }
+    addOptions(...options) {
+      options.map(n => this.append(new ZikoUIInputOption(n)));
+      return this;
+    }
+    get isSelect(){
+      return true;
+    }
+  }
+const select=()=>new ZikoUISelect()
+export{
+    select,
+    ZikoUISelect
+}

package/src/user-interface/elements/primitives/io/Textarea/index.js

@@ -0,0 +1,18 @@
+import ZikoUIElement from "../../ZikoUIElement";
+class ZikoUITextArea extends ZikoUIElement {
+    constructor() {
+      super();
+      this.element = document?.createElement("textarea");
+    }
+    get value(){
+      return this.element.textContent;
+    }
+    get isTextArea(){
+      return true;
+    }
+}
+const textarea =()=> new ZikoUITextArea();
+export {
+    ZikoUITextArea,
+    textarea
+}

package/src/user-interface/elements/primitives/io/index.js

@@ -0,0 +1,4 @@
+export * from "./Inputs";
+export * from "./Select";
+export * from "./Textarea";
+export * from "./Form";