From 4f047d92d332a9be0451c6caa1b63eca757f8394 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Thu, 14 Mar 2024 13:39:11 +0100
Subject: [PATCH] migration(vue3): COMPONENT_V_MODEL

---
 app/src/components/globals/ViewSearch.vue        |  4 ++--
 .../globals/formItems/CheckboxItem.vue           |  5 ++---
 .../components/globals/formItems/FileItem.vue    |  2 +-
 .../components/globals/formItems/TagsItem.vue    |  4 ++--
 app/src/views/app/AppCatalog.vue                 | 16 ++++++++--------
 app/src/views/tool/ToolFirewall.vue              |  5 ++---
 app/src/views/user/UserEdit.vue                  |  2 +-
 7 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/src/components/globals/ViewSearch.vue b/app/src/components/globals/ViewSearch.vue
index 94073c98..de6912b0 100644
--- a/app/src/components/globals/ViewSearch.vue
+++ b/app/src/components/globals/ViewSearch.vue
@@ -11,8 +11,8 @@
 
         <BFormInput
           id="top-bar-search"
-          :value="search"
-          @input="$emit('update:search', $event)"
+          :modelValue="search"
+          @update:modelValue="$emit('update:search', $event)"
           :placeholder="
             $t('search.for', { items: $t('items.' + itemsName, 2) })
           "
diff --git a/app/src/components/globals/formItems/CheckboxItem.vue b/app/src/components/globals/formItems/CheckboxItem.vue
index 8eb1b031..7da516a7 100644
--- a/app/src/components/globals/formItems/CheckboxItem.vue
+++ b/app/src/components/globals/formItems/CheckboxItem.vue
@@ -1,8 +1,7 @@
 <template>
-  <!-- FIXME vue3 - `modelValue`+`@update:model` doesn't work here, probably to the prop's name not being `value`. Sticking for now to `checked`+`@input` -->
   <BFormCheckbox
-    :checked="modelValue"
-    @input="$emit('update:modelValue', $event)"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
diff --git a/app/src/components/globals/formItems/FileItem.vue b/app/src/components/globals/formItems/FileItem.vue
index 02d7f3f5..07392692 100644
--- a/app/src/components/globals/formItems/FileItem.vue
+++ b/app/src/components/globals/formItems/FileItem.vue
@@ -19,7 +19,7 @@
       :drop-placeholder="dropPlaceholder"
       :state="state"
       :browse-text="$t('words.browse')"
-      @input="onInput"
+      @update:modelValue="onInput"
       @blur="$parent.$emit('touch', name)"
       @focusout="$parent.$emit('touch', name)"
     />
diff --git a/app/src/components/globals/formItems/TagsItem.vue b/app/src/components/globals/formItems/TagsItem.vue
index 55dbdf29..d1937752 100644
--- a/app/src/components/globals/formItems/TagsItem.vue
+++ b/app/src/components/globals/formItems/TagsItem.vue
@@ -1,7 +1,7 @@
 <template>
   <BFormTags
-    :value="modelValue"
-    @input="$emit('update:modelValue', $event)"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
diff --git a/app/src/views/app/AppCatalog.vue b/app/src/views/app/AppCatalog.vue
index 5f6afe7f..40ded865 100644
--- a/app/src/views/app/AppCatalog.vue
+++ b/app/src/views/app/AppCatalog.vue
@@ -16,14 +16,14 @@
           <BFormInput
             id="search-input"
             :placeholder="$t('search.for', { items: $t('items.apps', 2) })"
-            :value="search"
-            @input="updateQuery('search', $event)"
+            :modelValue="search"
+            @update:modelValue="updateQuery('search', $event)"
           />
           <BInputGroupAppend>
             <BFormSelect
-              :value="quality"
+              :modelValue="quality"
               :options="qualityOptions"
-              @change="updateQuery('quality', $event)"
+              @update:modelValue="updateQuery('quality', $event)"
             />
           </BInputGroupAppend>
         </BInputGroup>
@@ -34,9 +34,9 @@
             <YIcon iname="filter" />
           </BInputGroupPrepend>
           <BFormSelect
-            :value="category"
+            :modelValue="category"
             :options="categories"
-            @change="updateQuery('category', $event)"
+            @update:modelValue="updateQuery('category', $event)"
           />
           <BInputGroupAppend>
             <BButton
@@ -63,9 +63,9 @@
           />
           <BFormSelect
             id="subtags-select"
-            :value="subtag"
+            :modelValue="subtag"
             :options="subtags"
-            @change="updateQuery('subtag', $event)"
+            @update:modelValue="updateQuery('subtag', $event)"
           />
         </BInputGroup>
       </div>
diff --git a/app/src/views/tool/ToolFirewall.vue b/app/src/views/tool/ToolFirewall.vue
index c86e6105..9e6d35b9 100644
--- a/app/src/views/tool/ToolFirewall.vue
+++ b/app/src/views/tool/ToolFirewall.vue
@@ -20,10 +20,9 @@
           <template #cell()="data">
             <BFormCheckbox
               v-if="data.field.key !== 'uPnP'"
-              class="on-off-switch"
-              v-model="data.value"
+              :modelValue="data.value"
               switch
-              @change="
+              @update:modelValue="
                 onTablePortToggling(
                   data.item.port,
                   protocol,
diff --git a/app/src/views/user/UserEdit.vue b/app/src/views/user/UserEdit.vue
index 93b04015..4e6418b6 100644
--- a/app/src/views/user/UserEdit.vue
+++ b/app/src/views/user/UserEdit.vue
@@ -168,7 +168,7 @@ export default {
       fields: {
         username: {
           label: this.$t('user_username'),
-          value: this.name,
+          modelValue: this.name,
           props: { id: 'username', disabled: true },
         },