ziko 0.0.11 → 0.0.13

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

@@ -0,0 +1,36 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+class ZikoUIImage extends ZikoUIElement {
+    constructor(src, 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.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, width, height) => new ZikoUIImage(src, 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,99 @@
+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");
+    }
+    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}

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

@@ -0,0 +1,12 @@
+import { td,tr } from "./elements.js";
+export const MatrixToTableUI=matrix=>{
+    var Tr = new Array(matrix.rows).fill(null).map(() => tr());
+    var Td = matrix.arr.map((n) => n.map(() => null));
+    for (let i = 0; i < Td.length; i++) {
+        for (let j = 0; j < Td[0].length; j++) {
+            Td[i][j] = td(matrix.arr[i][j]);
+            Tr[i].append(Td[i][j]);
+        }
+    }
+    return Tr
+}

package/src/user-interface/elements/primitives/text/__ZikoUIText__.js

@@ -0,0 +1,71 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoContainerElement from "../ZikoUIContainerElement.js";
+import { 
+  ZikoUISubText,
+  ZikoUISupText
+ } from "./text.js";
+import { 
+  Complex,
+  Matrix
+ } from "../../../../math/index.js";
+import { 
+  arr2str,
+  obj2str
+} from "../../../../data/index.js";
+class __ZikoUIText__ extends ZikoContainerElement {
+    constructor(tag, name, lineBreak,...value) {
+      super(tag, name);
+      this.addValue(...value);
+      this.style({margin:0,padding:0});
+      Object.assign(this.cache,{
+        lineBreak,
+      })
+    }
+    get isText(){
+      return true;
+    }
+    get value(){
+      return this.element.textContent;
+    }
+    clear() {
+      this.element.childNodes.forEach((e) => e.remove());
+      this.element.textContent = "";
+      return this;
+    }
+    addValue(...value) {
+      value.forEach((item,i) => {
+        if (typeof item === "string" || typeof item === "number") this.element?.appendChild(globalThis?.document.createTextNode(item));
+        else if (item instanceof ZikoUIElement) this.element?.appendChild(item.element);
+        else if (item instanceof Complex || item instanceof Matrix) this.element?.appendChild(new Text(item.toString()));
+        else if (item instanceof Array) this.element?.appendChild(new Text(arr2str(item)));
+        else if (item instanceof Object) this.element?.appendChild(new Text(obj2str(item)));
+        
+        // if(
+        //   (item !== value[value.length - 1]) 
+        //   && !(value[i+1] instanceof ZikoUIElement)
+        //   && !(value[i-1] instanceof ZikoUIElement)
+        // ) this.element?.appendChild(new Text(" "))
+        
+        if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
+      });
+      if(this.element?.innerHTML){
+        this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
+      }
+      return this
+    }
+    setValue(...value) {
+      this.clear();
+      this.addValue(...value);
+      return this;
+    }
+  }
+class __ZikoUIInlineText__ extends __ZikoUIText__{
+  constructor(tag, name,...value){
+    super(tag, name, ...value)
+    this.cache.breakLine=false;
+  }
+}
+  export {
+    __ZikoUIText__,
+    __ZikoUIInlineText__
+  }

package/src/user-interface/elements/primitives/text/heading.js

@@ -0,0 +1,36 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+class ZikoUIHeading extends ZikoUIElement {
+    constructor(type = 1, value = "") {
+      super(`h${type}`,`h${type}`);
+      this.element.textContent = value;
+    }
+    get isHeading(){
+      return true;
+    }
+    get value() {
+      return this.element.innerText;
+    }
+    setValue(text = "") {
+      this.element.innerText = text;
+      return;
+    }
+    addValue(text = "") {
+      this.element.innerText += text;
+      return this;
+    }
+  }
+const h1=(text="")=>new ZikoUIHeading(1, text);
+const h2=(text="")=>new ZikoUIHeading(2, text);
+const h3=(text="")=>new ZikoUIHeading(3, text);
+const h4=(text="")=>new ZikoUIHeading(4, text);
+const h5=(text="")=>new ZikoUIHeading(5, text);
+const h6=(text="")=>new ZikoUIHeading(6, text);
+export{
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ZikoUIHeading
+}

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

@@ -0,0 +1,3 @@
+export * from "./text";
+export * from "./p";
+export *from "./heading";

package/src/user-interface/elements/primitives/text/p.js

@@ -0,0 +1,26 @@
+import { __ZikoUIText__ } from "./__ZikoUIText__.js";
+class ZikoUIParagraphe extends __ZikoUIText__ {
+    constructor(...value) {
+      super("p", "p", true, ...value);
+    }
+    get isPara(){
+      return true;
+    }
+}
+class ZikoUIBlockQuote extends __ZikoUIText__ {
+    constructor(cite,quote) {
+      super("blockquote", "blockquote", true, quote);
+      this.setAttr("cite", cite);
+    }
+    get isBlockQuote(){
+      return true;
+    }
+}
+const p = (...ZikoUIElement) => new ZikoUIParagraphe(...ZikoUIElement);
+const blockQuote = (cite, quote) => new ZikoUIBlockQuote(cite, quote);
+export {
+  p,
+  blockQuote,
+  ZikoUIParagraphe,
+  ZikoUIBlockQuote
+}