@lemonadejs/calendar 3.4.0 → 3.5.0

package/dist/index.d.ts

@@ -10,6 +10,8 @@ declare namespace Calendar {
     interface Options {
         /** Calendar type */
         type?: 'default' | 'inline';
+        /** Date format */
+        format?: string;
         /** Range picker */
         range?: boolean;
         /** Value */
@@ -17,15 +19,21 @@ 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;
-        /** Footer **/
+        input?: HTMLElement | object | 'auto';
+        /** Footer. Default: true **/
         footer?: boolean;
         /** Show hour and minute picker **/
         time?: boolean;
+        /** Show grid mode. Default: false */
+        grid?: boolean;
+        /** Update view on mouse wheel. Default: true */
+        wheel?: 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

@@ -13,31 +13,88 @@ if (! Modal && typeof (require) === 'function') {
     var Modal = require('@lemonadejs/modal');
 }
 
-; (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    global.Calendar = factory();
-}(this, (function () {
-
-    // Weekdays
-    const Weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const Helpers = (function() {
+    const component = {};
 
-    // Months
-    const Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    component.weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    component.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
     // Excel like dates
     const excelInitialTime = Date.UTC(1900, 0, 0);
     const excelLeapYearBug = Date.UTC(1900, 1, 29);
     const millisecondsPerDay = 86400000;
 
-    function isValidDate(d) {
+    // Transform in two digits
+    component.Two = function(value) {
+        value = '' + value;
+        if (value.length === 1) {
+            value = '0' + value;
+        }
+        return value;
+    }
+
+    component.isValidDate = function(d) {
         return d instanceof Date && !isNaN(d.getTime());
     }
 
-    /**
-     * Date to number
-     */
-    const dateToNum = function (jsDate) {
+    component.toString = function (date, dateOnly) {
+        let y = null;
+        let m = null;
+        let d = null;
+        let h = null;
+        let i = null;
+        let s = null;
+
+        if (Array.isArray(date)) {
+            y = date[0];
+            m = date[1];
+            d = date[2];
+            h = date[3];
+            i = date[4];
+            s = date[5];
+        } else {
+            if (! date) {
+                date = new Date();
+            }
+            y = date.getFullYear();
+            m = date.getMonth() + 1;
+            d = date.getDate();
+            h = date.getHours();
+            i = date.getMinutes();
+            s = date.getSeconds();
+        }
+
+        if (dateOnly === true) {
+            return component.Two(y) + '-' + component.Two(m) + '-' + component.Two(d);
+        } else {
+            return component.Two(y) + '-' + component.Two(m) + '-' + component.Two(d) + ' ' + component.Two(h) + ':' + component.Two(i) + ':' + component.Two(s);
+        }
+    }
+
+    component.toArray = function (value) {
+        let date = value.split(((value.indexOf('T') !== -1) ? 'T' : ' '));
+        let time = date[1];
+
+        date = date[0].split('-');
+        let y = parseInt(date[0]);
+        let m = parseInt(date[1]);
+        let d = parseInt(date[2]);
+        let h = 0;
+        let i = 0;
+
+        if (time) {
+            time = time.split(':');
+            h = parseInt(time[0]);
+            i = parseInt(time[1]);
+        }
+        return [y, m, d, h, i, 0];
+    }
+
+    component.arrayToStringDate = function(arr) {
+        return component.toString(arr, true);
+    }
+
+    component.dateToNum = function(jsDate) {
         if (typeof(jsDate) === 'string') {
             jsDate = new Date(jsDate + '  GMT+0');
         }
@@ -50,7 +107,7 @@ if (! Modal && typeof (require) === 'function') {
         return jsDateInMilliseconds / millisecondsPerDay;
     }
 
-    const numToDate = function (excelSerialNumber, asString) {
+    component.numToDate = function(excelSerialNumber, asString){
         if (! excelSerialNumber) {
             return '';
         }
@@ -64,20 +121,29 @@ if (! Modal && typeof (require) === 'function') {
 
         let arr = [
             d.getUTCFullYear(),
-            Two(d.getUTCMonth() + 1),
-            Two(d.getUTCDate()),
-            Two(d.getUTCHours()),
-            Two(d.getUTCMinutes()),
-            Two(d.getUTCSeconds()),
+            component.Two(d.getUTCMonth() + 1),
+            component.Two(d.getUTCDate()),
+            component.Two(d.getUTCHours()),
+            component.Two(d.getUTCMinutes()),
+            component.Two(d.getUTCSeconds()),
         ];
 
         if (asString) {
-            return arrayToStringDate(arr);
+            return component.arrayToStringDate(arr);
         } else {
             return arr;
         }
     }
 
+    return component;
+})();
+
+; (function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Calendar = factory();
+}(this, (function () {
+
     const isNumber = function (num) {
         if (typeof(num) === 'string') {
             num = num.trim();
@@ -85,10 +151,6 @@ if (! Modal && typeof (require) === 'function') {
         return !isNaN(num) && num !== null && num !== '';
     }
 
-    const arrayToStringDate = function(arr) {
-        return [arr[0],Two(arr[1]),Two(arr[2])].join('-');
-    }
-
     /**
      * Create a data calendar object based on the view
      */
@@ -120,7 +182,7 @@ if (! Modal && typeof (require) === 'function') {
             let result = [];
             for (let i = 0; i < 12; i++) {
                 let item = {
-                    title: Months[i].substring(0,3),
+                    title: Helpers.months[i].substring(0,3),
                     value: i
                 }
                 // Add the item to the data
@@ -155,7 +217,7 @@ if (! Modal && typeof (require) === 'function') {
                 let item = {
                     title: day,
                     value: i,
-                    number: dateToNum(tmp.toString())
+                    number: Helpers.dateToNum(tmp.toString())
                 }
                 // Add the item to the date
                 result.push(item);
@@ -165,7 +227,7 @@ if (! Modal && typeof (require) === 'function') {
                     item.grey = true;
                 } else {
                     // Check for data
-                    let d = [ year, Two(month+1), Two(day)].join('-');
+                    let d = [ year, Helpers.Two(month+1), Helpers.Two(day)].join('-');
                     if (data && data[d]) {
                         item.data = data[d];
                     }
@@ -205,7 +267,7 @@ if (! Modal && typeof (require) === 'function') {
             let result = [];
             for (let i = 0; i < 24; i++) {
                 let item = {
-                    title: Two(i),
+                    title: Helpers.Two(i),
                     value: i
                 };
                 result.push(item);
@@ -216,7 +278,7 @@ if (! Modal && typeof (require) === 'function') {
             let result = [];
             for (let i = 0; i < 60; i=i+5) {
                 let item = {
-                    title: Two(i),
+                    title: Helpers.Two(i),
                     value: i
                 };
                 result.push(item);
@@ -230,7 +292,7 @@ if (! Modal && typeof (require) === 'function') {
         let data = {};
         if (Array.isArray(this.data)) {
             this.data.map(function (v) {
-                let d = year + '-' + Two(month + 1);
+                let d = year + '-' + Helpers.Two(month + 1);
                 if (v.date.substring(0, 7) === d) {
                     if (!data[v.date]) {
                         data[v.date] = [];
@@ -241,9 +303,10 @@ if (! Modal && typeof (require) === 'function') {
         }
         return data;
     }
+
     // Get the short weekdays name
     const getWeekdays = function() {
-        return Weekdays.map(w => {
+        return Helpers.weekdays.map(w => {
             return { title: w.substring(0, 1) };
         })
     }
@@ -268,14 +331,6 @@ if (! Modal && typeof (require) === 'function') {
         return position;
     }
 
-    // Transform in two digits
-    const Two = function(value) {
-        value = '' + value;
-        if (value.length === 1) {
-            value = '0' + value;
-        }
-        return value;
-    }
 
     const Calendar = function() {
         let self = this;
@@ -310,7 +365,7 @@ if (! Modal && typeof (require) === 'function') {
             // Update the headers of the calendar
             let value = d.toISOString().substring(0,10).split('-');
             // Update the month label
-            self.month = Months[parseInt(value[1])-1];
+            self.month = Helpers.months[parseInt(value[1])-1];
             // Update the year label
             self.year = parseInt(value[0]);
             // Load data
@@ -478,7 +533,7 @@ if (! Modal && typeof (require) === 'function') {
             if (self.view === 'days' && self.range) {
                 let d = getDate();
                 // Date to number
-                let number = dateToNum(d);
+                let number = Helpers.dateToNum(d);
                 // Start a new range
                 if (self.rangeValues && (self.rangeValues[0] >= number || self.rangeValues[1])) {
                     destroyRange();
@@ -538,15 +593,15 @@ if (! Modal && typeof (require) === 'function') {
                         value = self.rangeValues;
                     } else {
                         value = [
-                            numToDate(self.rangeValues[0], true),
-                            numToDate(self.rangeValues[1], true)
+                            Helpers.numToDate(self.rangeValues[0], true),
+                            Helpers.numToDate(self.rangeValues[1], true)
                         ];
                     }
                 }
             } else {
                 value = getDate();
                 if (self.numeric) {
-                    value = dateToNum(value);
+                    value = Helpers.dateToNum(value);
                 }
             }
             return value;
@@ -558,13 +613,13 @@ 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]);
+                        self.rangeValues[0] = Helpers.dateToNum(v[0]);
                     }
                     if (v[1] && typeof(v[1]) === 'string' && v[1].indexOf('-')) {
-                        self.rangeValues[1] = dateToNum(v[1]);
+                        self.rangeValues[1] = Helpers.dateToNum(v[1]);
                     }
 
                     v = v[0];
@@ -573,11 +628,11 @@ if (! Modal && typeof (require) === 'function') {
 
             let d;
             if (v) {
-                v = isNumber(v) ? numToDate(v, true) : v;
+                v = isNumber(v) ? Helpers.numToDate(v, true) : v;
                 d = new Date(v);
             }
             // if no date is defined
-            if (! isValidDate(d)) {
+            if (! Helpers.isValidDate(d)) {
                 d = new Date();
             }
             // Update my index
@@ -590,26 +645,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;
         }
 
         /**
@@ -626,6 +687,10 @@ if (! Modal && typeof (require) === 'function') {
                 setDate(value);
                 // Back to the days
                 self.view = 'days';
+            } else {
+                if (! self.range) {
+                    self.update();
+                }
             }
         }
 
@@ -678,12 +743,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 +764,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 +792,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 +821,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 +861,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
@@ -819,6 +899,10 @@ if (! Modal && typeof (require) === 'function') {
                         self.update();
                     }
                     prevent = true;
+                } else {
+                    if (self.input) {
+                        jSuites.mask(e);
+                    }
                 }
 
                 if (prevent) {
@@ -832,12 +916,14 @@ if (! Modal && typeof (require) === 'function') {
              * @param {object} e - mouse event
              */
             self.content.addEventListener('wheel', function(e){
-                if (e.deltaY < 0) {
-                    self.prev();
-                } else {
-                    self.next();
+                if (self.wheel !== false) {
+                    if (e.deltaY < 0) {
+                        self.prev();
+                    } else {
+                        self.next();
+                    }
+                    e.preventDefault();
                 }
-                e.preventDefault();
             });
 
             /**
@@ -845,8 +931,10 @@ if (! Modal && typeof (require) === 'function') {
              * @param {object} e - mouse event
              */
             self.content.addEventListener('mouseover', function(e){
-                if (e.target.lemon) {
-                    updateRange(e.target.lemon.self);
+                let parent = e.target.parentNode
+                if (parent === self.content) {
+                    let index = Array.prototype.indexOf.call(parent.children, e.target);
+                    updateRange(self.options[index]);
                 }
             });
 
@@ -859,16 +947,19 @@ if (! Modal && typeof (require) === 'function') {
             });
         }
 
-        return `<div class="lm-calendar" :value="self.value">
+        return `<div class="lm-calendar" :value="self.value" data-grid="{{self.grid}}">
             <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>
@@ -883,7 +974,10 @@ if (! Modal && typeof (require) === 'function') {
         </div>`
     }
 
+    // Register the LemonadeJS Component
     lemonade.setComponents({ Calendar: Calendar });
+    // Register the web component
+    lemonade.createWebComponent('calendar', Calendar);
 
     return function (root, options) {
         if (typeof (root) === 'object') {

package/dist/react.d.ts

@@ -1,13 +1,18 @@
 /**
  * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net
+ * https://lemonadejs.net/docs/plugins/calendar
  * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  */
 import Component from './index';
+
 interface Calendar {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
 
-declare function Calendar<Calendar>(props: Component.Options): any;
+type Props = IntrinsicAttributes & Component.Options & Calendar;
+
+declare function Calendar<Calendar>(props: Props): any;
+
 export default Calendar;

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

@@ -57,6 +57,7 @@
     border: 0;
     padding: 4px;
     background-color: transparent;
+    font-weight: bold;
 }
 
 .lm-calendar-navigation button {
@@ -74,27 +75,28 @@
 .lm-calendar-weekdays {
     display: none;
     grid-template-columns: repeat(7, 1fr);
-    grid-gap: 2px;
-    padding: 0 10px 0 10px;
+    padding: 0 8px 0 8px;
     font-size: 0.8em;
 }
 
 .lm-calendar-container[data-view="days"] .lm-calendar-weekdays {
     display: grid;
+    align-items: center;
+    flex: 1;
 }
 
 .lm-calendar-weekdays > div {
     display: inline-block;
-    padding: 10px;
+    padding: 6px;
     box-sizing: border-box;
     text-align: center;
     font-weight: bold;
+    line-height: 2em;
 }
 
 .lm-calendar-content {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    grid-gap: 0;
     padding: 8px;
     font-size: 0.8em;
     outline: none;
@@ -108,7 +110,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 10px;
+    padding: 6px;
     cursor: pointer;
     border-radius: 100px;
     background-origin: padding-box;
@@ -171,8 +173,8 @@
     position: absolute;
     left: 0;
     right: 0;
-    top: 8px;
-    bottom: 8px;
+    top: calc(25%);
+    height: 50%;
     background-color: var(--lm-main-color-alpha, #2196f388);
 }
 
@@ -193,7 +195,7 @@
     margin: 0 10px 0 10px;
     padding: 8px 0 8px 0;
     line-height: 34px;
-    border-top: 1px solid var(--lm-border-color, #ccc);
+    border-top: 1px solid var(--lm-border-color-light, #e9e9e9);
 }
 
 .lm-calendar-footer[data-visible="false"] {
@@ -221,6 +223,7 @@
     padding: 8px;
     width: 100%;
     cursor: pointer;
+    background-color: var(--lm-border-color-light, #e9e9e9);
 }
 
 .lm-calendar-input {
@@ -267,3 +270,25 @@
 .lm-dark-mode .lm-calendar-footer select:focus {
     background-color: #3a3a45;
 }
+
+.lm-calendar[data-grid="true"] .lm-calendar-weekdays {
+    padding: 0;
+}
+
+.lm-calendar[data-grid="true"] .lm-calendar-content {
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    padding: 0;
+}
+
+.lm-calendar[data-grid="true"] .lm-calendar-content > div {
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
+    justify-content: start;
+    align-items: end;
+}

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

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.2.2",
-        "@lemonadejs/modal": "^2.8.1"
+        "lemonadejs": "^4.3.3",
+        "@lemonadejs/modal": "^3.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.4.0"
+    "version": "3.5.0"
 }