@progressive-development/pd-calendar 0.2.6 → 0.2.8

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.6",
+  "version": "0.2.8",
   "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

@@ -223,7 +223,7 @@ class PdCalendarCell extends LitElement {
   _renderEmptyCell() {
     return html`<div
       class="cell cell-day ${this.numberClass} ${this.weekDayNumber === 6 ||
-      this.weekDayNumber === 0
+      this.weekDayNumber === 0 && !this.special
         ? 'we'
         : ''}"
     >
@@ -257,16 +257,13 @@ class PdCalendarCell extends LitElement {
     }
   }
 
-  _mouseEnter(e) {    
-    // convert back to date
+  _mouseEnter() {
     const userSelectedDate = parse(this.key, 'YYYY-MM-DD');
     this.dispatchEvent(
       new CustomEvent('mouse-enter-date', {
         detail: {
           dateKey: this.key,
           date: userSelectedDate,
-          bubbles: true,
-          composed: true
         },
       })
     );    
@@ -274,12 +271,7 @@ class PdCalendarCell extends LitElement {
 
   _mouseLeave() {
     this.dispatchEvent(
-      new CustomEvent('mouse-leave-date', {
-        detail: {
-          bubbles: true,
-          composed: true
-        },
-      })
+      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>`;  
 }