@projectcaluma/ember-form 11.0.0-beta.30 → 11.0.0-beta.31

package/addon/components/cf-field/input/date.hbs

@@ -1,30 +1,12 @@
-{{#if @disabled}}
-  <input
-    class="uk-input uk-disabled"
-    type="text"
-    name={{@field.pk}}
-    id={{@field.pk}}
-    value={{format-date
-      @field.answer.value
-      day="2-digit"
-      month="2-digit"
-      year="numeric"
-    }}
-    readonly
-  />
-{{else}}
-  <input
-    class="uk-input"
-    type="text"
-    name={{@field.pk}}
-    id={{@field.pk}}
-    {{pikaday
-      firstDay=1
-      toString=this.formatDate
-      i18n=this.pikadayTranslations
-      value=@field.answer.value
-      onSelect=this.onChange
-      parse=this.parseDate
-    }}
-  />
-{{/if}}
+<EmberFlatpickr
+  id={{@field.pk}}
+  name={{@field.pk}}
+  class="uk-input {{if @disabled 'uk-disabled'}}"
+  readonly={{@disabled}}
+  @disabled={{@disabled}}
+  @locale={{this.locale}}
+  @date={{or @field.answer.value null}}
+  @formatDate={{this.formatDate}}
+  @allowInput={{true}}
+  @onChange={{this.onChange}}
+/>

package/addon/components/cf-field/input/date.js

@@ -1,28 +1,19 @@
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
-import { DateTime, Info } from "luxon";
-import { cached } from "tracked-toolbox";
-
-// put the last element to the front of the array
-const shift = (array) => [...array.slice(-1), ...array.slice(0, -1)];
+import { DateTime } from "luxon";
 
 export default class CfFieldInputDateComponent extends Component {
   @service intl;
 
-  @action
-  onChange(date) {
-    // Change Javascript date to ISO string if not null.
-    this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
+  get locale() {
+    return this.intl.primaryLocale.split("-")[0];
   }
 
   @action
-  parseDate(value) {
-    const date = DateTime.fromFormat(value, "D", {
-      locale: this.intl.primaryLocale,
-    });
-
-    return date.isValid ? date.toJSDate() : null;
+  onChange([date]) {
+    // Change Javascript date to ISO string if not null.
+    this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
   }
 
   @action
@@ -33,17 +24,4 @@ export default class CfFieldInputDateComponent extends Component {
       year: "numeric",
     });
   }
-
-  @cached
-  get pikadayTranslations() {
-    const locale = this.intl.primaryLocale;
-
-    return {
-      previousMonth: this.intl.t("caluma.form.pikaday.month-previous"),
-      nextMonth: this.intl.t("caluma.form.pikaday.month-next"),
-      months: Info.months("long", { locale }),
-      weekdays: shift(Info.weekdays("long", { locale })),
-      weekdaysShort: shift(Info.weekdays("short", { locale })),
-    };
-  }
 }

package/addon/lib/field.js

@@ -770,7 +770,7 @@ export default class Field extends Base {
   async _validateDynamicChoiceQuestion() {
     await this.question.dynamicOptions;
 
-    return this._validateOption(this.answer.value);
+    return this._validateOption(this.answer.value, true);
   }
 
   /**
@@ -790,7 +790,9 @@ export default class Field extends Base {
 
     await this.question.dynamicOptions;
 
-    return value.map((value) => this._validateOption(value));
+    return this.answer.value
+      ? value.map((value) => this._validateOption(value))
+      : true;
   }
 
   _validateOption(value, allowBlank = false) {

package/app/styles/@projectcaluma/ember-form.scss

@@ -3,6 +3,8 @@
 @import "../cf-field";
 @import "../cf-navigation";
 
+@import "../flatpickr";
+
 @import "../uikit-overwrites";
 
 .table-controls > .uk-icon {

package/app/styles/_flatpickr.scss

@@ -0,0 +1,47 @@
+$flatpickr-today-color: $global-warning-background;
+$flatpickr-selected-color: $global-primary-background;
+
+span.flatpickr-day {
+  font-weight: $base-body-font-weight;
+
+  &.today:not(.selected) {
+    border-bottom-color: $flatpickr-today-color;
+
+    &:hover {
+      background: $flatpickr-today-color;
+      border-color: $flatpickr-today-color;
+    }
+  }
+
+  &.selected {
+    background: $flatpickr-selected-color;
+    border-color: $flatpickr-selected-color;
+    font-weight: 700;
+
+    &:hover {
+      background: darken($flatpickr-selected-color, 10%);
+      border-color: darken($flatpickr-selected-color, 10%);
+    }
+  }
+}
+
+.flatpickr-months {
+  .flatpickr-prev-month:hover,
+  .flatpickr-next-month:hover {
+    color: $flatpickr-today-color;
+  }
+}
+
+span.flatpickr-weekday {
+  font-size: $global-small-font-size;
+  font-weight: $base-body-font-weight;
+}
+
+.flatpickr-current-month {
+  font-size: $global-font-size;
+  font-weight: $base-body-font-weight;
+
+  .flatpickr-monthDropdown-months {
+    font-weight: $base-body-font-weight;
+  }
+}

package/blueprints/@projectcaluma/ember-form/index.js

@@ -10,7 +10,7 @@ module.exports = {
         { name: "ember-cli-showdown" },
         { name: "ember-composable-helpers" },
         { name: "ember-math-helpers" },
-        { name: "ember-pikaday" },
+        { name: "ember-flatpickr" },
         { name: "ember-power-select" },
         { name: "ember-autoresize-modifier" },
       ],

package/index.js

@@ -2,4 +2,16 @@
 
 module.exports = {
   name: require("./package").name,
+
+  included(...args) {
+    const app = this._findHost(this);
+
+    app.options.flatpickr = {
+      locales: ["de", "fr"],
+      theme: "airbnb",
+      ...(app.options.flatpickr ?? {}),
+    };
+
+    this._super.included.apply(this, args);
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.30",
+  "version": "11.0.0-beta.31",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -9,7 +9,7 @@
   "homepage": "https://docs.caluma.io/ember-caluma",
   "repository": "github:projectcaluma/ember-caluma",
   "scripts": {
-    "test": "npm-run-all test:*",
+    "test": "npm-run-all --print-name \"lint\" \"test:*\"",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each"
   },
@@ -19,7 +19,7 @@
     "@embroider/util": "^1.9.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@projectcaluma/ember-core": "^11.0.0-beta.30",
+    "@projectcaluma/ember-core": "^11.0.0-beta.31",
     "ember-apollo-client": "~4.0.2",
     "ember-auto-import": "^2.4.3",
     "ember-autoresize-modifier": "^0.6.0",
@@ -29,10 +29,10 @@
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^2.3.7",
     "ember-fetch": "^8.1.2",
+    "ember-flatpickr": "^3.2.3",
     "ember-in-viewport": "^4.0.2",
     "ember-intl": "^5.7.2",
     "ember-math-helpers": "^2.18.2",
-    "ember-pikaday": "^4.0.0",
     "ember-power-select": "^6.0.1",
     "ember-resources": "^5.4.0",
     "ember-uikit": "^6.1.0",
@@ -48,10 +48,10 @@
     "@ember/test-helpers": "2.7.0",
     "@embroider/test-setup": "1.8.3",
     "@faker-js/faker": "7.6.0",
-    "@projectcaluma/ember-testing": "11.0.0-beta.30",
-    "@projectcaluma/ember-workflow": "^11.0.0-beta.30",
+    "@projectcaluma/ember-testing": "11.0.0-beta.31",
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.31",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "4.7.0",
+    "ember-cli": "4.8.0",
     "ember-cli-code-coverage": "1.0.3",
     "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-inject-live-reload": "2.1.0",
@@ -74,7 +74,7 @@
     "webpack": "5.74.0"
   },
   "peerDependencies": {
-    "@projectcaluma/ember-workflow": "^11.0.0-beta.30"
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.31"
   },
   "peerDependenciesMeta": {
     "@projectcaluma/ember-workflow": {
@@ -82,7 +82,7 @@
     }
   },
   "engines": {
-    "node": "14.* || >= 16"
+    "node": "14.* || 16.* || >= 18"
   },
   "ember": {
     "edition": "octane"

package/translations/de.yaml

@@ -51,7 +51,3 @@ caluma:
       uploadFailed: "Beim Hochladen ist ein Fehler aufgetreten."
       format: "{errorMsg}"
       table: "Mindestens eine Zeile der Tabelle wurde nicht korrekt ausgefüllt"
-
-    pikaday:
-      month-previous: "Vorheriger Monat"
-      month-next: "Nächster Monat"

package/translations/en.yaml

@@ -51,7 +51,3 @@ caluma:
       uploadFailed: "An error occured during upload."
       format: "{errorMsg}"
       table: "At least one row of the table was not filled in correctly"
-
-    pikaday:
-      month-previous: "Previous month"
-      month-next: "Next month"

package/translations/fr.yaml

@@ -51,7 +51,3 @@ caluma:
       uploadFailed: "Une erreur s'est produite pendant le téléchargement."
       format: "{errorMsg}"
       table: "Au moins une ligne du tableau n'a pas été remplie correctement"
-
-    pikaday:
-      month-previous: "Mois précédent"
-      month-next: "Mois suivant"