feat: checkbox groups

addon/components/validated-input.js

@@ -88,8 +88,8 @@ export class ValidatedInput extends Component {
 
   @action
   update(value) {
-    if (this["on-update"]) {
-      this["on-update"](value, this.args.model);
+    if (this.args["on-update"]) {
+      this.args["on-update"](value, this.args.model);
     } else {
       this.args.model.set
         ? this.args.model.set(this.args.name, value)

addon/components/validated-input/render.js

@@ -7,6 +7,9 @@ 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"),

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

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

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

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

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

@@ -0,0 +1,23 @@
+import Component from "@ember/component";
+import { action } from "@ember/object";
+
+import layout from "../../../templates/components/validated-input/types/checkbox-group";
+
+export default Component.extend({
+  layout,
+
+  @action
+  onUpdate(key) {
+    const value = this.value || [];
+    const index = value.indexOf(key);
+
+    if (index > -1) {
+      value.splice(index, 1);
+    } else {
+      value.push(key);
+    }
+
+    this.update(value);
+    this.setDirty();
+  },
+});

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

@@ -33,6 +33,20 @@
       isValid=isValid
       isInvalid=isInvalid
 
+      update=update
+      setDirty=setDirty
+    }}
+  {{else if (or (eq type "checkboxGroup") (eq type "checkbox-group"))}}
+    {{component checkboxGroupComponent
+      value=value
+      options=options
+      inputId=inputId
+      name=(or inputName name)
+      disabled=disabled
+
+      isValid=isValid
+      isInvalid=isInvalid
+
       update=update
       setDirty=setDirty
     }}

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

@@ -33,6 +33,20 @@
     isValid=isValid
     isInvalid=isInvalid
 
+    update=update
+    setDirty=setDirty
+  }}
+{{else if (or (eq type "checkboxGroup") (eq type "checkbox-group"))}}
+  {{component checkboxGroupComponent
+    value=value
+    options=options
+    inputId=inputId
+    name=(or inputName name)
+    disabled=disabled
+
+    isValid=isValid
+    isInvalid=isInvalid
+
     update=update
     setDirty=setDirty
   }}

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

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

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

@@ -0,0 +1,15 @@
+{{#each options as |option i|}}
+  {{#unless (eq i 0)}}<br>{{/unless}}
+  <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}}

addon/templates/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}}

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

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

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

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

app/components/validated-input/types/checkbox-group.js

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

testem.js

@@ -4,7 +4,7 @@ module.exports = {
   test_page: "tests/index.html?hidepassed",
   disable_watching: true,
   launch_in_ci: ["Chrome"],
-  launch_in_dev: ["Chrome"],
+  launch_in_dev: [],
   browser_start_timeout: 120,
   browser_args: {
     Chrome: {

tests/dummy/app/templates/docs/components/validated-input.md

@@ -42,7 +42,7 @@ two arguments: `update(value, changeset)`.
 **autocomplete `<String>`**  
 Binding to the [`<input>` `autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete).
 
-The supported field types are `checkbox`, `radioGroup`, `select`, `textarea`
+The supported field types are `checkbox`, `checkboxGroup`, `radioGroup`, `select`, `textarea`
 and any type that can be specified on an `<input>` element. This addon does
 not much more than translating `{{f.input type='select'}}` to
 `{{one-way-select}}` or `{{f.input type='text'}}` to `<input type="text">`
@@ -189,3 +189,24 @@ localize your labels using an internationalization addon like
   {{demo.snippet 'translations.js' label='locales/fr/translations.js'}}
 {{/docs-demo}}
 -->
+
+### Checkbox group
+
+This component renders a list of `<input type="checkbox">` elements.
+
+<!-- prettier-ignore-start -->
+{{#docs-demo as |demo|}}
+  {{#demo.example name='checkbox-group-template.hbs'}}
+    {{#validated-form model=(changeset (hash shape=null)) as |f|}}
+      {{f.input
+        type    = 'checkboxGroup'
+        label   = 'Shapes'
+        name    = 'shape'
+        options = (array (hash key='t' label='Triangle') (hash key='s' label='Square') (hash key='c' label='Circle'))
+      }}
+    {{/validated-form}}
+  {{/demo.example}}
+
+  {{demo.snippet 'checkbox-group-template.hbs'}}
+{{/docs-demo}}
+<!-- prettier-ignore-end -->

tests/integration/components/validated-input-test.js

@@ -1,4 +1,4 @@
-import { render, click, settled } from "@ember/test-helpers";
+import { render, click, fillIn, settled } from "@ember/test-helpers";
 import Changeset from "ember-changeset";
 import { hbs } from "ember-cli-htmlbars";
 import { setupRenderingTest } from "ember-qunit";
@@ -52,6 +52,20 @@ module("Integration | Component | validated input", function (hooks) {
     assert.dom("input").hasValue("Max");
   });
 
+  test("it calls on-update if given", async function (assert) {
+    this.set("model", new Changeset({ firstName: "Max" }));
+    this.set("update", (value, changeset) => {
+      changeset.set("firstName", value.toUpperCase());
+    });
+    await render(
+      hbs`{{validated-input name="firstName" model=model on-update=update}}`
+    );
+
+    await fillIn("input", "foo");
+
+    assert.dom("input").hasValue("FOO");
+  });
+
   test("it renders inputs with value even if model is defined", async function (assert) {
     this.set("model", new Changeset({ firstName: "Max" }));
 

tests/integration/components/validated-input/types/-themes/bootstrap/checkbox-group-test.js

@@ -0,0 +1,26 @@
+import { render } from "@ember/test-helpers";
+import setupConfigTest from "dummy/tests/helpers/setup-config-test";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module(
+  "Integration | Component | validated-input/types/-themes/bootstrap/checkbox-group",
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupConfigTest(hooks, { theme: "bootstrap" });
+
+    test("it renders", async function (assert) {
+      await render(hbs`
+        {{validated-input/types/-themes/bootstrap/checkbox-group
+          options = (array (hash key='t' label='Triangle') (hash key='s' label='Square'))
+          update=(action (mut value))
+        }}
+        `);
+
+      assert.dom("div.custom-control.custom-checkbox").exists();
+      assert.dom("input").hasClass("custom-control-input");
+      assert.dom("label").hasClass("custom-control-label");
+    });
+  }
+);

tests/integration/components/validated-input/types/-themes/uikit/checkbox-group-test.js

@@ -0,0 +1,34 @@
+import { render } from "@ember/test-helpers";
+import setupConfigTest from "dummy/tests/helpers/setup-config-test";
+import { setupRenderingTest } from "ember-qunit";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+
+module(
+  "Integration | Component | validated-input/types/-themes/uikit/checkbox-group",
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupConfigTest(hooks, { theme: "uikit" });
+
+    test("it renders", async function (assert) {
+      this.set("options", [
+        {
+          key: "opt1",
+          label: "Option 1",
+        },
+        {
+          key: "opt2",
+          label: "Option 2",
+        },
+      ]);
+
+      await render(
+        hbs`{{validated-input/types/-themes/uikit/checkbox-group options=options update=(action (mut value))}}`
+      );
+
+      assert.dom("label > input").exists();
+      assert.dom("input").hasClass("uk-checkbox");
+      assert.dom("label").hasClass("uk-form-label");
+    });
+  }
+);

tests/integration/components/validated-input/types/checkbox-group-test.js

@@ -0,0 +1,27 @@
+import { render } from "@ember/test-helpers";
+import { setupRenderingTest } from "ember-qunit";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+
+module(
+  "Integration | Component | validated-input/types/checkbox-group",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("it renders", async function (assert) {
+      this.set("options", [
+        { key: 1, label: 1 },
+        { key: 2, label: 2 },
+      ]);
+
+      await render(hbs`
+      {{validated-input/types/checkbox-group
+        options=options
+        update=(action (mut value))
+      }}
+      `);
+
+      assert.dom("input[type=checkbox]").exists({ count: 2 });
+    });
+  }
+);