ember-validated-form 4.1.0 → 5.0.0

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

@@ -0,0 +1,108 @@
+<div class={{this.class}}>
+  {{#if (not-eq @type "checkbox")}}
+    <@labelComponent />
+  {{/if}}
+
+  {{#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}}
+
+  <@hintComponent />
+  <@errorComponent />
+</div>

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

@@ -1,16 +1,13 @@
-import Component from "@ember/component";
+import Component from "@glimmer/component";
 
 import themedComponent from "../../-private/themed-component";
-import layout from "../../templates/components/validated-input/render";
 
-export default Component.extend({
-  layout,
-  selectComponent: themedComponent("validated-input/types/select"),
-  radioGroupComponent: themedComponent("validated-input/types/radio-group"),
-  checkboxGroupComponent: themedComponent(
-    "validated-input/types/checkbox-group"
-  ),
-  checkboxComponent: themedComponent("validated-input/types/checkbox"),
-  textareaComponent: themedComponent("validated-input/types/textarea"),
-  inputComponent: themedComponent("validated-input/types/input"),
-});
+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;
+}

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

@@ -0,0 +1,19 @@
+{{#each @options as |option i|}}
+  <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>
+{{/each}}

package/addon/components/validated-input/types/-themes/bootstrap/checkbox-group.js

@@ -1,6 +1,3 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/bootstrap/checkbox-group";
 import Component from "../../checkbox-group";
 
-export default Component.extend({
-  layout,
-});
+export default class BootstrapCheckboxGroupComponent extends Component {}

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

@@ -0,0 +1,14 @@
+<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>

package/addon/components/validated-input/types/-themes/bootstrap/checkbox.js

@@ -1,8 +1,3 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/bootstrap/checkbox";
 import Component from "../../checkbox";
 
-export default Component.extend({
-  layout,
-  tagName: "div",
-  classNames: ["custom-control", "custom-checkbox"],
-});
+export default class BootstrapCheckboxComponent extends Component {}

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

@@ -1,6 +1,13 @@
 import Component from "../../input";
 
-export default Component.extend({
-  classNameBindings: ["isValid:is-valid", "isInvalid:is-invalid"],
-  classNames: ["form-control"],
-});
+export default class BootstrapInputComponent extends Component {
+  get class() {
+    const style = this.args.isValid
+      ? "is-valid"
+      : this.args.isInvalid
+      ? "is-invalid"
+      : "";
+
+    return `form-control ${style}`;
+  }
+}

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

@@ -0,0 +1,20 @@
+{{#each @options as |option i|}}
+  <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>
+{{/each}}

package/addon/components/validated-input/types/-themes/bootstrap/radio-group.js

@@ -1,6 +1,3 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/bootstrap/radio-group";
 import Component from "../../radio-group";
 
-export default Component.extend({
-  layout,
-});
+export default class BootstrapRadioGroupComponent extends Component {}

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

@@ -1,6 +1,13 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/bootstrap/select";
 import Component from "../../select";
 
-export default Component.extend({
-  layout,
-});
+export default class BootstrapSelectComponent extends Component {
+  get class() {
+    const style = this.args.isValid
+      ? "is-valid"
+      : this.args.isInvalid
+      ? "is-invalid"
+      : "";
+
+    return `form-control ${style}`;
+  }
+}

package/addon/components/validated-input/types/-themes/bootstrap/textarea.js

@@ -1,6 +1,13 @@
 import Component from "../../textarea";
 
-export default Component.extend({
-  classNameBindings: ["isValid:is-valid", "isInvalid:is-invalid"],
-  classNames: ["form-control"],
-});
+export default class BootstrapTextareaComponent extends Component {
+  get class() {
+    const style = this.args.isValid
+      ? "is-valid"
+      : this.args.isInvalid
+      ? "is-invalid"
+      : "";
+
+    return `form-control ${style}`;
+  }
+}

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

@@ -0,0 +1,19 @@
+{{#each @options as |option i|}}
+  {{#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>
+{{/each}}

package/addon/components/validated-input/types/-themes/uikit/checkbox-group.js

@@ -1,6 +1,3 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/uikit/checkbox-group";
 import Component from "../../checkbox-group";
 
-export default Component.extend({
-  layout,
-});
+export default class UikitCheckboxGroupComponent extends Component {}

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

@@ -0,0 +1,15 @@
+{{#let (component @labelComponent) as |Label|}}
+  <Label
+    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}}
+    />
+  </Label>
+{{/let}}

package/addon/components/validated-input/types/-themes/uikit/checkbox.js

@@ -1,6 +1,3 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/uikit/checkbox";
 import Component from "../../checkbox";
 
-export default Component.extend({
-  layout,
-});
+export default class UikitCheckboxComponent extends Component {}

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

@@ -1,6 +1,13 @@
 import Component from "../../input";
 
-export default Component.extend({
-  classNames: ["uk-input"],
-  classNameBindings: ["isValid:uk-form-success", "isInvalid:uk-form-danger"],
-});
+export default class UikitInputComponent extends Component {
+  get class() {
+    const style = this.args.isValid
+      ? "uk-form-success"
+      : this.args.isInvalid
+      ? "uk-form-danger"
+      : "";
+
+    return `uk-input ${style}`;
+  }
+}

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

@@ -0,0 +1,20 @@
+{{#each @options as |option i|}}
+  {{#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>
+{{/each}}

package/addon/components/validated-input/types/-themes/uikit/radio-group.js

@@ -1,6 +1,3 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/uikit/radio-group";
 import Component from "../../radio-group";
 
-export default Component.extend({
-  layout,
-});
+export default class UikitRadioGroupComponent extends Component {}

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

@@ -1,6 +1,13 @@
-import layout from "../../../../../templates/components/validated-input/types/-themes/uikit/select";
 import Component from "../../select";
 
-export default Component.extend({
-  layout,
-});
+export default class UikitSelectComponent extends Component {
+  get class() {
+    const style = this.args.isValid
+      ? "uk-form-success"
+      : this.args.isInvalid
+      ? "uk-form-danger"
+      : "";
+
+    return `uk-select ${style}`;
+  }
+}

package/addon/components/validated-input/types/-themes/uikit/textarea.js

@@ -1,6 +1,13 @@
 import Component from "../../textarea";
 
-export default Component.extend({
-  classNames: ["uk-textarea"],
-  classNameBindings: ["isValid:uk-form-success", "isInvalid:uk-form-danger"],
-});
+export default class UikitTextareaComponent extends Component {
+  get class() {
+    const style = this.args.isValid
+      ? "uk-form-success"
+      : this.args.isInvalid
+      ? "uk-form-danger"
+      : "";
+
+    return `uk-textarea ${style}`;
+  }
+}

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

@@ -0,0 +1,14 @@
+{{#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>
+{{/each}}

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

@@ -1,13 +1,11 @@
-import Component from "@ember/component";
 import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-import layout from "../../../templates/components/validated-input/types/checkbox-group";
-
-export default Component.extend({
-  layout,
-
+export default class CheckboxGroupComponent extends Component {
   @action
-  onUpdate(key) {
+  onUpdate(event, key) {
+    event.preventDefault();
+
     const value = this.value || [];
     const index = value.indexOf(key);
 
@@ -17,7 +15,7 @@ export default Component.extend({
       value.push(key);
     }
 
-    this.update(value);
-    this.setDirty();
-  },
-});
+    this.args.update(value);
+    this.args.setDirty();
+  }
+}

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

@@ -0,0 +1,9 @@
+<input
+  type="checkbox"
+  name={{@name}}
+  id={{@inputId}}
+  disabled={{@disabled}}
+  checked={{@value}}
+  {{on "input" this.onUpdate}}
+/>
+<@labelComponent />

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

@@ -1,8 +1,12 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-import layout from "../../../templates/components/validated-input/types/checkbox";
+export default class CheckboxComponent extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
 
-export default Component.extend({
-  layout,
-  tagName: "",
-});
+    this.args.update(event.target.checked);
+    this.args.setDirty();
+  }
+}

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

@@ -0,0 +1,6 @@
+<input
+  class={{this.class}}
+  ...attributes
+  {{on "input" this.onUpdate}}
+  {{on "blur" @setDirty}}
+/>

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

@@ -1,19 +1,11 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-export default Component.extend({
-  tagName: "input",
-  type: "text",
-  attributeBindings: [
-    "value",
-    "placeholder",
-    "type",
-    "inputId:id",
-    "name",
-    "autofocus",
-    "autocomplete",
-    "disabled",
+export default class InputComponent extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
 
-    "update:oninput",
-    "setDirty:onblur",
-  ],
-});
+    this.args.update(event.target.value);
+  }
+}

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

@@ -0,0 +1,14 @@
+{{#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>
+{{/each}}

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

@@ -1,8 +1,12 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-import layout from "../../../templates/components/validated-input/types/radio-group";
+export default class RadioGroupComponent extends Component {
+  @action
+  onUpdate(value, event) {
+    event.preventDefault();
 
-export default Component.extend({
-  layout,
-  tagName: "",
-});
+    this.args.update(value);
+    this.args.setDirty();
+  }
+}

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

@@ -0,0 +1,17 @@
+{{! template-lint-disable no-passed-in-event-handlers }}
+<OneWaySelect
+  @value={{@value}}
+  @options={{@options}}
+  @optionLabelPath={{@optionLabelPath}}
+  @optionValuePath={{@optionValuePath}}
+  @optionTargetPath={{@optionTargetPath}}
+  @name={{@name}}
+  @id={{@inputId}}
+  @class={{this.class}}
+  @update={{@update}}
+  @focusOut={{@setDirty}}
+  @includeBlank={{@includeBlank}}
+  @disabled={{@disabled}}
+  @multiple={{@multiple}}
+  @promptIsSelectable={{or @promptIsSelectable false}}
+/>

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

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

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

@@ -0,0 +1,7 @@
+<textarea
+  class={{this.class}}
+  ...attributes
+  {{on "input" this.onUpdate}}
+  {{on "blur" @setDirty}}
+>
+</textarea>

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

@@ -1,19 +1,11 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-export default Component.extend({
-  tagName: "textarea",
-  attributeBindings: [
-    "value",
-    "placeholder",
-    "name",
-    "inputId:id",
-    "disabled",
-    "autofocus",
-    "rows",
-    "cols",
-    "autocomplete",
+export default class TextareaComponent extends Component {
+  @action
+  onUpdate(event) {
+    event.preventDefault();
 
-    "update:oninput",
-    "setDirty:onblur",
-  ],
-});
+    this.args.update(event.target.value);
+  }
+}