ziko 0.0.14 → 0.0.16

package/src/{user-interface/elements/derived/elements → ui/elements/derived}/modal/index.js

@@ -1,92 +1,92 @@
-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"})
+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/{user-interface/elements/derived/elements → ui/elements/derived}/pagination/breadcrumbs.js

@@ -1,54 +1,54 @@
-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
+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/slider/__ZikoUISlider__.js

@@ -0,0 +1,112 @@
+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/slider/hSlider.js

@@ -0,0 +1,34 @@
+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/slider/index.js

@@ -0,0 +1,12 @@
+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/slider/vSlider.js

@@ -0,0 +1,27 @@
+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/{user-interface/elements/derived/elements → ui/elements/derived}/splitter/__ZikoUISplitter__.js

@@ -1,62 +1,62 @@
-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__
+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__
 }