feat(input): allow custom date component to be configured (#861)

If none is set we just default to the `inputComponent` aka HTML5 picker.
Co-authored-by: Jonas Metzener <[email protected]>

addon/components/validated-input/render.hbs

@@ -86,6 +86,23 @@
         @update={{@update}}
         ...attributes
       />
+    {{else if (and
+      (eq @type "date") (not-eq this.dateComponent this.inputComponent)
+    )}}
+      <this.dateComponent
+        @autocomplete={{@autocomplete}}
+        @autofocus={{@autofocus}}
+        @disabled={{@disabled}}
+        @id={{@inputId}}
+        @name={{or @inputName @name}}
+        @placeholder={{@placeholder}}
+        @value={{@value}}
+        @isInvalid={{@isInvalid}}
+        @isValid={{@isValid}}
+        @setDirty={{@setDirty}}
+        @update={{@update}}
+        ...attributes
+      />
     {{else}}
       <this.inputComponent
         autocomplete={{@autocomplete}}

addon/components/validated-input/render.js

@@ -9,4 +9,5 @@ export default class RenderComponent extends Component {
   @passedOrDefault("types/radio-group") radioGroupComponent;
   @passedOrDefault("types/select") selectComponent;
   @passedOrDefault("types/textarea") textareaComponent;
+  @passedOrDefault("types/date") dateComponent;
 }

ember-cli-build.js

@@ -20,6 +20,7 @@ const SCENARIO_CONFIGS = {
       "types/select": "dummy/components/x-custom-select",
       "types/radio-group": "dummy/components/x-custom-radio-group",
       "types/textarea": "dummy/components/x-custom-textarea",
+      "types/date": "dummy/components/x-custom-date",
     },
   },
 };

index.js

@@ -58,6 +58,9 @@ module.exports = {
     this.options["@embroider/macros"].setOwnConfig["types/textarea"] =
       defaults["types/textarea"] ??
       "ember-validated-form/components/validated-input/types/textarea";
+    this.options["@embroider/macros"].setOwnConfig["types/date"] =
+      defaults["types/date"] ??
+      "ember-validated-form/components/validated-input/types/input";
   },
 
   options: {

package.json

@@ -68,6 +68,7 @@
     "ember-concurrency": "2.3.6",
     "ember-data": "4.4.1",
     "ember-disable-prototype-extensions": "1.1.3",
+    "ember-flatpickr": "3.2.3",
     "ember-load-initializers": "2.1.2",
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",

tests/dummy/app/components/favorite-colors.hbs

@@ -19,5 +19,5 @@
 </div>
 
 <@hintComponent />
-<@errorComponent class="d-block" />
+<@errorComponent />
 {{! END-SNIPPET }}

tests/dummy/app/components/flatpickr-wrapper.hbs

@@ -0,0 +1,17 @@
+{{! BEGIN-SNIPPET flatpickr-wrapper.hbs }}
+<@labelComponent />
+
+<div class="{{if @isValid 'is-valid'}} {{if @isInvalid 'is-invalid'}}">
+  <EmberFlatpickr
+    placeholder={{@placeholder}}
+    @date={{@value}}
+    @onChange={{@update}}
+    class="form-control"
+    ...attributes
+  />
+
+</div>
+
+<@hintComponent />
+<@errorComponent />
+{{! END-SNIPPET }}

tests/dummy/app/components/x-custom-date.hbs

@@ -0,0 +1 @@
+<custom-date></custom-date>

tests/dummy/app/components/x-custom-render.hbs

@@ -13,6 +13,10 @@
     <this.checkboxComponent />
   {{else if (eq @type "textarea")}}
     <this.textareaComponent />
+  {{else if (and
+    (eq @type "date") (not-eq this.dateComponent this.inputComponent)
+  )}}
+    <this.dateComponent />
   {{else}}
     <this.inputComponent />
   {{/if}}

tests/dummy/app/snippets/config-custom-date.js

@@ -0,0 +1,9 @@
+const app = new EmberAddon(defaults, {
+  // ...
+  "ember-validated-form": {
+    defaults: {
+      "types/date": "myapp/components/flatpickr-wrapper",
+    },
+  },
+  // ...
+});

tests/dummy/app/snippets/config-defaults.js

@@ -16,6 +16,7 @@ const app = new EmberAddon(defaults, {
       "types/radio-group": "myapp/components/x-my-radio-group",
       "types/select": "myapp/components/x-my-select",
       "types/textarea": "myapp/components/x-my-textarea",
+      "types/date": "myapp/components/x-my-date-picker",
     },
   },
   // ...

tests/dummy/app/templates/docs/customization.md

@@ -135,6 +135,60 @@ inside a label tag.
 
 - `<String[]>` **errors** The error messages of the field
 
+### Date
+
+`ember-validated-form` has no default date picker implemented. If you specify an input
+with type `date`, a plain input with the HTML5 (depending on your browser) will
+be rendered.
+
+<!-- prettier-ignore-start -->
+<DocsDemo as |demo|>
+  <demo.example>
+    <ValidatedForm as |f|>
+      <f.input @type='date' @label='Birthday (Plain HTML5)' @name='birthday' @hint='Enter your birthday' />
+    </ValidatedForm>
+  </demo.example>
+</DocsDemo>
+<!-- prettier-ignore-end -->
+
+This is on purpose due to there being many date picker components/addons
+available. And not every date picker fits every theme.
+
+If you would like to configure a custom date picker, configure a custom date
+component as specified in the _Defaults_ section of <DocsLink @route="docs.configuration">`Configuration`</DocsLink>.
+
+<!-- prettier-ignore-start -->
+<DocsDemo as |demo|>
+  <demo.example @name='custom-input-template.hbs'>
+    <ValidatedForm @model={{changeset (hash birthday=null)}} as |f|>
+      <f.input
+        @label='Birthday (Flatpickr)'
+        @name='birthday'
+        @placeholder="Click to open Flatpickr!"
+        @hint='Enter your birthday'
+        @renderComponent={{component 'flatpickr-wrapper'}}
+      />
+    </ValidatedForm>
+  </demo.example>
+
+  <demo.snippet @name='flatpickr-wrapper.hbs' @label='myapp/components/flatpickr-wrapper.hbs' />
+  <demo.snippet @name='config-custom-date.js' @label='ember-cli-build.js' />
+</DocsDemo>
+<!-- prettier-ignore-end -->
+
+**Arguments**
+
+- `<*>` **value** The current value of the field
+- `<Action>` **update** Action to update the value
+- `<String>` **inputId** The ID of the field (generated with `guidFor` from `@ember/object/internals`)
+- `<String>` **placeholder** The placeholder of the field
+- `<Boolean>` **isValid** Whether the form data is valid
+- `<Boolean>` **isInvalid** Whether the form data is invalid
+- `<Action>` **setDirty** Action to mark the field as dirty
+- `<String>` **name** The name of the field
+- `<Boolean>` **disabled** Whether the field is disabled
+- `<Boolean>` **autocomplete** Whether to enable autocompletion on the field
+
 ## validated-button
 
 <!-- prettier-ignore-start -->

tests/integration/components/validated-form-defaults-test.js

@@ -50,7 +50,7 @@ module("Integration | Component | validated form defaults", function (hooks) {
   testCustomComponents(
     "renders custom type components",
     async function (assert) {
-      assert.expect(6);
+      assert.expect(7);
 
       await render(hbs`
       <ValidatedForm as |f|>
@@ -60,6 +60,7 @@ module("Integration | Component | validated form defaults", function (hooks) {
         <f.input @type="radio-group" />
         <f.input @type="select" />
         <f.input @type="textarea" />
+        <f.input @type="date" />
       </ValidatedForm>
     `);
 
@@ -69,6 +70,7 @@ module("Integration | Component | validated form defaults", function (hooks) {
       assert.dom("custom-radio-group").exists();
       assert.dom("custom-select").exists();
       assert.dom("custom-textarea").exists();
+      assert.dom("custom-date").exists();
     }
   );
 });

yarn.lock

@@ -1366,7 +1366,7 @@
     mkdirp "^1.0.4"
     silent-error "^1.1.1"
 
-"@ember/render-modifiers@^1.0.2 || ^2.0.0", "@ember/render-modifiers@^2.0.0":
+"@ember/render-modifiers@^1.0.2 || ^2.0.0", "@ember/render-modifiers@^2.0.0", "@ember/render-modifiers@^2.0.3":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@ember/render-modifiers/-/render-modifiers-2.0.4.tgz#0ac7af647cb736076dbfcd54ca71e090cd329d71"
   integrity sha512-Zh/fo5VUmVzYHkHVvzWVjJ1RjFUxA2jH0zCp2+DQa80Bf3DUXauiEByxU22UkN4LFT55DBFttC0xCQSJG3WTsg==
@@ -7922,6 +7922,22 @@ ember-fetch@^8.1.1:
     node-fetch "^2.6.1"
     whatwg-fetch "^3.6.2"
 
+ember-flatpickr@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/ember-flatpickr/-/ember-flatpickr-3.2.3.tgz#4ec405d03853d67316fb1813e4e39bca487f1b83"
+  integrity sha512-ON6FNh3gFSxDTam2UOyPOSeYki5qNqPqPEB+SS/Q+L+kPEvxmDMPeG/lWLLvdDsPR0X55W9q7uSjzZZAD/UxqA==
+  dependencies:
+    "@ember/render-modifiers" "^2.0.3"
+    "@glimmer/component" "^1.0.4"
+    "@glimmer/tracking" "^1.0.4"
+    broccoli-funnel "^3.0.3"
+    broccoli-merge-trees "^4.2.0"
+    broccoli-stew "^3.0.0"
+    ember-cli-babel "^7.26.11"
+    ember-cli-htmlbars "^6.0.1"
+    ember-cli-typescript "^5.0.0"
+    flatpickr "^4.6.9"
+
 "ember-get-config@^0.3.0 || ^0.4.0 || ^0.5.0 || ^1.0.2":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/ember-get-config/-/ember-get-config-1.1.0.tgz#731e192f1fe8022e06c0dbcbe5622fb8c4c78b87"
@@ -9285,6 +9301,11 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
+flatpickr@^4.6.9:
+  version "4.6.13"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94"
+  integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==
+
 flatted@^3.1.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"