ember-power-calendar - npm Package Compare versions

Comparing version 0.13.3 to 0.14.0

addon-test-support/index.js

@@ -39,3 +39,3 @@ import { run } from '@ember/runloop';
   let onCenterChange = calendarComponent.get('onCenterChange');
-  assert('You cannot call `calendarCenter` on a component that doesn\'t has an `onCenterChange` action', !!onCenterChange);
+  assert('You cannot call `calendarCenter` on a component that doesn\'t has an `@onCenterChange` action', !!onCenterChange);
   let publicAPI = calendarComponent.get('publicAPI');
@@ -42,0 +42,0 @@ await run(() => publicAPI.actions.changeCenter(newCenter, publicAPI));

addon/components/power-calendar-multiple.js

 import CalendarComponent from './power-calendar';
-import { computed } from '@ember/object';
+import { computed, action } from '@ember/object';
 import {
@@ -11,49 +11,48 @@ normalizeDate,
 
-export default CalendarComponent.extend({
-  daysComponent: 'power-calendar-multiple/days',
-  _calendarType: 'multiple',
+export default class extends CalendarComponent {
+  daysComponent = 'power-calendar-multiple/days'
+  _calendarType = 'multiple'
 
   // CPs
-  selected: computed({
-    get() {
-      return undefined;
-    },
-    set(_, v) {
-      return isArray(v) ? v.map(normalizeDate) : v;
-    }
-  }),
-  currentCenter: computed('center', function() {
-    let center = this.get('center');
+  @computed
+  get selected() {
+    return undefined;
+  }
+  set selected(v) {
+    return isArray(v) ? v.map(normalizeDate) : v;
+  }
+
+  @computed('center')
+  get currentCenter() {
+    let center = this.center;
     if (!center) {
-      center = (this.get('selected') || [])[0] || this.get('powerCalendarService').getDate();
+      center = (this.selected || [])[0] || this.powerCalendarService.getDate();
     }
     return normalizeDate(center);
-  }),
+  }
 
   // Actions
-  actions: {
-    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
-      );
+  @action
+  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
+    );
 
-      let action = this.get("onSelect");
-      let days;
+    let days;
 
-      if (isArray(dayOrDays)) {
-        days = dayOrDays;
-      } else if (dayOrDays instanceof Object && dayOrDays.date instanceof Date) {
-        days = [dayOrDays];
-      }
+    if (isArray(dayOrDays)) {
+      days = dayOrDays;
+    } else if (dayOrDays instanceof Object && dayOrDays.date instanceof Date) {
+      days = [dayOrDays];
+    }
 
-      if (action) {
-        action(this._buildCollection(days), calendar, e);
-      }
+    if (this.onSelect) {
+      this.onSelect(this._buildCollection(days), calendar, e);
     }
-  },
+  }
 
   // Methods
   _buildCollection(days) {
-    let selected = this.get("publicAPI.selected") || [];
+    let selected = this.publicAPI.selected || [];
 
@@ -71,2 +70,2 @@ for (let day of days) {
   }
-});
+}

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

@@ -5,16 +5,16 @@ import DaysComponent from '../power-calendar/days';
 
-export default DaysComponent.extend({
-  maxLength: fallbackIfUndefined(Infinity),
+export default class extends DaysComponent {
+  @fallbackIfUndefined(Infinity) maxLength
 
   // Methods
-  dayIsSelected(date, calendar = this.get('calendar')) {
+  dayIsSelected(date, calendar = this.calendar) {
     let selected = calendar.selected || [];
     return selected.some((d) => isSame(date, d, 'day'));
-  },
+  }
 
   dayIsDisabled(date) {
-    let numSelected = this.get('calendar.selected.length') || 0;
-    let maxLength = this.get('maxLength') || Infinity;
-    return this._super(...arguments) || (numSelected >= maxLength && !this.dayIsSelected(date));
+    let numSelected = (this.calendar.selected && this.calendar.selected.length) || 0;
+    let maxLength = this.maxLength || Infinity;
+    return super.dayIsDisabled(...arguments) || (numSelected >= maxLength && !this.dayIsSelected(date));
   }
-});
+}

addon/components/power-calendar-range.js

@@ -1,2 +0,2 @@
-import { computed, getProperties } from '@ember/object';
+import { computed, action, getProperties } from '@ember/object';
 import { assign } from '@ember/polyfills';
@@ -15,92 +15,91 @@ import CalendarComponent from './power-calendar';
 
-export default CalendarComponent.extend({
-  daysComponent: 'power-calendar-range/days',
-  _calendarType: 'range',
-  proximitySelection: fallbackIfUndefined(false),
+export default class extends CalendarComponent {
+  @fallbackIfUndefined(false) proximitySelection
+  daysComponent = 'power-calendar-range/days'
+  _calendarType = 'range'
 
   // CPs
-  minRange: computed({
-    get() {
-      return 86400000;
-    },
-    set(_, v) {
-      if (typeof v === 'number') {
-        return v * 86400000;
-      }
-      return normalizeDuration(v === undefined ? 86400000 : v);
+  @computed
+  get minRange() {
+    return 86400000;
+  }
+  set minRange(v) {
+    if (typeof v === 'number') {
+      return v * 86400000;
     }
-  }),
-  maxRange: computed({
-    get() {
-      return null;
-    },
-    set(_, v) {
-      if (typeof v === 'number') {
-        return v * 86400000;
-      }
-      return normalizeDuration(v === undefined ? 86400000 : v);
+    return normalizeDuration(v === undefined ? 86400000 : v);
+  }
+
+  @computed
+  get maxRange() {
+    return null;
+  }
+  set maxRange(v) {
+    if (typeof v === 'number') {
+      return v * 86400000;
     }
-  }),
-  selected: computed({
-    get() {
-      return { start: undefined, end: undefined };
-    },
-    set(_, v) {
-      if (v === undefined || v === null) {
-        v = {};
-      }
-      return { start: normalizeDate(v.start), end: normalizeDate(v.end) };
+    return normalizeDuration(v === undefined ? 86400000 : v);
+  }
+
+  @computed
+  get selected() {
+    return { start: undefined, end: undefined };
+  }
+  set selected(v) {
+    if (v === undefined || v === null) {
+      v = {};
     }
-  }),
+    return { start: normalizeDate(v.start), end: normalizeDate(v.end) };
+  }
 
-  currentCenter: computed('center', function() {
-    let center = this.get('center');
+  @computed('center')
+  get currentCenter() {
+    let center = this.center;
     if (!center) {
-      center = this.get('selected.start') || this.get('powerCalendarService').getDate();
+      center = this.selected.start || this.powerCalendarService.getDate();
     }
     return normalizeDate(center);
-  }),
+  }
 
-  publicAPI: computed('_publicAPI', 'minRange', 'maxRange', function() {
+  @computed('_publicAPI', 'minRange', 'maxRange')
+  get publicAPI() {
     let rangeOnlyAPI = this.getProperties('minRange', 'maxRange');
-    return assign(rangeOnlyAPI, this.get('_publicAPI'));
-  }),
+    return assign(rangeOnlyAPI, this._publicAPI);
+  }
 
   // Actions
-  actions: {
-    select({ date }, calendar, e) {
-      assert(
-        'date must be either a Date, or a Range', 
-        date && (date.hasOwnProperty('start') || date.hasOwnProperty('end') || date instanceof Date)
-      );
+  @action
+  select({ date }, calendar, e) {
+    assert(
+      'date must be either a Date, or a Range',
+      date && (date.hasOwnProperty('start') || date.hasOwnProperty('end') || date instanceof Date)
+    );
 
-      let range;
-      if (date && (date.hasOwnProperty('start') || date.hasOwnProperty('end'))) {
-        range = { date };
-      } else {
-        range = this._buildRange({ date });
-      }
+    let range;
+    if (date && (date.hasOwnProperty('start') || date.hasOwnProperty('end'))) {
+      range = { date };
+    } else {
+      range = this._buildRange({ date });
+    }
 
-      let { start, end } = range.date;
-      if (start && end) {
-        let { minRange, maxRange } = this.get('publicAPI');
-        let diffInMs = Math.abs(diff(end, start));
-        if (diffInMs < minRange || maxRange && diffInMs > maxRange) {
-          return;
-        }
+    let { start, end } = range.date;
+    if (start && end) {
+      let { minRange, maxRange } = this.publicAPI;
+      let diffInMs = Math.abs(diff(end, start));
+      if (diffInMs < minRange || maxRange && diffInMs > maxRange) {
+        return;
       }
+    }
 
-      let action = this.get('onSelect');
-      if (action) {
-        action(range, calendar, e);
-      }
+    if (this.onSelect) {
+      this.onSelect(range, calendar, e);
     }
-  },
+  }
 
   // Methods
   _buildRange(day) {
-    let selected = this.get('publicAPI.selected') || { start: null, end: null };
+    let selected = this.publicAPI.selected || { start: null, end: null };
     let { start, end } = getProperties(selected, 'start', 'end');
 
-    if (this.get('proximitySelection')) {
+    if (this.proximitySelection) {
       return this._buildRangeByProximity(day, start, end);
@@ -110,3 +109,3 @@ }
     return this._buildDefaultRange(day, start, end);
-  },
+  }
 
@@ -130,3 +129,3 @@ _buildRangeByProximity(day, start, end) {
     return this._buildDefaultRange(day, start, end);
-  },
+  }
 
@@ -143,2 +142,2 @@ _buildDefaultRange(day, start, end) {
   }
-});
+}

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

@@ -5,6 +5,6 @@ import { getProperties } from '@ember/object';
 
-export default DaysComponent.extend({
+export default class extends DaysComponent {
   // Methods
   buildDay(date, today, calendar) {
-    let day = this._super(...arguments);
+    let day = super.buildDay(...arguments);
     let { start, end } = getProperties(calendar.selected || { start: null, end: null }, 'start', 'end');
@@ -29,3 +29,3 @@ if (start && end) {
     return day;
-  },
+  }
 
@@ -35,2 +35,2 @@ dayIsSelected() {
   }
-});
+}

addon/components/power-calendar.js

@@ -0,7 +1,8 @@
+import { layout, tagName } from "@ember-decorators/component";
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { computed, action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
-import { inject } from '@ember/service';
+import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency';
-import layout from '../templates/components/power-calendar';
+import templateLayout from '../templates/components/power-calendar';
 import { assert } from '@ember/debug';
@@ -13,39 +14,38 @@ import {
 } from 'ember-power-calendar-utils';
-export default Component.extend({
-  layout,
-  classNames: ['ember-power-calendar'],
-  powerCalendarService: inject('power-calendar'),
-  navComponent: 'power-calendar/nav',
-  daysComponent: 'power-calendar/days',
-  center: null,
-  _calendarType: 'single',
 
+export default @layout(templateLayout) @tagName('') class extends Component {
+  @service('power-calendar') powerCalendarService
+  navComponent = 'power-calendar/nav'
+  daysComponent = 'power-calendar/days'
+  center = null
+  _calendarType = 'single'
+
   // Lifecycle chooks
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.registerCalendar();
-    let onInit = this.get('onInit');
-    if (onInit) {
-      onInit(this.get('publicAPI'));
+    if (this.onInit) {
+      this.onInit(this.publicAPI);
     }
-  },
+  }
 
   willDestroy() {
-    this._super(...arguments);
+    super.willDestroy(...arguments);
     this.unregisterCalendar();
-  },
+  }
 
   // CPs
-  publicActions: computed('onSelect', 'onCenterChange', function() {
+  @computed('onSelect', 'onCenterChange')
+  get publicActions() {
     let actions = {};
-    if (this.get('onSelect')) {
-      actions.select = (...args) => this.send('select', ...args);
+    if (this.onSelect) {
+      actions.select = (...args) => this.select(...args)
     }
-    if (this.get('onCenterChange')) {
+    if (this.onCenterChange) {
       let changeCenter = (newCenter, calendar, e) => {
-        return this.get('changeCenterTask').perform(newCenter, calendar, e);
+        return this.changeCenterTask.perform(newCenter, calendar, e);
       };
       actions.changeCenter = changeCenter;
       actions.moveCenter = (step, unit, calendar, e) => {
-        let newCenter = add(this.get('currentCenter'), step, unit);
+        let newCenter = add(this.currentCenter, step, unit);
         return changeCenter(newCenter, calendar, e);
@@ -55,54 +55,53 @@ };
     return actions;
-  }),
+  }
 
-  selected: computed({
-    get() {
-      return undefined;
-    },
-    set(_, v) {
-      return normalizeDate(v);
-    }
-  }),
+  @computed
+  get selected() {
+    return undefined;
+  }
+  set selected(v) {
+    return normalizeDate(v);
+  }
 
-  currentCenter: computed('center', function() {
-    let center = this.get('center');
+  @computed('center')
+  get currentCenter() {
+    let center = this.center;
     if (!center) {
-      center = this.get('selected') || this.get('powerCalendarService').getDate()
+      center = this.selected || this.powerCalendarService.getDate()
     }
     return normalizeDate(center);
-  }),
+  }
 
-  publicAPI: computed('_publicAPI', function() {
-    return this.get('_publicAPI');
-  }),
+  @computed('_publicAPI')
+  get publicAPI() {
+    return this._publicAPI;
+  }
 
-  _publicAPI: computed('selected', 'currentCenter', 'locale', 'powerCalendarService.locale', 'changeCenterTask.isRunning', 'publicActions', function() {
+  @computed('selected', 'currentCenter', 'locale', 'powerCalendarService.locale', 'changeCenterTask.isRunning', 'publicActions')
+  get _publicAPI() {
     return {
       uniqueId: guidFor(this),
-      type: this.get('_calendarType'),
-      selected: this.get('selected'),
-      loading: this.get('changeCenterTask.isRunning'),
-      center: this.get('currentCenter'),
-      locale: this.get('locale') || this.get('powerCalendarService.locale'),
-      actions: this.get('publicActions')
+      type: this._calendarType,
+      selected: this.selected,
+      loading: this.changeCenterTask.isRunning,
+      center: this.currentCenter,
+      locale: this.locale || this.powerCalendarService.locale,
+      actions: this.publicActions
     };
-  }),
+  }
 
   // Actions
-  actions: {
-    select(day, calendar, e) {
-      let action = this.get('onSelect');
-      if (action) {
-        action(day, calendar, e);
-      }
+  @action
+  select(day, calendar, e) {
+    if (this.onSelect) {
+      this.onSelect(day, calendar, e);
     }
-  },
+  }
 
   // Tasks
-  changeCenterTask: task(function* (newCenter, calendar, e) {
-    let action = this.get('onCenterChange');
-    assert('You attempted to move the center of a calendar that doesn\'t receive an `onCenterChange` action.', typeof action === 'function');
+  @(task(function* (newCenter, calendar, e) {
+    assert('You attempted to move the center of a calendar that doesn\'t receive an `@onCenterChange` action.', typeof this.onCenterChange === 'function');
     let value = normalizeCalendarValue({ date: newCenter });
-    yield action(value, calendar, e);
-  }),
+    yield this.onCenterChange(value, calendar, e);
+  })) changeCenterTask
 
@@ -115,3 +114,3 @@ // Methods
     }
-  },
+  }
 
@@ -123,2 +122,2 @@ unregisterCalendar() {
   }
-});
+}

addon/components/power-calendar/days.js

@@ -0,7 +1,8 @@
+import { layout, tagName } from "@ember-decorators/component";
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { computed, action } from '@ember/object';
 import { scheduleOnce } from '@ember/runloop';
-import { inject } from '@ember/service';
+import { inject as service } from '@ember/service';
 import { assert } from '@ember/debug';
-import layout from '../../templates/components/power-calendar/days';
+import templateLayout from '../../templates/components/power-calendar/days';
 import {
@@ -36,45 +37,45 @@ add,
 
-export default Component.extend({
-  layout,
-  focusedId: null,
-  showDaysAround: true,
-  classNames: ['ember-power-calendar-days'],
-  weekdayFormat: 'short', // "min" | "short" | "long"
-  powerCalendarService: inject('power-calendar'),
-  attributeBindings: [
-    'data-power-calendar-id'
-  ],
+export default @layout(templateLayout) @tagName('') class extends Component {
+  focusedId = undefined
+  center = undefined
+  showDaysAround = true
+  weekdayFormat = 'short' // "min" | "short" | "long"
+  @service('power-calendar') powerCalendarService
 
   // CPs
-  'data-power-calendar-id': computed.oneWay('calendar.uniqueId'),
-  weekdaysMin: computed('calendar.locale', function() {
-    return withLocale(this.get("calendar.locale"), getWeekdaysMin);
-  }),
+  @computed('calendar.locale')
+  get weekdaysMin() {
+    return withLocale(this.calendar.locale, getWeekdaysMin);
+  }
 
-  weekdaysShort: computed('calendar.locale', function() {
-    return withLocale(this.get("calendar.locale"), getWeekdaysShort);
-  }),
+  @computed('calendar.locale')
+  get weekdaysShort() {
+    return withLocale(this.calendar.locale, getWeekdaysShort);
+  }
 
-  weekdays: computed('calendar.locale', function() {
-    return withLocale(this.get("calendar.locale"), getWeekdays);
-  }),
+  @computed('calendar.locale')
+  get weekdays() {
+    return withLocale(this.calendar.locale, getWeekdays);
+  }
 
-  localeStartOfWeek: computed('weekdaysShort', 'startOfWeek', function() {
-    let forcedStartOfWeek = this.get('startOfWeek');
+  @computed('weekdaysShort', 'startOfWeek')
+  get localeStartOfWeek() {
+    let forcedStartOfWeek = this.startOfWeek;
     if (forcedStartOfWeek) {
       return parseInt(forcedStartOfWeek, 10);
     }
-    return localeStartOfWeek(this.get('calendar.locale'));
-  }),
+    return localeStartOfWeek(this.calendar.locale);
+  }
 
-  weekdaysNames: computed('localeStartOfWeek', 'weekdayFormat', 'calendar.locale', function() {
-    let { localeStartOfWeek, weekdayFormat } = this.getProperties('localeStartOfWeek', 'weekdayFormat');
+  @computed('localeStartOfWeek', 'weekdayFormat', 'calendar.locale')
+  get weekdaysNames() {
+    let { localeStartOfWeek, weekdayFormat } = this;
     let format = `weekdays${weekdayFormat === 'long' ? '' : (weekdayFormat === 'min' ? 'Min' : 'Short')}`;
-    let weekdaysNames = this.get(format);
+    let weekdaysNames = this[format];
     return weekdaysNames.slice(localeStartOfWeek).concat(weekdaysNames.slice(0, localeStartOfWeek));
-  }),
+  }
 
-  days: computed('calendar', 'focusedId', 'localeStartOfWeek', 'minDate', 'maxDate', 'disabledDates.[]', 'maxLength', function() {
-    let today = this.get('powerCalendarService').getDate();
-    let calendar = this.get('calendar');
+  @computed('calendar', 'focusedId', 'localeStartOfWeek', 'minDate', 'maxDate', 'disabledDates.[]', 'maxLength')
+  get days() {
+    let today = this.powerCalendarService.getDate();
     let lastDay = this.lastDay();
@@ -84,10 +85,11 @@ let day = this.firstDay();
     while (isBefore(day, lastDay)) {
-      days.push(this.buildDay(day, today, calendar));
+      days.push(this.buildDay(day, today, this.calendar));
       day = add(day, 1, "day");
     }
     return days;
-  }),
+  }
 
-  weeks: computed('showDaysAround', 'days', function() {
-    let { showDaysAround, days } = this.getProperties('showDaysAround', 'days');
+  @computed('showDaysAround', 'days')
+  get weeks() {
+    let { showDaysAround, days } = this;
     let weeks = [];
@@ -108,93 +110,77 @@ let i = 0;
     return weeks;
-  }),
+  }
 
-  center: null,
-
-  currentCenter: computed('center', 'calendar.center', function() {
-    let center = this.get('center');
+  @computed('center', 'calendar.center')
+  get currentCenter() {
+    let center = this.center;
     if (!center) {
-      center = this.get('selected') || this.get('calendar.center');
+      center = this.selected || this.calendar.center;
     }
     return normalizeDate(center);
-  }),
+  }
 
-  // Lifecycle hooks
-  init() {
-    this._super(...arguments);
-    this._handleDayClick = this._handleDayClick.bind(this);
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-    this.element.addEventListener('click', this._handleDayClick);
-  },
-
-  willRemoveElement() {
-    this._super(...arguments);
-    this.element.removeEventListener('click', this._handleDayClick);
-  },
-
   // Actions
-  actions: {
-    onFocusDay(day) {
-      scheduleOnce('actions', this, this._updateFocused, day.id);
-    },
+  @action
+  handleDayFocus(e) {
+    scheduleOnce('actions', this, this._updateFocused, e.target.dataset.date);
+  }
 
-    onBlurDay() {
-      scheduleOnce('actions', this, this._updateFocused, null);
-    },
+  @action
+  handleDayBlur() {
+    scheduleOnce('actions', this, this._updateFocused, null);
+  }
 
-    onKeyDown(calendar, e) {
-      let focusedId = this.get('focusedId');
-      if (focusedId) {
-        let days = this.get('days');
-        let day, index;
-        for (let i = 0; i < days.length; i++) {
-          if (days[i].id === focusedId) {
-            index = i;
-            break;
-          }
+  @action
+  handleKeyDown(e) {
+    let { focusedId } = this;
+    if (focusedId) {
+      let days = this.days;
+      let day, index;
+      for (let i = 0; i < days.length; i++) {
+        if (days[i].id === focusedId) {
+          index = i;
+          break;
         }
-        if (e.keyCode === 38) {
-          e.preventDefault();
-          let newIndex = Math.max(index - 7, 0);
-          day = days[newIndex];
-          if (day.isDisabled) {
-            for (let i = newIndex + 1; i <= index; i++) {
-              day = days[i];
-              if (!day.isDisabled) {
-                break;
-              }
+      }
+      if (e.keyCode === 38) {
+        e.preventDefault();
+        let newIndex = Math.max(index - 7, 0);
+        day = days[newIndex];
+        if (day.isDisabled) {
+          for (let i = newIndex + 1; i <= index; i++) {
+            day = days[i];
+            if (!day.isDisabled) {
+              break;
             }
           }
-        } else if (e.keyCode === 40) {
-          e.preventDefault();
-          let newIndex = Math.min(index + 7, days.length - 1);
-          day = days[newIndex];
-          if (day.isDisabled) {
-            for (let i = newIndex - 1; i >= index; i--) {
-              day = days[i];
-              if (!day.isDisabled) {
-                break;
-              }
+        }
+      } else if (e.keyCode === 40) {
+        e.preventDefault();
+        let newIndex = Math.min(index + 7, days.length - 1);
+        day = days[newIndex];
+        if (day.isDisabled) {
+          for (let i = newIndex - 1; i >= index; i--) {
+            day = days[i];
+            if (!day.isDisabled) {
+              break;
             }
           }
-        } else if (e.keyCode === 37) {
-          day = days[Math.max(index - 1, 0)];
-          if (day.isDisabled) {
-            return;
-          }
-        } else if (e.keyCode === 39) {
-          day = days[Math.min(index + 1, days.length - 1)];
-          if (day.isDisabled) {
-            return;
-          }
-        } else {
+        }
+      } else if (e.keyCode === 37) {
+        day = days[Math.max(index - 1, 0)];
+        if (day.isDisabled) {
           return;
         }
-        this.set('focusedId', day.id);
-        scheduleOnce('afterRender', this, '_focusDate', day.id);
+      } else if (e.keyCode === 39) {
+        day = days[Math.min(index + 1, days.length - 1)];
+        if (day.isDisabled) {
+          return;
+        }
+      } else {
+        return;
       }
+      this.set('focusedId', day.id);
+      scheduleOnce('afterRender', this, '_focusDate', day.id);
     }
-  },
+  }
 
@@ -210,19 +196,19 @@ // Methods
       isDisabled: this.dayIsDisabled(date),
-      isFocused: this.get('focusedId') === id,
-      isCurrentMonth: date.getMonth() === this.get('currentCenter').getMonth(),
+      isFocused: this.focusedId === id,
+      isCurrentMonth: date.getMonth() === this.currentCenter.getMonth(),
       isToday: isSame(date, today, 'day'),
       isSelected: this.dayIsSelected(date, calendar)
     });
-  },
+  }
 
   buildonSelectValue(day) {
     return day;
-  },
+  }
 
-  dayIsSelected(date, calendar = this.get('calendar')) {
+  dayIsSelected(date, calendar = this.calendar) {
     return calendar.selected ? isSame(date, calendar.selected, 'day') : false;
-  },
+  }
 
   dayIsDisabled(date) {
-    let isDisabled = !this.get('calendar.actions.select');
+    let isDisabled = !this.calendar.actions.select;
     if (isDisabled) {
@@ -232,16 +218,13 @@ return true;
 
-    let minDate = this.get('minDate');
-    if (minDate && isBefore(date, minDate)) {
+    if (this.minDate && isBefore(date, this.minDate)) {
       return true;
     }
 
-    let maxDate = this.get('maxDate');
-    if (maxDate && isAfter(date, maxDate)) {
+    if (this.maxDate && isAfter(date, this.maxDate)) {
       return true;
     }
 
-    let disabledDates = this.get('disabledDates');
 
-    if (disabledDates) {
-      let disabledInRange = disabledDates.some((d) => {
+    if (this.disabledDates) {
+      let disabledInRange = this.disabledDates.some((d) => {
         let isSameDay = isSame(date, d, 'day');
@@ -258,36 +241,36 @@ let isWeekDayIncludes = WEEK_DAYS.indexOf(d) !== -1 && formatDate(date, 'ddd') === d;
     return false;
-  },
+  }
 
   firstDay() {
-    let firstDay = startOf(this.get('currentCenter'), 'month');
-    return startOfWeek(firstDay, this.get('localeStartOfWeek'));
-  },
+    let firstDay = startOf(this.currentCenter, 'month');
+    return startOfWeek(firstDay, this.localeStartOfWeek);
+  }
 
   lastDay() {
-    let localeStartOfWeek = this.get('localeStartOfWeek');
-    assert("The center of the calendar is an invalid date.", !isNaN(this.get('currentCenter').getTime()));
-    let lastDay = endOf(this.get('currentCenter'), 'month')
+    let localeStartOfWeek = this.localeStartOfWeek;
+    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);
-  },
+  }
 
   _focusDate(id) {
-    let dayElement = this.element.querySelector(`[data-date="${id}"]`);
+    let dayElement = document.querySelector(`[data-power-calendar-id="${this.calendar.uniqueId}"] [data-date="${id}"]`);
     if (dayElement) {
       dayElement.focus();
     }
-  },
+  }
 
-  _handleDayClick(e) {
+  @action
+  handleClick(e) {
     let dayEl = e.target.closest('[data-date]');
     if (dayEl) {
       let dateStr = dayEl.dataset.date;
-      let day = this.get('days').find(d => d.id === dateStr);
+      let day = this.days.find(d => d.id === dateStr);
       if (day) {
-        let calendar = this.get('calendar');
-        if (calendar.actions.select) {
-          calendar.actions.select(day, calendar, e);
+        if (this.calendar.actions.select) {
+          this.calendar.actions.select(day, this.calendar, e);
         }
@@ -297,2 +280,2 @@ }
   }
-});
+}

addon/components/power-calendar/nav.js

 import Component from '@ember/component';
-import layout from '../../templates/components/power-calendar/nav';
+import { layout, tagName } from "@ember-decorators/component";
+import templateLayout from '../../templates/components/power-calendar/nav';
 
-export default Component.extend({
-  layout,
-  tagName: '',
-  unit: 'month',
-  format: 'MMMM YYYY'
-});
+export default @layout(templateLayout) @tagName('') class extends Component {
+  unit = 'month'
+  format = 'MMMM YYYY'
+}

addon/services/power-calendar.js

@@ -5,14 +5,15 @@ import Service from '@ember/service';
 
-export default Service.extend({
-  date: null,
+export default class extends Service {
+  date = null
 
   // CPs
-  locale: computed(function() {
+  @computed
+  get locale() {
     return getDefaultLocale();
-  }),
+  }
 
   // Methods
   getDate() {
-    return this.get("date") || new Date();
+    return this.date || new Date();
   }
-});
+}

CHANGELOG.md

@@ -28,3 +28,3 @@ ## Master
 ## 0.10.2
-- [ENHANCEMENT] Allow pass a `@unit` and `@format` to the `calendar.nav` component, which used to be
+- [ENHANCEMENT] Allow pass a `@unit` and `@format` to the `calendar.Nav` component, which used to be
   hardcoded values (`'month'` and `'MMMM YYYY'` respetively).
@@ -197,3 +197,3 @@
 ## 0.1.1
-- [FEATURE] Add `minDate` and `maxDate` to default `{{calendar.days}}` component to disabled days before/after
+- [FEATURE] Add `minDate` and `maxDate` to default `<calendar.Days/>` component to disabled days before/after
   some specific date.

LICENSE.md

 The MIT License (MIT)
 
-Copyright (c) 2018
+Copyright (c) 2019
 
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

package.json

 {
   "name": "ember-power-calendar",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "Powerful and customizable calendar component for Ember",
@@ -14,3 +14,3 @@ "scripts": {
   "engines": {
-    "node": "6.* || 8.* || >= 10.*"
+    "node": "8.* || >= 10.*"
   },
@@ -26,8 +26,9 @@ "files": [
     "@ember/optional-features": "^0.7.0",
+    "babel-eslint": "^10.0.2",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-basic-dropdown": "^1.1.0",
-    "ember-cli": "~3.6.0",
+    "ember-basic-dropdown": "^2.0.0",
+    "ember-cli": "~3.11.0-beta.3",
     "ember-cli-app-version": "^3.2.0",
     "ember-cli-custom-assertions": "^0.1.1",
-    "ember-cli-dependency-checker": "^3.0.0",
+    "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-htmlbars-inline-precompile": "^2.1.0",
@@ -49,5 +50,5 @@ "ember-cli-inject-live-reload": "^2.0.1",
     "ember-power-calendar-moment": "^0.1.7",
-    "ember-power-select": "^2.2.1",
+    "ember-power-select": "^3.0.1",
     "ember-resolver": "^5.0.1",
-    "ember-source": "~3.6.1",
+    "ember-source": "~3.11.1",
     "ember-source-channel-url": "^1.1.0",
@@ -57,7 +58,7 @@ "ember-truth-helpers": "^2.1.0",
     "eslint": "^5.10.0",
-    "eslint-plugin-ember": "^6.0.1",
-    "eslint-plugin-node": "^8.0.0",
+    "eslint-plugin-ember": "^6.2.0",
+    "eslint-plugin-node": "^9.0.1",
     "loader.js": "^4.7.0",
     "memory-scroll": "0.9.1",
-    "qunit-dom": "^0.8.3",
+    "qunit-dom": "^0.8.4",
     "sass": "^1.15.2"
@@ -82,6 +83,7 @@ },
   "dependencies": {
+    "@ember-decorators/component": "^6.0.0",
     "ember-assign-helper": "^0.2.0",
-    "ember-cli-babel": "^7.2.0",
+    "ember-cli-babel": "^7.7.3",
     "ember-cli-element-closest-polyfill": "^0.0.1",
-    "ember-cli-htmlbars": "^3.0.1",
+    "ember-cli-htmlbars": "^3.1.0",
     "ember-concurrency": "^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0"
@@ -88,0 +90,0 @@ },

README.md

@@ -31,6 +31,6 @@ # Ember Power Calendar [![Build Status](https://travis-ci.org/cibernox/ember-power-calendar.svg?branch=master)](https://travis-ci.org/cibernox/ember-power-calendar)
 ```hbs
-{{#power-calendar selected=arrival onSelect=(action (mut arrival) value="date") as |calendar|}}
-  {{calendar.nav}}
-  {{calendar.days}}
-{{/power-calendar}}
+<PowerCalendar @selected={{arrival}} @onSelect={{action (mut arrival) value="date"}} as |calendar|>
+  <calendar.Nav/>
+  <calendar.Days/>
+</PowerCalendar>
 ```
@@ -37,0 +37,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

52231

decreased by-1.55%

Dependency count

6

increased by20%

Dev dependency count

37

increased by2.78%

Lines of code

741

decreased by-2.63%

Dependency changes

• + Added@ember-decorators/component@^6.0.0

• + Added@ember-decorators/component@6.1.1(transitive)

• + Added@ember-decorators/utils@6.1.1(transitive)

• Updatedember-cli-babel@^7.7.3

• Updatedember-cli-htmlbars@^3.1.0