ziko 0.0.13 → 0.0.15

package/src/{user-interface/elements/derived/elements → ui/elements/derived}/accordion/collapsible.js

@@ -1,82 +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
-}
-
+import ZikoUIElement from "../../primitives/ZikoUIElement.js";
+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 → ui/elements/derived}/accordion/index.js

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

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

@@ -1,80 +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
-}
-
+import { Flex,ZikoUIFlex } from "../flex";
+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 → ui/elements/derived}/alert/palette.js

@@ -1,52 +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
+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 → ui/elements/derived}/carousel/index.js

@@ -1,50 +1,51 @@
-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);
+import { ZikoUIFlex } from "../Flex";
+import { Section } from "../../primitives/semantic";
+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}