migration: vue3 COMPONENT_V_MODEL

app/src/components/AdressInputSelect.vue

@@ -2,24 +2,24 @@
   <BInputGroup v-bind="$attrs">
     <InputItem
       :id="id"
-      :value="value.localPart"
+      :modelValue="modelValue.localPart"
       :placeholder="placeholder"
       :state="state"
       :aria-describedby="id + 'local-part-desc'"
-      @input="onInput('localPart', $event)"
+      @update:modelValue="onInput('localPart', $event)"
       @blur="$parent.$emit('touch')"
     />
 
     <BInputGroupAppend>
-      <BInputGroupText>{{ value.separator }}</BInputGroupText>
+      <BInputGroupText>{{ modelValue.separator }}</BInputGroupText>
     </BInputGroupAppend>
 
     <BInputGroupAppend>
       <SelectItem
-        :value="value.domain"
+        :modelValue="modelValue.domain"
         :choices="choices"
         :aria-describedby="id + 'domain-desc'"
-        @input="onInput('domain', $event)"
+        @update:modelValue="onInput('domain', $event)"
         @blur="$parent.$emit('touch')"
       />
     </BInputGroupAppend>
@@ -45,8 +45,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    // `value` is actually passed thru the `v-model` directive
+    modelValue: { type: Object, required: true },
-    value: { type: Object, required: true },
     choices: { type: Array, required: true },
     placeholder: { type: String, default: null },
     id: { type: String, default: null },
@@ -55,10 +54,10 @@ export default {
   },
 
   methods: {
-    onInput(key, value) {
+    onInput(key, modelValue) {
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
-        ...this.value,
+        ...this.modelValue,
-        [key]: value,
+        [key]: modelValue,
       })
     },
   },

app/src/components/globals/FormField.vue

@@ -14,7 +14,8 @@
         v-bind="props"
         :is="component"
         v-on="$listeners"
-        :value="value"
+        :modelValue="modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
         :state="state"
         :required="validation ? 'required' in validation : false"
       />
@@ -62,7 +63,7 @@ export default {
     link: { type: Object, default: null },
     // Rendered field component props
     component: { type: String, default: 'InputItem' },
-    value: { type: null, default: null },
+    modelValue: { type: null, default: null },
     props: { type: Object, default: () => ({}) },
     validation: { type: Object, default: null },
     validationIndex: { type: Number, default: null },

app/src/components/globals/formItems/CheckboxItem.vue

@@ -1,12 +1,14 @@
 <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
-    v-model="checked"
+    :checked="modelValue"
+    @input="$emit('update:modelValue', $event)"
     v-on="$listeners"
     :id="id"
     :aria-describedby="$parent.id + '__BV_description_'"
     switch
   >
-    {{ label || $t(labels[checked]) }}
+    {{ label || $t(labels[modelValue]) }}
   </BFormCheckbox>
 </template>
 
@@ -16,16 +18,10 @@ export default {
   name: 'CheckboxItem',
 
   props: {
-    value: { type: Boolean, required: true },
+    modelValue: { type: Boolean, required: true },
     id: { type: String, default: null },
     label: { type: String, default: null },
     labels: { type: Object, default: () => ({ true: 'yes', false: 'no' }) },
   },
-
-  data() {
-    return {
-      checked: this.value,
-    }
-  },
 }
 </script>

app/src/components/globals/formItems/FileItem.vue

@@ -1,7 +1,7 @@
 <template>
   <BButtonGroup class="w-100">
     <BButton
-      v-if="!this.required && this.value.file !== null"
+      v-if="!this.required && this.modelValue.file !== null"
       @click="clearFiles"
       variant="danger"
     >
@@ -10,7 +10,7 @@
     </BButton>
 
     <BFormFile
-      :value="value.file"
+      :modelValue="modelValue.file"
       ref="input-file"
       :id="id"
       :required="required"
@@ -35,7 +35,7 @@ export default {
 
   props: {
     id: { type: String, default: null },
-    value: { type: Object, default: () => ({ file: null }) },
+    modelValue: { type: Object, default: () => ({ file: null }) },
     placeholder: { type: String, default: 'Choose a file or drop it here...' },
     dropPlaceholder: { type: String, default: null },
     accept: { type: String, default: null },
@@ -46,7 +46,9 @@ export default {
 
   computed: {
     _placeholder: function () {
-      return this.value.file === null ? this.placeholder : this.value.file.name
+      return this.modelValue.file === null
+        ? this.placeholder
+        : this.modelValue.file.name
     },
   },
 
@@ -59,17 +61,17 @@ export default {
         removed: false,
       }
       // Update the value with the new File and an empty content for now
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
 
       // Asynchronously load the File content and update the value again
       getFileContent(file).then((content) => {
-        this.$emit('input', { ...value, content })
+        this.$emit('update:modelValue', { ...value, content })
       })
     },
 
     clearFiles() {
       this.$refs['input-file'].reset()
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
         file: null,
         content: '',
         current: false,

app/src/components/globals/formItems/InputItem.vue

@@ -1,6 +1,7 @@
 <template>
   <BFormInput
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :type="type"
@@ -22,7 +23,7 @@ export default {
   name: 'InputItem',
 
   props: {
-    value: { type: [String, Number], default: null },
+    modelValue: { type: [String, Number], default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },

app/src/components/globals/formItems/SelectItem.vue

@@ -1,11 +1,12 @@
 <template>
   <BFormSelect
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :options="choices"
     :required="required"
     v-on="$listeners"
-    @blur.native="$emit('blur', value)"
+    @blur.native="$emit('blur', modelValue)"
   />
 </template>
 
@@ -15,7 +16,7 @@ export default {
   name: 'SelectItem',
 
   props: {
-    value: { type: [String, null], default: null },
+    modelValue: { type: [String, null], default: null },
     id: { type: String, default: null },
     choices: { type: [Array, Object], required: true },
     required: { type: Boolean, default: false },

app/src/components/globals/formItems/TagsItem.vue

@@ -1,6 +1,7 @@
 <template>
   <BFormTags
-    v-model="tags"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -19,13 +20,8 @@ export default {
   compatConfig: { MODE: 3 },
   name: 'TagsItem',
 
-  data() {
-    return {
-      tags: this.value,
-    }
-  },
   props: {
-    value: { type: Array, default: null },
+    modelValue: { type: Array, default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     limit: { type: Number, default: null },

app/src/components/globals/formItems/TagsSelectizeItem.vue

@@ -3,7 +3,8 @@
     <BFormTags
       v-bind="$attrs"
       v-on="$listeners"
-      :value="value"
+      :modelValue="modelValue"
+      @update:modelValue="$emit('update:modelValue', $event)"
       :id="id"
       size="lg"
       class="p-0 border-0"
@@ -99,7 +100,7 @@ export default {
   inheritAttrs: false,
 
   props: {
-    value: { type: Array, required: true },
+    modelValue: { type: Array, required: true },
     options: { type: Array, required: true },
     id: { type: String, required: true },
     placeholder: { type: String, default: null },
@@ -129,7 +130,8 @@ export default {
       const criteria = this.criteria
       const options = this.options.filter((opt) => {
         return (
-          this.value.indexOf(opt) === -1 && !this.disabledItems.includes(opt)
+          this.modelValue.indexOf(opt) === -1 &&
+          !this.disabledItems.includes(opt)
         )
       })
       if (criteria) {

app/src/components/globals/formItems/TextAreaItem.vue

@@ -1,6 +1,7 @@
 <template>
   <BFormTextarea
-    :value="value"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
     :id="id"
     :placeholder="placeholder"
     :required="required"
@@ -17,7 +18,7 @@ export default {
   name: 'TextAreaItem',
 
   props: {
-    value: { type: String, default: null },
+    modelValue: { type: String, default: null },
     id: { type: String, default: null },
     placeholder: { type: String, default: null },
     type: { type: String, default: 'text' },