discourse/app/assets/javascripts/select-kit/addon/components/multi-select.hbs
Penar Musaraj f5e8e737ad
UX: Compact option for multi-selects (#22239)
Adds an alternative to the default multi select item, better suited for quickly adding/removing tags.
2023-07-25 11:00:02 -04:00

56 lines
1.6 KiB
Handlebars

{{#unless this.selectKit.isHidden}}
{{component
this.selectKit.options.headerComponent
tabindex=this.tabindex
value=this.value
selectedContent=this.selectedContent
selectKit=this.selectKit
id=(concat this.selectKit.uniqueID "-header")
}}
<SelectKit::SelectKitBody
@selectKit={{this.selectKit}}
@id={{concat this.selectKit.uniqueID "-body"}}
>
{{#unless this.selectKit.options.useHeaderFilter}}
{{component
this.selectKit.options.filterComponent
selectKit=this.selectKit
id=(concat this.selectKit.uniqueID "-filter")
}}
{{#if this.selectedContent.length}}
<div class="selected-content">
{{#each this.selectedContent as |item|}}
{{component
this.selectKit.options.selectedChoiceComponent
item=item
selectKit=this.selectKit
}}
{{/each}}
</div>
{{/if}}
{{/unless}}
{{#each this.collections as |collection|}}
{{component
(component-for-collection collection.identifier this.selectKit)
collection=collection
selectKit=this.selectKit
value=this.value
}}
{{/each}}
{{#if this.selectKit.filter}}
{{#if this.selectKit.hasNoContent}}
<span class="no-content" role="alert">
{{i18n "select_kit.no_content"}}
</span>
{{else}}
<span class="results-count" role="alert">
{{i18n "select_kit.results_count" count=this.mainCollection.length}}
</span>
{{/if}}
{{/if}}
</SelectKit::SelectKitBody>
{{/unless}}