39f3dbd945
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:
```
computeValue()
computeContent()
mutateValue()
```
50 lines
1.5 KiB
Handlebars
50 lines
1.5 KiB
Handlebars
{{component headerComponent
|
|
tabindex=tabindex
|
|
isFocused=isFocused
|
|
isExpanded=isExpanded
|
|
computedContent=headerComputedContent
|
|
onDeselect=(action "onDeselect")
|
|
onToggle=(action "onToggle")
|
|
onFilter=(action "onFilter")
|
|
onClear=(action "onClear")
|
|
options=headerComponentOptions
|
|
shouldDisplayFilter=shouldDisplayFilter
|
|
}}
|
|
|
|
<div class="select-kit-body">
|
|
{{component filterComponent
|
|
onFilter=(action "onFilter")
|
|
icon=filterIcon
|
|
shouldDisplayFilter=shouldDisplayFilter
|
|
isFocused=isFocused
|
|
placeholder=(i18n filterPlaceholder)
|
|
filter=filter
|
|
}}
|
|
|
|
{{#if renderedBodyOnce}}
|
|
{{component collectionComponent
|
|
hasSelection=hasSelection
|
|
noneRowComputedContent=noneRowComputedContent
|
|
createRowComputedContent=createRowComputedContent
|
|
filteredComputedContent=filteredComputedContent
|
|
rowComponent=rowComponent
|
|
noneRowComponent=noneRowComponent
|
|
createRowComponent=createRowComponent
|
|
templateForRow=templateForRow
|
|
templateForNoneRow=templateForNoneRow
|
|
templateForCreateRow=templateForCreateRow
|
|
onClear=(action "onClear")
|
|
onSelect=(action "onSelect")
|
|
onHighlight=(action "onHighlight")
|
|
onCreate=(action "onCreate")
|
|
noContentLabel=noContentLabel
|
|
highlightedValue=highlightedValue
|
|
computedValue=computedValue
|
|
shouldDisplayNoContentRow=shouldDisplayNoContentRow
|
|
rowComponentOptions=rowComponentOptions
|
|
}}
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="select-kit-wrapper"></div>
|