ember-validated-form 3.0.3 → 5.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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,13 +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"),
-  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

@@ -0,0 +1,3 @@
+import Component from "../../checkbox-group";
+
+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

@@ -0,0 +1,3 @@
+import Component from "../../checkbox-group";
+
+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

@@ -0,0 +1,21 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+
+export default class CheckboxGroupComponent extends Component {
+  @action
+  onUpdate(event, key) {
+    event.preventDefault();
+
+    const value = this.value || [];
+    const index = value.indexOf(key);
+
+    if (index > -1) {
+      value.splice(index, 1);
+    } else {
+      value.push(key);
+    }
+
+    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();
+  }
+}