ember-validated-form 7.0.1 → 8.0.1

package/.husky/commit-msg

@@ -1,7 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# skip in CI
-[ -n "$CI" ] && exit 0
-
-pnpm 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
 pnpm lint-staged

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [8.0.1](https://github.com/adfinis/ember-validated-form/compare/v8.0.0...v8.0.1) (2026-05-20)
+
+
+### Bug Fixes
+
+* yield submit action to allow custom handling of things ([#1280](https://github.com/adfinis/ember-validated-form/issues/1280)) ([651f64a](https://github.com/adfinis/ember-validated-form/commit/651f64a9d9686e81735d6bb10dd4675889a79fdc))
+
+# [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)
 
 

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.hbs

@@ -7,6 +7,7 @@
     (hash
       model=@model
       loading=this.loading
+      submitAction=this.submit
       input=(component
         "validated-input"
         model=@model

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"