extracts Selector component

lootalot_front/src/components/Selector.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="buttons has-addons">
+    <label class="button is-fullwidth">
+        <input type="checkbox" class="checkbox" v-model="selected">
+    </label>
+    <PercentInput v-model="modifier"></PercentInput>
+  </div>
+</template>
+
+<script>
+import PercentInput from './PercentInput.vue'
+
+/*
+Selector for a specific item, with an associated price modifier.
+
+Acts as checkbox on a v-model, except it populates an array with [value, modifier] instead of value alone
+
+*/
+
+export default {
+    props: ["value"],
+    components: { PercentInput },
+    data () {
+        return {
+            selected: false,
+            modifier: 0,
+        };
+    },
+    methods: {
+        update () {
+            var updated = this.value;
+            let idx = this.value.findIndex(([val, mod]) => this.value == val);
+            if (idx == -1) {
+                if this.selected {
+                    updated.push([this.value, this.modifier])
+                }
+            } else {
+                if this.selected {
+                    updated.splice(idx, 1, [this.value, this.modifier])
+                    // Replace this.value[idx] by [val, this.modifier]
+                } else {
+                    // Remove this.value[idx]
+                }
+            }
+            this.$emit('input', updated);
+        },
+    }
+  }
+</script>