feat: checkbox groups (#640)

* fix: call on-update hook correctly

This fixes a regression introduced with the update to glimmer.

* feat: checkbox groups

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";

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/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 });
+    });
+  }
+);