49 lines
1.4 KiB
Handlebars
49 lines
1.4 KiB
Handlebars
<Form::Element
|
|
@label={{@label}}
|
|
@for={{this.id}}
|
|
@required={{@required}}
|
|
@helper={{@helper}}
|
|
...attributes
|
|
>
|
|
<Listbox @value={{@value}} @onChange={{@onChange}} as |listbox|>
|
|
<listbox.Button
|
|
class='inline-flex items-center px-3 py-2 border rounded cursor-pointer'
|
|
>
|
|
{{#if (has-block)}}
|
|
{{yield @value}}
|
|
{{else}}
|
|
{{@listboxLabel}}
|
|
{{@value}}
|
|
{{/if}}
|
|
</listbox.Button>
|
|
<listbox.Options
|
|
class='absolute z-dropdown right-0 w-28 min-w-min mt-2 py-1 origin-top-right bg-base-7 border rounded shadow-sm outline-none'
|
|
as |options|
|
|
>
|
|
{{#each @values as |item|}}
|
|
<options.Option @value={{item}} class='outline-none'>
|
|
<div
|
|
class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
|
|
>
|
|
{{#if (has-block)}}
|
|
{{yield item}}
|
|
{{else}}
|
|
{{item}}
|
|
{{/if}}
|
|
</div>
|
|
</options.Option>
|
|
{{/each}}
|
|
{{#if @allowClear}}
|
|
<Divider class='my-1' />
|
|
|
|
<options.Option @value={{null}} class='outline-none'>
|
|
<div
|
|
class='flex items-center px-4 py-2 text-sm hover:bg-base-6 hover:text-base-1 cursor-pointer'
|
|
>
|
|
Clear
|
|
</div>
|
|
</options.Option>
|
|
{{/if}}
|
|
</listbox.Options>
|
|
</Listbox>
|
|
</Form::Element>
|