@lemonadejs/calendar 3.3.0 → 3.3.1

package/dist/index.js

@@ -533,7 +533,7 @@ if (! Modal && typeof (require) === 'function') {
         const renderValue = function() {
             let value = null;
             if (self.range) {
-                if (self.rangeValues) {
+                if (Array.isArray(self.rangeValues)) {
                     if (self.numeric) {
                         value = self.rangeValues;
                     } else {
@@ -553,6 +553,24 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         const updateValue = function(v) {
+            if (self.range) {
+                if (v) {
+                    if (! Array.isArray(v)) {
+                        v = v.split(',');
+                    }
+                    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;
@@ -593,23 +611,30 @@ 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') {
                 // Update the internal date
                 setDate(value);
-                // Change back to right view
+                // 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
          */
         self.next = function(e) {
-            if (! e || e.type === 'mousedown') {
+            if (! e || e.type === 'click') {
                 // Icon click
                 move(1);
             } else {
@@ -623,7 +648,7 @@ if (! Modal && typeof (require) === 'function') {
          * @param {object?} e mouse event
          */
         self.prev = function(e) {
-            if (! e || e.type === 'mousedown') {
+            if (! e || e.type === 'click') {
                 // Icon click
                 move(-1);
             } else {
@@ -643,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();
             }
         }
 
@@ -653,6 +684,8 @@ if (! Modal && typeof (require) === 'function') {
             if (self.modal && self.modal.closed === false) {
                 // Close modal
                 self.modal.closed = true;
+                // Cancel range events
+                destroyRange();
             }
         }
 
@@ -767,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) {
@@ -812,20 +846,20 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         return `<div class="lm-calendar" :value="self.value">
-                <div class="lm-calendar-options">
+            <div class="lm-calendar-options">
                 <button onclick="self.reset">Reset</button>
                 <button onclick="self.update">Done</button>
             </div>
             <div class="lm-calendar-container" data-view="{{self.view}}">
                 <div class="lm-calendar-header">
                     <div>
-                        <div class="lm-calendar-labels"><button onmousedown="self.setView" data-view="months">{{self.month}}</button> <button onmousedown="self.setView" data-view="years">{{self.year}}</button></div> 
-                        <div class="lm-calendar-navigation"><button type="button" class="material-icons lm-ripple" onmousedown="self.prev" tabindex="0">arrow_drop_up</button> <button type="button" class="material-icons lm-ripple" onmousedown="self.next" tabindex="0">arrow_drop_down</button></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 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}}" onmousedown="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>

package/dist/style.css

@@ -5,6 +5,7 @@
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -ms-user-select: none;
+    position: relative;
 }
 
 .lm-calendar .lm-modal {
@@ -19,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 {
@@ -55,7 +56,7 @@
     font-size: 1.3em;
     border: 0;
     padding: 4px;
-    background-color: #fff;
+    background-color: transparent;
 }
 
 .lm-calendar-navigation button {
@@ -66,7 +67,8 @@
 }
 
 .lm-calendar-navigation i:hover {
-    background-color: #eee;
+    background-color: var(--lm-background-color-hover, #ebebeb);
+    color: #000;
 }
 
 .lm-calendar-weekdays {
@@ -115,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);
 }
@@ -140,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"] {
@@ -149,6 +153,7 @@
 
 .lm-calendar-content > div:hover {
     background-color: #eee;
+    color: #000;
 }
 
 .lm-calendar-content > div[data-range="true"] {
@@ -157,7 +162,7 @@
 
 .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;
 }
 
@@ -168,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 {
@@ -188,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 {
@@ -226,23 +231,15 @@
 }
 
 .lm-ripple:hover {
-    background: #E0E0E0 radial-gradient(circle, transparent 1%, #E0E0E0 1%) center/15000%;
+    background: var(--lm-background-color-hover, #ebebeb) radial-gradient(circle, transparent 1%, var(--lm-background-color-hover, #ebebeb) 1%) center/15000%;
 }
 
 .lm-ripple:active {
-    background-color: #E0E0E0;
+    background-color: var(--lm-background-color-active, #e8e8e8);
     background-size: 100%;
     transition: background 0s;
 }
 
-.lm-dark-mode .lm-ripple:hover {
-    background-color: #888;
-}
-
-.lm-dark-mode .lm-ripple:active {
-    background-color: #888;
-}
-
 .lm-dark-mode .lm-calendar-weekdays {
     color: #aaa;
 }
@@ -251,21 +248,12 @@
     background-color: initial;
 }
 
-.lm-dark-mode .lm-calendar-content > div[data-selected="true"] {
-    background-color: #444;
-}
-
 .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: #777;
-}
-
-.lm-dark-mode .lm-calendar-content > div:hover {
-    color: white;
-    background-color: #333;
+    color: var(--lm-font-grayout, #777);
 }
 
 .lm-dark-mode .lm-calendar-footer select:focus {

package/package.json

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