ember-validated-form 5.2.2 → 6.0.0

package/addon/components/validated-button.js

@@ -1,25 +1,17 @@
-import { getOwner } from "@ember/application";
 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 themedComponent from "../-private/themed-component";
+import passedOrDefault from "ember-validated-form/passed-or-default";
 
 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;
 
-  constructor(...args) {
-    super(...args);
-    this.config =
-      getOwner(this).resolveRegistration("config:environment")[
-        "ember-validated-form"
-      ];
-  }
+  @passedOrDefault("button") buttonComponent;
 
   get loading() {
     return this.args.loading || this._loading;
@@ -48,10 +40,12 @@ export default class ValidatedButtonComponent extends Component {
 
     await model.validate();
 
-    if (this.config?.features?.scrollErrorIntoView && model.errors[0]?.key) {
-      document
-        .querySelector(`[name=${model.errors[0].key}]`)
-        ?.scrollIntoView({ behavior: "smooth" });
+    if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
+      if (model.errors[0]?.key) {
+        document
+          .querySelector(`[name=${model.errors[0].key}]`)
+          ?.scrollIntoView({ behavior: "smooth" });
+      }
     }
 
     if (model.get("isInvalid")) {

package/addon/components/validated-form.js

@@ -1,6 +1,6 @@
-import { getOwner } from "@ember/application";
 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";
@@ -15,10 +15,6 @@ export default class ValidatedFormComponent extends Component {
 
   constructor(...args) {
     super(...args);
-    this.config =
-      getOwner(this).resolveRegistration("config:environment")[
-        "ember-validated-form"
-      ];
 
     if (this.args.model && this.args.model.validate) {
       scheduleOnce("actions", this, "validateModel", this.args.model);
@@ -49,10 +45,12 @@ export default class ValidatedFormComponent extends Component {
     await model.validate();
 
     if (model.get("isInvalid")) {
-      if (this.config?.features?.scrollErrorIntoView && model.errors[0]?.key) {
-        document
-          .querySelector(`[name=${model.errors[0].key}]`)
-          ?.scrollIntoView({ behavior: "smooth" });
+      if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
+        if (model.errors[0]?.key) {
+          document
+            .querySelector(`[name=${model.errors[0].key}]`)
+            ?.scrollIntoView({ behavior: "smooth" });
+        }
       }
       this.runCallback(PROP_ON_INVALID_SUBMIT);
     } else {

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

@@ -1 +1,15 @@
-<span class={{this.class}} ...attributes>{{yield}}{{this.errorString}}</span>
+{{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+  <small class="uk-text-danger" ...attributes>
+    {{yield}}{{this.errorString}}
+  </small>
+{{else}}
+  <span
+    class={{if
+      (macroCondition (macroGetOwnConfig "isBootstrap"))
+      "invalid-feedback"
+    }}
+    ...attributes
+  >
+    {{yield}}{{this.errorString}}
+  </span>
+{{/if}}

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

@@ -1 +1,9 @@
-<small class={{this.class}} ...attributes>{{yield}}{{@hint}}</small>
+<small
+  class={{class-list
+    (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-text-muted")
+    (if
+      (macroCondition (macroGetOwnConfig "isBootstrap")) "form-text text-muted"
+    )
+  }}
+  ...attributes
+>{{yield}}{{@hint}}</small>

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

@@ -1,3 +1,7 @@
-<label class={{this.class}} for={{@inputId}} ...attributes>
+<label
+  class={{if (macroCondition (macroGetOwnConfig "isUikit")) "uk-form-label"}}
+  for={{@inputId}}
+  ...attributes
+>
   {{yield}}{{@label}}{{if @required " *"}}
 </label>

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

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

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

@@ -1,13 +1,18 @@
-<div class={{this.class}}>
+{{! 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}}
 
-  {{#if (eq @type "select")}}
-    {{#let (component this.selectComponent) as |Select|}}
-      <Select
+  <ValidatedInput::Render::Wrapper>
+    {{#if (eq @type "select")}}
+      <this.selectComponent
         @disabled={{@disabled}}
-        @includeBlank={{@includeBlank}}
         @inputId={{@inputId}}
         @isInvalid={{@isInvalid}}
         @isValid={{@isValid}}
@@ -17,15 +22,15 @@
         @options={{@options}}
         @optionTargetPath={{@optionTargetPath}}
         @optionValuePath={{@optionValuePath}}
+        @prompt={{@prompt}}
         @promptIsSelectable={{@promptIsSelectable}}
         @setDirty={{@setDirty}}
         @update={{@update}}
         @value={{@value}}
+        ...attributes
       />
-    {{/let}}
-  {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
-    {{#let (component this.radioGroupComponent) as |RadioGroup|}}
-      <RadioGroup
+    {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
+      <this.radioGroupComponent
         @disabled={{@disabled}}
         @inputId={{@inputId}}
         @isInvalid={{@isInvalid}}
@@ -35,11 +40,10 @@
         @setDirty={{@setDirty}}
         @update={{@update}}
         @value={{@value}}
+        ...attributes
       />
-    {{/let}}
-  {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
-    {{#let (component this.checkboxGroupComponent) as |CheckboxGroup|}}
-      <CheckboxGroup
+    {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
+      <this.checkboxGroupComponent
         @disabled={{@disabled}}
         @inputId={{@inputId}}
         @isInvalid={{@isInvalid}}
@@ -49,11 +53,10 @@
         @setDirty={{@setDirty}}
         @update={{@update}}
         @value={{@value}}
+        ...attributes
       />
-    {{/let}}
-  {{else if (eq @type "checkbox")}}
-    {{#let (component this.checkboxComponent) as |Checkbox|}}
-      <Checkbox
+    {{else if (eq @type "checkbox")}}
+      <this.checkboxComponent
         @disabled={{@disabled}}
         @inputId={{@inputId}}
         @isInvalid={{@isInvalid}}
@@ -64,11 +67,10 @@
         @setDirty={{@setDirty}}
         @update={{@update}}
         @value={{@value}}
+        ...attributes
       />
-    {{/let}}
-  {{else if (eq @type "textarea")}}
-    {{#let (component this.textareaComponent) as |DynamicTextarea|}}
-      <DynamicTextarea
+    {{else if (eq @type "textarea")}}
+      <this.textareaComponent
         autocomplete={{@autocomplete}}
         autofocus={{@autofocus}}
         cols={{@cols}}
@@ -82,11 +84,10 @@
         @isValid={{@isValid}}
         @setDirty={{@setDirty}}
         @update={{@update}}
+        ...attributes
       />
-    {{/let}}
-  {{else}}
-    {{#let (component this.inputComponent) as |DynamicInput|}}
-      <DynamicInput
+    {{else}}
+      <this.inputComponent
         autocomplete={{@autocomplete}}
         autofocus={{@autofocus}}
         disabled={{@disabled}}
@@ -99,9 +100,10 @@
         @isValid={{@isValid}}
         @setDirty={{@setDirty}}
         @update={{@update}}
+        ...attributes
       />
-    {{/let}}
-  {{/if}}
+    {{/if}}
+  </ValidatedInput::Render::Wrapper>
 
   <@hintComponent />
   <@errorComponent />

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

@@ -1,13 +1,12 @@
 import Component from "@glimmer/component";
 
-import themedComponent from "../../-private/themed-component";
+import passedOrDefault from "ember-validated-form/passed-or-default";
 
 export default class RenderComponent extends Component {
-  @themedComponent("validated-input/types/input") inputComponent;
-  @themedComponent("validated-input/types/textarea") textareaComponent;
-  @themedComponent("validated-input/types/checkbox") checkboxComponent;
-  @themedComponent("validated-input/types/radio-group") radioGroupComponent;
-  @themedComponent("validated-input/types/checkbox-group")
-  checkboxGroupComponent;
-  @themedComponent("validated-input/types/select") selectComponent;
+  @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;
 }

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

@@ -1,14 +1,53 @@
 {{#each @options as |option i|}}
-  <label>
-    <input
-      type="checkbox"
-      checked={{eq @value option.key}}
-      value={{option.key}}
-      name={{@name}}
-      id="{{@inputId}}-{{i}}"
-      disabled={{@disabled}}
-      {{on "input" (fn this.onUpdate option.key)}}
-    />
-    {{option.label}}
-  </label>
+  {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+    {{#if (not-eq i 0)}}<br />{{/if}}
+    <label
+      class="uk-form-label
+        {{if @isValid 'uk-text-success'}}
+        {{if @isInvalid 'uk-text-danger'}}"
+    >
+      <input
+        type="checkbox"
+        class="uk-checkbox uk-margin-small-right"
+        checked={{includes option.key @value}}
+        name={{@name}}
+        id="{{@inputId}}-{{i}}"
+        disabled={{@disabled}}
+        {{on "input" (fn this.onUpdate option.key)}}
+      />
+      {{option.label}}
+    </label>
+  {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
+    <div class="custom-control custom-checkbox">
+      <input
+        type="checkbox"
+        class="custom-control-input
+          {{if @isValid 'is-valid'}}
+          {{if @isInvalid 'is-invalid'}}"
+        checked={{includes option.key @value}}
+        name={{@name}}
+        id="{{@inputId}}-{{i}}"
+        disabled={{@disabled}}
+        {{on "input" (fn this.onUpdate option.key)}}
+      />
+      <label
+        class="custom-control-label"
+        for="{{@inputId}}-{{i}}"
+      >{{option.label}}</label>
+    </div>
+  {{else}}
+    <label>
+      <input
+        type="checkbox"
+        checked={{eq @value option.key}}
+        value={{option.key}}
+        name={{@name}}
+        id="{{@inputId}}-{{i}}"
+        disabled={{@disabled}}
+        {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
+      />
+      {{option.label}}
+    </label>
+  {{/if}}
 {{/each}}

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

@@ -1,9 +1,41 @@
-<input
-  type="checkbox"
-  name={{@name}}
-  id={{@inputId}}
-  disabled={{@disabled}}
-  checked={{@value}}
-  {{on "input" this.onUpdate}}
-/>
-<@labelComponent />
+{{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+  <@labelComponent
+    class="{{if @isValid 'uk-text-success'}} {{if @isInvalid 'uk-text-danger'}}"
+  >
+    <input
+      class="uk-checkbox uk-margin-small-right"
+      type="checkbox"
+      name={{@name}}
+      id={{@inputId}}
+      disabled={{@disabled}}
+      checked={{@value}}
+      {{on "input" this.onUpdate}}
+    />
+  </@labelComponent>
+{{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
+  <div class="custom-control custom-checkbox">
+    <input
+      class="custom-control-input
+        {{if @isValid 'is-valid'}}
+        {{if @isInvalid 'is-invalid'}}"
+      type="checkbox"
+      name={{@name}}
+      id={{@inputId}}
+      disabled={{@disabled}}
+      checked={{@value}}
+      {{on "input" this.onUpdate}}
+    />
+    <@labelComponent class="custom-control-label" />
+  </div>
+{{else}}
+  <input
+    type="checkbox"
+    name={{@name}}
+    id={{@inputId}}
+    disabled={{@disabled}}
+    checked={{@value}}
+    {{on "input" this.onUpdate}}
+    ...attributes
+  />
+  <@labelComponent />
+{{/if}}

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

@@ -1,6 +1,21 @@
 <input
-  class={{this.class}}
-  ...attributes
+  class={{class-list
+    (if
+      (macroCondition (macroGetOwnConfig "isUikit"))
+      (class-list
+        "uk-input"
+        (if @isValid "uk-form-success")
+        (if @isInvalid "uk-form-danger")
+      )
+    )
+    (if
+      (macroCondition (macroGetOwnConfig "isBootstrap"))
+      (class-list
+        "form-control" (if @isValid "is-valid") (if @isInvalid "is-invalid")
+      )
+    )
+  }}
   {{on "input" this.onUpdate}}
   {{on "blur" @setDirty}}
+  ...attributes
 />

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

@@ -1,6 +1,5 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
-
 export default class InputComponent extends Component {
   @action
   onUpdate(event) {

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

@@ -1,14 +1,55 @@
 {{#each @options as |option i|}}
-  <label>
-    <input
-      type="radio"
-      checked={{eq @value option.key}}
-      value={{option.key}}
-      name={{@name}}
-      id="{{@inputId}}-{{i}}"
-      disabled={{@disabled}}
-      {{on "input" (fn this.onUpdate option.key)}}
-    />
-    {{option.label}}
-  </label>
+  {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
+    {{#if (not-eq i 0)}}<br />{{/if}}
+    <label
+      class="uk-form-label
+        {{if @isValid 'uk-text-success'}}
+        {{if @isInvalid 'uk-text-danger'}}"
+    >
+      <input
+        type="radio"
+        class="uk-radio uk-margin-small-right"
+        checked={{eq @value option.key}}
+        value={{option.key}}
+        name={{@name}}
+        id="{{@inputId}}-{{i}}"
+        disabled={{@disabled}}
+        {{on "input" (fn this.onUpdate option.key)}}
+      />
+      {{option.label}}
+    </label>
+  {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
+    <div class="custom-control custom-radio">
+      <input
+        type="radio"
+        class="custom-control-input
+          {{if @isValid 'is-valid'}}
+          {{if @isInvalid 'is-invalid'}}"
+        checked={{eq @value option.key}}
+        value={{option.key}}
+        name={{@name}}
+        id="{{@inputId}}-{{i}}"
+        disabled={{@disabled}}
+        {{on "input" (fn this.onUpdate option.key)}}
+      />
+      <label
+        class="custom-control-label"
+        for="{{@inputId}}-{{i}}"
+      >{{option.label}}</label>
+    </div>
+  {{else}}
+    <label>
+      <input
+        type="radio"
+        checked={{eq @value option.key}}
+        value={{option.key}}
+        name={{@name}}
+        id="{{@inputId}}-{{i}}"
+        disabled={{@disabled}}
+        {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
+      />
+      {{option.label}}
+    </label>
+  {{/if}}
 {{/each}}

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

@@ -1,19 +1,34 @@
 <select
-  class={{this.class}}
-  ...attributes
+  class={{class-list
+    (if
+      (macroCondition (macroGetOwnConfig "isUikit"))
+      (class-list
+        "uk-select"
+        (if @isValid "uk-form-success")
+        (if @isInvalid "uk-form-danger")
+      )
+    )
+    (if
+      (macroCondition (macroGetOwnConfig "isBootstrap"))
+      (class-list
+        "form-control" (if @isValid "is-valid") (if @isInvalid "is-invalid")
+      )
+    )
+  }}
   name={{@name}}
   id={{@inpudId}}
   disabled={{@disabled}}
   multiple={{@multiple}}
   {{on "change" this.onUpdate}}
   {{on "blur" this.onBlur}}
+  ...attributes
 >
-  {{#if (or @prompt @includeBlank)}}
+  {{#if @prompt}}
     <option
       value=""
       disabled={{not @promptIsSelectable}}
       selected={{not @value}}
-    >{{or @prompt @includeBlank}}</option>
+    >{{@prompt}}</option>
   {{/if}}
 
   {{#if this.hasGrouping}}

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

@@ -1,5 +1,3 @@
-import { A as emberArray, isArray } from "@ember/array";
-import { deprecate } from "@ember/debug";
 import EmberObject, { action, get } from "@ember/object";
 import Component from "@glimmer/component";
 
@@ -9,28 +7,11 @@ import Component from "@glimmer/component";
  * Our implementation is slightly simpler, since it does not support
  * the block syntax for options.
  */
-
 export default class SelectComponent extends Component {
-  constructor(...args) {
-    super(...args);
-
-    if (this.args.includeBlank) {
-      deprecate(
-        "The `includeBlank` property is deprecated. Please use `prompt` instead.",
-        false,
-        {
-          id: "ember-validated-form:NoMoreincludeBlank",
-          until: "6.0.0",
-          since: "5.1.0",
-          url: "https://github.com/adfinis-sygroup/ember-validated-form/releases/tag/v5.1.0",
-        }
-      );
-    }
-  }
-
   get hasPreGroupedOptions() {
     return (
-      this.args.options[0]?.groupName && isArray(this.args.options[0]?.options)
+      this.args.options[0]?.groupName &&
+      Array.isArray(this.args.options[0]?.options)
     );
   }
 
@@ -60,26 +41,26 @@ export default class SelectComponent extends Component {
     if (!groupLabelPath) {
       return this.args.options;
     }
-    const groups = emberArray();
+    const groups = [];
 
     this.args.options.forEach((item) => {
       const label = get(item, groupLabelPath);
 
       if (label) {
-        let group = groups.findBy("groupName", label);
+        let group = groups.find((group) => group.groupName === label);
 
         if (!group) {
           group = EmberObject.create({
             groupName: label,
-            options: emberArray(),
+            options: [],
           });
 
-          groups.pushObject(group);
+          groups.push(group);
         }
 
-        group.options.pushObject(this.normalize(item));
+        group.options.push(this.normalize(item));
       } else {
-        groups.pushObject(item);
+        groups.push(item);
       }
     });
 
@@ -124,7 +105,9 @@ export default class SelectComponent extends Component {
 
     //single select
     const foundOption = options.find((item) => getValue(item) === target.value);
-    if (targetPath) {
+
+    // If @promptIsSelectable is set to true, foundOption in this case will be undefined.
+    if (targetPath && foundOption) {
       return foundOption[targetPath];
     }
     return foundOption;

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

@@ -1,7 +1,22 @@
 <textarea
-  class={{this.class}}
-  ...attributes
+  class={{class-list
+    (if
+      (macroCondition (macroGetOwnConfig "isUikit"))
+      (class-list
+        "uk-textarea"
+        (if @isValid "uk-form-success")
+        (if @isInvalid "uk-form-danger")
+      )
+    )
+    (if
+      (macroCondition (macroGetOwnConfig "isBootstrap"))
+      (class-list
+        "form-control" (if @isValid "is-valid") (if @isInvalid "is-invalid")
+      )
+    )
+  }}
   {{on "input" this.onUpdate}}
   {{on "blur" @setDirty}}
+  ...attributes
 >
 </textarea>