ziko 0.0.24 → 0.0.25

package/src/ui/elements/derived ( To Be Moved)/code-note/code-cell.js

@@ -1,195 +0,0 @@
-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/ui/elements/derived ( To Be Moved)/code-note/code-note.js

@@ -1,72 +0,0 @@
-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/ui/elements/derived ( To Be Moved)/code-note/index.js

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

package/src/ui/elements/derived ( To Be Moved)/code-note/sub-elements.js

@@ -1,67 +0,0 @@
-import { html } from "../../primitives/misc/index.js";
-import { Flex } from "../flex";
-import { text } from "../../primitives/text/index.js";
-import { ZikoUICodeNote } from "./code-note.js";
-
-
-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 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/ui/elements/derived ( To Be Moved)/index.js

@@ -1,12 +0,0 @@
-export * from "./flex";
-export * from "./grid";
-// export * from "./accordion";
-// export * from "./carousel";
-// export * from "./code-note";
-// export * from "./tabs";
-// export * from "./alert";
-// export * from "./splitter";
-// export * from "./pagination";
-// export * from "./menu";
-// export * from "./modal"
-// export * from "./slider"

package/src/ui/elements/derived ( To Be Moved)/menu/index.js

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

package/src/ui/elements/derived ( To Be Moved)/menu/menu3d.js

@@ -1,260 +0,0 @@
-import ZikoUIElement from "../../primitives/ZikoUIElement.js";
-import { ZikoUIFlex } from "../flex"
-class ZikoUIMenu3d extends ZikoUIFlex{
-    constructor(controller, content){
-        super("div", "menu3d")
-        this.controller = controller;
-        this.content = content;
-        this.cover = null;
-        Object.assign(this.cache,{
-            config:{
-                useTransfo : false,
-                isOpen : false,
-                position : "left",
-                threshold : 40,
-                angle : 70,
-                overlap : 6,
-                width : 300,
-                height : 300,
-                transitionDuration: '0.5s',
-                transitionEasing: 'ease',
-                menuTransformOrigin : null,
-                menuTransformClosed : null,
-                menuTransformOpened : null,
-                contentTransformOrigin : null,
-                contentTransformClosed : null,
-                contentTransformOpened : null,
-            }
-        })
-        this.append(
-            this.controller,
-            this.content
-        )
-        this.update();
-    }
-    get isOpen(){
-        return this.cache.config.isOpen;
-    }
-    update(){
-        this.controller.style({
-            display:"none",
-            padding:"20px",
-            overflow:"auto",
-            background:"darkblue",
-            color: "#eee",
-            webkitboxSizing: "border-box",
-            mozBoxSizing: "border-box",
-	        boxSizing:"border-box",
-        });
-        this.content.style({
-            padding:"20px 40px",
-            width: "100%",
-            height: "100%",
-            // overflowY:"auto",
-            background:"gold",
-            color: "#eee",
-            webkitboxSizing: "border-box",
-            mozBoxSizing: "border-box",
-	        boxSizing:"border-box",
-            webkitOverflowScrolling:"touch",
-            webkitTransformStyle: "preserve-3d"
-        });
-        this.setupPositions();
-        this.setupWrapper();
-        this.setupCover()
-        this.setupMenu();
-        this.setupContent()
-    }
-    setupPositions() {
-        this.cache.config.menuTransformOpened = '';
-        this.cache.config.contentTransformClosed = '';
-        let menuAngle = this.cache.config.angle;
-        let contentAngle = this.cache.config.angle / -2;
-        switch( this.cache.config.position ) {
-            case "top":
-                this.cache.config.menuTransformOrigin = '50% 0%';
-                this.cache.config.menuTransformClosed = `rotateX(${menuAngle}deg) translateY(-100%) translateY(${this.cache.config.overlap}px)`
-                this.cache.config.contentTransformOrigin = '50% 0';
-                this.cache.config.contentTransformOpened = `translateY(${this.height/2}px) rotateX(${contentAngle}deg)`
-                break;
-            case "right":
-                this.cache.config.menuTransformOrigin = '100% 50%';
-                this.cache.config.menuTransformClosed = 'rotateY( ' + menuAngle + 'deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )';
-                this.cache.config.contentTransformOrigin = '100% 50%';
-                this.cache.config.contentTransformOpened = 'translateX( -'+ this.width/2 +'px ) rotateY( ' + contentAngle + 'deg )';
-                break;
-            case "bottom":
-                this.cache.config.menuTransformOrigin = '50% 100%';
-                this.cache.config.menuTransformClosed = 'rotateX( ' + -menuAngle + 'deg ) translateY( 100% ) translateY( -'+ this.cache.config.overlap +'px )';
-                this.cache.config.contentTransformOrigin = '50% 100%';
-                this.cache.config.contentTransformOpened = 'translateY( -'+ this.height/2 +'px ) rotateX( ' + -contentAngle + 'deg )';
-                break;
-            default:
-                this.cache.config.menuTransformOrigin = '100% 50%';
-                this.cache.config.menuTransformClosed = 'translateX( -100% ) translateX( '+ this.cache.config.overlap +'px ) scale( 1.01 ) rotateY( ' + -menuAngle + 'deg )';
-                this.cache.config.contentTransformOrigin = '0 50%';
-                this.cache.config.contentTransformOpened = 'translateX( '+ this.width/2 +'px ) rotateY( ' + -contentAngle + 'deg )';
-                break;
-        }
-    }
-    setupWrapper() {
-        this.style({
-            perspective : "800px",
-            perspectiveOrigin : this.cache.config.contentTransformOrigin
-        })
-    }
-    setupCover(){
-        if( this.cover ) this.cover.element.parentNode.removeChild( this.cover.element );
-                this.cover=new ZikoUIElement("div","div").style({
-                    position:"absolute",
-					display:"block",
-					width:"100%",
-					height:"100%",
-					left:0,
-					top:0,
-					zIndex:1000,
-					visibility:"hidden",
-					opacity:0,
-					transition: `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
-                })
-				this.content.element.appendChild( this.cover.element );
-    }
-    setupMenu() {
-        // var style = dom.menu.style;
-        switch( this.cache.config.position ) {
-            case "top":
-                this.controller.style({
-                    width : "100%",
-                    height : `${this.height/2}px`
-                });break;
-            case "right":
-                this.controller.style({
-                    right : 0,
-                    width : `${this.width/2}px`,
-                    height : "100%"
-                });break;
-            case "bottom":
-                this.controller.style({
-                    bottom : "0",
-                    width : "100%",
-                    height : `${this.height/2}px`
-                });break;
-            case "left":
-                this.controller.style({
-                    width : `${this.width/2}px`,
-                    height : "100%"
-                });break;
-        }
-        this.controller.style({
-            position : "fixed",
-            display : "block",
-            zIndex : 1,
-            transform : this.cache.config.menuTransformClosed,
-            transformOrigin : this.cache.config.menuTransformOrigin,
-            transition : 'all ' + this.cache.config.transitionDuration +' '+ this.cache.config.transitionEasing
-        })
-        }
-        setupContent() {
-            this.content.style({
-                transform : this.cache.config.contentTransformClosed,
-                transformOrigin : this.cache.config.contentTransformOrigin,
-                transition : `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
-            })
-        }
-        open(){
-            if(!this.cache.config.isOpen){
-                this.cache.config.isOpen = true;
-                this.cover.style({
-                    height : this.content.element.scrollHeight + "px",
-                    visibility : "visible",
-                    opacity : 1,
-                })
-                if(this.cache.config.useTransfo)this.content.style({
-                    transform : this.cache.config.contentTransformOpened,
-                    userSelect : "default"
-                })
-                this.controller.style({
-                    transform : this.cache.config.menuTransformOpened,
-                    useSelect : "none"
-                });
-                this.emit("opened");
-            }
-        }
-        close() {
-            if( this.cache.config.isOpen ) {
-                this.cache.config.isOpen = false;
-                this.cover.style({
-                    // height : this.content.element.scrollHeight + "px",
-                    visibility : "hidden",
-                    opacity : 0,
-                })
-                this.content.style({
-                    transform : this.cache.config.contentTransformClosed,
-                    useSelect : "default"
-                })
-                this.controller.style({
-                    transform : this.cache.config.menuTransformClosed,
-                    userSelect : "none"
-                })
-            }
-            this.emit("closed");
-        }
-        onOpen(callback){
-            this.on("opened", callback.bind(this));
-            return this;
-        }
-        onClose(callback){
-            this.on("closed", callback.bind(this));
-            return this;
-        }
-        #usePosition(position){
-            if(this.cache.config.position!==position){
-                this.cache.config.position=position;
-                const isOpen = this.isOpen;
-                this.close();
-                this.update();
-                if(isOpen)this.open();
-            }
-        }
-        useRight(){
-            this.#usePosition("left");
-            return this;
-        }
-        useRight(){
-            this.#usePosition("right");
-            return this;
-        }
-        useTop(){
-            this.#usePosition("top");
-            return this;
-        }
-        useBottom(){
-            this.#usePosition("bottom");
-            return this;
-        }
-}
-const menu3d = (controller, content) => new ZikoUIMenu3d(controller, content);
-globalThis.menu3d = menu3d;
-export{
-    menu3d,
-    ZikoUIMenu3d
-}
-
-
-/*
-
-a = menu3d(Flex(text("Menu")), Flex(text("Content")))
-  .size("80vw", "50vh")
-  .style({ userSelect: "none" });
-a.onOpen((e) => console.log(e));
-a.open();
-a.controller.onSwipe(0.05, 1, (e) => {
-  if (e.event.detail.direction.x === "left") a.close();
-});
-a.content.onSwipe(0.1, 1, (e) => {
-  if (e.event.detail.direction.x === "left") a.close();
-  if (e.event.detail.direction.x === "right") a.open();
-});
-
-
-*/