ziko 0.0.5 → 0.0.6

package/core/UI/CustomElement/Flex.js

@@ -1,97 +0,0 @@
-import ZikoUIElement from "../ZikoUIElement.js"
-class ZikoUIFlex extends ZikoUIElement {
-  constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
-    this.direction = "cols";
-    if (typeof w == "number") w += "%";
-    if (typeof h == "number") h += "%";
-    this.style({ width: w, height: h });
-    this.style({ display: "flex" });
-    this.render();
-  }
-  resp(px,wrap = true) {
-    this.wrap(wrap);
-    if (this.element.clientWidth < px) this.vertical();
-    else this.horizontal();
-    return this;
-  }
-  setSpaceAround() {
-    this.style({ justifyContent: "space-around" });
-    return this;
-  }
-  setSpaceBetween() {
-    this.style({ justifyContent: "space-between" });
-    return this;
-  }
-  setBaseline() {
-    this.style({ alignItems: "baseline" });
-    return this;
-  }
-  gap(g) {
-    if (this.direction === "row") this.style({ columnGap: g });
-    else if (this.direction === "column") this.style({ rowGap: g });
-    return this;
-  }
-  wrap(value = "wrap") {
-    const values = ["no-wrap", "wrap","wrap-reverse"];
-    this.style({
-      flexWrap: typeof value === "string" ? value : values[+value],
-    });
-    return this;
-  }
-  _justifyContent(align = "center") {
-    this.style({ justifyContent: align });
-    return this;
-  }
-  vertical(x, y, order=1) {
-    set_vertical.call(this,order)
-    this.style({
-      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
-    });
-    return this;
-  }
-  horizontal(x, y, order=1) {
-    set_horizontal.call(this,order)
-    this.style({
-      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
-    });
-    return this;
-  }
-  show() {
-    this.isHidden = false;
-    this.style({ display: "flex" });
-    return this;
-  }
-}
-
-const Flex = (...ZikoUIElement) =>{
-  let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
-  }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
-}
-function set_vertical(direction){
-  direction == 1
-    ? this.style({ flexDirection: "column" })
-    : direction == -1 && this.style({ flexDirection: "column-reverse" });
-  return this;
-}
-function set_horizontal(direction){
-direction == 1
-    ? this.style({ flexDirection: "row" })
-    : direction == -1 && this.style({ flexDirection: "row-reverse" });
-  return this;
-}
-function map_pos_x(align){
-let pos = ["flex-start", "center", "flex-end"];
-if (typeof align === "number") align = pos[align + 1];
-return align;
-}
-function map_pos_y(align){
-return map_pos_x(-align);
-}
-export{Flex,ZikoUIFlex}

package/core/UI/CustomElement/Grid.js

@@ -1,30 +0,0 @@
-import ZikoUIElement from "../ZikoUIElement.js"
-class ZikoUIGrid extends ZikoUIElement {
-    constructor(tag ="div", w = "50vw", h = "50vh") {
-      super(tag,"Grid");
-      this.direction = "cols";
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.style({ border: "1px solid black", width: w, height: h });
-      this.style({ display: "grid" });
-      this.render();
-    }
-    columns(n) {
-        let temp = "";
-        for (let i = 0; i < n; i++) temp = temp.concat(" auto");
-        this.#templateColumns(temp);
-        return this;
-    }
-    #templateColumns(temp = "auto auto") {
-        this.style({ gridTemplateColumns: temp });
-        return this;
-    }
-    gap(w = 10, h = w) {
-        if(typeof (w) === "number")w += "px";
-        if(typeof (h) === "number")h += "px";
-        this.style({gridColumnGap: w,gridRowGap: h});
-        return this;
-    }
-}
-const Grid = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
-export {Grid,ZikoUIGrid};

package/core/UI/CustomElement/index.js

@@ -1,3 +0,0 @@
-export { Flex} from "./Flex.js";
-export { Grid} from "./Grid.js";
-export * from "./Elements"

package/core/UI/Embaded/index.js

@@ -1 +0,0 @@
-

package/core/UI/Inputs/Primitives/btn.js

@@ -1,30 +0,0 @@
-import ZikoUIElement from "../../ZikoUIElement.js";
-class ZikoUIBtn extends ZikoUIElement {
-    constructor(value = "button") {
-      super("button","btn");
-      this.element = document.createElement("button");
-      this.setValue(value);
-      this.st.cursor("pointer");
-    }
-    setValue(value) {
-      if (value instanceof ZikoUIElement) value.setTarget(this.element);
-      else {
-        this.element.appendChild(document.createTextNode(""));
-        this.element.childNodes[0].data = value;
-      }
-      return this;
-    }
-    get value() {
-      return this.element.innerText;
-    }
-    toggleValues(...values) {
-      values = values.map((n) => "" + n);
-      let index = values.indexOf("" + this.value);
-      if (index != -1 && index != values.length - 1)
-        this.setValue(values[index + 1]);
-      else this.setValue(values[0]);
-      return this;
-    }
-  }
-const btn = (value) => new ZikoUIBtn(value);
-export{btn}

package/core/UI/Inputs/Primitives/elements.js

@@ -1,28 +0,0 @@
-import ZikoUIElement from "../../ZikoUIElement.js";
-class ZikoUILabel extends ZikoUIElement{
-    constructor(){
-      super();
-      this.element=document.createElement("label");
-    }
-  }
-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;
-    }
-  }
-  //const op=(n)=>new ZikoUIInputOption(n)
-export{ZikoUILabel,ZikoUIInputOption}

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

@@ -1,324 +0,0 @@
-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)
-  }
-  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);
-  }
-  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);
-  }
-}
-class ZikoUIInputColor extends ZikoUIInput {
-  constructor() {
-    super();
-    this._setType("color");
-    this.background(this.value);
-    this.onInput(() => this.background(this.value));
-  }
-}
-class ZikoUIInputPassword extends ZikoUIInput {
-  constructor() {
-    super();
-    this._setType("password");
-  }
-}
-class ZikoUIInputEmail extends ZikoUIInput {
-  constructor() {
-    super();
-    this._setType("email");
-  }
-}
-class ZikoUIInputTime extends ZikoUIInput {
-  constructor() {
-    super();
-    this._setType("time");
-  }
-}
-class ZikoUIInputDate extends ZikoUIInput {
-  constructor() {
-    super();
-    this._setType("date");
-  }
-}
-class ZikoUIInputDateTime extends ZikoUIInput {
-  constructor() {
-    super();
-    this._setType("datetime-local");
-  }
-}
-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));
-  }
-  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/core/UI/Inputs/Primitives/select.js

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

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

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

package/core/UI/Inputs/camera.js

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

@@ -1,20 +0,0 @@
-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"