ziko 0.37.0 → 0.38.0

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/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
-}

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

@@ -1,104 +0,0 @@
-import { ZikoUIFlex } from "../../custom-elements/Flex";
-
-class ZikoUIForm extends ZikoUIFlex {
-    constructor(...items) {
-        super("form", "Form");
-        this.append(...items);
-        this.setMethod("POST");
-        // this.setAction("/");
-        // this.addCSRFToken();  // Add CSRF token field by default
-    }
-    setAction(action = "/") {
-        // Ensure the action URL is trusted before setting it
-        if (this.isTrustedURL(action)) {
-            this.setAttr("action", action);
-        } else {
-            throw new Error('Untrusted action URL.');
-        }
-        return this;
-    }
-    setMethod(method = "post") {
-        const validMethods = ["post", "get"];
-        if (validMethods.includes(method.toLowerCase())) {
-            this.setAttr("method", method);
-        } else {
-            throw new Error('Invalid HTTP method.');
-        }
-        return this;
-    }
-
-    get data() {
-        const formData = new FormData(this.element);
-        this.items.forEach(n => {
-            if (n.isInput || n.isSelect || n.isTextarea) {
-                // Sanitize input values before appending
-                formData.append(n.element.name, this.#sanitizeInput(n.value));
-            }
-        });
-        return formData;
-    }
-
-    // Sanitize input data to prevent XSS
-    #sanitizeInput(input) {
-        const div = document?.createElement('div');
-        div.textContent = input;
-        return div.innerHTML;
-    }
-
-    // Include a CSRF token in the form
-    addCSRFToken() {
-        const token = this.getCSRFTokenFromServer();
-        const hiddenInput = document?.createElement('input');
-        hiddenInput.type = 'hidden';
-        hiddenInput.name = 'csrf_token';
-        hiddenInput.value = token;
-        this.element?.append(hiddenInput);
-    }
-
-    // Method to fetch CSRF token from the server (mocked here)
-    getCSRFTokenFromServer() {
-        // Replace with real token fetching logic
-        return 'mocked_csrf_token';
-    }
-
-    sendFormData() {
-        fetch(this.element.action, {
-            method: this.element.method,
-            body: this.data,
-            headers: {
-                'X-CSRF-Token': this.getByName('csrf_token'),  // Add CSRF token header
-            }
-        })
-        .then(response => {
-            if (!response.ok) {
-                throw new Error('Network response was not ok');
-            }
-            return response.json();
-        })
-        .then(data => console.log('Success:', data))
-        .catch(error => {
-            console.error('Error:', error.message || error);
-        });
-        return this;
-    }
-
-    getByName(name) {
-        return this.data.get(name);
-    }
-
-    // Check if the action URL is trusted
-    isTrustedURL(url) {
-        const trustedDomains = ['/','yourdomain.com', 'anothertrustedsite.com'];
-        try {
-            const urlObj = new URL(url);
-            return trustedDomains.includes(urlObj.hostname);
-        } catch (e) {
-            return false;
-        }
-    }
-}
-const Form = (...items) => new ZikoUIForm(...items);
-export {
-    Form,
-    ZikoUIForm
-};

package/src/ui/elements/io/Inputs/__helpers__.js

@@ -1,52 +0,0 @@
-import ZikoUIElement from "../../../constructors/ziko-ui-element.js";
-import { Random } from "../../../../math/index.js";
-class ZikoUILabel extends ZikoUIElement{
-    constructor(){
-      super();
-      this.element=document?.createElement("label");
-    }
-    get isLabel(){
-      return true;
-  }
-  }
-class ZikoUIInputOption extends ZikoUIElement {
-    constructor(value = "") {
-      super();
-      this.element = document?.createElement("option");
-      if(value instanceof Object&&"value" in value){
-        this.setValue(value.value);
-        this.setText(value?.text??value.value)
-      }
-      else this.setValue(value);
-    }
-    setValue(str = "") {
-      this.element.value = str;
-      return this;
-    }
-    setText(text=""){
-      if(text)this.element.textContent=text;
-      return this;
-    }
-}
-class ZikoUIInputDatalist extends ZikoUIElement {
-  constructor(...options){
-    super();
-    this.element = document?.createElement("datalist");
-    this.addOptions(...options).setId("ziko-datalist-id"+Random.string(10));
-  }
-  get isDatalist(){
-    return true;
-  }
-  addOptions(...options) {
-    options.map((n) => this.append(new ZikoUIInputOption(n)));
-    return this;
-  }
-}
-
-const datalist = (...options) => new ZikoUIInputDatalist(...options);
-export{
-  datalist,
-  ZikoUIInputDatalist,
-  ZikoUILabel,
-  ZikoUIInputOption
-}

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

@@ -1,12 +0,0 @@
-export * from "./input/index.js";
-export * from "./input-number/index.js";
-export * from "./input-slider/index.js";
-export * from "./input-color/index.js";
-export * from "./input-search/index.js";
-export * from "./input-checkbox/index.js";
-export * from "./input-radio/index.js";
-export * from "./input-email-password/index.js";
-export * from "./input-date-time/index.js";
-export * from "./input-file/index.js";
-export * from "./input-camera/index.js";
-export * from "./__helpers__.js";

package/src/ui/elements/io/Inputs/input/index.js

@@ -1,99 +0,0 @@
-import ZikoUIElement from "../../../../constructors/ziko-ui-element.js";
-import { useInputEvent } from "../../../../../reactivity/index.js";
-class ZikoUIInput extends ZikoUIElement {
-  constructor(type, name , value = "", datalist) {
-    super("input", "input");
-    Object.assign(this.events, { input: null });
-    this.setValue(value);
-    this.setAttr("type", type);
-    this.setAttr("name", name);
-    // this.setAttr("tab-index","0")
-    if (datalist) this.linkDatalist(datalist);
-  }
-  get isInput() {
-    return true;
-  }
-  setName(name){
-    this.setAttr("name", name);
-    return this;
-  }
-  onInput(...callbacks) {
-    if (!this.events.input) this.events.input = useInputEvent(this);
-    this.events.input.onInput(...callbacks);
-    return this;
-  }
-  onChange(...callbacks) {
-    if (!this.events.input) this.events.input = useInputEvent(this);
-    this.events.input.onChange(...callbacks);
-    return this;
-  }
-  linkDatalist(datalist) {
-    let id;
-    if (datalist instanceof ZikoUIInputDatalist) id = datalist.Id;
-    else if (datalist instanceof Array) {
-      const Datalist = new ZikoUIInputDatalist(...datalist);
-      id = Datalist.Id;
-      console.log(Datalist);
-    } else id = datalist;
-    this.element?.setAttribute("list", id);
-    return this;
-  }
-  get value() {
-    return this.element.value;
-  }
-  // _setType(type) {
-  //   this.element.type = type;
-  //   return this;
-  // }
-  setValue(value = "") {
-    this.element.value = value;
-    return this;
-  }
-  useState(state) {
-    this.setValue(state);
-    return [{ value: this.value }, (e) => this.setValue(e)];
-  }
-  setPlaceholder(value) {
-    if (value) this.element.placeholder = value;
-    return this;
-  }
-  get isValide() {
-    return this.element.checkValidity();
-  }
-  setRequired(required = true) {
-    this.element.required = required;
-    return this;
-  }
-  select() {
-    this.element.select();
-    return this;
-  }
-  copy() {
-    this.element.select();
-    document.execCommand("copy");
-    return this;
-  }
-  cut() {
-    this.element.select();
-    document.execCommand("cut");
-    return this;
-  }
-  accept(value) {
-    this.element.accept = value;
-    return this;
-  }
-}
-
-const input = (value, datalist) => {
-  if (value instanceof Object) {
-    const { datalist, placeholder } = value;
-    value = value.value ?? "";
-    return new ZikoUIInput("text", "input", value, datalist).setPlaceholder(placeholder);
-  }
-  return new ZikoUIInput("text", "input", value, datalist);
-};
-
-export{
-    ZikoUIInput,
-    input
-}

package/src/ui/elements/io/Inputs/input-camera/index.js

@@ -1,26 +0,0 @@
-import { ZikoUIVideo } from "../../../media";
-class ZikoUIWebcame extends ZikoUIVideo{
-    constructor(){
-      super()
-      this.element?.setAttribute("src", "");
-      this.constraints = { audio: true, video: { width: 1280, height: 720 } };
-      //this.video=this.element
-    }
-    get isInputCamera(){
-      return true;
-    }
-    start(){
-      navigator.mediaDevices.getUserMedia(this.constraints).then((mediaStream)=>{
-        this.element.srcObject = mediaStream;
-        this.element.onloadedmetadata = () =>{
-          this.element.play();
-        };
-      })
-      .catch(function(err) { console.log(err.name + ": " + err.message); });
-      return this;
-    }
-  }
-  const inputCamera=()=>new ZikoUIWebcame();
-  export{
-    inputCamera
-  }

package/src/ui/elements/io/Inputs/input-checkbox/index.js

@@ -1,26 +0,0 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputCheckbox extends ZikoUIInput {
-    constructor() {
-      super("checkbox", "inputCheckbox");
-      this.cursor("pointer");
-    }
-    get isInputCheckbox(){
-      return true;
-    }
-    get checked() {
-      return this.element.checked;
-    }
-    check(checked = true) {
-      this.element.checked = checked;
-      return this;
-    }
-    color(color) {
-      this.element.style.accentColor = color;
-      return this;
-    }
-}
-const checkbox = () => new ZikoUIInputCheckbox();
-export{
-    ZikoUIInputCheckbox,
-    checkbox
-}

package/src/ui/elements/io/Inputs/input-color/index.js

@@ -1,16 +0,0 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputColor extends ZikoUIInput {
-    constructor() {
-      super("color", "inputColor");
-      this.background(this.value);
-      this.onInput(() => this.background(this.value));
-    }
-    get isInputColor(){
-      return true;
-    }
-}
-const inputColor = () => new ZikoUIInputColor();
-export{
-    ZikoUIInputColor,
-    inputColor
-}

package/src/ui/elements/io/Inputs/input-date-time/index.js

@@ -1,3 +0,0 @@
-export * from "./input-date";
-export * from "./input-time";
-export * from "./input-date-time";

package/src/ui/elements/io/Inputs/input-date-time/input-date-time.js

@@ -1,14 +0,0 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputDateTime extends ZikoUIInput {
-    constructor() {
-      super("datetime-local", "inputDateTime");
-    }
-    get isInputDateTime(){
-      return true;
-    }
-}
-const inputDateTime = () => new ZikoUIInputDateTime();
-export{
-    ZikoUIInputDateTime,
-    inputDateTime
-}

package/src/ui/elements/io/Inputs/input-date-time/input-date.js

@@ -1,14 +0,0 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputDate extends ZikoUIInput {
-    constructor() {
-      super("date", "inputDate");
-    }
-    get isInputDate(){
-      return true;
-    }
-}
-const inputDate = () => new ZikoUIInputDate();
-export{
-    ZikoUIInputDate,
-    inputDate
-}

package/src/ui/elements/io/Inputs/input-date-time/input-time.js

@@ -1,14 +0,0 @@
-import { ZikoUIInput } from "../input";
-class ZikoUIInputTime extends ZikoUIInput {
-    constructor() {
-      super("time", "inputTime");
-    }
-    get isInputTime(){
-      return true;
-    }
-}
-const inputTime = () => new ZikoUIInputTime();
-export{
-    ZikoUIInputTime,
-    inputTime
-}

package/src/ui/elements/io/Inputs/input-email-password/index.js

@@ -1,2 +0,0 @@
-export * from "./input-email";
-export * from "./input-password";

package/src/ui/elements/io/Inputs/input-email-password/input-email.js

@@ -1,15 +0,0 @@
-
-import { ZikoUIInput } from "../input";
-class ZikoUIInputEmail extends ZikoUIInput {
-    constructor() {
-      super("email", "inputEmail");
-    }
-    get isInputEmail(){
-      return true;
-    }
-  }
-const inputEmail = () => new ZikoUIInputEmail();
-export{
-    ZikoUIInputEmail,
-    inputEmail
-}