ziko 0.0.1

package/src/UI/Inputs/Primitives/inputs.js

@@ -0,0 +1,334 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+import { Input } from "../../../Reactivity/Events/index.js";
+import { ZikoUIInputOption,ZikoUILabel } from "./elements.js";
+import { btn } from "./btn.js";
+import { Random } from "../../../Math/Random/index.js";
+//import { select } from "./select.js";
+//import { debounce,throttle} from "../../Data/decorators.js";
+
+class ZikoUIInput extends ZikoUIElement {
+  constructor(value = "",datalist) {
+    super();
+    this.element = document.createElement("input");
+    Object.assign(this.events,{input:null})
+    this.setValue(value);
+    if(datalist)this.linkDatalist(datalist)
+    this.render();
+  }
+  onInput(...callbacks){
+    if(!this.events.input)this.events.input = Input(this);
+    this.events.input.onInput(...callbacks);
+    return this;
+  }
+  onChange(...callbacks){
+    if(!this.events.input)this.events.input = Input(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;
+  }
+}
+class ZikoUIInputSearch extends ZikoUIInput {
+  constructor() {
+    super();
+    this._setType("search");
+    this.Length = 0;
+  }
+  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;
+  }
+}
+class ZikoUIInputNumber extends ZikoUIInput {
+  constructor(min, max ,step = 1) {
+    super();
+    this._setType("number");
+    this.setMin(min).setMax(max).setStep(step);
+    this.render();
+  }
+  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;
+  }
+}
+class ZikoUIInputSlider extends ZikoUIInputNumber {
+  constructor(val = 0, min = 0, max = 10, step = 1) {
+    super();
+    this._setType("range");
+    this.setMin(min).setMax(max).setValue(val).setStep(step);
+    this.render();
+  }
+}
+class ZikoUIInputColor extends ZikoUIInput {
+  constructor() {
+    super();
+    this._setType("color");
+    this.background(this.value);
+    this.render();
+    this.onInput(() => this.background(this.value));
+  }
+}
+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 {
+  constructor() {
+    super();
+    this._setType("checkbox");
+    this.cursor("pointer");
+  }
+  get checked() {
+    return this.element.checked;
+  }
+  check(checked = true) {
+    this.element.checked = checked;
+    return this;
+  }
+  color(color) {
+    this.element.style.accentColor = color;
+    return this;
+  }
+}
+class ZikoUIInputRadio extends ZikoUIInput {
+  constructor() {
+    super();
+    this._setType("radio");
+    this.cursor("pointer");
+  }
+  get checked() {
+    return this.element.checked;
+  }
+  check(checked = true) {
+    this.element.checked = checked;
+    return this;
+  }
+  color(color) {
+    this.element.style.accentColor = color;
+    return this;
+  }
+}
+
+
+class ZikoUIInputImage extends ZikoUIElement {
+  constructor(text = "File") {
+    super();
+    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);
+  }
+  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;
+  }
+}
+
+class ZikoUIInputDatalist extends ZikoUIElement {
+  constructor(...options){
+    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)));
+    return this;
+  }
+}
+const input = (value,datalist) => {
+  if(value instanceof Object){
+    const {datalist,placeholder}=value;
+    value=value.value??"";
+    return new ZikoUIInput(value,datalist).setPlaceholder(placeholder);
+  }
+  return new ZikoUIInput(value,datalist);
+}
+const datalist = (...options) => new ZikoUIInputDatalist(...options);
+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);
+}
+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);
+}
+const search = (...a) => new ZikoUIInputSearch().connect(...a);
+const inputImage = (text) => new ZikoUIInputImage(text);
+const inputPassword = () => new ZikoUIInputPassword();
+const inputEmail = () => new ZikoUIInputEmail();
+const inputColor = () => new ZikoUIInputColor();
+const inputTime = () => new ZikoUIInputTime();
+const inputDate = () => new ZikoUIInputDate();
+const inputDateTime = () => new ZikoUIInputDateTime();
+const checkbox = () => new ZikoUIInputCheckbox();
+const radio = () => new ZikoUIInputRadio();
+
+
+export {
+  input,
+  search,
+  slider,
+  checkbox,
+  radio,
+  datalist,
+  inputNumber,
+  inputColor,
+  inputDate,
+  inputDateTime,
+  inputEmail,
+  inputImage,
+  inputPassword,
+  inputTime,
+};
+export {textarea} from "./textarea.js";

package/src/UI/Inputs/Primitives/select.js

@@ -0,0 +1,15 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+import { ZikoUIInputOption } from "./elements.js";
+class ZikoUISelect extends ZikoUIElement {
+    constructor(){
+      super();
+      this.element=document.createElement("select");
+      this.render()
+    }
+    addOptions(...options) {
+      options.map(n => this.append(new ZikoUIInputOption(n)));
+      return this;
+    }
+  }
+const select=()=>new ZikoUISelect()
+export{select,ZikoUISelect}

package/src/UI/Inputs/Primitives/textarea.js

@@ -0,0 +1,16 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+
+class ZikoUITextArea extends ZikoUIElement {
+    constructor() {
+      super();
+      this.element = document.createElement("textarea");
+      //Object.assign(this,inputComposer.call(this));
+      this.render();
+    }
+    get value(){
+      return this.element.textContent;
+    }
+  }
+
+  const textarea =()=> new ZikoUITextArea();
+  export {textarea}

package/src/UI/Inputs/camera.js

@@ -0,0 +1,23 @@
+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
+    }
+    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/UI/Inputs/index.js

@@ -0,0 +1,20 @@
+export {btn} from "./Primitives/btn.js"
+export {
+    input,
+    search,
+    slider,
+    checkbox,
+    radio,
+    datalist,
+    inputNumber,
+    inputColor,
+    inputDate,
+    inputDateTime,
+    inputEmail,
+    inputImage,
+    inputPassword,
+    inputTime,
+  } from "./Primitives/inputs.js"
+export {textarea} from "./Primitives/textarea.js";
+export {select} from "./Primitives/select.js";
+export {inputCamera} from "./camera.js"

package/src/UI/List/index.js

@@ -0,0 +1,130 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+import {text} from "../Text/index.js";
+class ZikoUILI extends ZikoUIElement{
+  constructor(UI){
+    super();
+    this.element=document.createElement("li");
+    this.append(UI);
+    this.render()
+  }
+}
+class ZikoUIList extends ZikoUIElement {
+    constructor(element,name) {
+      super(element,name);
+      delete this.append;
+      //this.style({ listStylePosition: "inside" });
+    }
+    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);
+    this.render();
+  }
+  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);
+    this.render();
+  }
+}
+const li=UI=>new ZikoUILI(UI)
+const ol = (...arr) => new ZikoUIOList(...arr);
+const ul = (...arr) => new ZikoUIUList(...arr);
+
+export{ol,ul,li}

package/src/UI/Media/Audio/index.js

@@ -0,0 +1,26 @@
+import ZikoUIElement from "../../ZikoUIElement";
+class ZikoUIAudio extends ZikoUIElement {
+    constructor(src) {
+      super("audio","audio");
+      this.element.setAttribute("src", src);
+      this.render();
+      this.controls();
+    }
+    useControls(enabled = true) {
+      this.element.controls = enabled;
+      return this;
+    }
+    play() {
+      this.element.play();
+      return this;
+    }
+    pause() {
+      this.element.pause();
+      return this;
+    }
+  }
+const audio = (src) => new ZikoUIAudio(src);
+export {
+    audio,
+    ZikoUIAudio
+}

package/src/UI/Media/Image/figure.js

@@ -0,0 +1,17 @@
+import ZikoUIElement from "../../ZikoUIElement";
+class ZikoUIFigure extends ZikoUIElement{
+    constructor(src,caption){
+      super("figure","figure")
+      this.img=src.width("100%").element;
+      this.caption=document.createElement("figcaption");
+      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);
+export{
+    figure,
+    ZikoUIFigure
+}

package/src/UI/Media/Image/image.js

@@ -0,0 +1,34 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+class ZikoUIImage extends ZikoUIElement {
+    constructor(src, w, h) {
+      super("image","image");
+      this.value=src;
+      if (src.nodeName === "IMG")this.element.setAttribute("src", src.src);
+      else this.element.setAttribute("src", src);
+      if (typeof w == "number") w += "%";
+      if (typeof h == "number") h += "%";
+      this.style({ border: "1px solid black", width: w, height: h });
+      this.render();
+    }
+     updateSrc(url){
+      this.value=url;
+      this.element.src=url;
+     return this;
+    }
+    toggleSrc(...values){
+      values=values.map(n=>""+n);
+      let index=values.indexOf(""+this.value);
+      if(index!=-1&&index!=(values.length-1))this.updateSrc(values[index+1]);
+      else this.updateSrc(values[0]);
+      return this;
+    }
+    alt(alt){
+      this.element.alt=alt;
+      return this;
+    }
+  }
+const image = (src, width, height) => new ZikoUIImage(src, width, height);
+export{
+    image,
+    ZikoUIImage
+}

package/src/UI/Media/Image/index.js

@@ -0,0 +1,2 @@
+export * from "./image";
+export * from "./figure";

package/src/UI/Media/Video/index.js

@@ -0,0 +1,37 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+class ZikoUIVideo extends ZikoUIElement {
+    constructor(src="", w = "100%", h = "50vh") {
+      super("video","video");
+      if (src.nodeName === "VIDEO") this.element.setAttribute("src", src.src);
+      else this.element.setAttribute("src", src);
+      if (typeof w == "number") w += "%";
+      if (typeof h == "number") h += "%";
+      this.style({ width: w, height: h });
+      this.render();
+    }
+    useControls(enabled = true) {
+      this.element.controls = enabled;
+      return this;
+    }
+    play() {
+      this.element.play();
+      return this;
+    }
+    pause() {
+      this.element.pause();
+      return this;
+    }
+    poster(src=""){
+      this.element.poster=src;
+      return this;
+    }
+    usePIP(e){
+      this.element.requestPictureInPicture(e);
+      return this;
+    }
+  }
+const video = (src, width, height) => new ZikoUIVideo(src, width, height);
+export {
+  video,
+  ZikoUIVideo
+}

package/src/UI/Media/index.js

@@ -0,0 +1,3 @@
+export * from "./image";
+export * from "./video";
+export * from "./audio";