ziko 0.0.12 → 0.0.14

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
+}

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

@@ -0,0 +1,37 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+class ZikoUIImage extends ZikoUIElement {
+    constructor(src,alt, w, h) {
+      super("img","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.setAttr("alt", alt)
+      this.style({ border: "1px solid black", width: w, height: h });
+    }
+    get isImg(){
+      return true;
+    }
+     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,alt, width, height) => new ZikoUIImage(src,alt, width, height);
+export{
+    image,
+    ZikoUIImage
+}

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

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

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

@@ -0,0 +1,27 @@
+import { __ZikoUIDynamicMediaElement__ } from "../__ZikoUIDynamicMediaELement__.js";
+class ZikoUIVideo extends __ZikoUIDynamicMediaElement__ {
+    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 });
+    }
+    get isVideo(){
+      return true;
+    }
+    usePoster(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/user-interface/elements/primitives/media/__ZikoUIDynamicMediaELement__.js

@@ -0,0 +1,47 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+class __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
+    constructor(element, name) {
+      super(element, name);
+      this.useControls();
+    }
+    get t(){
+      return this.element.currentTime;  
+    }
+    useControls(enabled = true) {
+      this.element.controls = enabled;
+      return this;
+    }
+    enableControls(){
+      this.element.controls = true;
+      return this;
+    }
+    disableControls(){
+      this.element.controls = true;
+      return this;
+    }
+    toggleControls(){
+      this.element.controls = !this.element.controls;
+      return this;
+    }
+    play() {
+      this.element.play();
+      return this;
+    }
+    pause() {
+      this.element.pause();
+      return this;
+    }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay(){
+
+    }
+    onPause(){
+
+    }
+  }
+export {
+  __ZikoUIDynamicMediaElement__
+}

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

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

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

@@ -0,0 +1,100 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
+class ZikoUIHtmlTag extends ZikoUIContainerElement {
+  constructor(element) {
+    super(element,"html");
+  }
+}
+class ZikoUIBtn extends ZikoUIElement {
+  constructor(value = "button") {
+    super("button","btn");
+    this.element = document?.createElement("button");
+    this.setValue(value);
+    this.st.cursor("pointer");
+    globalThis.__Ziko__.__Config__.default.render && this.render();
+  }
+  get isBtn(){
+    return true
+  }
+  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;
+  }
+}
+class ZikoUIBr extends ZikoUIElement {
+    constructor() {
+      super("br","br");
+    }
+    get isBr(){
+      return true
+    }
+  }
+  class ZikoUIHr extends ZikoUIElement {
+    constructor() {
+      super("hr","hr");
+      this.setAttr("role", "none");
+    }
+    get isHr(){
+      return true
+    }
+  }
+  class ZikoUILink extends ZikoUIContainerElement{
+    constructor(href){
+      super("a","link");
+      Object.assign(this.cache,{
+        defaultStyle:{
+          color:"#0275d8",
+          textDecoration: "none"
+        },
+        hoverStyle:{
+          color:"#01447e",
+          textDecoration: "underline"
+        },
+      })
+      this.setHref(href);
+      this.style(this.cache.defaultStyle);
+      this.onPtrEnter(()=>this.style(this.cache.hoverStyle));
+      this.onPtrLeave(()=>this.style(this.cache.defaultStyle));
+    }
+    setHref(href){
+      this.element.href=href;
+    }
+    get isLink(){
+      return true
+    }
+  }
+  const br = () => new ZikoUIBr();
+  const hr = () => new ZikoUIHr();
+  const brs = (n=1)=> new Array(n).fill(new ZikoUIBr());
+  const hrs = (n=1)=> new Array(n).fill(new ZikoUIHr());
+  const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
+  const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
+  const btn = (value) => new ZikoUIBtn(value);
+export{
+  html,
+  btn,
+  br,
+  hr,
+  brs,
+  hrs,
+  link,
+  ZikoUIHtmlTag,
+  ZikoUIBr,
+  ZikoUIHr,
+  ZikoUILink
+}

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

@@ -0,0 +1,82 @@
+import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
+class ZikoUIMain extends ZikoUIContainerElement{
+    constructor(){
+      super("main","Main");
+    }
+    get isMain(){
+      return true
+    }
+  }
+  class ZikoUIHeader extends ZikoUIContainerElement{
+    constructor(){
+      super("header","Header");
+    }
+    get isHeader(){
+      return true
+    }
+  }
+  class ZikoUINav extends ZikoUIContainerElement{
+    constructor(){
+      super("nav","Nav");
+    }
+    get isNav(){
+      return true
+    }
+  }
+  class ZikoUISection extends ZikoUIContainerElement{
+    constructor(){
+      super("section","Section");
+      this.style({position:"relative"})
+    }
+    get isSection(){
+      return true
+    }
+  }
+  class ZikoUIArticle extends ZikoUIContainerElement{
+    constructor(){
+      super("article","Article");
+    }
+    get isArticle(){
+      return true
+    }
+  }
+  class ZikoUIAside extends ZikoUIContainerElement{
+    constructor(){
+      super("aside","Aside");
+    }
+    get isAside(){
+      return true
+    }
+  }
+  class ZikoUIFooter extends ZikoUIContainerElement{
+    constructor(){
+      super("footer","Footer");
+      this.element=document?.createElement("footer");
+    }
+    get isFooter(){
+      return true
+    }
+  }
+const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
+const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
+const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
+const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
+const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
+const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
+const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
+export{
+  Header,
+  Main,
+  Section,
+  Article,
+  Aside,
+  Nav,
+  Footer,
+  ZikoUIHeader,
+  ZikoUIMain,
+  ZikoUISection,
+  ZikoUIArticle,
+  ZikoUIAside,
+  ZikoUINav,
+  ZikoUIFooter
+}

package/src/user-interface/elements/primitives/table/elements.js

@@ -0,0 +1,94 @@
+import ZikoUIElement from "../ZikoUIElement.js"
+import { text } from "../text/text.js";
+class ZikoUITh extends ZikoUIElement{
+    constructor(...ZikoUIElement){
+        super()
+        this.element=document?.createElement("Th");
+        this.append(...ZikoUIElement)
+    }
+}
+class ZikoUITr extends ZikoUIElement{
+    constructor(...ZikoUIElement){
+        super()
+        this.element=document?.createElement("Tr");
+        this.append(...ZikoUIElement)
+    }
+}
+class ZikoUITd extends ZikoUIElement{
+    constructor(...ZikoUIElement){
+        super()
+        this.element=document?.createElement("Td");
+        this.append(...ZikoUIElement)
+    }
+}
+class ZikoUIThead extends ZikoUIElement{
+    constructor(...ZikoUITr){
+        super()
+        this.element=document?.createElement("Thead");
+        this.append(...ZikoUITr)
+    }
+}
+class ZikoUITbody extends ZikoUIElement{
+    constructor(...ZikoUITr){
+        super()
+        this.element=document?.createElement("Tbody");
+        this.append(...ZikoUITr)
+    }
+}
+class ZikoUITfoot extends ZikoUIElement{
+    constructor(...ZikoUITr){
+        super()
+        this.element=document?.createElement("Tfoot");
+        this.append(...ZikoUITr)
+    }
+}
+export class ZikoUICaption extends ZikoUIElement{
+    constructor(ZikoUIElement){
+        super()
+        this.element=document?.createElement("Caption");
+        this.append(ZikoUIElement)
+    }
+}
+class ZikoUICol extends ZikoUIElement{
+    constructor(...ZikoUIElement){
+        super()
+        this.element=document?.createElement("Col");
+        this.append(...ZikoUIElement)
+    }
+}
+class ZikoUIColgroup extends ZikoUIElement{
+    constructor(...ZikoUIElement){
+        super()
+        this.element=document?.createElement("Colgroup");
+        this.append(...ZikoUIElement)
+    }
+}
+
+const tr=(...ZikoUIElement)=>new ZikoUITr(...ZikoUIElement)
+const th=(...UI)=>{
+    UI=UI.map(n=>{
+        if(!(n instanceof ZikoUIElement))n=text(n)
+        return n
+    })
+    return new ZikoUITh(...UI)
+}
+const td=(...UI)=>{
+    UI=UI.map(n=>{
+        if(!(n instanceof ZikoUIElement))n=text(n)
+        return n
+    })
+    return new ZikoUITd(...UI)
+}
+const thead=(...ZikoUITd)=>{
+    ZikoUITd=ZikoUITd.map(n=>{
+        if(!(n instanceof ZikoUIElement))n=td(n)
+        return n
+    })
+    return new ZikoUIThead(...UI)
+}
+const tbody=(...ZikoUITr)=>new ZikoUITbody(...ZikoUITr)
+const tfoot=(...ZikoUITr)=>new ZikoUITfoot(...ZikoUITr)
+const caption=(ZikoUITr)=>new ZikoUICaption(ZikoUITr)
+
+
+export {th,tr,td,thead,tbody,tfoot,caption}

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

@@ -0,0 +1,3 @@
+export{
+    Table
+} from "./table.js"

package/src/user-interface/elements/primitives/table/table.js

@@ -0,0 +1,115 @@
+import ZikoUIElement from "../ZikoUIElement.js"
+import { tbody,caption,ZikoUICaption,thead} from "./elements.js";
+import { matrix } from "../../../../math/matrix/index.js";
+import { MatrixToTableUI } from "./utils.js";
+class ZikoUITable extends ZikoUIElement {
+    constructor(body,{caption=null,head=null,foot=null}={}){
+        super("table","Table");
+        this.structure={
+            caption,
+            head,
+            body:null,
+            foot
+        }
+        if(body)this.fromMatrix(body);
+        if(caption)this.setCaption(caption)
+    }
+    get isTable(){
+        return true;
+      }
+    get caption(){
+        return this.structure.caption;
+    }
+    get header(){
+
+    }
+    get body(){
+
+    }
+    get footer(){
+
+    }
+    setCaption(c){
+        this.removeCaption();
+        this.structure.caption=caption(c);
+        this.append(this.structure.caption);
+        return this;
+    }
+    removeCaption(){
+        if(this.structure.caption)this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
+        this.structure.caption=null;
+        return this;
+    }
+    setHeader(...c){
+        this.tHead=thead(...c);
+        this.append(this.tHead);
+        return this;
+    }
+    removeHeader(){
+        this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
+        return this;
+    }
+    setFooter(c){
+        this.structure.caption=caption(c);
+        this.append(this.structure.caption);
+        return this;
+    }
+    removeFooter(){
+        this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
+        return this;
+    }
+    fromMatrix(bodyMatrix) {
+        (bodyMatrix instanceof Array)?this.bodyMatrix=matrix(bodyMatrix):this.bodyMatrix=bodyMatrix;
+        if(this.structure.body)this.remove(this.structure.body);
+        this.structure.body=tbody()
+        this.append(this.structure.body);
+        this.structure.body.append(...MatrixToTableUI(this.bodyMatrix))
+        //this.structure.body.append(...MatrixToTableUI(matrix))
+        //this.cellStyles({ padding: "0.2rem 0.4rem", textAlign: "center" });
+        return this;
+      }
+    transpose() {
+        this.fromMatrix(this.bodyMatrix.T);
+        return this;
+      }
+    hstack(m) {
+        if(m instanceof ZikoUITable)m=m.bodyMatrix
+        this.fromMatrix(this.bodyMatrix.clone.hstack(m));
+        return this;
+    }
+    vstack(m) {
+        if(m instanceof ZikoUITable)m=m.bodyMatrix
+        this.fromMatrix(this.bodyMatrix.clone.vstack(m));
+        return this;
+    }
+    slice(r0=0,c0=0,r1=this.bodyMatrix.rows-1,c1=this.bodyMatrix.cols-1) {
+        this.fromMatrix(this.bodyMatrix.slice(r0,c0,r1,c1));
+        return this;
+      }
+    sortByCols(n, config = { type: "num", order: "asc" }) {
+        this.fromMatrix(this.bodyMatrix.clone.sortTable(n, config));
+        return this;
+    }
+    sortByRows(n, config = { type: "num", order: "asc" }) {
+        this.fromMatrix(this.bodyMatrix.T.clone.sortTable(n, config).T);
+        return this;
+    }
+    filterByRows(item) {
+        this.fromMatrix(this.bodyMatrix.clone.filterByRows(item));
+        return this;
+    }
+    filterByCols(item) {
+        this.fromMatrix(this.bodyMatrix.clone.filterByCols(item));
+        return this;
+      }
+    forEachRow(callback){
+        this.structure.body.forEach(callback);
+        return this;
+    }
+    forEachItem(callback){
+        this.structure.body.forEach(n=>n.forEach(callback));
+        return this;
+    }
+}
+const Table=(matrix,config)=>new ZikoUITable(matrix,config)
+export {Table}