@lemonadejs/calendar 3.4.2 → 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 */
@@ -18,10 +20,14 @@ declare namespace Calendar {
         numeric?: boolean;
         /** Bind the calendar to na HTML input element */
         input?: HTMLElement | object | 'auto';
-        /** Footer **/
+        /** 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 */

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;
@@ -561,10 +616,10 @@ if (! Modal && typeof (require) === 'function') {
                     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
@@ -632,6 +687,10 @@ if (! Modal && typeof (require) === 'function') {
                 setDate(value);
                 // Back to the days
                 self.view = 'days';
+            } else {
+                if (! self.range) {
+                    self.update();
+                }
             }
         }
 
@@ -840,6 +899,10 @@ if (! Modal && typeof (require) === 'function') {
                         self.update();
                     }
                     prevent = true;
+                } else {
+                    if (self.input) {
+                        jSuites.mask(e);
+                    }
                 }
 
                 if (prevent) {
@@ -853,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();
             });
 
             /**
@@ -866,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]);
                 }
             });
 
@@ -880,7 +947,7 @@ 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 type="button" onclick="self.reset">Reset</button>
                 <button type="button" onclick="self.update">Done</button>
@@ -907,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/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/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.2"
+    "version": "3.5.0"
 }