ziko 0.0.1

package/src/UI/CustomElement/Elements/CodeNote/CodeCell.js

@@ -0,0 +1,176 @@
+import { Flex, ZikoUIFlex } from "../../Flex";
+import { ZikoUICodeNote } from "./CodeNote";
+import { 
+    Input,
+    Output,
+    Right,
+    Left
+ } from "./SubElements";
+class ZikoUICodeCell extends ZikoUIFlex{
+    constructor(code="",{type="js",order=null}={}){
+        super("section")
+        Object.assign(this.cache,{
+            state:null,
+            order,
+            type,
+            metadata:{
+                created:Date.now(),
+                updated:null
+            }
+        })
+        this.Input=Input(code);
+        this.Output=Output();
+        this.InOut=Flex(
+            this.Input,
+            this.Output
+        ).vertical().style({
+            width:"100%",
+            margin:"10px auto"
+        });
+        this.RightControl=Right(this);
+        this.LeftControl=Left(this)
+        this.append(
+            this.LeftControl,
+            this.InOut,
+            this.RightControl
+        )
+        this.horizontal(-1,1).style({
+            //background:"#444",
+            width:"95vw",
+            margin:"0 auto",
+            border:"1px darkblue dotted"
+        })
+        this.Input.onKeyDown(e=>{
+            if(e.kd==="Enter"){
+                if(e.event.shiftKey){
+                    e.event.preventDefault();
+                    this.execute(this.cache.order);
+                }
+                else {
+                    //console.log(this.Input.element.firstChild.firstChild.textContent.at(-1))
+                }
+            }
+            if(this.cache.parent instanceof ZikoUICodeNote){
+                if(e.kd==="ArrowDown" && e.event.shiftKey ){
+                    this.cache.parent.next();
+                }
+                if(e.kd==="ArrowUp" && e.event.shiftKey){
+                    this.cache.parent.previous();
+                }
+            }
+        }
+        )
+        this.Input.onFocus(()=>{
+            if(this.cache.parent instanceof ZikoUICodeNote){
+                this.cache.parent.cache.currentNote=this;
+                this.cache.parent.setCurrentNote(this);
+            }
+        })
+        this.Input.onPaste((e)=>{
+            //e.event.preventDefault();
+            //this.setValue(this.codeText.trim())
+        })
+        // this.Input.onKeyPress(e=>{
+        //     if(e.kp==="(")a.Input.element.textContent+=")";
+        //     if(e.kp==="[")a.Input.element.textContent+="]";
+        //     if(e.kp==="{")a.Input.element.textContent+="}";
+        // })    
+    }
+    // space &nbsp
+    get codeText() {
+        return this.Input.element.innerText.trim();
+    }
+    get codeHTML() {
+        return this.Input.element.innerHTML;
+    }
+    get outputHTML(){
+        return this.Output.element.innerHTML;
+    }
+    setValue(codeText){
+        this.Input[0].setValue(codeText);
+        return this;
+    }
+    cellData(){
+        return {
+            input:this.codeText,
+            output:this.outputHTML,
+            order:this.cache.order,
+            type:this.cache.type     
+        }
+    }
+    execute(order){
+        this.clearOutput();
+        this.evaluate(order);
+        this.cache.metadata.updated=Date.now();
+        return this;
+    }
+    #evaluateJs(order){
+        try{
+            this.LeftControl[0].setValue("pending");
+            this.cache.state="pending";  
+            globalThis.eval(this.Input.element.innerText);
+        }
+        catch(err){
+            console.log(err)
+            text(`Error : ${err.message}`).style({
+                color:"red",
+                background:"gold",
+                border:"2px red solid",
+                padding:"10px",
+                margin:"10px 0",
+                display:"flex",
+                justifyContent: "center",
+            });
+            this.LeftControl[0].setValue("Err");
+            this.cache.state="Error";            
+        }
+        finally{
+            if(this.cache.state==="pending"){
+                this.cache.state="success";
+                this.setOrder(order);
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    this.cache.parent.incrementOrder();
+                    this.cache.parent.next();
+                }
+            }
+        }
+    }
+    #evaluateMd(){
+
+    }
+    #evaluateHtml(){
+
+    }
+    evaluate(order){
+        globalThis.__Target__=this.Output.element;
+        switch(this.cache.type){
+            case "js":this.#evaluateJs(order);break;
+        }
+        return this;
+    }
+    clearInput(){
+        this.Output.element.innerText="";
+        return this;
+    }
+    clearOutput(){
+        this.Output.element.innerText="";
+        return this;
+    }
+    setOrder(order,render=true){
+        this.cache.order=order;
+        if(render){
+            (typeof order === "number")?this.LeftControl[0].setValue(`[${order}]`):this.LeftControl[0].setValue("[-]");
+        }
+        return this;
+    }
+    focus(){
+        this.Input.element.focus();
+        return this;
+    }
+}
+
+
+const CodeCell=(codeText,{type,order}={})=>new ZikoUICodeCell(codeText,{type,order});
+export{
+    CodeCell
+}

package/src/UI/CustomElement/Elements/CodeNote/CodeNote.js

@@ -0,0 +1,69 @@
+import { ZikoUIFlex } from "../../Flex";
+import { CodeCell } from "./CodeCell";
+class ZikoUICodeNote extends ZikoUIFlex{
+    constructor(){
+        super("section");
+        Object.assign(this.cache,{
+            order:0,
+            currentNote:null,
+            currentNoteIndex:null
+        })
+        this.vertical(0,0);
+    }
+    setCurrentNote(currentNote){
+        this.cache.currentNote=currentNote;
+        this.cache.currentNoteIndex=this.items.findIndex(n=>n===currentNote);
+        currentNote.focus();
+        this.items.forEach(n=>n.Input.style({
+            border: "1px solid #ccc"
+        }))
+        currentNote.Input.style({
+            border:"2px lightgreen solid"
+        });
+        return this;
+    }
+    addNote(text=""){
+        this.append(CodeCell(text));
+        return this;
+    }
+    execute(){
+        this.cache.currentNote.execute();
+        this.incrementOrder();
+        return this;
+    }
+    incrementOrder(){
+        this.cache.order++;
+        this.cache.currentNote.setOrder(this.cache.order);
+        return this;
+    }
+    next(){
+        if(this.cache.currentNote===this.items.at(-1)){
+            this.addNote();
+            this.setCurrentNote(this.items.at(-1));
+        }
+        else this.setCurrentNote(this.items[this.cache.currentNoteIndex+1]); 
+        return this;
+    }
+    previous(){
+        // add append before
+        if(this.cache.currentNote!==this.items[0]){
+            this.setCurrentNote(this.items[this.cache.currentNoteIndex-1]);
+        }
+        return this;
+    }
+    data(){
+        return this.items.map(n=>n.cellData());
+    }
+    serialize(){
+        return JSON.stringify(this.data());
+    }
+    import(data=[]){
+        data.forEach((n,i)=>this.addNote(data[i].input));
+        return this;
+    }
+}
+const CodeNote=()=>new ZikoUICodeNote();
+export{
+    CodeNote,
+    ZikoUICodeNote
+}

package/src/UI/CustomElement/Elements/CodeNote/SubElements.js

@@ -0,0 +1,64 @@
+import { ZikoHtml } from "../../../Misc";
+import { Flex } from "../../Flex";
+import { text } from "../../../Text";
+import { ZikoUICodeNote } from "./CodeNote";
+const Input=(codeText="")=>ZikoHtml("code",codeText).style({
+    width:"100%",
+    height:"auto",
+    padding:"10px",
+    boxSizing:"border-box",
+    border: "1px solid #ccc", 
+    outline: "none",
+    fontSize: "1rem", 
+    fontFamily: "Lucida Console, Courier New, monospace", 
+    padding: "1rem 0.5rem", 
+    wordBreak:"break-all",
+    background:"#f6f8fa",
+    color:"#0062C3"
+}).setAttr("contenteditable",true).setAttr("spellcheck",false);
+const Output=()=>ZikoHtml("output").style({
+    width:"100%",
+    height:"auto",
+    padding:"5px 0",
+})
+const Left=(ctx)=>Flex(
+    text("[ ]")
+    ).style({
+        width:"50px",
+        //height:getComputedStyle(ctx.Input.element).height,
+        height:"50px",
+        margin:"10px 4px",
+        padding:"5px",
+        color:"darkblue",
+        borderBottom:"4px solid gold",
+    }).horizontal(0,0);
+const BTN_STYLE={
+    background:"none",
+    width:"25px",
+    height:"25px",
+    fontSize:"1.2rem",
+    cursor:"pointer"
+}
+const Right=(ctx)=>Flex(
+    text('▶️').style(BTN_STYLE).onClick(e=>{
+        if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
+        ctx.execute();
+        globalThis.__Target__=e.target.parent.parent[1][1];
+    }),
+    text('📋').style(BTN_STYLE).onClick(()=>{
+        navigator.clipboard.writeText(ctx.codeText)
+    }),
+    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
+    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
+).style({
+    width:"70px",
+    height:"50px",
+    //background:"cyan",
+    margin:"10px 0"
+}).horizontal(0,0).wrap(true);
+export{
+    Input,
+    Output,
+    Right,
+    Left
+}

package/src/UI/CustomElement/Elements/CodeNote/index.js

@@ -0,0 +1,2 @@
+export * from "./CodeCell";
+export * from "./CodeNote";

package/src/UI/CustomElement/Elements/Columns.js

@@ -0,0 +1 @@
+// dipslay table

package/src/UI/CustomElement/Elements/Swipper.js

@@ -0,0 +1,4 @@
+// Next 
+// Previous
+// Vertical 
+// Horizontal

package/src/UI/CustomElement/Elements/Tabs/index.js

@@ -0,0 +1,111 @@
+// Next 
+// Previous
+// Vertical 
+// Horizontal
+import { Flex, ZikoUIFlex } from "../../Flex";
+class ZikoUITabs extends ZikoUIFlex{
+    #ACTIVE_ELEMENT_INDEX=0;
+    constructor(Controllers,Contents){
+        super("div","Tabs");
+        this.style({
+            boxSizing:"border-box",
+            backgroundColor: "blanchedalmond",
+            border:"1px red solid",
+            margin:"30px",
+        })
+        this.append(
+            Flex().size("auto","auto").style({
+                boxSizing:"border-box",
+                justifyContent:"center",
+                alignItems:"center",
+                textAlign:"center",
+
+                minWidth:"50px",
+                minHeight:"50px",
+
+                backgroundColor:"darkblue",
+                border:"1px darkblue solid",
+
+            }),
+            Flex().style({
+                boxSizing:"border-box",
+                justifyContent:"center",
+                alignItems:"center",
+                textAlign:"center",
+
+                width:"100%",
+                height:"100%",
+                backgroundColor:"darkslategrey",
+            })
+        )
+        this.Controller=this.items[0].setAttr("role","tablist");
+        this.Content=this.items[1];
+        if(Controllers.length!==Contents.length)console.error("")
+        else {
+            this.Controller.append(...Controllers);
+            this.Content.append(...Contents);
+            // Add transition
+        }
+        this.init()
+        this.display(0);
+    }
+    init(){  
+        // Remove old listener
+        for(let i=0;i<this.Controller.length;i++){
+            this.Controller[i].setAttr("role","tab").setAttr("aria-controls",`tab${i}`);
+            this.Content[i].setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${i}`).setAttr("tabindex",-1);
+        }
+        this.Controller.forEach(item=>item.onClick(e=>{
+            const tab=e.target.element.getAttribute("aria-controls");
+            const index=+tab.slice(3)
+            this.Content.filter(n=>n.element.getAttribute("aria-labelledby")===tab,()=>{
+                if(this.#ACTIVE_ELEMENT_INDEX!==index)this.display(index);
+            })
+        }))
+        return this;
+    }
+    addPairs(ControllerItem,ContentItem){
+        this.Controller.append(ControllerItem);
+        this.Content.append(ContentItem);
+        const length=this.Controller.length;
+        this.Controller.at(-1).setAttr("role","tab").setAttr("aria-controls",`tab${length-1}`);
+        this.Content.at(-1).setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${length-1}`).setAttr("tabindex",-1);
+        // Add listener
+        return this;
+    }
+    removePairs(index){
+
+    }
+    display(index){
+        this.#ACTIVE_ELEMENT_INDEX=index%this.Content.length;
+        this.Controller.forEach(n=>n.setAttr("tabindex",-1).setAttr("aria-selected",false));
+        this.Controller.at(this.#ACTIVE_ELEMENT_INDEX).setAttr("tabindex",0).setAttr("aria-selected",true);
+        (async ()=>{
+           await this.Content.forEach(n=>n.st.hide());
+           await this.Content.at(this.#ACTIVE_ELEMENT_INDEX).setAttr("tabindex",0).st.show();
+        })()
+
+        return this;   
+    }
+    next(i=1){
+        this.display(this.#ACTIVE_ELEMENT_INDEX+i);
+        return this;
+    }
+    previous(i=1){
+        this.display(this.#ACTIVE_ELEMENT_INDEX-i);
+        return this;
+    }
+    useHorizontalSwippe(){
+        this.onPtrDown();
+        this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_x)));
+        return this;
+    }
+    useVerticalSwippe(){
+        this.onPtrDown();
+        this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_y)));
+        return this;
+    }
+}
+
+const Tabs=(Controllers,Contents)=>new ZikoUITabs(Controllers,Contents)
+export {Tabs}

package/src/UI/CustomElement/Elements/index.js

@@ -0,0 +1,4 @@
+export * from "./Accordion";
+export * from "./Carousel";
+export * from "./CodeNote";
+export * from "./Tabs";

package/src/UI/CustomElement/Flex.js

@@ -0,0 +1,97 @@
+import ZikoUIElement from "../ZikoUIElement.js"
+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);
+}
+class ZikoUIFlex extends ZikoUIElement {
+  constructor(tag , 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);
+}
+export{Flex,ZikoUIFlex}

package/src/UI/CustomElement/Grid.js

@@ -0,0 +1,30 @@
+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/src/UI/CustomElement/index.js

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

package/src/UI/Embaded/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,31 @@
+import ZikoUIElement from "../../ZikoUIElement.js";
+class ZikoUIBtn extends ZikoUIElement {
+    constructor(value = "button") {
+      super();
+      this.element = document.createElement("button");
+      this.setValue(value);
+      this.render();
+      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/src/UI/Inputs/Primitives/elements.js

@@ -0,0 +1,28 @@
+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}