Component Party

<h1>Hello {{this.name}}</h1>

<template>
  <h1>Hello ${name}</h1>
</template>

<h1>Hello {{this.name}}</h1>

<template>
  <h1>Hello ${name}</h1>
</template>

<div>{{this.doubleCount}}</div>

<template>
  <div>${doubleCount}</div>
</template>

<h1>Hello world</h1>

<template>
  <h1>Hello world</h1>
</template>

/* using: https://github.com/salsify/ember-css-modules */
.title {
  color: red;
}

.title {
  color: red;
}

<ul>
  {{#each (array "red" "green" "blue") as |color|}}
    <li>{{color}}</li>
  {{/each}}
</ul>

<template>
  <ul>
    <li repeat.for="color of colors">${color}</li>
  </ul>
</template>

<p>Counter: {{this.count}}</p>
<button {{on "click" this.incrementCount}}>+1</button>

<template>
  <p>Counter: ${count}</p>
  <button click.trigger="incrementCount()">+1</button>
</template>

<input {{this.autofocus}} />

<template>
  <input ref="inputElement" />
</template>

<button {{on "click" this.nextLight}}>Next light</button>
<p>Light is: {{this.light}}</p>
<p>
  You must
  {{#if (eq this.light "red")}}
    STOP
  {{else if (eq this.light "orange")}}
    SLOW DOWN
  {{else if (eq this.light "green")}}
    GO
  {{/if}}
</p>

<template>
  <button click.trigger="nextLight()">Next light</button>
  <p>Light is: ${light}</p>
  <p>
    You must
    <span if.bind="light === 'red'">STOP</span>
    <span if.bind="light === 'orange'">SLOW DOWN</span>
    <span if.bind="light === 'green'">GO</span>
  </p>
</template>

<p>Page title is: {{(this.pageTitle)}}</p>

<template>
  <p>Page title is: ${pageTitle}</p>
</template>

<p>Current time: {{this.time}}</p>

<template>
  <p>Current time: ${time}</p>
</template>

<UserProfile
  @name="John"
  @age={{20}}
  @favouriteColors={{array "green" "blue" "red"}}
  @isAvailable={{true}}
/>

<template>
  <require from="./user-profile"></require>
  <user-profile
    name.bind="name"
    age.bind="age"
    favourite-colors.bind="colors"
    is-available.bind="available"
  ></user-profile>
</template>

<p>Are you happy?</p>
<AnswerButton @onYes={{this.handleYes}} @onNo={{this.handleNo}} />
<p style="font-size: 50px;">{{if this.isHappy "😀" "😥"}}</p>

<template>
  <require from="./answer-button"></require>
  <p>Can I come ?</p>
  <answer-button action-handler.call="handleAnswer(reply)"></answer-button>
  <p style="font-size: 50px">${isHappy ? "😀" : "😥"}</p>
</template>

<FunnyButton> Click me! </FunnyButton>

<template>
  <require from="./funny-button"></require>

  <funny-button>Click me !</funny-button>
</template>

<FunnyButton />
<FunnyButton>I got content!</FunnyButton>

<template>
  <require from="./funny-button"></require>

  <funny-button></funny-button>
  <funny-button>Click me !</funny-button>
</template>

<UserProfile />

<p>{{this.text}}</p>
<input value={{this.text}} {{on "input" this.handleInput}} />

<template>
  <p>${text}</p>
  <input value.bind="text" />
</template>

<input
  id="is-available"
  type="checkbox"
  checked={{this.isAvailable}}
  {{on "change" this.handleChange}}
/>
<label for="is-available">Is available</label>

<template>
  <input id="is-available" type="checkbox" checked.bind="isAvailable" />
  <label for="is-available">Is available</label>: ${isAvailable}
</template>

<div>Picked: {{this.picked}}</div>

<input
  id="blue-pill"
  type="radio"
  value="blue"
  checked={{eq this.picked "blue"}}
  {{on "change" this.handleChange}}
/>
<label htmlFor="blue-pill">Blue pill</label>

<input
  id="red-pill"
  type="radio"
  value="red"
  checked={{eq this.picked "red"}}
  {{on "change" this.handleChange}}
/>
<label htmlFor="red-pill">Red pill</label>

<template>
  <div>Picked: ${picked}</div>

  <input id="blue-pill" checked.bind="picked" type="radio" value="blue" />
  <label for="blue-pill">Blue pill</label>

  <input id="red-pill" checked.bind="picked" type="radio" value="red" />
  <label for="red-pill">Red pill</label>
</template>

<select {{on "change" this.select}}>
  {{#each this.colors as |color|}}
    <option
      value={{color.id}}
      disabled={{color.isDisabled}}
      selected={{eq color.id this.selectedColorId}}
    >
      {{color.text}}
    </option>
  {{/each}}
</select>

<template>
  <select value.bind="selectedColorId">
    <option value="">Select A Color</option>
    <option
      repeat.for="color of colors"
      value.bind="color.id"
      disabled.bind="color.isDisabled"
    >
      ${color.text}
    </option>
  </select>
</template>

{{#let (this.fetchUsers) as |request|}}
  {{#if request.isLoading}}

    <p>Fetching users...</p>

  {{else if request.error}}

    <p>An error occurred while fetching users</p>

  {{else}}

    <ul>
      {{#each request.users as |user|}}
        <li>
          <img src={{user.picture.thumbnail}} alt="user" />
          <p>{{user.name.first}} {{user.name.last}}</p>
        </li>
      {{/each}}
    </ul>

  {{/if}}
{{/let}}

<template>
  <p if.bind="isLoading">Fetching users...</p>
  <p if.bind="error">An error ocurred while fetching users</p>
  <ul if.bind="users">
    <li repeat.for="user of users">
      <img src.bind="user.picture.thumbnail" alt="user" />
      <p>${ user.name.first } ${ user.name.last }</p>
    </li>
  </ul>
</template>