ember-validated-form 3.0.3 → 5.0.0

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,17 @@
+{{! 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}}
+/>

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

@@ -1,8 +1,4 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
-import layout from "../../../templates/components/validated-input/types/select";
-
-export default Component.extend({
-  layout,
-  tagName: "",
-});
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class SelectComponent extends Component {}

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/components/validated-input.hbs

@@ -0,0 +1,74 @@
+{{#if (has-block)}}
+  {{#let (component this.labelComponent) as |LabelComponent|}}
+    <LabelComponent
+      @label={{@label}}
+      @required={{this.required}}
+      @isValid={{this.isValid}}
+      @isInvalid={{this.isInvalid}}
+      @inputId={{this.inputId}}
+    />
+  {{/let}}
+
+  {{yield
+    (hash
+      value=this._val
+      update=this.update
+      setDirty=this.setDirty
+      model=@model
+      name=@name
+      inputId=this.inputId
+      isValid=this.isValid
+      isInvalid=this.isInvalid
+    )
+  }}
+
+  {{#if @hint}}
+    {{component this.hintComponent hint=@hint}}
+  {{/if}}
+
+  {{#if (and this.showValidity this.errors)}}
+    {{component this.errorComponent errors=this.errors}}
+  {{/if}}
+{{else}}
+  {{#let (component this.renderComponent) as |RenderComponent|}}
+    <RenderComponent
+      @type={{this.type}}
+      @value={{this._val}}
+      @inputId={{this.inputId}}
+      @options={{@options}}
+      @name={{@name}}
+      @inputName={{@inputName}}
+      @disabled={{@disabled}}
+      @autofocus={{@autofocus}}
+      @autocomplete={{@autocomplete}}
+      @rows={{@rows}}
+      @cols={{@cols}}
+      @model={{@model}}
+      @isValid={{this.isValid}}
+      @isInvalid={{this.isInvalid}}
+      @placeholder={{@placeholder}}
+      @class={{@class}}
+      @promptIsSelectable={{@promptIsSelectable}}
+      @optionLabelPath={{@optionLabelPath}}
+      @optionValuePath={{@optionValuePath}}
+      @optionTargetPath={{@optionTargetPath}}
+      @includeBlank={{@includeBlank}}
+      @multiple={{@multiple}}
+      @update={{this.update}}
+      @setDirty={{this.setDirty}}
+      @labelComponent={{component
+        this.labelComponent
+        label=@label
+        required=@required
+        isValid=this.isValid
+        isInvalid=this.isInvalid
+        inputId=this.inputId
+      }}
+      @hintComponent={{if @hint (component this.hintComponent hint=@hint)}}
+      @errorComponent={{if
+        (and this.showValidity this.errors)
+        (component this.errorComponent errors=this.errors)
+      }}
+    />
+  {{/let}}
+{{/if}}

package/addon/components/validated-input.js

@@ -1,90 +1,92 @@
-import Component from "@ember/component";
-import { computed, defineProperty } from "@ember/object";
-import { v4 } from "uuid";
+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 layout from "../templates/components/validated-input";
 
 /**
  * This component wraps form inputs.
  *
  * It can be used in a two-way-binding style like
- * {{validated-input model=model name='firstName'}} (model will be updated)
+ * <ValidatedInput @model={{model}} @name='firstName'/> (model will be updated)
  *
  * or in a one-way-binding style
- * {{validated-input model=model name='firstName' on-update=(action "update"}}
+ * <ValidatedInput @model={{model}} @name='firstName' @on-update={{this.update}}
  * (update action is called, model is not updated)
  *
  * @class validated-input
  * @export default
  */
-export default Component.extend({
-  layout,
-  tagName: "",
-  dirty: false,
-  required: false,
-  type: "text",
-  validateBeforeSubmit: true,
+export default class ValidatedInputComponent extends Component {
+  inputId = guidFor(this);
 
-  init(...args) {
-    this._super(...args);
+  @tracked dirty;
+  @tracked required;
+  @tracked type;
+  @tracked validateBeforeSubmit;
 
-    defineProperty(
-      this,
-      "_val",
-      computed("value", `model.${this.name}`, "name", function () {
-        return this.value || this.get(`model.${this.name}`);
-      })
-    );
-  },
+  @themedComponent("validated-input/render") renderComponent;
+  @themedComponent("validated-input/label") labelComponent;
+  @themedComponent("validated-input/hint") hintComponent;
+  @themedComponent("validated-input/error") errorComponent;
+
+  constructor(...args) {
+    super(...args);
 
-  inputId: computed(function () {
-    return v4();
-  }),
+    this.dirty = this.args.dirty ?? false;
+    this.required = this.args.required ?? false;
+    this.type = this.args.type ?? "text";
+    this.validateBeforeSubmit = this.args.validateBeforeSubmit ?? true;
+  }
+
+  get _val() {
+    return (
+      this.args.value ??
+      (this.args.model &&
+        this.args.name &&
+        get(this.args.model, this.args.name))
+    );
+  }
 
-  errors: computed("_val", "name", function () {
-    const errors = this.get(`model.error.${this.name}.validation`) || [];
+  get errors() {
+    const errors =
+      (this.args.model &&
+        get(this.args.model, `error.${this.args.name}.validation`)) ??
+      [];
 
     if (!Array.isArray(errors)) {
       return [errors];
     }
 
     return errors;
-  }),
+  }
 
-  isValid: computed("showValidity", "errors.[]", function () {
+  get isValid() {
     return this.showValidity && !this.errors.length;
-  }),
+  }
 
-  isInvalid: computed("showValidity", "errors.[]", function () {
+  get isInvalid() {
     return this.showValidity && !!this.errors.length;
-  }),
+  }
 
-  renderComponent: themedComponent("validated-input/render"),
-  labelComponent: themedComponent("validated-input/label"),
-  hintComponent: themedComponent("validated-input/hint"),
-  errorComponent: themedComponent("validated-input/error"),
+  get showValidity() {
+    return this.args.submitted || (this.validateBeforeSubmit && this.dirty);
+  }
 
-  showValidity: computed(
-    "validateBeforeSubmit",
-    "dirty",
-    "submitted",
-    function () {
-      return this.submitted || (this.validateBeforeSubmit && this.dirty);
-    }
-  ),
-
-  actions: {
-    setDirty() {
-      this.set("dirty", true);
-    },
+  @action
+  setDirty() {
+    this.dirty = true;
+  }
 
-    update(value) {
-      if (this["on-update"]) {
-        this["on-update"](value, this.model);
-      } else {
-        this.set(`model.${this.name}`, value);
-      }
-    },
-  },
-});
+  @action
+  update(value) {
+    if (this.args["on-update"]) {
+      this.args["on-update"](value, this.args.model);
+    } else {
+      this.args.model.set
+        ? this.args.model.set(this.args.name, value)
+        : set(this.args.model, this.args.name, value);
+    }
+  }
+}

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/app/components/validated-input/types/-themes/bootstrap/checkbox-group.js

@@ -0,0 +1 @@
+export { default } from "ember-validated-form/components/validated-input/types/-themes/bootstrap/checkbox-group";

package/app/components/validated-input/types/-themes/uikit/checkbox-group.js

@@ -0,0 +1 @@
+export { default } from "ember-validated-form/components/validated-input/types/-themes/uikit/checkbox-group";

package/app/components/validated-input/types/checkbox-group.js

@@ -0,0 +1 @@
+export { default } from "ember-validated-form/components/validated-input/types/checkbox-group";

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": "3.0.3",
+  "version": "5.0.0",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -20,11 +20,14 @@
   },
   "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"
   },
@@ -35,65 +38,76 @@
     ]
   },
   "dependencies": {
-    "ember-auto-import": "^1.11.2",
-    "ember-cli-babel": "^7.26.3",
+    "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",
-    "uuid": "^8.3.2"
+    "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.13.15",
+    "@adfinis-sygroup/eslint-config": "1.4.2",
+    "@adfinis-sygroup/semantic-release-config": "3.2.0",
+    "@babel/core": "7.15.8",
     "@ember/optional-features": "2.0.0",
+    "@ember/test-helpers": "2.5.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.13.3",
-    "ember-changeset-validations": "3.14.2",
-    "ember-cli": "3.26.0",
-    "ember-cli-addon-docs": "1.0.0",
+    "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-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.0.2",
+    "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.1",
+    "ember-cli-terser": "4.0.2",
     "ember-cli-test-loader": "3.0.0",
-    "ember-concurrency": "2.0.3",
-    "ember-data": "3.26.0",
+    "ember-concurrency": "2.1.2",
+    "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.4",
-    "ember-qunit": "4.6.0",
-    "ember-resolver": "8.0.2",
-    "ember-source": "3.26.1",
+    "ember-maybe-import-regenerator": "1.0.0",
+    "ember-power-select": "4.1.6",
+    "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.9.0",
+    "ember-template-lint-plugin-prettier": "2.0.1",
     "ember-try": "1.4.0",
-    "eslint": "7.24.0",
-    "eslint-config-prettier": "8.2.0",
-    "eslint-plugin-ember": "9.6.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-ember": "10.5.5",
+    "eslint-plugin-import": "2.24.2",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "husky": "6.0.0",
-    "lint-staged": "10.5.4",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-qunit": "6.2.0",
+    "husky": "7.0.2",
+    "lint-staged": "11.2.0",
     "loader.js": "4.7.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.2.1",
-    "qunit-dom": "1.6.0"
+    "prettier": "2.4.1",
+    "qunit": "2.17.2",
+    "qunit-dom": "2.0.0",
+    "webpack": "5.58.0"
+  },
+  "resolutions": {
+    "graceful-fs": ">=4.2.0"
   },
   "engines": {
-    "node": "10.* || >= 12"
+    "node": "12.* || 14.* || >= 16"
+  },
+  "ember": {
+    "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

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/.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"
-  )
-)}}