ziko 0.0.13 → 0.0.15

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

@@ -0,0 +1,20 @@
+import ZikoUIElement from "../ZikoUIElement";
+
+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/primitives/embaded/index.js

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

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

@@ -0,0 +1,17 @@
+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/primitives/embaded/youtube.js

@@ -0,0 +1,24 @@
+import ZikoUIElement from "../ZikoUIElement";
+import { Str } from "../../../../data";
+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/{user-interface → ui}/elements/primitives/index.js

@@ -1,8 +1,8 @@
-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 "./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";

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

@@ -1,42 +1,42 @@
-import { ZikoUIFlex } from "../../../derived/Flex.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
+import { ZikoUIFlex } from "../../../derived/flex";
+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/{user-interface → ui}/elements/primitives/io/Form/index.js.txt

@@ -1,104 +1,104 @@
-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
-};
+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/{user-interface → ui}/elements/primitives/io/Inputs/__helpers__.js

@@ -1,52 +1,52 @@
-import ZikoUIElement from "../../ZikoUIElement.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
+import ZikoUIElement from "../../ZikoUIElement.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/{user-interface → ui}/elements/primitives/io/Inputs/index.js

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