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:
parent
e802027236
commit
07614e9a6d
3 changed files with 60 additions and 0 deletions
13
frontend-reactive/app/components/util/multiselect.hbs
Normal file
13
frontend-reactive/app/components/util/multiselect.hbs
Normal 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>
|
21
frontend-reactive/app/components/util/multiselect.ts
Normal file
21
frontend-reactive/app/components/util/multiselect.ts
Normal 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)
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue