ziko 0.0.24 → 0.0.26

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();
-});
-
-
-*/

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

@@ -1,92 +0,0 @@
-import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement.js";
-class ZikoUIModal extends ZikoUIContainerElement{
-    constructor(...UIElements){
-        super("dialog", "modal")
-        this.append(...UIElements);
-        Object.assign(this.cache,{
-            config:{
-                mode:"modal",
-                useTransition:true
-            }
-        });
-        this.style({
-            display:"flex",
-            justifyContent:"center",
-            alignItems:"center",
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            padding: "20px",
-            border: "none",
-            backgroundCcolor: "#f5f5f5",
-            boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
-            borderRadius: "8px"
-        });
-        this.close()
-    }
-    open(){
-        if(!this.element.open){
-            switch(this.cache.config.mode){
-                case "modal": this.element.showModal(); break;
-                case "dialog": this.element.show(); break;
-                default : this.element.show(); break;
-            }
-            // this.style({
-            //     display : "flex",
-            // })
-            this.st.fadeIn(1000)
-            this.emit("modal:opened");
-        }
-        return this;
-    }
-    close(){
-        // this.style({
-        //     display : "none"
-        // })
-        this.st.fadeOut(1000)
-        if(this.element.open){
-            this.element.close();
-        }
-        this.emit("modal:closed");
-        return this;
-    }
-    closeAfter(t = 1000){
-        globalThis?.setTimeout(()=>this.close(), t);
-        return this;
-    }
-    onOpen(callback){
-        this.on("modal:opened",callback.bind(this));
-        return this;
-    }
-    onClose(callback){
-        this.on("modal:closed",callback.bind(this));
-        return this;
-    }
-    useModal(){
-        this.cache.config.mode = "modal";
-        return this;
-    }
-    useDialog(){
-        this.cache.config.mode = "dialog";
-        return this; 
-    }
-    useTransition(enabled = true){
-        this.cache.config.useTransition = enabled;
-        return this;
-    }
-}
-
-const Modal=(...UIElements)=>new ZikoUIModal(...UIElements);
-export{
-    Modal,
-    ZikoUIModal
-}
-
-/*
-a=Modal(text("Hello")).style({
- width:"100%",
- height:"100%"
-})
-Flex(a).size("400px","400px").style({border:"1px red solid"})
-*/

package/src/ui/elements/derived ( To Be Moved)/pagination/breadcrumbs.js

@@ -1,54 +0,0 @@
-import ZikoUIElement from "../../primitives/ZikoUIElement.js";
-import { html } from "../../primitives/misc/index.js";
-import { text } from "../../primitives/text/index.js";
-class ZikoUIBreadcrumbs extends ZikoUIElement{
-    constructor(...items){
-        super("ul", "Breadcrumbs")
-        Object.assign(this.cache,{
-            separatorTextContent:"/"
-        })
-        this.style({
-            listStyle: "none",
-            display: "flex",
-            flexWrap: "wrap"  
-        })
-        this.list=html('li').style({
-            display: "flex",
-            flexWrap: "wrap"
-        });
-        this.append(...items);
-    }
-    #addItem(item){
-        if(["string","number","boolean"].includes(typeof item))item = text(item);
-        const li = html("li", item).style({
-            display: "flex",
-            alignItems: "center"   
-        });
-        if(this.element.children.length>0){
-            const separator = text(this.cache.separatorTextContent).style({
-                padding: "0 4px"
-            });
-            this.element?.append(separator.element);
-        }
-        this.element?.append(li.element);
-    }
-    append(...items){
-        items.forEach(n=>this.#addItem(n));
-        return this;
-    }
-    configSeparator(separatorTextContent = this.cache.separator, style = {}){
-        this.cache.separatorTextContent = separatorTextContent;
-        const separators = [...this.element.children].filter(n=>n.tagName==="SPAN");
-        separators.forEach(node=>{
-            node.textContent = separatorTextContent;
-            Object.assign(node.style, style);
-        }
-        );
-        return this;
-    }
-}
-const Breadcrumbs=(...items)=>new ZikoUIBreadcrumbs(...items);
-export{
-    Breadcrumbs,
-    ZikoUIBreadcrumbs
-}

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

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

package/src/ui/elements/derived ( To Be Moved)/slider/__ZikoUISlider__.js

@@ -1,112 +0,0 @@
-import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement";
-import { Section } from "../../primitives/semantic";
-import { text } from "../../primitives/text";
-import { ZikoUIFlex,Flex } from "../Flex";
-import { ZikoUISection } from "../../primitives/semantic";
-class __ZikoUISlider__ extends ZikoUISection{
-    constructor(){
-        super("section","");
-        Object.assign(this.cache,{
-            currentIndex : 0,
-            slideBuilder : null,
-        })
-        this.container = Flex().size("100%","100%").vertical(0,0).style({
-            // width:"100%",
-            overflow:"hidden"
-        });
-        // this.style({
-        //     // width:"100%",
-        //     overflow:"hidden"
-        // });
-        this.container.setAttr({
-            ariaRoledescription : "carousel",
-            ariaLive: "polite",
-            ariaLabel : "Content Slider"
-        })
-        this.track = Section().size("100%","100%").style({
-            transition : "transform 0.3s ease-in-out",
-        });
-        this.bullets = Flex().style({
-            // position : "absolute",
-            // top : 0,
-            gap : "10px",
-            padding:"10px",
-        })
-        this.container.append(
-            this.track,
-            this.bullets
-        )
-        this.append(this.container)
-    }
-    #updateAriaHidden(){
-        for(let i=0;i<this.track.items.length;i++){
-            this.track[i].setAttr({
-                ariaHidden : (i!==this.cache.currentIndex)
-            })
-        }
-    }
-    goto(n = 0){
-        this.cache.currentIndex = n;
-        this.__updatePos();
-        this.#updateAriaHidden()
-    }
-    next(n = 1){
-        this.cache.currentIndex += n;
-        this.__updatePos();
-        this.#updateAriaHidden()
-        return this;
-    }
-    previous(n = 1){
-        this.cache.currentIndex -= n;
-        this.__updatePos();
-        this.#updateAriaHidden()
-        return this;
-    }
-    #update(){
-        const length = this.track.items.length;
-        for(let i=0;i<length;i++){
-            this.track.items[i].setAttr({
-                ariaLabel : `Slide ${i+1} of ${length}`,
-                dataSlideIndex : i
-            })
-            this.bullets.items[i].setAttr({
-                dataIndex : i,
-                ariaLabel : `Go to slide ${i}`
-            })
-            this.bullets[i].events.click?.destroy();
-            this.bullets[i].onClick(()=>this.goto(i))
-        }
-    }
-    #addSlide(UIElement){
-        this.track.append(this.cache.slideBuilder(UIElement).setAttr({
-            ariaRoledescription : "slide",
-            role : "group",
-            ariaLabel : "" // link to update
-        }));
-        const bullet = text().size("15px","15px").style({
-            borderRadius:"50%",
-            cursor : "pointer",
-            border : "3px solid blue",
-            background : "white"
-         }).setAttr({
-            role : "button",
-            tabIndex : 0
-         })
-         .onPtrEnter(e=>e.target.st.background("gold").scale(1.2,1.2))
-         .onPtrLeave(e=>e.target.st.background("white").scale(1,1))
-        this.bullets.append(
-         bullet
-        )
-        return this;
-    }
-    addSlides(...slides){
-        slides.forEach(n=>this.#addSlide(n));
-        this.#update();
-        this.#updateAriaHidden();
-        return this;
-    }
-}
-
-export{
-    __ZikoUISlider__
-}

package/src/ui/elements/derived ( To Be Moved)/slider/hSlider.js

@@ -1,34 +0,0 @@
-import { __ZikoUISlider__ } from "./__ZikoUISlider__";
-import { Flex } from "../Flex";
-class ZikoUIHorizontalSlider extends __ZikoUISlider__{
-    constructor(...slides){
-        super("section","hSlider")
-        this.container.vertical(0,0)
-        Object.assign(this.cache,{
-            slideBuilder : (UIElement) => Flex(UIElement).style({
-                minWidth : "100%",
-                width:"100%",
-                height:"100%",
-            }).vertical(0,0)
-        })
-        this.track.size("100%","90%").style({
-            display : "flex"
-        })
-        this.addSlides(...slides);
-        this.bullets.horizontal(0,0).style({
-            width : "100%",
-            height : "10%",
-        })
-    }
-    __updatePos(){
-        const width = this.container.width;
-        this.track.st.translateX(-this.cache.currentIndex * width);
-    }
-    
-}
-
-const hSlider=(...slides)=>new ZikoUIHorizontalSlider(...slides);
-export{
-    hSlider,
-    ZikoUIHorizontalSlider
-}

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

@@ -1,12 +0,0 @@
-export * from "./hSlider.js"
-export * from "./vSlider.js"
-import { hSlider } from "./hSlider.js"
-import { vSlider } from "./vSlider.js"
-const Slider = ({orintation = "horizontal",slides = []}) =>{
-    if(["v","vertical"].includes(orintation.toLowerCase())) return vSlider(...slides);
-    else if(["h","horizontal"].includes(orintation.toLowerCase())) return hSlider(...slides);
-    else Error(`{ orientation : ${orintation}} Not supported`)
-}
-export{
-    Slider
-}

package/src/ui/elements/derived ( To Be Moved)/slider/vSlider.js

@@ -1,27 +0,0 @@
-import { __ZikoUISlider__ } from "./__ZikoUISlider__";
-import { Flex } from "../Flex";
-class ZikoUIVerticalSlider extends __ZikoUISlider__{
-    constructor(...slides){
-        super("section","vSlider");
-        Object.assign(this.cache,{
-            slideBuilder : (UIElement) => Flex(UIElement).size("100%","100%").vertical(0, 0)
-        })
-        this.addSlides(...slides);
-        this.container.horizontal(0,0)
-        this.track.size("90%","100%")
-        this.bullets.vertical(0,0).style({
-            height : "100%",
-            width : "10%"
-        })
-    }
-    __updatePos(){
-        const height = this.container.height;
-        this.track.st.translateY(-this.cache.currentIndex * height);
-    }    
-}
-
-const vSlider=(...slides)=>new ZikoUIVerticalSlider(...slides);
-export{
-    vSlider,
-    ZikoUIVerticalSlider
-}

package/src/ui/elements/derived ( To Be Moved)/splitter/__ZikoUISplitter__.js

@@ -1,62 +0,0 @@
-import ZikoUIElement from "../../primitives/ZikoUIElement";
-class __ZikoUISplitter__ extends ZikoUIElement{
-    constructor(flexDirection, resizerCursor, resizerProp){
-        super("div", "Splitter")
-        Object.assign(this.cache,{
-            isResizing : false,
-            flexDirection,
-            resizerCursor,
-            resizerProp
-        })
-        this.style({
-            display:"flex",
-            flexDirection : this.cache.flexDirection,
-            border: "2px solid #333",
-            overflow: "hidden"
-        })
-        this.resizer = new ZikoUIElement("div", "resizer").style({
-            [this.cache.resizerProp]:"5px",
-            backgroundColor: "gold",
-            cursor: this.cache.resizerCursor,
-            touchAction: "none", 
-        });
-        this.onPtrDown(e=>{
-            this.cache.isResizing = true;
-            this.style({
-                cursor : this.cache.resizerCursor // ns-resize
-            });
-            this.resizer.element.setPointerCapture(e.event.pointerId);
-        })
-        this.onPtrUp(e=>{
-            this.cache.isResizing = false;
-            this.style({
-                cursor: "default"
-            })
-            this.resizer.element.releasePointerCapture(e.event.pointerId);
-        })
-        this.onPtrCancel(()=>{
-            this.cache.isResizing = false;
-            this.style({
-                cursor: "default"
-            })
-        })
-        this.onPtrOut(()=>{
-            if (this.cache.isResizing) {
-                this.cache.isResizing = false;
-                this.style({
-                    cursor: "default"
-                })
-            }
-        })
-    }
-    get isSplitter(){
-        return true;
-      }
-    styleResizer(style={}){
-        this.resizer.style(style);
-        return this;
-    }
-}
-export{
-    __ZikoUISplitter__
-}