ziko 0.0.24 → 0.0.26

package/src/graphics/svg/Elements ( To Be Moved )/Basic/groupe.js

@@ -1,32 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgGroupe extends ZikoSvgElement{
-    constructor(...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "g",
-      );
-      this.add(...svgElement)
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChild(svgElement[i].element);
-        this.items.push(svgElement[i])
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.removeChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement)
-      }
-      return this;     
-    }
-}
-const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement)
-export { 
-  svgGroupe,
-  ZikoSvgGroupe
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/image.js

@@ -1,36 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgImage extends ZikoSvgElement{
-    constructor(src="",w="100%",h="100%",x=0,y=0){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "image",
-      );
-      this.setSrc(src).width(w).height(h).x(x).y(y);
-    }
-    x(x){
-       this.element.x.baseVal.value=x;
-       return this;
-    }
-    y(y){
-       this.element.y.baseVal.value=y;
-       return this;
-    }
-    width(w){
-       this.element?.setAttribute("width",w);
-       return this;
-    }
-    height(h){
-       this.element?.setAttribute("height",h);
-       return this;
-    }
-    setSrc(src=""){
-      this.element?.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src)
-      return this;
-    }
-  } 
-const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
-export { 
-  svgImage,
-  ZikoSvgImage
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/index.js

@@ -1,11 +0,0 @@
-export * from "./circle.js";
-export * from "./ellipse.js";
-export * from "./foreign-object.js";
-export * from "./groupe.js";
-export * from "./image.js";
-export * from "./line.js";
-export * from "./link.js";
-export * from "./path.js";
-export * from "./polygon.js";
-export * from "./rect.js";
-export * from "./text.js";

package/src/graphics/svg/Elements ( To Be Moved )/Basic/line.js

@@ -1,32 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgLine extends ZikoSvgElement{
-    constructor(x1,y1,x2,y2){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "line",
-      );
-      this.x1(x1).y1(y1).x2(x2).y2(y2).stroke("black");
-    }
-    x1(x1){
-       this.element.x1.baseVal.value=x1;
-       return this;
-    }
-    y1(y1){
-       this.element.y1.baseVal.value=y1;
-       return this;
-    }
-    x2(x2){
-       this.element.x2.baseVal.value=x2;
-       return this;
-    } 
-    y2(y2){
-       this.element.y2.baseVal.value=y2;
-       return this;
-    } 
-  } 
-const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
-export{ 
-   svgLine,
-   ZikoSvgLine
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/link.js

@@ -1,33 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgLink extends ZikoSvgElement{
-    constructor(href,...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "a",
-      );
-      this.element.etAttribute("href",href)
-      this.add(...svgElement)
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element.ppendChild(svgElement[i].element);
-        this.items.push(svgElement[i])
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element.moveChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement)
-      }
-      return this;     
-    }
-}
-const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement)
-export{ 
-  svgLink,
-  ZikoSvgLink
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/path.js

@@ -1,62 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgPath extends ZikoSvgElement{
-    constructor(){
-    super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path",
-      );
-      this.path="";
-      
-    }
-    setPath(){
-        this.element.etAttribute("d",this.path);
-        return this;
-    }
-    clear(){
-        this.path="";
-        this.setPath();
-        return this;
-    }
-    moveTo(x,y){
-        this.path+=`M${x} ${y} `;
-        this.setPath();
-        return this;
-    }
-    lineTo(x,y){
-        this.path+=`L${x} ${y} `;
-        this.setPath();
-        return this;
-    }
-    hr(x){
-        this.path+=`H${x} `;
-        this.setPath();
-        return this;
-    }
-    vr(y){
-        this.path+=`V${y} `;
-        this.setPath();
-        return this;
-    }
-    bezier(x1,y1,x2,y2,x,y){
-        this.path+=`C ${x1} ${y1},${x2} ${y2},${x} ${y} `;
-        this.setPath();
-        return this;      
-    }
-    quadratic(x1,y1,x,y){
-        this.path+=`Q ${x1} ${y1} ${x} ${y} `;
-        this.setPath();
-        return this;      
-    }
-    close(){
-        this.path+="Z";
-        this.setPath();
-        return this;
-    }
-}
-
-const svgPath=()=>new ZikoSvgPath();
-export{ 
-    svgPath,
-    ZikoSvgPath
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/polygon.js

@@ -1,32 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgPolygon extends ZikoSvgElement{
-    constructor(X=[],Y=[]){
-      super()
-      this.X=X;
-      this.Y=Y
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon",
-      );
-      this.element?.setAttribute("points","");
-      this.addPoints(X,Y)
-    }
-    addPoint(x,y){
-      let p=this.element.parentElement.createSVGPoint();
-      p.x=x;
-      p.y=y;
-      this.element.points.appendItem(p);
-      return this;
-    }
-    addPoints(X,Y){
-      for(let i=0;i<X.length;i++){
-        let p=this.element.parentElement.createSVGPoint();
-        p.x=X[i];
-        p.y=Y[i];
-        this.element.oints.appendItem(p)
-      }
-      return this;
-    }
-  } 
-const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);
-export{ svgPolygon }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/polyline.js

@@ -1,7 +0,0 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
-class ZikoSvgPolyLine extends ZikoSvgElement{}
-const svgPolyLine=(X,Y)=>new ZikoSvgPolyLine(X,Y);
-export { 
-    svgPolyLine,
-    ZikoSvgPolyLine
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/rect.js

@@ -1,46 +0,0 @@
-
-import ZikoSvgELement from "../ziko-svg-element.js";
-class ZikoSvgRectangle extends ZikoSvgELement{
-    constructor(x,y,w,h,center=true){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect",
-      );
-      this.setX(x).setY(y).width(w).height(h);
-      this.rx=this.x+this.w/2;
-      this.ty=this.y+this.h/2;
-    }
-    setX(x){
-       this.element.x.baseVal.value=x;
-       this.x=x;
-       return this;
-    }
-    setY(y){
-       this.element.y.baseVal.value=y;
-       this.y=y;
-       return this;
-    }
-    r(rx,ry){
-      this.rx=rx;
-      this.ry=ry;
-      this.setX(this.rx-this.w/2);
-      this.setY(this.ry-this.h/2);
-      return this;
-    } 
-    width(w){
-       this.element.width.baseVal.value=w;
-       this.w=w;
-       return this;
-    } 
-    height(h){
-       this.element.height.baseVal.value=h;
-       this.h=h;
-       return this;
-    } 
-  } 
-  const svgRect=(x,y,w,h,center)=>new ZikoSvgRectangle(x,y,w,h,center);
-  export{ 
-   svgRect,
-   ZikoSvgRectangle
- }

package/src/graphics/svg/Elements ( To Be Moved )/Basic/text.js

@@ -1,29 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgText extends ZikoSvgElement{
-    constructor(text,x,y){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "text",
-      );
-      this.setText(text)
-      this.x(x).y(y);
-    }
-    x(x){
-       this.element?.setAttribute("x",x);
-       return this;
-    }
-    y(y){
-       this.element?.setAttribute("y",y);
-       return this;
-    }
-    setText(text=""){
-      this.element.textContent=text;
-      return this;
-    }
-  } 
-const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
-export{ 
-  svgText,
-  ZikoSvgText
- }

package/src/graphics/svg/Elements ( To Be Moved )/Derived/grid.js

@@ -1,9 +0,0 @@
-import { svgPath } from "../basic/path"
-const svgGrid=(w,h,r=10,c=10)=>{
-    let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6)
-    console.log({x:w/r,y:h/c})
-    for(let i=0;i<w;i++) path.moveTo(0,i*w/r).hr(w)
-    for(let j=0;j<h;j++) path.moveTo(j*h/c,0).vr(h)
-    return path
-}
-export{ svgGrid };

package/src/graphics/svg/Elements ( To Be Moved )/Derived/index.js

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

package/src/graphics/svg/Elements ( To Be Moved )/index.js

@@ -1,2 +0,0 @@
-export * from "./basic/index.js"
-export { svgGrid } from "./derived/grid.js";

package/src/graphics/svg/Elements ( To Be Moved )/ziko-svg-element.js

@@ -1,48 +0,0 @@
-import { ZikoUIElement } from "../../../ui";
-class ZikoSvgElement extends ZikoUIElement{
-  constructor(type) {
-    super()
-    Object.assign(this.cache,{
-      type
-    })
-  }
-  pos(x,y){
-    return this.posX(x).posY(y);
-  }
-  posX(x){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
-    else this.element.x.baseVal.value=x;
-    return this;
-  }
-  posY(y){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
-    else this.element.y.baseVal.value=y;
-    return this;
-  }
-  translate(x,y){
-    return this;
-  }
-  color({ stroke, fill }) {
-    this.element?.setAttribute("stroke", stroke);
-    this.element?.setAttribute("fill", fill);
-    return this;
-  }
-  fill(color = "none") {
-    this.element?.setAttribute("fill", color);
-    return this;
-  }
-  stroke(color = "none", width) {
-    this.element?.setAttribute("stroke", color);
-    width && this.strokeWidth(width);
-    return this;
-  }
-  strokeWidth(width = 1) {
-    this.element?.setAttribute("stroke-width", width);
-    return this;
-  }
-  opacity(value = 1) {
-    this.element?.setAttribute("opacity", value);
-    return this;
-  }
-}
-export default ZikoSvgElement;

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

@@ -1,42 +0,0 @@
-import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement.js";
-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);
-export{
-    Accordion,
-    ZikoUIAccordion
-}

package/src/ui/elements/derived ( To Be Moved)/accordion/collapsible.js

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

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

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

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

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

package/src/ui/elements/derived ( To Be Moved)/alert/palette.js

@@ -1,52 +0,0 @@
-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
-}