@lemonadejs/calendar 5.2.1 → 5.3.0

package/dist/index.d.ts

@@ -37,7 +37,7 @@ declare namespace Calendar {
         /** Update view on mouse wheel. Default: true */
         wheel?: boolean;
         /** Bind the calendar to na HTML input element */
-        input?: HTMLElement | 'auto';
+        input?: HTMLInputElement | 'auto';
         /** Create events and assing the calendar classes for the input. Default true */
         initInput?: boolean;
         /** Change value event */

package/dist/index.js

@@ -51,7 +51,7 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
-    const Helpers = (function() {
+    const Helpers = (function () {
         const component = {};
 
         // Excel like dates
@@ -60,22 +60,22 @@ if (! Modal && typeof (require) === 'function') {
         const millisecondsPerDay = 86400000;
 
         // Transform in two digits
-        component.two = function(value) {
+        component.two = function (value) {
             value = '' + value;
             if (value.length === 1) {
                 value = '0' + value;
             }
             return value;
-        }
+        };
 
-        component.isValidDate = function(d) {
+        component.isValidDate = function (d) {
             return d instanceof Date && !isNaN(d.getTime());
-        }
+        };
 
-        component.isValidDateFormat = function(date, format) {
+        component.isValidDateFormat = function(date) {
             if (typeof date === 'string') {
                 // Check format: YYYY-MM-DD using regex
-                const match = date.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+                const match = date.substring(0, 10).match(/^(\d{4})-(\d{2})-(\d{2})$/);
                 if (match) {
                     const year = Number(match[1]);
                     const month = Number(match[2]) - 1;
@@ -105,7 +105,7 @@ if (! Modal && typeof (require) === 'function') {
                 i = date[4];
                 s = date[5];
             } else {
-                if (! date) {
+                if (!date) {
                     date = new Date();
                 }
                 y = date.getUTCFullYear();
@@ -119,12 +119,14 @@ if (! Modal && typeof (require) === 'function') {
             if (dateOnly === true) {
                 return component.two(y) + '-' + component.two(m) + '-' + component.two(d);
             } else {
-                return component.two(y) + '-' + component.two(m) + '-' + component.two(d) + ' ' + component.two(h) + ':' + component.two(i) + ':' + component.two(s);
+                return (
+                    component.two(y) + '-' + component.two(m) + '-' + component.two(d) + ' ' + component.two(h) + ':' + component.two(i) + ':' + component.two(s)
+                );
             }
-        }
+        };
 
         component.toArray = function (value) {
-            let date = value.split(((value.indexOf('T') !== -1) ? 'T' : ' '));
+            let date = value.split(value.indexOf('T') !== -1 ? 'T' : ' ');
             let time = date[1];
 
             date = date[0].split('-');
@@ -140,14 +142,14 @@ if (! Modal && typeof (require) === 'function') {
                 i = parseInt(time[1]);
             }
             return [y, m, d, h, i, 0];
-        }
+        };
 
-        component.arrayToStringDate = function(arr) {
+        component.arrayToStringDate = function (arr) {
             return component.toString(arr, false);
-        }
+        };
 
-        component.dateToNum = function(jsDate) {
-            if (typeof(jsDate) === 'string') {
+        component.dateToNum = function (jsDate) {
+            if (typeof jsDate === 'string') {
                 jsDate = new Date(jsDate + '  GMT+0');
             }
             let jsDateInMilliseconds = jsDate.getTime();
@@ -157,9 +159,9 @@ if (! Modal && typeof (require) === 'function') {
             jsDateInMilliseconds -= excelInitialTime;
 
             return jsDateInMilliseconds / millisecondsPerDay;
-        }
+        };
 
-        component.numToDate = function(excelSerialNumber, asArray) {
+        component.numToDate = function (excelSerialNumber, asArray) {
             // allow 0; only bail on null/undefined/empty
             if (excelSerialNumber === null || excelSerialNumber === undefined || excelSerialNumber === '') {
                 return '';
@@ -196,10 +198,10 @@ if (! Modal && typeof (require) === 'function') {
             ];
 
             return asArray ? arr : component.toString(arr, false);
-        }
+        };
 
         component.prettify = function (d, texts) {
-            if (! texts) {
+            if (!texts) {
                 texts = {
                     justNow: 'Just now',
                     xMinutesAgo: '{0}m ago',
@@ -208,7 +210,7 @@ if (! Modal && typeof (require) === 'function') {
                     xWeeksAgo: '{0}w ago',
                     xMonthsAgo: '{0} mon ago',
                     xYearsAgo: '{0}y ago',
-                }
+                };
             }
 
             if (d.indexOf('GMT') === -1 && d.indexOf('Z') === -1) {
@@ -221,24 +223,29 @@ if (! Modal && typeof (require) === 'function') {
 
             const format = (t, o) => {
                 return t.replace('{0}', o);
-            }
+            };
 
-            if (! total) {
+            if (!total) {
                 return texts.justNow;
             } else if (total < 90) {
                 return format(texts.xMinutesAgo, total);
-            } else if (total < 1440) { // One day
+            } else if (total < 1440) {
+                // One day
                 return format(texts.xHoursAgo, Math.round(total / 60));
-            } else if (total < 20160) { // 14 days
+            } else if (total < 20160) {
+                // 14 days
                 return format(texts.xDaysAgo, Math.round(total / 1440));
-            } else if (total < 43200) { // 30 days
+            } else if (total < 43200) {
+                // 30 days
                 return format(texts.xWeeksAgo, Math.round(total / 10080));
-            } else if (total < 1036800) { // 24 months
+            } else if (total < 1036800) {
+                // 24 months
                 return format(texts.xMonthsAgo, Math.round(total / 43200));
-            } else { // 24 months+
+            } else {
+                // 24 months+
                 return format(texts.xYearsAgo, Math.round(total / 525600));
             }
-        }
+        };
 
         component.prettifyAll = function () {
             let elements = document.querySelectorAll('.prettydate');
@@ -253,7 +260,7 @@ if (! Modal && typeof (require) === 'function') {
                     }
                 }
             }
-        }
+        };
 
         // Compatibility with jSuites
         component.now = component.toString;
@@ -261,17 +268,17 @@ if (! Modal && typeof (require) === 'function') {
         const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
         const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
-        const translate = function(t) {
-            if (typeof(document) !== "undefined" && document.dictionary) {
+        const translate = function (t) {
+            if (typeof document !== 'undefined' && document.dictionary) {
                 return document.dictionary[t] || t;
             } else {
                 return t;
             }
-        }
+        };
 
         Object.defineProperty(component, 'weekdays', {
             get: function () {
-                return weekdays.map(function(v) {
+                return weekdays.map(function (v) {
                     return translate(v);
                 });
             },
@@ -279,15 +286,15 @@ if (! Modal && typeof (require) === 'function') {
 
         Object.defineProperty(component, 'weekdaysShort', {
             get: function () {
-                return weekdays.map(function(v) {
-                    return translate(v).substring(0,3);
+                return weekdays.map(function (v) {
+                    return translate(v).substring(0, 3);
                 });
             },
         });
 
         Object.defineProperty(component, 'months', {
             get: function () {
-                return months.map(function(v) {
+                return months.map(function (v) {
                     return translate(v);
                 });
             },
@@ -295,8 +302,8 @@ if (! Modal && typeof (require) === 'function') {
 
         Object.defineProperty(component, 'monthsShort', {
             get: function () {
-                return months.map(function(v) {
-                    return translate(v).substring(0,3);
+                return months.map(function (v) {
+                    return translate(v).substring(0, 3);
                 });
             },
         });
@@ -2880,6 +2887,9 @@ if (! Modal && typeof (require) === 'function') {
         return Component;
     }());
 
+    // Aditional Helpers
+    Helpers.getDate = Mask.getDate;
+
     const isNumber = function (num) {
         if (typeof(num) === 'string') {
             num = num.trim();
@@ -3154,13 +3164,26 @@ if (! Modal && typeof (require) === 'function') {
             // Update the headers of the calendar
             let value = d.toISOString().substring(0,10).split('-');
             let time = d.toISOString().substring(11,19).split(':');
-            // Update the month label
-            self.month = Helpers.months[parseInt(value[1])-1];
-            // Update the year label
-            self.year = parseInt(value[0]);
-            // Hour
-            self.hour = parseInt(time[0]);
-            self.minute = parseInt(time[1]);
+            let month = Helpers.months[parseInt(value[1])-1];
+            let year = parseInt(value[0]);
+            let hour = parseInt(time[0]);
+            let minute = parseInt(time[1]);
+
+            if (self.month !== month) {
+                // Update the month label
+                self.month = month;
+            }
+            if (self.year !== year) {
+                // Update the year label
+                self.year = year;
+
+            }
+            if (self.hour !== hour) {
+                self.hour = hour;
+            }
+            if (self.minute !== minute) {
+                self.minute = minute;
+            }
 
             // Load data
             if (! self.view) {
@@ -3360,7 +3383,7 @@ if (! Modal && typeof (require) === 'function') {
 
         const renderValue = function() {
             let value = null;
-            if (self.range) {
+            if (self.range === true) {
                 if (Array.isArray(self.rangeValues)) {
                     if (self.numeric) {
                         value = self.rangeValues;
@@ -3381,7 +3404,7 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         const updateValue = function(v) {
-            if (self.range) {
+            if (self.range === true) {
                 if (v) {
                     if (! Array.isArray(v)) {
                         v = v.toString().split(',');
@@ -3441,7 +3464,7 @@ if (! Modal && typeof (require) === 'function') {
             let input = getInput();
             let value = self.value;
             if (input) {
-                let v;
+                let v = value;
                 if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
                     isEditable = !input.hasAttribute('readonly') && !input.hasAttribute('disabled');
                     v = input.value;
@@ -3450,9 +3473,21 @@ if (! Modal && typeof (require) === 'function') {
                     v = input.textContent;
                 }
 
-                let tmp = Mask.extractDateFromString(v, self.format);
-                if (tmp) {
-                    value = tmp;
+                let ret = v;
+                if (ret && Number(ret) == ret) {
+                    ret = Helpers.numToDate(ret);
+                }
+
+                // Try a formatted date
+                if (ret && ! Helpers.isValidDateFormat(ret)) {
+                    let tmp = Mask.extractDateFromString(ret, self.format);
+                    if (tmp) {
+                        ret = tmp;
+                    }
+                }
+
+                if (ret !== value) {
+                    value = ret;
                 }
             }
 
@@ -3687,42 +3722,46 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         self.setValue = function(v) {
-            // Destroy range
-            destroyRange();
-            // Update the internal controllers
-            updateValue(v);
             // Events
             if (v !== self.value) {
                 // Update value
                 self.value = v;
-                // Events
-                Dispatch.call(self, change, 'change', {
-                    instance: self,
-                    value: self.value,
-                });
-                // Update input
-                let input = getInput();
-                if (input) {
-                    if (self.format && v) {
-                        if (self.range) {
-                            if (v[0]) {
-                                v[0] = Mask.render(v[0], self.format);
-                            }
-                            if (v[1]) {
-                                v[1] = Mask.render(v[1], self.format);
-                            }
-                        } else {
-                            v = Mask.render(v, self.format);
+            }
+        }
+
+        const dispatchOnChangeEvent = function() {
+            // Destroy range
+            destroyRange();
+            // Update the internal controllers
+            updateValue(self.value);
+            // Events
+            Dispatch.call(self, change, 'change', {
+                instance: self,
+                value: self.value,
+            });
+            // Update input
+            let input = getInput();
+            if (input) {
+                let v = self.value;
+                if (self.format && v) {
+                    if (self.range === true) {
+                        if (v[0]) {
+                            v[0] = Mask.render(v[0], self.format);
+                        }
+                        if (v[1]) {
+                            v[1] = Mask.render(v[1], self.format);
                         }
+                    } else {
+                        v = Mask.render(v, self.format);
                     }
-                    // Update input value
-                    input.value = v;
-                    // Dispatch event
-                    Dispatch.call(input, null, 'change', {
-                        instance: self,
-                        value: self.value,
-                    });
                 }
+                // Update input value
+                input.value = v;
+                // Dispatch event
+                Dispatch.call(input, null, 'change', {
+                    instance: self,
+                    value: self.value,
+                });
             }
         }
 
@@ -3734,6 +3773,8 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
+        self.helpers = Helpers;
+
         onchange(function(prop) {
             if (prop === 'view') {
                 if (typeof(views[self.view]) === 'function') {
@@ -3741,12 +3782,18 @@ if (! Modal && typeof (require) === 'function') {
                     self.options = views[self.view].call(self, date);
                 }
             } else if (prop === 'value') {
-                self.setValue(self.value);
+                dispatchOnChangeEvent();
             } else if (prop === 'startingDay') {
-                self.weekdays = getWeekdays(self.startingDay);
+                self.weekdays = getWeekdays(self.startingDay ?? 0);
             }
         });
 
+        // Input
+        if (self.input === 'auto') {
+            self.input = document.createElement('input');
+            self.input.type = 'text';
+        }
+
         onload(function() {
             if (self.type !== "inline") {
                 // Create modal instance
@@ -3769,11 +3816,11 @@ if (! Modal && typeof (require) === 'function') {
                  self.range = true;
             }
 
+            let ret;
+
             // Create input controls
             if (self.input && self.initInput !== false) {
-                if (self.input === 'auto') {
-                    self.input = document.createElement('input');
-                    self.input.type = 'text';
+                if (! self.input.parentNode) {
                     self.el.parentNode.insertBefore(self.input, self.el);
                 }
 
@@ -3797,13 +3844,21 @@ if (! Modal && typeof (require) === 'function') {
                     if (self.value) {
                         input.value = self.value;
                     } else if (input.value && input.value !== self.value) {
-                        self.value = input.value;
+                        // Correct format
+                        if (self.format) {
+                            input.value = Helpers.getDate(input.value, self.format);
+                        }
+                        ret = input.value;
                     }
                 }
             }
 
             // Update the internal date values
-            updateValue(self.value);
+            if (ret) {
+                self.value = ret;
+            } else {
+                updateValue(self.value);
+            }
 
             /**
              * Handler keyboard
@@ -3886,7 +3941,7 @@ if (! Modal && typeof (require) === 'function') {
         const hours = views.hours();
         const minutes = views.minutes();
 
-        return render => render`<div class="lm-calendar" :value="self.value" data-grid="{{self.grid}}" data-type="{{self.type}}" data-disabled="{{self.disabled}}">
+        return render => render`<div class="lm-calendar" :value="self.value" data-grid="{{self.grid}}" data-type="{{self.type}}" data-disabled="{{self.disabled}}" data-starting-day="{{self.startingDay}}">
             <div class="lm-calendar-options">
                 <button type="button" onclick="self.reset">${T('Reset')}</button>
                 <button type="button" onclick="${update}">${T('Done')}</button>
@@ -3907,7 +3962,7 @@ if (! Modal && typeof (require) === 'function') {
                 </div>
                 <div class="lm-calendar-footer" data-visible="{{self.footer}}">
                     <div class="lm-calendar-time" data-visible="{{self.time}}"><select :loop="${hours}" :bind="self.hour" class="lm-calendar-control"><option value="{{self.value}}">{{self.title}}</option></select>:<select :loop="${minutes}" :bind="self.minute" class="lm-calendar-control"><option value="{{self.value}}">{{self.title}}</option></select></div>
-                    <div class="lm-calendar-update"><input type="button" value="${T('Update')}" onclick="${update}" class="lm-ripple"></div>
+                    <div class="lm-calendar-update"><input type="button" value="${T('Update')}" onclick="${update}" class="lm-ripple lm-input"></div>
                 </div>
             </div>
         </div>`

package/dist/style.css

@@ -69,6 +69,7 @@
     padding: 4px;
     background-color: transparent;
     font-weight: bold;
+    color: var(--lm-font-color);
 }
 
 .lm-calendar-navigation {
@@ -78,7 +79,7 @@
 }
 
 .lm-calendar-navigation i:hover {
-    background-color: var(--lm-background-color-hover, #ebebeb);
+    background-color: var(--lm-background-color-highlight, #ebebeb);
     color: #000;
 }
 
@@ -243,8 +244,6 @@
 }
 
 .lm-calendar-footer input {
-    border: transparent;
-    padding: 8px;
     width: 100%;
     cursor: pointer;
     background-color: var(--lm-border-color-light, #e9e9e9);
@@ -325,7 +324,7 @@
 }
 
 .lm-ripple:hover {
-    background: var(--lm-background-color-hover, #ebebeb) radial-gradient(circle, transparent 1%, var(--lm-background-color-hover, #ebebeb) 1%) center/15000%;
+    background: var(--lm-background-color-highlight, #ebebeb) radial-gradient(circle, transparent 1%, var(--lm-background-color-highlight, #ebebeb) 1%) center/15000%;
 }
 
 .lm-ripple:active {

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^5.2.0",
-        "@lemonadejs/modal": "^5.2.0"
+        "lemonadejs": "^5.3.1",
+        "@lemonadejs/modal": "^5.3.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.2.1"
+    "version": "5.3.0"
 }