Add checkbox based multiselect util component

Takes an array of objects (name, checked, description) and turns it into
a list of checkboxes, one for each element
This commit is contained in:
Melody Becker 2024-10-25 10:52:43 +02:00
parent e802027236
commit 07614e9a6d
3 changed files with 60 additions and 0 deletions

View file

@ -0,0 +1,13 @@
<div class={{@wrapper-class}}>
{{#each this.args.elements as |element|}}
<label class={{@label-class}}>
{{element.description}}
<Input
@type="checkbox"
name="{{element.name}}"
@checked={{element.checked}}
{{on "change" this.onChange}}
/>
</label>
{{/each}}
</div>

View file

@ -0,0 +1,21 @@
import { action } from '@ember/object'
import Component from '@glimmer/component'
export interface UtilMultiselectSignature {
// The arguments accepted by the component
Args: {
elements: Array<{ name: string; checked: boolean; description: string }>
}
// Any blocks yielded by the component
Blocks: {
default: []
}
// The element to which `...attributes` is applied in the component template
Element: null
}
export default class UtilMultiselect extends Component<UtilMultiselectSignature> {
@action onChange() {
console.log(this.args.elements)
}
}

View file

@ -0,0 +1,26 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'frontend-reactive/tests/helpers';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | util/multiselect', function (hooks) {
setupRenderingTest(hooks);
test('it renders', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });
await render(hbs`<Util::Multiselect />`);
assert.dom().hasText('');
// Template block usage:
await render(hbs`
<Util::Multiselect>
template block text
</Util::Multiselect>
`);
assert.dom().hasText('template block text');
});
});