# Listbox

<banshee-listbox :items="forsaken">
  <banshee-listbox-item>
    <template slot-scope="{ active, item }">
      <span :class="{ active }">{{ item }}</span>
    </template>
  </banshee-listbox-item>
</banshee-listbox>

<script>
  //...
  data: () => ({
    forsaken: ['Sylvanas', 'Nathanos', 'Belmont', 'Mortuus', 'Voss']
  })
</script>

<template>
  <div id="app">
    <banshee-listbox @onTransfer="transfer" :items="characters">
      <banshee-listbox-item>
        <template slot-scope="{ active, item, selected }">
          <template v-if="selected">&#10004;</template> <span :class="{ active }">{{ item }}</span>
        </template>
      </banshee-listbox-item>

      <template slot-scope="{ transfer }">
        <button @click="transfer">Transfer</button>
      </template>
    </banshee-listbox>

    <banshee-listbox :items="favoriteCharacters">
      <p>My favorite:</p>
      <banshee-listbox-item>
        <template slot-scope="{ item }">
          {{ item }}
        </template>
      </banshee-listbox-item>
    </banshee-listbox>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      characters: [
        'Varian', 'Sylvanas', 'Thrall', 'Saurfang',
        'Malfurion', 'Tyrande', 'Greymane', 'Nathanos',
        'Anduin', 'Illidan', 'Khadgar', 'Vol\'jin',
        'Chen', 'Garrosh', 'Velen', 'Bolvar',
        'Arthas', 'Jaina', 'Muradin', 'Mograine'
      ],
      favoriteCharacters: []
    }
  },
  methods: {
    transfer ({ selected }) {
      this.characters = this.characters.filter(x => !selected.includes(x))
      this.favoriteCharacters.push(...selected)
    }
  }
}
</script>