ember-validated-form 4.1.0 → 5.2.0

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,6 @@
 ---
 name: Bug report
 about: Template for bug reports
-
 ---
 
 --

package/.github/dependabot.yml

@@ -0,0 +1,11 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "friday"
+      time: "12:00"
+      timezone: "Europe/Zurich"
+    open-pull-requests-limit: 10
+    versioning-strategy: increase

package/.github/workflows/deploy.yml

@@ -25,4 +25,4 @@ jobs:
         env:
           CI: true
           DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
-          ADDON_DOCS_VERSION_PATH: ${GITHUB_REF#refs/heads/}
+          ADDON_DOCS_UPDATE_LATEST: true

package/.github/workflows/test.yml

@@ -67,8 +67,8 @@ jobs:
     strategy:
       matrix:
         scenario:
-          - ember-lts-3.20
           - ember-lts-3.24
+          - ember-lts-3.28
           - ember-release
 
     steps:

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,35 @@
+# [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)
+
+
+### chore
+
+* **deps:** update ember and other dependencies ([41e099c](https://github.com/adfinis-sygroup/ember-validated-form/commit/41e099c4da82135c562493e5b2a4f9420dca73c6))
+* **ember:** remove support for ember 3.20 ([0cfebfc](https://github.com/adfinis-sygroup/ember-validated-form/commit/0cfebfcc5792a1df52093a972878af1617ec8100))
+
+
+### Features
+
+* refactor all components to glimmer and use native classes ([cee7373](https://github.com/adfinis-sygroup/ember-validated-form/commit/cee7373a3c0783a02fe00b5e510c41ba604403c2))
+
+
+### BREAKING CHANGES
+
+* **ember:** Remove support for ember LTS 3.20 since that version
+has a bug with autotracking.
+* **deps:** Require `ember-auto-import` v2+
+* While the public API won't change, there is a huge
+chance that this will break implementations if someone's extending the
+components of this addon. Components that do need to be refactored to
+glimmer.
+
 # [4.1.0](https://github.com/adfinis-sygroup/ember-validated-form/compare/v4.0.1...v4.1.0) (2021-09-30)
 
 

package/README.md

@@ -2,8 +2,8 @@
 
 [![npm version](https://badge.fury.io/js/ember-validated-form.svg)](https://badge.fury.io/js/ember-validated-form)
 [![Ember Observer Score](https://emberobserver.com/badges/ember-validated-form.svg)](https://emberobserver.com/addons/ember-validated-form)
-[![Build Status](https://travis-ci.org/adfinis-sygroup/ember-validated-form.svg?branch=main)](https://travis-ci.org/adfinis-sygroup/ember-validated-form)
-[![Code style](https://img.shields.io/badge/code_style-prettier-red.svg)](https://github.com/prettier/prettier)
+[![Test](https://github.com/adfinis-sygroup/ember-validated-form/workflows/Test/badge.svg)](https://github.com/adfinis-sygroup/ember-validated-form/actions?query=workflow%3ATest)
+[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 Easily create forms with client side validations.
 

package/addon/-private/themed-component.js

@@ -1,42 +1,38 @@
 import { getOwner } from "@ember/application";
-import { computed, get, set } from "@ember/object";
 
-export default (component) => {
-  return computed({
-    get() {
-      const parts = component.split("/");
-      const componentNameParts = parts.slice(1, parts.length).join("/");
+export default function (component) {
+  return function (_, propertyName) {
+    return {
+      get() {
+        const parts = component.split("/");
+        const componentName = parts.slice(1, parts.length).join("/");
 
-      if (get(this, `overrideComponents.${componentNameParts}`)) {
-        return get(this, `overrideComponents.${componentNameParts}`);
-      }
+        if (this.args[propertyName]) {
+          return this.args[propertyName];
+        }
 
-      const config =
-        getOwner(this).resolveRegistration("config:environment")[
-          "ember-validated-form"
-        ] !== undefined
-          ? getOwner(this).resolveRegistration("config:environment")[
-              "ember-validated-form"
-            ]
-          : {};
+        const config =
+          getOwner(this).resolveRegistration("config:environment")[
+            "ember-validated-form"
+          ] !== undefined
+            ? getOwner(this).resolveRegistration("config:environment")[
+                "ember-validated-form"
+              ]
+            : {};
 
-      const theme = config.theme;
-      const defaultComponent = get(config, `defaults.${componentNameParts}`);
+        const theme = config.theme;
+        const defaultComponent = config.defaults?.[componentName];
 
-      const name = parts.pop();
-      const basePath = parts.join("/");
+        const name = parts.pop();
+        const basePath = parts.join("/");
 
-      return (
-        defaultComponent ||
-        (theme ? `${basePath}/-themes/${theme}/${name}` : `${basePath}/${name}`)
-      );
-    },
-    set(key, value) {
-      if (!get(this, `overrideComponents`)) {
-        set(this, `overrideComponents`, {});
-      }
-      set(this, `overrideComponents.${key}`, value);
-      return value;
-    },
-  });
-};
+        return (
+          defaultComponent ||
+          (theme
+            ? `${basePath}/-themes/${theme}/${name}`
+            : `${basePath}/${name}`)
+        );
+      },
+    };
+  };
+}

package/addon/components/validated-button/-themes/bootstrap/button.js

@@ -1,12 +1,10 @@
-import { computed } from "@ember/object";
-
 import Component from "../../button";
 
-export default Component.extend({
-  classNames: ["btn"],
-  classNameBindings: ["style"],
+export default class BootstrapButton extends Component {
+  get class() {
+    const style = this.args.type === "submit" ? "btn-primary" : "btn-default";
+    const loading = this.args.loading ? "loading" : "";
 
-  style: computed("type", function () {
-    return this.type === "submit" ? "btn-primary" : "btn-default";
-  }),
-});
+    return `btn ${style} ${loading}`;
+  }
+}

package/addon/components/validated-button/-themes/uikit/button.js

@@ -1,12 +1,10 @@
-import { computed } from "@ember/object";
-
 import Component from "../../button";
 
-export default Component.extend({
-  classNames: ["uk-button"],
-  classNameBindings: ["style"],
+export default class UikitButton extends Component {
+  get class() {
+    const style =
+      this.args.type === "submit" ? "uk-button-primary" : "uk-button-default";
 
-  style: computed("type", function () {
-    return this.type === "submit" ? "uk-button-primary" : "uk-button-default";
-  }),
-});
+    return `uk-button ${style}`;
+  }
+}

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

@@ -0,0 +1,9 @@
+<button
+  class={{this.class}}
+  type={{@type}}
+  disabled={{@disabled}}
+  {{on "click" @onClick}}
+  ...attributes
+>
+  {{#if (has-block)}}{{~yield~}}{{else}}{{~@label~}}{{/if}}
+</button>

package/addon/components/validated-button/button.js

@@ -1,9 +1,4 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
-import layout from "../../templates/components/validated-button/button";
-
-export default Component.extend({
-  layout,
-  tagName: "button",
-  attributeBindings: ["disabled", "type", "action:onclick"],
-});
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class ButtonComponent extends Component {}

package/addon/components/validated-button.hbs

@@ -0,0 +1,17 @@
+{{#let
+  (component
+    this.buttonComponent
+    onClick=this.click
+    loading=this.loading
+    disabled=(or @disabled this.loading)
+    label=@label
+    type=@type
+  )
+  as |Button|
+}}
+  {{#if (has-block)}}
+    <Button ...attributes>{{yield}}</Button>
+  {{else}}
+    <Button ...attributes />
+  {{/if}}
+{{/let}}

package/addon/components/validated-button.js

@@ -1,11 +1,60 @@
-import Component from "@ember/component";
+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";
-import layout from "../templates/components/validated-button";
-
-export default Component.extend({
-  layout,
-  type: "button",
-  tagName: "",
-  buttonComponent: themedComponent("validated-button/button"),
-});
+
+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();
+
+    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 (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

@@ -0,0 +1,29 @@
+<form autocomplete={{@autocomplete}} class={{if this.submitted "submitted"}}>
+  {{yield
+    (hash
+      model=@model
+      loading=this.loading
+      input=(component
+        "validated-input"
+        model=@model
+        submitted=this.submitted
+        validateBeforeSubmit=@validateBeforeSubmit
+      )
+      submit=(component
+        "validated-button"
+        type="submit"
+        loading=this.loading
+        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,70 +1,76 @@
-import Component from "@ember/component";
+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";
 
-import layout from "../templates/components/validated-form";
-
 const PROP_ON_SUBMIT = "on-submit";
 const PROP_ON_INVALID_SUBMIT = "on-invalid-submit";
 
-export default Component.extend({
-  tagName: "form",
+export default class ValidatedFormComponent extends Component {
+  @tracked loading = false;
+  @tracked submitted = false;
+  @tracked validateBeforeSubmit = true;
 
-  classNameBindings: ["submitted"],
-  attributeBindings: ["autocomplete"],
+  constructor(...args) {
+    super(...args);
+    this.config =
+      getOwner(this).resolveRegistration("config:environment")[
+        "ember-validated-form"
+      ];
 
-  loading: false,
+    if (this.args.model && this.args.model.validate) {
+      scheduleOnce("actions", this, "validateModel", this.args.model);
+    }
+  }
 
-  submitted: false,
+  validateModel(model) {
+    model.validate();
+  }
 
-  layout,
+  @action
+  markAsDirty() {
+    this.submitted = true;
+  }
 
-  validateBeforeSubmit: true,
+  @action
+  async submit(event) {
+    event.preventDefault();
 
-  init(...args) {
-    this._super(...args);
-    if (this.model && this.model.validate) {
-      this.model.validate();
-    }
-  },
-
-  submit() {
-    this.set("submitted", true);
-    const model = this.model;
+    this.submitted = true;
+    const model = this.args.model;
 
     if (!model || !model.validate) {
       this.runCallback(PROP_ON_SUBMIT);
       return false;
     }
 
-    model.validate().then(() => {
-      if (!this.element) {
-        // We were removed from the DOM while validating
-        return;
-      }
+    await model.validate();
 
-      if (model.get("isInvalid")) {
-        this.runCallback(PROP_ON_INVALID_SUBMIT);
-      } else {
-        this.runCallback(PROP_ON_SUBMIT);
+    if (model.get("isInvalid")) {
+      if (this.config?.features?.scrollErrorIntoView && model.errors[0]?.key) {
+        document
+          .querySelector(`[name=${model.errors[0].key}]`)
+          ?.scrollIntoView();
       }
-    });
+      this.runCallback(PROP_ON_INVALID_SUBMIT);
+    } else {
+      this.runCallback(PROP_ON_SUBMIT);
+    }
+
     return false;
-  },
+  }
 
   runCallback(callbackProp) {
-    const callback = this.get(callbackProp);
+    const callback = this.args[callbackProp];
     if (typeof callback !== "function") {
       return;
     }
-    const model = this.model;
 
-    this.set("loading", true);
-    resolve(callback(model)).finally(() => {
-      if (!this.element) {
-        // We were removed from the DOM while running on-submit()
-        return;
-      }
-      this.set("loading", false);
+    this.loading = true;
+    resolve(callback(this.args.model)).finally(() => {
+      this.loading = false;
     });
-  },
-});
+  }
+}

package/addon/components/validated-input/-themes/bootstrap/error.js

@@ -1,5 +1,5 @@
 import Component from "../../error";
 
-export default Component.extend({
-  classNames: ["invalid-feedback"],
-});
+export default class BootstrapErrorComponent extends Component {
+  class = "invalid-feedback";
+}

package/addon/components/validated-input/-themes/bootstrap/hint.js

@@ -1,5 +1,5 @@
 import Component from "../../hint";
 
-export default Component.extend({
-  classNames: ["form-text", "text-muted"],
-});
+export default class BootstrapHintComponent extends Component {
+  class = "form-text text-muted";
+}

package/addon/components/validated-input/-themes/bootstrap/label.js

@@ -1,3 +1,3 @@
 import Component from "../../label";
 
-export default Component.extend({});
+export default class BootstrapLabelComponent extends Component {}

package/addon/components/validated-input/-themes/bootstrap/render.js

@@ -1,5 +1,5 @@
 import Component from "../../render";
 
-export default Component.extend({
-  classNames: ["form-group"],
-});
+export default class BootstrapRenderComponent extends Component {
+  class = "form-group";
+}

package/addon/components/validated-input/-themes/uikit/error.hbs

@@ -0,0 +1,4 @@
+<small
+  class="uk-text-danger"
+  ...attributes
+>{{yield}}{{this.errorString}}</small>

package/addon/components/validated-input/-themes/uikit/error.js

@@ -1,6 +1,3 @@
 import Component from "../../error";
 
-export default Component.extend({
-  tagName: "small",
-  classNames: ["uk-text-danger"],
-});
+export default class UikitErrorComponent extends Component {}

package/addon/components/validated-input/-themes/uikit/hint.js

@@ -1,5 +1,5 @@
 import Component from "../../hint";
 
-export default Component.extend({
-  classNames: ["uk-text-muted"],
-});
+export default class UikitHintComponent extends Component {
+  class = "uk-text-muted";
+}

package/addon/components/validated-input/-themes/uikit/label.js

@@ -1,5 +1,5 @@
 import Component from "../../label";
 
-export default Component.extend({
-  classNames: ["uk-form-label"],
-});
+export default class UikitLabelComponent extends Component {
+  class = "uk-form-label";
+}