ember-validated-form 4.1.0 → 5.2.0

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

@@ -1,8 +1,12 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-import layout from "../../../templates/components/validated-input/types/checkbox";
+export default class CheckboxComponent extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
 
-export default Component.extend({
-  layout,
-  tagName: "",
-});
+    this.args.update(event.target.checked);
+    this.args.setDirty();
+  }
+}

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

@@ -0,0 +1,6 @@
+<input
+  class={{this.class}}
+  ...attributes
+  {{on "input" this.onUpdate}}
+  {{on "blur" @setDirty}}
+/>

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

@@ -1,19 +1,11 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-export default Component.extend({
-  tagName: "input",
-  type: "text",
-  attributeBindings: [
-    "value",
-    "placeholder",
-    "type",
-    "inputId:id",
-    "name",
-    "autofocus",
-    "autocomplete",
-    "disabled",
+export default class InputComponent extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
 
-    "update:oninput",
-    "setDirty:onblur",
-  ],
-});
+    this.args.update(event.target.value);
+  }
+}

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

@@ -0,0 +1,14 @@
+{{#each @options as |option i|}}
+  <label>
+    <input
+      type="radio"
+      checked={{eq @value option.key}}
+      value={{option.key}}
+      name={{@name}}
+      id="{{@inputId}}-{{i}}"
+      disabled={{@disabled}}
+      {{on "input" (fn this.onUpdate option.key)}}
+    />
+    {{option.label}}
+  </label>
+{{/each}}

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

@@ -1,8 +1,12 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-import layout from "../../../templates/components/validated-input/types/radio-group";
+export default class RadioGroupComponent extends Component {
+  @action
+  onUpdate(value, event) {
+    event.preventDefault();
 
-export default Component.extend({
-  layout,
-  tagName: "",
-});
+    this.args.update(value);
+    this.args.setDirty();
+  }
+}

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

@@ -0,0 +1,72 @@
+<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,8 +1,120 @@
-import Component from "@ember/component";
+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";
 
-import layout from "../../../templates/components/validated-input/types/select";
+/**
+ * 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 Component.extend({
-  layout,
-  tagName: "",
-});
+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/addon/components/validated-input/types/textarea.hbs

@@ -0,0 +1,7 @@
+<textarea
+  class={{this.class}}
+  ...attributes
+  {{on "input" this.onUpdate}}
+  {{on "blur" @setDirty}}
+>
+</textarea>

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

@@ -1,19 +1,11 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-export default Component.extend({
-  tagName: "textarea",
-  attributeBindings: [
-    "value",
-    "placeholder",
-    "name",
-    "inputId:id",
-    "disabled",
-    "autofocus",
-    "rows",
-    "cols",
-    "autocomplete",
+export default class TextareaComponent extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
 
-    "update:oninput",
-    "setDirty:onblur",
-  ],
-});
+    this.args.update(event.target.value);
+  }
+}

package/addon/{templates/components → components}/validated-input.hbs

@@ -56,8 +56,7 @@
       @multiple={{@multiple}}
       @update={{this.update}}
       @setDirty={{this.setDirty}}
-      @labelComponent={{
-        component
+      @labelComponent={{component
         this.labelComponent
         label=@label
         required=@required
@@ -66,11 +65,10 @@
         inputId=this.inputId
       }}
       @hintComponent={{if @hint (component this.hintComponent hint=@hint)}}
-      @errorComponent={{
-        if
+      @errorComponent={{if
         (and this.showValidity this.errors)
         (component this.errorComponent errors=this.errors)
       }}
     />
   {{/let}}
-{{/if}}
+{{/if}}

package/addon/components/validated-input.js

@@ -1,11 +1,9 @@
-import { setComponentTemplate } from "@ember/component";
 import { action, set, get } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
 import themedComponent from "../-private/themed-component";
-import template from "../templates/components/validated-input";
 
 /**
  * This component wraps form inputs.
@@ -20,7 +18,7 @@ import template from "../templates/components/validated-input";
  * @class validated-input
  * @export default
  */
-export class ValidatedInput extends Component {
+export default class ValidatedInputComponent extends Component {
   inputId = guidFor(this);
 
   @tracked dirty;
@@ -40,11 +38,6 @@ export class ValidatedInput extends Component {
     this.required = this.args.required ?? false;
     this.type = this.args.type ?? "text";
     this.validateBeforeSubmit = this.args.validateBeforeSubmit ?? true;
-
-    this.renderComponent = this.args.renderComponent ?? this.renderComponent;
-    this.labelComponent = this.args.labelComponent ?? this.labelComponent;
-    this.hintComponent = this.args.hintComponent ?? this.hintComponent;
-    this.errorComponent = this.args.errorComponent ?? this.errorComponent;
   }
 
   get _val() {
@@ -97,5 +90,3 @@ export class ValidatedInput extends Component {
     }
   }
 }
-
-export default setComponentTemplate(template, ValidatedInput);

package/app/components/validated-form.js

@@ -1,7 +1 @@
-import ValidatedForm from "ember-validated-form/components/validated-form";
-
-import config from "../config/environment";
-
-export default ValidatedForm.extend({
-  config: config["ember-validated-form"],
-});
+export { default } from "ember-validated-form/components/validated-form";

package/config/environment.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "4.1.0",
+  "version": "5.2.0",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -20,42 +20,46 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
+    "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:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "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": "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": "^1.11.2",
-    "ember-cli-babel": "^7.26.3",
+    "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.3.2",
-    "@adfinis-sygroup/semantic-release-config": "3.1.0",
-    "@babel/core": "7.14.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.6.0",
+    "@embroider/test-setup": "0.45.0",
     "@fortawesome/ember-fontawesome": "0.2.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@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.14.1",
-    "ember-changeset-validations": "3.15.2",
-    "ember-cli": "3.27.0",
-    "ember-cli-addon-docs": "3.0.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-dependency-checker": "3.2.0",
     "ember-cli-deploy": "1.0.2",
     "ember-cli-deploy-build": "2.0.0",
@@ -66,36 +70,46 @@
     "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-data": "3.27.1",
+    "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": "0.1.6",
-    "ember-power-select": "4.1.6",
-    "ember-qunit": "4.6.0",
-    "ember-resolver": "8.0.2",
-    "ember-source": "3.27.5",
+    "ember-maybe-import-regenerator": "1.0.0",
+    "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": "2.21.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": "9.6.0",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-ember": "10.5.8",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "husky": "7.0.1",
-    "lint-staged": "11.1.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-qunit": "6.2.0",
+    "husky": "7.0.4",
+    "lint-staged": "11.2.0",
     "loader.js": "4.7.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.3.2",
-    "qunit-dom": "1.6.0"
+    "prettier": "2.5.1",
+    "qunit": "2.17.2",
+    "qunit-dom": "2.0.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": "14.* || >= 16"
+    "node": "12.* || 14.* || >= 16"
+  },
+  "ember": {
+    "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
@@ -104,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/.dependabot/config.yml

@@ -1,14 +0,0 @@
-version: 1
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "live"
-    version_requirement_updates: "increase_versions"
-    automerged_updates:
-      - match:
-          dependency_type: "development"
-          update_type: "semver:minor"
-    commit_message:
-      prefix: "fix"
-      prefix_development: "chore"
-      include_scope: true

package/.husky/precommit

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

package/.prettierignore

@@ -1 +0,0 @@
-package.json

package/addon/templates/components/validated-button/button.hbs

@@ -1 +0,0 @@
-{{#if hasBlock}}{{~yield~}}{{else}}{{~label~}}{{/if}}

package/addon/templates/components/validated-button.hbs

@@ -1,7 +0,0 @@
-{{#with (component buttonComponent onclick=action disabled=disabled label=label type=type class=class) as |button|}}
-  {{#if hasBlock}}
-    {{#component button}}{{yield}}{{/component}}
-  {{else}}
-    {{component button}}
-  {{/if}}
-{{/with}}

package/addon/templates/components/validated-form.hbs

@@ -1,15 +0,0 @@
-{{yield (hash
-  model=model
-  loading=loading
-  input=(component "validated-input"
-    model=model
-    submitted=submitted
-    validateBeforeSubmit=validateBeforeSubmit
-  )
-  submit=(component "validated-button"
-    class=submitClass
-    type="submit"
-    loading=loading
-    label="Save"
-  )
-)}}