ziko 0.0.1

package/src/UI/Table/index.js

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

package/src/UI/Table/table.js

@@ -0,0 +1,113 @@
+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)
+        this.render();
+    }
+    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/UI/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/UI/Text/heading.js

@@ -0,0 +1,35 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+class ZikoUIHeading extends ZikoUIElement {
+    constructor(type = 1, value = "") {
+      super(`h${type}`,`h${type}`);
+      this.element = document.createElement("h" + type);
+      this.element.textContent = value;
+      this.render();
+    }
+    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/UI/Text/index.js

@@ -0,0 +1,3 @@
+export { text } from "./text.js";
+export {p} from "./p.js";
+export {h1,h2,h3,h4,h5,h6} from "./heading.js";

package/src/UI/Text/p.js

@@ -0,0 +1,37 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+import {Complex} from "../../Math/Complex/index.js"
+import { text } from "./text.js";
+class ZikoUIParagraphe extends ZikoUIElement {
+    constructor(...value) {
+      super("p","p");
+      this.addValue(...value);
+      this.style({margin:0,padding:0});
+      this.render();
+    }
+    addValue(...value) {
+      for (let i = 0; i < value.length; i++) {
+        if (typeof value[i] == "string" || typeof value[i] == "number") {
+          this.element.appendChild(document.createTextNode(value[i]));
+          this.element.appendChild(document.createElement("br"));
+        } else if (value[i] instanceof ZikoUIElement)
+          this.element.appendChild(value[i].element);
+        else if (value[i] instanceof Complex)
+          text(value.a + " + " + value.b + "i");
+      }
+      return this;
+    }
+    clear() {
+      this.element.childNodes.forEach((e) => e.remove());
+      return this;
+    }
+    setValue(...value) {
+      this.clear();
+      this.addValue(...value);
+      return this;
+    }
+  }
+  const p = (...ZikoUIElement) => new ZikoUIParagraphe().append(...ZikoUIElement);
+  export {
+    p,
+    ZikoUIParagraphe
+  }

package/src/UI/Text/text.js

@@ -0,0 +1,66 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+import {Complex} from "../../Math/Complex/index.js";
+import { __UI__ } from "../../App/Globals/__UI__.js";
+class ZikoUIText extends ZikoUIElement {
+    constructor(...value) {
+      super("span","text");
+      this.element = document.createElement("span");
+      this.text = "";
+      this.addValue(...value);
+      this.st.display("inline-block");
+      this.render();
+    }
+    clear() {
+      this.element.textContent = "";
+      return this;
+    }
+    get value() {
+      return this.element.textContent;
+    }
+    setValue(value = "", add = false) {
+      if (["string", "number"].includes(typeof value)) {
+        this.text = "" + value;
+        if (this.text.includes("\n"))
+          this.text = this.text
+            .split("\n")
+            .map((n) => "<span>".concat(n, "</span></br>"))
+            .join("");
+      }
+       if (value instanceof Complex) this.text = "" + value.UI();
+       /*
+       else if (value instanceof Ziko.Math.Matrix) {
+          let string = "[";
+          for (let j = 0; j < value.arr.length; j++)
+            string +=
+              (j != 0 ? " " : "") +
+              `[${value.arr[j].map((n) => "  " + n.toString() + " ")}],</br>`;
+          string = string.substring(0, string.length - 6) + "]";
+          this.text = "" + string;
+        } 
+        */
+        //else console.error("not supported yet")
+      if (add) this.element.innerHTML += this.text;
+      else this.element.innerHTML = this.text;
+      if (value instanceof Array || value instanceof Set) {
+        if (value instanceof Set) value = [...value];
+        this.addValue(...value);
+      }
+    }  
+    addValue(...value) {
+      value.map((n) => {
+        this.setValue(" ", true);
+        this.setValue(n, true);
+      });
+      return this;
+    }
+    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 text = (...value) => new ZikoUIText(...value)
+ export {text}

package/src/UI/Utils/index.js

@@ -0,0 +1,70 @@
+import ZikoUIElement from "../ZikoUIElement.js";
+const Id = (a) => document.getElementById(a);
+const Class = (a) => [...document.getElementsByClassName(a)];
+const $=(...selector)=>{
+  var ele=[]
+  for(let i=0;i<selector.length;i++){
+    if(typeof selector[i]=="string")ele.push(...document.querySelectorAll(selector[i]));
+    if(selector[i] instanceof ZikoUIElement)ele.push(selector[i].element)
+  }
+  return ele.length===1?ele[0]:ele;
+}
+const addSuffixeToNumber=(value,suffixe="px")=>{
+  if(typeof value === "number") value+=suffixe;
+  if(value instanceof Array)value=value.map(n=>typeof n==="number"?n+=suffixe:n).join(" ");
+  return value;
+}
+const style = (el, styles) => {if(el)Object.assign(el.style, styles)};
+
+function script(src) {
+  const Script = document.createElement("script");
+  Script.setAttribute("src", src);
+  document.head.appendChild(Script);
+}
+function linkStyle(href) {
+  const link = document.createElement("link");
+  link.setAttribute("rel", "stylesheet");
+  link.setAttribute("href", href);
+  document.head.appendChild(link);
+}
+const CloneElement = (UIElement) => {
+  var clone = new UIElement.__proto__.constructor()
+  //waitForUIElm(UIElement).then(e=>console.log(e)).then(()=>clone = new UIElement.__proto__.constructor())
+  //let a = new UIElement.__proto__.constructor()
+  return clone;
+};
+const cloneUI=UIElement=>{
+  return Object.assign(Object.create(Object.getPrototypeOf(UIElement)),UIElement)
+}
+function isPrimitive(value) {
+    return typeof value !== 'object' && typeof value !== 'function' || value === null;
+  }
+const waitElm=(UIElement)=>{
+    return new Promise(resolve => {
+        if (UIElement) {
+            return resolve(UIElement);
+        }
+        const observer = new MutationObserver(() => {
+            if (UIElement) {
+                resolve(UIElement);
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    });
+  }
+export{
+  Id,
+  Class,
+  style,
+  script,
+  linkStyle,
+  CloneElement,
+  cloneUI,
+  isPrimitive,
+  addSuffixeToNumber,
+  waitElm
+}