@progressive-development/pd-calendar 0.2.5 → 0.2.7

package/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdCalendar.js

@@ -71,6 +71,16 @@ export class PdCalendar extends LitElement {
    * @event select-date
    */
 
+  /**
+   * Fired when mouse entered date cell, detail contains date (Date) and dateKey(string).
+   * @event mouse-enter-date
+   */
+
+  /**
+   * Fired when date leaves date cell
+   * @event mouse-leave-date
+   */
+
    static get properties() {
     return {
       refDate: { type: Object },
@@ -289,6 +299,8 @@ export class PdCalendar extends LitElement {
               ?special="${special}"
               numberClass="${this.numberClass}"
               @select-date="${this._forwardEvent}"
+              @mouse-enter-date="${this._forwardEnterEvent}"
+              @mouse-leave-date="${this._forwardLeaveEvent}"
               ?today="${this.selectableDates && isToday(tmpDate)}"
               ?selected="${this.showSelection && isSelected(this.refDate, tmpDate)}"
             ></pd-calendar-cell>
@@ -423,7 +435,7 @@ export class PdCalendar extends LitElement {
 
   }
 
-  // Forward Event from Calendar Cell, could be refactored
+  // Forward Event from Calendar Cell, should be refactored (events not bubbles up here)
   _forwardEvent(e) {
     this.dispatchEvent(
       new CustomEvent('select-date', {
@@ -431,4 +443,18 @@ export class PdCalendar extends LitElement {
       })
     );
   }
+
+  _forwardEnterEvent(e) {
+    this.dispatchEvent(
+      new CustomEvent('mouse-enter-date', {
+        detail: e.detail
+      })
+    );
+  }
+
+  _forwardLeaveEvent() {
+    this.dispatchEvent(
+      new CustomEvent('mouse-leave-date')
+    );
+  }
 }

package/src/PdCalendarCell.js

@@ -257,32 +257,21 @@ class PdCalendarCell extends LitElement {
     }
   }
 
-  _mouseEnter(e) {
-    const dateKey = e.target.dataset.date;
-    if (dateKey) {
-      // convert back to date
-      const userSelectedDate = parse(dateKey, 'YYYY-MM-DD');
-      this.dispatchEvent(
-        new CustomEvent('mouse-enter-date', {
-          detail: {
-            dateKey,
-            date: userSelectedDate,
-            bubbles: true,
-            composed: true
-          },
-        })
-      );
-    }
-  }
-
-  _mouseLeave() {
+  _mouseEnter() {
+    const userSelectedDate = parse(this.key, 'YYYY-MM-DD');
     this.dispatchEvent(
-      new CustomEvent('mouse-leave-date', {
+      new CustomEvent('mouse-enter-date', {
         detail: {
-          bubbles: true,
-          composed: true
+          dateKey: this.key,
+          date: userSelectedDate,
         },
       })
+    );    
+  }
+
+  _mouseLeave() {
+    this.dispatchEvent(
+      new CustomEvent('mouse-leave-date')
     );
   }
 

package/src/stories/index.stories.js

@@ -7,7 +7,11 @@ import { format } from 'fecha';
 export default {
   title: 'PdCalendar/Calendar',
   component: 'pd-calendar',
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+  },
   argTypes: {
+    
   },
 };
 
@@ -41,6 +45,9 @@ function CalendarSmallTemplate({ refDate, hideWeekend, width, cellHeight, prevMo
     </style>
     <pd-calendar .refDate="${refDate}" selectableDates showSelection ?hideWeekend="${hideWeekend}" class="calendar-small" prevMonthConstraint="${prevMonthConstraint}" 
       nextMonthConstraint="${nextMonthConstraint}" numberClass="center"
+      @mouse-enter-date="${(e) => {
+        console.log("Mouse Enter Event: ", e);
+      }}"
     >      
     </pd-calendar>`;  
 }