repeat

css/iui.css

@@ -48,8 +48,13 @@
     --background-visible-background: rgba(0, 0, 0, 0.6);
     --window-caption-color: #444;
     --window-tools-close-background: linear-gradient(to bottom, #f1796b, #d66255);
-    --window-tools-close-border: 1px solid #f1786b;
+    --window-tools-close-border: 1px solid #d6d6d6;
     --window-tools-close-background-hover: #f03242;
+
+    --window-tools-config-background: linear-gradient(to bottom, #9de1e8, #55b1d6);
+    --window-tools-config-border: 1px solid #d6d6d6;
+    --window-tools-config-background-hover:rgb(0, 135, 208);
+
     --dialog-loading-background: rgb(167, 227, 252);
     --dialog-loading-content-border: 10px solid #fff;
     --dialog-loading-content-border-top: 10px solid #ffe3e3;
@@ -529,9 +534,11 @@ html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools {
 }
 
 .window-tools, .dialog-tools {
-    position: absolute;
+    flex: 1;
-    top: 5px;
+    flex-flow: row-reverse;
-    right: 5px;
+    display: flex;
+    margin: auto 0;
+    padding: 0 3px;
 }
 
 .window-icon, .dialog-icon {
@@ -565,27 +572,47 @@ html[dir='rtl'] .window-tools, html[dir='rtl'] .dialog-tools {
     background: wheat;
 }
 
-    .window-subtitle:empty, .dialog-subtitle:empty {
+.window-subtitle:empty, .dialog-subtitle:empty {
-        display: none;
+    display: none;
-    }
-
-.window-tools-close, .dialog-tools-close {
-    float: left;
-    height: 16px;
-    line-height: 16px;
-    padding: 0 5px;
-    border: var(--window-tools-close-border);
-    border-radius: 5px;
-    background: var(--window-tools-close-background);
-    white-space: nowrap;
 }
 
-    .window-tools-close:hover, .dialog-tools-close:hover {
+.window-tools-close, .dialog-tools-close, .window-tools-config, .dialog-tools-config {
-        background: var(--window-tools-close-background-hover);
+    height: 20px;
-    }
+    padding: 0 5px;
+    border-radius: 5px;
+    white-space: nowrap;
+    
+}
+
+.window-tools-config, .dialog-tools-config{
+    background: var(--window-tools-config-background);
+    border: var(--window-tools-config-border);
+}
+
+.window-tools-close, .dialog-tools-close{
+    background: var(--window-tools-close-background);
+    border: var(--window-tools-close-border);
+}
+
+.window-tools-config:hover, .dialog-tools-config:hover {
+    background: var(--window-tools-config-background-hover);
+}
+
+.window-tools-close:hover, .dialog-tools-close:hover {
+    background: var(--window-tools-close-background-hover);
+}
+
+.dialog-tools-close:before, .window-tools-close:before {
+    content: "x";
+}
+
+.dialog-tools-config:before, .window-tools-config:before {
+    content: "⚙";
+    font-size: 18px;
+    padding-top: 2px;
+}
 
 .window-tools-max, .dialog-tools-max {
-    float: left;
     width: 1.4em;
     line-height: 1.4em;
     text-align: center;
@@ -1232,9 +1259,8 @@ html[dir='rtl'] .table-row[data-level='3'] .table-tree {
 }
 
 
-.dialog-tools-close:before, .window-tools-close:before {
+
-    content: "x";
+
-}
 
 @media only screen and (max-width: 500px) {
     .dialog {

src/Data/Repeat.js

@@ -143,14 +143,12 @@ export default IUI.module(class Repeat extends IUIElement
             value = [];
 
 
-            //debugger;
-        await super.setData(value, radix);
 
         
         for (let i = 0; i < value.length; i++) {
 
             let el = this._repeatNode.cloneNode(true);
-
+            el.setAttribute(":data", `d[${i}]`);
             this.list.push(el);
 
             try {
@@ -171,6 +169,7 @@ export default IUI.module(class Repeat extends IUIElement
 
             await IUI.created(el, true);
 
+            /*
             if (el instanceof IUIElement){
                 // @TODO should check if the element depends on parent or not
                 if (el.dataMap != null) {
@@ -194,9 +193,11 @@ export default IUI.module(class Repeat extends IUIElement
                 // data is now the radix 
                 await IUI.render(el, el.data, false, value[i]);
             }
+                */
             
         }
 
+        await super.setData(value, radix);
 
     
         // @TODO: check if this works for event names starting with ":"

src/UI/Grid.js

@@ -16,11 +16,18 @@ export default IUI.module(class Grid extends IUIElement {
 		this.windows = [];
 	}
 
-    create() {
+    async create() {
         for (var i = 0; i < this.children.length; i++)
             this.add(this.children[i]);
     }
 
+	async updated(){
+		if (this.hasAttribute("dynamic")){
+			for (var i = 0; i < this.children.length; i++)
+				this.add(this.children[i]);
+		}
+	}
+
 	setGridLayout(style)
 	{
 		this.style.grid = style;

src/UI/Window.js

@@ -8,6 +8,7 @@ export default IUI.module(class IUIWindow extends IUIElement {
         this._register("resize");
         this._register("move");
         this._register("close");
+        this._register("config");
 
         this._uid = "d:" + Math.random().toString(36).substring(2);
 
@@ -15,6 +16,30 @@ export default IUI.module(class IUIWindow extends IUIElement {
 
     static moduleName = "window";
 
+    get closeable(){
+        return this.hasAttribute("closeable");
+    }
+
+    set closeable(value){
+        if (!value)
+            this.removeAttribute("closeable");
+        else
+            this.setAttribute("closeable", true);
+    }
+
+
+    get configurable(){
+        return this.hasAttribute("configurable");
+    }
+
+    set configurable(value){
+        if (!value)
+            this.removeAttribute("configurable");
+        else
+            this.setAttribute("configurable", true);
+    }
+
+
     async create() {
 
         await super.create();
@@ -73,14 +98,27 @@ export default IUI.module(class IUIWindow extends IUIElement {
         this._header.appendChild(this._subtitle);
         this._header.appendChild(this._tools);
 
+        if (this.configurable) {
+            this._config = document.createElement("div");
+            this._config.className = this.cssClass + "-tools-config button";
+            this._config.addEventListener("click", function () {
+                self._emit("config");
+            });
+            this._tools.appendChild(this._config);
+        }
+        
         if (this.closeable) {
             this._close = document.createElement("div");
             this._close.className = this.cssClass + "-tools-close button";
             this._close.addEventListener("click", function () {
                 self._emit("close");
             });
+            this._tools.appendChild(this._close);
         }
 
+
+
+
         //this.addEventListener("mousedown", function (e) {
         //    self.setFocus(true);
         //});