migration(vue3): COMPONENT_V_MODEL

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) })
           "

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

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)"
     />

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"

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>

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,

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 },
         },