Settings fully working

src/components/ButtonCheckbox.vue

@@ -1,65 +1,16 @@
+<script setup lang="ts">
+defineProps(['modelValue'])
+defineEmits(['update:modelValue'])
+</script>
+
 <template>
   <button
     class="button is-rounded"
-    :class="shouldBeChecked ? checked_class : unchecked_class"
+    :class="modelValue ? 'is-info' : ''"
-    v-on:click="updateInput"
+    @click="$emit('update:modelValue', !modelValue)"
   >
     <slot></slot>
   </button>
 </template>
 
-<script>
-export default {
-  name: 'button-checkbox',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  props: {
-    checked_class: {
-      default: 'is-info'
-    },
-    unchecked_class: {
-      default: ''
-    },
-    checked: {
-      default: false
-    },
-    value: String,
-    trueValue: {
-      default: true
-    },
-    falseValue: {
-      default: false
-    }
-  },
-  computed: {
-    shouldBeChecked() {
-      if (this.checked instanceof Array) {
-        return this.checked.includes(this.value)
-      }
-
-      return this.checked === this.trueValue
-    }
-  },
-  methods: {
-    updateInput() {
-      if (this.checked instanceof Array) {
-        let newValue = [...this.checked]
-
-        if (!this.shouldBeChecked) {
-          newValue.push(this.value)
-        } else {
-          newValue.splice(newValue.indexOf(this.value), 1)
-        }
-
-        this.$emit('change', newValue)
-      } else {
-        this.$emit('change', this.shouldBeChecked ? this.falseValue : this.trueValue)
-      }
-    }
-  }
-}
-</script>
-
 <style></style>

src/views/SettingsView.vue

@@ -39,13 +39,11 @@ function onDelete() {
       <div class="container">
         <h2 class="subtitle">Spoilers and Displayed Items</h2>
         <div class="field">
-          <ButtonCheckbox v-model="store.HideCompleted" :checked="store.HideCompleted">
+          <ButtonCheckbox v-model="store.HideCompleted"> Hide Completed </ButtonCheckbox>
-            Hide Completed
-          </ButtonCheckbox>
           <p class="help">Hides items that have been turned in to the community center.</p>
         </div>
         <div class="field">
-          <button-checkbox v-model="store.HideSpoilers"> Hide Spoilers </button-checkbox>
+          <ButtonCheckbox v-model="store.HideSpoilers"> Hide Spoilers </ButtonCheckbox>
           <p class="help">Hides things that are considered spoilers, as defined below.</p>
         </div>
         <label class="label"> Spoilers </label>
@@ -86,7 +84,7 @@ function onDelete() {
           those.
         </p>
         <div class="field">
-          <button-checkbox v-model="store.CompactView"> Use Compact View </button-checkbox>
+          <ButtonCheckbox v-model="store.CompactView"> Use Compact View </ButtonCheckbox>
           <p class="help">Enables a compact tabular view for item information.</p>
         </div>
       </div>