Add the ability to specify the router base

build/iui.js

@@ -5784,9 +5784,8 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) {
       window.router.on("route", function (e) {
         self.textContent = ''; // clear everything
 
-        var html = "";
+        let route = e.route;
-        var route = e.route;
+        let current = document.createElement("div");
-        var current = document.createElement("div");
         current.innerHTML = route.caption;
         self.append(current);
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esiur/iui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Interactive User Interface",
   "main": "iui.js",
   "type": "module",

src/Core/App.js

@@ -2,7 +2,8 @@
 import { IUI } from "../Core/IUI.js";
 import RefsCollection from "./RefsCollection.js";
 
-export default IUI.module(class App extends IUIElement {
+export default IUI.module(
+  class App extends IUIElement {
     constructor() {
       super();
       this.refs = new RefsCollection(this);
@@ -13,9 +14,7 @@ export default IUI.module(class App extends IUIElement {
       window.app = this;
     }
 
-
     created() {
-
       IUI.bind(this, this, "/", { app: this, refs: this.refs });
 
       // update referencing
@@ -26,5 +25,5 @@ export default IUI.module(class App extends IUIElement {
       this._emit("load", { app: this });
       this.loaded = true;
     }
-
+  }
-});
+);

src/Core/Binding.js

@@ -9,12 +9,12 @@ export const BindingType = {
   HTMLElementDataAttribute: 4,
   IUIElementDataAttribute: 5,
   IfAttribute: 6,
-    RevertAttribute: 7
+  RevertAttribute: 7,
 };
 
 export const AttributeBindingDestination = {
   Field: 0,
-    Attribute: 1
+  Attribute: 1,
 };
 
 const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
@@ -29,33 +29,29 @@ export class Binding {
     if (nodeOrAttributeOrIUIElement instanceof IUIElement) {
       isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async");
       type = BindingType.IUIElement;
-        } else if (nodeOrAttributeOrIUIElement instanceof Text) {// nodeOrAttribute.nodeType == 3) {
+    } else if (nodeOrAttributeOrIUIElement instanceof Text) {
-            if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/))
+      // nodeOrAttribute.nodeType == 3) {
-                return null;
+      if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/)) return null;
       type = BindingType.TextNode;
       isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async");
       //code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;";
 
       script = nodeOrAttributeOrIUIElement.wholeText;
 
-            code = `try {\r\n context.value = \`${script}\`\r\n}\r\n catch(ex) { context.error = ex; }`
+      code = `try {\r\n context.value = \`${script}\`\r\n}\r\n catch(ex) { context.error = ex; }`;
-
 
       nodeOrAttributeOrIUIElement.data = "";
       nodeOrAttributeOrIUIElement.created = true;
     } else if (nodeOrAttributeOrIUIElement instanceof Attr) {
-
       if (nodeOrAttributeOrIUIElement.name.startsWith("async::")) {
         isAsync = true;
         attrType = AttributeBindingDestination.Attribute;
         attrKey = nodeOrAttributeOrIUIElement.name.substr(7);
-            }
+      } else if (nodeOrAttributeOrIUIElement.name.startsWith("::")) {
-            else if (nodeOrAttributeOrIUIElement.name.startsWith("::")) {
         isAsync = false;
         attrType = AttributeBindingDestination.Attribute;
         attrKey = nodeOrAttributeOrIUIElement.name.substr(2);
-            }
+      } else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) {
-            else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) {
         isAsync = true;
         attrType = AttributeBindingDestination.Field;
         attrKey = nodeOrAttributeOrIUIElement.name.substr(6);
@@ -63,8 +59,7 @@ export class Binding {
         // skip scope
         // if (attrKey == "scope")
         //     return null;
-            }
+      } else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) {
-            else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) {
         isAsync = false;
         attrType = AttributeBindingDestination.Field;
         attrKey = nodeOrAttributeOrIUIElement.name.substr(1);
@@ -72,8 +67,7 @@ export class Binding {
         // skip scope
         // if (attrKey == "scope")
         //     return null;
-            }
+      } else {
-            else {
         return null;
       }
 
@@ -81,53 +75,54 @@ export class Binding {
 
       //            code = "return " + nodeOrAttributeOrIUIElement.value + ";";
 
-            script = nodeOrAttributeOrIUIElement.value
+      script = nodeOrAttributeOrIUIElement.value;
-            code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`
+      code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`;
 
       let sentence = attrKey.split("-");
       for (var i = 1; i < sentence.length; i++)
-                sentence[i] = sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1);
+        sentence[i] =
+          sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1);
       attrKey = sentence.join("");
 
-            if (attrKey == "content")
+      if (attrKey == "content") type = BindingType.ContentAttribute;
-                type = BindingType.ContentAttribute;
       else if (attrKey == "if") {
         type = BindingType.IfAttribute;
         //displayMode =
-            }
+      } else if (attrKey == "revert") type = BindingType.RevertAttribute;
-            else if (attrKey == "revert")
+      else if (attrKey != "data") type = BindingType.Attribute;
-                type = BindingType.RevertAttribute;
-            else if (attrKey != "data")
-                type = BindingType.Attribute;
       else if (nodeOrAttributeOrIUIElement.ownerElement instanceof IUIElement)
         type = BindingType.IUIElementDataAttribute;
-            else
+      else type = BindingType.HTMLElementDataAttribute;
-                type = BindingType.HTMLElementDataAttribute;
     }
 
-
     // test the function
 
     let scopeKeys = Object.keys(scope);
     let scopeValues = Object.values(scope);
 
     try {
-            let args = ["data", "d", "context", "_test", 
+      let args = ["data", "d", "context", "_test", ...scopeKeys];
-                        ...scopeKeys]
 
-            if (isAsync)
+      if (isAsync) func = new AsyncFunction(...args, code);
-                func = new AsyncFunction(...args, code);
+      else func = new Function(...args, code);
-            else
+    } catch (ex) {
-                func = new Function(...args, code);
-        }
-        catch (ex) {
       console.log("Test failed: " + ex, code);
       return null;
     }
 
-
     let rt = new Binding();
-        Object.assign(rt, { isAsync, type, attrType, attrKey, func, target: nodeOrAttributeOrIUIElement, checked: false, script, scopeKeys, scopeValues });
+    Object.assign(rt, {
+      isAsync,
+      type,
+      attrType,
+      attrKey,
+      func,
+      target: nodeOrAttributeOrIUIElement,
+      checked: false,
+      script,
+      scopeKeys,
+      scopeValues,
+    });
     return rt;
   }
 
@@ -140,7 +135,6 @@ export class Binding {
   }
 
   _findMap(thisArg) {
-
     // @TODO: Map thisArg too
     let map = {};
 
@@ -150,7 +144,7 @@ export class Binding {
           obj[prop] = {};
           return new Proxy(obj[prop], detector);
         }
-            }
+      },
     };
 
     this.checked = true;
@@ -158,50 +152,59 @@ export class Binding {
     let proxy = new Proxy(map, detector);
 
     try {
-            let d = this.func.apply(thisArg, [proxy, proxy, {}, true
+      let d = this.func.apply(thisArg, [
-                                    , ...this.scopeValues]);
+        proxy,
+        proxy,
+        {},
+        true,
+        ...this.scopeValues,
+      ]);
 
       this.map = map;
       return d;
-        }
+    } catch (ex) {
-        catch (ex) {
       //console.log("Proxy failed", ex);
       this.map = map;
     }
   }
 
   async _execute(thisArg, data) {
-        if (!this.checked)
+    if (!this.checked) this._findMap(thisArg);
-            this._findMap(thisArg);
 
     let context = {};
-        var rt = this.func.apply(thisArg, [data, data, context, false, 
+    var rt = this.func.apply(thisArg, [
-                                ...this.scopeValues]);
+      data,
+      data,
+      context,
+      false,
+      ...this.scopeValues,
+    ]);
 
     //console.log(rt);
-        if (rt instanceof Promise)
+    if (rt instanceof Promise) await rt;
-            await rt;
 
-        if (context.error != undefined)
+    if (context.error != undefined) {
-        {
+      console.log(
-            console.log("Execution failed", context.error.name + ": " + context.error.message, this.script, this.target);
+        "Execution failed",
+        context.error.name + ": " + context.error.message,
+        this.script,
+        this.target
+      );
       return;
-        }
+    } else if (context.value == undefined) {
-        else if (context.value == undefined)
-        {
       return;
-        }
+    } else if (context.value instanceof Promise) {
-        else if (context.value instanceof Promise)
+      try {
-        {
-            try
-            {
         return await context.value;
       } catch (ex) {
-                console.log("Execution failed", ex.name + ": " + ex.message, this.script, this.target);
+        console.log(
+          "Execution failed",
+          ex.name + ": " + ex.message,
+          this.script,
+          this.target
+        );
       }
-        }
+    } else {
-        else
-        {
       return context.value;
     }
   }
@@ -214,11 +217,9 @@ export class Binding {
   }
 
   bind(data, map) {
-        if (data == null)
+    if (data == null) return;
-            return;
 
     if (data?.on) {
-            
       for (var p in map) {
         let event = ":" + p;
         data.on(":" + p, this.listener);
@@ -229,21 +230,16 @@ export class Binding {
 
       //if (this.watchList.includes(data))
       //    this.watchList.push({ data, event :  });
-        }
+    } else {
-        else {
       for (var p in map) {
         this.bind(data[p], map[p]);
       }
     }
   }
 
- 
-
   async render(data) {
-
     // @TODO: Checking properties bindings moved here
-        if (data != this.data)
+    if (data != this.data) this.unbind();
-            this.unbind();
 
     try {
       if (this.type === BindingType.IUIElement) {
@@ -254,15 +250,11 @@ export class Binding {
         let d = await this._execute(this.target, data);
 
         await this.target.setData(d);
-            }
+      } else if (this.type === BindingType.TextNode) {
-            else if (this.type === BindingType.TextNode) {
-
         try {
-
           let d = await this._execute(this.target.parentElement, data);
 
-                    if (d === undefined)
+          if (d === undefined) return false;
-                        return false;
           //if (d instanceof Promise)
           //    d = await d;
 
@@ -272,75 +264,65 @@ export class Binding {
             this.data = data;
             this.bind(data, this.map);
           }
-
+        } catch (ex) {
-                }
-                catch (ex) {
           this.target.data = "";
         }
       }
       // Content Attribute
       else if (this.type == BindingType.ContentAttribute) {
-
         let targetElement = this.target.ownerElement;
 
         let d = await this._execute(targetElement, data);
 
-                if (d === undefined)
+        if (d === undefined) return false;
-                    return false;
 
         //if (d instanceof Promise)
         //  d = await d;
 
         targetElement.innerHTML = d;
 
-                if (window?.app?.loaded)
+        if (window?.app?.loaded) {
-                {        
           await IUI.create(targetElement);
-                    IUI.bind(targetElement, true, "content", targetElement.__i_bindings?.scope);   
+          IUI.bind(
+            targetElement,
+            true,
+            "content",
+            targetElement.__i_bindings?.scope
+          );
           // update references
           targetElement.__i_bindings?.scope?.refs?._build();
           await IUI.created(targetElement);
           await IUI.render(targetElement, targetElement._data, true);
         }
         //await IUI.updateTree(targetElement);
-              
+      } else if (this.type == BindingType.IfAttribute) {
-            }
-            else if (this.type == BindingType.IfAttribute)
-            {
         let d = await this._execute(this.target.ownerElement, data);
 
         //if (d === undefined)
         //    return false;
 
         this.target.ownerElement.style.display = d ? "" : "none";
-            }
+      } else if (this.type == BindingType.RevertAttribute) {
-            else if (this.type == BindingType.RevertAttribute)
-            {
         let d = await this._execute(this.target.ownerElement, data);
-                if (d === undefined)
+        if (d === undefined) return false;
-                    return false;
         //if (d instanceof Promise)
         //  d = await d;
-                
       }
       // Attribute
       else if (this.type === BindingType.Attribute) {
-
         //if (this.target.ownerElement.hasAttribute("debug"))
         //  debugger;
 
         let d = await this._execute(this.target.ownerElement, data);
 
-                if (d === undefined)
+        if (d === undefined) return false;
-                    return false;
 
         //if (d instanceof Promise)
         //  d = await d;
 
         if (this.attrType == AttributeBindingDestination.Field)
           this.target.ownerElement[this.attrKey] = d;
-                else
+        else this.target.ownerElement.setAttribute(this.attrKey, d);
-                    this.target.ownerElement.setAttribute(this.attrKey, d);
 
         if (data != this.data) {
           this.data = data;
@@ -350,9 +332,6 @@ export class Binding {
 
       // Data Attribute of IUI Element
       else if (this.type === BindingType.IUIElementDataAttribute) {
-
-     
-
         let d = await this._execute(this.target.ownerElement, data);
         //if (d === undefined)
         //    return false;
@@ -363,21 +342,17 @@ export class Binding {
       }
       // Data Attribute of HTML Element
       else if (this.type == BindingType.HTMLElementDataAttribute) {
-
         let d = await this._execute(this.target.ownerElement, data);
-                if (d === undefined)
+        if (d === undefined) return false;
-                    return false;
         //if (d instanceof Promise)
         //  d = await d;
         this.target.ownerElement.data = d;
       }
 
       return true;
-        }
+    } catch (ex) {
-        catch (ex) {
       //            console.log(ex);
       return false;
     }
   }
-
 }

src/Core/BindingList.js

@@ -1,6 +1,4 @@
-
 export default class BindingList extends Array {
-    
   constructor(target, scope) {
     super();
     this.target = target;
@@ -9,29 +7,26 @@ export default class BindingList extends Array {
   }
 
   destroy() {
-        for(var i = 0; i < this.length; i++)
+    for (var i = 0; i < this.length; i++) this[i].unbind();
-            this[i].unbind();
     this.scope = {};
     this.target = null;
     for (var i = 0; i < this.events.length; i++)
-            this.target.removeEventListener(this.events[i].name, this.events[i].handle);
+      this.target.removeEventListener(
+        this.events[i].name,
+        this.events[i].handle
+      );
   }
 
-    addEvent(name, handle)
+  addEvent(name, handle) {
-    {
     this.target.addEventListener(name, handle);
-        this.events.push({name, handle})
+    this.events.push({ name, handle });
   }
 
   getArgumentsNames() {
-        if (this.scope == null)
+    if (this.scope == null) return [];
-            return [];
 
     let rt;
-        for (var i in this.scope.length)
+    for (var i in this.scope.length) rt.push(i);
-            rt.push(i);
     return rt;
   }
-
-    
 }

src/Core/IUI.js

@@ -3,9 +3,7 @@ import { Binding, BindingType } from "./Binding.js";
 //import Route from '../Router/Route.js';
 import BindingList from "./BindingList.js";
 
-
 export class IUI {
-
   static _menus = [];
   static views = [];
   static modules = {};
@@ -17,43 +15,33 @@ export class IUI {
       template.innerHTML = input;
       let nodes = template.content.cloneNode(true).childNodes;
       return nodes;
-        }
+    } else if (input instanceof HTMLCollection) return input;
-        else if (input instanceof HTMLCollection)
+    else if (input instanceof HTMLElement) return [input];
-            return input;
+    else return [];
-        else if (input instanceof HTMLElement)
-            return [input];
-        else
-            return [];
   }
 
-    static observer = new IntersectionObserver(function(entries) {
+  static observer = new IntersectionObserver(
+    function (entries) {
       // isIntersecting is true when element and viewport are overlapping
       // isIntersecting is false when element and viewport don't overlap
-		for(var i = 0; i < entries.length; i++)
+      for (var i = 0; i < entries.length; i++) {
-		{
+        if (entries[i].isIntersecting) {
-			if (entries[i].isIntersecting)
+          if (entries[i]._require_update) entries[i].update();
-			{
-				if (entries[i]._require_update)
-					entries[i].update();
         }
       }
-
+    },
-	}, { threshold: [0] });
+    { threshold: [0] }
-
+  );
 
   static async created(element) {
-
     for (var i = 0; i < element.children.length; i++) {
       let e = element.children[i];
-            if (e instanceof IUIElement)
+      if (e instanceof IUIElement) await e.created();
-                await e.created();
       await IUI.created(e);
     }
   }
 
-    static async create(element)
+  static async create(element) {
-    {
-
     for (let i = 0; i < element.children.length; i++) {
       let e = element.children[i];
       if (e instanceof IUIElement) {
@@ -84,8 +72,7 @@ export class IUI {
     //return;
   }
 
-	static get(o)
+  static get(o) {
-    {
     return document.getElementById(o);
 
     //for(var i = 0; i < IUI.registry.length; i++)
@@ -94,53 +81,44 @@ export class IUI {
     //return null;
   }
 
-	static put(o)
+  static put(o) {
-	{
     IUI.registry.push(o);
   }
 
-	static  remove(id)
+  static remove(id) {
-	{
     for (var i = 0; i < IUI.registry.length; i++)
-			if (IUI.registry[i].el.id == id)
+      if (IUI.registry[i].el.id == id) {
-			{
         IUI.registry.splice(i, 1);
         break;
       }
   }
 
-	static module(objectClass)
+  static module(objectClass) {
-    {
     let moduleName = objectClass.moduleName;
 
     if (IUI.modules[moduleName] === undefined) {
       customElements.define("i-" + moduleName, objectClass);
       IUI.modules[moduleName] = {
-                cls: objectClass, init: function (properties) {
+        cls: objectClass,
+        init: function (properties) {
           return new objectClass(properties);
-                }
+        },
       };
     }
 
     return objectClass;
   }
 
-	static extend(properties, defaults, overwrite)
+  static extend(properties, defaults, overwrite) {
-	{
+    if (properties == null) properties = defaults;
-		if (properties == null)
-			properties = defaults;
     else
       for (var i in defaults)
-				if (overwrite)
+        if (overwrite) properties[i] = defaults[i];
-					properties[i] = defaults[i];
+        else if (properties[i] === undefined) properties[i] = defaults[i];
-				else if (properties[i] === undefined)
-					properties[i] = defaults[i];
     return properties;
   }
 
-
   static bind(element, skipAttributes, sourcePath, scope) {
-
     // ::Attribute
     // : Field
     // async:: Async Attribute
@@ -148,9 +126,11 @@ export class IUI {
     // @ Event
 
     // skip element ?
-        if (element.hasAttribute("skip")
+    if (
-		 || element.hasAttribute("i-skip")
+      element.hasAttribute("skip") ||
-         || element instanceof HTMLTemplateElement)
+      element.hasAttribute("i-skip") ||
+      element instanceof HTMLTemplateElement
+    )
       return;
 
     // tags to skip
@@ -159,87 +139,77 @@ export class IUI {
 
     let bindings;
 
-				
+    if (scope == null) scope = {};
-		if (scope == null)
-		    scope = {};
 
     // get refs before they get overwritten
     //let refs = scope?.refs;
 
     // some element extended or overwritten the binding arguments
-		if (element.scope != null)
+    if (element.scope != null) IUI.extend(scope, element.scope, true);
-			IUI.extend(scope, element.scope, true);
+    else if (element.hasAttribute(":scope")) {
-		else if (element.hasAttribute(":scope"))
-		{
       let script = element.getAttribute(":scope");
-			let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`
+      let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`;
       let func = new Function("context", code);
       let context = {};
 
       func.call(element, context);
 
       if (context.error != undefined)
-				console.log("Scope binding failed", context.error.name + ": " + context.error.message, this.script, this.target);
+        console.log(
-			else if (context.value != undefined 
+          "Scope binding failed",
-					&& context.value instanceof Object)
+          context.error.name + ": " + context.error.message,
+          this.script,
+          this.target
+        );
+      else if (context.value != undefined && context.value instanceof Object)
         IUI.extend(scope, context.value, true);
     }
 
     let scopeArgs = Object.keys(scope);
     let scopeValues = Object.values(scope);
 
-
     bindings = new BindingList(element, scope);
 
-        if (skipAttributes)
+    if (skipAttributes) {
-		{
       // copy attributes bindings
       if (element.__i_bindings != null)
         for (var i = 0; i < element.__i_bindings.length; i++)
           if (element.__i_bindings[i].type != BindingType.TextNode)
             bindings.push(element.__i_bindings[i]);
-		}
+    } else {
-		else
-        {
       element.__i_bindings?.destroy();
 
       // compile attributes
       for (var i = 0; i < element.attributes.length; i++) {
-
         // skip scope
-				if (element.attributes[i].name == ":scope")
+        if (element.attributes[i].name == ":scope") continue;
-					continue;
 
         if (element.attributes[i].name.startsWith("@")) {
-
           // make events
           let code = element.attributes[i].value;
           //let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`
           let func = new Function("event", ...scopeArgs, code);
-					let handler = (event) => {
+          let handler = event => {
             func.call(element, event, ...scopeValues);
-					}
+          };
 
           bindings.addEvent(element.attributes[i].name.substr(1), handler);
-				}
+        } else {
-				else
+          let b = Binding.create(element.attributes[i], bindings.scope);
-				{
-					let b = Binding.create(element.attributes[i], 
-												bindings.scope);
 
           if (b != null) {
-						if (b.type == BindingType.HTMLElementDataAttribute 
+            if (
-							|| b.type == BindingType.IUIElementDataAttribute)
+              b.type == BindingType.HTMLElementDataAttribute ||
+              b.type == BindingType.IUIElementDataAttribute
+            )
               element.dataMap = b;
             else if (b.type == BindingType.RevertAttribute)
               element.revertMap = b;
-						else
+            else bindings.push(b);
-							bindings.push(b);
           }
         }
       }
 
-			
       // add reference
       // if (element.hasAttribute("ref")) {
       // 	let ref = element.getAttribute("ref");
@@ -266,39 +236,35 @@ export class IUI {
       if (el instanceof IUIElement) {
         // @TODO: check if the IUI element handles the binding
         IUI.bind(el, false, sourcePath, scope);
-            }
+      } else if (el instanceof HTMLScriptElement) {
-			else if (el instanceof HTMLScriptElement)
+        try {
-			{
-
-				try
-				{
           // this because HTML parser don't evaluate script tag
           /// let func = new Function("//# sourceURL=iui://" + sourcePath + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
-					let func = new Function(...scopeArgs, 
+          let func = new Function(
-						"//# sourceURL=iui://" + sourcePath + "-" 
+            ...scopeArgs,
-						+ Math.round(Math.random() * 10000) 
+            "//# sourceURL=iui://" +
-						+ "\r\n" + el.text.trim());
+              sourcePath +
+              "-" +
+              Math.round(Math.random() * 10000) +
+              "\r\n" +
+              el.text.trim()
+          );
 
           let rt = func.apply(el.parentElement, scopeValues);
 
           console.log("rt", rt);
 
-					if (typeof (rt) === "object") {
+          if (typeof rt === "object") {
-						for (var k in rt)
+            for (var k in rt) el.parentElement[k] = rt[k];
-							el.parentElement[k] = rt[k];
           }
-				}
+        } catch (ex) {
-				catch (ex) {
           console.log(ex);
         }
-			}
+      } else if (el instanceof HTMLElement) {
-            else if (el instanceof HTMLElement) {
         IUI.bind(el, false, sourcePath, scope);
-            }
+      } else if (el instanceof Text) {
-            else if (el instanceof Text) {
         let b = Binding.create(el, bindings.scope);
-                if (b != null)
+        if (b != null) bindings.push(b);
-                    bindings.push(b);
       }
     }
 
@@ -306,7 +272,6 @@ export class IUI {
   }
 
   static async render(element, data, textNodesOnly = false) {
-     
     if (!element.__i_bindings) {
       return;
     }
@@ -319,37 +284,30 @@ export class IUI {
           await bindings[i].render(data);
     } else {
       // render attributes & text nodes
-			for (var i = 0; i < bindings.length; i++)
+      for (var i = 0; i < bindings.length; i++) await bindings[i].render(data);
-				await bindings[i].render(data);
     }
 
     // render children
     for (var i = 0; i < element.children.length; i++) {
       let el = element.children[i];
       if (el instanceof IUIElement)
-                // @TODO should check if the element depends on parent or not
         if (el.dataMap != null) {
+          // @TODO should check if the element depends on parent or not
           // if map function failed to call setData, we will render without it
-                    if (!(await el.dataMap.render(data)))
+          if (!(await el.dataMap.render(data))) await el.render();
-                        await el.render();
+        } else await el.setData(data);
-                }
-                else
-                    await el.setData(data);
       else {
-                if (el.dataMap != null)
+        if (el.dataMap != null) await el.dataMap.render(data);
-                    await el.dataMap.render(data);
+        else el.data = data;
-                else
-					el.data = data;
 
         //let data = e.mapData(data);
         await IUI.render(el, el.data);
       }
     }
   }
-};
+}
 
-export function iui(selector)
+export function iui(selector) {
-{
   return IUI.get(selector);
 
   /*
@@ -365,57 +323,51 @@ export function iui(selector)
 	}
 */
 
-	if (typeof(this) == "undefined" || this == window)
+  if (typeof this == "undefined" || this == window) {
-	{
     var o = IUI.get(selector);
-		if (o)
+    if (o) return o;
-			return o;
+    else {
-		else
-		{
       var el;
 
-			if (typeof Node === "object" ? o instanceof Node : (
+      if (
-				selector && typeof selector === "object" && typeof selector.nodeType === "number" && typeof selector.nodeName==="string") || selector === window)
+        typeof Node === "object"
-			{
+          ? o instanceof Node
+          : (selector &&
+              typeof selector === "object" &&
+              typeof selector.nodeType === "number" &&
+              typeof selector.nodeName === "string") ||
+            selector === window
+      ) {
         el = selector;
-			}
+      } else if (typeof selector === "string" || selector instanceof String) {
-			else if (typeof selector === 'string' || selector instanceof String)
-			{
         if (selector[0] == ".")
           el = document.getElementsByClassName(selector.substr(1));
-				else
+        else el = document.getElementById(selector);
-				    el = document.getElementById(selector);
       }
 
-			if (el)
+      if (el) {
-			{
         var rt = {};
         var makeFunc = function (module) {
           return function () {
-						if (el instanceof HTMLCollection)
+            if (el instanceof HTMLCollection) {
-						{
               let rt = [];
-							for(var i = 0; i < el.length; i++)
+              for (var i = 0; i < el.length; i++) {
-							{
                 var args = [el[i]];
                 for (var j = 0; j < arguments.length; j++)
                   args.push(arguments[j]);
                 rt.push(IUI.modules[module].init.apply(this, args));
               }
               return rt;
-						}
+            } else {
-						else
-						{
               var args = [el];
               for (var i = 0; i < arguments.length; i++)
                 args.push(arguments[i]);
               return IUI.modules[module].init.apply(this, args);
             }
-					}
+          };
         };
 
-				for(var m in IUI.modules)
+        for (var m in IUI.modules) rt[m] = makeFunc(m);
-					rt[m] = makeFunc(m);
 
         return rt;
       }
@@ -486,7 +438,6 @@ iui.prototype.ne = function(tag)
 }
 */
 
-
 /*
 iui.prototype.destroy  = function()
 {

src/Core/IUIElement.js

@@ -1,5 +1,9 @@
 import { IUI } from "./IUI.js";
-import { Binding, BindingType, AttributeBindingDestination } from "./Binding.js";
+import {
+  Binding,
+  BindingType,
+  AttributeBindingDestination,
+} from "./Binding.js";
 
 export default class IUIElement extends HTMLElement {
   constructor(defaults) {
@@ -24,16 +28,13 @@ export default class IUIElement extends HTMLElement {
     return this.name.toLowerCase();
   }
 
-
   get cssClass() {
-        if (this.hasAttribute("css-class"))
+    if (this.hasAttribute("css-class")) return this.getAttribute("css-class");
-            return this.getAttribute("css-class");
     //else
     //  return this.constructor.moduleName;
   }
 
-    set cssClass(value)
+  set cssClass(value) {
-    {
     this.classList.remove(this.cssClass);
     this.setAttribute("css-class", value);
     this.classList.add(value);
@@ -46,9 +47,8 @@ export default class IUIElement extends HTMLElement {
   _getParentData() {
     var p = this.parentElement;
     do {
-            if (p.data !== undefined)
+      if (p.data !== undefined) return p.data;
-                return p.data;
+    } while ((p = p.parentElement));
-        } while (p = p.parentElement);
 
     return undefined;
   }
@@ -59,7 +59,6 @@ export default class IUIElement extends HTMLElement {
     await IUI.render(this, value);
   }
 
-
   get data() {
     return this._data;
   }
@@ -70,9 +69,8 @@ export default class IUIElement extends HTMLElement {
     do {
       var p = e.parentElement;
 
-            if (e.revertMap != null)
+      if (e.revertMap != null) await e.revertMap.render(p?.data);
-                await e.revertMap.render(p?.data);
+    } while ((e = p));
-        } while (e = p);
   }
 
   async update(data) {
@@ -80,15 +78,12 @@ export default class IUIElement extends HTMLElement {
       // get parent data
       if (this.dataMap != null) {
         await this.dataMap.render(this._getParentData());
-            } else
+      } else await this.setData(this.data);
-                await this.setData(this.data);
+    } else {
-        }
-        else {
       // apply specified data
       if (this.dataMap != null) {
         await this.dataMap.render(data);
-            } else
+      } else await this.setData(data);
-                await this.setData(data);
     }
   }
 
@@ -98,17 +93,12 @@ export default class IUIElement extends HTMLElement {
   }
 
   // this meant to be inherited
-    modified() {
+  modified() {}
-
-    }
 
   connectedCallback() {
-        if (this.hasAttribute("css-class"))
+    if (this.hasAttribute("css-class")) {
-        {
       this.classList.add(this.getAttribute("css-class"));
-        }
+    } else {
-        else
-        {
       let className = this.constructor.moduleName;
       this.setAttribute("css-class", className);
       this.classList.add(className);
@@ -120,9 +110,7 @@ export default class IUIElement extends HTMLElement {
   }
 
   adoptedCallback() {
-
     //console.log("adopted", this);
-
   }
 
   //appendChild(node) {
@@ -130,41 +118,29 @@ export default class IUIElement extends HTMLElement {
   //    super.appendChild(node);
   //}
 
-    created() {
+  created() {}
 
-    }
+  create() {}
-
-    create() {
- 
-    }
 
   destroy() {
     IUI.registry.splice(IUI.registry.indexOf(this), 1);
-        if (this.parentNode)
+    if (this.parentNode) this.parentNode.removeChild(this);
-            this.parentNode.removeChild(this);
   }
 
-
-
   _emit(event, values) {
     //var args = Array.prototype.slice.call(arguments, 1);
     var e = new CustomEvent(event, values);
     for (let i in values) {
-            if (e[i] === undefined)
+      if (e[i] === undefined) e[i] = values[i];
-                e[i] = values[i];
     }
 
-        try
+    try {
-        {
       return this.dispatchEvent(e);
-        }
+    } catch (ex) {
-        catch(ex)
-        {
       console.log(ex);
     }
   }
 
-
   _encapsulateEvent(code) {
     return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`;
   }

src/Core/Path.js

@@ -0,0 +1,12 @@
+export default class Path {
+  /**
+   * Similar to `os.path.join` in nodejs.
+   * @param {...String} args
+   * @returns {String}
+   */
+  static join() {
+    return Array.from(arguments)
+      .join("/")
+      .replace(/\/{1,}/g, "/");
+  }
+}

src/Core/RefsCollection.js

@@ -1,34 +1,24 @@
-
+export default class RefsCollection {
-export default class RefsCollection
-{
-
   constructor(rootElement) {
     this._rootElement = rootElement;
   }
 
   _build(element, append) {
-
+    if (element == undefined) element = this._rootElement;
-        if (element == undefined)
-            element = this._rootElement;
 
     if (!append)
       for (var i in this)
-                if (i != "_rootElement" && i != "_build")
+        if (i != "_rootElement" && i != "_build") delete this[i];
-                    delete this[i];
 
-        for(var i = 0; i < element.children.length; i++)
+    for (var i = 0; i < element.children.length; i++) {
-        {
       let child = element.children[i];
 
-            if (child.hasAttribute("ref"))
+      if (child.hasAttribute("ref")) {
-            {
         let ref = child.getAttribute("ref");
-				if (this[ref] == null)
+        if (this[ref] == null) this[ref] = child;
-					this[ref] = child;
         else if (this[ref] == child) {
           // do nothing
-				}
+        } else if (this[ref] instanceof Array) {
-				else if (this[ref] instanceof Array){
           this[ref].push(child);
         } else {
           var firstRef = this[ref];
@@ -39,8 +29,7 @@ export default class RefsCollection
       if (child.refs != undefined)
         // opt out if the element handles referencing
         break;
-            else
+      else this._build(child, true);
-                this._build(child, true);
     }
   }
 }

src/Data/DataList.js

@@ -1,14 +1,13 @@
 import IUIElement from "../Core/IUIElement.js";
 
-export default IUI.module(class DataList extends IUIElement
+export default IUI.module(
-{  
+  class DataList extends IUIElement {
-	constructor(properties)
+    constructor(properties) {
-	{
       super(properties);
     }
 
-	create()
+    create() {
-	{
       this.style.display = "none";
     }
-});
+  }
+);

src/Data/Field.js

@@ -1,11 +1,9 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-
+export default IUI.module(
-export default IUI.module(class Field extends HTMLElement
+  class Field extends HTMLElement {
-{  
+    constructor() {
-	constructor()
-	{
       super();
     }
 
@@ -13,8 +11,7 @@ export default IUI.module(class Field extends HTMLElement
       return this.name.toLowerCase();
     }
 
-	create()
+    create() {
-    {
       //      if (this.formatter === undefined) {
       //          // load script
       //          for (var i = 0; i < this.children.length; i++)
@@ -22,7 +19,6 @@ export default IUI.module(class Field extends HTMLElement
       //                  //this.formatter = new Function this.children[i].
       //              }
       //      }
-
       //this.style.display = "none";
     }
 
@@ -35,22 +31,19 @@ export default IUI.module(class Field extends HTMLElement
     }
 
     serialize(tag) {
-
       let template = document.createElement("template");
       let node = document.createElement(tag ?? "div");
-        let width = null, name = null, type = null;
+      let width = null,
+        name = null,
+        type = null;
 
       // copy attributes
       for (var i = 0; i < this.attributes.length; i++) {
         let attr = this.attributes[i];
-            if (attr.name == "width")
+        if (attr.name == "width") width = attr.value;
-                width = attr.value;
+        else if (attr.name == "name") name = attr.value;
-            else if (attr.name == "name")
+        else if (attr.name == "type") type = attr.value;
-                name = attr.value;
+        else node.setAttribute(attr.name, attr.value);
-            else if (attr.name == "type")
-                type = attr.value;
-            else
-                node.setAttribute(attr.name, attr.value);
       }
 
       // copy html
@@ -59,4 +52,5 @@ export default IUI.module(class Field extends HTMLElement
 
       return { node, width, name, type };
     }
-});
+  }
+);

src/Data/Form.js

@@ -2,26 +2,23 @@
 import { IUI } from "../Core/IUI.js";
 import Modifiable from "./Modifiable.js";
 
-export default IUI.module(class Form extends IUIElement {
+export default IUI.module(
+  class Form extends IUIElement {
     constructor() {
       super();
     }
 
     static _copy(val) {
-        if (typeof val === 'object' && val !== null)
+      if (typeof val === "object" && val !== null) {
-        {
         let rt = {};
         for (var i in val)
           if (val[i] instanceof Array)
             // copy array
             rt[i] = [...val[i]];
-                else
+          else rt[i] = val[i];
-                    rt[i] = val[i];
 
         return rt;
-        }
+      } else return val;
-        else 
-            return val;
     }
 
     async create() {
@@ -38,34 +35,29 @@ export default IUI.module(class Form extends IUIElement {
       //super.setData({ ...this.original });
     }
 
-  
     async reset() {
       //super.setData({ ...this.original });
       super.setData(new Modifiable(this.original)); //Form._copy(this.original));
       return this;
     }
 
- 
-
     get diff() {
-
       return this._data._diff;
 
-        if (this.original == null)
+      if (this.original == null) return this._data;
-            return this._data;
-
 
       var rt = {};
       for (var i in this._data)
-            if (this._data[i] != this.original[i])
+        if (this._data[i] != this.original[i]) {
-            {
+          if (
-                if (this._data[i] instanceof Array && Form._areEqual(this._data[i], this.original[i]))
+            this._data[i] instanceof Array &&
+            Form._areEqual(this._data[i], this.original[i])
+          )
             continue;
-                else
+          else rt[i] = this._data[i];
-                    rt[i] = this._data[i];
         }
 
       return rt;
     }
-
+  }
-});
+);

src/Data/Include.js

@@ -2,10 +2,9 @@ import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 import RefsCollection from "../Core/RefsCollection.js";
 
-export default IUI.module(class Include extends IUIElement
+export default IUI.module(
-{
+  class Include extends IUIElement {
-    constructor()
+    constructor() {
-    {
       super();
       this.refs = new RefsCollection();
     }
@@ -19,37 +18,36 @@ export default IUI.module(class Include extends IUIElement
       this._load(value);
     }
 
-    
     get scope() {
       return { view: this, refs: this.refs };
     }
 
-    async _load(url)
+    async _load(url) {
-    {
+      if (this._loading) return;
-        if (this._loading)
-            return;
 
       this._loading = true;
 
-        let src = url.replace(/^\/+|\/+$/g, '');
+      let src = url.replace(/^\/+|\/+$/g, "");
 
       this.classList.add(this.cssClass + "-loading");
 
       let x = await fetch(src);
 
-        if (x.status == 200)
+      if (x.status == 200) {
-        {
         let t = await x.text();
 
         this.innerHTML = t;
 
         //let xeval = (code) => eval(code);
 
-            if (window?.app?.loaded)
+        if (window?.app?.loaded) {
-            {
           await IUI.create(this);
-                IUI.bind(this, true, "include:" + src, 
+          IUI.bind(
-                    IUI.extend(this._i__bindings.scope, this.scope, true));
+            this,
+            true,
+            "include:" + src,
+            IUI.extend(this._i__bindings.scope, this.scope, true)
+          );
 
           this.refs._build();
           await IUI.created(this);
@@ -102,14 +100,12 @@ export default IUI.module(class Include extends IUIElement
       this._loading = false;
     }
 
-    async create()
+    async create() {
-    {
+      if (this.hasAttribute("src")) await this._load(this.getAttribute("src"));
-        if (this.hasAttribute("src"))
-            await this._load(this.getAttribute("src"));
     }
 
     async created() {
       this.refs._build();
     }
-
+  }
-});
+);

src/Data/Layout.js

@@ -1,11 +1,11 @@
 import IUIElement from "../Core/IUIElement.js";
-import Field from './Field.js';
+import Field from "./Field.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Layout extends HTMLElement// IUIElement
+export default IUI.module(
-{  
+  class Layout extends HTMLElement {
-	constructor()
+    // IUIElement
-	{
+    constructor() {
       super();
     }
 
@@ -30,8 +30,7 @@ export default IUI.module(class Layout extends HTMLElement// IUIElement
           let layout = el.children[i];
           let rt = layout.innerHTML;
 
-				if (removeSelf)
+          if (removeSelf) el.removeChild(layout);
-					el.removeChild(layout);
           return rt;
         }
 
@@ -39,7 +38,6 @@ export default IUI.module(class Layout extends HTMLElement// IUIElement
     }
 
     static get(el, tag, removeSelf = false, collection = false) {
-
       for (var i = 0; i < el.children.length; i++)
         if (el.children[i] instanceof Layout) {
           let layout = el.children[i];
@@ -47,18 +45,16 @@ export default IUI.module(class Layout extends HTMLElement// IUIElement
           for (var j = 0; j < layout.children.length; j++) {
             if (layout.children[j] instanceof Field) {
               let fd = layout.children[j].serialize(tag);
-						if (collection)
+              if (collection) rt[fd.name] = fd;
-							rt[fd.name] = fd;
+              else rt.push(fd);
-						else
-							rt.push(fd);
             }
           }
 
-				if (removeSelf)
+          if (removeSelf) layout.parentElement.removeChild(layout);
-					layout.parentElement.removeChild(layout);
           return rt;
         }
 
       return null;
     }
-});
+  }
+);

src/Data/Modifiable.js

@@ -1,48 +1,35 @@
-export default class Modifiable
+export default class Modifiable {
-{
   static _copy(val) {
-        if (typeof val === 'object' && val !== null)
+    if (typeof val === "object" && val !== null) {
-        {
       let rt = {};
       for (var i in val)
         if (val[i] instanceof Array)
           // copy array
           rt[i] = [...val[i]];
-                else
+        else rt[i] = val[i];
-                    rt[i] = val[i];
 
       return rt;
-        }
+    } else return val;
-        else 
-            return val;
   }
 
   // @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag
-    static _areEqual(ar1, ar2)
+  static _areEqual(ar1, ar2) {
-    {
+    if (!(ar1 instanceof Array) || !(ar2 instanceof Array)) return false;
-        if (!(ar1 instanceof Array) || !( ar2 instanceof Array))
-            return false;
 
-        if (ar1.length != ar2.length)
+    if (ar1.length != ar2.length) return false;
-            return false;
 
-        for(var i = 0; i < ar1.length; i++)
+    for (var i = 0; i < ar1.length; i++) if (ar1[i] != ar2[i]) return false;
-            if (ar1[i] != ar2[i])
-                return false;
 
     return true;
   }
 
   constructor(original) {
-
     this._events = {};
     this._data = Modifiable._copy(original);
     this._original = original;
 
-        for(let p in this._data)
+    for (let p in this._data) {
-        {
+      if (p.startsWith("_")) continue;
-            if (p.startsWith("_"))
-                continue;
 
       this._register(":" + p);
 
@@ -53,38 +40,33 @@ export default class Modifiable
         set(value) {
           this._data[p] = value;
           this._emit(":" + p, value);
-                }
+        },
       });
     }
-
   }
 
-
   get _diff() {
-        if (this._original == null)
+    if (this._original == null) return this._data;
-            return this._data;
 
     var rt = {};
     for (var i in this._data)
-            if (this._data[i] != this._original[i])
+      if (this._data[i] != this._original[i]) {
-            {
+        if (
-                if (this._data[i] instanceof Array && Modifiable._areEqual(this._data[i], this._original[i]))
+          this._data[i] instanceof Array &&
+          Modifiable._areEqual(this._data[i], this._original[i])
+        )
           continue;
-                else
+        else rt[i] = this._data[i];
-                    rt[i] = this._data[i];
       }
 
     return rt;
   }
 
-    _register(event)
+  _register(event) {
-    {
     this._events[event] = [];
   }
 
-
+  _emit(event) {
-    _emit(event)
-    {
     event = event.toLowerCase();
     var args = Array.prototype.slice.call(arguments, 1);
     if (this._events[event])
@@ -95,8 +77,7 @@ export default class Modifiable
     return false;
   }
 
-    _emitArgs(event, args)
+  _emitArgs(event, args) {
-    {
     event = event.toLowerCase();
     if (this._events[event])
       for (var i = 0; i < this._events[event].length; i++)
@@ -105,33 +86,24 @@ export default class Modifiable
     return this;
   }
 
-    on(event, fn, issuer)
+  on(event, fn, issuer) {
-    {
+    if (!(fn instanceof Function)) return this;
-        if (!(fn instanceof Function))
-            return this;
 
     event = event.toLowerCase();
     // add
-        if (!this._events[event])
+    if (!this._events[event]) this._events[event] = [];
-            this._events[event] = [];
     this._events[event].push({ f: fn, i: issuer == null ? this : issuer });
     return this;
   }
 
-    
+  off(event, fn) {
-    off(event, fn)
-    {
     event = event.toLowerCase();
-        if (this._events[event])
+    if (this._events[event]) {
-        {
+      if (fn) {
-            if (fn)
-            {
         for (var i = 0; i < this._events[event].length; i++)
           if (this._events[event][i].f == fn)
             this._events[event].splice(i--, 1);
-            }
+      } else {
-            else
-            {
         this._events[event] = [];
       }
     }

src/Data/Repeat.js

@@ -1,58 +1,49 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Repeat extends IUIElement
+export default IUI.module(
-{
+  class Repeat extends IUIElement {
-    constructor()
+    constructor() {
-    {
       super({ _data: [] });
       this.list = [];
     }
 
     _isDirectDecedent(x) {
-        while(x = x.parentElement)
+      while ((x = x.parentElement))
-            if (x == this)
+        if (x == this) return true;
-                return true;
+        else if (x instanceof Repeat && x != this) return false;
-            else if (x instanceof Repeat && x != this)
-                return false;
     }
 
-    create()
+    create() {
-    {
       //////////////
       /// Create ///
       //////////////
 
-        if (this._created)
+      if (this._created) debugger;
-            debugger;
 
       this._created = true;
 
       // create template to speed avoid HTML parsing each time.
       let repeatables = this.querySelectorAll("*[repeat]");
 
-        repeatables = Array.from(repeatables).filter(x=>this._isDirectDecedent(x));
+      repeatables = Array.from(repeatables).filter(x =>
-
+        this._isDirectDecedent(x)
-        if (repeatables.length > 0)
+      );
-        {
 
+      if (repeatables.length > 0) {
         this._repeatNode = repeatables[0].cloneNode(true);
         this._container = repeatables[0].parentElement;
         this._beforeNode = repeatables[0].nextSibling;
         repeatables[0].parentElement.removeChild(repeatables[0]);
-        }
+      } else {
-        else
-        {
         if (this.children.length > 0)
           this._repeatNode = this.children[0].cloneNode(true);
-            else
+        else this._repeatNode = document.createElement("div");
-                this._repeatNode = document.createElement("div");
 
         this.innerHTML = "";
         this._container = this;
       }
 
-
       // var newElements = this.querySelectorAll("*");
       // for (var i = 0; i < newElements.length; i++)
       //     newElements[i].repeat = this;
@@ -86,16 +77,13 @@ export default IUI.module(class Repeat extends IUIElement
         */
     }
 
-
+    clear() {
-    clear()
-    {
       for (var i = 0; i < this.list.length; i++)
         this._container.removeChild(this.list[i]);
       this.list = [];
       this._data = [];
     }
 
-    
     get data() {
       return super.data;
     }
@@ -104,45 +92,41 @@ export default IUI.module(class Repeat extends IUIElement
       return this._data.length;
     }
 
-
+    async setData(value) {
-    async setData(value)
-    {
-        
-        
       // this to avoid interruption by an event
-        if (this._busy)
+      if (this._busy) {
-        {
         console.log("Busy", this);
         return false;
       }
 
       this._busy = true;
 
- 
       // clear
       this.clear();
 
-        if (value?.toArray instanceof Function)
+      if (value?.toArray instanceof Function) value = value.toArray();
-            value = value.toArray();
+      else if (
-        else if (value == null || !(value instanceof Array || value instanceof Int32Array))
+        value == null ||
+        !(value instanceof Array || value instanceof Int32Array)
+      )
         value = [];
 
-
       //debugger;
       await super.setData(value);
 
-        
       for (let i = 0; i < value.length; i++) {
-
         let e = this._repeatNode.cloneNode(true);
 
         this.list.push(e);
 
         await IUI.create(e);
 
-            IUI.bind(e, false, "repeat", 
+        IUI.bind(
-                      IUI.extend(this.__i_bindings?.scope, 
+          e,
-                                {index: i, repeat: this}, true));
+          false,
+          "repeat",
+          IUI.extend(this.__i_bindings?.scope, { index: i, repeat: this }, true)
+        );
 
         this._container.insertBefore(e, this._beforeNode);
 
@@ -152,17 +136,13 @@ export default IUI.module(class Repeat extends IUIElement
         await IUI.created(e);
 
         await IUI.render(e, value[i], false);
-        
       }
 
-
-    
       // @TODO: check if this works for event names starting with ":"
       this._emit(":data", { data: value });
       // this._emit("modified", { data: value, property: "data" });
 
-   
       this._busy = false;
     }
-
+  }
-});
+);

src/Data/TableRow.js

@@ -1,8 +1,8 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-
+export default IUI.module(
-export default IUI.module(class TableRow extends IUIElement {
+  class TableRow extends IUIElement {
     constructor() {
       super();
     }
@@ -12,4 +12,5 @@ export default IUI.module(class TableRow extends IUIElement {
       this.style.display = "table-row";
       console.log("TR");
     }
-});
+  }
+);

src/Router/Link.js

@@ -1,21 +1,18 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Link extends IUIElement
+export default IUI.module(
-{
+  class Link extends IUIElement {
-    constructor()
+    constructor() {
-    {
       //debugger;
-        super({ cssClass: 'link' });
+      super({ cssClass: "link" });
 
       //      super({ cssClass: 'link' });
       this._register("route");
-        this.addEventListener("click",
+      this.addEventListener("click", e => {
-            (e) => {
-
         var r = this.getBoundingClientRect();
-                this.style.setProperty("--x", (e.x - r.x) + "px");
+        this.style.setProperty("--x", e.x - r.x + "px");
-                this.style.setProperty("--y", (e.y - r.y) + "px");
+        this.style.setProperty("--y", e.y - r.y + "px");
 
         this.style.setProperty("--w", r.width + "px");
         this.style.setProperty("--h", r.height + "px");
@@ -26,31 +23,31 @@ export default IUI.module(class Link extends IUIElement
 
         let url = this.getAttribute("href");
 
-                let ok = this._emit("route", { url, cancelable: true, query: this.query});
+        let ok = this._emit("route", {
-                if (!ok)
+          url,
-                    return;
+          cancelable: true,
-
+          query: this.query,
+        });
+        if (!ok) return;
 
         //if (url == "#")
         //  url = router.current.link;
         // return;
 
-                let target = this.hasAttribute("target") ? document.getElementById(this.getAttribute("target")) : null;
+        let target = this.hasAttribute("target")
-
+          ? document.getElementById(this.getAttribute("target"))
+          : null;
 
         if (url == ":back") {
           window.router.back();
           return;
         }
 
-
+        if (this.query)
-                
+          // || this.hasAttribute(":data"))
-                if (this.query)// || this.hasAttribute(":data"))
           window.router.navigate(url || router.current.url, this.query, target);
-                else if (url != null)
+        else if (url != null) window.router.navigate(url, undefined, target);
-                    window.router.navigate(url, undefined, target);
+      });
-            }
-        );
 
       //this._register("click");
     }
@@ -63,8 +60,6 @@ export default IUI.module(class Link extends IUIElement
       this.setAttribute("href", value);
     }
 
-    create()
+    create() {}
-    {
-
   }
-});
+);

src/Router/Route.js

@@ -2,9 +2,10 @@ import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 import Router from "./Router.js";
 import RefsCollection from "../Core/RefsCollection.js";
+import Path from "../Core/Path.js";
 
-export default IUI.module(class Route extends IUIElement {
+export default IUI.module(
-
+  class Route extends IUIElement {
     constructor() {
       super();
 
@@ -16,8 +17,7 @@ export default IUI.module(class Route extends IUIElement {
     }
 
     async setData(value) {
-        if (this.hasAttribute("debug"))
+      if (this.hasAttribute("debug")) debugger;
-            debugger;
 
       return await super.setData(value);
     }
@@ -36,6 +36,8 @@ export default IUI.module(class Route extends IUIElement {
       }
     }
 
+    base = "";
+
     get link() {
       var link = this.name;
       var parent = this.parent;
@@ -44,7 +46,7 @@ export default IUI.module(class Route extends IUIElement {
         parent = parent.parent;
       }
 
-        return link;
+      return this.base + "/" + link;
     }
 
     get name() {
@@ -77,108 +79,59 @@ export default IUI.module(class Route extends IUIElement {
 
     _getParent() {
       let e = null; //this.parentElement;
-        while (e = this.parentElement) {
+      while ((e = this.parentElement)) {
-            if (e instanceof Route || e instanceof Router)
+        if (e instanceof Route || e instanceof Router) return e;
-                return e;
       }
 
       return null;
     }
 
-    // get route() {
-    //     return this;
-    // }
-
-    // get view() {
-    //     return this;
-    // }
-    
     async create() {
-
       //window.router.add(this);
       this._updateLinks();
 
       if (this.hasAttribute("src")) {
-
+        let src = this.getAttribute("src").replace(/^\/+|\/+$/g, "");
-            let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
         let x = await fetch(src);
-            if (x.status != 200)
+        if (x.status != 200) return;
-                return;
 
         let t = await x.text();
 
         this.innerHTML = t;
- 
-            //let xeval = (code) => eval(code);
       }
 
-
+      if (window?.app?.loaded) {
-        if (window?.app?.loaded)
-        {
         await IUI.create(this);
         IUI.bind(this, true, "route:" + src, this.scope);
         this.refs._build();
         await IUI.created(this);
         await IUI.render(this, this._data, true);
       }
-
-        // // call create for the new elements
-        // var newElements = this.querySelectorAll("*");
-        // for (var i = 0; i < newElements.length; i++) {
-        //     // set route for all elements
-        //     var el = newElements[i];
-        //     // newElements[i].route = this;
-        //     el.view = this;
-        //     el.route = this;
-
-        //     if (el.hasAttribute("ref")) {
-        //         this.refs[el.getAttribute("ref")] = el;
-        //     }
-
-        //     if (el instanceof HTMLScriptElement) {
-        //         // this because HTML parsers don't evaluate script tag
-        //         // xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text);
-
-        //         //let func = new Function("//# sourceURL=iui://" +
-        //         //    src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
-
-        //         let func = new Function("//# sourceURL=iui://" + this.link
-        //          + "\r\n return " + el.text.trim());
-
-        //         let rt = func.call(el.parentElement);
-
-        //         if (typeof (rt) === "object") {
-        //             for (var k in rt)
-        //                 el.parentElement[k] = rt[k];
-        //         }
-        //     }
-        // }
     }
 
-    created() 
+    created() {
-    {
       this.refs._build();
     }
 
     set(value) {
-        if (value == this.visible)
+      if (value == this.visible) {
         return;
+      }
 
       if (value) {
-            
         this.setAttribute("selected", "");
         this._emit("show");
-
+      } else {
-            
-        }
-        else
-        {
         this.removeAttribute("selected");
         this._emit("hide");
       }
     }
 
-    get visible() { return this.hasAttribute("selected"); }
+    get visible() {
-    set visible(value) { this.set(value); }
+      return this.hasAttribute("selected");
-
+    }
-});
+    set visible(value) {
+      this.set(value);
+    }
+  }
+);

src/Router/Router.js

@@ -1,158 +1,135 @@
-import IUIElement from "../Core/IUIElement.js";
+import Route from "./Route.js";
-import Route from "./Route.js"
 import Target from "./Target.js";
 import { IUI } from "../Core/IUI.js";
+import path from "../Core/Path.js";
 
-
+export default IUI.module(
-export default IUI.module(class Router extends Target
+  class Router extends Target {
-{
+    constructor() {
-    
+      super({
-    constructor()
+        routes: [],
-    {
+        _states: new Map(),
-        super({routes: [], _states: new Map(), active: null, cssClass: "router"});
+        active: null,
+        cssClass: "router",
+      });
 
       this._history = [];
-
-
-        //IUI._router = this;
-
-        //Object.defineProperty(window, "router", {
-        //    get() {
-        //        if (!IUI._router.isConnected)
-        //            IUI._router = document.getElementsByTagName("i-router")[0];
-        //        return IUI._router;
-        //    }
-        //});
-
     }
 
     _getRouteParent(route) {
       let e = null;
 
-        while (e = route.parentElement) {
+      while ((e = route.parentElement)) {
-            if (e instanceof Route || e instanceof Router)
+        if (e instanceof Route || e instanceof Router) return e;
-                return e;
       }
 
       return null;
     }
 
     add(route, parent = null) {
-        if (parent == null) {
+      route.base = this._base;
+
+      if (!parent) {
         this.routes.push(route);
-        }
+        return;
-        else {
-            route.parent = parent;
-            this.appendChild(route);
-            //parent.routes.push(route);
-        }
       }
 
-    _routeInPath(name, routes)
+      route.parent = parent;
-    {
+      this.appendChild(route);
-        for (var i = 0; i < routes.length; i++)
+    }
-            if (routes[i].name == name)
+
-                return routes[i];
+    _routeInPath(name, routes) {
+      for (let i = 0; i < routes.length; i++)
+        if (routes[i].name == name) return routes[i];
       return null;
     }
 
     getRoute(url, data) {
-        let p = url.split("/");
+      /**
-
+       * @type {String[]}
+       */
+      const p = url.split("/");
+      if (p[0] == this._base) p.shift();
       let searchRoutes = this.routes;
+      for (let i = 0; i < p.length; i++) {
+        const route = this._routeInPath(p[i], searchRoutes);
 
-        for (var i = 0; i < p.length; i++) {
+        if (route == null) return [null, null];
-            var route = this._routeInPath(p[i], searchRoutes);
-
-            if (route == null)
-                return [null, null];
 
         if (i == p.length - 1) {
           // return [destination state route (link, icon,..etc) , actual route to view]
-                if (route.dst == null)
+          if (route.dst == null) return [route, route];
-                    return [route, route];
-                else {
 
-                    let dst = route.dst instanceof Function ? route.dst(data) : route.dst;
+          const dst =
-                    let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim();
+            route.dst instanceof Function ? route.dst(data) : route.dst;
+          const url = dst.replace(/^[/]*(.*?)[/]*$/g, "$1").trim();
           return [route, this.getRoute(url)[1]];
         }
-            }
-
         searchRoutes = route.routes;
       }
-
     }
 
     back() {
-        //if (this._history.length > 1) {
-        //    let last = this._history[this._history.length - 2];
-        //    this.navigate(last.url, last.data, last.target);
-        //}
-
       window.history.back();
     }
 
     _toQuery(o) {
-        let rt = [];
+      return Object.keys(o)
-        for (let i in o)
+        .map(i =>
-            if (o[i] == undefined)
+          !i ? i : `${i}=${encodeURI(o[i].toString().replace("&", "&&"))}`
-                rt.push(i);
+        )
-            else
+        .join("&");
-                rt.push(i + "=" + encodeURI(o[i].toString().replace("&", "&&")));///encodeURIComponent(o[i]));
-        return rt.join("&");
     }
 
     _fromQuery(q) {
-        let kv = q.replace("&&", "\0").split('&');
+      const kv = q.replace("&&", "\0").split("&");
-        let rt = {};
+      const rt = {};
       for (let i = 0; i < kv.length; i++) {
-            let d = kv[i].replace("\0", "&").split('=', 2);
+        const d = kv[i].replace("\0", "&").split("=", 2);
-            let v = decodeURI(d[1] || ''); //decodeURIComponent(d[1] || '');
+        const v = decodeURI(d[1] || "");
-            if (v != null && v.trim() != '' && !isNaN(v))
+        if (v != null && v.trim() != "" && !isNaN(v)) v = new Number(v);
-                v = new Number(v);
         rt[d[0]] = v;
       }
       return JSON.parse(JSON.stringify(rt));
     }
 
-    async navigate(url, data, target, state, dataToQuery = true)
+    async navigate(url, data, target, state, dataToQuery = true) {
-    {
       let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/);
 
-        //debugger;
+      let path;
 
-        var path;
+      // Do we have a query string ?
-
-        // do we have a query string ?
       if (q[2] !== undefined) {
         path = q[1];
         data = this._fromQuery(q[2]);
         url = path + "?" + q[2];
       }
-        // do we have data ?
+      // Do we have data?
       else if (data !== undefined) {
         path = q[3];
         url = dataToQuery ? path + "?" + this._toQuery(data) : path;
-        }
+      } else {
-        else {
         path = q[3];
         url = path;
       }
 
+      const [stateRoute, viewRoute] = this.getRoute(path, data);
 
-        let [stateRoute, viewRoute] = this.getRoute(path, data);
+      if (stateRoute == null) {
-
-        if (stateRoute == null)
-        {
         console.warn("State not found ", path);
         return;
       }
 
-        let ok = this._emit("navigate", { url, stateRoute, viewRoute, base: path, data, cancelable: true });
+      let ok = this._emit("navigate", {
+        url,
+        stateRoute,
+        viewRoute,
+        base: path,
+        data,
+        cancelable: true,
+      });
 
-        if (!ok)
+      if (!ok) {
-        {
         console.warn("Route not allowed", path);
         return;
       }
@@ -163,30 +140,17 @@ export default IUI.module(class Router extends Target
         viewRoute = stateRoute;
       }
 
-
+      if (!(target instanceof Target)) target = this;
-        //let state = null;
-
-        //if (data !== undefined) {
-        //    for (let [k, v] of this._states)
-        //        if (v == data) {
-        //            state = k;
-        //            break;
-        //        }
-
-        //    if (state == null) {
-        //        state = Math.random().toString(36).substr(2, 10);
-        //        this._states.set(state, data);
-        //    }
-        //}
-
-        if (!(target instanceof Target))
-            target = this;
 
       if (state == null) {
-            let id = Math.random().toString(36).substr(2, 10); 
+        const id = Math.random().toString(36).substring(2, 12);
         state = { id, url, data, target, stateRoute, viewRoute };
         this._states.set(id, state);
-            history.pushState(id, stateRoute.caption, this._hash ? "#" + url : "/" + url);
+        history.pushState(
+          id,
+          stateRoute.caption,
+          this._hash ? "#" + url : "/" + url
+        );
       }
 
       this._history.push(state.id); // { url, data, target, stateRoute, viewRoute });
@@ -194,17 +158,13 @@ export default IUI.module(class Router extends Target
       target.show(viewRoute, this.active);
       viewRoute.set(true);
 
-
       this.active = viewRoute;
 
-
-        //{ url: "/", data: null, target: null }; 
       this._emit("route", { route: stateRoute });
 
       viewRoute.query = data || {};
       stateRoute.query = viewRoute.query;
 
-
       target.setLoading(true);
 
       if (stateRoute.dataMap != null) {
@@ -212,14 +172,11 @@ export default IUI.module(class Router extends Target
         if (!(await stateRoute.dataMap.render(data || {})))
           await stateRoute.render();
 
-            if (viewRoute != stateRoute)
+        if (viewRoute != stateRoute) await viewRoute.setData(stateRoute.data);
-                await viewRoute.setData(stateRoute.data);
+      } //if (data !== undefined)
-        }
+      else await viewRoute.setData(data);
-        else //if (data !== undefined)
-            await viewRoute.setData(data);
 
       target.setLoading(false);
-        
     }
 
     hide() {
@@ -227,102 +184,80 @@ export default IUI.module(class Router extends Target
     }
 
     refresh() {
-
+      const state = this.current;
-        let state = this.current;
       this.navigate(state.url, state.data, state.target, state);
-
-        //this.current.render();
-        //this.current.data = this.current.data;
-        //if (updateAttributes)
-          //  this.current.updateAttributes(true);
     }
 
     show(route, active) {
       super.show(route, active);
-
-
     }
 
     get current() {
       return this._states.get(history.state); //.viewRoute;
-        //return this._history[this._history.length - 1].viewRoute;
     }
 
     get previous() {
-
       if (this._history.length > 2)
-            return this._states.get(this._history[this._history.length  - 2]);//.viewRoute;
+        return this._states.get(this._history[this._history.length - 2]);
-        else
+      //.viewRoute;
-            return null;
+      else return null;
     }
 
     create() {
-
       // save origin
       this.origin = window.location.pathname + window.location.search;
+      this._base = this.hasAttribute("base") ? this.getAttribute("base") : "/";
     }
 
     destroy() {
       console.log("Destroyed", this);
     }
 
-    created()
+    created() {
-    {
+      if (
-
+        this.hasAttribute("type") &&
-        if (this.hasAttribute("type") && this.getAttribute("type").toLowerCase() == "hash")
+        this.getAttribute("type").toLowerCase() == "hash"
+      ) {
         this._hash = true;
-
+      }
 
       /// find all children
-        for (var i = 0; i < this.children.length; i++) {
+      for (let i = 0; i < this.children.length; i++) {
-            let e = this.children[i];
+        const e = this.children[i];
         if (e instanceof Route) {
           this.add(e);
-                if (e.visible)
+          if (e.visible) this.navigate(e.name);
-                    this.navigate(e.name);
         }
       }
 
       this._emit("created");
-
-        //console.log("Router created", this);
     }
 
     connectedCallback() {
-        //console.log("New router", this);
-
       window.router = this;
 
-        let self = this;
+      const self = this;
-
       window.addEventListener("popstate", function (event) {
-
+        const stateId = event.state;
-            //console.log(event);
-            let stateId = event.state;
         let path;
 
         if (self._hash) {
           path = window.location.hash;
 
-                if (path.length > 0)
+          if (path.length > 0) path = path.substring(1);
-                    path = path.substr(1);
+        } else {
-            }
-            else {
           path = window.location.pathname;
         }
 
         if (stateId != null) {
-
           if (stateId != self._history[self._history.length - 1]) {
             //this._lastStateId = stateId;
-                    let state = self._states.get(stateId);
+            const state = self._states.get(stateId);
             self.navigate(path, state.data, state.target, state);
-                }
+          } else {
-                else {
             console.log("SAME");
           }
-            }
+        } else {
-            else {
           this._lastState = null;
           self.navigate(path, undefined, undefined, {});
         }
@@ -334,5 +269,5 @@ export default IUI.module(class Router extends Target
       this._register("route");
       this._register("created");
     }
-
+  }
-});
+);

src/Router/Target.js

@@ -2,29 +2,23 @@
 import { IUI } from "../Core/IUI.js";
 import Route from "./Route.js";
 
-export default IUI.module(class Target extends IUIElement {
+export default IUI.module(
+  class Target extends IUIElement {
     constructor(properties) {
-        super(IUI.extend(properties, { cssClass: 'target' }));
+      super(IUI.extend(properties, { cssClass: "target" }));
 
       this._register("show");
       this._register("hide");
-
     }
 
-    setLoading(value)
+    setLoading(value) {
-    {
+      if (value) this.classList.add(this.cssClass + "-loading");
-        if (value)
+      else this.classList.remove(this.cssClass + "-loading");
-            this.classList.add(this.cssClass + "-loading");
-        else
-            this.classList.remove(this.cssClass + "-loading");
     }
 
-    create() {
+    create() {}
-
-    }
 
     show(route, previous) {
-
       let previousTarget = previous?.target;
 
       route.target = this;
@@ -42,9 +36,7 @@ export default IUI.module(class Target extends IUIElement {
         previousTarget.hide(this.active);
       }
 
-
+      if (route.parentElement != this) this.appendChild(route);
-        if (route.parentElement != this)
-            this.appendChild(route);
 
       this._emit("show", { route, previous });
     }
@@ -57,4 +49,5 @@ export default IUI.module(class Target extends IUIElement {
 
       this._emit("hide", { route });
     }
-});
+  }
+);

src/UI/Background.js

@@ -1,20 +1,16 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Background extends IUIElement {
+export default IUI.module(
+  class Background extends IUIElement {
     constructor() {
-        super({ cssClass: 'background' });
+      super({ cssClass: "background" });
-
 
       this.classList.add(this.cssClass);
       this._register("visible");
-
     }
 
-
+    create() {}
-    create() {
-
-    }
 
     hide() {
       return this.setVisible(false);
@@ -28,8 +24,7 @@ export default IUI.module(class Background extends IUIElement {
       this.visible = value;
       if (value) {
         this.classList.add(this.cssClass + "-visible");
-        }
+      } else {
-        else {
         this.classList.remove(this.cssClass + "-visible");
       }
 
@@ -37,4 +32,5 @@ export default IUI.module(class Background extends IUIElement {
 
       return this;
     }
-});
+  }
+);

src/UI/Button.js

@@ -1,15 +1,17 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Button extends IUIElement {
+export default IUI.module(
+  class Button extends IUIElement {
     constructor() {
-        super({ cssClass: 'button' });
+      super({ cssClass: "button" });
-
-        this.addEventListener("mousedown", (e)=>{
 
+      this.addEventListener(
+        "mousedown",
+        e => {
           var r = this.getBoundingClientRect();
-            this.style.setProperty("--x", (e.x - r.x) + "px");
+          this.style.setProperty("--x", e.x - r.x + "px");
-            this.style.setProperty("--y", (e.y - r.y) + "px");
+          this.style.setProperty("--y", e.y - r.y + "px");
 
           this.style.setProperty("--w", r.width + "px");
           this.style.setProperty("--h", r.height + "px");
@@ -17,8 +19,9 @@ export default IUI.module(class Button extends IUIElement {
           this.classList.remove(this.cssClass + "-clicked");
           void this.offsetWidth;
           this.classList.add(this.cssClass + "-clicked");
-
+        },
-        }, true);
+        true
+      );
 
       this._register("check");
     }
@@ -27,8 +30,7 @@ export default IUI.module(class Button extends IUIElement {
       return this.getAttribute("type");
     }
 
-    set type(value)
+    set type(value) {
-    {
       this.setAttribute("type", value);
     }
 
@@ -36,15 +38,11 @@ export default IUI.module(class Button extends IUIElement {
       return this.hasAttribute("checked");
     }
 
-    set checked(value)
+    set checked(value) {
-    {
+      if (value) this.setAttribute("checked", "");
-        if (value)
+      else this.removeAttribute("checked");
-            this.setAttribute("checked", "");
-        else
-            this.removeAttribute("checked");
     }
 
-
     get disabled() {
       return this.getAttribute("disabled");
     }
@@ -53,11 +51,8 @@ export default IUI.module(class Button extends IUIElement {
       this.setAttribute("disabled", value);
     }
 
-    
     create() {
-
+      if (this.type == "check") {
-        if (this.type == "check")
-        {
         this.addEventListener("click", () => {
           let checked = !this.checked;
           this.checked = checked;
@@ -67,4 +62,5 @@ export default IUI.module(class Button extends IUIElement {
 
       //this.classList.add(this.cssClass);
     }
-});
+  }
+);

src/UI/Check.js

@@ -1,9 +1,10 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Check extends IUIElement {
+export default IUI.module(
+  class Check extends IUIElement {
     constructor(properties) {
-        super(IUI.extend(properties, { cssClass: 'check' }));
+      super(IUI.extend(properties, { cssClass: "check" }));
 
       this._register("check");
 
@@ -22,10 +23,8 @@ export default IUI.module(class Check extends IUIElement {
     }
 
     check(value) {
-        if (value)
+      if (value) this.setAttribute("checked", "checked");
-            this.setAttribute("checked", "checked");
+      else this.removeAttribute("checked");
-        else
-            this.removeAttribute("checked");
     }
 
     create() {
@@ -34,13 +33,10 @@ export default IUI.module(class Check extends IUIElement {
 
     async setData(value) {
       await super.setData(value);
-        if (value != null && this.field != null)
+      if (value != null && this.field != null) this.value = value[this.field];
-            this.value = value[this.field];
+      else if (this.field != null) this.value = null;
-        else if (this.field != null)
-            this.value = null;
     }
 
-
     modified(name, value) {
       if (name == this.field) {
         this.value = value;
@@ -54,5 +50,5 @@ export default IUI.module(class Check extends IUIElement {
     set value(value) {
       this.checked = value;
     }
-
+  }
-});
+);

src/UI/CodePreview.js

@@ -2,19 +2,17 @@ import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 import RefsCollection from "../Core/RefsCollection.js";
 
-export default IUI.module(class CodePreview extends IUIElement {
+export default IUI.module(
+  class CodePreview extends IUIElement {
     constructor() {
       super();
       this.refs = new RefsCollection(this);
       this._code = this.innerHTML.trim();
-        this.textContent = '';
+      this.textContent = "";
-
     }
 
     async create() {
-
+      if (this.hasAttribute("debug")) debugger;
-        if (this.hasAttribute("debug"))
-            debugger;
 
       //this._code = this.innerHTML.trim();
       //this.textContent = '';
@@ -33,10 +31,14 @@ export default IUI.module(class CodePreview extends IUIElement {
       this.editor.setAttribute("skip", true);
 
       let self = this;
-        this.editor.addEventListener("input", function() {
+      this.editor.addEventListener(
+        "input",
+        function () {
           self._code = self.editor.textContent.trim();
           self.updatePreview();
-        }, false);
+        },
+        false
+      );
 
       this.preview = document.createElement("div");
       this.preview.className = this.cssClass + "-preview";
@@ -61,10 +63,7 @@ export default IUI.module(class CodePreview extends IUIElement {
     }
 
     async updatePreview() {
-        
+      if (this._updating) return;
-
-        if (this._updating)
-            return;
 
       this._updating = true;
 
@@ -75,8 +74,7 @@ export default IUI.module(class CodePreview extends IUIElement {
 
       //     this.editor.innerHTML = hljs.highlightElement(this.editor, {language: 'html'}).value;
 
-        if (window.app?.loaded)
+      if (window.app?.loaded) {
-        {
         await IUI.create(this.preview);
         await IUI.created(this.preview);
         IUI.bind(this.preview, true, "preview", this.scope);
@@ -86,4 +84,5 @@ export default IUI.module(class CodePreview extends IUIElement {
 
       this._updating = false;
     }
-});
+  }
+);

src/UI/DateTimePicker.js

@@ -1,23 +1,18 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class DateTimePicker extends IUIElement {
+export default IUI.module(
-
+  class DateTimePicker extends IUIElement {
-
     constructor() {
       super();
     }
 
-   
-
     get layout() {
       return this._layout;
     }
 
     set layout(value) {
-
+      if (value == this._layout) return;
-        if (value == this._layout)
-            return;
 
       this.innerHTML = "";
 
@@ -26,7 +21,6 @@ export default IUI.module(class DateTimePicker extends IUIElement {
       this.calendar = document.createElement("div");
       this.calendar.className = this.cssClass + "-calendar";
 
-
       this.calendarContent = document.createElement("div");
       this.calendarContent.className = this.cssClass + "-calendar-content";
 
@@ -40,7 +34,9 @@ export default IUI.module(class DateTimePicker extends IUIElement {
 
       for (var i = 0; i < 7; i++) {
         var td = tr.insertCell();
-            td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7);
+        td.innerHTML = this.layout.day.formatter(
+          (i + this.layout.weekStart) % 7
+        );
         td.className = this.cssClass + "-day";
       }
 
@@ -53,7 +49,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
       this.monthName.className = this.cssClass + "-name";
       this.nextMonth = document.createElement("div");
       this.nextMonth.className = this.cssClass + "-next";
-        this.previousMonth = document.createElement("div");;
+      this.previousMonth = document.createElement("div");
       this.previousMonth.className = this.cssClass + "-previous";
 
       this.month.appendChild(this.previousMonth);
@@ -98,7 +94,6 @@ export default IUI.module(class DateTimePicker extends IUIElement {
         self.render();
       });
 
-
       for (let i = 0; i < 6; i++) {
         tr = this.body.insertRow();
 
@@ -181,10 +176,8 @@ export default IUI.module(class DateTimePicker extends IUIElement {
     }
 
     create() {
-
       var self = this;
 
-
       this._register("select");
 
       this.classList.add(this.cssClass);
@@ -192,39 +185,52 @@ export default IUI.module(class DateTimePicker extends IUIElement {
       this.layout = {
         day: {
           formatter: function (index) {
-                    return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][index];
+            return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][index];
             //return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index];
-                }
+          },
         },
         month: {
           formatter: function (index) {
-                    return ["January", "February", "March", "April", "May", "June",
+            return [
-                        "July", "August", "September", "October", "November", "December"][index];
+              "January",
-                }
+              "February",
+              "March",
+              "April",
+              "May",
+              "June",
+              "July",
+              "August",
+              "September",
+              "October",
+              "November",
+              "December",
+            ][index];
+          },
         },
         year: {
           formatter: function (value) {
             return value;
-                }
+          },
         },
         time: {
           formatter: function (value) {
-                    var formatDigit = function (d) { return (d < 10) ? "0" + d : d; };
+            var formatDigit = function (d) {
+              return d < 10 ? "0" + d : d;
+            };
             var h = Math.floor(value / 60);
             var m = Math.floor(value % 60);
             return formatDigit(h) + ":" + formatDigit(m);
           },
-                range: 15
+          range: 15,
         },
 
-            weekStart: 5
+        weekStart: 5,
       };
     }
 
     render() {
-
       var start = new Date(this._year, this._month, 1);
-        var offset = 1 - start.getDay() - (7 - this.layout.weekStart) % 7;//(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart);
+      var offset = 1 - start.getDay() - ((7 - this.layout.weekStart) % 7); //(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart);
 
       this.yearName.innerHTML = this.layout.year.formatter(this._year);
       this.monthName.innerHTML = this.layout.month.formatter(this._month);
@@ -245,18 +251,21 @@ export default IUI.module(class DateTimePicker extends IUIElement {
         if (d.getMonth() != this._month)
           td.classList.add(this.cssClass + "-different-month");
 
-            if (d.getDate() == today.getDate() && d.getMonth() == today.getMonth() && d.getFullYear() == today.getFullYear())
+        if (
+          d.getDate() == today.getDate() &&
+          d.getMonth() == today.getMonth() &&
+          d.getFullYear() == today.getFullYear()
+        )
           td.classList.add(this.cssClass + "-day-today");
-            else
+        else td.classList.remove(this.cssClass + "-day-today");
-                td.classList.remove(this.cssClass + "-day-today");
 
-            if (d.getDate() == this._value.getDate()
+        if (
-                && d.getFullYear() == this._value.getFullYear()
+          d.getDate() == this._value.getDate() &&
-                && d.getMonth() == this._value.getMonth())
+          d.getFullYear() == this._value.getFullYear() &&
+          d.getMonth() == this._value.getMonth()
+        )
           td.classList.add(this.cssClass + "-day-selected");
-            else
+        else td.classList.remove(this.cssClass + "-day-selected");
-                td.classList.remove(this.cssClass + "-day-selected");
-
 
         td.setAttribute("data-day", d.getDate());
         td.setAttribute("data-month", d.getMonth());
@@ -265,24 +274,24 @@ export default IUI.module(class DateTimePicker extends IUIElement {
         td.innerHTML = d.getDate();
       }
 
-
       for (var i = 0; i < this.clock.children.length; i++)
-            this.clock.children[i].classList.remove(this.cssClass + "-time-selected");
+        this.clock.children[i].classList.remove(
+          this.cssClass + "-time-selected"
+        );
 
-        var time = (this._value.getHours() * 60) + this._value.getMinutes();
+      var time = this._value.getHours() * 60 + this._value.getMinutes();
 
       if (time % this.layout.time.range == 0)
-            this.clock.children[time / this.layout.time.range].classList.add(this.cssClass + "-time-selected");
+        this.clock.children[time / this.layout.time.range].classList.add(
+          this.cssClass + "-time-selected"
+        );
     }
 
     async setData(value) {
-
       await super.setData(value);
 
-
       if (value != null && this.field != null)
         this.value = this.data[this.field];
-
     }
 
     get data() {
@@ -290,8 +299,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
     }
 
     modified(name, value) {
-        if (name == this.field)
+      if (name == this.field) this.value = value;
-            this.value = value;
     }
 
     set value(value) {
@@ -311,4 +319,5 @@ export default IUI.module(class DateTimePicker extends IUIElement {
     get value() {
       return this._value;
     }
-});
+  }
+);

src/UI/Dialog.js

@@ -2,12 +2,11 @@ import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 import IUIWindow from "./Window.js";
 
-export default  IUI.module(class IUIDialog extends IUIWindow
+export default IUI.module(
-{
+  class IUIDialog extends IUIWindow {
     static moduleName = "dialog";
 
-	constructor()
+    constructor() {
-	{
       super({
         closeable: true,
         resizeable: true,
@@ -17,9 +16,8 @@ export default  IUI.module(class IUIDialog extends IUIWindow
         x: 0,
         y: 0,
         visible: false,
-				modal: false
+        modal: false,
-			}
+      });
-		);
 
       var self = this;
 
@@ -31,38 +29,29 @@ export default  IUI.module(class IUIDialog extends IUIWindow
       });
     }
 
-	 create()
+    create() {
-	 {
-		 
       super.create();
       var self = this;
 
-		if (this.modal)
+      if (this.modal) {
-		{
         this.background = iui("iui_app_background");
-			if (!this.background)
+        if (!this.background) {
-			{
           var bg = document.createElement("div");
           bg.id = "iui_app_background";
           document.body.insertAdjacentElement("afterBegin", bg);
           this.background = iui(bg).background();
         }
 
-
         //		this.modal.className = this.customClass + "-modal-background";
 
         this.classList.add(this.customClass + "-modal");
-
       }
 
-
       this.loading = document.createElement("div");
       this.loading.className = this.customClass + "-loading";
 
-		if (this.loadingText)
+      if (this.loadingText) this.loading.innerHTML = this.loadingText;
-			this.loading.innerHTML = this.loadingText;
+      else {
-		else
-		{
         var lc = document.createElement("div");
         lc.className = this.customClass + "-loading-content";
         this.loading.appendChild(lc);
@@ -70,135 +59,152 @@ export default  IUI.module(class IUIDialog extends IUIWindow
 
       this.body.appendChild(this.loading);
 
-
+      if (this.draggable) {
-		if (this.draggable)
-		{
         this.addEventListener("mousedown", function (e) {
           self._startDragging(e);
         });
-		}
+      } else {
-		else
+        this.header.addEventListener("mousedown", function (e) {
-		{
-			this.header.addEventListener('mousedown', function (e) {
           self._startDragging(e);
         });
       }
 
-		document.addEventListener('mouseup', function () {
+      document.addEventListener("mouseup", function () {
         self._stopDragging();
         self._stopExpanding();
       });
 
-		document.addEventListener('mousemove', function (e) {
+      document.addEventListener("mousemove", function (e) {
-				if (self._dragging)
+        if (self._dragging) self._drag(e);
-					self._drag(e);
+        else if (self._expanding) self._expand(e);
-				else if (self._expanding)
-					self._expand(e);
       });
 
       this.addEventListener("mousedown", function (e) {
-			if (self.style.cursor == "nwse-resize")
+        if (self.style.cursor == "nwse-resize") self._startExpanding(e);
-				self._startExpanding(e);
       });
 
-		this.addEventListener("mousemove", function(e)
+      this.addEventListener("mousemove", function (e) {
-		{
+        if (self._dragging) return;
-			if (self._dragging)
-				return;
 
-			if (!self._expanding)			
+        if (!self._expanding) {
-			{
+          var x =
-				var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
+            (e.pageX ||
-					document.documentElement.scrollLeft :
+              e.clientX +
-					document.body.scrollLeft)) - self.offsetLeft;
+                (document.documentElement.scrollLeft
-				var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
+                  ? document.documentElement.scrollLeft
-					document.documentElement.scrollTop :
+                  : document.body.scrollLeft)) - self.offsetLeft;
-					document.body.scrollTop) ) - self.offsetTop;
+          var y =
+            (e.pageY ||
+              e.clientY +
+                (document.documentElement.scrollTop
+                  ? document.documentElement.scrollTop
+                  : document.body.scrollTop)) - self.offsetTop;
 
-				if (self.clientWidth - x < 5 && self.clientHeight - y < 5)
+          if (self.clientWidth - x < 5 && self.clientHeight - y < 5) {
-				{
             self.style.cursor = "nwse-resize";
-				}
+          } else {
-				else
-				{
             self.style.cursor = "";
           }
         }
       });
-
     }
 
-	 _startDragging(e)
+    _startDragging(e) {
-	 {
       this._dragging = true;
 
-		this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
+      this._dragX =
-			document.documentElement.scrollLeft :
+        (e.pageX ||
-			document.body.scrollLeft)) - this.offsetLeft;
+          e.clientX +
-			this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
+            (document.documentElement.scrollLeft
-			document.documentElement.scrollTop :
+              ? document.documentElement.scrollLeft
-			document.body.scrollTop) ) - this.offsetTop;
+              : document.body.scrollLeft)) - this.offsetLeft;
+      this._dragY =
+        (e.pageY ||
+          e.clientY +
+            (document.documentElement.scrollTop
+              ? document.documentElement.scrollTop
+              : document.body.scrollTop)) - this.offsetTop;
 
       //corssbrowser mouse pointer values
-		 document.onselectstart = function() {return false};
+      document.onselectstart = function () {
+        return false;
+      };
     }
 
-	 _drag(e)
+    _drag(e) {
-	 {
+      var x =
-		var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
+        e.pageX ||
-			document.documentElement.scrollLeft :
+        e.clientX +
-			document.body.scrollLeft);
+          (document.documentElement.scrollLeft
-		var y = e.pageY || e.clientY + (document.documentElement.scrollTop ?
+            ? document.documentElement.scrollLeft
-			document.documentElement.scrollTop :
+            : document.body.scrollLeft);
-			document.body.scrollTop);
+      var y =
-		this.style.top = (y - this._dragY ) + "px";// (y - self.y) + "px";
+        e.pageY ||
-		this.style.left = (x -this._dragX ) + "px";//(x - self.x) + "px";
+        e.clientY +
+          (document.documentElement.scrollTop
+            ? document.documentElement.scrollTop
+            : document.body.scrollTop);
+      this.style.top = y - this._dragY + "px"; // (y - self.y) + "px";
+      this.style.left = x - this._dragX + "px"; //(x - self.x) + "px";
       this._emit("move", { left: this.offsetLeft, top: this.offsetTop });
     }
 
-	 _stopDragging()
+    _stopDragging() {
-	 {
       this._dragging = false;
     }
 
-	 _startExpanding(e)
+    _startExpanding(e) {
-	 {
+      document.onselectstart = function () {
-		document.onselectstart = function() {return false};
+        return false;
+      };
       this._expanding = true;
-		this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
+      this._dragX =
-			document.documentElement.scrollLeft :
+        (e.pageX ||
-			document.body.scrollLeft)) - this.offsetLeft;
+          e.clientX +
-		this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
+            (document.documentElement.scrollLeft
-			document.documentElement.scrollTop :
+              ? document.documentElement.scrollLeft
-			document.body.scrollTop) ) - this.offsetTop;
+              : document.body.scrollLeft)) - this.offsetLeft;
+      this._dragY =
+        (e.pageY ||
+          e.clientY +
+            (document.documentElement.scrollTop
+              ? document.documentElement.scrollTop
+              : document.body.scrollTop)) - this.offsetTop;
       this._width = this.clientWidth;
       this._height = this.clientHeight;
     }
 
-	 _expand(e)
+    _expand(e) {
-	 {
+      var x =
-		var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
+        (e.pageX ||
-			document.documentElement.scrollLeft :
+          e.clientX +
-			document.body.scrollLeft))  - this.offsetLeft;
+            (document.documentElement.scrollLeft
-		var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
+              ? document.documentElement.scrollLeft
-			document.documentElement.scrollTop :
+              : document.body.scrollLeft)) - this.offsetLeft;
-			document.body.scrollTop)) - this.offsetTop;
+      var y =
+        (e.pageY ||
+          e.clientY +
+            (document.documentElement.scrollTop
+              ? document.documentElement.scrollTop
+              : document.body.scrollTop)) - this.offsetTop;
 
-		
+      this.resize(
-		this.resize(this._width + x -this._dragX, this._height + y - this._dragY);
+        this._width + x - this._dragX,
+        this._height + y - this._dragY
+      );
     }
 
-	 _stopExpanding()
+    _stopExpanding() {
-	 {
       this._expanding = false;
       this.style.cursor = "";
       this._width = this.clientWidth;
       this._height = this.clientHeight;
-		document.onselectstart = function() {return true};
+      document.onselectstart = function () {
+        return true;
+      };
     }
 
-    setLoading(visible)
+    setLoading(visible) {
-	{
       if (this.footer)
         for (var i = 0; i < this.footer.children.length; i++)
           if (this.footer.children[i].nodeName == "BUTTON")
@@ -206,39 +212,32 @@ export default  IUI.module(class IUIDialog extends IUIWindow
 
       if (visible)
         this.loading.classList.add(this.customClass + "-loading-visible");
-		else
+      else this.loading.classList.remove(this.customClass + "-loading-visible");
-			this.loading.classList.remove(this.customClass + "-loading-visible");
 
       return this;
     }
 
-	center()
+    center() {
-	{
       this._updateSize();
-		return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2), 
+      return this.move(
-						 window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2));
+        window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2,
+        window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2
+      );
     }
 
-	setVisible(visible)
+    setVisible(visible) {
-	{
+      if (visible == this.visible) return;
-
-		if (visible == this.visible)
-			return;
 
       this.visible = visible;
 
-		if (visible)
+      if (visible) {
-		{
         this.classList.add(this.customClass + "-visible");
 
-			if (this.background)
+        if (this.background) {
-			{
           this.background.setVisible(true);
-
         }
         //else
-			if (!this._shown)
+        if (!this._shown) {
-			{
           this._updateSize();
           this._shown = true;
         }
@@ -246,25 +245,20 @@ export default  IUI.module(class IUIDialog extends IUIWindow
         this.setFocus(true);
 
         this._updateSize();
-
+      } else {
-		}
-		else
-		{
         this._updateSize();
 
         this.classList.remove(this.customClass + "-visible");
         this.classList.remove(this.customClass + "-active");
 
-			if (this.background)
+        if (this.background) this.background.setVisible(false);
-				this.background.setVisible(false);
 
         //this.modal.classList.remove(this.customClass + "-modal-background-visible");
 
         this.setFocus(false);
 
         var i = IUI._nav_list.indexOf(this);
-			if (i > -1)
+        if (i > -1) IUI._nav_list.splice(i, 1);
-				IUI._nav_list.splice(i, 1);
 
         /*
 			IUI._nav_list.pop
@@ -283,26 +277,30 @@ export default  IUI.module(class IUIDialog extends IUIWindow
       return this;
     }
 
-	hide()
+    hide() {
-	{
       this.setVisible(false);
       return this;
     }
 
-	show()
+    show() {
-	{
       this.setVisible(true);
       return this;
     }
-});
+  }
+);
 
 document.addEventListener("keydown", function (e) {
-    if ( e.keyCode === 27 ) { // ESC
+  if (e.keyCode === 27) {
-        var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }).filter(function(x){return x.focus;});
+    // ESC
-		for(var i = 0; i < dialogs.length; i++)
+    var dialogs = IUI.registry
-			dialogs[i].hide();
+      .filter(function (o) {
-    }
+        return o instanceof IUIDialog;
       })
-
+      .filter(function (x) {
+        return x.focus;
+      });
+    for (var i = 0; i < dialogs.length; i++) dialogs[i].hide();
+  }
+});
 
 //IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);});

src/UI/DropDown.js

@@ -1,9 +1,10 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class DropDown extends IUIElement {
+export default IUI.module(
+  class DropDown extends IUIElement {
     constructor() {
-        super({"direction": "down" });
+      super({ direction: "down" });
 
       var self = this;
 
@@ -15,15 +16,12 @@ export default IUI.module(class DropDown extends IUIElement {
 
       this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0];
 
-
       //this.arrow = document.createElement("div");
       //this.arrow.className = this.customClass + "-arrow";
 
-
       //this.el.appendChild(this.arrow);
 
-        if (this.getAttribute("fixed"))
+      if (this.getAttribute("fixed")) {
-        {
         this._fixed = true;
         document.body.appendChild(this.menu);
       }
@@ -31,11 +29,10 @@ export default IUI.module(class DropDown extends IUIElement {
       //this.el.appendChild(this.menu);
 
       this.addEventListener("click", function (e) {
-            var t = e.target
+        var t = e.target;
         do {
-                if (t == self.menu)
+          if (t == self.menu) return;
-                    return;
+        } while ((t = t.parentElement));
-            } while (t = t.parentElement)
 
         self.setVisible(!self.visible);
       });
@@ -62,8 +59,7 @@ export default IUI.module(class DropDown extends IUIElement {
     }
 
     set fixed(value) {
-        if (value)
+      if (value) document.body.appendChild(this.menu);
-            document.body.appendChild(this.menu);
       this._fixed = value;
     }
 
@@ -91,7 +87,12 @@ export default IUI.module(class DropDown extends IUIElement {
       _x += window.pageXOffset;
       _y += window.pageYOffset;
 
-        return { top: _y, left: _x, width: this.clientWidth, height: this.clientHeight };
+      return {
+        top: _y,
+        left: _x,
+        width: this.clientWidth,
+        height: this.clientHeight,
+      };
     }
 
     set data(value) {
@@ -106,13 +107,11 @@ export default IUI.module(class DropDown extends IUIElement {
         if (visible) {
           this.menu.classList.add(this.cssClass + "-menu-visible");
           this.classList.add(this.cssClass + "-visible");
-            }
+        } else {
-            else {
           this.menu.classList.remove(this.cssClass + "-menu-visible");
           this.classList.remove(this.cssClass + "-visible");
         }
-        }
+      } else {
-        else {
         if (visible) {
           var rect = this.getBoundingClientRect();
 
@@ -120,14 +119,12 @@ export default IUI.module(class DropDown extends IUIElement {
           var menuHeight = this.menu.clientHeight;
 
           if (menuWidth > document.body.clientWidth) {
-                    menuWidth = (document.body.clientWidth - 10);
+            menuWidth = document.body.clientWidth - 10;
             this.menu.style.width = menuWidth + "px";
           }
 
-
           var startX = rect.left + (rect.width / 2 - menuWidth / 2);
 
-
           if (this.direction == "up") {
             //					var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight;
             var menuTop = rect.top - this.menu.clientHeight;
@@ -135,20 +132,17 @@ export default IUI.module(class DropDown extends IUIElement {
             if (menuTop < 0) {
               menuTop = 5;
               //						this.menu.style.height = (rect.top  - this.arrow.clientHeight ) + "px";
-                        this.menu.style.height = (rect.top) + "px";
+              this.menu.style.height = rect.top + "px";
 
               this.menu.classList.add(this.cssClass + "-menu-oversized");
-                    }
+            } else
-                    else
               this.menu.classList.remove(this.cssClass + "-menu-oversized");
 
-
             //this.arrow.classList.remove(this.customClass + "-arrow-down");
             //this.arrow.classList.add(this.customClass + "-arrow-up");
             //this.arrow.style.top = ( rect.top - this.arrow.clientHeight ) + "px";
-                    this.menu.style.top = (menuTop) + "px";
+            this.menu.style.top = menuTop + "px";
-                }
+          } else {
-                else {
             //var menuTop = rect.top + rect.height + this.arrow.clientHeight;
             var menuTop = rect.top + rect.height;
 
@@ -159,29 +153,25 @@ export default IUI.module(class DropDown extends IUIElement {
             this.menu.style.top = menuTop + "px";
 
             if (menuTop + menuHeight > document.body.clientHeight) {
-                        this.menu.style.height = (document.body.clientHeight - menuTop) + "px";
+              this.menu.style.height =
+                document.body.clientHeight - menuTop + "px";
               this.menu.classList.add(this.cssClass + "-menu-oversized");
-                    }
+            } else {
-                    else {
               this.menu.classList.remove(this.cssClass + "-menu-oversized");
             }
           }
 
-                if (startX < 0)
+          if (startX < 0) startX = 5;
-                    startX = 5;
           else if (startX + menuWidth > document.body.clientWidth)
             startX = document.body.clientWidth - menuWidth - 5;
 
-
           //this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px";
           this.menu.style.left = startX + "px";
 
           //this.arrow.classList.add(this.customClass + "-arrow-visible");
           this.menu.classList.add(this.cssClass + "-menu-visible");
           this.classList.add(this.cssClass + "-visible");
-
+        } else {
-            }
-            else {
           //this.arrow.classList.remove(this.customClass + "-arrow-visible");
           this.menu.classList.remove(this.cssClass + "-menu-visible");
           this.classList.remove(this.cssClass + "-visible");
@@ -191,6 +181,6 @@ export default IUI.module(class DropDown extends IUIElement {
       this._emit("visible", { visible });
 
       return this;
-
     }
-});
+  }
+);

src/UI/Form.js

@@ -3,42 +3,41 @@ import { IUI } from "../Core/IUI.js";
 import Tabs from "./Tabs.js";
 import Tab from "./Tab.js";
 
-export default IUI.module(class Form extends IUIElement {
+export default IUI.module(
+  class Form extends IUIElement {
     constructor() {
       super();
     }
 
     create() {
-
       this._container = document.createElement("div");
       this._container.className = "container";
 
       this._actions = document.createElement("div");
       this._actions.className = "actions";
 
-        
       this._save = document.createElement("button");
       this._save.className = "button";
-        this._save.innerHTML = this.hasAttribute("save") ? this.getAttribute("save") : "Save";
+      this._save.innerHTML = this.hasAttribute("save")
+        ? this.getAttribute("save")
+        : "Save";
       this._cancel = document.createElement("button");
       this._cancel.className = "button";
-        this._cancel = this.hasAttribute("cancel") ? this.getAttribute("cancel") : "Cancel";
+      this._cancel = this.hasAttribute("cancel")
+        ? this.getAttribute("cancel")
+        : "Cancel";
 
-        this._save.addEventListener("click", (x) => {
+      this._save.addEventListener("click", x => {});
 
-        });
+      this._cancel.addEventListener("click", x => {
-
-        this._cancel.addEventListener("click", (x) => {
         window.router.back();
       });
 
-
       this._actions.appendChild(this._save);
       this._actions.appendChild(this._cancel);
 
       this.appendChild(this._container);
       this.appendChild(this._actions);
-        
     }
 
     set layout(value) {
@@ -60,10 +59,8 @@ export default IUI.module(class Form extends IUIElement {
           this._tabs = new Tabs();
           var tab = new Tab();
           this._tabs.add(tab);
-                for (var j = 0; j < this._tabs.length; j++) {
+          for (var j = 0; j < this._tabs.length; j++) {}
-                    
+          this.layout.tasbs[i].content;
-                }
-                this.layout.tasbs[i].content
         }
       }
     }
@@ -71,8 +68,7 @@ export default IUI.module(class Form extends IUIElement {
     set data(value) {
       var self = this;
 
-        if (value == null)
+      if (value == null) this._input.value = "";
-            this._input.value = "";
       else {
         this._input.value = value[this._field];
 
@@ -98,4 +94,5 @@ export default IUI.module(class Form extends IUIElement {
 
       this._input.value = value;
     }
-});
+  }
+);

src/UI/Grid.js

@@ -1,13 +1,17 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Grid extends IUIElement {
+export default IUI.module(
-	constructor()
+  class Grid extends IUIElement {
-	{
+    constructor() {
-		super({index: "iid", 
+      super({
-			layout: {content: {field: "name", formatter: null}, 
+        index: "iid",
+        layout: {
+          content: { field: "name", formatter: null },
           title: { field: "content", formatter: null },
-			footer: {field: "footer", formatter: null}}});
+          footer: { field: "footer", formatter: null },
+        },
+      });
 
       this._register("add");
       this._register("layout");
@@ -17,12 +21,10 @@ export default IUI.module(class Grid extends IUIElement {
     }
 
     create() {
-        for (var i = 0; i < this.children.length; i++)
+      for (var i = 0; i < this.children.length; i++) this.add(this.children[i]);
-            this.add(this.children[i]);
     }
 
-	setGridLayout(style)
+    setGridLayout(style) {
-	{
       this.style.grid = style;
       this._emit("layout", style, this);
       return this;
@@ -33,31 +35,28 @@ export default IUI.module(class Grid extends IUIElement {
 
       win.setAttribute("draggable", true);
       win.addEventListener("dragstart", function (e) {
-            e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.effectAllowed = "move";
         self._dragItem = this;
 
-            this.classList.add(self.cssClass + '-window-drag');
+        this.classList.add(self.cssClass + "-window-drag");
-
       });
 
       win.addEventListener("dragover", function (e) {
         if (self._dragItem) {
           e.preventDefault();
-                this.classList.add(self.cssClass + '-window-over');
+          this.classList.add(self.cssClass + "-window-over");
-                e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
+          e.dataTransfer.dropEffect = "move"; // See the section on the DataTransfer object.
         }
       });
 
       win.addEventListener("dragleave", function (e) {
-
+        if (e.preventDefault) e.preventDefault();
-            if (e.preventDefault)
-                e.preventDefault();
 
         this.classList.remove(self.cssClass + "-window-over");
       });
 
       win.addEventListener("dragend", function (e) {
-            this.classList.remove(self.cssClass + '-window-drag');
+        this.classList.remove(self.cssClass + "-window-drag");
         self._dragItem = null;
       });
 
@@ -69,8 +68,7 @@ export default IUI.module(class Grid extends IUIElement {
           if (self.children[i] == self._dragItem) {
             self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
             break;
-                }
+          } else if (self.children[i] == e.currentTarget) {
-                else if (self.children[i] == e.currentTarget) {
             self.insertBefore(self._dragItem, e.currentTarget);
             break;
           }
@@ -88,9 +86,7 @@ export default IUI.module(class Grid extends IUIElement {
       });
     }
 
-	addOld(item)
+    addOld(item) {
-	{
-
       var self = this;
 
       var li = item; //document.createElement("li");
@@ -99,32 +95,28 @@ export default IUI.module(class Grid extends IUIElement {
       li.setAttribute("draggable", true);
 
       li.addEventListener("dragstart", function (e) {
-			  e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.effectAllowed = "move";
         self._dragItem = this;
 
-            this.classList.add(self.cssClass + '-window-drag');
+        this.classList.add(self.cssClass + "-window-drag");
-
       });
 
       li.addEventListener("dragover", function (e) {
-			if (self._dragItem)
+        if (self._dragItem) {
-			{
           e.preventDefault();
-                this.classList.add(self.cssClass + '-window-over');
+          this.classList.add(self.cssClass + "-window-over");
-				e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
+          e.dataTransfer.dropEffect = "move"; // See the section on the DataTransfer object.
         }
       });
 
       li.addEventListener("dragleave", function (e) {
-
+        if (e.preventDefault) e.preventDefault();
-			if (e.preventDefault) 
-				e.preventDefault();
 
         this.classList.remove(self.cssClass + "-window-over");
       });
 
       li.addEventListener("dragend", function (e) {
-            this.classList.remove(self.cssClass + '-window-drag');
+        this.classList.remove(self.cssClass + "-window-drag");
         self._dragItem = null;
       });
 
@@ -133,13 +125,10 @@ export default IUI.module(class Grid extends IUIElement {
         e.currentTarget.classList.remove(self.cssClass + "-window-over");
 
         for (var i = 0; i < self.children.length; i++)
-				if (self.children[i] == self._dragItem)
+          if (self.children[i] == self._dragItem) {
-				{
             self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
             break;
-				}
+          } else if (self.children[i] == e.currentTarget) {
-				else if (self.children[i] == e.currentTarget)
-				{
             self.insertBefore(self._dragItem, e.currentTarget);
             break;
           }
@@ -152,24 +141,38 @@ export default IUI.module(class Grid extends IUIElement {
         self._emit("contextmenu", item, win, this, e);
       });
 
-		var win = iui(li).window({draggable: false, title: this.layout.title.formatter ? this.layout.title.formatter(item[this.layout.title.field], item) : item[this.layout.title.field]});
+      var win = iui(li).window({
+        draggable: false,
+        title: this.layout.title.formatter
+          ? this.layout.title.formatter(item[this.layout.title.field], item)
+          : item[this.layout.title.field],
+      });
 
-		var body = this.layout.content.formatter ? this.layout.content.formatter(item[this.layout.content.field], item, win, this) : item[this.layout.content.field];
+      var body = this.layout.content.formatter
-		if (body instanceof HTMLElement)
+        ? this.layout.content.formatter(
-			win.body.appendChild(body);
+            item[this.layout.content.field],
-		else
+            item,
-			win.body.innerHTML = body;
+            win,
+            this
+          )
+        : item[this.layout.content.field];
+      if (body instanceof HTMLElement) win.body.appendChild(body);
+      else win.body.innerHTML = body;
 
-		var footer = this.layout.footer.formatter ? this.layout.footer.formatter(item[this.layout.footer.field], item, win, this) : item[this.layout.footer.field];
+      var footer = this.layout.footer.formatter
-		if (footer != null)
+        ? this.layout.footer.formatter(
-		{
+            item[this.layout.footer.field],
+            item,
+            win,
+            this
+          )
+        : item[this.layout.footer.field];
+      if (footer != null) {
         var fe = document.createElement("div");
         fe.className = "window-footer";
 
-			if (footer instanceof HTMLElement)
+        if (footer instanceof HTMLElement) fe.appendChild(footer);
-				fe.appendChild(footer);
+        else fe.innerHTML = footer;
-			else
-				fe.innerHTML = footer;
 
         win.appendChild(fe);
       }
@@ -190,15 +193,13 @@ export default IUI.module(class Grid extends IUIElement {
       //win._updateSize();
     }
 
-	remove(win)
+    remove(win) {
-    {
       win.destroy();
       this.removeChild(win);
     }
 
-	clear()
+    clear() {
-    {
+      while (this.children.length > 0) this.removeChild(this.children[0]);
-        while (this.children.length > 0)
-            this.removeChild(this.children[0]);
     }
-});
+  }
+);

src/UI/Input.js

@@ -1,9 +1,10 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Input extends IUIElement {
+export default IUI.module(
+  class Input extends IUIElement {
     constructor() {
-        super({ formatter: (x) => x });
+      super({ formatter: x => x });
       this._register("input");
       this._register("change");
     }
@@ -16,14 +17,12 @@ export default IUI.module(class Input extends IUIElement {
             this.setAttribute("invalid", "");
             this.classList.add(this.cssClass + "-invalid");
             return false;
-                }
+          } else {
-                else {
             this.removeAttribute("invalid");
             this.classList.remove(this.cssClass + "-invalid");
             return true;
           }
-            }
+        } catch (e) {
-            catch (e) {
           console.log("Validation Error", e);
           return false;
         }
@@ -42,15 +41,15 @@ export default IUI.module(class Input extends IUIElement {
     }
 
     create() {
-
       this.isAuto = this.hasAttribute("auto");
       this.field = this.getAttribute("field");
 
-        
+      if (this.field != null) {
-        if (this.field != null)
+        this.setAttribute(":data", `d['${this.field}']`);
-        {
+        this.setAttribute(
-            this.setAttribute(":data", `d['${this.field}']`)
+          "async:revert",
-            this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`);
+          `d['${this.field}'] = await this.getData()`
+        );
       }
 
       this._span = document.createElement("span");
@@ -62,8 +61,7 @@ export default IUI.module(class Input extends IUIElement {
       let self = this;
 
       this._input.addEventListener("input", () => {
-            if (self._checkValidity() && self.isAuto)
+        if (self._checkValidity() && self.isAuto) this.revert();
-                this.revert();
         //self.data[self.field] = self.value;
       });
 
@@ -71,15 +69,16 @@ export default IUI.module(class Input extends IUIElement {
         self._emit("change", { value: self.value });
       });
 
-        this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
+      this.type = this.hasAttribute("type")
+        ? this.getAttribute("type").toLowerCase()
+        : "text";
 
       this.accept = this.getAttribute("accept");
 
       this.appendChild(this._input);
       this.appendChild(this._span);
 
-        if (this.type == "password")
+      if (this.type == "password") {
-        {
         this._eye = document.createElement("div");
         this._eye.className = this.cssClass + "-eye";
         this._eye.addEventListener("mousedown", () => {
@@ -92,9 +91,7 @@ export default IUI.module(class Input extends IUIElement {
         });
 
         this.appendChild(this._eye);
-
       }
-
     }
 
     async updateAttributes(deep, parentData) {
@@ -120,10 +117,8 @@ export default IUI.module(class Input extends IUIElement {
     }
 
     set disabled(value) {
-        if (value)
+      if (value) this.setAttribute("disabled", "disabled");
-            this.setAttribute("disabled", "disabled");
+      else this.removeAttribute("disabled");
-        else
-            this.removeAttribute("disabled");
 
       this._input.disabled = value;
     }
@@ -141,21 +136,22 @@ export default IUI.module(class Input extends IUIElement {
     }
 
     async setData(value) {
-
       await super.setData(value);
 
-        if (this.type == "checkbox")
+      if (this.type == "checkbox") this._input.checked = value;
-            this._input.checked = value;
       else if (this.type == "date")
-            this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
+        this._input.value =
-        else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
+          value != null ? value.toISOString().slice(0, 10) : value;
-            this._input.value = value == null ? '' : value;
+      else if (
-        else
+        this.type == null ||
-            this._input.value = value;
+        this.type == "text" ||
-
+        this.type == "search" ||
-        if (this._checkValidity() && this.isAuto)
+        this.type == "password"
-            this.revert();
+      )
+        this._input.value = value == null ? "" : value;
+      else this._input.value = value;
 
+      if (this._checkValidity() && this.isAuto) this.revert();
 
       /*
         await super.setData(value);
@@ -166,7 +162,6 @@ export default IUI.module(class Input extends IUIElement {
             */
     }
 
-
     // modified(name, value) {
     //     if (name == this.field) {
     //         this.value = value;
@@ -174,32 +169,23 @@ export default IUI.module(class Input extends IUIElement {
     // }
 
     async getData() {
-        if (this.type == "checkbox")
+      if (this.type == "checkbox") return this._input.checked;
-            return this._input.checked;
+      else if (this.type == "date") return new Date(this._input.value);
-        else if (this.type == "date")
-            return new Date(this._input.value);
       else if (this.type == "file")
         return new Uint8Array(await this._input.files[0].arrayBuffer());
-        else
+      else return this._input.value;
-            return this._input.value;
     }
 
-    get data()
+    get data() {
-    {
+      if (this.type == "checkbox") return this._input.checked;
-        if (this.type == "checkbox")
+      else if (this.type == "date") return new Date(this._input.value);
-        return this._input.checked;
+      else if (this.type == "file") {
-        else if (this.type == "date")
+        return new Promise(resolve => {
-            return new Date(this._input.value);
+          this._input.files[0].arrayBuffer().then(x => {
-        else if (this.type == "file")
-        {            
-            return new Promise((resolve)=>{
-                this._input.files[0].arrayBuffer().then((x)=>{
             resolve(new Uint8Array(x));
           });
         });
-        }
+      } else return this._input.value;
-        else
-            return this._input.value;
     }
 
     /*
@@ -230,4 +216,5 @@ export default IUI.module(class Input extends IUIElement {
 
     //     this._checkValidity();
     // }
-});
+  }
+);

src/UI/Location.js

@@ -1,19 +1,17 @@
-
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
-import Link from '../Router/Link.js';
+import Link from "../Router/Link.js";
 
-export default IUI.module(class Location extends IUIElement {
+export default IUI.module(
+  class Location extends IUIElement {
     constructor() {
       super();
     }
 
     create() {
       let self = this;
-        window.router.on("route", (e) => {
+      window.router.on("route", e => {
-
+        self.textContent = ""; // clear everything
-            self.textContent = ''; // clear everything
-
 
         let html = "";
         let route = e.route;
@@ -23,8 +21,7 @@ export default IUI.module(class Location extends IUIElement {
 
         self.append(current);
 
-            while (route = route.parent) {
+        while ((route = route.parent)) {
-
           var sep = document.createElement("span");
           self.prepend(sep);
 
@@ -36,4 +33,5 @@ export default IUI.module(class Location extends IUIElement {
         }
       });
     }
-});
+  }
+);

src/UI/Login.js

@@ -1,13 +1,11 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Login extends IUIElement
+export default IUI.module(
-{
+  class Login extends IUIElement {
-    constructor()
+    constructor() {
-    {
       super();
 
-
       var template = `<div class='body' style='box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
               background: white;
               border-radius: 3px;
@@ -44,8 +42,6 @@ export default IUI.module(class Login extends IUIElement
 
       this.innerHTML = template;
 
-
-
       this._message = this.querySelector("div[name='message']");
 
       this._usernameText = this.querySelector("span[name='spnUsername']");
@@ -58,7 +54,9 @@ export default IUI.module(class Login extends IUIElement
 
       var self = this;
 
-        this._password.addEventListener("keydown", (e) => { if (e.keyCode == 13) self.login(); });
+      this._password.addEventListener("keydown", e => {
+        if (e.keyCode == 13) self.login();
+      });
 
       if (this.hasAttribute("message")) {
         this._message.innerHTML = this.getAttribute("message");
@@ -80,38 +78,32 @@ export default IUI.module(class Login extends IUIElement
         this._login.innerHTML = this.getAttribute("login");
       }
 
-
       let username = this.username; // window.localStorage.getItem("iui.login.username");
       let password = this.password; // window.localStorage.getItem("iui.login.password");
       if (username != "") {
         this._username.value = username;
         this._password.value = password;
         this._remember.checked = true;
-
       }
 
       this._login.addEventListener("click", () => this.login());
 
-
       this._register("login");
       this._register("logout");
-
     }
 
     login() {
       let username = this._username.value;
       let password = this._password.value;
 
-        if (username == "" || password == "")
+      if (username == "" || password == "") return;
-            return;
 
       if (this._remember.checked) {
         this.username = username;
         this.password = password;
         //window.localStorage.setItem("iui.login.username", username);
         //window.localStorage.setItem("iui.login.password", password);
-        }
+      } else {
-        else {
         window.localStorage.removeItem("iui.login.username");
         window.localStorage.removeItem("iui.login.password");
       }
@@ -143,7 +135,6 @@ export default IUI.module(class Login extends IUIElement
       return window.localStorage.setItem("iui.login.token", value);
     }
 
-
     get message() {
       return this._message.innerHTML;
     }
@@ -163,17 +154,14 @@ export default IUI.module(class Login extends IUIElement
       this._emit("logout");
     }
 
-    created()
+    created() {
-    {
-
       //if (this.hasAttribute("auto")) {
-
       //    let username = this.username;// window.localStorage.getItem("iui.login.username");
       //    let password = this.password;// window.localStorage.getItem("iui.login.password");
       //    if (this.username != "") {
       //        this._emit("login", { username, password });
       //    }
       //}
-            
     }
-});
+  }
+);

src/UI/Menu.js

@@ -1,17 +1,19 @@
-import { IUI } from '../Core/IUI.js';
+import { IUI } from "../Core/IUI.js";
-import IUIElement from '../Core/IUIElement.js';
+import IUIElement from "../Core/IUIElement.js";
-import Background from './Background.js';
+import Background from "./Background.js";
-import DropDown from './DropDown.js';
+import DropDown from "./DropDown.js";
 
 export default class Menu extends IUIElement {
   constructor(props) {
-        super(IUI.extend(props, {
+    super(
+      IUI.extend(props, {
         index: "iid",
         layout: { field: "name", formatter: null },
         visible: false,
         static: false,
-            "target-class": "selected"
+        "target-class": "selected",
-        }));
+      })
+    );
 
     this._register("visible");
     this._register("select");
@@ -19,8 +21,6 @@ export default class Menu extends IUIElement {
     IUI._menus.push(this);
   }
 
-
-
   // clear() {
   //     this.innerHTML = "";
   //     this._uiBindings = null;
@@ -44,10 +44,7 @@ export default class Menu extends IUIElement {
     this.setVisible(true, x, y, el);
   }
 
-
   async showModal(element) {
-
-        
     //super.data = this._getElementData(element);
 
     await super.setData(element.data);
@@ -66,12 +63,16 @@ export default class Menu extends IUIElement {
     this.classList.add(this.cssClass + "-modal");
     this.classList.add(this.cssClass + "-visible");
 
-        var width = (window.innerWidth * 0.8);
+    var width = window.innerWidth * 0.8;
     this.style.width = width + "px";
 
-        this.style.top = (window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2) + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px";
+    this.style.top =
-        this.style.left = (window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2) + "px"; //(document.body.clientWidth / 2 - width / 2) + "px";
+      window.pageYOffset +
-
+      window.innerHeight / 2 -
+      this.offsetHeight / 2 +
+      "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px";
+    this.style.left =
+      window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2 + "px"; //(document.body.clientWidth / 2 - width / 2) + "px";
 
     this.visible = true;
     this._emit("visible", { visible: true });
@@ -89,7 +90,6 @@ export default class Menu extends IUIElement {
     }
 
     if (visible) {
-
       //if (element)
       //let dt = super._getElementData(element);
       if (element) {
@@ -100,13 +100,11 @@ export default class Menu extends IUIElement {
 
         if (this["target-class"] != null && this["target-class"] != "")
           this.target.classList.add(this["target-class"]);
-
       }
 
       this._pass = true;
 
-            if (IUI.responsive && !this.static)
+      if (IUI.responsive && !this.static) return this.showModal();
-                return this.showModal();
 
       this.classList.remove(this.cssClass + "-modal");
 
@@ -114,55 +112,43 @@ export default class Menu extends IUIElement {
 
       if (y != null) {
         if (y + rect.height > document.documentElement.clientHeight)
-                    this.style.top = (document.documentElement.clientHeight - rect.height) + "px";
+          this.style.top =
-                else
+            document.documentElement.clientHeight - rect.height + "px";
-                    this.style.top = y + "px";
+        else this.style.top = y + "px";
       }
 
       this.classList.add(this.cssClass + "-visible");
 
-
       if (x != null) {
-
         if (x + rect.width > document.body.scrollWidth)
-                    this.style.left = (document.body.scrollWidth - rect.width) + "px";
+          this.style.left = document.body.scrollWidth - rect.width + "px";
         //else if (x < 0)
         //	this.style.left = "0px";
-                else
+        else this.style.left = x + "px";
-                    this.style.left = x + "px";
-
       }
-
+    } else {
-
-        }
-        else {
-
       this.classList.remove(this.cssClass + "-visible");
 
-            if (this.background)
+      if (this.background) this.background.hide();
-                this.background.hide();
 
       //await super.setData({});// = {};
-
     }
 
     this._emit("visible", { visible });
 
     return this;
   }
-};
+}
 
 IUI.module(Menu);
 
 IUI.responsive = false;
 
 window.addEventListener("load", function () {
-
   var handler = function (e) {
     if (e.target.id == "iui_app_background" && IUI.responsive) {
       for (var i = 0; i < IUI._menus.length; i++)
-                if (IUI._menus[i] instanceof Menu)
+        if (IUI._menus[i] instanceof Menu) IUI._menus[i].setVisible(false);
-                    IUI._menus[i].setVisible(false);
 
       e.preventDefault();
       return;
@@ -176,19 +162,13 @@ window.addEventListener("load", function () {
           if (m._pass) {
             m._pass = false;
             continue;
-                    }
+          } else if (m.visible) if (!m.contains(e.target)) m.setVisible(false);
-                    else 
+        } else if (m instanceof DropDown) {
-                    if (m.visible)
-                        if (!m.contains(e.target))
-                            m.setVisible(false);
-                }
-                else if (m instanceof DropDown) {
           if (!(m.contains(e.target) || m.menu.contains(e.target)))
             m.setVisible(false);
         }
       }
     }
-
   };
 
   document.body.addEventListener("click", handler);

src/UI/Navbar.js

@@ -3,61 +3,56 @@ import { IUI } from "../Core/IUI.js";
 import Link from "../Router/Link.js";
 import Check from "./Check.js";
 
-export default IUI.module(class Navbar extends IUIElement
+export default IUI.module(
-{
+  class Navbar extends IUIElement {
-    constructor()
+    constructor() {
-    {
       super();
 
       this._list = [];
     }
 
     search_old(text) {
-        for(var i = 0; i < this._container.children.length; i++)
+      for (var i = 0; i < this._container.children.length; i++) {
-        {
         let el = this._container.children[i];
-            if (el.title.toLowerCase().includes(text))
+        if (el.title.toLowerCase().includes(text)) {
-            {
+          el.text.innerHTML = el.title.replace(
-                el.text.innerHTML = el.title.replace(new RegExp(text, 'gi'), (str) => `<span>${str}</span>`);
+            new RegExp(text, "gi"),
+            str => `<span>${str}</span>`
+          );
           el.style.display = "";
           el.removeAttribute("hidden");
 
           // make parents visible
           let level = parseInt(el.getAttribute("data-level"));
 
-                for(var j = i - 1; j >= 0; j--)
+          for (var j = i - 1; j >= 0; j--) {
-                {
             let previous = this._container.children[j];
             let pLevel = parseInt(previous.getAttribute("data-level"));
 
-                    if (pLevel < level)
+            if (pLevel < level) {
-                    {
               previous.removeAttribute("hidden");
               previous.style.display = "";
-                        if (previous.expand)
+              if (previous.expand) previous.expand.checked = true;
-                           previous.expand.checked = true;
               level = pLevel;
             }
           }
-            }
+        } else {
-            else
-            {
           el.style.display = "none";
         }
       }
     }
 
     search(text, within) {
-
       let menu = within == null ? this._container : within.menu;
 
-        for(var i = 0; i < menu.children.length; i++)
+      for (var i = 0; i < menu.children.length; i++) {
-        {
         let item = menu.children[i];
         let link = item.link;
-            if (link.title.toLowerCase().includes(text))
+        if (link.title.toLowerCase().includes(text)) {
-            {
+          link.text.innerHTML = link.title.replace(
-                link.text.innerHTML = link.title.replace(new RegExp(text, 'gi'), (str) => `<span>${str}</span>`);
+            new RegExp(text, "gi"),
+            str => `<span>${str}</span>`
+          );
           item.style.display = "";
 
           //if (within != null)
@@ -66,22 +61,17 @@ export default IUI.module(class Navbar extends IUIElement
           // make parents visible
           let parent = within;
 
-                while (parent != null && parent != this)
+          while (parent != null && parent != this) {
-                {
             parent.expand.checked = true;
             parent.removeAttribute("collapsed");
             parent.style.display = "";
             parent = parent.parentElement.parentElement;
           }
-
+        } else {
-            }
-            else
-            {
           item.style.display = "none";
         }
 
-            if (item.menu != null)
+        if (item.menu != null) this.search(text, item);
-                this.search(text, item);
       }
     }
 
@@ -89,32 +79,24 @@ export default IUI.module(class Navbar extends IUIElement
       let next = link; // = link.nextElementSibling;
       let level = parseInt(link.getAttribute("data-level"));
 
-
       // save
       //window.localStorage.setItem("iui.navbar/" + link.link, value);
 
       if (link.expand && link.expand.checked != value)
         link.expand.checked = value;
 
-        while (next = next.nextElementSibling) {
+      while ((next = next.nextElementSibling)) {
         if (parseInt(next.getAttribute("data-level")) > level) {
-                if (value)
+          if (value) next.removeAttribute("hidden");
-                    next.removeAttribute("hidden");
+          else next.setAttribute("hidden", "");
-                else
+          if (next.expand) next.expand.checked = value;
-                    next.setAttribute("hidden", "");
+        } else break;
-                if (next.expand)
-                    next.expand.checked = value;
-            }
-            else
-                break;
       }
     }
 
     expand(item, value) {
-        if (value)
+      if (value) item.removeAttribute("collapsed");
-            item.removeAttribute("collapsed");
+      else item.setAttribute("collapsed", "");
-        else
-            item.setAttribute("collapsed", "");
 
       item.expand.checked = value;
     }
@@ -128,14 +110,13 @@ export default IUI.module(class Navbar extends IUIElement
     }
 
     build() {
-
       this.innerHTML = "";
       let roots = router.routes.filter(x => x.parent == null);
       let self = this;
       this._search = document.createElement("input");
       this._search.type = "search";
       this._search.className = this.cssClass + "-search textbox";
-        this._search.addEventListener("input", (x) => {
+      this._search.addEventListener("input", x => {
         self.search(this._search.value);
       });
 
@@ -149,16 +130,13 @@ export default IUI.module(class Navbar extends IUIElement
       let collapsed = this.collapsed;
       let auto = this.auto;
 
-        const filterRoutes = (routes) => 
+      const filterRoutes = routes =>
         routes.filter(r => {
-                if (r.hasAttribute("private"))
+          if (r.hasAttribute("private")) return false;
-                    return false;
 
-                if (this.private instanceof Function)
+          if (this.private instanceof Function) {
-                {
             try {
-                    if (this.private(r))
+              if (this.private(r)) {
-                    {
                 return false;
               }
             } catch (ex) {
@@ -174,8 +152,6 @@ export default IUI.module(class Navbar extends IUIElement
 
       const appendRoutes = (routes, level, container) => {
         for (var i = 0; i < routes.length; i++) {
-
-
           let item = document.createElement("div");
           item.className = this.cssClass + "-item";
 
@@ -206,8 +182,7 @@ export default IUI.module(class Navbar extends IUIElement
 
             item.expand.checked = !collapsed;
 
-                    if (collapsed)
+            if (collapsed) item.setAttribute("collapsed", "");
-                        item.setAttribute("collapsed", "");
 
             link.appendChild(item.expand);
 
@@ -215,21 +190,22 @@ export default IUI.module(class Navbar extends IUIElement
             item.menu.className = this.cssClass + "-menu";
             item.appendChild(item.menu);
 
-                    item.expand.on("click", (e) => {
+            item.expand.on("click", e => {
               self.expand(item, item.expand.checked);
               e.stopPropagation();
             });
 
-
+            if (auto) {
-                    if (auto)
+              item.addEventListener("mouseenter", () =>
-                    {
+                self.expand(item, true)
-                        item.addEventListener("mouseenter", ()=> self.expand(item, true));
+              );
-                        item.addEventListener("mouseleave", ()=> self.expand(item, false));
+              item.addEventListener("mouseleave", () =>
+                self.expand(item, false)
+              );
             }
 
             appendRoutes(subRoutes, level + 1, item.menu);
           }
-
         }
       };
 
@@ -240,16 +216,13 @@ export default IUI.module(class Navbar extends IUIElement
       if (!this.hasAttribute("manual"))
         window.router.on("created", () => this.build());
 
-        window.router.on("navigate", (e) => { 
+      window.router.on("navigate", e => {
-            
+        for (var i = 0; i < this._list.length; i++) {
-            for(var i = 0; i < this._list.length; i++)
-            {
           var el = this._list[i];
-                if (el.link.link == e.base)
+          if (el.link.link == e.base) el.setAttribute("selected", "");
-                    el.setAttribute("selected", "");
+          else el.removeAttribute("selected");
-                else
-                    el.removeAttribute("selected");
         }
       });
     }
-});
+  }
+);

src/UI/Range.js

@@ -1,7 +1,8 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class Range extends IUIElement {
+export default IUI.module(
+  class Range extends IUIElement {
     constructor() {
       super({
         getItem: function (index, data) {
@@ -19,7 +20,7 @@ export default IUI.module(class Range extends IUIElement {
         },
         getPosition: function (index, data, width) {
           var itemSize = width / data.length;
-                return (index * itemSize) + (itemSize / 2);
+          return index * itemSize + itemSize / 2;
         },
         layout: {
           render: function () {
@@ -27,24 +28,20 @@ export default IUI.module(class Range extends IUIElement {
           },
           initialize: function () {
             return true;
-                }
           },
-            data: []
+        },
+        data: [],
       });
 
       var self = this;
 
-
       this._register("select");
       this._register("userSelect");
 
       this.preview = document.createElement("div");
       this.preview.className = this.customClass + "-preview";
 
-
+      if (this.layout) this.layout.initialize.apply(this);
-        if (this.layout)
-            this.layout.initialize.apply(this);
-
 
       this.thumb = document.createElement("div");
       this.thumb.classList.add(this.customClass + "-thumb");
@@ -65,47 +62,55 @@ export default IUI.module(class Range extends IUIElement {
         var rect = self.getBoundingClientRect();
         self._offset = {
           top: rect.top + document.body.scrollTop,
-                left: rect.left + document.body.scrollLeft
+          left: rect.left + document.body.scrollLeft,
         };
       });
 
       this.addEventListener("mousemove", function (e) {
-
-
         self._drag(e.clientX, e.clientY);
 
         var x = e.clientX - self._offset.left;
         var index = self.getIndex(x, self.offsetWidth, self.data);
-            var preview = self.getPreview.call(self, index, self.data, x, self.offsetWidth, self.preview);
+        var preview = self.getPreview.call(
+          self,
+          index,
+          self.data,
+          x,
+          self.offsetWidth,
+          self.preview
+        );
 
         if (preview == null || preview == false) {
           self.preview.classList.remove(self.customClass + "-preview-visible");
           return;
-            }
+        } else if (preview instanceof HTMLElement) {
-            else if (preview instanceof HTMLElement) {
           while (self.preview.children.length > 0)
             self.preview.removeChild(self.preview.children[0]);
           self.preview.appendChild(preview);
-            }
+        } else if (preview != true) {
-            else if (preview != true) {
           self.preview.innerHTML = preview;
         }
 
-            var index = self.getIndex((e.clientX - self._offset.left), self.offsetWidth, self.data);
+        var index = self.getIndex(
+          e.clientX - self._offset.left,
+          self.offsetWidth,
+          self.data
+        );
         var dx = self.getPosition(index, self.data, self.offsetWidth);
 
         self.preview.style.setProperty("--x", dx + "px");
         self.preview.classList.add(self.customClass + "-preview-visible");
-
       });
 
       document.addEventListener("mouseup", function (e) {
-            if (self._dragging)
+        if (self._dragging) self._endDragging(e.clientX, e.clientY);
-                self._endDragging(e.clientX, e.clientY);
       });
 
       this.addEventListener("touchstart", function (e) {
-            self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
+        self._startDragging(
+          e.targetTouches[0].clientX,
+          e.targetTouches[0].clientY
+        );
       });
 
       this.addEventListener("touchmove", function (e) {
@@ -113,7 +118,10 @@ export default IUI.module(class Range extends IUIElement {
       });
 
       this.addEventListener("touchend", function (e) {
-            self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+        self._endDragging(
+          e.changedTouches[0].clientX,
+          e.changedTouches[0].clientY
+        );
       });
 
       this.setData(this.data);
@@ -122,7 +130,9 @@ export default IUI.module(class Range extends IUIElement {
     _startDragging(x, y) {
       this._dragging = true;
 
-        document.onselectstart = function () { return false };
+      document.onselectstart = function () {
+        return false;
+      };
 
       var rect = this.getBoundingClientRect();
       var body = document.body.getBoundingClientRect();
@@ -132,12 +142,15 @@ export default IUI.module(class Range extends IUIElement {
         left: rect.left + body.left,
       };
 
-        var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
+      var index = this.getIndex(
+        x - this._offset.left,
+        this.offsetWidth,
+        this.data
+      );
       this.set(index, true, true);
     }
 
     set(index, moveThumb = true, byUser = false) {
-
       var item = this.getItem(index, this.data);
 
       if (item != null) {
@@ -148,8 +161,7 @@ export default IUI.module(class Range extends IUIElement {
 
         this._emit("select", { item, index });
 
-            if (byUser)
+        if (byUser) this._emit("userSelect", { item, index });
-                this._emit("userSelect", { item, index });
 
         this.selected = item;
         this.selectedIndex = index;
@@ -161,7 +173,7 @@ export default IUI.module(class Range extends IUIElement {
     _drag(x, y) {
       if (this._dragging) {
         this.thumb.classList.add(this.customClass + "-thumb-dragging");
-            var dx = (x - this._offset.left);
+        var dx = x - this._offset.left;
         var index = this.getIndex(dx, this.offsetWidth, this.data);
         this.thumb.style.setProperty("--x", dx + "px");
         this.set(index, false, true);
@@ -169,9 +181,15 @@ export default IUI.module(class Range extends IUIElement {
     }
 
     _endDragging(x, y) {
-        document.onselectstart = function () { return true };
+      document.onselectstart = function () {
+        return true;
+      };
       this.thumb.classList.remove(this.customClass + "-thumb-dragging");
-        var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
+      var index = this.getIndex(
+        x - this._offset.left,
+        this.offsetWidth,
+        this.data
+      );
       this.set(index, true, true);
       this._dragging = false;
     }
@@ -181,8 +199,8 @@ export default IUI.module(class Range extends IUIElement {
     }
 
     render() {
-        if (this.layout && this.layout.render)
+      if (this.layout && this.layout.render) this.layout.render.apply(this);
-            this.layout.render.apply(this);
       return this;
     }
-});
+  }
+);

src/UI/RoutesList.js

@@ -1,15 +1,14 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class RoutesList extends IUIElement {
+export default IUI.module(
-
+  class RoutesList extends IUIElement {
     constructor(properties) {
-        super(properties, { class: 'routes-list' });
+      super(properties, { class: "routes-list" });
     }
 
     create() {
-        if (!window.router)
+      if (!window.router) return;
-            return;
 
       var table = document.createElement("i-table");
 
@@ -17,7 +16,8 @@ export default IUI.module(class RoutesList extends IUIElement {
 
       for (var i = 0; i < window.router.routes.length; i++) {
         // hell
-            table.add
+        table.add;
       }
     }
-});
+  }
+);

src/UI/Select.js

@@ -1,10 +1,11 @@
-import { IUI, iui } from '../Core/IUI.js';
+import { IUI, iui } from "../Core/IUI.js";
-import IUIElement from '../Core/IUIElement.js';
+import IUIElement from "../Core/IUIElement.js";
-import Menu from '../UI/Menu.js';
+import Menu from "../UI/Menu.js";
-import Layout from '../Data/Layout.js';
+import Layout from "../Data/Layout.js";
-import Repeat from '../Data/Repeat.js';
+import Repeat from "../Data/Repeat.js";
 
-export default IUI.module(class Select extends IUIElement {
+export default IUI.module(
+  class Select extends IUIElement {
     constructor() {
       super({
         visible: false,
@@ -12,10 +13,10 @@ export default IUI.module(class Select extends IUIElement {
         hasArrow: true,
         //hasAdd: false,
         updateTextBox: true,
-            query: (x) => null,
+        query: x => null,
         //_formatter: (x) => x,
         _autocomplete: false,
-            cssClass: 'select'
+        cssClass: "select",
       });
 
       this._register("select");
@@ -25,15 +26,12 @@ export default IUI.module(class Select extends IUIElement {
 
     disconnectedCallback() {
       //console.log("Select removed", this);
-        if (!this.searchlist && this.menu)
+      if (!this.searchlist && this.menu) app.removeChild(this.menu);
-            app.removeChild(this.menu);
-        
     }
 
     connectedCallback() {
       super.connectedCallback();
-        if (!this.searchlist && this.menu)
+      if (!this.searchlist && this.menu) app.appendChild(this.menu);
-            app.appendChild(this.menu);        
     }
     get autocomplete() {
       return this._autocomplete;
@@ -48,7 +46,6 @@ export default IUI.module(class Select extends IUIElement {
     // }
 
     _checkValidity() {
-
       if (this.validate != null) {
         try {
           let valid = this.validate.apply(this);
@@ -56,14 +53,12 @@ export default IUI.module(class Select extends IUIElement {
             this.setAttribute("invalid", "");
             this.classList.add(this.cssClass + "-invalid");
             return false;
-                }
+          } else {
-                else {
             this.removeAttribute("invalid");
             this.classList.remove(this.cssClass + "-invalid");
             return true;
           }
-            }
+        } catch (ex) {
-            catch (ex) {
           console.log("Validation Error", ex);
           return false;
         }
@@ -73,10 +68,8 @@ export default IUI.module(class Select extends IUIElement {
     }
 
     set hasAdd(value) {
-        if (value)
+      if (value) this.setAttribute("add", "add");
-            this.setAttribute("add", "add");
+      else this.removeAttribute("add");
-        else
-            this.removeAttribute("add");
     }
 
     get hasAdd() {
@@ -84,14 +77,11 @@ export default IUI.module(class Select extends IUIElement {
     }
 
     async create() {
-
       this.isAuto = this.hasAttribute("auto");
       this.field = this.getAttribute("field");
 
-
+      if (this.field != null) {
-        if (this.field != null)
+        this.setAttribute(":data", `d['${this.field}']`);
-        {
-            this.setAttribute(":data", `d['${this.field}']`)
         this.setAttribute(":revert", `d['${this.field}'] = this.data`);
       }
 
@@ -103,9 +93,6 @@ export default IUI.module(class Select extends IUIElement {
       //if (this._autocomplete)
       //  this.cssClass += "-autocomplete";
 
-
-
-          
       this.repeat = new Repeat();
       this.repeat.cssClass = "select-menu-repeat";
       //this.repeat.innerHTML = this.innerHTML;
@@ -115,28 +102,35 @@ export default IUI.module(class Select extends IUIElement {
       this.counter.className = this.cssClass + "-counter";
       this.counter.innerHTML = "${d[0]}";
 
+      this.menu = new Menu({
+        cssClass: this.cssClass + "-menu",
+        "target-class": "",
+      });
 
-        this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
+      this.menu
-        
+        .on("click", async e => {
-        this.menu.on("click", async (e) => {
+          if (
-            
+            e.target != self.textbox &&
-            if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) {
+            e.target != self.counter &&
+            e.target !== self.menu
+          ) {
             await self.setData(e.target.data);
 
             self._emit("input", { value: e.target.data });
 
             self.hide();
           }
-        }).on("visible", x=> { if (!x.visible) self.hide()});
+        })
-
+        .on("visible", x => {
+          if (!x.visible) self.hide();
+        });
 
       if (this._autocomplete) {
         this.textbox = document.createElement("input");
         this.textbox.type = "search";
         this.textbox.className = this.cssClass + "-textbox";
 
-            if (this.placeholder)
+        if (this.placeholder) this.textbox.placeholder = this.placeholder;
-                this.textbox.placeholder = this.placeholder;
 
         this.textbox.addEventListener("keyup", function (e) {
           if (e.keyCode != 13) {
@@ -149,7 +143,6 @@ export default IUI.module(class Select extends IUIElement {
         });
 
         this.menu.appendChild(this.textbox);
-
       }
 
       // get collection
@@ -157,18 +150,17 @@ export default IUI.module(class Select extends IUIElement {
 
       //debugger;
 
-
+      if (
-        if (layout != null && layout.label != undefined && layout.menu != undefined) {
+        layout != null &&
+        layout.label != undefined &&
+        layout.menu != undefined
+      ) {
         this.label = layout.label.node;
         this.repeat.appendChild(layout.menu.node);
-        }
+      } else if (layout != null && layout.null != null) {
-        else if (layout != null && layout.null != null)
-        {
         this.label = layout.null.node;
         this.repeat.appendChild(layout.null.node.cloneNode(true));
-        }
+      } else {
-        else
-        {
         this.label = document.createElement("div");
         this.repeat.innerHTML = this.innerHTML;
       }
@@ -187,18 +179,14 @@ export default IUI.module(class Select extends IUIElement {
       this.menu.appendChild(this.repeat);
       this.menu.appendChild(this.counter);
 
-    
       if (this.hasArrow) {
         this.arrow = document.createElement("div");
         this.arrow.className = this.cssClass + "-arrow";
         this.appendChild(this.arrow);
 
-
         this.arrow.addEventListener("click", function (e) {
-                if (self.visible)
+          if (self.visible) self.hide();
-                    self.hide();
+          else self.show();
-                else
-                    self.show();
         });
       }
 
@@ -208,19 +196,14 @@ export default IUI.module(class Select extends IUIElement {
         this.appendChild(this._add_button);
 
         this._add_button.addEventListener("click", function (e) {
-                self._emit("add", { value: self.data })
+          self._emit("add", { value: self.data });
         });
       }
 
-
+      if (this.searchlist) this.appendChild(this.menu);
-        if (this.searchlist)
+      else {
-            this.appendChild(this.menu);
-        else
-        {
         app.appendChild(this.menu);
-            if (app.loaded)
+        if (app.loaded) {
-            {
-
           ///console.log("Append", this.menu);
           await this.menu.create();
           IUI.bind(this.menu, false, "menu");
@@ -231,8 +214,7 @@ export default IUI.module(class Select extends IUIElement {
       }
 
       this.addEventListener("click", function (e) {
-            if (e.target == self.textbox)
+        if (e.target == self.textbox) self.show();
-                self.show();
       });
     }
 
@@ -247,12 +229,9 @@ export default IUI.module(class Select extends IUIElement {
 
       if (value) {
         this.setAttribute("disabled", value);
-        }
+      } else {
-        else {
         this.removeAttribute("disabled");
       }
-
-
     }
     /*
     set(item) {
@@ -285,8 +264,7 @@ export default IUI.module(class Select extends IUIElement {
     }
 
     clear() {
-        if (this.autocomplete !== undefined)
+      if (this.autocomplete !== undefined) this.textbox.value = "";
-            this.textbox.value = "";
       //else
       //  this.label.innerHTML = "";
 
@@ -296,32 +274,21 @@ export default IUI.module(class Select extends IUIElement {
     }
 
     async _query() {
-
+      if (this._autocomplete) if (this.disabled) return;
-        
-        if (this._autocomplete)
-            if (this.disabled)
-                return;
 
       let self = this;
       let text = this._autocomplete ? this.textbox.value : null;
 
-        var res = this.query(0, text)
+      var res = this.query(0, text);
-        if (res instanceof Promise)
+      if (res instanceof Promise) res = await res;
-            res = await res;
 
       //.then(async (res) => {
-        if (res[1].length == 0)
+      if (res[1].length == 0) await self.setData(null);
-            await self.setData(null);
 
       await this.menu.setData(res);
-
-
-       
     }
 
-
     async setData(value) {
-
       // this.label.innerHTML = "";
 
       await super.setData(value);
@@ -331,25 +298,18 @@ export default IUI.module(class Select extends IUIElement {
         // this.label.innerHTML = text == null ? "" : text;
 
         this._emit("select", { value });
-        }
+      } catch (ex) {
-        catch (ex) {
         //console.log(ex);
         this._emit("select", { value });
       }
 
       //this._checkValidity();
 
-
+      if (this._checkValidity() && this.isAuto) this.revert();
-        if (this._checkValidity() && this.isAuto)
-            this.revert();
-
     }
 
-
     setVisible(visible) {
-
+      if (visible == this.visible) return;
-        if (visible == this.visible)
-            return;
 
       //console.log("SLCT: SetVisible", visible);
 
@@ -358,7 +318,8 @@ export default IUI.module(class Select extends IUIElement {
 
         // show menu
         var rect = this.getBoundingClientRect();
-            this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
+        this.menu.style.width =
+          this.clientWidth - this._computeMenuOuterWidth() + "px";
         this.menu.style.paddingTop = rect.height + "px";
         this.menu.setVisible(true, rect.left, rect.top); //, this.menu);
         this.visible = true;
@@ -369,9 +330,7 @@ export default IUI.module(class Select extends IUIElement {
           setTimeout(() => {
             this.textbox.focus();
           }, 100);
-
+      } else {
-        }
-        else {
         this.visible = false;
         this.classList.remove(this.cssClass + "-visible");
 
@@ -379,11 +338,9 @@ export default IUI.module(class Select extends IUIElement {
       }
 
       //this.textbox.focus();
-
     }
 
     _computeMenuOuterWidth() {
-
       return this.menu.offsetWidth - this.menu.clientWidth;
       /*
         var style = window.getComputedStyle(this.menu.el, null);
@@ -400,5 +357,5 @@ export default IUI.module(class Select extends IUIElement {
         return paddingLeft + paddingRight + borderLeft + borderRight;
         */
     }
-
+  }
-});
+);

src/UI/SelectList.js

@@ -1,13 +1,14 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class SelectList extends IUIElement {
+export default IUI.module(
+  class SelectList extends IUIElement {
     constructor() {
       super({
         selected: null,
         list: [],
-            query: (x) => null,
+        query: x => null,
-            formatter: (x) => x["name"]
+        formatter: x => x["name"],
       });
 
       var self = this;
@@ -16,28 +17,26 @@ export default IUI.module(class SelectList extends IUIElement {
       this.classList.add(this.cssClass);
 
       //        this.menu = iui(menu[0]).menu({ customClass: this.customClass + "-menu", layout: this.layout.menu });
-        this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
+      this.menu = new Menu({
+        cssClass: this.cssClass + "-menu",
+        "target-class": "",
+      });
 
       this.menu.on("visible", function (v) {
-            if (v)
+        if (v) self.classList.add(self.cssClass + "-active");
-                self.classList.add(self.cssClass + "-active");
+        else self.classList.remove(self.cssClass + "-active");
-            else
-                self.classList.remove(self.cssClass + "-active");
       });
 
-        this.menu.on("click", (e) => {
+      this.menu.on("click", e => {
         let [data, element] = self.menu._getElementData(e.target);
-            if (data != undefined)
+        if (data != undefined) self.data = data;
-                self.data = data;
       });
 
-
       document.body.appendChild(this.menu);
 
       this.label = document.createElement("div");
       this.label.className = this.cssClass + "-label";
 
-
       this.appendChild(this.label);
 
       this.label.addEventListener("click", function (e) {
@@ -81,7 +80,9 @@ export default IUI.module(class SelectList extends IUIElement {
       }
 
       // item is action
-        this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
+      this.label.innerHTML = this.layout.text.formatter
+        ? this.layout.text.formatter(item[this.layout.text.field], item)
+        : item[this.layout.text.field];
       this.selected = item;
 
       this._emit("select", item);
@@ -107,13 +108,14 @@ export default IUI.module(class SelectList extends IUIElement {
 
         // show menu
         var rect = this.el.getBoundingClientRect();
-            this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px";
+        this.menu.el.style.width =
+          rect.width - this._computeMenuOuterWidth() + "px";
         this.menu.setVisible(true, rect.left, rect.top + rect.height);
-        }
+      } else {
-        else {
         this.menu.hide();
       }
 
       return this;
     }
-});
+  }
+);

src/UI/Tab.js

@@ -1,14 +1,13 @@
 import { IUI } from "../Core/IUI.js";
 import IUIElement from "../Core/IUIElement.js";
 
-export default IUI.module(class Tab extends IUIElement {
+export default IUI.module(
+  class Tab extends IUIElement {
     constructor(properties) {
       super(properties);
     }
 
-    create() {
+    create() {}
-
-    }
 
     get caption() {
       return this.getAttribute("caption");
@@ -17,4 +16,5 @@ export default IUI.module(class Tab extends IUIElement {
     get selected() {
       return this.hasAttribute("selected"); // == "1" || selected == "yes" || selected == "true");
     }
-});
+  }
+);

src/UI/TabbedTarget.js

@@ -1,11 +1,10 @@
-
+import IUIElement from "../Core/IUIElement.js";
-import IUIElement from "../Core/IUIElement.js";
 import Tab from "./Tab.js";
 import { IUI } from "../Core/IUI.js";
 import Target from "../Router/Target.js";
 
-export default IUI.module(class TabbedTarget extends Target {
+export default IUI.module(
-
+  class TabbedTarget extends Target {
     constructor() {
       super({
         selected: null,
@@ -16,13 +15,11 @@ export default IUI.module(class TabbedTarget extends Target {
       });
     }
 
-
     create() {
       var self = this;
 
       this._register("select");
 
-
       this._bar = document.createElement("div");
       this._bar.classList.add(this.cssClass + "-bar");
 
@@ -30,8 +27,6 @@ export default IUI.module(class TabbedTarget extends Target {
       this._ext.className = this.cssClass + "-bar-ext";
       this._bar.appendChild(this._ext);
 
-
-
       //this.insertAdjacentElement("afterBegin", this._bar);
 
       this._body = document.createElement("div");
@@ -40,13 +35,10 @@ export default IUI.module(class TabbedTarget extends Target {
       this.appendChild(this._bar);
       this.appendChild(this._body);
 
-
-
       var items = []; // this.getElementsByClassName("tab");
 
       for (var i = 0; i < this.children.length; i++)
-            if (this.children[i] instanceof Tab)
+        if (this.children[i] instanceof Tab) items.push(this.children[i]);
-                items.push(this.children[i]);
 
       this._observer = new ResizeObserver(x => {
         self._body.style.height = x[0].target.offsetHeight + "px"; // x[0].contentRect.height + "px";
@@ -54,36 +46,50 @@ export default IUI.module(class TabbedTarget extends Target {
 
       items.map(x => self.add(x));
 
-
+      this.addEventListener(
-        this.addEventListener("touchstart", function (e) {
+        "touchstart",
-
+        function (e) {
           var x = e.target;
           do {
-                if (x == self)
+            if (x == self) break;
-                    break;
             var sy = window.getComputedStyle(x)["overflow-x"];
-                if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
+            if (
+              x.scrollWidth > x.clientWidth &&
+              (sy == "scroll" || sy == "auto")
+            )
               return;
-            } while (x = x.parentElement)
+          } while ((x = x.parentElement));
 
-            self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
+          self._x = e.originalEvent
-            self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
+            ? e.originalEvent.touches[0].clientX
-        }, { passive: true });
+            : e.touches[0].clientX;
+          self._y = e.originalEvent
+            ? e.originalEvent.touches[0].clientY
+            : e.touches[0].clientY;
+        },
+        { passive: true }
+      );
 
-        this.addEventListener("touchmove", function (e) {
+      this.addEventListener(
+        "touchmove",
+        function (e) {
           if (!self._x || !self._y) {
             return;
           }
 
-            var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
+          var xUp = e.originalEvent
-            var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
+            ? e.originalEvent.touches[0].clientX
+            : e.touches[0].clientX;
+          var yUp = e.originalEvent
+            ? e.originalEvent.touches[0].clientY
+            : e.touches[0].clientY;
           var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
           var yDiff = self._y - yUp;
 
-
           var index = self.list.indexOf(self.selected);
 
-            if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
+          if (Math.abs(xDiff) > Math.abs(yDiff)) {
+            /*most significant*/
             if (xDiff > 0) {
               if (index < self.list.length - 1) {
                 self.select(self.list[index + 1]);
@@ -91,9 +97,7 @@ export default IUI.module(class TabbedTarget extends Target {
               }
               /* left swipe */
             } else {
-
+              if (index > 0) self.select(self.list[index - 1]);
-                    if (index > 0)
-                        self.select(self.list[index - 1]);
 
               /* right swipe */
             }
@@ -107,8 +111,9 @@ export default IUI.module(class TabbedTarget extends Target {
           /* reset values */
           self._x = null;
           self._y = null;
-
+        },
-        }, { passive: true });
+        { passive: true }
+      );
     }
 
     created() {
@@ -116,7 +121,6 @@ export default IUI.module(class TabbedTarget extends Target {
     }
 
     add(item) {
-
       var label = document.createElement("i-check");
       label.innerHTML = item.title;
 
@@ -130,8 +134,6 @@ export default IUI.module(class TabbedTarget extends Target {
 
       this._body.append(item);
 
-
- 
       this.list.push(item);
       var self = this;
       label.on("check", function (v) {
@@ -139,10 +141,7 @@ export default IUI.module(class TabbedTarget extends Target {
         self.select(item);
       });
 
- 
+      if (item.selected) this.select(item);
-        if (item.selected)
-            this.select(item);
-
 
       return this;
     }
@@ -157,47 +156,40 @@ export default IUI.module(class TabbedTarget extends Target {
 
     select(item) {
       var tab;
-        if (item instanceof Tab)
+      if (item instanceof Tab) tab = item;
-            tab = item;
+      else if (typeof o === "string" || o instanceof String)
-        else if (typeof o === 'string' || o instanceof String)
         for (var i = 0; i < this.list.length; i++)
           if (this.list[i].id == item) {
             tab = item;
             break;
-                }
+          } else if (!isNaN(item)) tab = this.list[i];
-                else if (!isNaN(item))
-                    tab = this.list[i];
 
       //this._neglect = true;
 
       var self = this;
 
       this.list.forEach(function (i) {
-            if (i == tab)
+        if (i == tab) tab.label.check(true);
-                tab.label.check(true);// set(true, false);
+        // set(true, false);
         else {
           i.classList.remove(self.cssClass + "-content-active");
           i.label.check(false); // set(false, false);
         }
       });
 
-
       //this._neglect = false;
       tab.classList.add(this.cssClass + "-content-active");
 
-        if (this.selected != null)
+      if (this.selected != null) this._observer.unobserve(this.selected);
-            this._observer.unobserve(this.selected);
       this.selected = tab;
       this._observer.observe(this.selected);
 
       if (document.dir == "rtl")
         this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth;
-        else
+      else this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
-            this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
-
 
       this._emit("select", tab);
       return this;
     }
-
+  }
-});
+);

src/UI/Tabs.js

@@ -1,11 +1,10 @@
-
+import IUIElement from "../Core/IUIElement.js";
-import IUIElement from "../Core/IUIElement.js";
 import Tab from "./Tab.js";
 import { IUI } from "../Core/IUI.js";
 import Check from "./Check.js";
 
-export default IUI.module(class Tabs extends IUIElement {
+export default IUI.module(
-
+  class Tabs extends IUIElement {
     constructor() {
       super({
         selected: null,
@@ -16,14 +15,11 @@ export default IUI.module(class Tabs extends IUIElement {
       });
     }
 
-
+    create() {
-    create()
-    {
       var self = this;
 
       this._register("select");
 
-
       this._bar = document.createElement("div");
       this._bar.classList.add(this.cssClass + "-bar");
 
@@ -31,8 +27,6 @@ export default IUI.module(class Tabs extends IUIElement {
       this._ext.className = this.cssClass + "-bar-ext";
       this._bar.appendChild(this._ext);
 
-
-        
       //this.insertAdjacentElement("afterBegin", this._bar);
 
       this._body = document.createElement("div");
@@ -41,13 +35,10 @@ export default IUI.module(class Tabs extends IUIElement {
       this.appendChild(this._bar);
       this.appendChild(this._body);
 
-
-
       var items = []; // this.getElementsByClassName("tab");
 
       for (var i = 0; i < this.children.length; i++)
-            if (this.children[i] instanceof Tab)
+        if (this.children[i] instanceof Tab) items.push(this.children[i]);
-                items.push(this.children[i]);
 
       this._observer = new ResizeObserver(x => {
         self._body.style.height = x[0].target.offsetHeight + "px"; // x[0].contentRect.height + "px";
@@ -55,36 +46,50 @@ export default IUI.module(class Tabs extends IUIElement {
 
       items.map(x => self.add(x));
 
-
+      this.addEventListener(
-        this.addEventListener("touchstart", function (e) {
+        "touchstart",
-
+        function (e) {
           var x = e.target;
           do {
-                if (x == self)
+            if (x == self) break;
-                    break;
             var sy = window.getComputedStyle(x)["overflow-x"];
-                if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
+            if (
+              x.scrollWidth > x.clientWidth &&
+              (sy == "scroll" || sy == "auto")
+            )
               return;
-            } while (x = x.parentElement)
+          } while ((x = x.parentElement));
 
-            self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
+          self._x = e.originalEvent
-            self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
+            ? e.originalEvent.touches[0].clientX
-        }, { passive: true });
+            : e.touches[0].clientX;
+          self._y = e.originalEvent
+            ? e.originalEvent.touches[0].clientY
+            : e.touches[0].clientY;
+        },
+        { passive: true }
+      );
 
-        this.addEventListener("touchmove", function (e) {
+      this.addEventListener(
+        "touchmove",
+        function (e) {
           if (!self._x || !self._y) {
             return;
           }
 
-            var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
+          var xUp = e.originalEvent
-            var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
+            ? e.originalEvent.touches[0].clientX
+            : e.touches[0].clientX;
+          var yUp = e.originalEvent
+            ? e.originalEvent.touches[0].clientY
+            : e.touches[0].clientY;
           var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
           var yDiff = self._y - yUp;
 
-
           var index = self.list.indexOf(self.selected);
 
-            if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
+          if (Math.abs(xDiff) > Math.abs(yDiff)) {
+            /*most significant*/
             if (xDiff > 0) {
               if (index < self.list.length - 1) {
                 self.select(self.list[index + 1]);
@@ -92,9 +97,7 @@ export default IUI.module(class Tabs extends IUIElement {
               }
               /* left swipe */
             } else {
-
+              if (index > 0) self.select(self.list[index - 1]);
-                    if (index > 0)
-                        self.select(self.list[index - 1]);
 
               /* right swipe */
             }
@@ -108,8 +111,9 @@ export default IUI.module(class Tabs extends IUIElement {
           /* reset values */
           self._x = null;
           self._y = null;
-
+        },
-        }, { passive: true });
+        { passive: true }
+      );
     }
 
     created() {
@@ -117,7 +121,6 @@ export default IUI.module(class Tabs extends IUIElement {
     }
 
     add(item) {
-
       var label = new Check(); // document.createElement("i-check");
       label.innerHTML = item.caption;
 
@@ -131,8 +134,6 @@ export default IUI.module(class Tabs extends IUIElement {
 
       this._body.append(item);
 
-
- 
       this.list.push(item);
       var self = this;
       label.on("check", function (v) {
@@ -140,10 +141,7 @@ export default IUI.module(class Tabs extends IUIElement {
         self.select(item);
       });
 
- 
+      if (item.selected) this.select(item);
-        if (item.selected)
-            this.select(item);
-
 
       return this;
     }
@@ -158,47 +156,40 @@ export default IUI.module(class Tabs extends IUIElement {
 
     select(item) {
       var tab;
-        if (item instanceof Tab)
+      if (item instanceof Tab) tab = item;
-            tab = item;
+      else if (typeof o === "string" || o instanceof String)
-        else if (typeof o === 'string' || o instanceof String)
         for (var i = 0; i < this.list.length; i++)
           if (this.list[i].id == item) {
             tab = item;
             break;
-                }
+          } else if (!isNaN(item)) tab = this.list[i];
-                else if (!isNaN(item))
-                    tab = this.list[i];
 
       //this._neglect = true;
 
       var self = this;
 
       this.list.forEach(function (i) {
-            if (i == tab)
+        if (i == tab) tab.label.check(true);
-                tab.label.check(true);// set(true, false);
+        // set(true, false);
         else {
           i.classList.remove(self.cssClass + "-content-active");
           i.label.check(false); // set(false, false);
         }
       });
 
-
       //this._neglect = false;
       tab.classList.add(this.cssClass + "-content-active");
 
-        if (this.selected != null)
+      if (this.selected != null) this._observer.unobserve(this.selected);
-            this._observer.unobserve(this.selected);
       this.selected = tab;
       this._observer.observe(this.selected);
 
       if (document.dir == "rtl")
         this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth;
-        else
+      else this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
-            this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
-
 
       this._emit("select", tab);
       return this;
     }
-
+  }
-});
+);

src/UI/Window.js

@@ -1,7 +1,8 @@
 import IUIElement from "../Core/IUIElement.js";
 import { IUI } from "../Core/IUI.js";
 
-export default IUI.module(class IUIWindow extends IUIElement {
+export default IUI.module(
+  class IUIWindow extends IUIElement {
     constructor() {
       super({ closeable: true, draggable: false, focus: false });
 
@@ -10,7 +11,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
       this._register("close");
 
       this._uid = "d:" + Math.random().toString(36).substring(2);
-
     }
 
     static moduleName = "window";
@@ -24,8 +24,7 @@ export default IUI.module(class IUIWindow extends IUIElement {
       this._header = document.createElement("div");
       this._header.className = this.cssClass + "-header";
 
-        if (this.draggable)
+      if (this.draggable) this._header.setAttribute("draggable", true);
-            this._header.setAttribute("draggable", true);
 
       var f = this.getElementsByClassName(this.cssClass + "-footer");
       this._footer = f.length > 0 ? f[0] : null;
@@ -41,18 +40,13 @@ export default IUI.module(class IUIWindow extends IUIElement {
           this._body.appendChild(this.children[0]);
 
         this.insertAdjacentElement("afterBegin", this._body);
-
+      } else this._body = b[0];
-        }
-        else
-            this._body = b[0];
 
       if (this.icon) {
         this._icon = document.createElement("div");
         this._icon.className = this.cssClass + "-icon";
         //this._icon.src = this.icon;
 
-
-       
         this._icon.style.setProperty("--icon", `url('${this.icon}')`);
         this._header.appendChild(this._icon);
       }
@@ -93,8 +87,7 @@ export default IUI.module(class IUIWindow extends IUIElement {
     }
 
     setCloseVisible(value) {
-        if (this.closeable)
+      if (this.closeable) this._close.style.display = value ? "" : "none";
-            this._close.style.display = value ? "" : "none";
     }
 
     get icon() {
@@ -174,7 +167,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
     }
     */
 
-
     show() {
       //this.setFocus(true);
       return this;
@@ -199,26 +191,34 @@ export default IUI.module(class IUIWindow extends IUIElement {
     }
 
     _updateSize() {
-        if (IUI.responsive)
+      if (IUI.responsive) return;
-            return;
 
       if (this._body) {
         if (this.clientWidth < this._body.scrollWidth)
           this.style.width = this._body.scrollWidth + 1 + "px";
 
         if (this._footer) {
-
           if (this.clientWidth < this._footer.offsetWidth)
             this.style.width = this._footer.offsetWidth + "px";
 
-                if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight)
+          if (
-                    this.style.height = (this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) + "px";
+            this.clientHeight <
-
+            this._header.offsetHeight +
-            }
+              this._body.scrollHeight +
-            else {
+              this._footer.offsetHeight
-                if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight)
+          )
-                    this.style.height = (this._header.offsetHeight + this._body.scrollHeight + 1) + "px";
+            this.style.height =
-
+              this._header.offsetHeight +
+              this._body.scrollHeight +
+              this._footer.offsetHeight +
+              "px";
+        } else {
+          if (
+            this.clientHeight <
+            this._header.offsetHeight + this._body.scrollHeight
+          )
+            this.style.height =
+              this._header.offsetHeight + this._body.scrollHeight + 1 + "px";
         }
       }
 
@@ -226,18 +226,20 @@ export default IUI.module(class IUIWindow extends IUIElement {
       if (this.clientHeight > document.body.clientHeight) {
         this.style.height = document.body.clientHeight + "px";
         if (this._footer)
-                this._body.style.height = (this.clientHeight - this._footer.clientHeight - this._header.clientHeight) + "px";
+          this._body.style.height =
+            this.clientHeight -
+            this._footer.clientHeight -
+            this._header.clientHeight +
+            "px";
         else
-                this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px";
+          this._body.style.height =
+            this.clientHeight - this._header.clientHeight + "px";
       }
 
-
       if (this.clientWidth > document.body.clientWidth)
         this.style.width = document.body.clientWidth + 1 + "px";
-
     }
 
-
     get caption() {
       return this.getAttribute("caption");
     }
@@ -247,7 +249,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
       this.setAttribute("caption", value);
     }
 
-
     get subtitle() {
       return this.getAttribute("subtitle");
     }
@@ -256,9 +257,8 @@ export default IUI.module(class IUIWindow extends IUIElement {
       this._subtitle.innerHTML = value;
       this.setAttribute("subtitle", value);
     }
-
+  }
-
+);
-});
 
 /*
 IUI._nav_list = [];

src/iui.js

@@ -1,53 +1,53 @@
 import { IUI, iui } from "./Core/IUI.js";
 
 import "./Core/IUIElement.js";
-import './Core/App.js';
+import "./Core/App.js";
 
-import './Router/Router.js';
+import "./Router/Router.js";
-import './Router/Route.js';
+import "./Router/Route.js";
-import './Router/Link.js';
+import "./Router/Link.js";
-import './Router/Target.js';
+import "./Router/Target.js";
 
-import './Data/Repeat.js';
+import "./Data/Repeat.js";
-import './Data/Include.js';
+import "./Data/Include.js";
-import './Data/Form.js';
+import "./Data/Form.js";
-import './UI/Login.js';
+import "./UI/Login.js";
-import './UI/Window.js';
+import "./UI/Window.js";
-import './UI/Dialog.js';
+import "./UI/Dialog.js";
-import './UI/Input.js';
+import "./UI/Input.js";
-import './UI/Tab.js';
+import "./UI/Tab.js";
-import './UI/Tabs.js';
+import "./UI/Tabs.js";
 
-import './UI/Table.js';
+import "./UI/Table.js";
 
-import './UI/Check.js';
+import "./UI/Check.js";
-import './UI/Button.js';
+import "./UI/Button.js";
-import './UI/Navbar.js';
+import "./UI/Navbar.js";
 
-import './UI/DateTimePicker.js';
+import "./UI/DateTimePicker.js";
 
-import './Data/Layout.js';
+import "./Data/Layout.js";
-import './Data/Field.js';
+import "./Data/Field.js";
 
-import './UI/Background.js';
+import "./UI/Background.js";
-import './UI/Menu.js';
+import "./UI/Menu.js";
-import './Data/TableRow.js';
+import "./Data/TableRow.js";
 
-import './UI/Select.js';
+import "./UI/Select.js";
 
-import './UI/DropDown.js';
+import "./UI/DropDown.js";
-import './UI/Grid.js';
+import "./UI/Grid.js";
 
-import './UI/Location.js';
+import "./UI/Location.js";
-import './UI/CodePreview.js';
+import "./UI/CodePreview.js";
 
-window.addEventListener("beforeprint", (e)=>{
+window.addEventListener("beforeprint", e => {
   let viewRoute = router.current.viewRoute;
   viewRoute.style.height = "auto";
   router.style.height = viewRoute.clientHeight + "px";
 });
 
-window.addEventListener("afterprint", (e)=>{
+window.addEventListener("afterprint", e => {
   let viewRoute = router.current.viewRoute;
   viewRoute.style.height = "";
   router.style.height = "";
@@ -56,9 +56,6 @@ window.addEventListener("afterprint", (e)=>{
 window.addEventListener("load", async function () {
   await IUI.create(document.body);
   await IUI.created(document.body);
-    //if (window.app != null) {
-      //  window.app._emit("load", { app: window.app });
-   // }
 });
 
 window.iui = iui;