ziko 0.0.14 → 0.0.16

package/src/{user-interface → ui}/elements/primitives/media/Image/image.js

@@ -1,37 +1,37 @@
-import ZikoUIElement from "../../ZikoUIElement.js";
-class ZikoUIImage extends ZikoUIElement {
-    constructor(src,alt, w, h) {
-      super("img","image");
-      this.value=src;
-      if (src.nodeName === "IMG")this.element.setAttribute("src", src.src);
-      else this.element?.setAttribute("src", src);
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.setAttr("alt", alt)
-      this.style({ border: "1px solid black", width: w, height: h });
-    }
-    get isImg(){
-      return true;
-    }
-     updateSrc(url){
-      this.value=url;
-      this.element.src=url;
-     return this;
-    }
-    toggleSrc(...values){
-      values=values.map(n=>""+n);
-      let index=values.indexOf(""+this.value);
-      if(index!=-1&&index!=(values.length-1))this.updateSrc(values[index+1]);
-      else this.updateSrc(values[0]);
-      return this;
-    }
-    alt(alt){
-      this.element.alt=alt;
-      return this;
-    }
-  }
-const image = (src,alt, width, height) => new ZikoUIImage(src,alt, width, height);
-export{
-    image,
-    ZikoUIImage
+import ZikoUIElement from "../../ZikoUIElement.js";
+class ZikoUIImage extends ZikoUIElement {
+    constructor(src,alt, w, h) {
+      super("img","image");
+      this.value=src;
+      if (src.nodeName === "IMG")this.element.setAttribute("src", src.src);
+      else this.element?.setAttribute("src", src);
+      if (typeof w == "number") w += "%";
+      if (typeof h == "number") h += "%";
+      this.setAttr("alt", alt)
+      this.style({ border: "1px solid black", width: w, height: h });
+    }
+    get isImg(){
+      return true;
+    }
+     updateSrc(url){
+      this.value=url;
+      this.element.src=url;
+     return this;
+    }
+    toggleSrc(...values){
+      values=values.map(n=>""+n);
+      let index=values.indexOf(""+this.value);
+      if(index!=-1&&index!=(values.length-1))this.updateSrc(values[index+1]);
+      else this.updateSrc(values[0]);
+      return this;
+    }
+    alt(alt){
+      this.element.alt=alt;
+      return this;
+    }
+  }
+const image = (src,alt, width, height) => new ZikoUIImage(src,alt, width, height);
+export{
+    image,
+    ZikoUIImage
 }

package/src/ui/elements/primitives/media/Image/index.js

@@ -0,0 +1,2 @@
+export * from "./image";
+export * from "./figure";

package/src/{user-interface → ui}/elements/primitives/media/Video/index.js

@@ -1,27 +1,27 @@
-import { __ZikoUIDynamicMediaElement__ } from "../__ZikoUIDynamicMediaELement__.js";
-class ZikoUIVideo extends __ZikoUIDynamicMediaElement__ {
-    constructor(src="", w = "100%", h = "50vh") {
-      super("video","video");
-      if (src.nodeName === "VIDEO") this.element?.setAttribute("src", src.src);
-      else this.element?.setAttribute("src", src);
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.style({ width: w, height: h });
-    }
-    get isVideo(){
-      return true;
-    }
-    usePoster(src=""){
-      this.element.poster=src;
-      return this;
-    }
-    usePIP(e){
-      this.element.requestPictureInPicture(e);
-      return this;
-    }
-  }
-const video = (src, width, height) => new ZikoUIVideo(src, width, height);
-export {
-  video,
-  ZikoUIVideo
+import { __ZikoUIDynamicMediaElement__ } from "../__ZikoUIDynamicMediaELement__.js";
+class ZikoUIVideo extends __ZikoUIDynamicMediaElement__ {
+    constructor(src="", w = "100%", h = "50vh") {
+      super("video","video");
+      if (src.nodeName === "VIDEO") this.element?.setAttribute("src", src.src);
+      else this.element?.setAttribute("src", src);
+      if (typeof w == "number") w += "%";
+      if (typeof h == "number") h += "%";
+      this.style({ width: w, height: h });
+    }
+    get isVideo(){
+      return true;
+    }
+    usePoster(src=""){
+      this.element.poster=src;
+      return this;
+    }
+    usePIP(e){
+      this.element.requestPictureInPicture(e);
+      return this;
+    }
+  }
+const video = (src, width, height) => new ZikoUIVideo(src, width, height);
+export {
+  video,
+  ZikoUIVideo
 }

package/src/{user-interface → ui}/elements/primitives/media/__ZikoUIDynamicMediaELement__.js

@@ -1,47 +1,47 @@
-import ZikoUIElement from "../ZikoUIElement.js";
-class __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
-    constructor(element, name) {
-      super(element, name);
-      this.useControls();
-    }
-    get t(){
-      return this.element.currentTime;  
-    }
-    useControls(enabled = true) {
-      this.element.controls = enabled;
-      return this;
-    }
-    enableControls(){
-      this.element.controls = true;
-      return this;
-    }
-    disableControls(){
-      this.element.controls = true;
-      return this;
-    }
-    toggleControls(){
-      this.element.controls = !this.element.controls;
-      return this;
-    }
-    play() {
-      this.element.play();
-      return this;
-    }
-    pause() {
-      this.element.pause();
-      return this;
-    }
-    seekTo(time) {
-      this.element.currentTime = time;
-      return this;
-    }
-    onPlay(){
-
-    }
-    onPause(){
-
-    }
-  }
-export {
-  __ZikoUIDynamicMediaElement__
+import ZikoUIElement from "../ZikoUIElement.js";
+class __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
+    constructor(element, name) {
+      super(element, name);
+      this.useControls();
+    }
+    get t(){
+      return this.element.currentTime;  
+    }
+    useControls(enabled = true) {
+      this.element.controls = enabled;
+      return this;
+    }
+    enableControls(){
+      this.element.controls = true;
+      return this;
+    }
+    disableControls(){
+      this.element.controls = true;
+      return this;
+    }
+    toggleControls(){
+      this.element.controls = !this.element.controls;
+      return this;
+    }
+    play() {
+      this.element.play();
+      return this;
+    }
+    pause() {
+      this.element.pause();
+      return this;
+    }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay(){
+
+    }
+    onPause(){
+
+    }
+  }
+export {
+  __ZikoUIDynamicMediaElement__
 }

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

@@ -1,3 +1,3 @@
-export * from "./image";
-export * from "./video";
+export * from "./image";
+export * from "./video";
 export * from "./audio";

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

@@ -1,100 +1,101 @@
-import ZikoUIElement from "../ZikoUIElement.js";
-import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
-class ZikoUIHtmlTag extends ZikoUIContainerElement {
-  constructor(element) {
-    super(element,"html");
-  }
-}
-class ZikoUIBtn extends ZikoUIElement {
-  constructor(value = "button") {
-    super("button","btn");
-    this.element = document?.createElement("button");
-    this.setValue(value);
-    this.st.cursor("pointer");
-    globalThis.__Ziko__.__Config__.default.render && this.render();
-  }
-  get isBtn(){
-    return true
-  }
-  setValue(value) {
-    if (value instanceof ZikoUIElement) value.setTarget(this.element);
-    else {
-      this.element?.appendChild(document.createTextNode(""));
-      this.element.childNodes[0].data = value;
-    }
-    return this;
-  }
-  get value() {
-    return this.element.innerText;
-  }
-  toggleValues(...values) {
-    values = values.map((n) => "" + n);
-    let index = values.indexOf("" + this.value);
-    if (index != -1 && index != values.length - 1)
-      this.setValue(values[index + 1]);
-    else this.setValue(values[0]);
-    return this;
-  }
-}
-class ZikoUIBr extends ZikoUIElement {
-    constructor() {
-      super("br","br");
-    }
-    get isBr(){
-      return true
-    }
-  }
-  class ZikoUIHr extends ZikoUIElement {
-    constructor() {
-      super("hr","hr");
-      this.setAttr("role", "none");
-    }
-    get isHr(){
-      return true
-    }
-  }
-  class ZikoUILink extends ZikoUIContainerElement{
-    constructor(href){
-      super("a","link");
-      Object.assign(this.cache,{
-        defaultStyle:{
-          color:"#0275d8",
-          textDecoration: "none"
-        },
-        hoverStyle:{
-          color:"#01447e",
-          textDecoration: "underline"
-        },
-      })
-      this.setHref(href);
-      this.style(this.cache.defaultStyle);
-      this.onPtrEnter(()=>this.style(this.cache.hoverStyle));
-      this.onPtrLeave(()=>this.style(this.cache.defaultStyle));
-    }
-    setHref(href){
-      this.element.href=href;
-    }
-    get isLink(){
-      return true
-    }
-  }
-  const br = () => new ZikoUIBr();
-  const hr = () => new ZikoUIHr();
-  const brs = (n=1)=> new Array(n).fill(new ZikoUIBr());
-  const hrs = (n=1)=> new Array(n).fill(new ZikoUIHr());
-  const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
-  const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
-  const btn = (value) => new ZikoUIBtn(value);
-export{
-  html,
-  btn,
-  br,
-  hr,
-  brs,
-  hrs,
-  link,
-  ZikoUIHtmlTag,
-  ZikoUIBr,
-  ZikoUIHr,
-  ZikoUILink
-}
+import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
+class ZikoUIHtmlTag extends ZikoUIContainerElement {
+  constructor(element) {
+    super(element,"html");
+  }
+}
+class ZikoUIBtn extends ZikoUIElement {
+  constructor(value = "button") {
+    super("button","btn");
+    this.element = document?.createElement("button");
+    this.setValue(value);
+    this.st.cursor("pointer");
+    globalThis.__Ziko__.__Config__.default.render && this.render();
+  }
+  get isBtn(){
+    return true
+  }
+  setValue(value) {
+    if (value instanceof ZikoUIElement) value.setTarget(this.element);
+    else {
+      this.element?.appendChild(document.createTextNode(""));
+      this.element.childNodes[0].data = value;
+    }
+    return this;
+  }
+  get value() {
+    return this.element.innerText;
+  }
+  toggleValues(...values) {
+    values = values.map((n) => "" + n);
+    let index = values.indexOf("" + this.value);
+    if (index != -1 && index != values.length - 1)
+      this.setValue(values[index + 1]);
+    else this.setValue(values[0]);
+    return this;
+  }
+}
+class ZikoUIBr extends ZikoUIElement {
+    constructor() {
+      super("br","br");
+    }
+    get isBr(){
+      return true
+    }
+  }
+  class ZikoUIHr extends ZikoUIElement {
+    constructor() {
+      super("hr","hr");
+      this.setAttr("role", "none");
+    }
+    get isHr(){
+      return true
+    }
+  }
+  class ZikoUILink extends ZikoUIContainerElement{
+    constructor(href){
+      super("a","link");
+      Object.assign(this.cache,{
+        defaultStyle:{
+          color:"#0275d8",
+          textDecoration: "none"
+        },
+        hoverStyle:{
+          color:"#01447e",
+          textDecoration: "underline"
+        },
+      })
+      this.setHref(href);
+      this.style(this.cache.defaultStyle);
+      this.onPtrEnter(()=>this.style(this.cache.hoverStyle));
+      this.onPtrLeave(()=>this.style(this.cache.defaultStyle));
+    }
+    setHref(href){
+      this.element.href=href;
+    }
+    get isLink(){
+      return true
+    }
+  }
+  const br = () => new ZikoUIBr();
+  const hr = () => new ZikoUIHr();
+  const brs = (n=1)=> new Array(n).fill(new ZikoUIBr());
+  const hrs = (n=1)=> new Array(n).fill(new ZikoUIHr());
+  const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
+  const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
+  const btn = (value) => new ZikoUIBtn(value);
+export * from "./xml-wrapper.js"
+export{
+  html,
+  btn,
+  br,
+  hr,
+  brs,
+  hrs,
+  link,
+  ZikoUIHtmlTag,
+  ZikoUIBr,
+  ZikoUIHr,
+  ZikoUILink
+}

package/src/ui/elements/primitives/misc/xml-wrapper.js

@@ -0,0 +1,37 @@
+import ZikoUIElement from "../ZikoUIElement";
+class ZikoUIXMLWrapper extends ZikoUIElement{
+    constructor(XMLContent, type){
+        super("div", "")
+        this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent))
+    }
+}
+function html2dom(htmlString) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(`<div>${htmlString}</div>`, 'text/html');
+    return doc.body.firstChild;
+  }
+function svg2dom(svgString) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    return doc.documentElement; // SVG elements are usually at the root
+}
+class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
+    constructor(HTMLContent){
+        super(HTMLContent, "html")
+    }
+}
+class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
+    constructor(SVGContent){
+        super(SVGContent, "svg")
+    }
+}
+const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
+const SVGWrapper = (SVGContent) => new ZikoUIHTMLWrapper(SVGContent);
+
+export{
+    ZikoUIXMLWrapper,
+    ZikoUIHTMLWrapper,
+    ZikoUISVGWrapper,
+    HTMLWrapper,
+    SVGWrapper
+}

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

@@ -1,82 +1,82 @@
-import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
-class ZikoUIMain extends ZikoUIContainerElement{
-    constructor(){
-      super("main","Main");
-    }
-    get isMain(){
-      return true
-    }
-  }
-  class ZikoUIHeader extends ZikoUIContainerElement{
-    constructor(){
-      super("header","Header");
-    }
-    get isHeader(){
-      return true
-    }
-  }
-  class ZikoUINav extends ZikoUIContainerElement{
-    constructor(){
-      super("nav","Nav");
-    }
-    get isNav(){
-      return true
-    }
-  }
-  class ZikoUISection extends ZikoUIContainerElement{
-    constructor(){
-      super("section","Section");
-      this.style({position:"relative"})
-    }
-    get isSection(){
-      return true
-    }
-  }
-  class ZikoUIArticle extends ZikoUIContainerElement{
-    constructor(){
-      super("article","Article");
-    }
-    get isArticle(){
-      return true
-    }
-  }
-  class ZikoUIAside extends ZikoUIContainerElement{
-    constructor(){
-      super("aside","Aside");
-    }
-    get isAside(){
-      return true
-    }
-  }
-  class ZikoUIFooter extends ZikoUIContainerElement{
-    constructor(){
-      super("footer","Footer");
-      this.element=document?.createElement("footer");
-    }
-    get isFooter(){
-      return true
-    }
-  }
-const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
-const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
-const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
-const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
-const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
-const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
-const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
-export{
-  Header,
-  Main,
-  Section,
-  Article,
-  Aside,
-  Nav,
-  Footer,
-  ZikoUIHeader,
-  ZikoUIMain,
-  ZikoUISection,
-  ZikoUIArticle,
-  ZikoUIAside,
-  ZikoUINav,
-  ZikoUIFooter
+import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
+class ZikoUIMain extends ZikoUIContainerElement{
+    constructor(){
+      super("main","Main");
+    }
+    get isMain(){
+      return true
+    }
+  }
+  class ZikoUIHeader extends ZikoUIContainerElement{
+    constructor(){
+      super("header","Header");
+    }
+    get isHeader(){
+      return true
+    }
+  }
+  class ZikoUINav extends ZikoUIContainerElement{
+    constructor(){
+      super("nav","Nav");
+    }
+    get isNav(){
+      return true
+    }
+  }
+  class ZikoUISection extends ZikoUIContainerElement{
+    constructor(){
+      super("section","Section");
+      this.style({position:"relative"})
+    }
+    get isSection(){
+      return true
+    }
+  }
+  class ZikoUIArticle extends ZikoUIContainerElement{
+    constructor(){
+      super("article","Article");
+    }
+    get isArticle(){
+      return true
+    }
+  }
+  class ZikoUIAside extends ZikoUIContainerElement{
+    constructor(){
+      super("aside","Aside");
+    }
+    get isAside(){
+      return true
+    }
+  }
+  class ZikoUIFooter extends ZikoUIContainerElement{
+    constructor(){
+      super("footer","Footer");
+      this.element=document?.createElement("footer");
+    }
+    get isFooter(){
+      return true
+    }
+  }
+const Section = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
+const Article = (...ZikoUIElement) => new ZikoUIArticle().append(...ZikoUIElement);
+const Main = (...ZikoUIElement) => new ZikoUIMain().append(...ZikoUIElement);
+const Header = (...ZikoUIElement) => new ZikoUIHeader().append(...ZikoUIElement);
+const Footer = (...ZikoUIElement) => new ZikoUIFooter().append(...ZikoUIElement);
+const Nav = (...ZikoUIElement) => new ZikoUINav().append(...ZikoUIElement);
+const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
+export{
+  Header,
+  Main,
+  Section,
+  Article,
+  Aside,
+  Nav,
+  Footer,
+  ZikoUIHeader,
+  ZikoUIMain,
+  ZikoUISection,
+  ZikoUIArticle,
+  ZikoUIAside,
+  ZikoUINav,
+  ZikoUIFooter
 }