From d32573c245ed7500412cb5b8eb1f40c09dd9512b Mon Sep 17 00:00:00 2001 From: Joshua Emanuel McGrath Date: Tue, 22 Aug 2017 14:43:00 -0400 Subject: [PATCH 1/6] Fixes ember-changeset integration problem. --- README.md | 17 +++++++++++++++-- addon/components/do-field.js | 3 +++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b40351a..3686f63 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Another icky part is customisation, which most other form builder addons fail sh ## Features * [Extremely](#css-customizations) [easy](#component-block-form) to [customize](#component-customizations), thanks to contextual components. -* Bare minimum HTML with no CSS by default. Use it with any CSS framework you like. +* Bare minimum HTML with no CSS by default. Use it with any CSS framework you like. * Binds error and success classes (if found) on a field `focusOut` or just before `submit`. Works with [`ember-cp-validations`](https://github.com/offirgolan/ember-cp-validations) by default. [`ember-changeset-validations`](https://github.com/DockYard/ember-changeset-validations) works too with a small configuration tweak. * Uses [`ember-one-way-controls`](https://github.com/DockYard/ember-one-way-controls) under the hood for controls. But easily extensible with any control type. * [Fully compatible](#test-selectors) with [`ember-test-selectors`](https://github.com/simplabs/ember-test-selectors). @@ -206,7 +206,7 @@ You can use `testSelector` in your acceptance tests: * `find(testSelector('do-feedback', 'lastName'));` * `find(testSelector('do-hint', 'lastName'));` -You can also manually set the attributes: +You can also manually set the attributes: ```hbs {{field.do-control 'lastName' data-test-do-control='mySpecialSelector' }} ``` @@ -300,6 +300,19 @@ module.exports = function(environment) { }; ``` +To integrate with [`ember-changeset-validations`](https://github.com/DockYard/ember-changeset-validations) you should configure your errorsPath as follows: + +```js +module.exports = function(environment) { + var ENV = { + 'ember-do-forms': { + // The path to be read on the object for an errors array + errorsPath: 'error.{PROPERTY_NAME}.validation', + } + }; +}; +``` + ## Contributing **Any contribution**, be it an issue, a feature or a bugfix is greatly appreciated :heart: diff --git a/addon/components/do-field.js b/addon/components/do-field.js index 160eb8a..598218f 100644 --- a/addon/components/do-field.js +++ b/addon/components/do-field.js @@ -51,6 +51,9 @@ const DoLabelComponent = Component.extend({ // Should work with cp-validations and changeset-validations as well errorMessage: computed('errors.[]', function() { let firstError = this.get('errors.0') || {}; + if (typeof firstError === "string") { + return firstError; + } return firstError.message || firstError.validation; }), From 3890cf050e378318cfcfbaaca1ebad5082e26de2 Mon Sep 17 00:00:00 2001 From: Joshua Emanuel McGrath Date: Tue, 22 Aug 2017 15:06:49 -0400 Subject: [PATCH 2/6] Changed quotes to pass tests. --- addon/components/do-field.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/do-field.js b/addon/components/do-field.js index 598218f..820984f 100644 --- a/addon/components/do-field.js +++ b/addon/components/do-field.js @@ -51,7 +51,7 @@ const DoLabelComponent = Component.extend({ // Should work with cp-validations and changeset-validations as well errorMessage: computed('errors.[]', function() { let firstError = this.get('errors.0') || {}; - if (typeof firstError === "string") { + if (typeof firstError === 'string') { return firstError; } return firstError.message || firstError.validation; From e5df624ec16d6089e8da4ab75cb7a7df44685176 Mon Sep 17 00:00:00 2001 From: Joshua Emanuel McGrath Date: Tue, 22 Aug 2017 15:12:36 -0400 Subject: [PATCH 3/6] Adds a test. --- tests/integration/components/do-field-test.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/tests/integration/components/do-field-test.js b/tests/integration/components/do-field-test.js index aea337c..a1e1e13 100644 --- a/tests/integration/components/do-field-test.js +++ b/tests/integration/components/do-field-test.js @@ -265,6 +265,24 @@ test('it shows feedback when it has errors', function(assert) { assert.equal(this.$('.feedback-class').text().trim(), "can't be blank", 'has the correct feedback message'); }); +test('it shows feedback when errorsPath is an array of strings', function(assert) { + assert.expect(3); + this.set('object.validations', { + attrs: { lastName: { errors: ["can't be blank"] } } + }); + + this.render(hbs` + {{#do-field 'lastName' object=object as |field|}} + {{field.do-control 'text' }} + {{field.do-feedback}} + {{/do-field}} + `); + assert.equal(this.$('.feedback-class').length, 0, "there's no feedback element initially"); + this.$('div').trigger('focusout'); + assert.equal(this.$('.feedback-class').length, 1, 'a feedback element is present'); + assert.equal(this.$('.feedback-class').text().trim(), "can't be blank", 'has the correct feedback message'); +}); + test('the feedback can also read its message from the validation key', function(assert) { assert.expect(2); this.set('object.validations', { @@ -446,4 +464,3 @@ test('data-test-* attributes are overriden when config.autoDataTestSelectors is assert.equal(this.$('p').attr('data-test-do-feedback'), 'you', 'do-feedback has the data attribute'); assert.equal(this.$('small').attr('data-test-do-hint'), 'up', 'do-hint has the data attribute'); }); - From 8f852433ed8c92274e5ba64a9fbfd249447a8fbf Mon Sep 17 00:00:00 2001 From: Joshua Emanuel McGrath Date: Tue, 22 Aug 2017 15:15:35 -0400 Subject: [PATCH 4/6] Removed unecessary whitespace changes. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3686f63..b7e3efe 100644 --- a/README.md +++ b/README.md @@ -206,7 +206,7 @@ You can use `testSelector` in your acceptance tests: * `find(testSelector('do-feedback', 'lastName'));` * `find(testSelector('do-hint', 'lastName'));` -You can also manually set the attributes: +You can also manually set the attributes: ```hbs {{field.do-control 'lastName' data-test-do-control='mySpecialSelector' }} ``` From d81f794b5681dda79d64a6970f564f0691c2fdda Mon Sep 17 00:00:00 2001 From: Joshua Emanuel McGrath Date: Tue, 22 Aug 2017 15:16:39 -0400 Subject: [PATCH 5/6] More unecessary whitespace changes. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b7e3efe..16a6ed5 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ Another icky part is customisation, which most other form builder addons fail sh ## Features * [Extremely](#css-customizations) [easy](#component-block-form) to [customize](#component-customizations), thanks to contextual components. -* Bare minimum HTML with no CSS by default. Use it with any CSS framework you like. +* Bare minimum HTML with no CSS by default. Use it with any CSS framework you like. * Binds error and success classes (if found) on a field `focusOut` or just before `submit`. Works with [`ember-cp-validations`](https://github.com/offirgolan/ember-cp-validations) by default. [`ember-changeset-validations`](https://github.com/DockYard/ember-changeset-validations) works too with a small configuration tweak. * Uses [`ember-one-way-controls`](https://github.com/DockYard/ember-one-way-controls) under the hood for controls. But easily extensible with any control type. * [Fully compatible](#test-selectors) with [`ember-test-selectors`](https://github.com/simplabs/ember-test-selectors). @@ -206,7 +206,7 @@ You can use `testSelector` in your acceptance tests: * `find(testSelector('do-feedback', 'lastName'));` * `find(testSelector('do-hint', 'lastName'));` -You can also manually set the attributes: +You can also manually set the attributes: ```hbs {{field.do-control 'lastName' data-test-do-control='mySpecialSelector' }} ``` From 7fa2b028301131e8b19cc70456d5e98a6b6ddeea Mon Sep 17 00:00:00 2001 From: Joshua Emanuel McGrath Date: Tue, 16 Jan 2018 15:42:44 -0500 Subject: [PATCH 6/6] Addes missing attributes. --- addon/templates/components/do-control.hbs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addon/templates/components/do-control.hbs b/addon/templates/components/do-control.hbs index d491adf..afaef70 100644 --- a/addon/templates/components/do-control.hbs +++ b/addon/templates/components/do-control.hbs @@ -28,6 +28,8 @@ name=controlName autocomplete=autocomplete + autocapitalize=autocapitalize + autocorrect=autocorrect form=form autofocus=autofocus checked=checked @@ -52,4 +54,4 @@ tabindex=tabindex title=title }} -{{/if}} \ No newline at end of file +{{/if}}