ziko 0.37.0 → 0.38.1

package/src/ui/constructors/ZikoUIElementMethodesToBeMoved-dep.js

@@ -0,0 +1,96 @@
+class Ziko{
+get #SwitchedStyleRTL_LTR(){
+    const CalculedStyle = globalThis.getComputedStyle(this.element); 
+    const SwitchedStyle = {}
+    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
+    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
+    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
+    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
+    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
+    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
+    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
+    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
+    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
+    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
+    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
+    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
+    if(["flex","inline-flex"].includes(CalculedStyle.display)){
+      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
+      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
+    }
+    return SwitchedStyle;
+  }
+  useRtl(switchAll = false){
+    switchAll ? this.style({
+      ...this.#SwitchedStyleRTL_LTR,
+      direction : "rtl"
+    }) : this.style({direction : "rtl"}); 
+    return this;
+  }
+  useLtr(switchAll = false){
+    switchAll ? this.style({
+      ...this.#SwitchedStyleRTL_LTR,
+      direction : "ltr"
+    }) : this.style({direction : "ltr"}); 
+    return this;
+
+    
+  }
+
+    filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
+    const FilterItems = this.items.filter(condition_callback);
+    FilterItems.forEach(if_callback);
+    this.items
+      .filter((item) => !FilterItems.includes(item))
+      .forEach(else_callback);
+    return this;
+  }
+  filterByTextContent(text, exactMatch = false) {
+    this.items.forEach((n) => n.render());
+    this.filter(
+      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
+      (e) => e.unrender(),
+    );
+    // this.items.filter(n=>{
+    //   const content=n.element.textContent;
+    //   return !(exactMatch?content===text:content.includes(text))
+    // }).map(n=>n.unrender());
+    //  return this;
+  }
+  filterByClass(value) {
+    this.items.map((n) => n.render());
+    this.items
+      .filter((n) => !n.classes.includes(value))
+      .map((n) => n.unrender());
+    return this;
+  }
+  sortByTextContent(value, displays) {
+    let item = this.children;
+    item
+      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+      .map((n) => {
+        n.style.display = "none";
+      });
+    item
+      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+      .map((n, i) => (n.style.display = displays[i]));
+    //return item.filter(n=>n.style.display!="none")
+    item.filter((n) => n.style.display != "none");
+    return this;
+  }
+
+    // setFullScreen(set = true, e) {
+  //   if(!this.element.requestFullscreen){
+  //     console.error("Fullscreen API is not supported in this browser.");
+  //     return this;
+  //   }
+  //   if (set) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
+  // toggleFullScreen(e) {
+  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
+  //   else globalThis.document.exitFullscreen();
+  //   return this;
+  // }
+}

package/src/ui/{style → constructors/style}/index.js

@@ -1,6 +1,6 @@
-import { addSuffixeToNumber } from "../utils/index.js";
-import { Matrix,cos,sin} from "../../math/index.js";
-import { Str } from "../../data/index.js";
+import { addSuffixeToNumber } from "../../__utils__/index.js";
+import { Matrix,cos,sin} from "../../../math/index.js";
+import { Str } from "../../../data/index.js";
 class ZikoUIElementStyle{
     constructor(defaultStyle={}){
         this.target=null;

package/src/ui/{elements/flex → flex}/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
 class ZikoUIFlex extends ZikoUIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super(tag ,"Flex");

package/src/{graphics/canvas/index.js → ui/graphics/canvas.js}

@@ -1,6 +1,5 @@
-import { ZikoUIElement } from "../../ui/index.js";
-import {Matrix} from "../../math/matrix/index.js"
-// import { convolute } from "../../math/signal/conv.js";
+import  ZikoUIElement from "../constructors/ZikoUIElement.js";
+import {Matrix} from "../../math/matrix/Matrix.js"
 class ZikoUICanvas extends ZikoUIElement{
     constructor(w,h){
         super("canvas","canvas");
@@ -8,12 +7,12 @@ class ZikoUICanvas extends ZikoUIElement{
         this.style({
             border:"1px red solid",
         })
-        this.transformMatrix=new Matrix([
+        this.transformMatrix = new Matrix([
             [1,0,0],
             [0,1,0],
             [0,0,1]
         ])
-        this.axisMatrix=new Matrix([
+        this.axisMatrix = new Matrix([
             [-10,-10],
             [10,10]
         ])

package/src/ui/graphics/index.js

@@ -0,0 +1,2 @@
+export * from './canvas.js'
+export * from './svg.js';

package/src/{graphics/svg/index.js → ui/graphics/svg.js}

@@ -1,4 +1,4 @@
-import { ZikoUIElement } from "../../ui/index.js";
+import ZikoUIElement  from "../constructors/ZikoUIElement.js";
 class ZikoUISvg extends ZikoUIElement {
     constructor(w=360,h=300) {
       super("svg","svg");

package/src/ui/{elements/grid → grid}/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js"
+import ZikoUIElement from "../constructors/ZikoUIElement.js"
 class ZikoUIGrid extends ZikoUIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");

package/src/ui/index.js

@@ -1,40 +1,9 @@
-export * from "./elements/text/index.js";
-export * from "./elements/list/index.js";
-export * from "./elements/io/index.js";
-export * from "./elements/media/index.js";
-export * from "./elements/table/index.js";
-export * from "./elements/semantic/index.js";
-export * from "./elements/misc/index.js";
-export * from "./elements/flex/index.js";
-export * from "./elements/grid/index.js";
-export * from "./tags/index.js"
-
-import * as Text from "./elements/text/index.js";
-import * as List from "./elements/list/index.js";
-import * as Io from "./elements/io/index.js";
-import * as Media from "./elements/media/index.js";
-import * as Table from "./elements/table/index.js";
-import * as Semantic from "./elements/semantic/index.js";
-import * as Misc from "./elements/misc/index.js";
-import * as Flex from "./elements/flex/index.js";
-import * as Grid from "./elements/grid/index.js";
-
-
-import ZikoUIElement from "./constructors/ziko-ui-element.js";
-
-export{
-    ZikoUIElement
-}
-const UI = {
-    ...Text,
-    ...List,
-    ...Io,
-    ...Media,
-    ...Table,
-    ...Semantic,
-    ...Misc,
-    ...Flex,
-    ...Grid,
-    ZikoUIElement,
-}
-export default UI;
+export { default as ZikoUIElement } from "./constructors/ZikoUIElement.js"
+export { default as ZikoUINode } from "./constructors/ZikoUINode.js"
+export * from './tags/index.js';
+export * from './text/index.js';
+export * from './flex/index.js';
+export * from './grid/index.js';
+export * from './suspense/index.js';
+export * from './wrapper/index.js';
+export * from './graphics/index.js'

package/src/ui/{elements/misc/suspense.js → suspense/index.js}

@@ -1,18 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js";
-// function loadComponent() {
-//     return new Promise((resolve) => {
-//       setTimeout(() => {
-//         resolve(p(1000))
-//       }, 500);
-//     });
-//   }
-
-//   Suspense(p("Loading ..."),()=>fetch('https://jsonplaceholder.typicode.com/todos/1')
-//   .then(response => response.json())
-//   .then(json => h2(json.title)))
-
- 
-
+import ZikoUIElement from "../constructors/ZikoUIElement";
 class ZikoUISuspense extends ZikoUIElement{
     constructor(fallback_ui, callback){
         super("div", "suspense")

package/src/ui/tags/index.js

@@ -1,5 +1,6 @@
-import ZikoUIElement from "../constructors/ziko-ui-element.js";
-import { HTMLTags, SVGTags } from "./tags.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
+import { HTMLTags, SVGTags } from "./tags-list.js";
+import { isStateGetter } from "../../hooks/use-state.js";
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;
     let element = new ZikoUIElement(tag, name, type);
@@ -15,23 +16,32 @@ const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
     let tag = prop.replaceAll("_","-").toLowerCase();
+    let type ;
+    if(HTMLTags.includes(tag)) type = 'html'
+    if(SVGTags.includes(tag)) type = 'svg'
     if(HTMLTags.includes(tag)) return (...args)=>{
-      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-        let attributes = args.shift()
-        console.log(args)
-        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-      }
-      return new ZikoUIElement(tag).append(...args);
+      console.log(isStateGetter(args[0]))
+    //  if(typeof args[0] === 'function') {
+    //   console.log(args[0], args[0]?.() instanceof StateGetter)
+    //   globalThis.a = args[0]
+    //   console.log({t : a.constructor})
+    //  }
+      if(
+        ['string', 'number'].includes(typeof args[0]) 
+        || args[0] instanceof ZikoUIElement 
+        || (typeof args[0] === 'function' && args[0]().isStateGetter())
+      ) return new ZikoUIElement(tag, tag, {type}).append(...args);
+      return new ZikoUIElement(tag).setAttr(args.shift()).append(...args)
     }
-    if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
-    return (...args)=>{
-      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-        let attributes = args.shift()
-        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-      }
-      return new ZikoUIElement(tag).append(...args);
-    }
-    // switch(tag){
+    // if(SVGTags.includes(tag)) return (...args) => new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+    // return (...args)=>{
+    //   if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+    //     let attributes = args.shift()
+    //     return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+    //   }
+    //   return new ZikoUIElement(tag).append(...args);
+    // }
+    // // switch(tag){
     //   case "html"  : globalThis?.document?.createElement("html")
     //   case "head"  :
     //   case "style" :

package/src/ui/text/index.js

@@ -0,0 +1,15 @@
+import ZikoUINode from "../constructors/ZikoUINode.js";
+class ZikoUIText extends ZikoUINode {
+    constructor(...value) {
+      super("span", "text", false, ...value);
+      this.element = globalThis?.document?.createTextNode(...value)
+    }
+    isText(){
+      return true
+    }
+}
+const text = (...str) => new ZikoUIText(...str);
+export{
+  ZikoUIText,
+  text
+}

package/src/ui/{elements/misc/xml-wrapper.js → wrapper/index.js}

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../constructors/ziko-ui-element.js";
+import ZikoUIElement from "../constructors/ZikoUIElement.js";
 class ZikoUIXMLWrapper extends ZikoUIElement{
     constructor(XMLContent, type){
         super("div", "")

package/src/use/index.js

@@ -1,10 +1,6 @@
-export * from "./use-state.js"
-export * from './use-debounce.js';
-export * from './use-throttle.js';
-
-export * from "./use-channel.js";
-export * from "./use-event-emmiter.js";
-export * from "./use-thread.js";
+export * from './use-channel.js';
+export * from './use-event-emmiter.js';
+export * from './use-thread.js';
 
 export * from './use-root.js';
 // export * from './use-title.js'

package/src/__helpers__/composition/compose-class.js

@@ -1,28 +0,0 @@
-export function composeClass(Class, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-  class Composed extends Class {
-    constructor(...args) {
-      super(...args);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-
-        if (typeof desc.value === 'function') {
-          this[key] = desc.value.bind(this);
-        }
-      }
-    }
-  }
-
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-
-    if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(Composed.prototype, key, desc);
-    } else if (typeof desc.value !== 'function') {
-      Object.defineProperty(Composed.prototype, key, desc);
-    }
-  }
-
-  return Composed;
-}

package/src/graphics/canvas/utils/color.js

@@ -1,8 +0,0 @@
-const hex2rgba = (hex) => {
-    return {
-        r: parseInt(hex.slice(1, 3), 16),
-        g: parseInt(hex.slice(3, 5), 16),
-        b: parseInt(hex.slice(5, 7), 16),
-        a: 255,
-    };
-};

package/src/graphics/canvas/utils/floodFill.js

@@ -1,57 +0,0 @@
-const floodFill=(parent, imageData, newColor, x, y)=>{
-    const { width, height, data } = imageData;
-    const stack = [];
-    const baseColor = parent.getColorAtPixel(imageData, x, y);
-    let operator = { x, y };
-
-    if (parent.colorMatch(baseColor, newColor)) {
-        return;
-    }
-
-    // Add the clicked location to stack
-    stack.push({ x: operator.x, y: operator.y });
-
-    while (stack.length) {
-        operator = stack.pop();
-        let contiguousDown = true; // Vertical is assumed to be true
-        let contiguousUp = true; // Vertical is assumed to be true
-        let contiguousLeft = false;
-        let contiguousRight = false;
-
-        // Move to top most contiguousDown pixel
-        while (contiguousUp && operator.y >= 0) {
-            operator.y--;
-            contiguousUp = parent.colorMatch(parent.getColorAtPixel(imageData, operator.x, operator.y), baseColor);
-        }
-
-        // Move downward
-        while (contiguousDown && operator.y < height) {
-            parent.setColorAtPixel(imageData, newColor, operator.x, operator.y);
-
-            // Check left
-            if (operator.x - 1 >= 0 && parent.colorMatch(parent.getColorAtPixel(imageData, operator.x - 1, operator.y), baseColor)) {
-                if (!contiguousLeft) {
-                    contiguousLeft = true;
-                    stack.push({ x: operator.x - 1, y: operator.y });
-                }
-            } else {
-                contiguousLeft = false;
-            }
-
-            // Check right
-            if (operator.x + 1 < width && parent.colorMatch(parent.getColorAtPixel(imageData, operator.x + 1, operator.y), baseColor)) {
-                if (!contiguousRight) {
-                    stack.push({ x: operator.x + 1, y: operator.y });
-                    contiguousRight = true;
-                }
-            } else {
-                contiguousRight = false;
-            }
-
-            operator.y++;
-            contiguousDown = parent.colorMatch(parent.getColorAtPixel(imageData, operator.x, operator.y), baseColor);
-        }
-    }
-    return imageData;
-}
-export default floodFill;

package/src/graphics/index.js

@@ -1,10 +0,0 @@
-export * from "./svg"
-export * from "./canvas"
-import * as SVG from "./svg"
-import * as CANVAS from "./canvas"
-
-const Graphics = {
-    ...SVG,
-    ...CANVAS
-}
-export default Graphics

package/src/time/utils/decorators.js

@@ -1,17 +0,0 @@
-const useDebounce=(fn,delay=1000)=>{
-    let id;
-    return(...args)=>id?clearTimeout(id):setTimeout(()=>fn(...args),delay)
-}
-const useThrottle=(fn,delay)=>{
-    let lastTime=0;
-    return (...args)=>{
-        const now=new Date().getTime()
-        if(now-lastTime<delay)return;
-        lastTime=now;
-        fn(...args); 
-    }
-}
-export{
-    useDebounce,
-    useThrottle
-}

package/src/ui/elements/embaded/html.js

@@ -1,20 +0,0 @@
-import ZikoUIElement from "../ZikoUIElement.js";
-
-class ZikoUIHtmlViewer extends ZikoUIElement{
-    constructor(src, title){
-        super("iframe", "HTMLViewer")
-        this.setAttr({
-            src,
-            title,
-            // ariaLabel : "Interactive YouTube video player for zikojs apps",
-            role:"application",
-            loading:"lazy" 
-        })
-    }
-}
-
-const HTMLViewer = (src, title) => new ZikoUIHtmlViewer(src, title);
-export{
-    HTMLViewer,
-    ZikoUIHtmlViewer
-}

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

@@ -1,3 +0,0 @@
-export * from "./html.js"
-export * from "./pdf.js"
-export * from "./youtube.js"

package/src/ui/elements/embaded/pdf.js

@@ -1,17 +0,0 @@
-import  ZikoUIElement  from "../ZikoUIElement.js";
-class ZikoUIPdf extends ZikoUIElement{
-    constructor(src, title = "Pdf Document Embaded in Zikojs App"){
-        super("embed","PDFViewer")
-        this.setAttr({
-            src:src,
-            type: "application/pdf",
-            ariaLabel: title,
-            tabIndex: "0",
-        })
-    }
-}
-const PDFViewer=(src, title)=>new ZikoUIPdf(src, title);
-export{
-    ZikoUIPdf,
-    PDFViewer
-}

package/src/ui/elements/embaded/youtube.js

@@ -1,24 +0,0 @@
-import ZikoUIElement from "../ZikoUIElement.js";
-import { Str } from "../../../../data.js";
-class ZikoUIYoutubePlayer extends ZikoUIElement{
-    constructor(src, title){
-        super("iframe", "YoutubePlayer");
-        const id = Str.isUrl(src)?getYouTubeVideoId(src):src
-        this.setAttr({
-            src:`https://www.youtube.com/embed/${id}`,
-            title,
-            ariaLabel : title ?? "Interactive YouTube video player for zikojs apps",
-            role:"application"
-        })
-    }
-}
-function getYouTubeVideoId(url) {
-    const regex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|embed)\/|.*[?&]v=)|youtu\.be\/|embed\/)([a-zA-Z0-9_-]{11})/;
-    const match = url.match(regex);
-    return match ? match[1] : null;
-  }
-const YoutubePlayer = (id, title) => new ZikoUIYoutubePlayer(id, title);
-export{
-    YoutubePlayer,
-    ZikoUIYoutubePlayer
-}

package/src/ui/elements/index.js

@@ -1,10 +0,0 @@
-export * from "./text/index.js";
-export * from "./list/index.js";
-export * from "./io/index.js";
-export * from "./semantic/index.js";
-export * from "./embaded/index.js";
-export * from "./table/index.js";
-export * from "./media/index.js";
-export * from "./misc/index.js";
-export * from "./flex/index.js"
-export * from "./grid/index.js"

package/src/ui/elements/io/Form/index.js

@@ -1,42 +0,0 @@
-import { ZikoUIFlex } from "../../flex/index.js";
-class ZikoUIForm extends ZikoUIFlex{
-    constructor(...items){
-        super("form", "Form");
-        this.append(...items);
-        this.setMethod("POST");
-        this.setAction("/");
-    }
-    setAction(action = "/"){
-        this.setAttr("action", action);
-        return this;
-    }
-    setMethod(method = "post"){
-        this.setAttr("method", method);
-        return this;
-    }
-    get data(){
-        let formData = new FormData(this.element);
-        this.items.forEach(n=>{
-            if(n.isInput||n.isSelect||n.isTextarea)formData.append(n.element.name, n.value)
-        })
-        return formData;
-    }
-    sendFormData(){
-        fetch(this.element.action, {
-            method: this.element.method,
-            body: this.data
-          })
-          .then(response => response.json())
-          .then(data => console.log(data))
-          .catch(error => console.error('Error:', error));
-        return this;
-    }
-    getByName(name){
-        return this.data.get(name);
-    }
-}
-const Form = (...items) => new ZikoUIForm(...items);
-export{
-    Form,
-    ZikoUIForm
-}