ziko 0.0.4 → 0.0.6

package/src/Time/utils/performance.js

@@ -1,16 +0,0 @@
-const time_memory_Taken = (callback) => {
-    const t0 = Date.now();
-    const m0 = performance.memory.usedJSHeapSize;
-    const result = callback();
-    const t1 = Date.now();
-    const m1 = performance.memory.usedJSHeapSize;
-    const elapsedTime = t1 - t0;
-    const usedMemory = m1 - m0;
-    return { 
-        elapsedTime,
-        usedMemory, 
-        result 
-    };
-  };
-export {time_memory_Taken}
-    

package/src/Time/utils/ui.js

@@ -1,26 +0,0 @@
-const waitForUIElm=(UIElement)=>{
-    return new Promise(resolve => {
-        if (UIElement.element) {
-            return resolve(UIElement.element);
-        }
-  
-        const observer = new MutationObserver(() => {
-            if (UIElement.element) {
-                resolve(UIElement.element);
-                observer.disconnect();
-            }
-        });
-  
-        observer.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
-    });
-  }
-  const waitForUIElmSync=(UIElement,timeout=2000)=>{
-    const t0=Date.now();
-    while(Date.now()-t0<timeout){
-      if(UIElement.element)return UIElement.element
-    }
-  }
-  export {waitForUIElm,waitForUIElmSync}

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

@@ -1,62 +0,0 @@
-import ZikoUIElement from "../../../ZikoUIElement";
-import { ZikoUIFlex } from "../../Flex";
-import { ZikoHtml } from "../../../Misc";
-class ZikoUIAccordion extends ZikoUIElement{
-    constructor(summary,content,icon="😁"){
-        super("details","Accordion")
-        this.summary=ZikoHtml("summary",summary).style({
-            fontSize:"1.1em",
-            padding:"0.625rem",
-            fontWeight:"bold",
-            listStyleType:`"${icon}"`,
-            cursor:"pointer",
-        });
-        this.summary[0].style({
-            marginLeft:"0.5em",
-        })
-        this.content=content.style({
-            margin:"0.7em",
-        });
-        this.append(this.summary,this.content);
-        this.style({
-            marginBottom:"0.7em",
-        })
-        this.render();
-    }
-    get isOpen(){
-        return this.element.open;
-    }
-    open(){
-        this.element.open=true;
-        return this;
-    }
-    onOpen(callback){
-        return this;
-    }
-    close(){
-        this.element.open=true;
-        return this;
-    }
-    onClose(callback){
-        return this;
-    }
-    toggle(){
-        this.element.open=!this.element.open;
-        return this;
-    }
-}
-class ZikoUIAccordions extends ZikoUIFlex{
-    constructor(){
-        super();
-    }
-    addPair(controller,details){
-
-    }
-}
- 
-const Accordion=(summary,content,icon)=>new ZikoUIAccordion(summary,content,icon);
-export{
-    Accordion
-}
-
-// Watch open using Mutation observer 

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

@@ -1,47 +0,0 @@
-import { ZikoUIFlex } from "../../Flex";
-class ZikoUICarousel extends ZikoUIFlex{
-    constructor(...ZikoUIElement){
-        super()
-        this.style({
-            position:"relative",
-            overflow:"hidden",
-            touchAction:"none",
-            userSelect:"none"
-        });
-        this.horizontal("space-around",0);
-        this.track = Section(...ZikoUIElement).style({ display: "inline-flex" });
-        this.track.size(this.track.children.length * 100 + "vw");
-        this.track.setTarget(this);
-        this.track.items.map((n) =>
-          n.style({ pointerEvents: "none", margin: "auto 10px" })
-        );
-        this.x0 = null;
-        this.tx = 0;
-        this.onPtrMove(e=>{
-            if(e.isDown){
-                let x = e.event.pageX;
-                let dx = x - this.x0;
-                this.track.st.translateX(
-                    this.tx + dx, 
-                    0
-                    );
-              }
-        })
-        this.onPtrDown(e=>{
-            console.log(e.event)
-            this.x0 = e.event.pageX;
-            const transformMatrix = window
-              .getComputedStyle(this.track.element)
-              .getPropertyValue("transform");
-            if (transformMatrix !== "none") {
-              this.tx = +transformMatrix.split(",")[4];
-            }            
-        })
-        this.onPtrUp(e=>console.log(e.isDown));
-        this.onPtrLeave(e=>{
-            // Handle outside up 
-        });
-    }
-}
-const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
-export {Carousel}

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

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

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

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

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

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

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

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

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

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

@@ -1,111 +0,0 @@
-// 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

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