ziko 0.0.12 → 0.0.13

package/src/user-interface/elements/derived/elements/accordion/accordion.js

@@ -0,0 +1,45 @@
+import ZikoUIContainerElement from "../../../primitives/ZikoUIContainerElement.js";
+// import { Collapsible } from "./Collapsible";
+class ZikoUIAccordion extends ZikoUIContainerElement{
+    constructor(...Collapsible){
+        super("div", "Accordion")
+        this.append(...Collapsible);
+        Object.assign(this.cache,{
+            autoClose : true
+        })
+    }
+    get isAccordion(){
+        return true;
+    }
+    closeAll(){
+        this.items.forEach(n=>n.close());
+        return this;
+    }
+    closeExcept(...Collapsibles){
+        this.items.filter(n=>!Collapsibles.includes(n)).forEach(n=>n.close())
+        return this;
+    }
+    open(CollapsibleOrIndex){
+        CollapsibleOrIndex.isCollapsible? CollapsibleOrIndex.open(): this.items[CollapsibleOrIndex].open();
+        this.closeExcept(CollapsibleOrIndex.isCollapsible? CollapsibleOrIndex: this.items[CollapsibleOrIndex]);
+        return this;
+    }
+    enableAutoClose(){
+        this.cache.autoClose = true;
+        return this;
+    }
+    disableAutoClose(){
+        this.cache.autoClose = false;
+        return this;
+    }
+    toggleAutoClose(){
+        this.cache.autoClose = !this.cache.autoClose;
+    }
+}
+const Accordion = (... Collapsible) => new ZikoUIAccordion(...Collapsible);
+// window.Accordion = Accordion
+
+export{
+    Accordion,
+    ZikoUIAccordion
+}

package/src/user-interface/elements/derived/elements/accordion/collapsible.js

@@ -0,0 +1,82 @@
+import ZikoUIElement from "../../../primitives/ZikoUIElement";
+import { html } from "../../../primitives/misc/index.js";
+import { watchAttr } from "../../../../../reactivity/index.js";
+class ZikoUICollapbsible extends ZikoUIElement{
+    constructor(summary,content,openIcon="😁", closeIcon=openIcon){
+        super("details","Collapsible")
+        Object.assign(this.cache,{
+            icons:{
+                open : openIcon,
+                close : closeIcon
+            }
+        })
+        this.summary=html("summary",summary).style({
+            fontSize:"1.1em",
+            padding:"0.625rem",
+            fontWeight:"bold",
+            listStyleType:`"${openIcon}"`,
+            cursor:"pointer",
+        });
+        this.summary[0].style({
+            marginLeft:"0.5em",
+        })
+        this.content=content.style({
+            margin:"0.7em",
+        });
+        this.element?.append(this.summary.element,this.content.element)
+        this.style({
+            marginBottom:"0.7em",
+        })
+        watchAttr(this, e=>{
+            if(e.target.isOpen){
+                e.target.emit("open");
+                if(this?.parent?.isAccordion){
+                    if(this.parent.cache.autoClose)this.parent.closeExcept(this);
+                }
+                this.summary.style({
+                    listStyleType:`"${this.cache.icons.close}"`
+                })
+            }
+            else{
+                e.target.emit("close");
+                this.summary.style({
+                    listStyleType:`"${this.cache.icons.open}"`
+                })
+            }
+        })
+    }
+    get isCollapsible(){
+        return true;
+    }
+    get isOpen(){
+        return this.element.open;
+    }
+    open(details=this){
+        this.element.open=true;
+        this.emit("open",details)
+        return this;
+    }
+    close(){
+        this.element.open=false;
+        return this;
+    }
+    onOpen(callback){
+        this.on("open", callback)
+        return this;
+    }
+    onClose(callback){
+        this.on("close", callback)
+        return this;
+    }
+    toggle(){
+        this.element.open=!this.element.open;
+        return this;
+    }
+}
+
+ 
+const Collapsible=(summary, content, openIcon, closeIcon)=>new ZikoUICollapbsible(summary,content,openIcon, closeIcon);
+export{
+    Collapsible
+}
+

package/src/user-interface/elements/derived/elements/accordion/index.js

@@ -0,0 +1,2 @@
+export * from "./collapsible.js"
+export * from "./accordion.js"

package/src/user-interface/elements/derived/elements/alert/alert.js

@@ -0,0 +1,80 @@
+import { Flex,ZikoUIFlex } from "../../Flex.js";
+import { palette } from "./palette.js";
+import { text, h3 } from "../../../primitives/text/index";
+class ZikoUIAlert extends ZikoUIFlex{
+    constructor(type, title, content){
+        super()
+        this.title = h3(title);
+        this.icon = text(palette[type].icon).style({
+          display: "flex",
+          justifyContent:"center",
+          borderRadius:"50%",
+          minWidth:"30px",
+          minHeight:"30px",
+        });
+        this.content = content;
+        this.vertical()
+        .size("200px", "auto")
+        .style({ 
+          borderRadius:"10px",
+          padding:"10px"
+        });
+        this.append(
+          Flex(
+            this.title,
+            this.icon
+          ).size("100%", "40px").style({}).horizontal("space-between",0),
+          this.content
+        )
+        this.useType(type);
+    }
+    get isAlert(){
+      return true;
+    }
+    useType(type){
+      this.style({
+        color:palette[type].color,
+        background:palette[type].bgColor,
+        border: `1px darkblue solid`,
+        borderLeft: `15px ${palette[type].borderColor} solid`,
+      })
+      this.title.style({
+        color:palette[type].titleColor
+      });
+      this.content.st.color(palette[type].titleColor)
+      this.icon.setValue(palette[type].icon).style({
+        border:`2px ${palette[type].borderColor} solid`,        
+        alignItems: type==="warning"?"flex-start":"center",
+      });
+      return this;
+    }
+    useSuccess(){
+      this.useType("success");
+      return this;
+    }
+    useInfo(){
+      this.useType("info");
+      return this;
+    }
+    useWarning(){
+      this.useType("warning");
+      return this;
+    }
+    useDanger(){
+      this.useType("danger");
+      return this;
+    }
+}
+
+const successAlert=(title, content)=>new ZikoUIAlert("success", title, content);
+const infoAlert=(title, content)=>new ZikoUIAlert("info", title, content);
+const warningAlert=(title, content)=>new ZikoUIAlert("warning", title, content);
+const dangerAlert=(title, content)=>new ZikoUIAlert("danger", title, content);
+
+export{
+  successAlert,
+  infoAlert,
+  warningAlert,
+  dangerAlert
+}
+

package/src/user-interface/elements/derived/elements/alert/index.js

@@ -0,0 +1 @@
+export * from "./Alert.js"

package/src/user-interface/elements/derived/elements/alert/palette.js

@@ -0,0 +1,52 @@
+const palette = {
+    success: {
+        titleColor:"green",
+        contentColor: "#35495e",
+        bgColor: "#d4edda", // Fixed
+        bgColor:"linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%)",
+        borderColor: "#28a745", // Fixed
+        icon: "✅"
+    },
+    info: {
+        titleColor:"blue",
+        contentColor: "#00204a",
+        bgColor: "#93deff", // Fixed
+        bgColor:"radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%)",
+        borderColor: "#005689", // Fixed
+        icon: "ℹ️"
+    },
+    warning: {
+        titleColor:"#e4663a",
+        contentColor: "#45171d",
+        bgColor:"#fdffcd",
+        bgColor:"radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%)",
+        borderColor: "#efd510",
+        icon: "⚠️"
+    },
+    danger: {
+        titleColor:"red",
+        contentColor: "#721c24",
+        bgColor: "#f8d7da", // Fixed
+        bgColor:"linear-gradient(90deg, rgb(255, 157, 129) 24.3%, rgb(255, 138, 138) 78.3%)",
+        borderColor: "#c50000", // Fixed
+        icon: "❌" 
+    },
+    tips: {
+        titleColor:null,
+        contentColor: null,
+        bgColor: null, 
+        borderColor: null,
+        icon: "💡" 
+    },
+    important: {
+        titleColor:null,
+        contentColor: null,
+        bgColor: null,
+        borderColor: null,
+        icon: "📌" 
+    },
+    
+};
+export{
+    palette
+}

package/src/user-interface/elements/derived/elements/carousel/index.js

@@ -0,0 +1,50 @@
+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 
+        });
+    }
+    get isCarousel(){
+        return true;
+      }
+}
+const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
+export {Carousel}

package/src/user-interface/elements/derived/elements/code-note/SubElements.js.txt

@@ -0,0 +1,105 @@
+import { html } from "../../../Misc";
+import { Flex } from "../../Flex";
+import { text } from "../../../Text";
+import { ZikoUICodeNote } from "./CodeNote";
+import {EditorView, basicSetup} from "codemirror"
+import {javascript} from "@codemirror/lang-javascript"
+import {keymap} from "@codemirror/view"
+import {indentWithTab} from "@codemirror/commands"
+import { style } from "../../../Utils";
+
+// const Input=(codeText="")=>html("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 Input = (codeText = "") => {
+    // Create the code element with styles
+    const inputElement = html("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);
+
+    // Initialize CodeMirror editor view on the created element
+    let editor=new EditorView({
+        extensions: [
+            basicSetup, 
+            javascript(),
+            keymap.of([indentWithTab])
+        ],
+        parent: inputElement.element // Use the element for CodeMirror's parent
+    });
+    window.editor = editor
+    // Return the element to be used elsewhere
+    return inputElement;
+};
+
+
+const Output=()=>html("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.__Ziko__.__Config__.default.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/user-interface/elements/derived/elements/code-note/code-cell.js

@@ -0,0 +1,195 @@
+import { Flex, ZikoUIFlex } from "../../Flex";
+import { ZikoUICodeNote } from "./code-note";
+import { 
+    Input,
+    Output,
+    Right,
+    Left
+ } from "./sub-elements";
+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"
+        })
+        let cm_content = this.Input.element.getElementsByClassName("cm-content")[0];
+        if( cm_content ){
+            cm_content.addEventListener("keydown",e=>{
+                if(e.key === "Enter" && e.shiftKey){
+                    e.preventDefault();
+                    this.execute(this.cache.order);   
+                }
+            })
+        }
+        else{
+            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+="}";
+            // })    
+        }
+        }
+    get isCodeCell(){
+        return true;
+    }
+    // space &nbsp
+    get codeText() {
+        return (this.Input.element.getElementsByClassName("cm-content")[0])
+        ?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim()
+        :this.Input.element.innerText.trim()
+        // 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);
+            globalThis.eval(this.codeText);
+
+        }
+        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.__Ziko__.__Config__.default.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/user-interface/elements/derived/elements/code-note/code-note.js

@@ -0,0 +1,72 @@
+import { ZikoUIFlex } from "../../Flex";
+import { CodeCell } from "./code-cell";
+class ZikoUICodeNote extends ZikoUIFlex{
+    constructor(){
+        super("section");
+        Object.assign(this.cache,{
+            order:0,
+            currentNote:null,
+            currentNoteIndex:null
+        })
+        this.vertical(0,0);
+    }
+    get isCodeNote(){
+        return true;
+      }
+    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/user-interface/elements/derived/elements/code-note/index.js

@@ -0,0 +1,2 @@
+export * from "./code-cell.js";
+export * from "./code-note.js";