@lemonadejs/calendar 3.3.1 → 3.4.0

package/dist/index.d.ts

@@ -17,11 +17,15 @@ declare namespace Calendar {
         /** Calendar value will be a excel-like number or a ISO string. Default false */
         numeric?: boolean;
         /** Bind the calendar to na HTML input element */
-        input?: HTMLElement;
+        input?: HTMLElement | object;
         /** Onchange event */
-        onchange: (self: object, value: string) => void;
+        onchange?: (self: object, value: string) => void;
         /** On update event */
-        onupdate: (self: object, value: string) => void;
+        onupdate?: (self: object, value: string) => void;
+        /** Footer **/
+        footer?: boolean;
+        /** Show hour and minute picker **/
+        time?: boolean;
     }
 
     interface Instance {

package/dist/index.js

@@ -590,6 +590,14 @@ if (! Modal && typeof (require) === 'function') {
             setDate(d);
         }
 
+        const getInput = function() {
+            let input = self.input;
+            if (input && input.current) {
+                input = input.current;
+            }
+            return input;
+        }
+
         const applyValue = function(reset) {
             if (reset) {
                 self.value = '';
@@ -599,7 +607,8 @@ if (! Modal && typeof (require) === 'function') {
                 self.value = renderValue();
             }
             if (self.input) {
-                self.input.value = self.value;
+                let input = getInput();
+                input.value = self.value;
             }
         }
 
@@ -662,10 +671,11 @@ if (! Modal && typeof (require) === 'function') {
          */
         self.open = function(e) {
             if (self.modal && self.modal.closed) {
+                let input = getInput();
                 // Open modal
                 self.modal.closed = false;
                 // Set the focus on the content to use the keyboard
-                if (! (self.input && e.target.getAttribute('readonly') === null)) {
+                if (! (input && e.target.getAttribute('readonly') === null)) {
                     self.content.focus();
                 }
 
@@ -726,7 +736,8 @@ if (! Modal && typeof (require) === 'function') {
             self.value = v;
             // Update input
             if (self.input) {
-                self.input.value = self.value;
+                let input = getInput();
+                input.value = self.value;
             }
         }
 
@@ -771,16 +782,17 @@ if (! Modal && typeof (require) === 'function') {
 
             // Create input controls
             if (self.input) {
-                self.input.classList.add('lm-calendar-input');
-                self.input.addEventListener('focus', self.open);
-                self.input.addEventListener('click', self.open);
-                self.input.addEventListener('blur', blur);
+                let input = getInput();
+                input.classList.add('lm-calendar-input');
+                input.addEventListener('focus', self.open);
+                input.addEventListener('click', self.open);
+                input.addEventListener('blur', blur);
 
                 // Retrieve the value
                 if (self.value) {
-                    self.input.value = self.value;
-                } else if (self.input.value) {
-                    self.value = self.input.value;
+                    input.value = self.value;
+                } else if (input.value) {
+                    self.value = input.value;
                 }
             }
 
@@ -825,6 +837,7 @@ if (! Modal && typeof (require) === 'function') {
                 } else {
                     self.next();
                 }
+                e.preventDefault();
             });
 
             /**
@@ -839,7 +852,8 @@ if (! Modal && typeof (require) === 'function') {
 
             // Create event for focus out
             self.el.addEventListener("focusout", (e) => {
-                if (e.relatedTarget !== self.input && ! self.el.contains(e.relatedTarget)) {
+                let input = getInput();
+                if (e.relatedTarget !== input && ! self.el.contains(e.relatedTarget)) {
                     self.close();
                 }
             });
@@ -861,9 +875,9 @@ if (! Modal && typeof (require) === 'function') {
                 <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" 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="lm-ripple"></div>
+                <div class="lm-calendar-footer" data-visible="{{self.footer}}">
+                    <div class="lm-calendar-time" data-visible="{{self.time}}"><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 class="lm-calendar-update"><input type="button" value="Update" onclick="self.update" class="lm-ripple"></div>
                 </div>
             </div>
         </div>`

package/dist/style.css

@@ -53,7 +53,7 @@
 }
 
 .lm-calendar-header .lm-calendar-labels > button {
-    font-size: 1.3em;
+    font-size: 1.2em;
     border: 0;
     padding: 4px;
     background-color: transparent;
@@ -173,7 +173,7 @@
     right: 0;
     top: 8px;
     bottom: 8px;
-    background-color: var(--lm-main-color-alpha, #2196f3);
+    background-color: var(--lm-main-color-alpha, #2196f388);
 }
 
 .lm-calendar-content > div[data-start="true"]::before {
@@ -196,6 +196,10 @@
     border-top: 1px solid var(--lm-border-color, #ccc);
 }
 
+.lm-calendar-footer[data-visible="false"] {
+    display: none;
+}
+
 .lm-calendar-footer select {
     border: 0;
     background-color: transparent;
@@ -225,6 +229,10 @@
     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;
 }
 
+.lm-calendar-time[data-visible="false"] {
+    display: none;
+}
+
 .lm-ripple {
     background-position: center;
     transition: background 0.8s;

package/package.json

@@ -15,9 +15,9 @@
     ],
     "dependencies": {
         "lemonadejs": "^4.2.2",
-        "@lemonadejs/modal": "^2.8.0"
+        "@lemonadejs/modal": "^2.8.1"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.3.1"
+    "version": "3.4.0"
 }