@lemonadejs/calendar 3.2.1 → 3.3.1

package/README.md

@@ -84,5 +84,5 @@ The LemonadeJS [Reactive JavaScript Calendar](https://lemonadejs.net) is release
 
 ## Other Tools
 
--   [jSuites JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
--   [Jspreadsheet](https://jspreadsheet.com/)
+-   [jSuites Plugins - JavaScript Calendar](https://jsuites.net/docs/javascript-calendar)
+-   [Jspreadsheet - JavaScript Spreadsheet](https://jspreadsheet.com/)

package/dist/index.js

@@ -78,6 +78,13 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
+    const isNumber = function (num) {
+        if (typeof(num) === 'string') {
+            num = num.trim();
+        }
+        return !isNaN(num) && num !== null && num !== '';
+    }
+
     const arrayToStringDate = function(arr) {
         return [arr[0],Two(arr[1]),Two(arr[2])].join('-');
     }
@@ -162,15 +169,16 @@ if (! Modal && typeof (require) === 'function') {
                     if (data && data[d]) {
                         item.data = data[d];
                     }
-                    // Select cursor
-                    if (this.cursor.y === year && this.cursor.m === month && this.cursor.d === day) {
-                        // Select item
-                        item.selected = true;
-                        // Cursor
-                        this.cursor.index = result.length - 1;
-                    }
                 }
-
+                // Month
+                let m = tmp.getMonth();
+                // Select cursor
+                if (this.cursor.y === year && this.cursor.m === m && this.cursor.d === day) {
+                    // Select item
+                    item.selected = true;
+                    // Cursor
+                    this.cursor.index = result.length - 1;
+                }
                 // Select range
                 if (this.range && this.rangeValues) {
                     // Mark the start and end points
@@ -315,6 +323,13 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
+        const getDate = function() {
+            let v = [ self.cursor.y, self.cursor.m, self.cursor.d ];
+            let d = new Date(Date.UTC(...v));
+            // Update the headers of the calendar
+            return d.toISOString().substring(0, 10);
+        }
+
         /**
          * Set the internal cursor
          * @param {object} s
@@ -341,6 +356,11 @@ if (! Modal && typeof (require) === 'function') {
                 // New cursor
                 self.cursor.index = self.options.indexOf(s);
             }
+
+            if (typeof (self.onupdate) === 'function') {
+                self.onupdate(self, renderValue());
+            }
+
             return d;
         }
 
@@ -456,11 +476,11 @@ if (! Modal && typeof (require) === 'function') {
          */
         const setRange = function(s) {
             if (self.view === 'days' && self.range) {
-                let d = self.getValue();
+                let d = getDate();
                 // Date to number
                 let number = dateToNum(d);
                 // Start a new range
-                if (self.rangeValues && (self.rangeValues[0] > number || self.rangeValues[1])) {
+                if (self.rangeValues && (self.rangeValues[0] >= number || self.rangeValues[1])) {
                     destroyRange();
                 }
                 // Range
@@ -491,7 +511,7 @@ if (! Modal && typeof (require) === 'function') {
                             // Item number
                             let v = self.options[i].number;
                             // Update property condition
-                            self.options[i].range = v > self.rangeValues[0] && v <= number;
+                            self.options[i].range = v >= self.rangeValues[0] && v <= number;
                         }
                     }
                 }
@@ -510,32 +530,77 @@ if (! Modal && typeof (require) === 'function') {
             self.rangeValues = null;
         }
 
-        const setValue = function(reset) {
-            if (reset) {
-                self.value = '';
-                self.input.value = '';
-                destroyRange();
+        const renderValue = function() {
+            let value = null;
+            if (self.range) {
+                if (Array.isArray(self.rangeValues)) {
+                    if (self.numeric) {
+                        value = self.rangeValues;
+                    } else {
+                        value = [
+                            numToDate(self.rangeValues[0], true),
+                            numToDate(self.rangeValues[1], true)
+                        ];
+                    }
+                }
             } else {
-                if (self.range) {
-                    self.value = self.rangeValues[0];
-                    if (self.input) {
-                        if (self.numeric) {
-                            self.input.value = self.rangeValues;
-                        } else {
-                            self.input.value = [numToDate(self.rangeValues[0], true), numToDate(self.rangeValues[1], true)];
-                        }
+                value = getDate();
+                if (self.numeric) {
+                    value = dateToNum(value);
+                }
+            }
+            return value;
+        }
+
+        const updateValue = function(v) {
+            if (self.range) {
+                if (v) {
+                    if (! Array.isArray(v)) {
+                        v = v.split(',');
                     }
-                } else {
-                    self.value = self.getValue();
-                    if (self.input) {
-                        if (self.numeric) {
-                            self.input.value = dateToNum(self.value);
-                        } else {
-                            self.input.value = self.value;
-                        }
+                    self.rangeValues = v;
+
+                    if (v[0] && typeof(v[0]) === 'string' && v[0].indexOf('-')) {
+                        self.rangeValues[0] = dateToNum(v[0]);
+                    }
+                    if (v[1] && typeof(v[1]) === 'string' && v[1].indexOf('-')) {
+                        self.rangeValues[1] = dateToNum(v[1]);
                     }
+
+                    v = v[0];
                 }
             }
+
+            let d;
+            if (v) {
+                v = isNumber(v) ? numToDate(v, true) : v;
+                d = new Date(v);
+            }
+            // if no date is defined
+            if (! isValidDate(d)) {
+                d = new Date();
+            }
+            // Update my index
+            self.cursor = {
+                y: d.getFullYear(),
+                m: d.getMonth(),
+                d: d.getDate(),
+            };
+            // Update the internal calendar date
+            setDate(d);
+        }
+
+        const applyValue = function(reset) {
+            if (reset) {
+                self.value = '';
+                destroyRange();
+            } else {
+                // Set the internal value
+                self.value = renderValue();
+            }
+            if (self.input) {
+                self.input.value = self.value;
+            }
         }
 
         /**
@@ -546,19 +611,24 @@ if (! Modal && typeof (require) === 'function') {
         self.select = function(e, item) {
             // Update cursor generic
             let value = setCursor(item);
-            // Update range
-            setRange(item);
             // Based where was the click
-            if (! (self.view === 'days' && ! item.grey)) {
+            if (self.view !== 'days') {
                 // Update the internal date
                 setDate(value);
-            }
-            // Go back to the view of days
-            if (self.view !== 'days') {
+                // Back to the days
                 self.view = 'days';
             }
         }
 
+        self.selectRange = function(e, item) {
+            if (self.view === 'days' && self.range === true) {
+                // Update cursor generic
+                setCursor(item);
+                // Update range
+                setRange(item);
+            }
+        }
+
         /**
          * Next handler
          * @param {object?} e mouse event
@@ -598,6 +668,12 @@ if (! Modal && typeof (require) === 'function') {
                 if (! (self.input && e.target.getAttribute('readonly') === null)) {
                     self.content.focus();
                 }
+
+                // Update the internal date values
+                updateValue(self.value);
+                // Populate components
+                self.hours = views.hours();
+                self.minutes = views.minutes();
             }
         }
 
@@ -608,16 +684,18 @@ if (! Modal && typeof (require) === 'function') {
             if (self.modal && self.modal.closed === false) {
                 // Close modal
                 self.modal.closed = true;
+                // Cancel range events
+                destroyRange();
             }
         }
 
         self.reset = function() {
-            setValue(true);
+            applyValue(true);
             self.close();
         }
 
         self.update = function() {
-            setValue();
+            applyValue();
             self.close();
         }
 
@@ -636,10 +714,20 @@ if (! Modal && typeof (require) === 'function') {
          * @returns {string}
          */
         self.getValue = function() {
-            let v = [ self.cursor.y, self.cursor.m, self.cursor.d ];
-            let d = new Date(Date.UTC(...v));
-            // Update the headers of the calendar
-            return d.toISOString().substring(0,10);
+            return self.value;
+        }
+
+        self.setValue = function(v) {
+            // Destroy range
+            destroyRange();
+            // Update the internal controllers
+            updateValue(v);
+            // Update value
+            self.value = v;
+            // Update input
+            if (self.input) {
+                self.input.value = self.value;
+            }
         }
 
         self.onchange = function(prop) {
@@ -649,11 +737,10 @@ if (! Modal && typeof (require) === 'function') {
                     self.options = views[self.view].call(self, date);
                 }
             } else if (prop === 'value') {
-                // TODO: onchange only when the component value really changes
-                if (typeof(onchange) === 'function') {
+                if (typeof (onchange) === 'function') {
                     onchange(self, self.value);
                 }
-                if (typeof(self.onupdate) === 'function') {
+                if (typeof (self.onupdate) === 'function') {
                     self.onupdate(self, self.value);
                 }
             } else if (prop === 'options') {
@@ -662,27 +749,12 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         self.onload = function() {
-            let d;
-            if (self.value) {
-                d = new Date(self.value);
-            }
-            // if no date is defined
-            if (! isValidDate(d)) {
-                d = new Date();
-            }
-            // Update my index
-            self.cursor = {
-                y: d.getFullYear(),
-                m: d.getMonth(),
-                d: d.getDate(),
-            };
+            // Update the internal date values
+            updateValue(self.value);
             // Populate components
             self.hours = views.hours();
             self.minutes = views.minutes();
 
-            // Update the internal calendar date
-            setDate(d);
-
             if (self.type !== "inline") {
                 // Create modal instance
                 self.modal = {
@@ -728,6 +800,7 @@ if (! Modal && typeof (require) === 'function') {
                     // Current view
                     let view = self.view;
                     // Select
+                    self.selectRange(e, self.options[self.cursor.index]);
                     self.select(e, self.options[self.cursor.index]);
                     // If is range do something different
                     if (view === 'days' && ! self.range) {
@@ -772,8 +845,8 @@ if (! Modal && typeof (require) === 'function') {
             });
         }
 
-        return `<div class="lm-calendar">
-                <div class="lm-calendar-options">
+        return `<div class="lm-calendar" :value="self.value">
+            <div class="lm-calendar-options">
                 <button onclick="self.reset">Reset</button>
                 <button onclick="self.update">Done</button>
             </div>
@@ -781,16 +854,16 @@ if (! Modal && typeof (require) === 'function') {
                 <div class="lm-calendar-header">
                     <div>
                         <div class="lm-calendar-labels"><button onclick="self.setView" data-view="months">{{self.month}}</button> <button onclick="self.setView" data-view="years">{{self.year}}</button></div> 
-                        <div class="lm-calendar-navigation"><button type="button" class="material-icons ripple" onclick="self.prev" tabindex="0">arrow_drop_up</button> <button type="button" class="material-icons ripple" onclick="self.next" tabindex="0">arrow_drop_down</button></div>
+                        <div class="lm-calendar-navigation"><button type="button" class="material-icons lm-ripple" onclick="self.prev" tabindex="0">arrow_drop_up</button> <button type="button" class="material-icons lm-ripple" onclick="self.next" tabindex="0">arrow_drop_down</button></div>
                     </div>
                     <div class="lm-calendar-weekdays" :loop="self.weekdays"><div>{{self.title}}</div></div>
                 </div>
                 <div class="lm-calendar-content" :loop="self.options" tabindex="0" :ref="self.content">
-                    <div data-start="{{self.start}}" data-end="{{self.end}}" data-range="{{self.range}}" data-event="{{self.data}}" data-grey="{{self.grey}}" data-bold="{{self.bold}}" data-selected="{{self.selected}}" onclick="self.parent.select">{{self.title}}</div>
+                    <div data-start="{{self.start}}" data-end="{{self.end}}" data-range="{{self.range}}" data-event="{{self.data}}" data-grey="{{self.grey}}" data-bold="{{self.bold}}" data-selected="{{self.selected}}" onclick="self.parent.select" onmousedown="self.parent.selectRange">{{self.title}}</div>
                 </div>
                 <div class="lm-calendar-footer">
                     <div><select :loop="self.hours"><option value="{{self.value}}">{{self.title}}</option></select>:<select :loop="self.minutes"><option value="{{self.value}}">{{self.title}}</option></select></div>
-                    <div><input type="button" value="Update" onclick="self.update" class="ripple"></div>
+                    <div><input type="button" value="Update" onclick="self.update" class="lm-ripple"></div>
                 </div>
             </div>
         </div>`

package/dist/style.css

@@ -1,3 +1,13 @@
+.lm-calendar {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    position: relative;
+}
+
 .lm-calendar .lm-modal {
     min-width: initial;
     min-height: initial;
@@ -10,7 +20,7 @@
 .lm-modal > div > .lm-calendar-options {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--lm-border-color, #ccc);
 }
 
 .lm-modal > div > .lm-calendar-options button {
@@ -43,22 +53,22 @@
 }
 
 .lm-calendar-header .lm-calendar-labels > button {
-    font-size: 1.2em;
+    font-size: 1.3em;
     border: 0;
-    padding: 2px;
-    margin: 2px;
-    background-color: #fff;
+    padding: 4px;
+    background-color: transparent;
 }
 
 .lm-calendar-navigation button {
     cursor: pointer;
-    padding: 5px;
+    padding: 8px;
     border: 0;
     border-radius: 24px;
 }
 
 .lm-calendar-navigation i:hover {
-    background-color: #eee;
+    background-color: var(--lm-background-color-hover, #ebebeb);
+    color: #000;
 }
 
 .lm-calendar-weekdays {
@@ -107,6 +117,7 @@
 .lm-calendar-container[data-view="months"] .lm-calendar-content {
     grid-template-columns: repeat(4, 1fr);
 }
+
 .lm-calendar-container[data-view="years"] .lm-calendar-content {
     grid-template-columns: repeat(4, 1fr);
 }
@@ -132,6 +143,7 @@
 .lm-calendar-content > div[data-selected="true"] {
     font-weight: bold;
     background-color: #eee;
+    color: #000;
 }
 
 .lm-calendar-content:focus > div[data-selected="true"] {
@@ -141,6 +153,7 @@
 
 .lm-calendar-content > div:hover {
     background-color: #eee;
+    color: #000;
 }
 
 .lm-calendar-content > div[data-range="true"] {
@@ -149,7 +162,8 @@
 
 .lm-calendar-content > div[data-start="true"],
 .lm-calendar-content > div[data-end="true"] {
-    background-color: #78D350;
+    background-color: var(--lm-main-color, #2196f3);
+    color: initial;
 }
 
 .lm-calendar-content > div[data-range="true"]::before {
@@ -159,7 +173,7 @@
     right: 0;
     top: 8px;
     bottom: 8px;
-    background-color: #78D35050;
+    background-color: var(--lm-main-color-alpha, #2196f3);
 }
 
 .lm-calendar-content > div[data-start="true"]::before {
@@ -179,7 +193,7 @@
     margin: 0 10px 0 10px;
     padding: 8px 0 8px 0;
     line-height: 34px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--lm-border-color, #ccc);
 }
 
 .lm-calendar-footer select {
@@ -191,20 +205,16 @@
     margin: 2px;
     border-radius: 32px;
     font-size: 1.1em;
+    width: initial;
 }
 
 .lm-calendar-footer select:focus {
     background-color: #eee;
 }
 
-.lm-calendar-footer select:hover {
-    background-color: #eee;
-}
-
 .lm-calendar-footer input {
     border: transparent;
     padding: 8px;
-    background-color: #eee;
     width: 100%;
     cursor: pointer;
 }
@@ -212,20 +222,40 @@
 .lm-calendar-input {
     padding-right: 24px !important;
     box-sizing: border-box;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z"/></svg>') top 50% right 0 no-repeat, content-box;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" fill="gray" /></svg>') top 50% right 1px no-repeat;
 }
 
-.ripple {
+.lm-ripple {
     background-position: center;
     transition: background 0.8s;
 }
 
-.ripple:hover {
-    background: #E0E0E0 radial-gradient(circle, transparent 1%, #E0E0E0 1%) center/15000%;
+.lm-ripple:hover {
+    background: var(--lm-background-color-hover, #ebebeb) radial-gradient(circle, transparent 1%, var(--lm-background-color-hover, #ebebeb) 1%) center/15000%;
 }
 
-.ripple:active {
-    background-color: #E0E0E0;
+.lm-ripple:active {
+    background-color: var(--lm-background-color-active, #e8e8e8);
     background-size: 100%;
     transition: background 0s;
-}
+}
+
+.lm-dark-mode .lm-calendar-weekdays {
+    color: #aaa;
+}
+
+.lm-dark-mode .lm-calendar-labels > button {
+    background-color: initial;
+}
+
+.lm-dark-mode .lm-calendar-content:focus > div[data-selected="true"] {
+    outline-color: white;
+}
+
+.lm-dark-mode .lm-calendar-content > div[data-grey="true"] {
+    color: var(--lm-font-grayout, #777);
+}
+
+.lm-dark-mode .lm-calendar-footer select:focus {
+    background-color: #3a3a45;
+}

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.1.1",
-        "@lemonadejs/modal": "^2.7.2"
+        "lemonadejs": "^4.2.2",
+        "@lemonadejs/modal": "^2.8.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.2.1"
+    "version": "3.3.1"
 }