From 4539feed409e7f934f5d9d3ccd4944b34350fa2a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 24 Mar 2022 11:41:39 +0200
Subject: [PATCH] fix checkboxes, specifically the NSFW one
---
src/components/checkbox/checkbox.vue | 11 ++++-------
src/components/color_input/color_input.vue | 2 +-
src/components/font_control/font_control.vue | 2 +-
src/components/opacity_input/opacity_input.vue | 2 +-
src/components/range_input/range_input.vue | 2 +-
src/components/selectable_list/selectable_list.vue | 4 ++--
.../settings_modal/helpers/boolean_setting.vue | 4 ++--
src/components/settings_modal/settings_modal.vue | 2 +-
.../user_reporting_modal/user_reporting_modal.vue | 2 +-
9 files changed, 14 insertions(+), 17 deletions(-)
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index ff2b4e77..a9d78e88 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/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'
]
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 81462979..b2acbc3d 100644
--- a/src/components/color_input/color_input.vue
+++ b/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)"
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 72b480ef..2006c7f6 100644
--- a/src/components/font_control/font_control.vue
+++ b/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
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index e1d31fc2..faf07288 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/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)"
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 82681809..7fe58e80 100644
--- a/src/components/range_input/range_input.vue
+++ b/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
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 3f885881..cf7cec27 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/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>
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 131377b9..3808bc74 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/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"
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 603688e4..f54c89c4 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/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>
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 1f67a5cc..2993e4ec 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/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>