extracts Selector component

lootalot_front/src/components/Chest.vue

@@ -36,15 +36,7 @@
               @claim="(data) => $emit('claim', data)"
               @unclaim="(data) => $emit('unclaim', data)">
             </Request>
-            <div v-else-if="showSelectors" class="buttons has-addons">
-              <label :for="`select-${idx}`" class="button is-fullwidth">
-              <input type="checkbox" class="checkbox"
-                :id="`select-${idx}`"
-                :value="item.id"
-                v-model="selected_items">
-              </label>
-              <PercentInput v-model="modifiers[item.id]"></PercentInput>
-            </div>
+            <Selector :id="`select-${idx}`" v-else-if="showSelectors" v-model="selected_items"></Selector>
           </td>
         </tr>
       </template>
@@ -55,6 +47,7 @@
 <script>
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
+    import Selector from './Selector.vue'
     /*
         The chest displays a collection of items.
 
@@ -77,6 +70,7 @@
         components: {
             Request,
             PercentInput,
+            Selector,
         },
         data () {
             return {