ember-validated-form 4.1.0 → 5.0.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/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [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=@action
+    loading=@loading
+    disabled=@disabled
+    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,7 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
 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"),
-});
+export default class ValidatedButtonComponent extends Component {
+  @themedComponent("validated-button/button") buttonComponent;
+}

package/addon/components/validated-form.hbs

@@ -0,0 +1,21 @@
+<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
+      )
+    )
+  }}
+</form>

package/addon/components/validated-form.js

@@ -1,70 +1,56 @@
-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 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",
-
-  classNameBindings: ["submitted"],
-  attributeBindings: ["autocomplete"],
-
-  loading: false,
-
-  submitted: false,
-
-  layout,
+export default class ValidatedFormComponent extends Component {
+  @tracked loading = false;
+  @tracked submitted = false;
+  @tracked validateBeforeSubmit = true;
 
-  validateBeforeSubmit: true,
+  constructor(...args) {
+    super(...args);
 
-  init(...args) {
-    this._super(...args);
-    if (this.model && this.model.validate) {
-      this.model.validate();
+    if (this.args.model && this.args.model.validate) {
+      this.args.model.validate();
     }
-  },
+  }
 
-  submit() {
-    this.set("submitted", true);
-    const model = this.model;
+  @action
+  async submit(event) {
+    event.preventDefault();
+
+    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")) {
-        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";
+}

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

@@ -0,0 +1,110 @@
+<div class={{this.class}}>
+  {{#if (not-eq @type "checkbox")}}
+    <@labelComponent />
+  {{/if}}
+
+  <div class="uk-form-controls">
+    {{#if (eq @type "select")}}
+      {{#let (component this.selectComponent) as |Select|}}
+        <Select
+          @disabled={{@disabled}}
+          @includeBlank={{@includeBlank}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @multiple={{@multiple}}
+          @name={{or @inputName @name}}
+          @optionLabelPath={{@optionLabelPath}}
+          @options={{@options}}
+          @optionTargetPath={{@optionTargetPath}}
+          @optionValuePath={{@optionValuePath}}
+          @promptIsSelectable={{@promptIsSelectable}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+        />
+      {{/let}}
+    {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
+      {{#let (component this.radioGroupComponent) as |RadioGroup|}}
+        <RadioGroup
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @name={{or @inputName @name}}
+          @options={{@options}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+        />
+      {{/let}}
+    {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
+      {{#let (component this.checkboxGroupComponent) as |CheckboxGroup|}}
+        <CheckboxGroup
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @name={{or @inputName @name}}
+          @options={{@options}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+        />
+      {{/let}}
+    {{else if (eq @type "checkbox")}}
+      {{#let (component this.checkboxComponent) as |Checkbox|}}
+        <Checkbox
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @labelComponent={{@labelComponent}}
+          @name={{or @inputName @name}}
+          @options={{@options}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+        />
+      {{/let}}
+    {{else if (eq @type "textarea")}}
+      {{#let (component this.textareaComponent) as |DynamicTextarea|}}
+        <DynamicTextarea
+          autocomplete={{@autocomplete}}
+          autofocus={{@autofocus}}
+          cols={{@cols}}
+          disabled={{@disabled}}
+          id={{@inputId}}
+          name={{or @inputName @name}}
+          placeholder={{@placeholder}}
+          rows={{@rows}}
+          value={{@value}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+        />
+      {{/let}}
+    {{else}}
+      {{#let (component this.inputComponent) as |DynamicInput|}}
+        <DynamicInput
+          autocomplete={{@autocomplete}}
+          autofocus={{@autofocus}}
+          disabled={{@disabled}}
+          id={{@inputId}}
+          name={{or @inputName @name}}
+          placeholder={{@placeholder}}
+          type={{@type}}
+          value={{@value}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+        />
+      {{/let}}
+    {{/if}}
+  </div>
+
+  <@hintComponent />
+  <@errorComponent />
+</div>

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

@@ -1,7 +1,5 @@
-import layout from "../../../../templates/components/validated-input/-themes/uikit/render";
 import Component from "../../render";
 
-export default Component.extend({
-  layout,
-  classNames: ["uk-margin"],
-});
+export default class UikitRenderComponent extends Component {
+  class = "uk-margin";
+}

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

@@ -0,0 +1 @@
+<span class={{this.class}} ...attributes>{{yield}}{{this.errorString}}</span>

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

@@ -1,8 +1,7 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
-import layout from "../../templates/components/validated-input/error";
-
-export default Component.extend({
-  layout,
-  tagName: "span",
-});
+export default class ErrorComponent extends Component {
+  get errorString() {
+    return this.args.errors?.join(", ");
+  }
+}

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

@@ -0,0 +1 @@
+<small class={{this.class}} ...attributes>{{yield}}{{@hint}}</small>

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

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

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

@@ -0,0 +1,3 @@
+<label class={{this.class}} for={{@inputId}} ...attributes>
+  {{yield}}{{@label}}{{if @required " *"}}
+</label>

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

@@ -1,9 +1,4 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
-import layout from "../../templates/components/validated-input/label";
-
-export default Component.extend({
-  layout,
-  tagName: "label",
-  attributeBindings: ["inputId:for"],
-});
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class LabelComponent extends Component {}