<commit_before><h1 class="doc-page-title">How to use it</h1>

<p>
  The basic usage the component is very simple. The only mandatory arguments you have to
  pass to it are <code>options</code> which has to be a <em>collection</em> of any kind, including
  the result of ember-data operations like <code>.find</code> or <code>.query</code>, and the
  <code>onchange</code> action.
  The component will yield each individual item in the collection to the block to generate the list.
</p>

{{#code-sample as |component|}}
  <pre class="code-sample-snippet {{if (eq component.activeTab 'template') 'active'}}">
    \{{#power-select options=names onchange=(action "foo") as |name|}}
      \{{name}}
    \{{/power-select}}
  </pre>
  <pre class="code-sample-snippet {{if (eq component.activeTab 'javascript') 'active'}}">
    export default Ember.Controller.extend({
      names: ['Stefan', 'Miguel', 'Tomster', 'Pluto'],
      selectedUser: 'Tomster',
      actions: {
        foo() { }
      }
    });
  </pre>
  <div class="code-sample-snippet result {{if (eq component.activeTab 'result') 'active'}}">
    {{#power-select options=names onchange=(action "foo") as |name|}}
      {{name}}
    {{/power-select}}
  </div>
{{/code-sample}}

<p>
  The block of the component becomes the content of each option of the select and also the content
  of the trigger by default. Blocks are a powerful Ember primitive and you can use them to build
  selects with complex HTML inside very naturally.
</p>

{{#code-sample as |component|}}
  <pre class="code-sample-snippet template {{if (eq component.activeTab 'template') 'active'}}">
    \{{#power-select options=countries selected=destination onchange=(action "foo") as |country|}}
      &lt;img src="\{{country.flagUrl}}" class="icon-flag"&gt; &lt;strong&gt;\{{country.name}}&lt;/strong&gt;
    \{{/power-select}}
  </pre>
  <pre class="code-sample-snippet javascript {{if (eq component.activeTab 'javascript') 'active'}}">
    const countries = [
      { name: 'United States',  flagUrl: '/flags/us.svg' },
      { name: 'Spain',          flagUrl: '/flags/es.svg' },
      { name: 'Portugal',       flagUrl: '/flags/pt.svg' },
      { name: 'Russia',         flagUrl: '/flags/ru.svg' },
      { name: 'Latvia',         flagUrl: '/flags/lv.svg' },
      { name: 'Brazil',         flagUrl: '/flags/br.svg' },
      { name: 'United Kingdom', flagUrl: '/flags/gb.svg' },
    ];

    export default Ember.Controller.extend({
      countries: countries,
      destination: countries[2],
      actions: {
        foo() { }
      }
    });
  </pre>
  <div class="code-sample-snippet result {{if (eq component.activeTab 'result') 'active'}}">
    {{#power-select options=countries selected=destination onchange=(action "foo") as |country|}}
      <img src="{{country.flagUrl}}" class="icon-flag"> <strong>{{country.name}}</strong>
    {{/power-select}}
  </div>
{{/code-sample}}

<p>
  Also you've seen the usage of the <code>selected</code> option. Unsurprisingly it tells the
  component the <strong>initial</strong> selection. But it's important to note a a few things
  about it:
</p>

<ul>
  <li>
    The component compares the selected option with the options in the collection by equalty, to
    have in mind that when working with POJOs that <code>{ foo: 'bar' } === { foo: 'bar' }</code> is false.
  </li>
  <li>
    Updates in the selected element will update the selected value in the component as expected.
  </li>
  <li>
    <code>selected</code> (and all other options options actually) is read only. This means that selecting a
    an element in the component won't do anything. That is a design decission and the reason by the
    <code>onchange</code> action is mandatory.
  </li>
</ul>

<p>
  This is the very basic usage of this component, but so far is pretty useless. Since there is no
  double bindings and the <code>onchange</code> action is empty nothing happens when you select something on it.
</p>

<p>
  Let's see how to take advantage of the <code>onchange</code> property.
</p><commit_msg>Make clear that selects in "How to use it" section are intentionally broken<commit_after><h1 class="doc-page-title">How to use it</h1>

<p>
  The basic usage the component is very simple. The only mandatory arguments you have to
  pass to it are <code>options</code> which has to be a <em>collection</em> of any kind, including
  the result of ember-data operations like <code>.find</code> or <code>.query</code>, and the
  <code>onchange</code> action.
  The component will yield each individual item in the collection to the block to generate the list.
</p>

<p><strong>Selects in this page seem to not work. This is intended.</strong> See last paragraph.</p>

{{#code-sample as |component|}}
  <pre class="code-sample-snippet {{if (eq component.activeTab 'template') 'active'}}">
    \{{#power-select options=names onchange=(action "foo") as |name|}}
      \{{name}}
    \{{/power-select}}
  </pre>
  <pre class="code-sample-snippet {{if (eq component.activeTab 'javascript') 'active'}}">
    export default Ember.Controller.extend({
      names: ['Stefan', 'Miguel', 'Tomster', 'Pluto'],
      selectedUser: 'Tomster',
      actions: {
        foo() { }
      }
    });
  </pre>
  <div class="code-sample-snippet result {{if (eq component.activeTab 'result') 'active'}}">
    {{#power-select options=names onchange=(action "foo") as |name|}}
      {{name}}
    {{/power-select}}
  </div>
{{/code-sample}}

<p>
  The block of the component becomes the content of each option of the select and also the content
  of the trigger by default. Blocks are a powerful Ember primitive and you can use them to build
  selects with complex HTML inside very naturally.
</p>

{{#code-sample as |component|}}
  <pre class="code-sample-snippet template {{if (eq component.activeTab 'template') 'active'}}">
    \{{#power-select options=countries selected=destination onchange=(action "foo") as |country|}}
      &lt;img src="\{{country.flagUrl}}" class="icon-flag"&gt; &lt;strong&gt;\{{country.name}}&lt;/strong&gt;
    \{{/power-select}}
  </pre>
  <pre class="code-sample-snippet javascript {{if (eq component.activeTab 'javascript') 'active'}}">
    const countries = [
      { name: 'United States',  flagUrl: '/flags/us.svg' },
      { name: 'Spain',          flagUrl: '/flags/es.svg' },
      { name: 'Portugal',       flagUrl: '/flags/pt.svg' },
      { name: 'Russia',         flagUrl: '/flags/ru.svg' },
      { name: 'Latvia',         flagUrl: '/flags/lv.svg' },
      { name: 'Brazil',         flagUrl: '/flags/br.svg' },
      { name: 'United Kingdom', flagUrl: '/flags/gb.svg' },
    ];

    export default Ember.Controller.extend({
      countries: countries,
      destination: countries[2],
      actions: {
        foo() { }
      }
    });
  </pre>
  <div class="code-sample-snippet result {{if (eq component.activeTab 'result') 'active'}}">
    {{#power-select options=countries selected=destination onchange=(action "foo") as |country|}}
      <img src="{{country.flagUrl}}" class="icon-flag"> <strong>{{country.name}}</strong>
    {{/power-select}}
  </div>
{{/code-sample}}

<p>
  Also you've seen the usage of the <code>selected</code> option. Unsurprisingly it tells the
  component the <strong>initial</strong> selection. But it's important to note a a few things
  about it:
</p>

<ul>
  <li>
    The component compares the selected option with the options in the collection by equalty, to
    have in mind that when working with POJOs that <code>{ foo: 'bar' } === { foo: 'bar' }</code> is false.
  </li>
  <li>
    Updates in the selected element will update the selected value in the component as expected.
  </li>
  <li>
    <code>selected</code> (and all other options options actually) is read only. This means that selecting a
    an element in the component won't do anything. That is a design decission and the reason by the
    <code>onchange</code> action is mandatory.
  </li>
</ul>

<p>
  This is the very basic usage of this component, but so far is pretty useless. Since there is no
  double bindings and the <code>onchange</code> action is empty <strong>nothing happens when you select something on it.</strong>
</p>

<p>
  Let's see how to take advantage of the <code>onchange</code> property.
</p>
{'fraction_non_alphanumeric': 0.15050126826911464, 'fraction_numerical': 0.0007247252083584974, 'mean_word_length': 3.456404736275565, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 127, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7384597', 'n_tokens_mistral': 2567, 'n_tokens_neox': 2523, 'n_words': 897}