ziko 0.0.13 → 0.0.15

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

@@ -1,72 +1,72 @@
-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
+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/{user-interface/elements/derived/elements → ui/elements/derived}/code-note/index.js

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

package/src/{user-interface/elements/derived/elements → ui/elements/derived}/code-note/sub-elements.js

@@ -1,67 +1,67 @@
-import { html } from "../../../primitives/misc/index.js";
-import { Flex } from "../../Flex";
-import { text } from "../../../primitives/text/index.js";
-import { ZikoUICodeNote } from "./code-note";
-
-
-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
+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/{user-interface → ui}/elements/derived/elements/Swipper.js

@@ -1,4 +1,4 @@
-// Next 
-// Previous
-// Vertical 
+// Next 
+// Previous
+// Vertical 
 // Horizontal

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

@@ -1,9 +1,9 @@
-export * from "./accordion/index.js";
-export * from "./carousel/index.js";
-export * from "./code-note/index.js";
-export * from "./tabs/index.js";
-export * from "./alert/index.js";
-export * from "./splitter/index.js";
-export * from "./pagination/index.js";
-export * from "./menu/index.js";
-export * from "./modal/index.js"
+export * from "./accordion/index.js";
+export * from "./carousel/index.js";
+export * from "./code-note/index.js";
+export * from "./tabs/index.js";
+export * from "./alert/index.js";
+export * from "./splitter/index.js";
+export * from "./pagination/index.js";
+export * from "./menu/index.js";
+export * from "./modal/index.js"

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

@@ -1,103 +1,103 @@
-import ZikoUIContainerElement from "../primitives/ZikoUIContainerElement.js";
-class ZikoUIFlex extends ZikoUIContainerElement {
-  constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
-    this.direction = "cols";
-    if (typeof w == "number") w += "%";
-    if (typeof h == "number") h += "%";
-    this.style({ width: w, height: h });
-    this.style({ display: "flex" });
-    // this.render();
-  }
-  get isFlex(){
-    return true;
-  }
-  resp(px,wrap = true) {
-    this.wrap(wrap);
-    if (this.element.clientWidth < px) this.vertical();
-    else this.horizontal();
-    return this;
-  }
-  setSpaceAround() {
-    this.style({ justifyContent: "space-around" });
-    return this;
-  }
-  setSpaceBetween() {
-    this.style({ justifyContent: "space-between" });
-    return this;
-  }
-  setBaseline() {
-    this.style({ alignItems: "baseline" });
-    return this;
-  }
-  gap(g) {
-    if (this.direction === "row") this.style({ columnGap: g });
-    else if (this.direction === "column") this.style({ rowGap: g });
-    return this;
-  }
-  wrap(value = "wrap") {
-    const values = ["no-wrap", "wrap","wrap-reverse"];
-    this.style({
-      flexWrap: typeof value === "string" ? value : values[+value],
-    });
-    return this;
-  }
-  _justifyContent(align = "center") {
-    this.style({ justifyContent: align });
-    return this;
-  }
-  vertical(x, y, order=1) {
-    set_vertical.call(this,order)
-    this.style({
-      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
-    });
-    return this;
-  }
-  horizontal(x, y, order=1) {
-    set_horizontal.call(this,order)
-    this.style({
-      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
-    });
-    return this;
-  }
-  show() {
-    this.isHidden = false;
-    this.style({ display: "flex" });
-    return this;
-  }
-}
-
-const Flex = (...ZikoUIElement) =>{
-  let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
-  }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
-}
-function set_vertical(direction){
-  direction == 1
-    ? this.style({ flexDirection: "column" })
-    : direction == -1 && this.style({ flexDirection: "column-reverse" });
-  return this;
-}
-function set_horizontal(direction){
-direction == 1
-    ? this.style({ flexDirection: "row" })
-    : direction == -1 && this.style({ flexDirection: "row-reverse" });
-  return this;
-}
-function map_pos_x(align){
-let pos = ["flex-start", "center", "flex-end"];
-if (typeof align === "number") align = pos[align + 1];
-return align;
-}
-function map_pos_y(align){
-return map_pos_x(-align);
-}
-export{
-  Flex,
-  ZikoUIFlex
+import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement.js";
+class ZikoUIFlex extends ZikoUIContainerElement {
+  constructor(tag = "div", w = "100%", h = "100%") {
+    super(tag ,"Flex");
+    this.direction = "cols";
+    if (typeof w == "number") w += "%";
+    if (typeof h == "number") h += "%";
+    this.style({ width: w, height: h });
+    this.style({ display: "flex" });
+    // this.render();
+  }
+  get isFlex(){
+    return true;
+  }
+  resp(px,wrap = true) {
+    this.wrap(wrap);
+    if (this.element.clientWidth < px) this.vertical();
+    else this.horizontal();
+    return this;
+  }
+  setSpaceAround() {
+    this.style({ justifyContent: "space-around" });
+    return this;
+  }
+  setSpaceBetween() {
+    this.style({ justifyContent: "space-between" });
+    return this;
+  }
+  setBaseline() {
+    this.style({ alignItems: "baseline" });
+    return this;
+  }
+  gap(g) {
+    if (this.direction === "row") this.style({ columnGap: g });
+    else if (this.direction === "column") this.style({ rowGap: g });
+    return this;
+  }
+  wrap(value = "wrap") {
+    const values = ["no-wrap", "wrap","wrap-reverse"];
+    this.style({
+      flexWrap: typeof value === "string" ? value : values[+value],
+    });
+    return this;
+  }
+  _justifyContent(align = "center") {
+    this.style({ justifyContent: align });
+    return this;
+  }
+  vertical(x, y, order=1) {
+    set_vertical.call(this,order)
+    this.style({
+      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
+      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
+    });
+    return this;
+  }
+  horizontal(x, y, order=1) {
+    set_horizontal.call(this,order)
+    this.style({
+      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
+      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
+    });
+    return this;
+  }
+  show() {
+    this.isHidden = false;
+    this.style({ display: "flex" });
+    return this;
+  }
+}
+
+const Flex = (...ZikoUIElement) =>{
+  let tag="div";
+  if(typeof ZikoUIElement[0]==="string"){
+    tag=ZikoUIElement[0];
+    ZikoUIElement.pop();
+  }
+  return new ZikoUIFlex(tag).append(...ZikoUIElement);
+}
+function set_vertical(direction){
+  direction == 1
+    ? this.style({ flexDirection: "column" })
+    : direction == -1 && this.style({ flexDirection: "column-reverse" });
+  return this;
+}
+function set_horizontal(direction){
+direction == 1
+    ? this.style({ flexDirection: "row" })
+    : direction == -1 && this.style({ flexDirection: "row-reverse" });
+  return this;
+}
+function map_pos_x(align){
+let pos = ["flex-start", "center", "flex-end"];
+if (typeof align === "number") align = pos[align + 1];
+return align;
+}
+function map_pos_y(align){
+return map_pos_x(-align);
+}
+export{
+  Flex,
+  ZikoUIFlex
 }

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

@@ -1,33 +1,33 @@
-import ZikoUIContainerElement from "../primitives/ZikoUIContainerElement.js"
-class ZikoUIGrid extends ZikoUIContainerElement {
-    constructor(tag ="div", w = "50vw", h = "50vh") {
-      super(tag,"Grid");
-      this.direction = "cols";
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.style({ border: "1px solid black", width: w, height: h });
-      this.style({ display: "grid" });
-    //   this.render();
-    }
-    get isGird(){
-        return true;
-      }
-    columns(n) {
-        let temp = "";
-        for (let i = 0; i < n; i++) temp = temp.concat(" auto");
-        this.#templateColumns(temp);
-        return this;
-    }
-    #templateColumns(temp = "auto auto") {
-        this.style({ gridTemplateColumns: temp });
-        return this;
-    }
-    gap(w = 10, h = w) {
-        if(typeof (w) === "number")w += "px";
-        if(typeof (h) === "number")h += "px";
-        this.style({gridColumnGap: w,gridRowGap: h});
-        return this;
-    }
-}
-const Grid = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
+import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement"
+class ZikoUIGrid extends ZikoUIContainerElement {
+    constructor(tag ="div", w = "50vw", h = "50vh") {
+      super(tag,"Grid");
+      this.direction = "cols";
+      if (typeof w == "number") w += "%";
+      if (typeof h == "number") h += "%";
+      this.style({ border: "1px solid black", width: w, height: h });
+      this.style({ display: "grid" });
+    //   this.render();
+    }
+    get isGird(){
+        return true;
+      }
+    columns(n) {
+        let temp = "";
+        for (let i = 0; i < n; i++) temp = temp.concat(" auto");
+        this.#templateColumns(temp);
+        return this;
+    }
+    #templateColumns(temp = "auto auto") {
+        this.style({ gridTemplateColumns: temp });
+        return this;
+    }
+    gap(w = 10, h = w) {
+        if(typeof (w) === "number")w += "px";
+        if(typeof (h) === "number")h += "px";
+        this.style({gridColumnGap: w,gridRowGap: h});
+        return this;
+    }
+}
+const Grid = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
 export {Grid,ZikoUIGrid};

package/src/ui/elements/derived/index.js

@@ -0,0 +1,12 @@
+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"