@lemonadejs/calendar 3.4.0 → 3.4.2

package/dist/index.d.ts

@@ -17,15 +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 | object;
-        /** 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,26 +590,32 @@ if (! Modal && typeof (require) === 'function') {
             setDate(d);
         }
 
+        let autoInput = null;
+
         const getInput = function() {
             let input = self.input;
             if (input && input.current) {
                 input = input.current;
-            }
-            return input;
-        }
-
-        const applyValue = function(reset) {
-            if (reset) {
-                self.value = '';
-                destroyRange();
             } else {
-                // Set the internal value
-                self.value = renderValue();
-            }
-            if (self.input) {
-                let input = getInput();
-                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;
         }
 
         /**
@@ -678,12 +684,11 @@ if (! Modal && typeof (require) === 'function') {
                 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);
             }
         }
 
@@ -700,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();
         }
 
@@ -728,16 +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) {
                 let input = getInput();
-                input.value = self.value;
+                input.value = v;
+            }
+
+            if (v !== self.value) {
+                // Update value
+                self.value = v;
             }
         }
 
@@ -754,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();
@@ -788,14 +802,21 @@ if (! Modal && typeof (require) === 'function') {
                 input.addEventListener('click', self.open);
                 input.addEventListener('blur', blur);
 
+                if (self.onChange) {
+                    input.addEventListener('change', self.onChange);
+                }
+
                 // Retrieve the value
                 if (self.value) {
                     input.value = self.value;
-                } else if (input.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
@@ -861,14 +882,17 @@ 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>

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/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.4.0"
+    "version": "3.4.2"
 }