@lemonadejs/calendar 3.3.2 → 3.4.2

package/dist/index.d.ts

@@ -17,11 +17,17 @@ 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;
-        /** Onchange event */
-        onchange: (self: object, value: string) => void;
-        /** On update event */
-        onupdate: (self: object, value: string) => void;
+        input?: HTMLElement | object | 'auto';
+        /** Footer **/
+        footer?: boolean;
+        /** Show hour and minute picker **/
+        time?: boolean;
+        /** LemonadeJS on change event */
+        onchange?: (self: object, value: string) => void;
+        /** LemonadeJS on update event */
+        onupdate?: (self: object, value: string) => void;
+        /** React dedicated onChange event */
+        onChange?: (e: Event) => void;
     }
 
     interface Instance {

package/dist/index.js

@@ -558,7 +558,7 @@ if (! Modal && typeof (require) === 'function') {
                     if (! Array.isArray(v)) {
                         v = v.split(',');
                     }
-                    self.rangeValues = v;
+                    self.rangeValues = [...v];
 
                     if (v[0] && typeof(v[0]) === 'string' && v[0].indexOf('-')) {
                         self.rangeValues[0] = dateToNum(v[0]);
@@ -590,17 +590,32 @@ if (! Modal && typeof (require) === 'function') {
             setDate(d);
         }
 
-        const applyValue = function(reset) {
-            if (reset) {
-                self.value = '';
-                destroyRange();
+        let autoInput = null;
+
+        const getInput = function() {
+            let input = self.input;
+            if (input && input.current) {
+                input = input.current;
             } else {
-                // Set the internal value
-                self.value = renderValue();
-            }
-            if (self.input) {
-                self.input.value = self.value;
+                if (input === 'auto') {
+                    if (! autoInput) {
+                        autoInput = document.createElement('input');
+                        autoInput.type = 'text';
+                        if (self.class) {
+                            autoInput.class = self.class;
+                        }
+                        if (self.name) {
+                            autoInput.name = self.name;
+                        }
+                        if (self.placeholder) {
+                            autoInput.placeholder = self.placeholder;
+                        }
+                        self.el.parentNode.insertBefore(autoInput, self.el);
+                    }
+                    input = autoInput;
+                }
             }
+            return input;
         }
 
         /**
@@ -662,18 +677,18 @@ 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();
                 }
-
-                // Update the internal date values
-                updateValue(self.value);
                 // Populate components
                 self.hours = views.hours();
                 self.minutes = views.minutes();
+                // Update the internal date values
+                updateValue(self.value);
             }
         }
 
@@ -690,12 +705,12 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         self.reset = function() {
-            applyValue(true);
+            self.setValue('');
             self.close();
         }
 
         self.update = function() {
-            applyValue();
+            self.setValue(renderValue());
             self.close();
         }
 
@@ -718,15 +733,19 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         self.setValue = function(v) {
-            // Destroy range
-            destroyRange();
             // Update the internal controllers
             updateValue(v);
-            // Update value
-            self.value = v;
+            // Destroy range
+            destroyRange();
             // Update input
             if (self.input) {
-                self.input.value = self.value;
+                let input = getInput();
+                input.value = v;
+            }
+
+            if (v !== self.value) {
+                // Update value
+                self.value = v;
             }
         }
 
@@ -743,14 +762,20 @@ if (! Modal && typeof (require) === 'function') {
                 if (typeof (self.onupdate) === 'function') {
                     self.onupdate(self, self.value);
                 }
+                if (typeof(self.onChange) === 'function') {
+                   let input = getInput();
+                   if (input) {
+                       input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));
+                   }
+                }
+
+                self.setValue(self.value);
             } else if (prop === 'options') {
                 self.content.focus();
             }
         }
 
         self.onload = function() {
-            // Update the internal date values
-            updateValue(self.value);
             // Populate components
             self.hours = views.hours();
             self.minutes = views.minutes();
@@ -771,19 +796,27 @@ 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);
+
+                if (self.onChange) {
+                    input.addEventListener('change', self.onChange);
+                }
 
                 // 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 && input.value !== self.value) {
+                    self.value = input.value;
                 }
             }
 
+            // Update the internal date values
+            updateValue(self.value);
+
             /**
              * Handler keyboard
              * @param {object} e - event
@@ -825,6 +858,7 @@ if (! Modal && typeof (require) === 'function') {
                 } else {
                     self.next();
                 }
+                e.preventDefault();
             });
 
             /**
@@ -839,7 +873,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();
                 }
             });
@@ -847,23 +882,26 @@ if (! Modal && typeof (require) === 'function') {
 
         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>
+                <button type="button" onclick="self.reset">Reset</button>
+                <button type="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 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 class="lm-calendar-labels"><button type="button" onclick="self.setView" data-view="months">{{self.month}}</button> <button type="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}}" 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/react.js

@@ -2,7 +2,6 @@
 import React, { useRef, useEffect } from "react";
 import Component from './index';
 
-
 // @ts-ignore
 export default React.forwardRef((props, mainReference) => {
     // Dom element
@@ -13,21 +12,27 @@ export default React.forwardRef((props, mainReference) => {
 
     useEffect(() => {
         // @ts-ignore
-        if (!Ref.current.innerHTML) {
-            mainReference.current = Component(Ref.current, options);
-        }
-    }, []);
-
-    useEffect(() => {
-        for (let key in props) {
-            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
-                if (props[key] !== mainReference.current[key]) {
-                    mainReference.current[key] = props[key];
+        if (Ref.current.innerHTML) {
+            for (let key in props) {
+                if (key === 'onchange' || key === 'onload') {
+                    continue;
+                }
+                if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                    if (props[key] !== mainReference.current[key]) {
+                        mainReference.current[key] = props[key];
+                    }
                 }
             }
         }
     }, [props])
 
+    useEffect(() => {
+        // @ts-ignore
+        if (! Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
     let prop = {
         ref: Ref,
         style: { height: '100%', width: '100%' }

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/dist/vue.js

@@ -5,13 +5,13 @@ import component from "./index";
 export default {
     inheritAttrs: false,
     mounted() {
-        let options = {
-            ...this.$attrs
-        };
-
-        this.el = this.$refs.container;
-
-        this.current = component(this.$refs.container, options);
+        this.$nextTick(() => {
+            let options = {
+                ...this.$attrs
+            };
+    
+            this.current = component(this.$refs.container, options);
+        });
     },
     setup() {
         let containerProps = {
@@ -33,10 +33,12 @@ export default {
     },
     methods: {
         updateState() {
-            for (let key in this.$attrs) {
-                if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
-                    if (this.$attrs[key] !== this.current[key]) {
-                        this.current[key] = this.$attrs[key];
+            if (this.current) {
+                for (let key in this.$attrs) {
+                    if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                        if (this.$attrs[key] !== this.current[key]) {
+                            this.current[key] = this.$attrs[key];
+                        }
                     }
                 }
             }

package/package.json

@@ -19,5 +19,5 @@
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.3.2"
+    "version": "3.4.2"
 }