Neural Processing Mechanisms

    eflex-ember-power-select-with-create

    0.6.0 • Public • Published

    Ember-power-select-with-create

    Simple variation of ember-power-select that allows you to create a new entry based on the search text.

    Installation

    ember install ember-power-select-with-create
    

    Versions 0.1.X worked with EPS < 1.0 Version 0.2.X requires EPS 1.0.0-beta.14 or greater.

    Usage

    {{#power-select-with-create
        options=countries
        selected=selectedCountry
        onchange=(action (mut selectedCountry))
        oncreate=(action "createCountry") as |country term|
    }}
      {{country.name}}
    {{/power-select-with-create}}

    If you want to be able to select multiple options, use the power-select-multiple-with-create component instead. It has the same API as the normal power-select-with-create.

    For more options please refer to the ember-power-select docs

    Control if create option should be shown

    You can provide a callback showCreateWhen, which will be called whenever the user types into the search field. If you return true, the create option will be shown. If you return false, it won't be shown.

    {{#power-select-with-create
        options=countries
        searchField="name"
        selected=selectedCountry
        oncreate=(action "createCountry")
        showCreateWhen=(action "hideCreateOptionOnSameName") as |country|
    }}
      {{country.name}}
    {{/power-select-with-create}}
    actions: {
      hideCreateOptionOnSameName(term) {
        let existingOption = this.get('countries').findBy('name', term);
        return !existingOption;
      },
    },

    Control create option position - Default TOP

    You can provide showCreatePosition property to control the position(bottom|top) of create option. Default - top

    {{#power-select-with-create
        options=countries
        searchField="name"
        selected=selectedCountry
        oncreate=(action "createCountry")
        showCreatePosition='bottom'
        showCreateWhen=(action "hideCreateOptionOnSameName") as |country|
    }}
      {{country.name}}
    {{/power-select-with-create}}

    Control the create option's label - Default Add "{{option}}"...

    You can provide the buildSuggestion action to control the label of the create option. Default - Add "{{option}}"...

    {{#power-select-with-create
        options=countries
        searchField="name"
        selected=selectedCountry
        oncreate=(action "createCountry")
        buildSuggestion=(action "customSuggestion")
    }}
      {{country.name}}
    {{/power-select-with-create}}
    actions: {
      customSuggestion(term) {
        return `Create ${term}`;
      },
    },

    Pass the creation option to a component for more control

    Beyond building the suggestion label, you can pass the suggestedOptionComponent property the name of your component.

    This component will receive the suggestedOption itself as option and the current term as term.

    {{#power-select-with-create
        options=countries
        searchField="name"
        selected=selectedCountry
        oncreate=(action "createCountry")
        suggestedOptionComponent="suggested-option"
    }}
      {{country.name}}
    {{/power-select-with-create}}
    <!-- {{suggested-option option=option term=term}} -->
    <span class="is-suggested">
      Add "{{term}}"...
    </span>
    <!-- {{/suggested-option}} -->

    Demo

    https://ember-power-select-with-create.pagefrontapp.com/

    Install

    npm i eflex-ember-power-select-with-create

    DownloadsWeekly Downloads

    3

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    261 kB

    Total Files

    15

    Last publish

    Collaborators

    • josephdickens87
    • nevans54
    • rrglomsk
    • jakesjews
    • eflex