Ghost/ghost/admin/app/components/gh-token-input.hbs
Kevin Ansfield a08c2dfe12 Added grouped and custom option support to <GhTokenInput>
no issue

- `<GhTokenInput>` is based around `<PowerSelect>` but using Power Select's grouped options feature didn't work because we weren't falling back to it's built-in group component
- updated the `<GhTokenInput>` template to use a supplied block as the option display rather than only displaying the option's label (allows for counts etc to be shown alongside dropdown options)
2021-04-26 08:17:50 +01:00

68 lines
2.4 KiB
Handlebars

<GhTokenInput::SelectMultiple
class={{concat "gh-token-input " @class}}
@triggerRole={{@triggerRole}}
@ariaDescribedBy={{@ariaDescribedBy}}
@ariaInvalid={{@ariaInvalid}}
@ariaLabel={{@ariaLabel}}
@ariaLabelledBy={{@ariaLabelledBy}}
@afterOptionsComponent={{@afterOptionsComponent}}
@allowClear={{@allowClear}}
@beforeOptionsComponent={{@beforeOptionsComponent}}
@buildSelection={{@buildSelection}}
@calculatePosition={{@calculatePosition}}
@closeOnSelect={{this.closeOnSelect}}
@defaultHighlighted={{this.defaultHighlighted}}
@destination={{@destination}}
@disabled={{@disabled}}
@dropdownClass={{@dropdownClass}}
@extra={{@extra}}
@groupComponent={{or @groupComponent "power-select/power-select-group"}}
@horizontalPosition={{@horizontalPosition}}
@initiallyOpened={{@initiallyOpened}}
@loadingMessage={{@loadingMessage}}
@matcher={{this.matcher}}
@matchTriggerWidth={{@matchTriggerWidth}}
@noMatchesMessage={{@noMatchesMessage}}
@onBlur={{this.handleBlur}}
@onChange={{this.selectOrCreate}}
@onClose={{@onClose}}
@onFocus={{this.handleFocus}}
@onInput={{@onInput}}
@onKeydown={{this.handleKeydown}}
@onOpen={{@onOpen}}
@options={{this.optionsWithoutSelected}}
@optionsComponent={{this.optionsComponent}}
@placeholder={{@placeholder}}
@placeholderComponent={{@placeholderComponent}}
@preventScroll={{@preventScroll}}
@registerAPI={{@registerAPI}}
@renderInPlace={{@renderInPlace}}
@required={{@required}}
@scrollTo={{@scrollTo}}
@search={{this.searchAndSuggest}}
@searchEnabled={{true}}
@searchField={{this.searchField}}
@searchMessage={{@searchMessage}}
@searchPlaceholder={{@searchPlaceholder}}
@selected={{@selected}}
@selectedItemComponent={{@selectedItemComponent}}
@eventType={{@eventType}}
@title={{@title}}
@triggerClass={{@triggerClass}}
@triggerComponent={{this.triggerComponent}}
@triggerId={{@triggerId}}
@verticalPosition={{@verticalPosition}}
@tabindex={{@tabindex}}
data-test-token-input="true"
as |option|
>
{{#if option.__isSuggestion__}}
<GhTokenInput::SuggestedOption @option={{option}} />
{{else}}
{{#if (has-block)}}
{{yield option}}
{{else}}
{{get option this.labelField}}
{{/if}}
{{/if}}
</GhTokenInput::SelectMultiple>