ember-validated-form 7.0.0 → 8.0.0

package/.husky/commit-msg

@@ -1,7 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# skip in CI
-[ -n "$CI" ] && exit 0
-
-yarn commitlint --edit $1
+# lint commit message
+pnpm commitlint --edit "$1"

package/.husky/pre-commit

@@ -1,8 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# skip in CI
-[ -n "$CI" ] && exit 0
-
 # lint only staged files
-yarn lint-staged
+pnpm lint-staged

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# [8.0.0](https://github.com/adfinis/ember-validated-form/compare/v7.0.1...v8.0.0) (2026-04-23)
+
+
+### Bug Fixes
+
+* **config:** remove usage of importSync for global component overrides ([895790c](https://github.com/adfinis/ember-validated-form/commit/895790c27141a9c14569a4f263827d532edf9452)), closes [#1215](https://github.com/adfinis/ember-validated-form/issues/1215) [#1190](https://github.com/adfinis/ember-validated-form/issues/1190) [#915](https://github.com/adfinis/ember-validated-form/issues/915)
+* **deps:** convert template relevant addons to peer dependencies ([09e7f5b](https://github.com/adfinis/ember-validated-form/commit/09e7f5bb8a9e42ffda3c56b33aeff85d023c8f4e))
+* **deps:** update dependencies ([18c6f02](https://github.com/adfinis/ember-validated-form/commit/18c6f023d569498e2977fa32fc44f8da6d588b4a))
+* **validated-input/types/select:** typo in inputId ([b6e347b](https://github.com/adfinis/ember-validated-form/commit/b6e347bd51883b5705f614c160f8c062cc2263df))
+
+
+### chore
+
+* **ember:** drop support for Ember < 5.12 LTS ([c6a1bed](https://github.com/adfinis/ember-validated-form/commit/c6a1bed4b3c9a23a880b22fe498f61773f6d0278)), closes [#1211](https://github.com/adfinis/ember-validated-form/issues/1211)
+
+
+### Features
+
+* **form:** pass event to submit action ([076bddf](https://github.com/adfinis/ember-validated-form/commit/076bddfc6079b800b69950771f327fcf719531d7)), closes [#661](https://github.com/adfinis/ember-validated-form/issues/661)
+
+
+### BREAKING CHANGES
+
+* **config:** This changes the the way that global overrides for
+`ember-validated-form` components are configured. For instructions on
+how to migrate, check the [migration to v8 guide](https://docs.adfinis.com/ember-validated-form/docs/migration-v8).
+* **ember:** This addon now only supports Ember.js versions from
+5.12 upwards.
+
+## [7.0.1](https://github.com/adfinis/ember-validated-form/compare/v7.0.0...v7.0.1) (2024-03-18)
+
+
+### Bug Fixes
+
+* **deps:** update dependencies ([c2d187b](https://github.com/adfinis/ember-validated-form/commit/c2d187bbbf8652f0bc30637a9b5b5f5c46e44296))
+
 # [7.0.0](https://github.com/adfinis/ember-validated-form/compare/v6.2.0...v7.0.0) (2023-11-21)
 
 

package/README.md

@@ -2,7 +2,7 @@
 
 [![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)
-[![Test](https://github.com/adfinis/ember-validated-form/workflows/Test/badge.svg)](https://github.com/adfinis/ember-validated-form/actions?query=workflow%3ATest)
+[![CI](https://github.com/adfinis/ember-validated-form/actions/workflows/ci.yml/badge.svg)](https://github.com/adfinis/ember-validated-form/actions/workflows/ci.yml)
 [![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/features.js

@@ -0,0 +1,7 @@
+import { getOwner } from "@ember/application";
+
+export function scrollErrorIntoViewEnabled(target) {
+  return getOwner(target).resolveRegistration("config:environment")[
+    "ember-validated-form"
+  ].scrollErrorIntoView;
+}

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

@@ -1,15 +1,15 @@
 <button
-  class={{class-list
+  class={{evf-class-list
     (if
-      (macroCondition (macroGetOwnConfig "isUikit"))
-      (class-list
+      (evf-theme "uikit")
+      (evf-class-list
         "uk-button"
         (if (eq @type "submit") "uk-button-primary" "uk-button-default")
       )
     )
     (if
-      (macroCondition (macroGetOwnConfig "isBootstrap"))
-      (class-list
+      (evf-theme "bootstrap")
+      (evf-class-list
         "btn"
         (if (eq @type "submit") "btn-primary" "btn-default")
         (if @loading "loading")

package/addon/components/validated-button.hbs

@@ -1,19 +1,19 @@
-{{#if (has-block)}}
-  <this.buttonComponent
-    @onClick={{this.click}}
-    @loading={{this.loading}}
-    @disabled={{or @disabled this.loading}}
-    @label={{@label}}
-    @type={{@type}}
-    ...attributes
-  >{{yield}}</this.buttonComponent>
-{{else}}
-  <this.buttonComponent
-    @onClick={{this.click}}
-    @loading={{this.loading}}
-    @disabled={{or @disabled this.loading}}
-    @label={{@label}}
-    @type={{@type}}
-    ...attributes
-  />
-{{/if}}
+{{#let
+  (component
+    (ensure-safe-component
+      (or @buttonComponent (component "validated-button/button"))
+    )
+    onClick=this.click
+    loading=this.loading
+    disabled=(or @disabled this.loading)
+    label=@label
+    type=@type
+  )
+  as |ButtonComponent|
+}}
+  {{#if (has-block)}}
+    <ButtonComponent ...attributes>{{yield}}</ButtonComponent>
+  {{else}}
+    <ButtonComponent ...attributes />
+  {{/if}}
+{{/let}}

package/addon/components/validated-button.js

@@ -1,18 +1,15 @@
 import { action } from "@ember/object";
-import { macroCondition, getOwnConfig } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { resolve } from "rsvp";
 
-import passedOrDefault from "ember-validated-form/passed-or-default";
+import { scrollErrorIntoViewEnabled } from "ember-validated-form/-private/features";
 
 const ON_CLICK = "on-click";
 const ON_INVALID_CLICK = "on-invalid-click";
 export default class ValidatedButtonComponent extends Component {
   @tracked _loading;
 
-  @passedOrDefault("button") buttonComponent;
-
   get loading() {
     return this.args.loading || this._loading;
   }
@@ -40,12 +37,10 @@ export default class ValidatedButtonComponent extends Component {
 
     await model.validate();
 
-    if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
-      if (model.errors[0]?.key) {
-        document
-          .querySelector(`[name=${model.errors[0].key.replaceAll(".", "\\.")}]`)
-          ?.scrollIntoView({ behavior: "smooth" });
-      }
+    if (scrollErrorIntoViewEnabled(this) && model.errors[0]?.key) {
+      document
+        .querySelector(`[name=${model.errors[0].key.replaceAll(".", "\\.")}]`)
+        ?.scrollIntoView({ behavior: "smooth" });
     }
 
     if (model.get("isInvalid")) {

package/addon/components/validated-form.js

@@ -1,10 +1,11 @@
 import { action } from "@ember/object";
 import { scheduleOnce } from "@ember/runloop";
-import { macroCondition, getOwnConfig } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { resolve } from "rsvp";
 
+import { scrollErrorIntoViewEnabled } from "ember-validated-form/-private/features";
+
 const PROP_ON_SUBMIT = "on-submit";
 const PROP_ON_INVALID_SUBMIT = "on-invalid-submit";
 
@@ -38,38 +39,34 @@ export default class ValidatedFormComponent extends Component {
     const model = this.args.model;
 
     if (!model || !model.validate) {
-      this.runCallback(PROP_ON_SUBMIT);
+      this.runCallback(PROP_ON_SUBMIT, event);
       return false;
     }
 
     await model.validate();
 
     if (model.get("isInvalid")) {
-      if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
-        if (model.errors[0]?.key) {
-          document
-            .querySelector(
-              `[name=${model.errors[0].key.replaceAll(".", "\\.")}]`
-            )
-            ?.scrollIntoView({ behavior: "smooth" });
-        }
+      if (scrollErrorIntoViewEnabled(this) && model.errors[0]?.key) {
+        document
+          .querySelector(`[name=${model.errors[0].key.replaceAll(".", "\\.")}]`)
+          ?.scrollIntoView({ behavior: "smooth" });
       }
-      this.runCallback(PROP_ON_INVALID_SUBMIT);
+      this.runCallback(PROP_ON_INVALID_SUBMIT, event);
     } else {
-      this.runCallback(PROP_ON_SUBMIT);
+      this.runCallback(PROP_ON_SUBMIT, event);
     }
 
     return false;
   }
 
-  runCallback(callbackProp) {
+  runCallback(callbackProp, event) {
     const callback = this.args[callbackProp];
     if (typeof callback !== "function") {
       return;
     }
 
     this.loading = true;
-    resolve(callback(this.args.model)).finally(() => {
+    resolve(callback(this.args.model, event)).finally(() => {
       this.loading = false;
     });
   }

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

@@ -1,14 +1,11 @@
-{{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+{{#if (evf-theme "uikit")}}
   <small id={{@id}} class="uk-text-danger" ...attributes>
     {{yield}}{{this.errorString}}
   </small>
 {{else}}
   <span
     id={{@id}}
-    class={{if
-      (macroCondition (macroGetOwnConfig "isBootstrap"))
-      "d-block invalid-feedback"
-    }}
+    class={{if (evf-theme "bootstrap") "d-block invalid-feedback"}}
     ...attributes
   >
     {{yield}}{{this.errorString}}

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

@@ -1,10 +1,8 @@
 <small
   id={{@id}}
-  class={{class-list
-    (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-text-muted")
-    (if
-      (macroCondition (macroGetOwnConfig "isBootstrap")) "form-text text-muted"
-    )
+  class={{evf-class-list
+    (if (evf-theme "uikit") "uk-text-muted")
+    (if (evf-theme "bootstrap") "form-text text-muted")
   }}
   ...attributes
 >{{yield}}{{@hint}}</small>

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

@@ -1,5 +1,5 @@
 <label
-  class={{if (macroCondition (macroGetOwnConfig "isUikit")) "uk-form-label"}}
+  class={{if (evf-theme "uikit") "uk-form-label"}}
   for={{@inputId}}
   ...attributes
 >

package/addon/components/validated-input/render/wrapper.hbs

@@ -1,4 +1,4 @@
-{{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+{{#if (evf-theme "uikit")}}
   <div class="uk-form-controls">{{yield}}</div>
 {{else}}
   {{yield}}

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

@@ -1,127 +1,152 @@
-{{! template-lint-disable no-autofocus-attribute }}
-<div
-  class={{class-list
-    (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-margin")
-    (if (macroCondition (macroGetOwnConfig "isBootstrap")) "form-group")
-  }}
->
-  {{#if (not-eq @type "checkbox")}}
-    <@labelComponent />
-  {{/if}}
-
-  <ValidatedInput::Render::Wrapper>
-    {{#if (eq @type "select")}}
-      <this.selectComponent
-        @disabled={{@disabled}}
-        @inputId={{@inputId}}
-        @isInvalid={{@isInvalid}}
-        @isValid={{@isValid}}
-        @multiple={{@multiple}}
-        @name={{or @inputName @name}}
-        @optionLabelPath={{@optionLabelPath}}
-        @options={{@options}}
-        @optionTargetPath={{@optionTargetPath}}
-        @optionValuePath={{@optionValuePath}}
-        @prompt={{@prompt}}
-        @promptIsSelectable={{@promptIsSelectable}}
-        @setDirty={{@setDirty}}
-        @update={{@update}}
-        @value={{@value}}
-        ...attributes
-      />
-    {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
-      <this.radioGroupComponent
-        @disabled={{@disabled}}
-        @inputId={{@inputId}}
-        @isInvalid={{@isInvalid}}
-        @isValid={{@isValid}}
-        @name={{or @inputName @name}}
-        @options={{@options}}
-        @setDirty={{@setDirty}}
-        @update={{@update}}
-        @value={{@value}}
-        ...attributes
-      />
-    {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
-      <this.checkboxGroupComponent
-        @disabled={{@disabled}}
-        @inputId={{@inputId}}
-        @isInvalid={{@isInvalid}}
-        @isValid={{@isValid}}
-        @name={{or @inputName @name}}
-        @options={{@options}}
-        @setDirty={{@setDirty}}
-        @update={{@update}}
-        @value={{@value}}
-        ...attributes
-      />
-    {{else if (eq @type "checkbox")}}
-      <this.checkboxComponent
-        @disabled={{@disabled}}
-        @inputId={{@inputId}}
-        @isInvalid={{@isInvalid}}
-        @isValid={{@isValid}}
-        @labelComponent={{@labelComponent}}
-        @name={{or @inputName @name}}
-        @options={{@options}}
-        @setDirty={{@setDirty}}
-        @update={{@update}}
-        @value={{@value}}
-        ...attributes
-      />
-    {{else if (eq @type "textarea")}}
-      <this.textareaComponent
-        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}}
-        ...attributes
-      />
-    {{else if
-      (and (eq @type "date") (not-eq this.dateComponent this.inputComponent))
+{{#let
+  (ensure-safe-component
+    (or @selectComponent (component "validated-input/types/select"))
+  )
+  (ensure-safe-component
+    (or @radioGroupComponent (component "validated-input/types/radio-group"))
+  )
+  (ensure-safe-component
+    (or
+      @checkboxGroupComponent (component "validated-input/types/checkbox-group")
+    )
+  )
+  (ensure-safe-component
+    (or @checkboxComponent (component "validated-input/types/checkbox"))
+  )
+  (ensure-safe-component
+    (or @textareaComponent (component "validated-input/types/textarea"))
+  )
+  (ensure-safe-component
+    (or @dateComponent (component "validated-input/types/date"))
+  )
+  (ensure-safe-component
+    (or @inputComponent (component "validated-input/types/input"))
+  )
+  as |SelectComponent RadioGroupComponent CheckboxGroupComponent CheckboxComponent TextareaComponent DateComponent InputComponent|
+}}
+  {{! template-lint-disable no-autofocus-attribute }}
+  <div
+    class={{evf-class-list
+      (if (evf-theme "uikit") "uk-margin")
+      (if (evf-theme "bootstrap") "form-group")
     }}
-      <this.dateComponent
-        @autocomplete={{@autocomplete}}
-        @autofocus={{@autofocus}}
-        @disabled={{@disabled}}
-        @id={{@inputId}}
-        @name={{or @inputName @name}}
-        @placeholder={{@placeholder}}
-        @value={{@value}}
-        @isInvalid={{@isInvalid}}
-        @isValid={{@isValid}}
-        @setDirty={{@setDirty}}
-        @update={{@update}}
-        ...attributes
-      />
-    {{else}}
-      <this.inputComponent
-        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}}
-        ...attributes
-      />
+  >
+    {{#if (not-eq @type "checkbox")}}
+      <@labelComponent />
     {{/if}}
-  </ValidatedInput::Render::Wrapper>
 
-  <@hintComponent />
-  <@errorComponent />
-</div>
+    <ValidatedInput::Render::Wrapper>
+      {{#if (eq @type "select")}}
+        <SelectComponent
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @multiple={{@multiple}}
+          @name={{or @inputName @name}}
+          @optionLabelPath={{@optionLabelPath}}
+          @options={{@options}}
+          @optionTargetPath={{@optionTargetPath}}
+          @optionValuePath={{@optionValuePath}}
+          @prompt={{@prompt}}
+          @promptIsSelectable={{@promptIsSelectable}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+          ...attributes
+        />
+      {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
+        <RadioGroupComponent
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @name={{or @inputName @name}}
+          @options={{@options}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+          ...attributes
+        />
+      {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
+        <CheckboxGroupComponent
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @name={{or @inputName @name}}
+          @options={{@options}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+          ...attributes
+        />
+      {{else if (eq @type "checkbox")}}
+        <CheckboxComponent
+          @disabled={{@disabled}}
+          @inputId={{@inputId}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @labelComponent={{@labelComponent}}
+          @name={{or @inputName @name}}
+          @options={{@options}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          @value={{@value}}
+          ...attributes
+        />
+      {{else if (eq @type "textarea")}}
+        <TextareaComponent
+          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}}
+          ...attributes
+        />
+      {{else if (eq @type "date")}}
+        <DateComponent
+          @autocomplete={{@autocomplete}}
+          @autofocus={{@autofocus}}
+          @disabled={{@disabled}}
+          @id={{@inputId}}
+          @name={{or @inputName @name}}
+          @placeholder={{@placeholder}}
+          @value={{@value}}
+          @isInvalid={{@isInvalid}}
+          @isValid={{@isValid}}
+          @setDirty={{@setDirty}}
+          @update={{@update}}
+          ...attributes
+        />
+      {{else}}
+        <InputComponent
+          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}}
+          ...attributes
+        />
+      {{/if}}
+    </ValidatedInput::Render::Wrapper>
+
+    <@hintComponent />
+    <@errorComponent />
+  </div>
+{{/let}}

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

@@ -1,5 +1,5 @@
 {{#each @options as |option i|}}
-  {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+  {{#if (evf-theme "uikit")}}
     {{#if (not-eq i 0)}}<br />{{/if}}
     <label
       class="uk-form-label
@@ -18,7 +18,7 @@
       />
       {{option.label}}
     </label>
-  {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
+  {{else if (evf-theme "bootstrap")}}
     <div class="custom-control custom-checkbox">
       <input
         type="checkbox"

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

@@ -1,4 +1,4 @@
-{{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+{{#if (evf-theme "uikit")}}
   <@labelComponent
     class="{{if @isValid 'uk-text-success'}} {{if @isInvalid 'uk-text-danger'}}"
   >
@@ -13,7 +13,7 @@
       ...attributes
     />
   </@labelComponent>
-{{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
+{{else if (evf-theme "bootstrap")}}
   <div class="custom-control custom-checkbox">
     <input
       class="custom-control-input

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

@@ -0,0 +1,16 @@
+{{! template-lint-disable no-autofocus-attribute }}
+<ValidatedInput::Types::Input
+  autocomplete={{@autocomplete}}
+  autofocus={{@autofocus}}
+  disabled={{@disabled}}
+  id={{@id}}
+  name={{@name}}
+  placeholder={{@placeholder}}
+  type="date"
+  value={{@value}}
+  @isInvalid={{@isInvalid}}
+  @isValid={{@isValid}}
+  @setDirty={{@setDirty}}
+  @update={{@update}}
+  ...attributes
+/>

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

@@ -1,16 +1,16 @@
 <input
-  class={{class-list
+  class={{evf-class-list
     (if
-      (macroCondition (macroGetOwnConfig "isUikit"))
-      (class-list
+      (evf-theme "uikit")
+      (evf-class-list
         "uk-input"
         (if @isValid "uk-form-success")
         (if @isInvalid "uk-form-danger")
       )
     )
     (if
-      (macroCondition (macroGetOwnConfig "isBootstrap"))
-      (class-list
+      (evf-theme "bootstrap")
+      (evf-class-list
         "form-control" (if @isValid "is-valid") (if @isInvalid "is-invalid")
       )
     )

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

@@ -1,5 +1,5 @@
 {{#each @options as |option i|}}
-  {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+  {{#if (evf-theme "uikit")}}
     {{#if (not-eq i 0)}}<br />{{/if}}
     <label
       class="uk-form-label
@@ -19,7 +19,7 @@
       />
       {{option.label}}
     </label>
-  {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
+  {{else if (evf-theme "bootstrap")}}
     <div class="custom-control custom-radio">
       <input
         type="radio"

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

@@ -1,22 +1,22 @@
 <select
-  class={{class-list
+  class={{evf-class-list
     (if
-      (macroCondition (macroGetOwnConfig "isUikit"))
-      (class-list
+      (evf-theme "uikit")
+      (evf-class-list
         "uk-select"
         (if @isValid "uk-form-success")
         (if @isInvalid "uk-form-danger")
       )
     )
     (if
-      (macroCondition (macroGetOwnConfig "isBootstrap"))
-      (class-list
+      (evf-theme "bootstrap")
+      (evf-class-list
         "form-control" (if @isValid "is-valid") (if @isInvalid "is-invalid")
       )
     )
   }}
   name={{@name}}
-  id={{@inpudId}}
+  id={{@inputId}}
   disabled={{@disabled}}
   multiple={{@multiple}}
   {{on "change" this.onUpdate}}

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

@@ -1,16 +1,16 @@
 <textarea
-  class={{class-list
+  class={{evf-class-list
     (if
-      (macroCondition (macroGetOwnConfig "isUikit"))
-      (class-list
+      (evf-theme "uikit")
+      (evf-class-list
         "uk-textarea"
         (if @isValid "uk-form-success")
         (if @isInvalid "uk-form-danger")
       )
     )
     (if
-      (macroCondition (macroGetOwnConfig "isBootstrap"))
-      (class-list
+      (evf-theme "bootstrap")
+      (evf-class-list
         "form-control" (if @isValid "is-valid") (if @isInvalid "is-invalid")
       )
     )

package/addon/components/validated-input.hbs

@@ -1,83 +1,95 @@
-{{#if (has-block)}}
-  <this.labelComponent
-    @label={{@label}}
-    @required={{this.required}}
-    @isValid={{this.isValid}}
-    @isInvalid={{this.isInvalid}}
-    @inputId={{this.inputId}}
-  />
-
-  {{yield
-    (hash
-      value=this._val
-      update=this.update
-      setDirty=this.setDirty
-      model=@model
-      name=@name
-      inputId=this.inputId
-      isValid=this.isValid
-      isInvalid=this.isInvalid
+{{#let
+  (component
+    (ensure-safe-component
+      (or @labelComponent (component "validated-input/label"))
     )
-  }}
-
-  {{#if @hint}}
-    <this.hintComponent @hint={{@hint}} id={{this.hintId}} />
-  {{/if}}
+    label=@label
+    required=this.required
+    isValid=this.isValid
+    isInvalid=this.isInvalid
+    inputId=this.inputId
+  )
+  (component
+    (ensure-safe-component
+      (or @errorComponent (component "validated-input/error"))
+    )
+    errors=this.errors
+    id=this.errorId
+  )
+  (component
+    (ensure-safe-component
+      (or @hintComponent (component "validated-input/hint"))
+    )
+    hint=@hint
+    id=this.hintId
+  )
+  as |LabelComponent ErrorComponent HintComponent|
+}}
+  {{#if (has-block)}}
+    <LabelComponent />
 
-  {{#if (and this.showValidity this.errors)}}
-    <this.errorComponent @errors={{this.errors}} id={{this.errorId}} />
-  {{/if}}
-{{else}}
-  <this.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}}
-    @prompt={{@prompt}}
-    @promptIsSelectable={{@promptIsSelectable}}
-    @optionLabelPath={{@optionLabelPath}}
-    @optionValuePath={{@optionValuePath}}
-    @optionTargetPath={{@optionTargetPath}}
-    @multiple={{@multiple}}
-    @update={{this.update}}
-    @setDirty={{this.setDirty}}
-    @submitted={{@submitted}}
-    @labelComponent={{component
-      (ensure-safe-component this.labelComponent)
-      label=@label
-      required=@required
-      isValid=this.isValid
-      isInvalid=this.isInvalid
-      inputId=this.inputId
-    }}
-    @hintComponent={{if
-      @hint
-      (component
-        (ensure-safe-component this.hintComponent) hint=@hint id=this.hintId
+    {{yield
+      (hash
+        value=this._val
+        update=this.update
+        setDirty=this.setDirty
+        model=@model
+        name=@name
+        inputId=this.inputId
+        isValid=this.isValid
+        isInvalid=this.isInvalid
       )
     }}
-    @errorComponent={{if
-      (and this.showValidity this.errors)
+
+    {{#if @hint}}
+      <HintComponent />
+    {{/if}}
+
+    {{#if (and this.showValidity this.errors)}}
+      <ErrorComponent />
+    {{/if}}
+  {{else}}
+    {{#let
       (component
-        (ensure-safe-component this.errorComponent)
-        errors=this.errors
-        id=this.errorId
+        (ensure-safe-component
+          (or @renderComponent (component "validated-input/render"))
+        )
+        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
+        prompt=@prompt
+        promptIsSelectable=@promptIsSelectable
+        optionLabelPath=@optionLabelPath
+        optionValuePath=@optionValuePath
+        optionTargetPath=@optionTargetPath
+        multiple=@multiple
+        update=this.update
+        setDirty=this.setDirty
+        submitted=@submitted
+        labelComponent=LabelComponent
+        hintComponent=(if @hint HintComponent)
+        errorComponent=(if (and this.showValidity this.errors) ErrorComponent)
       )
+      as |RenderComponent|
     }}
-    aria-invalid={{if this.isInvalid "true"}}
-    aria-describedby={{if this.isInvalid this.errorId this.hintId}}
-    ...attributes
-  />
-{{/if}}
+      <RenderComponent
+        aria-invalid={{if this.isInvalid "true"}}
+        aria-describedby={{if this.isInvalid this.errorId this.hintId}}
+        ...attributes
+      />
+    {{/let}}
+  {{/if}}
+{{/let}}

package/addon/components/validated-input.js

@@ -4,8 +4,6 @@ import { isEmpty } from "@ember/utils";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
-import passedOrDefault from "ember-validated-form/passed-or-default";
-
 /**
  * This component wraps form inputs.
  *
@@ -35,11 +33,6 @@ export default class ValidatedInputComponent extends Component {
   @tracked type;
   @tracked validateBeforeSubmit;
 
-  @passedOrDefault("error") errorComponent;
-  @passedOrDefault("hint") hintComponent;
-  @passedOrDefault("label") labelComponent;
-  @passedOrDefault("render") renderComponent;
-
   constructor(...args) {
     super(...args);
 

package/addon/helpers/evf-theme.js

@@ -0,0 +1,14 @@
+import { getOwner } from "@ember/application";
+import Helper from "@ember/component/helper";
+
+export default class EVFThemeHelper extends Helper {
+  get currentTheme() {
+    return getOwner(this).resolveRegistration("config:environment")[
+      "ember-validated-form"
+    ].theme;
+  }
+
+  compute([expectedTheme]) {
+    return this.currentTheme === expectedTheme;
+  }
+}

package/app/components/validated-input/types/date.js

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

package/app/helpers/evf-class-list.js

@@ -0,0 +1 @@
+export { default } from "ember-validated-form/helpers/evf-class-list";

package/app/helpers/evf-theme.js

@@ -0,0 +1 @@
+export { default } from "ember-validated-form/helpers/evf-theme";

package/config/addon-docs.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+"use strict";
+
+const AddonDocsConfig = require("ember-cli-addon-docs/lib/config");
+
+module.exports = class extends AddonDocsConfig {
+  // See https://ember-learn.github.io/ember-cli-addon-docs/latest/docs/deploying
+  // for details on configuration you can override here.
+};

package/index.js

@@ -3,69 +3,17 @@
 module.exports = {
   name: require("./package").name,
 
-  included(...args) {
-    this._super.included.apply(this, ...args);
-
+  config() {
     const app = this._findHost(this);
 
-    const {
-      theme = null,
-      scrollErrorIntoView = false,
-      defaults = {},
-    } = app.options["ember-validated-form"] ?? {};
-
-    // Theming options
-    this.options["@embroider/macros"].setOwnConfig.isDefault = ![
-      "uikit",
-      "bootstrap",
-    ].includes(theme);
-    this.options["@embroider/macros"].setOwnConfig.isUikit = theme === "uikit";
-    this.options["@embroider/macros"].setOwnConfig.isBootstrap =
-      theme === "bootstrap";
-
-    // Features
-    this.options["@embroider/macros"].setOwnConfig.scrollErrorIntoView =
-      scrollErrorIntoView;
-
-    // Component defaults
-    this.options["@embroider/macros"].setOwnConfig.error =
-      defaults.error ?? "ember-validated-form/components/validated-input/error";
-    this.options["@embroider/macros"].setOwnConfig.hint =
-      defaults.hint ?? "ember-validated-form/components/validated-input/hint";
-    this.options["@embroider/macros"].setOwnConfig.label =
-      defaults.label ?? "ember-validated-form/components/validated-input/label";
-    this.options["@embroider/macros"].setOwnConfig.render =
-      defaults.render ??
-      "ember-validated-form/components/validated-input/render";
-    this.options["@embroider/macros"].setOwnConfig.button =
-      defaults.button ??
-      "ember-validated-form/components/validated-button/button";
-    this.options["@embroider/macros"].setOwnConfig["types/checkbox-group"] =
-      defaults["types/checkbox-group"] ??
-      "ember-validated-form/components/validated-input/types/checkbox-group";
-    this.options["@embroider/macros"].setOwnConfig["types/checkbox"] =
-      defaults["types/checkbox"] ??
-      "ember-validated-form/components/validated-input/types/checkbox";
-    this.options["@embroider/macros"].setOwnConfig["types/input"] =
-      defaults["types/input"] ??
-      "ember-validated-form/components/validated-input/types/input";
-    this.options["@embroider/macros"].setOwnConfig["types/radio-group"] =
-      defaults["types/radio-group"] ??
-      "ember-validated-form/components/validated-input/types/radio-group";
-    this.options["@embroider/macros"].setOwnConfig["types/select"] =
-      defaults["types/select"] ??
-      "ember-validated-form/components/validated-input/types/select";
-    this.options["@embroider/macros"].setOwnConfig["types/textarea"] =
-      defaults["types/textarea"] ??
-      "ember-validated-form/components/validated-input/types/textarea";
-    this.options["@embroider/macros"].setOwnConfig["types/date"] =
-      defaults["types/date"] ??
-      "ember-validated-form/components/validated-input/types/input";
-  },
+    const appConfig = app.options["ember-validated-form"] ?? {};
 
-  options: {
-    "@embroider/macros": {
-      setOwnConfig: {},
-    },
+    return {
+      "ember-validated-form": {
+        theme: "default",
+        scrollErrorIntoView: false,
+        ...appConfig,
+      },
+    };
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -14,103 +14,127 @@
   "directories": {
     "test": "tests"
   },
-  "homepage": "https://adfinis.github.io/ember-validated-form",
+  "homepage": "https://docs.adfinis.com/ember-validated-form",
   "bugs": {
     "url": "https://github.com/adfinis/ember-validated-form/issues"
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "concurrently \"npm:lint:*(!fix)\" --names \"lint:\"",
+    "format": "prettier . --cache --write",
+    "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\"",
-    "lint:css:fix": "concurrently \"npm:lint:css -- --fix\"",
-    "lint:fix": "concurrently \"npm:lint:*:fix\" --names \"fix:\"",
+    "lint:css:fix": "concurrently \"pnpm:lint:css -- --fix\"",
+    "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\" --prefixColors auto && pnpm format",
+    "lint:format": "prettier . --cache --check",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
+    "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\" --prefixColors auto",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
-    "@embroider/macros": "^1.10.0",
-    "@embroider/util": "^1.10.0",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "ember-changeset": "^4.1.2",
-    "ember-changeset-validations": "^4.1.1",
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.2.0",
-    "ember-truth-helpers": "^3.1.1"
+    "@babel/core": "^7.24.6",
+    "ember-auto-import": "^2.11.0",
+    "ember-cli-babel": "^8.2.0",
+    "ember-cli-htmlbars": "^6.3.0 || ^7.0.0",
+    "ember-template-imports": "^4.3.0"
   },
   "devDependencies": {
-    "@adfinis/eslint-config": "2.0.0",
-    "@adfinis/semantic-release-config": "4.0.0",
-    "@babel/eslint-parser": "7.21.3",
-    "@babel/plugin-proposal-decorators": "7.21.0",
-    "@ember/optional-features": "2.0.0",
-    "@ember/string": "3.0.1",
-    "@ember/test-helpers": "2.9.3",
-    "@embroider/test-setup": "2.1.1",
-    "@fortawesome/ember-fontawesome": "0.4.1",
-    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@adfinis/eslint-config": "3.0.2",
+    "@adfinis/semantic-release-config": "6.0.0",
+    "@babel/eslint-parser": "7.28.6",
+    "@babel/plugin-proposal-decorators": "7.28.6",
+    "@commitlint/cli": "20.3.1",
+    "@commitlint/config-conventional": "20.3.1",
+    "@ember/optional-features": "2.3.0",
+    "@ember/string": "4.0.1",
+    "@ember/test-helpers": "5.4.1",
+    "@embroider/macros": "1.19.6",
+    "@embroider/test-setup": "4.0.0",
+    "@eslint/js": "9.39.2",
+    "@fortawesome/ember-fontawesome": "3.1.0",
+    "@fortawesome/fontawesome-svg-core": "7.1.0",
+    "@fortawesome/free-solid-svg-icons": "7.1.0",
+    "@glimmer/component": "1.1.2",
+    "@glimmer/tracking": "1.1.2",
     "broccoli-asset-rev": "3.0.0",
-    "concurrently": "8.0.1",
-    "ember-auto-import": "2.6.3",
-    "ember-cli": "4.12.1",
-    "ember-cli-addon-docs": "5.2.0",
-    "ember-cli-dependency-checker": "3.3.1",
+    "concurrently": "9.2.1",
+    "ember-changeset": "5.0.0",
+    "ember-changeset-validations": "5.0.0",
+    "ember-cli": "6.10.0",
+    "ember-cli-addon-docs": "10.1.0",
+    "ember-cli-clean-css": "3.0.0",
+    "ember-cli-dependency-checker": "3.3.3",
     "ember-cli-deploy": "2.0.0",
-    "ember-cli-deploy-build": "2.0.0",
+    "ember-cli-deploy-build": "3.0.0",
     "ember-cli-deploy-git": "1.3.4",
     "ember-cli-deploy-git-ci": "1.0.1",
+    "ember-cli-deprecation-workflow": "4.0.0",
     "ember-cli-inject-live-reload": "2.1.0",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
-    "ember-cli-test-loader": "3.0.0",
-    "ember-concurrency": "3.0.0",
-    "ember-data": "4.12.0",
-    "ember-flatpickr": "4.0.0",
-    "ember-load-initializers": "2.1.2",
-    "ember-qunit": "6.2.0",
-    "ember-resolver": "10.0.0",
-    "ember-source": "4.12.0",
+    "ember-cli-test-loader": "3.1.0",
+    "ember-concurrency": "5.1.0",
+    "ember-data": "5.8.1",
+    "ember-flatpickr": "9.0.2",
+    "ember-load-initializers": "3.0.1",
+    "ember-qunit": "9.0.4",
+    "ember-resolver": "13.1.1",
+    "ember-source": "6.10.0",
     "ember-source-channel-url": "3.0.0",
-    "ember-template-lint": "5.7.2",
-    "ember-template-lint-plugin-prettier": "4.1.0",
-    "ember-try": "2.0.0",
-    "eslint": "8.39.0",
-    "eslint-config-prettier": "8.8.0",
-    "eslint-plugin-ember": "11.5.2",
-    "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-n": "15.7.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-qunit": "7.3.4",
-    "husky": "8.0.3",
-    "lint-staged": "13.2.1",
+    "ember-template-lint": "7.9.3",
+    "ember-truth-helpers": "5.0.0",
+    "ember-try": "4.0.0",
+    "eslint": "9.39.2",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-ember": "12.7.5",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-n": "17.23.2",
+    "eslint-plugin-prettier": "5.5.5",
+    "eslint-plugin-qunit": "8.2.5",
+    "flatpickr": "4.6.13",
+    "globals": "17.1.0",
+    "husky": "9.1.7",
+    "lint-staged": "16.2.7",
     "loader.js": "4.7.0",
-    "prettier": "2.8.8",
-    "qunit": "2.19.4",
-    "qunit-dom": "2.0.0",
-    "stylelint": "15.10.3",
-    "stylelint-config-standard": "33.0.0",
-    "stylelint-prettier": "3.0.0",
-    "webpack": "5.88.2"
+    "prettier": "3.8.1",
+    "prettier-plugin-ember-template-tag": "2.1.2",
+    "qunit": "2.25.0",
+    "qunit-dom": "3.5.0",
+    "semantic-release": "25.0.3",
+    "stylelint": "17.0.0",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-prettier": "5.0.3",
+    "webpack": "5.104.1"
   },
   "peerDependencies": {
-    "ember-source": "^4.0.0"
+    "@embroider/util": "^1.13.0",
+    "ember-changeset": "^4.1.2 || ^5.0.0",
+    "ember-changeset-validations": "^4.1.1 || ^5.0.0",
+    "ember-source": ">= 4.0.0",
+    "ember-truth-helpers": "^3.1.0 || ^4.0.0 || ^5.0.0"
+  },
+  "packageManager": "pnpm@10.28.1",
+  "pnpm": {
+    "peerDependencyRules": {
+      "allowedVersions": {
+        "ember-source": "^5.0.0"
+      }
+    }
   },
   "engines": {
-    "node": "14.* || 16.* || >= 18"
+    "node": ">= 20.19"
   },
   "ember": {
     "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
-    "demoURL": "https://adfinis.github.io/ember-validated-form"
+    "demoURL": "https://docs.adfinis.com/ember-validated-form"
   },
   "release": {
     "extends": "@adfinis/semantic-release-config"

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

@@ -1,13 +0,0 @@
-import Component from "@glimmer/component";
-
-import passedOrDefault from "ember-validated-form/passed-or-default";
-
-export default class RenderComponent extends Component {
-  @passedOrDefault("types/checkbox-group") checkboxGroupComponent;
-  @passedOrDefault("types/checkbox") checkboxComponent;
-  @passedOrDefault("types/input") inputComponent;
-  @passedOrDefault("types/radio-group") radioGroupComponent;
-  @passedOrDefault("types/select") selectComponent;
-  @passedOrDefault("types/textarea") textareaComponent;
-  @passedOrDefault("types/date") dateComponent;
-}

package/addon/passed-or-default.js

@@ -1,16 +0,0 @@
-import { importSync, getOwnConfig } from "@embroider/macros";
-import { ensureSafeComponent } from "@embroider/util";
-
-export default function passedOrDefault(componentName) {
-  return function (target, property) {
-    return {
-      get() {
-        return ensureSafeComponent(
-          this.args[property] ??
-            importSync(getOwnConfig()[componentName]).default,
-          this
-        );
-      },
-    };
-  };
-}

package/app/helpers/class-list.js

@@ -1 +0,0 @@
-export { default } from "ember-validated-form/helpers/class-list";