ember-validated-form 5.1.0 → 5.2.2

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [5.2.2](https://github.com/adfinis-sygroup/ember-validated-form/compare/v5.2.1...v5.2.2) (2022-02-10)
+
+
+### Bug Fixes
+
+* select support for plain options ([#747](https://github.com/adfinis-sygroup/ember-validated-form/issues/747)) ([a58e26d](https://github.com/adfinis-sygroup/ember-validated-form/commit/a58e26ddcd46ec5328c3bb5351bafc7781eacdbd))
+
+## [5.2.1](https://github.com/adfinis-sygroup/ember-validated-form/compare/v5.2.0...v5.2.1) (2022-02-09)
+
+
+### Bug Fixes
+
+* respect scrollErrorIntoView for validated buttons as well ([#743](https://github.com/adfinis-sygroup/ember-validated-form/issues/743)) ([fd6be2a](https://github.com/adfinis-sygroup/ember-validated-form/commit/fd6be2a49c5f947bfcf5eb3f7ab61a23ac00064a))
+
+# [5.2.0](https://github.com/adfinis-sygroup/ember-validated-form/compare/v5.1.1...v5.2.0) (2022-02-03)
+
+
+### Features
+
+* scroll first invalid element into view ([#733](https://github.com/adfinis-sygroup/ember-validated-form/issues/733)) ([ae7c8b2](https://github.com/adfinis-sygroup/ember-validated-form/commit/ae7c8b2b160307646adf90cd09a091effa549238))
+* **validated-button:** add `triggerValidations` flag ([#721](https://github.com/adfinis-sygroup/ember-validated-form/issues/721)) ([765f5f4](https://github.com/adfinis-sygroup/ember-validated-form/commit/765f5f40c9d2e5ccfca7129fb701ff3bb0ed661e))
+
 # [5.0.0](https://github.com/adfinis-sygroup/ember-validated-form/compare/v4.1.0...v5.0.0) (2021-10-08)
 
 

package/addon/components/validated-button.js

@@ -1,3 +1,4 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
@@ -12,6 +13,14 @@ export default class ValidatedButtonComponent extends Component {
 
   @tracked _loading;
 
+  constructor(...args) {
+    super(...args);
+    this.config =
+      getOwner(this).resolveRegistration("config:environment")[
+        "ember-validated-form"
+      ];
+  }
+
   get loading() {
     return this.args.loading || this._loading;
   }
@@ -25,6 +34,11 @@ export default class ValidatedButtonComponent extends Component {
     }
 
     event.preventDefault();
+
+    if (this.args.triggerValidations) {
+      this.args.markAsDirty();
+    }
+
     const model = this.args.model;
 
     if (!model || !model.validate) {
@@ -34,6 +48,12 @@ export default class ValidatedButtonComponent extends Component {
 
     await model.validate();
 
+    if (this.config?.features?.scrollErrorIntoView && model.errors[0]?.key) {
+      document
+        .querySelector(`[name=${model.errors[0].key}]`)
+        ?.scrollIntoView({ behavior: "smooth" });
+    }
+
     if (model.get("isInvalid")) {
       this.runCallback(ON_INVALID_CLICK);
     } else {

package/addon/components/validated-form.hbs

@@ -22,6 +22,7 @@
         loading=this.loading
         label="Action"
         model=@model
+        markAsDirty=this.markAsDirty
       )
     )
   }}

package/addon/components/validated-form.js

@@ -1,3 +1,4 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { scheduleOnce } from "@ember/runloop";
 import Component from "@glimmer/component";
@@ -14,6 +15,10 @@ export default class ValidatedFormComponent extends Component {
 
   constructor(...args) {
     super(...args);
+    this.config =
+      getOwner(this).resolveRegistration("config:environment")[
+        "ember-validated-form"
+      ];
 
     if (this.args.model && this.args.model.validate) {
       scheduleOnce("actions", this, "validateModel", this.args.model);
@@ -24,6 +29,11 @@ export default class ValidatedFormComponent extends Component {
     model.validate();
   }
 
+  @action
+  markAsDirty() {
+    this.submitted = true;
+  }
+
   @action
   async submit(event) {
     event.preventDefault();
@@ -39,6 +49,11 @@ export default class ValidatedFormComponent extends Component {
     await model.validate();
 
     if (model.get("isInvalid")) {
+      if (this.config?.features?.scrollErrorIntoView && model.errors[0]?.key) {
+        document
+          .querySelector(`[name=${model.errors[0].key}]`)
+          ?.scrollIntoView({ behavior: "smooth" });
+      }
       this.runCallback(PROP_ON_INVALID_SUBMIT);
     } else {
       this.runCallback(PROP_ON_SUBMIT);

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

@@ -3,8 +3,8 @@
     <input
       type="checkbox"
       class="custom-control-input
-        {{if @isValid "is-valid"}}
-        {{if @isInvalid "is-invalid"}}"
+        {{if @isValid 'is-valid'}}
+        {{if @isInvalid 'is-invalid'}}"
       checked={{includes option.key @value}}
       name={{@name}}
       id="{{@inputId}}-{{i}}"

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

@@ -1,8 +1,8 @@
 <div class="custom-control custom-checkbox">
   <input
     class="custom-control-input
-      {{if @isValid "is-valid"}}
-      {{if @isInvalid "is-invalid"}}"
+      {{if @isValid 'is-valid'}}
+      {{if @isInvalid 'is-invalid'}}"
     type="checkbox"
     name={{@name}}
     id={{@inputId}}

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

@@ -3,8 +3,8 @@
     <input
       type="radio"
       class="custom-control-input
-        {{if @isValid "is-valid"}}
-        {{if @isInvalid "is-invalid"}}"
+        {{if @isValid 'is-valid'}}
+        {{if @isInvalid 'is-invalid'}}"
       checked={{eq @value option.key}}
       value={{option.key}}
       name={{@name}}

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

@@ -2,8 +2,8 @@
   {{#if (not-eq i 0)}}<br />{{/if}}
   <label
     class="uk-form-label
-      {{if @isValid "uk-text-success"}}
-      {{if @isInvalid "uk-text-danger"}}"
+      {{if @isValid 'uk-text-success'}}
+      {{if @isInvalid 'uk-text-danger'}}"
   >
     <input
       type="checkbox"

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

@@ -1,6 +1,6 @@
 {{#let (component @labelComponent) as |Label|}}
   <Label
-    class="{{if @isValid "uk-text-success"}} {{if @isInvalid "uk-text-danger"}}"
+    class="{{if @isValid 'uk-text-success'}} {{if @isInvalid 'uk-text-danger'}}"
   >
     <input
       class="uk-checkbox uk-margin-small-right"

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

@@ -2,8 +2,8 @@
   {{#if (not-eq i 0)}}<br />{{/if}}
   <label
     class="uk-form-label
-      {{if @isValid "uk-text-success"}}
-      {{if @isInvalid "uk-text-danger"}}"
+      {{if @isValid 'uk-text-success'}}
+      {{if @isInvalid 'uk-text-danger'}}"
   >
     <input
       type="radio"

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

@@ -20,30 +20,17 @@
     {{#each this.optionGroups as |optionGroup|}}
       <optgroup label={{optionGroup.groupName}}>
         {{#each optionGroup.options as |opt|}}
-          {{#let
-            (if @optionValuePath (get opt @optionValuePath) opt)
-            as |optionValue|
-          }}
-            <option
-              selected={{eq optionValue @value}}
-              value={{optionValue}}
-            >{{if @optionLabelPath (get opt @optionLabelPath) opt}}</option>
-          {{/let}}
+          <option selected={{eq opt.id @value}} value={{opt.id}}>
+            {{opt.label}}
+          </option>
         {{/each}}
       </optgroup>
     {{/each}}
   {{else}}
-    {{#each @options as |opt|}}
-      {{#let
-        (if @optionValuePath (get opt @optionValuePath) opt)
-        as |optionValue|
-      }}
-        <option selected={{eq optionValue @value}} value={{optionValue}}>{{if
-            @optionLabelPath
-            (get opt @optionLabelPath)
-            opt
-          }}</option>
-      {{/let}}
+    {{#each this.normalizedOptions as |opt|}}
+      <option selected={{eq opt.id @value}} value={{opt.id}}>
+        {{opt.label}}
+      </option>
     {{/each}}
   {{/if}}
 </select>

package/addon/components/validated-input/types/select.js

@@ -38,6 +38,23 @@ export default class SelectComponent extends Component {
     return this.hasPreGroupedOptions || this.args.groupLabelPath;
   }
 
+  get normalizedOptions() {
+    // normalize options to common data structure, only for rendering
+    return this.args.options.map((opt) => this.normalize(opt));
+  }
+
+  normalize(option) {
+    if (typeof option !== "object") {
+      return { id: option, label: option };
+    }
+    const valuePath = this.args.optionValuePath ?? this.args.optionTargetPath;
+    const labelPath = this.args.optionLabelPath;
+    return {
+      id: valuePath ? option[valuePath] : option.id,
+      label: labelPath ? option[labelPath] : option.label,
+    };
+  }
+
   get optionGroups() {
     const groupLabelPath = this.args.groupLabelPath;
     if (!groupLabelPath) {
@@ -60,7 +77,7 @@ export default class SelectComponent extends Component {
           groups.pushObject(group);
         }
 
-        group.options.pushObject(item);
+        group.options.pushObject(this.normalize(item));
       } else {
         groups.pushObject(item);
       }
@@ -69,10 +86,54 @@ export default class SelectComponent extends Component {
     return groups;
   }
 
+  findOption(target) {
+    const targetPath = this.args.optionTargetPath;
+    const valuePath = this.args.optionValuePath || targetPath;
+
+    const getValue = (item) => {
+      if (valuePath) {
+        return String(item[valuePath]);
+      }
+      if (typeof item === "object") {
+        return String(item.id);
+      }
+      return String(item);
+    };
+
+    let options = this.args.options;
+
+    //flatten pre grouped options
+    if (this.hasPreGroupedOptions) {
+      options = options.flatMap((group) => group.options);
+    }
+
+    // multi select
+    if (this.args.multiple) {
+      const selectedValues = Array.prototype.filter
+        .call(target.options, (option) => option.selected)
+        .map((option) => option.value);
+
+      const foundOptions = options.filter((item) => {
+        return selectedValues.includes(getValue(item));
+      });
+      if (targetPath) {
+        return foundOptions.map((item) => item[targetPath]);
+      }
+      return foundOptions;
+    }
+
+    //single select
+    const foundOption = options.find((item) => getValue(item) === target.value);
+    if (targetPath) {
+      return foundOption[targetPath];
+    }
+    return foundOption;
+  }
+
   @action
   onUpdate(event) {
     if (this.args.update) {
-      this.args.update(event.target.value);
+      this.args.update(this.findOption(event.target));
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "5.1.0",
+  "version": "5.2.2",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -33,49 +33,42 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "ember-auto-import": "^2.2.0",
+    "ember-auto-import": "^2.4.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
     "ember-truth-helpers": "^3.0.0"
   },
   "devDependencies": {
     "@adfinis-sygroup/eslint-config": "1.5.0",
-    "@adfinis-sygroup/semantic-release-config": "3.2.1",
-    "@babel/core": "7.16.5",
-    "@babel/helper-create-regexp-features-plugin": "^7.16.7",
-    "@babel/helper-environment-visitor": "^7.16.5",
-    "@babel/plugin-proposal-decorators": "^7.16.7",
-    "@babel/plugin-transform-modules-amd": "^7.16.7",
-    "@babel/preset-env": "^7.16.7",
+    "@adfinis-sygroup/semantic-release-config": "3.4.0",
     "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "0.45.0",
-    "@fortawesome/ember-fontawesome": "0.2.3",
+    "@embroider/test-setup": "1.1.0",
+    "@fortawesome/ember-fontawesome": "0.3.1",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@glimmer/component": "1.0.4",
     "@glimmer/tracking": "1.0.4",
     "babel-eslint": "10.1.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-changeset": "3.15.0",
-    "ember-changeset-validations": "3.16.0",
+    "ember-changeset": "4.0.0-beta.2",
+    "ember-changeset-validations": "4.0.0-beta.2",
     "ember-cli": "3.28.1",
-    "ember-cli-addon-docs": "4.2.1",
+    "ember-cli-addon-docs": "4.2.2",
     "ember-cli-dependency-checker": "3.2.0",
     "ember-cli-deploy": "1.0.2",
     "ember-cli-deploy-build": "2.0.0",
     "ember-cli-deploy-git": "1.3.4",
     "ember-cli-deploy-git-ci": "1.0.1",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-release": "1.0.0-beta.2",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-cli-test-loader": "3.0.0",
-    "ember-concurrency": "2.2.0",
+    "ember-concurrency": "2.2.1",
     "ember-data": "3.28.3",
     "ember-disable-prototype-extensions": "1.1.3",
     "ember-load-initializers": "2.1.2",
     "ember-maybe-import-regenerator": "1.0.0",
-    "ember-power-select": "4.1.6",
+    "ember-power-select": "5.0.3",
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
     "ember-source": "3.28.1",
@@ -86,21 +79,22 @@
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-ember": "10.5.8",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-qunit": "6.2.0",
     "husky": "7.0.4",
-    "lint-staged": "11.2.0",
+    "lint-staged": "12.3.3",
     "loader.js": "4.7.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "qunit": "2.17.2",
     "qunit-dom": "2.0.0",
-    "webpack": "5.58.0"
+    "webpack": "5.68.0"
   },
   "resolutions": {
-    "graceful-fs": ">=4.2.0"
+    "@embroider/macros": "^1.1.0",
+    "@embroider/util": "^1.1.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"