@ember-eui/pikaday 4.0.3 → 4.0.4

package/addon/{templates/components/eui-pikaday.hbs → components/eui-pikaday/index.hbs}

@@ -20,7 +20,26 @@
     @disabled={{@disabled}}
     @isInvalid={{@isInvalid}}
     ...attributes
-    {{did-insert this.didInsertInput}}
+    {{pikaday
+      @options
+      value=this.value
+      onSelect=this.onSelect
+      setDefaultDate=true
+      defaultDate=@defaultDate
+      onOpen=@onOpen
+      onDraw=this.onDraw
+      onClose=this.onClose
+      format=this.format
+      minDate=@minDate
+      maxDate=@maxDate
+      theme=@theme
+      yearRange=this.yearRange
+      i18n=this.i18n
+      firstDay=this.firstDay
+      container=@container
+      bound=@bound
+    }}
+    {{on 'change' this.didChange}}
   >
     <:prepend as |classes|>
       {{yield classes to="prepend"}}

package/addon/components/eui-pikaday/index.js

@@ -0,0 +1,80 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class EuiPikadayComponent extends Component {
+  get format() {
+    return this.args.format || 'DD.MM.YYYY';
+  }
+
+  get value() {
+    return this.args.value;
+  }
+
+  get yearRange() {
+    const yearRange = this.args.yearRange;
+    if (!yearRange) {
+      return 10;
+    }
+    if (yearRange.indexOf(',') > -1) {
+      const yearArray = yearRange.split(',');
+      if (yearArray[1] === 'currentYear') {
+        yearArray[1] = new Date().getFullYear();
+      }
+      return yearArray;
+    } else {
+      return yearRange;
+    }
+  }
+
+  get i18n() {
+    let i18n = this.args.i18n;
+    if (!i18n) {
+      return undefined;
+    }
+    if (!i18n.t) {
+      return i18n;
+    }
+    return {
+      previousMonth: i18n.t('previousMonth').toString(),
+      nextMonth: i18n.t('nextMonth').toString(),
+      months: i18n.t('months').toString().split(','),
+      weekdays: i18n.t('weekdays').toString().split(','),
+      weekdaysShort: i18n.t('weekdaysShort').toString().split(',')
+    };
+  }
+
+  get firstDay() {
+    return this.args.firstDay == null ? 1 : parseInt(this.args.firstDay, 10);
+  }
+
+  @action
+  onClose() {
+    if (this.isDestroying) {
+      return;
+    }
+    if (!this.#heardValue) {
+      this.onSelect(null);
+    }
+    this.args.onClose?.();
+  }
+
+  #heardValue;
+
+  @action
+  onDraw() {
+    // this is here because apparently the classic behavior is to pass no
+    // arguments to the onDraw callback, but Pikaday's own ownDraw has an
+    // argument.
+    this.args.onDraw?.();
+  }
+
+  @action
+  didChange(event) {
+    this.#heardValue = event.target.value;
+  }
+
+  @action
+  onSelect(date) {
+    this.args.onSelection?.(date);
+  }
+}

package/docs/installation.md

@@ -2,4 +2,6 @@
 
 `ember-pikaday` for `@ember-eui/core`
 
-1. `ember install @ember-eui/pikaday`
+1. `ember install @ember-eui/pikaday`
+
+In order to have styles for pikaday, please refer to [styles section on their documentation](https://github.com/adopted-ember-addons/ember-pikaday#styles)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/pikaday",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "ember-pikaday integration with @ember-eui/core",
   "keywords": [
     "ember-addon",
@@ -31,13 +31,14 @@
   },
   "dependencies": {
     "@ember-decorators/component": "^6.1.0",
-    "@ember-eui/core": "^4.0.3",
+    "@ember-eui/core": "^4.0.4",
     "@types/ember": "^3.16.4",
+    "ember-auto-import": "^2.4.0",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-typescript": "4.2.1",
     "ember-named-blocks-polyfill": "^0.2.3",
-    "ember-pikaday": "^3.0.0",
+    "ember-pikaday": "^4.0.0",
     "ember-svg-jar": "^2.3.4"
   },
   "devDependencies": {
@@ -70,7 +71,6 @@
     "@types/rsvp": "^4.0.4",
     "babel-eslint": "^8.0.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-auto-import": "^2.2.4",
     "ember-cli": "~4.1.1",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-inject-live-reload": "^2.1.0",
@@ -117,5 +117,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "62474e13f2a8273b9a9b58285b9aa30086b5071a"
+  "gitHead": "d0007138cff1b49a85ad28a59bc4080d57042990"
 }

package/addon/components/eui-pikaday.js

@@ -1,87 +0,0 @@
-import Component from '@ember/component';
-// eslint-disable-next-line
-import PikadayMixin from 'ember-pikaday/mixins/pikaday';
-import { isEmpty } from '@ember/utils';
-import { action } from '@ember/object';
-import { tagName, layout } from '@ember-decorators/component';
-import template from '../templates/components/eui-pikaday';
-
-const defaultFormat = 'YYYY-MM-DD';
-
-@tagName('')
-@layout(template)
-export default class EuiPikaday extends Component.extend(PikadayMixin) {
-  useUtc = false;
-  yearRange = '1930,currentYear';
-  useISODate = false;
-  format = defaultFormat;
-
-  init() {
-    this.set('format', this.getDateFormat());
-    super.init(...arguments);
-  }
-
-  getDateFormat() {
-    return this.format || defaultFormat;
-  }
-
-  @action
-  didInsertInput(input) {
-    if (this.isDestroyed) {
-      return;
-    }
-    this.set('field', input);
-    this.setupPikaday();
-  }
-
-  /*
-    destroy component and set the field to null
-  */
-  willDestroyElement() {
-    if (this.isDestroyed) {
-      return;
-    }
-    super.willDestroyElement(...arguments);
-    this.pikaday.destroy();
-    this.set('field', null);
-  }
-
-  /*
-    We convert selected date to correct format
-  */
-  getSelectedDate() {
-    var selectedDate = this.pikaday.getDate();
-
-    if (this.useUTC) {
-      selectedDate = this.moment
-        .utc([
-          selectedDate.getFullYear(),
-          selectedDate.getMonth(),
-          selectedDate.getDate()
-        ])
-        .toDate();
-    }
-    return selectedDate;
-  }
-
-  userSelectedDate() {
-    let selectedDate = this.getSelectedDate();
-    this.onSelection?.(selectedDate);
-  }
-
-  onPikadayOpen() {
-    this.onOpen();
-  }
-
-  onPikadayClose() {
-    if (this.isDestroyed || this.isDestroying) {
-      return;
-    }
-
-    if (this.pikaday.getDate() === null || isEmpty(this.field.value)) {
-      this.onSelection(null);
-    }
-
-    this.onClose();
-  }
-}