ember-validated-form 6.1.2 → 7.0.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [7.0.0](https://github.com/adfinis/ember-validated-form/compare/v6.2.0...v7.0.0) (2023-11-21)
+
+
+### chore
+
+* **deps:** update ember and dependencies ([fc26b0b](https://github.com/adfinis/ember-validated-form/commit/fc26b0be302c24dafccad37a53dc7dd2bcc59bc9))
+
+
+### Features
+
+* allow html attributes to be passed to wrapping form element ([b29f4d8](https://github.com/adfinis/ember-validated-form/commit/b29f4d88133aa58a9613aa9bf9f1f6a2761a7974))
+
+
+### BREAKING CHANGES
+
+* **deps:** Drop support for Ember v3.
+
+# [6.2.0](https://github.com/adfinis/ember-validated-form/compare/v6.1.2...v6.2.0) (2023-02-23)
+
+
+### Bug Fixes
+
+* scroll error into view with nested key names ([#904](https://github.com/adfinis/ember-validated-form/issues/904)) ([5c192a5](https://github.com/adfinis/ember-validated-form/commit/5c192a5b00abf05d80f36d1fad8b67a79a36e43c))
+
+
+### Features
+
+* **a11y:** add aria invalid and describedby attributes on validation ([6e16a51](https://github.com/adfinis/ember-validated-form/commit/6e16a5122f134ca991205c03c0dd8628288e4b08)), closes [#48](https://github.com/adfinis/ember-validated-form/issues/48)
+
 ## [6.1.2](https://github.com/adfinis/ember-validated-form/compare/v6.1.1...v6.1.2) (2022-09-20)
 
 

package/addon/components/validated-button.js

@@ -43,7 +43,7 @@ export default class ValidatedButtonComponent extends Component {
     if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
       if (model.errors[0]?.key) {
         document
-          .querySelector(`[name=${model.errors[0].key}]`)
+          .querySelector(`[name=${model.errors[0].key.replaceAll(".", "\\.")}]`)
           ?.scrollIntoView({ behavior: "smooth" });
       }
     }

package/addon/components/validated-form.hbs

@@ -1,4 +1,8 @@
-<form autocomplete={{@autocomplete}} class={{if this.submitted "submitted"}}>
+<form
+  autocomplete={{@autocomplete}}
+  class={{if this.submitted "submitted"}}
+  ...attributes
+>
   {{yield
     (hash
       model=@model

package/addon/components/validated-form.js

@@ -48,7 +48,9 @@ export default class ValidatedFormComponent extends Component {
       if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
         if (model.errors[0]?.key) {
           document
-            .querySelector(`[name=${model.errors[0].key}]`)
+            .querySelector(
+              `[name=${model.errors[0].key.replaceAll(".", "\\.")}]`
+            )
             ?.scrollIntoView({ behavior: "smooth" });
         }
       }

package/addon/components/validated-input/error.hbs

@@ -1,9 +1,10 @@
 {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
-  <small class="uk-text-danger" ...attributes>
+  <small id={{@id}} class="uk-text-danger" ...attributes>
     {{yield}}{{this.errorString}}
   </small>
 {{else}}
   <span
+    id={{@id}}
     class={{if
       (macroCondition (macroGetOwnConfig "isBootstrap"))
       "d-block invalid-feedback"

package/addon/components/validated-input/hint.hbs

@@ -1,4 +1,5 @@
 <small
+  id={{@id}}
   class={{class-list
     (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-text-muted")
     (if

package/addon/components/validated-input/render.hbs

@@ -86,9 +86,9 @@
         @update={{@update}}
         ...attributes
       />
-    {{else if (and
-      (eq @type "date") (not-eq this.dateComponent this.inputComponent)
-    )}}
+    {{else if
+      (and (eq @type "date") (not-eq this.dateComponent this.inputComponent))
+    }}
       <this.dateComponent
         @autocomplete={{@autocomplete}}
         @autofocus={{@autofocus}}

package/addon/components/validated-input/types/checkbox-group.hbs

@@ -14,6 +14,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       {{option.label}}
     </label>
@@ -29,6 +30,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       <label
         class="custom-control-label"

package/addon/components/validated-input/types/checkbox.hbs

@@ -10,6 +10,7 @@
       disabled={{@disabled}}
       checked={{@value}}
       {{on "input" this.onUpdate}}
+      ...attributes
     />
   </@labelComponent>
 {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
@@ -24,6 +25,7 @@
       disabled={{@disabled}}
       checked={{@value}}
       {{on "input" this.onUpdate}}
+      ...attributes
     />
     <@labelComponent class="custom-control-label" />
   </div>

package/addon/components/validated-input/types/radio-group.hbs

@@ -15,6 +15,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       {{option.label}}
     </label>
@@ -31,6 +32,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       <label
         class="custom-control-label"

package/addon/components/validated-input.hbs

@@ -21,11 +21,11 @@
   }}
 
   {{#if @hint}}
-    <this.hintComponent @hint={{@hint}} />
+    <this.hintComponent @hint={{@hint}} id={{this.hintId}} />
   {{/if}}
 
   {{#if (and this.showValidity this.errors)}}
-    <this.errorComponent @errors={{this.errors}} />
+    <this.errorComponent @errors={{this.errors}} id={{this.errorId}} />
   {{/if}}
 {{else}}
   <this.renderComponent
@@ -64,12 +64,20 @@
     }}
     @hintComponent={{if
       @hint
-      (component (ensure-safe-component this.hintComponent) hint=@hint)
+      (component
+        (ensure-safe-component this.hintComponent) hint=@hint id=this.hintId
+      )
     }}
     @errorComponent={{if
       (and this.showValidity this.errors)
-      (component (ensure-safe-component this.errorComponent) errors=this.errors)
+      (component
+        (ensure-safe-component this.errorComponent)
+        errors=this.errors
+        id=this.errorId
+      )
     }}
+    aria-invalid={{if this.isInvalid "true"}}
+    aria-describedby={{if this.isInvalid this.errorId this.hintId}}
     ...attributes
   />
 {{/if}}

package/addon/components/validated-input.js

@@ -1,5 +1,6 @@
 import { action, set, get } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
+import { isEmpty } from "@ember/utils";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
@@ -21,6 +22,14 @@ import passedOrDefault from "ember-validated-form/passed-or-default";
 export default class ValidatedInputComponent extends Component {
   inputId = guidFor(this);
 
+  get errorId() {
+    return `${this.inputId}-error`;
+  }
+
+  get hintId() {
+    return !isEmpty(this.args.hint) ? `${this.inputId}-hint` : null;
+  }
+
   @tracked dirty;
   @tracked required;
   @tracked type;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -20,44 +20,49 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "lint:css": "stylelint \"**/*.css\"",
+    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
+    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint test:*",
+    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@embroider/macros": "^1.8.3",
-    "@embroider/util": "^1.8.3",
+    "@embroider/macros": "^1.10.0",
+    "@embroider/util": "^1.10.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "ember-changeset": "^4.1.1",
-    "ember-changeset-validations": "^4.1.0",
+    "ember-changeset": "^4.1.2",
+    "ember-changeset-validations": "^4.1.1",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.1",
+    "ember-cli-htmlbars": "^6.2.0",
     "ember-truth-helpers": "^3.1.1"
   },
   "devDependencies": {
-    "@adfinis-sygroup/eslint-config": "1.5.0",
-    "@adfinis-sygroup/semantic-release-config": "3.4.0",
+    "@adfinis/eslint-config": "2.0.0",
+    "@adfinis/semantic-release-config": "4.0.0",
+    "@babel/eslint-parser": "7.21.3",
+    "@babel/plugin-proposal-decorators": "7.21.0",
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.8.1",
-    "@embroider/test-setup": "1.8.3",
+    "@ember/string": "3.0.1",
+    "@ember/test-helpers": "2.9.3",
+    "@embroider/test-setup": "2.1.1",
     "@fortawesome/ember-fontawesome": "0.4.1",
-    "@fortawesome/free-solid-svg-icons": "6.2.0",
-    "babel-eslint": "10.1.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-auto-import": "2.4.2",
-    "ember-cli": "4.7.0",
-    "ember-cli-addon-docs": "5.0.0",
+    "concurrently": "8.0.1",
+    "ember-auto-import": "2.6.3",
+    "ember-cli": "4.12.1",
+    "ember-cli-addon-docs": "5.2.0",
     "ember-cli-dependency-checker": "3.3.1",
-    "ember-cli-deploy": "1.0.2",
+    "ember-cli-deploy": "2.0.0",
     "ember-cli-deploy-build": "2.0.0",
     "ember-cli-deploy-git": "1.3.4",
     "ember-cli-deploy-git-ci": "1.0.1",
@@ -65,36 +70,40 @@
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-cli-test-loader": "3.0.0",
-    "ember-concurrency": "2.3.7",
-    "ember-data": "4.4.1",
-    "ember-disable-prototype-extensions": "1.1.3",
-    "ember-flatpickr": "3.2.3",
+    "ember-concurrency": "3.0.0",
+    "ember-data": "4.12.0",
+    "ember-flatpickr": "4.0.0",
     "ember-load-initializers": "2.1.2",
-    "ember-qunit": "5.1.5",
-    "ember-resolver": "8.0.3",
-    "ember-source": "4.7.0",
+    "ember-qunit": "6.2.0",
+    "ember-resolver": "10.0.0",
+    "ember-source": "4.12.0",
     "ember-source-channel-url": "3.0.0",
-    "ember-template-lint": "4.14.0",
-    "ember-template-lint-plugin-prettier": "4.0.0",
+    "ember-template-lint": "5.7.2",
+    "ember-template-lint-plugin-prettier": "4.1.0",
     "ember-try": "2.0.0",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-ember": "11.0.6",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-node": "11.1.0",
+    "eslint": "8.39.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-ember": "11.5.2",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-n": "15.7.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-qunit": "7.3.1",
-    "husky": "8.0.1",
-    "lint-staged": "13.0.3",
+    "eslint-plugin-qunit": "7.3.4",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.1",
     "loader.js": "4.7.0",
-    "npm-run-all": "4.1.5",
-    "prettier": "2.7.1",
-    "qunit": "2.19.1",
+    "prettier": "2.8.8",
+    "qunit": "2.19.4",
     "qunit-dom": "2.0.0",
-    "webpack": "5.74.0"
+    "stylelint": "15.10.3",
+    "stylelint-config-standard": "33.0.0",
+    "stylelint-prettier": "3.0.0",
+    "webpack": "5.88.2"
+  },
+  "peerDependencies": {
+    "ember-source": "^4.0.0"
   },
   "engines": {
-    "node": "14.* || >= 16"
+    "node": "14.* || 16.* || >= 18"
   },
   "ember": {
     "edition": "octane"
@@ -104,12 +113,13 @@
     "demoURL": "https://adfinis.github.io/ember-validated-form"
   },
   "release": {
-    "extends": "@adfinis-sygroup/semantic-release-config"
+    "extends": "@adfinis/semantic-release-config"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",
     "*.hbs": "ember-template-lint --fix",
-    "*.{scss,graphql,json,md,yml}": "prettier --write"
+    "*.css": "stylelint --fix",
+    "*.{json,md,yml}": "prettier --write"
   },
   "commitlint": {
     "extends": [

package/config/environment.js

@@ -1,5 +0,0 @@
-"use strict";
-
-module.exports = function (/* environment, appConfig */) {
-  return {};
-};