Skip to content

Commit

Permalink
feat: checkbox groups
Browse files Browse the repository at this point in the history
  • Loading branch information
czosel committed Jul 13, 2021
1 parent 5b20162 commit 87cb5ee
Show file tree
Hide file tree
Showing 16 changed files with 221 additions and 1 deletion.
3 changes: 3 additions & 0 deletions addon/components/validated-input/render.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
});
Original file line number Diff line number Diff line change
@@ -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,
});
23 changes: 23 additions & 0 deletions addon/components/validated-input/types/checkbox-group.js
Original file line number Diff line number Diff line change
@@ -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();
},
});
Original file line number Diff line number Diff line change
Expand Up @@ -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
}}
Expand Down
14 changes: 14 additions & 0 deletions addon/templates/components/validated-input/render.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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
}}
Expand Down
Original file line number Diff line number Diff line change
@@ -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}}
Original file line number Diff line number Diff line change
@@ -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}}
Original file line number Diff line number Diff line change
@@ -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}}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "ember-validated-form/components/validated-input/types/-themes/bootstrap/checkbox-group";
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "ember-validated-form/components/validated-input/types/-themes/uikit/checkbox-group";
1 change: 1 addition & 0 deletions app/components/validated-input/types/checkbox-group.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "ember-validated-form/components/validated-input/types/checkbox-group";
23 changes: 22 additions & 1 deletion tests/dummy/app/templates/docs/components/validated-input.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">`
Expand Down Expand Up @@ -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 -->
Original file line number Diff line number Diff line change
@@ -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");
});
}
);
Original file line number Diff line number Diff line change
@@ -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");
});
}
);
Original file line number Diff line number Diff line change
@@ -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 });
});
}
);

0 comments on commit 87cb5ee

Please sign in to comment.