DateTimePicker

css/iui.css

@@ -165,6 +165,7 @@
     --grid-window-drag-border: #46b7e6 dotted 3px;
     --datetimepicker-calendar-border-right: 3px solid pink;
     --datetimepicker-clock-background: gainsboro;
+    --datetimepicker-calendar-content-background: var(--default-background-color);
     --datetimepicker-different-month-color: #bebebe;
     --datetimepicker-day-background-hover: #a7e3fc;
     --datetimepicker-day-selected-background: #46b7e6;
@@ -2366,6 +2367,7 @@ html[dir='rtl'] .multiselect-list-remove {
 .datetimepicker-calendar-content {
     display: flex;
     flex: 1;
+    background: var(--datetimepicker-calendar-content-background);
 }
 
 .datetimepicker-clock {

package.json

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

src/Router/Route.js

@@ -13,6 +13,7 @@ export default IUI.module(
 
       this._register("show");
       this._register("hide");
+      this._register("load");
     }
 
     async setData(value) {
@@ -150,6 +151,7 @@ export default IUI.module(
 
     created() {
       this.refs._build();
+      this._emit("load", { route: this });
     }
 
     set(value) {

src/UI/DateTimePicker.js

@@ -8,7 +8,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
         super();
     }
 
-   
+
 
     get layout() {
         return this._layout;
@@ -41,7 +41,7 @@ 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.className =  this.cssClass + "-day";
+            td.className = this.cssClass + "-day";
         }
 
         this.tools = document.createElement("div");
@@ -76,7 +76,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
         this.tools.appendChild(this.month);
         this.tools.appendChild(this.year);
 
-        let self = this; 
+        let self = this;
 
         this.nextMonth.addEventListener("click", function () {
             self._month = (self._month + 1) % 12;
@@ -114,6 +114,10 @@ export default IUI.module(class DateTimePicker extends IUIElement {
                     self._value.setFullYear(self._year);
                     self._value.setMonth(self._month);
                     self.render();
+
+                    if (self.isAuto)
+                        self.revert();
+
                     self._emit("select", { value: self._value });
                     self._emit(":value", { value });
                 });
@@ -165,6 +169,10 @@ export default IUI.module(class DateTimePicker extends IUIElement {
                 var m = Math.floor(t % 60);
                 self._value.setHours(h);
                 self._value.setMinutes(m);
+
+                if (self.isAuto)
+                    self.revert();
+
                 self._emit("select", self._value);
                 self.render();
             });
@@ -174,13 +182,26 @@ export default IUI.module(class DateTimePicker extends IUIElement {
         //this.timeList = 
         this.appendChild(this.calendar);
         this.appendChild(this.clock);
-  //      this.appendChild(this.minutes);
+        //      this.appendChild(this.minutes);
-//        this.appendChild(this.hours);
+        //        this.appendChild(this.hours);
 
         this.value = new Date();
     }
 
-    create() {
+    async create() {
+
+        await super.create();
+
+        this.isAuto = this.hasAttribute("auto");
+        this.field = this.getAttribute("field");
+
+        if (this.field != null) {
+            this.setAttribute(":data", `d != null ? d['${this.field}'] : null`);
+            this.setAttribute(
+                "async:revert",
+                `d != null ? d['${this.field}'] = this.data : null`
+            );
+        }
 
         var self = this;
 
@@ -286,13 +307,25 @@ export default IUI.module(class DateTimePicker extends IUIElement {
     }
 
     get data() {
-        return super.data;
+        return this.value;
     }
 
+
+    async setData(value) {
+        await super.setData(value);
+
+        this.value = value;
+
+        if (this.isAuto)
+            this.revert();
+    }
+
+    /*
     modified(name, value) {
         if (name == this.field)
             this.value = value;
     }
+    */
 
     set value(value) {
         if (value && !isNaN(value.getTime())) {
@@ -305,6 +338,9 @@ export default IUI.module(class DateTimePicker extends IUIElement {
             this._emit("modified", { value, property: "value" });
             //this.modified("value", );
             //this.modified("modified", { value });
+
+            if (this.isAuto)
+                this.revert();
         }
     }
 

src/UI/DropDown.js

@@ -4,14 +4,12 @@ import Layout from "../Data/Layout.js";
 import Menu from "./Menu.js";
 export default IUI.module(class DropDown extends IUIElement {
 
-    visible = false;
+    //visible = false;
 
     constructor() {
         super({"direction": "down" });
 
         this._register("visible");
-
-
     }
 
 
@@ -55,17 +53,6 @@ export default IUI.module(class DropDown extends IUIElement {
             document.body.appendChild(this.menu);
         }
 
-        this.addEventListener("click", function (e) {
-            var t = e.target
-            do {
-                if (t == self.menu)
-                    return;
-            } while (t = t.parentElement)
-
-            self.setVisible(!self.visible);
-        });
-
-
         app.appendChild(this.menu);
 
         if (app.loaded)
@@ -78,6 +65,14 @@ export default IUI.module(class DropDown extends IUIElement {
 
             await IUI.created(this.menu);
         }
+    }  
+
+    async setData(value){
+
+        //debugger;
+        await super.setData(value);
+        await this.menu.setData(value);
+
     }
 
     set fixed(value) {
@@ -109,36 +104,18 @@ export default IUI.module(class DropDown extends IUIElement {
         if (this.menu)
             app.appendChild(this.menu);        
     }
-
-    getOffset() {
-        var el = this;
-        var _x = 0;
-        var _y = 0;
-        while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
-            _x += el.offsetLeft - el.scrollLeft;
-            _y += el.offsetTop - el.scrollTop;
-            el = el.offsetParent;
-        }
-        _x += window.pageXOffset;
-        _y += window.pageYOffset;
-
-        return { top: _y, left: _x, width: this.clientWidth, height: this.clientHeight };
-    }
-
-
     
     setVisible(visible) {
 
-        if (visible == this.visible)
+        if (visible == this.menu.visible)
             return;
 
         if (visible) {
             // 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.style.marginTop = rect.height + "px";
             this.menu.setVisible(true, rect.left, rect.top);//, this.menu);
-            this.visible = true;
 
             this.classList.add(this.cssClass + "-visible");
 
@@ -149,113 +126,15 @@ export default IUI.module(class DropDown extends IUIElement {
 
         }
         else {
-            this.visible = false;
+
-            this.classList.remove(this.cssClass + "-visible");
+            this.classList.remove(this.cssClass + "-visible");            
-            
             this.menu.hide();
         }
 
-        //this.textbox.focus();
-
     }
 
-
     _computeMenuOuterWidth() {
         return this.menu.offsetWidth - this.menu.clientWidth;
     }
 
-    setVisibleOld(visible) {
-        this.visible = visible;
-
-        if (!this.fixed) {
-            if (visible) {
-                this.menu.classList.add(this.cssClass + "-menu-visible");
-                this.classList.add(this.cssClass + "-visible");
-            }
-            else {
-                this.menu.classList.remove(this.cssClass + "-menu-visible");
-                this.classList.remove(this.cssClass + "-visible");
-            }
-        }
-        else {
-            if (visible) {
-                var rect = this.getBoundingClientRect();
-
-                var menuWidth = this.menu.clientWidth;
-                var menuHeight = this.menu.clientHeight;
-
-                if (menuWidth > document.body.clientWidth) {
-                    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;
-
-                    if (menuTop < 0) {
-                        menuTop = 5;
-                        //						this.menu.style.height = (rect.top  - this.arrow.clientHeight ) + "px";
-                        this.menu.style.height = (rect.top) + "px";
-
-                        this.menu.classList.add(this.cssClass + "-menu-oversized");
-                    }
-                    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";
-                }
-                else {
-                    //var menuTop = rect.top + rect.height + this.arrow.clientHeight;
-                    var menuTop = rect.top + rect.height;
-
-                    //this.arrow.classList.remove(this.customClass + "-arrow-up");
-                    //this.arrow.classList.add(this.customClass + "-arrow-down");
-                    //this.arrow.style.top = ( rect.top + rect.height ) + "px";
-
-                    this.menu.style.top = menuTop + "px";
-
-                    if (menuTop + menuHeight > document.body.clientHeight) {
-                        this.menu.style.height = (document.body.clientHeight - menuTop) + "px";
-                        this.menu.classList.add(this.cssClass + "-menu-oversized");
-                    }
-                    else {
-                        this.menu.classList.remove(this.cssClass + "-menu-oversized");
-                    }
-                }
-
-                if (startX < 0)
-                    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 {
-                //this.arrow.classList.remove(this.customClass + "-arrow-visible");
-                this.menu.classList.remove(this.cssClass + "-menu-visible");
-                this.classList.remove(this.cssClass + "-visible");
-            }
-        }
-
-        this._emit("visible", { visible});
-
-        return this;
-
-    }
 });

src/UI/Input.js

@@ -157,7 +157,8 @@ export default IUI.module(
         // can't set value on file input
       } else this._input.value = value;
 
-      if (this._checkValidity() && this.isAuto) this.revert();
+      if (this._checkValidity() && this.isAuto) 
+        this.revert();
 
       /*
         await super.setData(value);