refactor: v-model on custom components

src/renderer/components/FakerSelect.vue

@@ -129,7 +129,7 @@ export default {
       fieldLength: Number,
       fieldObj: Object
    },
-   emits: ['update:value'],
+   emits: ['update:modelValue'],
    data () {
       return {
          localType: null,
@@ -245,7 +245,7 @@ export default {
          this.selectedValue = '';
       },
       onChange () {
-         this.$emit('update:value', {
+         this.$emit('update:modelValue', {
             group: this.selectedGroup,
             method: this.selectedMethod,
             params: this.methodParams,

src/renderer/components/ForeignKeySelect.vue

@@ -27,14 +27,14 @@ import { TEXT, LONG_TEXT } from 'common/fieldTypes';
 export default {
    name: 'ForeignKeySelect',
    props: {
-      value: [String, Number],
+      modelValue: [String, Number],
       keyUsage: Object,
       size: {
          type: String,
          default: ''
       }
    },
-   emits: ['update:value', 'blur'],
+   emits: ['update:modelValue', 'blur'],
    data () {
       return {
          foreignList: []
@@ -46,7 +46,7 @@ export default {
       }),
       isValidDefault () {
          if (!this.foreignList.length) return true;
-         if (this.value === null) return false;
+         if (this.modelValue === null) return false;
          return this.foreignList.some(foreign => foreign.foreign_column.toString() === this.value.toString());
       }
    },
@@ -92,7 +92,7 @@ export default {
          addNotification: 'notifications/addNotification'
       }),
       onChange () {
-         this.$emit('update:value', this.$refs.editField.value);
+         this.$emit('update:modelValue', this.$refs.editField.value);
       },
       cutText (val) {
          if (typeof val !== 'string') return val;

src/renderer/components/ModalFakerRows.vue

@@ -340,8 +340,8 @@ export default {
       },
       fieldLength (field) {
          if ([...BLOB, ...LONG_TEXT].includes(field.type)) return null;
-         else if (TEXT.includes(field.type)) return field.charLength;
-         return field.length;
+         else if (TEXT.includes(field.type)) return Number(field.charLength);
+         return Number(field.length);
       },
       toggleFields (event, field) {
          if (event.target.checked)

src/renderer/components/ModalSettings.vue

@@ -273,7 +273,7 @@
                         </div>
                         <div class="column col-12">
                            <BaseTextEditor
-                              :value="exampleQuery"
+                              :model-value="exampleQuery"
                               mode="sql"
                               :workspace="workspace"
                               :read-only="true"
@@ -316,12 +316,12 @@
 </template>
 
 <script>
+import { shell } from 'electron';
 import { mapActions, mapGetters } from 'vuex';
 import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
 import BaseTextEditor from '@/components/BaseTextEditor';
-const { shell } = require('electron');
 
 export default {
    name: 'ModalSettings',

src/renderer/components/QueryEditor.vue

@@ -18,7 +18,7 @@ import Tables from '@/ipc-api/Tables';
 export default {
    name: 'QueryEditor',
    props: {
-      value: String,
+      modelValue: String,
       workspace: Object,
       isSelected: Boolean,
       schema: { type: String, default: '' },
@@ -26,7 +26,7 @@ export default {
       readOnly: { type: Boolean, default: false },
       height: { type: Number, default: 200 }
    },
-   emits: ['update:value'],
+   emits: ['update:modelValue'],
    data () {
       return {
          editor: null,
@@ -132,7 +132,7 @@ export default {
          return this.editor.session.doc.positionToIndex(this.editor.getCursorPosition());
       },
       lastWord () {
-         const charsBefore = this.value.slice(0, this.cursorPosition);
+         const charsBefore = this.modelValue.slice(0, this.cursorPosition);
          const words = charsBefore.replaceAll('\n', ' ').split(' ').filter(Boolean);
          return words.pop();
       },
@@ -213,7 +213,7 @@ export default {
       this.editor = ace.edit(`editor-${this.id}`, {
          mode: `ace/mode/${this.mode}`,
          theme: `ace/theme/${this.editorTheme}`,
-         value: this.value,
+         value: this.modelValue,
          fontSize: '14px',
          printMargin: false,
          readOnly: this.readOnly
@@ -264,7 +264,7 @@ export default {
 
       this.editor.session.on('change', () => {
          const content = this.editor.getValue();
-         this.$emit('update:value', content);
+         this.$emit('update:modelValue', content);
       });
 
       this.editor.on('guttermousedown', e => {