ziko 0.0.20 → 0.0.22

package/src/ui/elements/primitives/misc/hyperscript.js

@@ -0,0 +1,144 @@
+import ZikoUIElement from '../ZikoUIElement.js';
+const _h=(tag, type, attributes, ...children)=>{
+    const { name, style, ...attrs } = attributes;
+    let element = new ZikoUIElement(tag, name, type);
+    style && element.style(style);
+    attrs && element.setAttr(attrs);
+    children && element.append(...children);
+    return element; 
+}
+const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
+const HTMLTags = [
+  'a',
+  'abb',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'ipnut',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meter',
+  'nav',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'search',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr'
+];
+
+const SVGTags = [
+    "svg", "g", "defs", "symbol", "use", "image", "switch",
+    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
+    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
+    "linearGradient", "radialGradient", "pattern", "solidColor",
+    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
+    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
+    "feTile", "feTurbulence",
+    "animate", "animateMotion", "animateTransform", "set",
+    "script",
+    "desc", "title", "metadata", "foreignObject"
+  ];
+  
+const hTags = HTMLTags.reduce((acc, key) => {
+  acc[key] = (attr, ...children) => h(key, attr, ...children);
+  return acc;
+}, {});
+const sTags = SVGTags.reduce((acc, key) => {
+    acc[key] = (attr, ...children) => h(key, attr, ...children);
+    return acc;
+  }, {});
+
+export { h, s, hTags, sTags };

package/src/ui/elements/primitives/misc/index.js

@@ -85,7 +85,9 @@ class ZikoUIBr extends ZikoUIElement {
   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 * from "./xml-wrapper.js";
+export * from "./suspense.js"
+export * from "./hyperscript.js"
 export{
   html,
   btn,

package/src/ui/elements/primitives/misc/suspense.js

@@ -0,0 +1,42 @@
+import ZikoUIElement from "../ZikoUIElement.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)))
+
+ 
+
+class ZikoUISuspense extends ZikoUIElement{
+    constructor(fallback_ui, callback){
+        super("div", "suspense")
+        this.setAttr({
+            dataTemp : "suspense"
+        })
+        this.fallback_ui = fallback_ui
+        this.append(fallback_ui);
+        (async ()=>{
+            try{
+                const ui = await callback()
+                fallback_ui.unrender()
+                this.append(ui)
+                // console.log(content)
+            }
+            catch(error){
+                console.log({error})
+            }
+        })()
+    }
+}
+
+const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
+export{
+    ZikoUISuspense,
+    Suspense
+}

package/starter/bin/index.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import path from "path"
 import { fileURLToPath } from 'node:url';
 import { createFolder,copyFolder , runCommand } from "./utils/commands.js";

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

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

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

@@ -1 +0,0 @@
-// dipslay table

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

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