ziko 0.0.11 → 0.0.13

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

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

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";

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

@@ -0,0 +1,139 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
+import {text} from "../text/index.js";
+class ZikoUILI extends ZikoUIContainerElement{
+  constructor(UI){
+    super("li","li");
+    this.append(UI);
+  }
+  get isLi(){
+    return true;
+  }
+}
+class ZikoUIList extends ZikoUIContainerElement {
+    constructor(element,name) {
+      super(element,name);
+      delete this.append;
+      this.style({ listStylePosition: "inside" });
+    }
+    get isList(){
+      return true;
+    }
+    append(...arr){
+      for (let i = 0; i < arr.length; i++) {
+        let li = null;
+        if(["string","number"].includes(typeof arr[i]))arr[i]=text(arr[i])
+        if (arr[i] instanceof ZikoUIElement)li=new ZikoUILI(arr[i]);
+        li.setTarget(this.element)
+        this.items.push(li[0]);
+        this.maintain();
+      }
+    }
+    remove(...ele) {
+      if(ele.length==0){
+        if(this.target.children.length) this.target.removeChild(this.element);
+      }
+      else {
+        const remove = (ele) => {
+          if(typeof ele === "number") ele=this.items[ele];
+          if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.parent.element);
+            this.items=this.items.filter(n=>n!==ele);
+        };
+        for (let i = 0; i < ele.length; i++) remove(ele[i]);
+        for (let i = 0; i < this.items.length; i++)
+          Object.assign(this, { [[i]]: this.items[i] });
+      }
+      return this;
+    }
+    insertAt(index, ...ele) {
+      if (index >= this.element.children.length) this.append(...ele);
+      else
+        for (let i = 0; i < ele.length; i++) {
+          let li = null;
+          if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
+          if (ele[i] instanceof ZikoUIElement)li=new ZikoUILI(ele[i]);
+          this.element?.insertBefore(li.element, this.items[index].parent.element);
+          this.items.splice(index, 0, ele[i][0]);
+        }
+      return this;
+    }
+    filterByTextContent(text,exactMatch=false){
+      this.items.map(n=>n.parent.render());
+      this.items.filter(n=>{
+        const content=n.element.textContent
+        return !(exactMatch?content===text:content.includes(text))
+      }).map(n=>n.parent.render(false));
+       return this;
+    }
+    sortByTextContent(order=1){
+      this.items.map(n=>n.parent.render(false));
+      // To Fix
+      this.sortedItems=this.items.sort((a,b)=>order*a.element.textContent.localeCompare(b.element.textContent))
+      this.append(...this.sortedItems);
+      return this;
+    }
+    filterByClass(value) {
+      this.items.map(n=>n.parent.render(true));
+      this.items.filter(n=>!n.Classes.includes(value)).map(n=>n.parent.render(false));
+      return this; 
+    }
+    delete(value) {
+      const valueIndex = [...this.element.children].indexOf(value);
+      return valueIndex;
+      /*if(valueIndex >= 0) {
+        return this.list.splice(valueIndex, 1);
+      }*/
+    }
+    push(){
+
+    }
+    pop(){
+
+    }
+    unshift(){
+
+    }
+    shift(){
+
+    }
+    sort(){
+
+    }
+    filter(){
+
+    }
+    slice(){
+      
+    }
+  }
+class ZikoUIOList extends ZikoUIList{
+  constructor(...arr){
+    super("ol","ol");
+    this.append(...arr);
+  }
+  get isOl(){
+    return true;
+  }
+  type(tp = 1) {
+    this.element?.setAttribute("type", tp);
+    return this;
+  }
+  start(st = 1) {
+    this.element?.setAttribute("start", st);
+    return this;
+  }
+}
+class ZikoUIUList extends ZikoUIList{
+  constructor(...arr){
+    super("ul","ul");
+    this.append(...arr);
+  }
+  get isUl(){
+    return true;
+  }
+}
+const li=UI=>new ZikoUILI(UI)
+const ol = (...arr) => new ZikoUIOList(...arr);
+const ul = (...arr) => new ZikoUIUList(...arr);
+
+export{ol,ul,li}

package/src/user-interface/elements/primitives/media/Audio/index.js

@@ -0,0 +1,17 @@
+import { __ZikoUIDynamicMediaElement__ } from "../__ZikoUIDynamicMediaELement__.js";
+class ZikoUIAudio extends __ZikoUIDynamicMediaElement__ {
+    constructor(src) {
+      super("audio","audio");
+      this.element?.setAttribute("src", src);
+      this.size("150px","30px")
+      // this.useControls();
+    }
+    get isAudio(){
+      return true;
+    }
+  }
+const audio = (src) => new ZikoUIAudio(src);
+export {
+    audio,
+    ZikoUIAudio
+}

package/src/user-interface/elements/primitives/media/Image/figure.js

@@ -0,0 +1,19 @@
+import ZikoUIElement from "../../ZikoUIElement";
+class ZikoUIFigure extends ZikoUIElement{
+    constructor(src,caption){
+      super("figure","figure")
+      this.img=src.width("100%").element;
+      this.caption=document?.createElementt("figcaption");
+      this.caption.append(caption.element)
+      this.element?.append(this.img);
+      this.element?.append(this.caption);
+    }
+    get isFigure(){
+      return true;
+    }
+}
+const figure =(image,caption) =>new ZikoUIFigure(image,caption);
+export{
+    figure,
+    ZikoUIFigure
+}