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)
}
}