@lemonadejs/calendar 3.0.1 → 3.0.3

package/README.md

@@ -60,6 +60,7 @@ You can configure things such as calendar starting date, calendar events, and cu
 | range | array | Defines a restricted range of selectable dates within the calendar. Example: ['2023-06-20', '2023-06-25']. |
 | closed | boolean | Control when the calendar modal is open or closed. |
 | time | boolean | Enables time selection into the calendar. |
+| type | string | |
 
 ### Calendar Events
 

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+interface Calendar {
+    (): any
+    [key: string]: any
+}
+
+interface options {
+    range?: boolean;
+    type?: 'default' | 'inline';
+    value?: number | string;
+    numeric?: boolean;
+    input?: HTMLElement;
+}
+
+interface instance {
+
+}
+
+export declare function Calendar(el: HTMLElement, options?: options): instance;

package/dist/index.js

@@ -10,7 +10,7 @@ if (! lemonade && typeof (require) === 'function') {
 }
 
 if (! Modal && typeof (require) === 'function') {
-    var Modal = require('../../modal/dist/index');
+    var Modal = require('@lemonadejs/modal');
 }
 
 ; (function (global, factory) {
@@ -30,6 +30,10 @@ if (! Modal && typeof (require) === 'function') {
     const excelLeapYearBug = Date.UTC(1900, 1, 29);
     const millisecondsPerDay = 86400000;
 
+    function isValidDate(d) {
+        return d instanceof Date && !isNaN(d.getTime());
+    }
+
     /**
      * Date to number
      */
@@ -46,7 +50,11 @@ if (! Modal && typeof (require) === 'function') {
         return jsDateInMilliseconds / millisecondsPerDay;
     }
 
-    const numToDate = function (excelSerialNumber) {
+    const numToDate = function (excelSerialNumber, asString) {
+        if (! excelSerialNumber) {
+            return '';
+        }
+
         let jsDateInMilliseconds = excelInitialTime + excelSerialNumber * millisecondsPerDay;
         if (jsDateInMilliseconds >= excelLeapYearBug) {
             jsDateInMilliseconds -= millisecondsPerDay;
@@ -54,7 +62,7 @@ if (! Modal && typeof (require) === 'function') {
 
         const d = new Date(jsDateInMilliseconds);
 
-        return [
+        let arr = [
             d.getUTCFullYear(),
             Two(d.getUTCMonth() + 1),
             Two(d.getUTCDate()),
@@ -62,6 +70,16 @@ if (! Modal && typeof (require) === 'function') {
             Two(d.getUTCMinutes()),
             Two(d.getUTCSeconds()),
         ];
+
+        if (asString) {
+            return arrayToStringDate(arr);
+        } else {
+            return arr;
+        }
+    }
+
+    const arrayToStringDate = function(arr) {
+        return [arr[0],Two(arr[1]),Two(arr[2])].join('-');
     }
 
     /**
@@ -154,19 +172,19 @@ if (! Modal && typeof (require) === 'function') {
                 }
 
                 // Select range
-                if (this.type === 'range' && this.range) {
+                if (this.range && this.rangeValues) {
                     // Mark the start and end points
-                    if (this.range[0] === item.number) {
+                    if (this.rangeValues[0] === item.number) {
                         item.range = true;
                         item.start = true;
                     }
-                    if (this.range[1] === item.number) {
+                    if (this.rangeValues[1] === item.number) {
                         item.range = true;
                         item.end = true;
                     }
                     // Re-recreate teh range
-                    if (this.range[0] && this.range[1]) {
-                        if (this.range[0] <= item.number && this.range[1] >= item.number) {
+                    if (this.rangeValues[0] && this.rangeValues[1]) {
+                        if (this.rangeValues[0] <= item.number && this.rangeValues[1] >= item.number) {
                             item.range = true;
                         }
                     }
@@ -245,7 +263,7 @@ if (! Modal && typeof (require) === 'function') {
     // Transform in two digits
     const Two = function(value) {
         value = '' + value;
-        if (value.length == 1) {
+        if (value.length === 1) {
             value = '0' + value;
         }
         return value;
@@ -264,7 +282,7 @@ if (! Modal && typeof (require) === 'function') {
         let date = new Date();
 
         // Range
-        self.range = null;
+        self.rangeValues = null;
 
         /**
          * Update the internal date
@@ -424,7 +442,7 @@ if (! Modal && typeof (require) === 'function') {
             if (self.modal) {
                 if (!(e.relatedTarget && self.modal.el.contains(e.relatedTarget))) {
                     if (self.modal.closed === false) {
-                       // self.modal.closed = true
+                        self.modal.closed = true
                     }
                 }
             }
@@ -435,23 +453,23 @@ if (! Modal && typeof (require) === 'function') {
          * @param s
          */
         const setRange = function(s) {
-            if (self.view === 'days' && self.type === 'range') {
+            if (self.view === 'days' && self.range) {
                 let d = self.getValue();
                 // Date to number
                 let number = dateToNum(d);
                 // Start a new range
-                if (self.range && (self.range[0] > number || self.range[1])) {
+                if (self.rangeValues && (self.rangeValues[0] > number || self.rangeValues[1])) {
                     destroyRange();
                 }
                 // Range
                 s.range = true;
                 // Update range
-                if (! self.range) {
+                if (! self.rangeValues) {
                     s.start = true;
-                    self.range = [number, null];
+                    self.rangeValues = [number, null];
                 } else {
                     s.end = true;
-                    self.range[1] = number;
+                    self.rangeValues[1] = number;
                 }
             }
         }
@@ -461,9 +479,9 @@ if (! Modal && typeof (require) === 'function') {
          * @param s
          */
         const updateRange = function(s) {
-            if (self.type === 'range' && self.view === 'days' && self.range) {
+            if (self.range && self.view === 'days' && self.rangeValues) {
                 // Creating a range
-                if (self.range[0] && ! self.range[1]) {
+                if (self.rangeValues[0] && ! self.rangeValues[1]) {
                     let number = s.number;
                     if (number) {
                         // Update range properties
@@ -471,7 +489,7 @@ if (! Modal && typeof (require) === 'function') {
                             // Item number
                             let v = self.options[i].number;
                             // Update property condition
-                            self.options[i].range = v >= self.range[0] && v <= number;
+                            self.options[i].range = v >= self.rangeValues[0] && v <= number;
                         }
                     }
                 }
@@ -487,14 +505,43 @@ if (! Modal && typeof (require) === 'function') {
                 self.options[i].start = false;
                 self.options[i].end = false;
             }
-            self.range = null;
+            self.rangeValues = null;
+        }
+
+        const setValue = function(reset) {
+            if (reset) {
+                self.value = '';
+                self.input.value = '';
+                destroyRange();
+            } else {
+                if (self.range) {
+                    self.value = self.rangeValues[0];
+                    if (self.input) {
+                        if (self.numeric) {
+                            self.input.value = self.rangeValues;
+                        } else {
+                            self.input.value = [numToDate(self.rangeValues[0], true), numToDate(self.rangeValues[1], true)];
+                        }
+                    }
+                } else {
+                    self.value = self.getValue();
+                    if (self.input) {
+                        if (self.numeric) {
+                            self.input.value = dateToNum(self.value);
+                        } else {
+                            self.input.value = self.value;
+                        }
+                    }
+                }
+            }
         }
 
         /**
          * Select an item with the enter or mouse
+         * @param {object} e - mouse event
          * @param {object} item - selected cell
          */
-        self.select = function(item) {
+        self.select = function(e, item) {
             // Update cursor generic
             let value = setCursor(item);
             // Update range
@@ -512,10 +559,10 @@ if (! Modal && typeof (require) === 'function') {
 
         /**
          * Next handler
-         * @param {object} e mouse event
+         * @param {object?} e mouse event
          */
         self.next = function(e) {
-            if (! e) {
+            if (! e || e.type === 'click') {
                 // Icon click
                 move(1);
             } else {
@@ -526,10 +573,10 @@ if (! Modal && typeof (require) === 'function') {
 
         /**
          * Next handler
-         * @param {object} e mouse event
+         * @param {object?} e mouse event
          */
         self.prev = function(e) {
-            if (! e) {
+            if (! e || e.type === 'click') {
                 // Icon click
                 move(-1);
             } else {
@@ -541,11 +588,14 @@ if (! Modal && typeof (require) === 'function') {
         /**
          * Open the modal
          */
-        self.open = function() {
-            if (self.modal) {
+        self.open = function(e) {
+            if (self.modal && self.modal.closed) {
+                // Open modal
                 self.modal.closed = false;
-                // Set the focus
-                self.content.focus();
+                // Set the focus on the content to use the keyboard
+                if (! (self.input && e.target.getAttribute('readonly') === null)) {
+                    self.content.focus();
+                }
             }
         }
 
@@ -554,10 +604,31 @@ if (! Modal && typeof (require) === 'function') {
          */
         self.close = function() {
             if (self.modal && self.modal.closed === false) {
+                // Close modal
                 self.modal.closed = true;
             }
         }
 
+        self.reset = function() {
+            setValue(true);
+            self.close();
+        }
+
+        self.update = function() {
+            setValue();
+            self.close();
+        }
+
+        /**
+         * Change the view
+         */
+        self.setView = function() {
+            let v = this.getAttribute('data-view');
+            if (v) {
+                self.view = v;
+            }
+        }
+
         /**
          * Get value from cursor
          * @returns {string}
@@ -588,7 +659,9 @@ if (! Modal && typeof (require) === 'function') {
             let d;
             if (self.value) {
                 d = new Date(self.value);
-            } else {
+            }
+            // if no date is defined
+            if (! isValidDate(d)) {
                 d = new Date();
             }
             // Update my index
@@ -609,7 +682,7 @@ if (! Modal && typeof (require) === 'function') {
                 self.modal = {
                     width: 300,
                     closed: true,
-                    'auto-close': true,
+                    focus: false,
                 };
                 // Generate modal
                 Modal(self.el, self.modal);
@@ -621,11 +694,18 @@ if (! Modal && typeof (require) === 'function') {
                 self.input.addEventListener('focus', self.open);
                 self.input.addEventListener('click', self.open);
                 self.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;
+                }
             }
 
             /**
              * Handler keyboard
-             * @param e
+             * @param {object} e - event
              */
             self.content.addEventListener('keydown', function(e){
                 if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
@@ -633,18 +713,20 @@ if (! Modal && typeof (require) === 'function') {
                 } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
                     self.next(e);
                 } else if (e.key === 'Enter') {
+                    // Current view
+                    let view = self.view;
                     // Select
-                    self.select(self.options[self.cursor.index]);
-                    // If is range do something different
-                    if (self.type !== 'range') {
-                        self.value = self.getValue();
-                        self.close();
+                    self.select(e, self.options[self.cursor.index]);
+                    // If is range do something diferent
+                    if (view === 'days' && ! self.range) {
+                        self.update();
                     }
                 }
             });
 
             /**
              * Mouse wheel handler
+             * @param {object} e - mouse event
              */
             self.content.addEventListener('wheel', function(e){
                 if (e.deltaY < 0) {
@@ -656,34 +738,41 @@ if (! Modal && typeof (require) === 'function') {
 
             /**
              * Range handler
-             * @param e
+             * @param {object} e - mouse event
              */
             self.content.addEventListener('mouseover', function(e){
                 if (e.target.lemon) {
                     updateRange(e.target.lemon.self);
                 }
             });
+
+            // Create event for focus out
+            self.el.addEventListener("focusout", (e) => {
+                if (e.relatedTarget !== self.input && ! self.el.contains(e.relatedTarget)) {
+                    self.close();
+                }
+            });
         }
 
         return `<div class="lm-calendar">
                 <div class="lm-calendar-options">
-                <button onclick="self.value = ''; self.close();">Reset</button>
-                <button onclick="self.value = self.getValue(); self.close();">Done</button>
+                <button onclick="self.reset">Reset</button>
+                <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"><div onclick="self.view = 'months'">{{self.month}}</div> <div onclick="self.view = 'years'">{{self.year}}</div></div> 
-                        <div class="lm-calendar-navigation"><i class="material-icons ripple" onclick="self.prev()" tabindex="0">arrow_drop_up</i> <i class="material-icons ripple" onclick="self.next()" tabindex="0">arrow_drop_down</i></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 ripple" onclick="self.prev" tabindex="0">arrow_drop_up</button> <button type="button" class="material-icons 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(self)">{{self.title}}</div>
+                    <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">{{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.value = self.getValue(); self.close();" class="ripple"></div>
+                    <div><input type="button" value="Update" onclick="self.update" class="ripple"></div>
                 </div>
             </div>
         </div>`

package/dist/react.js

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import React, { useRef, useEffect  } from "react";
+import Component from './index';
+
+import "./style.css";
+import "@lemonadejs/modal/dist/style.css"
+
+// @ts-ignore
+const Calendar = React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        // @ts-ignore
+        if (! Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options);
+        }
+    }, []);
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
+})
+
+export default Calendar;

package/dist/style.css

@@ -19,6 +19,7 @@
     text-transform: uppercase;
     cursor: pointer;
     padding: 15px;
+    font-weight: bold;
 }
 
 .lm-calendar-header {
@@ -35,23 +36,24 @@
 }
 
 .lm-calendar-header .lm-calendar-labels {
-    font-size: 1.4em;
     display: flex;
     flex: 1;
     cursor: pointer;
     padding-left: 5px;
 }
 
-.lm-calendar-header .lm-calendar-labels > div {
+.lm-calendar-header .lm-calendar-labels > button {
+    font-size: 1.2em;
+    border: 0;
+    padding: 2px;
     margin: 2px;
+    background-color: #fff;
 }
 
-.lm-calendar-navigation {
+.lm-calendar-navigation button {
     cursor: pointer;
-}
-
-.lm-calendar-navigation i {
     padding: 5px;
+    border: 0;
     border-radius: 24px;
 }
 

package/dist/vue.js

@@ -0,0 +1,32 @@
+import { h, getCurrentInstance } from 'vue';
+import component from "./index";
+
+import "./style.css";
+import "@lemonadejs/modal/dist/style.css"
+
+export const Calendar = {
+    inheritAttrs: false,
+    mounted() {
+        const { attrs } = getCurrentInstance();
+
+        let options = {
+            ...attrs
+        };
+
+        this.el = this.$refs.container;
+
+        this.current = component(this.$refs.container, options);
+    },
+    setup() {
+        let containerProps = {
+            ref: 'container',
+            style: {
+                width: '100%',
+                height: '100%',
+            }
+        };
+        return () => h('div', containerProps);
+    }
+}
+
+export default Calendar;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@lemonadejs/calendar",
     "title": "LemonadeJS calendar",
-    "description": "LemonadeJS Calendar Component.",
+    "description": "LemonadeJS reactive JavaScript calendar plugin",
     "author": {
         "name": "Contact <contact@lemonadejs.net>",
         "url": "https://lemonadejs.net"
@@ -13,12 +13,11 @@
         "library",
         "javascript plugins"
     ],
-    "scripts": {
-        "build": "webpack --config webpack.config.js"
-    },
     "dependencies": {
-        "lemonadejs": "^3.3.2"
+        "lemonadejs": "^4.0.1",
+        "@lemonadejs/modal": "^2.3.3"
     },
     "main": "dist/index.js",
-    "version": "3.0.1"
+    "types": "dist/index.d.ts",
+    "version": "3.0.3"
 }

package/dist/index.html

@@ -1,11 +0,0 @@
-<html>
-<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-<script src="./index.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/calendar/dist/style.min.css" />
-<div id='root'></div>
-
-<script>
-console.log(Calendar)
-Calendar(document.getElementById('root'), {});
-</script>
-</html>