ember-validated-form 5.0.0 → 5.2.1

package/.husky/commit-msg

@@ -1 +1,7 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# skip in CI
+[ -n "$CI" ] && exit 0
+
 yarn commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1,8 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+# skip in CI
+[ -n "$CI" ] && exit 0
+
+# lint only staged files
+yarn lint-staged

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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.hbs

@@ -1,9 +1,9 @@
 {{#let
   (component
     this.buttonComponent
-    onClick=@action
-    loading=@loading
-    disabled=@disabled
+    onClick=this.click
+    loading=this.loading
+    disabled=(or @disabled this.loading)
     label=@label
     type=@type
   )

package/addon/components/validated-button.js

@@ -1,7 +1,75 @@
+import { getOwner } from "@ember/application";
+import { action } from "@ember/object";
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { resolve } from "rsvp";
 
 import themedComponent from "../-private/themed-component";
 
+const ON_CLICK = "on-click";
+const ON_INVALID_CLICK = "on-invalid-click";
 export default class ValidatedButtonComponent extends Component {
   @themedComponent("validated-button/button") buttonComponent;
+
+  @tracked _loading;
+
+  constructor(...args) {
+    super(...args);
+    this.config =
+      getOwner(this).resolveRegistration("config:environment")[
+        "ember-validated-form"
+      ];
+  }
+
+  get loading() {
+    return this.args.loading || this._loading;
+  }
+
+  @action
+  async click(event) {
+    // handle only clicks for custom buttons
+    // everything else is handled by the validated form itself
+    if (this.args.type !== "button") {
+      return this.args.action(event);
+    }
+
+    event.preventDefault();
+
+    if (this.args.triggerValidations) {
+      this.args.markAsDirty();
+    }
+
+    const model = this.args.model;
+
+    if (!model || !model.validate) {
+      this.runCallback(ON_CLICK);
+      return;
+    }
+
+    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 {
+      this.runCallback(ON_CLICK);
+    }
+  }
+
+  runCallback(callbackProp) {
+    const callback = this.args[callbackProp];
+    if (typeof callback !== "function") {
+      return;
+    }
+
+    this._loading = true;
+    resolve(callback(this.args.model)).finally(() => {
+      this._loading = false;
+    });
+  }
 }

package/addon/components/validated-form.hbs

@@ -16,6 +16,14 @@
         label="Save"
         action=this.submit
       )
+      button=(component
+        "validated-button"
+        type="button"
+        loading=this.loading
+        label="Action"
+        model=@model
+        markAsDirty=this.markAsDirty
+      )
     )
   }}
 </form>

package/addon/components/validated-form.js

@@ -1,4 +1,6 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
+import { scheduleOnce } from "@ember/runloop";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { resolve } from "rsvp";
@@ -13,12 +15,25 @@ 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) {
-      this.args.model.validate();
+      scheduleOnce("actions", this, "validateModel", this.args.model);
     }
   }
 
+  validateModel(model) {
+    model.validate();
+  }
+
+  @action
+  markAsDirty() {
+    this.submitted = true;
+  }
+
   @action
   async submit(event) {
     event.preventDefault();
@@ -34,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/checkbox-group.js

@@ -3,7 +3,7 @@ import Component from "@glimmer/component";
 
 export default class CheckboxGroupComponent extends Component {
   @action
-  onUpdate(event, key) {
+  onUpdate(key, event) {
     event.preventDefault();
 
     const value = this.value || [];

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

@@ -1,17 +1,72 @@
-{{! template-lint-disable no-passed-in-event-handlers }}
-<OneWaySelect
-  @value={{@value}}
-  @options={{@options}}
-  @optionLabelPath={{@optionLabelPath}}
-  @optionValuePath={{@optionValuePath}}
-  @optionTargetPath={{@optionTargetPath}}
-  @name={{@name}}
-  @id={{@inputId}}
-  @class={{this.class}}
-  @update={{@update}}
-  @focusOut={{@setDirty}}
-  @includeBlank={{@includeBlank}}
-  @disabled={{@disabled}}
-  @multiple={{@multiple}}
-  @promptIsSelectable={{or @promptIsSelectable false}}
-/>
+<select
+  class={{this.class}}
+  ...attributes
+  name={{@name}}
+  id={{@inpudId}}
+  disabled={{@disabled}}
+  multiple={{@multiple}}
+  {{on "change" this.onUpdate}}
+  {{on "blur" this.onBlur}}
+>
+  {{#if (or @prompt @includeBlank)}}
+    <option
+      value=""
+      disabled={{not @promptIsSelectable}}
+      selected={{not @value}}
+    >{{or @prompt @includeBlank}}</option>
+  {{/if}}
+
+  {{#if this.hasGrouping}}
+    {{#each this.optionGroups as |optionGroup|}}
+      <optgroup label={{optionGroup.groupName}}>
+        {{#each optionGroup.options as |opt|}}
+          {{#let
+            (if
+              (or @optionValuePath @optionTargetPath)
+              (get opt (or @optionValuePath @optionTargetPath))
+              opt
+            )
+            as |optionValue|
+          }}
+            <option
+              selected={{eq optionValue @value}}
+              value={{optionValue}}
+            >{{#if @optionLabelPath}}
+                {{get opt @optionLabelPath}}
+              {{else if @optionValuePath}}
+                {{get opt @optionValuePath}}
+              {{else if @optionTargetPath}}
+                {{get opt @optionTargetPath}}
+              {{else}}
+                {{opt}}
+              {{/if}}
+            </option>
+          {{/let}}
+        {{/each}}
+      </optgroup>
+    {{/each}}
+  {{else}}
+    {{#each @options as |opt|}}
+      {{#let
+        (if
+          (or @optionValuePath @optionTargetPath)
+          (get opt (or @optionValuePath @optionTargetPath))
+          opt
+        )
+        as |optionValue|
+      }}
+        <option selected={{eq optionValue @value}} value={{optionValue}}>{{#if
+            @optionLabelPath
+          }}
+            {{get opt @optionLabelPath}}
+          {{else if @optionValuePath}}
+            {{get opt @optionValuePath}}
+          {{else if @optionTargetPath}}
+            {{get opt @optionTargetPath}}
+          {{else}}
+            {{opt}}
+          {{/if}}</option>
+      {{/let}}
+    {{/each}}
+  {{/if}}
+</select>

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

@@ -1,4 +1,120 @@
+import { A as emberArray, isArray } from "@ember/array";
+import { deprecate } from "@ember/debug";
+import EmberObject, { action, get } from "@ember/object";
 import Component from "@glimmer/component";
 
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class SelectComponent extends Component {}
+/**
+ * This component is heavily inspired by the ember-one-way-select addon.
+ * https://github.com/DockYard/ember-one-way-select
+ * Our implementation is slightly simpler, since it does not support
+ * the block syntax for options.
+ */
+
+export default class SelectComponent extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (this.args.includeBlank) {
+      deprecate(
+        "The `includeBlank` property is deprecated. Please use `prompt` instead.",
+        false,
+        {
+          id: "ember-validated-form:NoMoreincludeBlank",
+          until: "6.0.0",
+          since: "5.1.0",
+          url: "https://github.com/adfinis-sygroup/ember-validated-form/releases/tag/v5.1.0",
+        }
+      );
+    }
+  }
+
+  get hasPreGroupedOptions() {
+    return (
+      this.args.options[0]?.groupName && isArray(this.args.options[0]?.options)
+    );
+  }
+
+  get hasGrouping() {
+    return this.hasPreGroupedOptions || this.args.groupLabelPath;
+  }
+
+  get optionGroups() {
+    const groupLabelPath = this.args.groupLabelPath;
+    if (!groupLabelPath) {
+      return this.args.options;
+    }
+    const groups = emberArray();
+
+    this.args.options.forEach((item) => {
+      const label = get(item, groupLabelPath);
+
+      if (label) {
+        let group = groups.findBy("groupName", label);
+
+        if (!group) {
+          group = EmberObject.create({
+            groupName: label,
+            options: emberArray(),
+          });
+
+          groups.pushObject(group);
+        }
+
+        group.options.pushObject(item);
+      } else {
+        groups.pushObject(item);
+      }
+    });
+
+    return groups;
+  }
+
+  findOption(target) {
+    const targetPath = this.args.optionTargetPath;
+    const valuePath = this.args.optionValuePath || targetPath;
+    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) =>
+        selectedValues.includes(`${valuePath ? item[valuePath] : item}`)
+      );
+      if (targetPath) {
+        return foundOptions.map((item) => item[targetPath]);
+      }
+      return foundOptions;
+    }
+
+    //single select
+    const foundOption = options.find(
+      (item) => `${valuePath ? item[valuePath] : item.value}` === target.value
+    );
+    if (targetPath) {
+      return foundOption[targetPath];
+    }
+    return foundOption;
+  }
+
+  @action
+  onUpdate(event) {
+    if (this.args.update) {
+      this.args.update(this.findOption(event.target));
+    }
+  }
+
+  @action
+  onBlur(event) {
+    if (this.args.setDirty) {
+      this.args.setDirty(event.target.value);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "5.0.0",
+  "version": "5.2.1",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -29,27 +29,26 @@
     "start": "ember serve",
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each"
-  },
-  "lint-staged": {
-    "*.{js,json,css,md}": [
-      "prettier --write",
-      "git add"
-    ]
+    "test:ember-compatibility": "ember try:each",
+    "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-one-way-select": "^4.0.1",
     "ember-truth-helpers": "^3.0.0"
   },
   "devDependencies": {
-    "@adfinis-sygroup/eslint-config": "1.4.2",
-    "@adfinis-sygroup/semantic-release-config": "3.2.0",
-    "@babel/core": "7.15.8",
+    "@adfinis-sygroup/eslint-config": "1.5.0",
+    "@adfinis-sygroup/semantic-release-config": "3.4.0",
+    "@babel/core": "7.16.12",
+    "@babel/helper-create-regexp-features-plugin": "^7.16.7",
+    "@babel/helper-environment-visitor": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.16.7",
+    "@babel/plugin-transform-modules-amd": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.5.0",
+    "@ember/test-helpers": "2.6.0",
     "@embroider/test-setup": "0.45.0",
     "@fortawesome/ember-fontawesome": "0.2.3",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
@@ -57,10 +56,10 @@
     "@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.0.3",
+    "ember-cli-addon-docs": "4.2.1",
     "ember-cli-dependency-checker": "3.2.0",
     "ember-cli-deploy": "1.0.2",
     "ember-cli-deploy-build": "2.0.0",
@@ -71,37 +70,40 @@
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-cli-test-loader": "3.0.0",
-    "ember-concurrency": "2.1.2",
+    "ember-concurrency": "2.2.0",
     "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",
     "ember-source-channel-url": "3.0.0",
-    "ember-template-lint": "3.9.0",
+    "ember-template-lint": "3.15.0",
     "ember-template-lint-plugin-prettier": "2.0.1",
     "ember-try": "1.4.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-ember": "10.5.5",
-    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-ember": "10.5.8",
+    "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.2",
+    "husky": "7.0.4",
     "lint-staged": "11.2.0",
     "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.67.0"
   },
   "resolutions": {
-    "graceful-fs": ">=4.2.0"
+    "graceful-fs": ">=4.2.0",
+    "@embroider/macros": "^1.0.0",
+    "@embroider/core": "^1.0.0",
+    "@embroider/util": "^1.0.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"
@@ -116,6 +118,11 @@
   "release": {
     "extends": "@adfinis-sygroup/semantic-release-config"
   },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.hbs": "ember-template-lint --fix",
+    "*.{scss,graphql,json,md,yml}": "prettier --write"
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"

package/.husky/precommit

@@ -1 +0,0 @@
-yarn lint-staged