fix checkboxes, specifically the NSFW one

src/components/checkbox/checkbox.vue

@@ -6,9 +6,9 @@
     <input
       type="checkbox"
       :disabled="disabled"
-      :checked="checked"
+      :modelValue="modelValue"
       :indeterminate="indeterminate"
-      @change="$emit('change', $event.target.checked)"
+      @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i class="checkbox-indicator" />
     <span
@@ -22,12 +22,9 @@
 
 <script>
 export default {
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
+  emits: ['update:modelValue'],
   props: [
-    'checked',
+    'modelValue',
     'indeterminate',
     'disabled'
   ]

src/components/color_input/color_input.vue

@@ -11,7 +11,7 @@
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
-      :checked="present"
+      :modelValue="present"
       :disabled="disabled"
       class="opt"
       @change="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"

src/components/font_control/font_control.vue

@@ -14,7 +14,7 @@
       :id="name + '-o'"
       class="opt exlcude-disabled"
       type="checkbox"
-      :checked="present"
+      :modelValue="present"
       @input="$emit('update:modelValue', typeof value === 'undefined' ? fallback : undefined)"
     >
     <label

src/components/opacity_input/opacity_input.vue

@@ -11,7 +11,7 @@
     </label>
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
-      :checked="present"
+      :modelValue="present"
       :disabled="disabled"
       class="opt"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"

src/components/range_input/range_input.vue

@@ -14,7 +14,7 @@
       :id="name + '-o'"
       class="opt"
       type="checkbox"
-      :checked="present"
+      :modelValue="present"
       @input="$emit('update:modelValue', !present ? fallback : undefined)"
     >
     <label

src/components/selectable_list/selectable_list.vue

@@ -6,7 +6,7 @@
     >
       <div class="selectable-list-checkbox-wrapper">
         <Checkbox
-          :checked="allSelected"
+          :modelValue="allSelected"
           :indeterminate="someSelected"
           @change="toggleAll"
         >
@@ -31,7 +31,7 @@
         >
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox
-              :checked="isSelected(item)"
+              :modelValue="isSelected(item)"
               @change="checked => toggle(checked, item)"
             />
           </div>

src/components/settings_modal/helpers/boolean_setting.vue

@@ -4,9 +4,9 @@
     class="BooleanSetting"
   >
     <Checkbox
-      :checked="state"
+      :modelValue="state"
       :disabled="disabled"
-      @change="update"
+      @update:modelValue="update"
     >
       <span
         v-if="!!$slots.default"

src/components/settings_modal/settings_modal.vue

@@ -110,7 +110,7 @@
           </template>
         </Popover>
 
-        <Checkbox :checked="!!expertLevel" @change="expertLevel = Number($event)">
+        <Checkbox :modelValue="!!expertLevel" @update:modelValue="expertLevel = Number($event)">
           {{ $t("settings.expert_mode") }}
         </Checkbox>
       </div>

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -53,7 +53,7 @@
                   :statusoid="item"
                 />
                 <Checkbox
-                  :checked="isChecked(item.id)"
+                  :modelValue="isChecked(item.id)"
                   @change="checked => toggleStatus(checked, item.id)"
                 />
               </div>