ember-power-calendar 0.18.0 → 0.20.0

package/README.md

@@ -1,38 +1,43 @@
-# Ember Power Calendar [![Build Status](https://travis-ci.org/cibernox/ember-power-calendar.svg?branch=master)](https://travis-ci.org/cibernox/ember-power-calendar)
-
-Customizable Calendar Component for Ember.
-
-## Disclaimer
-
-Version 0.14 of this addon requires Ember 3.11 or greater.
-Versions below 0.14 would work with Ember 3.0+ (and perhaps 2.12+)
-
-## Installation
-
-`ember install ember-power-calendar`
-
-Internet Explorer 11 support requires babel polyfill:
-
-```js
-// ember-cli-build.js
-
-let app = new EmberAddon(defaults, {
-  'ember-cli-babel': {
-    includePolyfill: true
-  }
-});
-```
-
-## Usage
-
-There are many possible ways to use it, for giving you just a taste of the API:
-
-```hbs
-<PowerCalendar @selected={{arrival}} @onSelect={{action (mut arrival) value="date"}} as |calendar|>
-  <calendar.Nav/>
-  <calendar.Days/>
-</PowerCalendar>
-```
-
-Check the full documentation at www.ember-power-calendar.com
-
+# Ember Power Calendar
+
+[![CI](https://github.com/cibernox/ember-power-calendar/actions/workflows/ci.yml/badge.svg)](https://github.com/cibernox/ember-power-calendar/actions/workflows/ci.yml)
+[![Ember Observer Score](http://emberobserver.com/badges/ember-power-calendar.svg)](http://emberobserver.com/addons/ember-power-calendar)
+[![npm version](https://badge.fury.io/js/ember-power-calendar.svg)](https://badge.fury.io/js/ember-power-calendar)
+
+Customizable Calendar Component for Ember.
+
+## Compatibility
+
+* Ember.js v3.28 or above
+* Ember CLI v3.28 or above
+* Node.js v16 or above
+
+## Installation
+
+`ember install ember-power-calendar`
+
+Internet Explorer 11 support requires babel polyfill:
+
+```js
+// ember-cli-build.js
+
+let app = new EmberAddon(defaults, {
+  'ember-cli-babel': {
+    includePolyfill: true
+  }
+});
+```
+
+## Usage
+
+There are many possible ways to use it, for giving you just a taste of the API:
+
+```hbs
+<PowerCalendar @selected={{this.arrival}} @onSelect={{this.onChange}} as |calendar|>
+  <calendar.Nav/>
+  <calendar.Days/>
+</PowerCalendar>
+```
+
+Check the full documentation at www.ember-power-calendar.com
+

package/addon/{templates/components → components}/power-calendar/days.hbs

@@ -1,3 +1,4 @@
+{{! template-lint-disable no-invalid-interactive }}
 <div
   class="ember-power-calendar-days"
   {{on "click" this.handleClick}}
@@ -8,14 +9,13 @@
       <div class="ember-power-calendar-weekday">{{wdn}}</div>
     {{/each}}
   </div>
-  {{! template-lint-disable no-invalid-interactive }}
   <div class="ember-power-calendar-day-grid" {{on "keydown" this.handleKeyDown}}>
     {{#each this.weeks key='id' as |week|}}
       <div class="ember-power-calendar-row ember-power-calendar-week" data-missing-days={{week.missingDays}}>
         {{#each week.days key='id' as |day|}}
           <button type="button"
             data-date="{{day.id}}"
-            class={{ember-power-calendar-day-classes day @calendar this.weeks this.dayClass}}
+            class={{ember-power-calendar-day-classes day @calendar this.weeks @dayClass}}
             {{on "focus" this.handleDayFocus}}
             {{on "blur" this.handleDayBlur}}
             disabled={{day.isDisabled}}>

package/addon/components/power-calendar/days.js

@@ -1,10 +1,9 @@
-import { layout, tagName } from "@ember-decorators/component";
-import Component from '@ember/component';
-import { computed, action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { scheduleOnce } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import { assert } from '@ember/debug';
-import templateLayout from '../../templates/components/power-calendar/days';
 import {
   add,
   endOf,
@@ -22,71 +21,68 @@ import {
   startOf,
   startOfWeek,
   withLocale,
-} from 'ember-power-calendar-utils';
+} from 'ember-power-calendar/utils';
 
-const WEEK_DAYS = [
-  'Mon',
-  'Tue',
-  'Wed',
-  'Thu',
-  'Fri',
-  'Sat',
-  'Sun'
-];
+const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-export default @layout(templateLayout) @tagName('') class extends Component {
-  focusedId = undefined
-  showDaysAround = true
-  weekdayFormat = 'short' // "min" | "short" | "long"
-  @service('power-calendar') powerCalendarService
+export default class extends Component {
+  @service('power-calendar') powerCalendarService;
+
+  @tracked focusedId = undefined;
+
+  get weekdayFormat() {
+    return this.args.weekdayFormat || 'short'; // "min" | "short" | "long"
+  }
+
+  get showDaysAround() {
+    return this.args.showDaysAround !== undefined
+      ? this.args.showDaysAround
+      : true;
+  }
 
-  // CPs
-  @computed('calendar.locale')
   get weekdaysMin() {
-    return withLocale(this.calendar.locale, getWeekdaysMin);
+    return withLocale(this.args.calendar.locale, getWeekdaysMin);
   }
 
-  @computed('calendar.locale')
   get weekdaysShort() {
-    return withLocale(this.calendar.locale, getWeekdaysShort);
+    return withLocale(this.args.calendar.locale, getWeekdaysShort);
   }
 
-  @computed('calendar.locale')
   get weekdays() {
-    return withLocale(this.calendar.locale, getWeekdays);
+    return withLocale(this.args.calendar.locale, getWeekdays);
   }
 
-  @computed('weekdaysShort', 'startOfWeek')
   get localeStartOfWeek() {
-    let forcedStartOfWeek = this.startOfWeek;
+    let forcedStartOfWeek = this.args.startOfWeek;
     if (forcedStartOfWeek) {
       return parseInt(forcedStartOfWeek, 10);
     }
-    return localeStartOfWeek(this.calendar.locale);
+    return localeStartOfWeek(this.args.calendar.locale);
   }
 
-  @computed('localeStartOfWeek', 'weekdayFormat', 'calendar.locale')
   get weekdaysNames() {
     let { localeStartOfWeek, weekdayFormat } = this;
-    let format = `weekdays${weekdayFormat === 'long' ? '' : (weekdayFormat === 'min' ? 'Min' : 'Short')}`;
+    let format = `weekdays${
+      weekdayFormat === 'long' ? '' : weekdayFormat === 'min' ? 'Min' : 'Short'
+    }`;
     let weekdaysNames = this[format];
-    return weekdaysNames.slice(localeStartOfWeek).concat(weekdaysNames.slice(0, localeStartOfWeek));
+    return weekdaysNames
+      .slice(localeStartOfWeek)
+      .concat(weekdaysNames.slice(0, localeStartOfWeek));
   }
 
-  @computed('calendar', 'focusedId', 'localeStartOfWeek', 'minDate', 'maxDate', 'disabledDates.[]', 'maxLength', 'currentCenter')
   get days() {
     let today = this.powerCalendarService.getDate();
     let lastDay = this.lastDay();
     let day = this.firstDay();
     let days = [];
     while (isBefore(day, lastDay)) {
-      days.push(this.buildDay(day, today, this.calendar));
-      day = add(day, 1, "day");
+      days.push(this.buildDay(day, today, this.args.calendar));
+      day = add(day, 1, 'day');
     }
     return days;
   }
 
-  @computed('showDaysAround', 'days')
   get weeks() {
     let { showDaysAround, days } = this;
     let weeks = [];
@@ -99,18 +95,17 @@ export default @layout(templateLayout) @tagName('') class extends Component {
       weeks.push({
         id: `week-of-${daysOfWeek[0].id}`,
         days: daysOfWeek,
-        missingDays: 7 - daysOfWeek.length
+        missingDays: 7 - daysOfWeek.length,
       });
       i += 7;
     }
     return weeks;
   }
 
-  @computed('center', 'calendar.center')
   get currentCenter() {
-    let center = this.center;
+    let center = this.args.center;
     if (!center) {
-      center = this.selected || this.calendar.center;
+      center = this.args.selected || this.args.calendar.center;
     }
     return normalizeDate(center);
   }
@@ -175,14 +170,14 @@ export default @layout(templateLayout) @tagName('') class extends Component {
       } else {
         return;
       }
-      this.set('focusedId', day.id);
+      this.focusedId = day.id;
       scheduleOnce('afterRender', this, '_focusDate', day.id);
     }
   }
 
   // Methods
   buildDay(date, today, calendar) {
-    let id = formatDate(date, 'YYYY-MM-DD')
+    let id = formatDate(date, 'YYYY-MM-DD');
 
     return normalizeCalendarDay({
       id,
@@ -192,7 +187,7 @@ export default @layout(templateLayout) @tagName('') class extends Component {
       isFocused: this.focusedId === id,
       isCurrentMonth: date.getMonth() === this.currentCenter.getMonth(),
       isToday: isSame(date, today, 'day'),
-      isSelected: this.dayIsSelected(date, calendar)
+      isSelected: this.dayIsSelected(date, calendar),
     });
   }
 
@@ -200,29 +195,32 @@ export default @layout(templateLayout) @tagName('') class extends Component {
     return day;
   }
 
-  dayIsSelected(date, calendar = this.calendar) {
+  dayIsSelected(date, calendar = this.args.calendar) {
     return calendar.selected ? isSame(date, calendar.selected, 'day') : false;
   }
 
   dayIsDisabled(date) {
-    let isDisabled = !this.calendar.actions.select;
+    let isDisabled = !this.args.calendar.actions.select;
     if (isDisabled) {
       return true;
     }
 
-    if (this.minDate && isBefore(date, startOf(this.minDate, 'day'))) {
+    if (
+      this.args.minDate &&
+      isBefore(date, startOf(this.args.minDate, 'day'))
+    ) {
       return true;
     }
 
-    if (this.maxDate && isAfter(date, endOf(this.maxDate, 'day'))) {
+    if (this.args.maxDate && isAfter(date, endOf(this.args.maxDate, 'day'))) {
       return true;
     }
 
-
-    if (this.disabledDates) {
-      let disabledInRange = this.disabledDates.some((d) => {
+    if (this.args.disabledDates) {
+      let disabledInRange = this.args.disabledDates.some((d) => {
         let isSameDay = isSame(date, d, 'day');
-        let isWeekDayIncludes = WEEK_DAYS.indexOf(d) !== -1 && formatDate(date, 'ddd') === d;
+        let isWeekDayIncludes =
+          WEEK_DAYS.indexOf(d) !== -1 && formatDate(date, 'ddd') === d;
         return isSameDay || isWeekDayIncludes;
       });
 
@@ -241,17 +239,22 @@ export default @layout(templateLayout) @tagName('') class extends Component {
 
   lastDay() {
     let localeStartOfWeek = this.localeStartOfWeek;
-    assert("The center of the calendar is an invalid date.", !isNaN(this.currentCenter.getTime()));
-    let lastDay = endOf(this.currentCenter, 'month')
+    assert(
+      'The center of the calendar is an invalid date.',
+      !isNaN(this.currentCenter.getTime()),
+    );
+    let lastDay = endOf(this.currentCenter, 'month');
     return endOfWeek(lastDay, localeStartOfWeek);
   }
 
   _updateFocused(id) {
-    this.set('focusedId', id);
+    this.focusedId = id;
   }
 
   _focusDate(id) {
-    let dayElement = document.querySelector(`[data-power-calendar-id="${this.calendar.uniqueId}"] [data-date="${id}"]`);
+    let dayElement = document.querySelector(
+      `[data-power-calendar-id="${this.args.calendar.uniqueId}"] [data-date="${id}"]`,
+    );
     if (dayElement) {
       dayElement.focus();
     }
@@ -262,10 +265,10 @@ export default @layout(templateLayout) @tagName('') class extends Component {
     let dayEl = e.target.closest('[data-date]');
     if (dayEl) {
       let dateStr = dayEl.dataset.date;
-      let day = this.days.find(d => d.id === dateStr);
+      let day = this.days.find((d) => d.id === dateStr);
       if (day) {
-        if (this.calendar.actions.select) {
-          this.calendar.actions.select(day, this.calendar, e);
+        if (this.args.calendar.actions.select) {
+          this.args.calendar.actions.select(day, this.args.calendar, e);
         }
       }
     }

package/addon/components/power-calendar/nav.js

@@ -1,8 +1,11 @@
-import Component from '@ember/component';
-import { layout, tagName } from "@ember-decorators/component";
-import templateLayout from '../../templates/components/power-calendar/nav';
+import Component from '@glimmer/component';
 
-export default @layout(templateLayout) @tagName('') class extends Component {
-  unit = 'month'
-  format = 'MMMM YYYY'
+export default class extends Component {
+  get unit() {
+    return this.args.unit || 'month';
+  }
+
+  get format() {
+    return this.args.format || 'MMMM YYYY';
+  }
 }

package/addon/components/power-calendar-multiple/days.js

@@ -1,19 +1,24 @@
 import DaysComponent from '../power-calendar/days';
-import fallbackIfUndefined from '../../utils/computed-fallback-if-undefined';
-import { isSame } from 'ember-power-calendar-utils';
+import { isSame } from 'ember-power-calendar/utils';
 
 export default class extends DaysComponent {
-  @fallbackIfUndefined(Infinity) maxLength
+  get maxLength() {
+    return this.args.maxLength || Infinity;
+  }
 
   // Methods
-  dayIsSelected(date, calendar = this.calendar) {
+  dayIsSelected(date, calendar = this.args.calendar) {
     let selected = calendar.selected || [];
     return selected.some((d) => isSame(date, d, 'day'));
   }
 
   dayIsDisabled(date) {
-    let numSelected = (this.calendar.selected && this.calendar.selected.length) || 0;
+    let numSelected =
+      (this.args.calendar.selected && this.args.calendar.selected.length) || 0;
     let maxLength = this.maxLength || Infinity;
-    return super.dayIsDisabled(...arguments) || (numSelected >= maxLength && !this.dayIsSelected(date));
+    return (
+      super.dayIsDisabled(...arguments) ||
+      (numSelected >= maxLength && !this.dayIsSelected(date))
+    );
   }
 }

package/addon/components/power-calendar-multiple.js

@@ -1,29 +1,33 @@
 import CalendarComponent from './power-calendar';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import {
   normalizeDate,
   isSame,
-  normalizeMultipleActionValue
-} from 'ember-power-calendar-utils';
+  normalizeMultipleActionValue,
+} from 'ember-power-calendar/utils';
 import { assert } from '@ember/debug';
 import { isArray } from '@ember/array';
+import PowerCalendarMultipleDaysComponent from './power-calendar-multiple/days';
 
 export default class extends CalendarComponent {
-  daysComponent = 'power-calendar-multiple/days'
-  _calendarType = 'multiple'
+  daysComponent = PowerCalendarMultipleDaysComponent;
+  _calendarType = 'multiple';
+
+  @tracked _selected;
 
-  // CPs
-  @computed
   get selected() {
-    return undefined;
-  }
-  set selected(v) {
-    return isArray(v) ? v.map(normalizeDate) : v;
+    if (this._selected) {
+      return this._selected;
+    }
+
+    const value = this.args.selected;
+
+    return isArray(value) ? value.map(normalizeDate) : value;
   }
 
-  @computed('center')
   get currentCenter() {
-    let center = this.center;
+    let center = this.args.center;
     if (!center) {
       center = (this.selected || [])[0] || this.powerCalendarService.getDate();
     }
@@ -35,7 +39,8 @@ export default class extends CalendarComponent {
   select(dayOrDays, calendar, e) {
     assert(
       `The select action expects an array of date objects, or a date object. ${typeof dayOrDays} was recieved instead.`,
-      isArray(dayOrDays) || dayOrDays instanceof Object && dayOrDays.date instanceof Date
+      isArray(dayOrDays) ||
+        (dayOrDays instanceof Object && dayOrDays.date instanceof Date),
     );
 
     let days;
@@ -46,8 +51,8 @@ export default class extends CalendarComponent {
       days = [dayOrDays];
     }
 
-    if (this.onSelect) {
-      this.onSelect(this._buildCollection(days), calendar, e);
+    if (this.args.onSelect) {
+      this.args.onSelect(this._buildCollection(days), calendar, e);
     }
   }
 
@@ -56,7 +61,9 @@ export default class extends CalendarComponent {
     let selected = this.publicAPI.selected || [];
 
     for (let day of days) {
-      let index = selected.findIndex(selectedDate => isSame(day.date, selectedDate, "day"));
+      let index = selected.findIndex((selectedDate) =>
+        isSame(day.date, selectedDate, 'day'),
+      );
       if (index === -1) {
         selected = [...selected, day.date];
       } else {

package/addon/components/power-calendar-range/days.js

@@ -1,12 +1,11 @@
-import { getProperties } from '@ember/object';
 import DaysComponent from '../power-calendar/days';
-import { isBetween, isSame, diff } from 'ember-power-calendar-utils';
+import { isBetween, isSame, diff } from 'ember-power-calendar/utils';
 
 export default class extends DaysComponent {
   // Methods
   buildDay(date, today, calendar) {
     let day = super.buildDay(...arguments);
-    let { start, end } = getProperties(calendar.selected || { start: null, end: null }, 'start', 'end');
+    let { start, end } = calendar.selected || { start: null, end: null };
     if (start && end) {
       day.isSelected = isBetween(date, start, end, 'day', '[]');
       day.isRangeStart = day.isSelected && isSame(date, start, 'day');
@@ -19,8 +18,9 @@ export default class extends DaysComponent {
         day.isRangeStart = day.isSelected = isSame(date, start, 'day');
         if (!day.isDisabled) {
           let diffInMs = Math.abs(diff(day.date, start));
-          day.isDisabled = diffInMs < calendar.minRange
-            || calendar.maxRange !== null && diffInMs > calendar.maxRange;
+          day.isDisabled =
+            diffInMs < calendar.minRange ||
+            (calendar.maxRange !== null && diffInMs > calendar.maxRange);
         }
       }
     }