ember-validated-form 5.0.0 → 5.1.0

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/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,55 @@
+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;
+
+  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();
+    const model = this.args.model;
+
+    if (!model || !model.validate) {
+      this.runCallback(ON_CLICK);
+      return;
+    }
+
+    await model.validate();
+
+    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,13 @@
         label="Save"
         action=this.submit
       )
+      button=(component
+        "validated-button"
+        type="button"
+        loading=this.loading
+        label="Action"
+        model=@model
+      )
     )
   }}
 </form>

package/addon/components/validated-form.js

@@ -1,4 +1,5 @@
 import { action } from "@ember/object";
+import { scheduleOnce } from "@ember/runloop";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { resolve } from "rsvp";
@@ -15,10 +16,14 @@ export default class ValidatedFormComponent extends Component {
     super(...args);
 
     if (this.args.model && this.args.model.validate) {
-      this.args.model.validate();
+      scheduleOnce("actions", this, "validateModel", this.args.model);
     }
   }
 
+  validateModel(model) {
+    model.validate();
+  }
+
   @action
   async submit(event) {
     event.preventDefault();

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,49 @@
-{{! 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 @optionValuePath (get opt @optionValuePath) opt)
+            as |optionValue|
+          }}
+            <option
+              selected={{eq optionValue @value}}
+              value={{optionValue}}
+            >{{if @optionLabelPath (get opt @optionLabelPath) opt}}</option>
+          {{/let}}
+        {{/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}}
+  {{/if}}
+</select>

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

@@ -1,4 +1,85 @@
+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;
+  }
+
+  @action
+  onUpdate(event) {
+    if (this.args.update) {
+      this.args.update(event.target.value);
+    }
+  }
+
+  @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.1.0",
   "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-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.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",
     "@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",
@@ -60,7 +59,7 @@
     "ember-changeset": "3.15.0",
     "ember-changeset-validations": "3.16.0",
     "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,7 +70,7 @@
     "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",
@@ -81,17 +80,17 @@
     "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.3",
     "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",
@@ -116,6 +115,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