refactor: ts and composition api for base components

src/renderer/components/BaseConfirmModal.vue

@@ -46,14 +46,12 @@
    </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineComponent, onBeforeUnmount } from 'vue';
+import { computed, onBeforeUnmount, PropType, useSlots } from 'vue';
 
-export default defineComponent({
+const props = defineProps({
-   name: 'BaseConfirmModal',
-   props: {
    size: {
-         type: String,
+      type: String as PropType<'small' | 'medium' | '400' | 'large'>,
       validator: (prop: string) => ['small', 'medium', '400', 'large'].includes(prop),
       default: 'small'
    },
@@ -63,9 +61,10 @@ export default defineComponent({
    },
    confirmText: String,
    cancelText: String
-   },
+});
-   emits: ['confirm', 'hide'],
+const emit = defineEmits(['confirm', 'hide']);
-   setup (props, { slots, emit }) {
+const slots = useSlots();
+
 const hasHeader = computed(() => !!slots.header);
 const hasBody = computed(() => !!slots.body);
 const hasDefault = computed(() => !!slots.default);
@@ -99,18 +98,6 @@ export default defineComponent({
 onBeforeUnmount(() => {
    window.removeEventListener('keydown', onKey);
 });
-
-      return {
-         hasHeader,
-         hasBody,
-         hasDefault,
-         modalSizeClass,
-         confirmModal,
-         hideModal,
-         onKey
-      };
-   }
-});
 </script>
 
 <style scoped>

src/renderer/components/BaseContextMenu.vue

@@ -15,37 +15,32 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed, onBeforeUnmount, onMounted, Ref, ref } from 'vue';
-   name: 'BaseContextMenu',
-   props: {
-      contextEvent: MouseEvent
-   },
-   emits: ['close-context'],
-   data () {
-      return {
-         contextSize: null,
-         isBottom: false
-      };
-   },
-   computed: {
-      position () {
-         let topCord = 0;
-         let leftCord = 0;
 
-         if (this.contextEvent) {
+const contextContent: Ref<HTMLDivElement> = ref(null);
-            const { clientY, clientX } = this.contextEvent;
+const contextSize: Ref<DOMRect> = ref(null);
+const isBottom: Ref<boolean> = ref(false);
+const props = defineProps<{contextEvent: MouseEvent}>();
+const emit = defineEmits(['close-context']);
+
+const position = computed(() => {
+   let topCord = '0px';
+   let leftCord = '0px';
+
+   if (props.contextEvent) {
+      const { clientY, clientX } = props.contextEvent;
       topCord = `${clientY + 2}px`;
       leftCord = `${clientX + 5}px`;
 
-            if (this.contextSize) {
+      if (contextSize.value) {
-               if (clientY + (this.contextSize.height < 200 ? 200 : this.contextSize.height) + 5 >= window.innerHeight) {
+         if (clientY + (contextSize.value.height < 200 ? 200 : contextSize.value.height) + 5 >= window.innerHeight) {
-                  topCord = `${clientY + 3 - this.contextSize.height}px`;
+            topCord = `${clientY + 3 - contextSize.value.height}px`;
-                  this.isBottom = true;
+            isBottom.value = true;
          }
 
-               if (clientX + this.contextSize.width + 5 >= window.innerWidth)
+         if (clientX + contextSize.value.width + 5 >= window.innerWidth)
-                  leftCord = `${clientX - this.contextSize.width}px`;
+            leftCord = `${clientX - contextSize.value.width}px`;
       }
    }
 
@@ -53,29 +48,27 @@ export default {
       top: topCord,
       left: leftCord
    };
-      }
+});
-   },
+
-   created () {
+const close = () => {
-      window.addEventListener('keydown', this.onKey);
+   emit('close-context');
-   },
+};
-   mounted () {
+const onKey = (e: KeyboardEvent) => {
-      if (this.$refs.contextContent)
-         this.contextSize = this.$refs.contextContent.getBoundingClientRect();
-   },
-   beforeUnmount () {
-      window.removeEventListener('keydown', this.onKey);
-   },
-   methods: {
-      close () {
-         this.$emit('close-context');
-      },
-      onKey (e) {
    e.stopPropagation();
    if (e.key === 'Escape')
-            this.close();
+      close();
-      }
-   }
 };
+
+window.addEventListener('keydown', onKey);
+
+onMounted(() => {
+   if (contextContent.value)
+      contextSize.value = contextContent.value.getBoundingClientRect();
+});
+
+onBeforeUnmount(() => {
+   window.removeEventListener('keydown', onKey);
+});
 </script>
 
 <style lang="scss">

src/renderer/components/BaseLoader.vue

@@ -4,11 +4,6 @@
    </div>
 </template>
 
-<script>
-export default {
-   name: 'BaseLoader'
-};
-</script>
 <style scoped>
 .empty {
   position: absolute;

src/renderer/components/BaseMap.vue

@@ -1,50 +1,61 @@
 <template>
    <div id="map" class="map" />
 </template>
-<script>
+
-import L from 'leaflet';
+<script setup lang="ts">
+import { onMounted, PropType, Ref, ref } from 'vue';
+import * as L from 'leaflet';
 import {
    point,
    lineString,
    polygon
 } from '@turf/helpers';
+import { GeoJsonObject } from 'geojson';
 import { getArrayDepth } from 'common/libs/getArrayDepth';
 
-export default {
+interface Coordinates { x: number; y: number }
-   name: 'BaseMap',
+
-   props: {
+const props = defineProps({
-      points: [Object, Array],
+   points: [Object, Array] as PropType<Coordinates | Coordinates[]>,
    isMultiSpatial: Boolean
-   },
+});
-   data () {
+const map: Ref<L.Map> = ref(null);
-      return {
+const markers: Ref<GeoJsonObject | GeoJsonObject[]> = ref(null);
-         map: null,
+const center: Ref<[number, number]> = ref(null);
-         markers: [],
+
-         center: null
+const getMarkers = (points: Coordinates) => {
+   if (Array.isArray(points)) {
+      if (getArrayDepth(points) === 1)
+         return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
+      else
+         return polygon(points.map(arr => arr.reduce((acc: Coordinates[], curr: Coordinates) => [...acc, [curr.x, curr.y]], [])));
+   }
+   else
+      return point([points.x, points.y]);
 };
-   },
+
-   mounted () {
+onMounted(() => {
-      if (this.isMultiSpatial) {
+   if (props.isMultiSpatial) {
-         for (const element of this.points)
+      for (const element of props.points as Coordinates[])
-            this.markers.push(this.getMarkers(element));
+         (markers.value as GeoJsonObject[]).push(getMarkers(element));
    }
    else {
-         this.markers = this.getMarkers(this.points);
+      markers.value = getMarkers(props.points as Coordinates);
 
-         if (!Array.isArray(this.points))
+      if (!Array.isArray(props.points))
-            this.center = [this.points.y, this.points.x];
+         center.value = [props.points.y, props.points.x];
    }
 
-      this.map = L.map('map', {
+   map.value = L.map('map', {
-         center: this.center || [0, 0],
+      center: center.value || [0, 0],
       zoom: 15,
       minZoom: 1,
       attributionControl: false
    });
 
-      L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(this.map);
+   L.control.attribution({ prefix: '<b>Leaflet</b>' }).addTo(map.value);
 
-      const geoJsonObj = L.geoJSON(this.markers, {
+   const geoJsonObj = L.geoJSON((markers.value as GeoJsonObject), {
       style: function () {
          return {
             weight: 2,
@@ -64,32 +75,19 @@ export default {
             fillOpacity: 0.4
          });
       }
-      }).addTo(this.map);
+   }).addTo(map.value);
 
    const southWest = L.latLng(-90, -180);
    const northEast = L.latLng(90, 180);
    const bounds = L.latLngBounds(southWest, northEast);
-      this.map.setMaxBounds(bounds);
+   map.value.setMaxBounds(bounds);
 
-      if (!this.center) this.map.fitBounds(geoJsonObj.getBounds());
+   if (!center.value) map.value.fitBounds(geoJsonObj.getBounds());
 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <b>OpenStreetMap</b>'
-      }).addTo(this.map);
+   }).addTo(map.value);
-   },
+});
-   methods: {
-      getMarkers (points) {
-         if (Array.isArray(points)) {
-            if (getArrayDepth(points) === 1)
-               return lineString(points.reduce((acc, curr) => [...acc, [curr.x, curr.y]], []));
-            else
-               return polygon(points.map(arr => arr.reduce((acc, curr) => [...acc, [curr.x, curr.y]], [])));
-         }
-         else
-            return point([points.x, points.y]);
-      }
-   }
-};
 </script>
 
 <style lang="scss">

src/renderer/components/BaseNotification.vue

@@ -14,10 +14,10 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed, ref } from 'vue';
-   name: 'BaseNotification',
+
-   props: {
+const props = defineProps({
    message: {
       type: String,
       default: ''
@@ -26,18 +26,14 @@ export default {
       type: String,
       default: ''
    }
-   },
+});
-   emits: ['close'],
+const isExpanded = ref(false);
-   data () {
+const emit = defineEmits(['close']);
-      return {
+
-         isExpanded: false
+const notificationStatus = computed(() => {
-      };
-   },
-   computed: {
-      notificationStatus () {
    let className = '';
    let iconName = '';
-         switch (this.status) {
+   switch (props.status) {
       case 'success':
          className = 'toast-success';
          iconName = 'mdi-check';
@@ -57,21 +53,19 @@ export default {
    }
 
    return { className, iconName };
-      },
+});
-      isExpandable () {
+
-         return this.message.length > 80;
+const isExpandable = computed(() => props.message.length > 80);
-      }
+
-   },
+const hideToast = () => {
-   methods: {
+   emit('close');
-      hideToast () {
+};
-         this.$emit('close');
+
-      },
+const toggleExpand = () => {
-      toggleExpand () {
+   isExpanded.value = !isExpanded.value;
-         this.isExpanded = !this.isExpanded;
-      }
-   }
 };
 </script>
+
 <style scoped>
   .toast {
     display: flex;

src/renderer/components/BaseTextEditor.vue

@@ -9,16 +9,15 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
 import * as ace from 'ace-builds';
-import { storeToRefs } from 'pinia';
 import 'ace-builds/webpack-resolver';
+import { storeToRefs } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { uidGen } from 'common/libs/uidGen';
 
-export default {
+const props = defineProps({
-   name: 'BaseTextEditor',
-   props: {
    modelValue: String,
    mode: { type: String, default: 'text' },
    editorClass: { type: String, default: '' },
@@ -26,10 +25,10 @@ export default {
    readOnly: { type: Boolean, default: false },
    showLineNumbers: { type: Boolean, default: true },
    height: { type: Number, default: 200 }
-   },
+});
-   emits: ['update:modelValue'],
+const emit = defineEmits(['update:modelValue']);
-   setup () {
 const settingsStore = useSettingsStore();
+const mode = ref(props.mode);
 
 const {
    editorTheme,
@@ -38,92 +37,84 @@ export default {
    lineWrap
 } = storeToRefs(settingsStore);
 
-      return {
+let editor: ace.Ace.Editor;
-         editorTheme,
+const id = uidGen();
-         editorFontSize,
+
-         autoComplete,
+watch(mode, () => {
-         lineWrap
+   if (editor)
-      };
+      editor.session.setMode(`ace/mode/${props.mode}`);
-   },
+});
-   data () {
+
-      return {
+watch(editorTheme, () => {
-         editor: null,
+   if (editor)
-         id: uidGen()
+      editor.setTheme(`ace/theme/${editorTheme.value}`);
-      };
+});
-   },
+
-   watch: {
+watch(editorFontSize, () => {
-      mode () {
-         if (this.editor)
-            this.editor.session.setMode(`ace/mode/${this.mode}`);
-      },
-      editorTheme () {
-         if (this.editor)
-            this.editor.setTheme(`ace/theme/${this.editorTheme}`);
-      },
-      editorFontSize () {
    const sizes = {
-            small: '12px',
+      small: 12,
-            medium: '14px',
+      medium: 14,
-            large: '16px'
+      large: 16
    };
 
-         if (this.editor) {
+   if (editor) {
-            this.editor.setOptions({
+      editor.setOptions({
-               fontSize: sizes[this.editorFontSize]
+         fontSize: sizes[editorFontSize.value as undefined as 'small' | 'medium' | 'large']
       });
    }
-      },
-      autoComplete () {
-         if (this.editor) {
-            this.editor.setOptions({
-               enableLiveAutocompletion: this.autoComplete
-            });
-         }
-      },
-      lineWrap () {
-         if (this.editor) {
-            this.editor.setOptions({
-               wrap: this.lineWrap
-            });
-         }
-      }
-   },
-   mounted () {
-      this.editor = ace.edit(`editor-${this.id}`, {
-         mode: `ace/mode/${this.mode}`,
-         theme: `ace/theme/${this.editorTheme}`,
-         value: this.modelValue || '',
-         fontSize: '14px',
-         printMargin: false,
-         readOnly: this.readOnly,
-         showLineNumbers: this.showLineNumbers,
-         showGutter: this.showLineNumbers
 });
 
-      this.editor.setOptions({
+watch(autoComplete, () => {
+   if (editor) {
+      editor.setOptions({
+         enableLiveAutocompletion: autoComplete.value
+      });
+   }
+});
+
+watch(lineWrap, () => {
+   if (editor) {
+      editor.setOptions({
+         wrap: lineWrap.value
+      });
+   }
+});
+
+onMounted(() => {
+   editor = ace.edit(`editor-${id}`, {
+      mode: `ace/mode/${mode.value}`,
+      theme: `ace/theme/${editorTheme.value}`,
+      value: props.modelValue || '',
+      fontSize: 14,
+      printMargin: false,
+      readOnly: props.readOnly,
+      showLineNumbers: props.showLineNumbers,
+      showGutter: props.showLineNumbers
+   });
+
+   editor.setOptions({
       enableBasicAutocompletion: false,
-         wrap: this.lineWrap,
+      wrap: lineWrap,
       enableSnippets: false,
       enableLiveAutocompletion: false
    });
 
-      this.editor.session.on('change', () => {
+   editor.session.on('changeFold', () => {
-         const content = this.editor.getValue();
+      const content = editor.getValue();
-         this.$emit('update:modelValue', content);
+      emit('update:modelValue', content);
    });
 
-      if (this.autoFocus) {
+   if (props.autoFocus) {
       setTimeout(() => {
-            this.editor.focus();
+         editor.focus();
-            this.editor.resize();
+         editor.resize();
       }, 20);
    }
 
    setTimeout(() => {
-         this.editor.resize();
+      editor.resize();
    }, 20);
-   }
+});
-};
 </script>
 
 <style lang="scss" scoped>

src/renderer/components/BaseToast.vue

@@ -9,10 +9,11 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed } from '@vue/reactivity';
-   name: 'BaseToast',
+import { ref, watch } from 'vue';
-   props: {
+
+const props = defineProps({
    message: {
       type: String,
       default: ''
@@ -21,18 +22,17 @@ export default {
       type: String,
       default: ''
    }
-   },
+});
-   emits: ['close'],
+
-   data () {
+const isVisible = ref(false);
-      return {
+const message = ref(props.message);
-         isVisible: false
+
-      };
+const emit = defineEmits(['close']);
-   },
+
-   computed: {
+const toastStatus = computed(() => {
-      toastStatus () {
    let className = '';
    let iconName = '';
-         switch (this.status) {
+   switch (props.status) {
       case 'success':
          className = 'toast-success';
          iconName = 'mdi-check';
@@ -52,24 +52,21 @@ export default {
    }
 
    return { className, iconName };
-      }
+});
-   },
+
-   watch: {
+watch(message, () => {
-      message: function () {
+   if (message.value)
-         if (this.message)
+      isVisible.value = true;
-            this.isVisible = true;
    else
-            this.isVisible = false;
+      isVisible.value = false;
-      }
+});
-   },
+
-   methods: {
+const hideToast = () => {
-      hideToast () {
+   isVisible.value = false;
-         this.isVisible = false;
+   emit('close');
-         this.$emit('close');
-      }
-   }
 };
 </script>
+
 <style scoped>
   .toast {
     display: flex;

src/renderer/components/BaseUploadInput.vue

@@ -7,7 +7,7 @@
          {{ lastPart(modelValue) }}
       </span>
       <i
-         v-if="modelValue.length"
+         v-if="modelValue"
          class="file-uploader-reset mdi mdi-close"
          @click.prevent="clear"
       />
@@ -22,10 +22,10 @@
    </label>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { uidGen } from 'common/libs/uidGen';
-   name: 'BaseUploadInput',
+
-   props: {
+defineProps({
    message: {
       default: 'Browse',
       type: String
@@ -34,29 +34,23 @@ export default {
       default: '',
       type: String
    }
-   },
+});
-   emits: ['change', 'clear'],
+
-   data () {
+const emit = defineEmits(['change', 'clear']);
-      return {
+
-         id: null
+const id = uidGen();
+
+const clear = () => {
+   emit('clear');
 };
-   },
+
-   mounted () {
+const lastPart = (string: string) => {
-      this.id = this._uid;
-   },
-   methods: {
-      clear () {
-         this.$emit('clear');
-      },
-      lastPart (string) {
    if (!string) return '';
 
    string = string.split(/[/\\]+/).pop();
    if (string.length >= 19)
       string = `...${string.slice(-19)}`;
    return string;
-      }
-   }
 };
 </script>
 

src/renderer/components/BaseVirtualScroll.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="vscroll-holder">
+   <div ref="root" class="vscroll-holder">
       <div
          class="vscroll-spacer"
          :style="{
@@ -20,10 +20,10 @@
    </div>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
-   name: 'BaseVirtualScroll',
+
-   props: {
+const props = defineProps({
    items: Array,
    itemHeight: Number,
    visibleHeight: Number,
@@ -31,60 +31,66 @@ export default {
       type: HTMLDivElement,
       default: null
    }
-   },
+});
-   data () {
-      return {
-         topHeight: 0,
-         bottomHeight: 0,
-         visibleItems: [],
-         renderTimeout: null,
-         localScrollElement: null
-      };
-   },
-   watch: {
-      scrollElement () {
-         this.setScrollElement();
-      }
-   },
-   mounted () {
-      this.setScrollElement();
-   },
-   beforeUnmount () {
-      this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
-   },
-   methods: {
-      checkScrollPosition (e) {
-         clearTimeout(this.renderTimeout);
 
-         this.renderTimeout = setTimeout(() => {
+const root = ref(null);
-            this.updateWindow(e);
+const topHeight: Ref<number> = ref(0);
+const bottomHeight: Ref<number> = ref(0);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const visibleItems: Ref<any[]> = ref([]);
+const renderTimeout: Ref<NodeJS.Timeout> = ref(null);
+const localScrollElement: Ref<HTMLDivElement> = ref(null);
+const scrollElement = ref(props.scrollElement);
+
+const checkScrollPosition = () => {
+   clearTimeout(renderTimeout.value);
+
+   renderTimeout.value = setTimeout(() => {
+      updateWindow();
    }, 200);
-      },
+};
-      updateWindow () {
+
-         const visibleItemsCount = Math.ceil(this.visibleHeight / this.itemHeight);
+const updateWindow = () => {
-         const totalScrollHeight = this.items.length * this.itemHeight;
+   const visibleItemsCount = Math.ceil(props.visibleHeight / props.itemHeight);
+   const totalScrollHeight = props.items.length * props.itemHeight;
    const offset = 50;
 
-         const scrollTop = this.localScrollElement.scrollTop;
+   const scrollTop = localScrollElement.value.scrollTop;
 
-         const firstVisibleIndex = Math.floor(scrollTop / this.itemHeight);
+   const firstVisibleIndex = Math.floor(scrollTop / props.itemHeight);
    const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
    const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);
    const lastCutIndex = lastVisibleIndex + offset;
 
-         this.visibleItems = this.items.slice(firstCutIndex, lastCutIndex);
+   visibleItems.value = props.items.slice(firstCutIndex, lastCutIndex);
 
-         this.topHeight = firstCutIndex * this.itemHeight;
+   topHeight.value = firstCutIndex * props.itemHeight;
-         this.bottomHeight = totalScrollHeight - this.visibleItems.length * this.itemHeight - this.topHeight;
+   bottomHeight.value = totalScrollHeight - visibleItems.value.length * props.itemHeight - topHeight.value;
-      },
-      setScrollElement () {
-         if (this.localScrollElement)
-            this.localScrollElement.removeEventListener('scroll', this.checkScrollPosition);
-
-         this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
-         this.updateWindow();
-         this.localScrollElement.addEventListener('scroll', this.checkScrollPosition);
-      }
-   }
 };
+
+const setScrollElement = () => {
+   if (localScrollElement.value)
+      localScrollElement.value.removeEventListener('scroll', checkScrollPosition);
+
+   localScrollElement.value = scrollElement.value ? scrollElement.value : root.value;
+   updateWindow();
+   localScrollElement.value.addEventListener('scroll', checkScrollPosition);
+};
+
+watch(scrollElement, () => {
+   setScrollElement();
+});
+
+onMounted(() => {
+   setScrollElement();
+});
+
+onBeforeUnmount(() => {
+   localScrollElement.value.removeEventListener('scroll', checkScrollPosition);
+});
+
+defineExpose({
+   updateWindow
+});
+
 </script>

src/renderer/components/FakerSelect.vue

@@ -52,7 +52,7 @@
       >
       <BaseUploadInput
          v-else-if="inputProps().type === 'file'"
-         :value="selectedValue"
+         :model-value="selectedValue"
          :message="$t('word.browse')"
          @clear="clearValue"
          @change="filesChange($event)"

src/renderer/components/ModalProcessesList.vue

@@ -134,7 +134,7 @@
 </template>
 
 <script>
-import arrayToFile from '../libs/arrayToFile';
+import { arrayToFile } from '../libs/arrayToFile';
 import { useNotificationsStore } from '@/stores/notifications';
 import Schema from '@/ipc-api/Schema';
 import { useConnectionsStore } from '@/stores/connections';

src/renderer/components/ModalSettings.vue

@@ -328,7 +328,7 @@ import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import localesNames from '@/i18n/supported-locales';
+import { localesNames } from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
 import BaseTextEditor from '@/components/BaseTextEditor';

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -96,7 +96,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="connection.databasePath"
+                              :model-value="connection.databasePath"
                               :message="$t('word.browse')"
                               @clear="pathClear('databasePath')"
                               @change="pathSelection($event, 'databasePath')"
@@ -211,7 +211,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="connection.key"
+                              :model-value="connection.key"
                               :message="$t('word.browse')"
                               @clear="pathClear('key')"
                               @change="pathSelection($event, 'key')"
@@ -224,7 +224,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="connection.cert"
+                              :model-value="connection.cert"
                               :message="$t('word.browse')"
                               @clear="pathClear('cert')"
                               @change="pathSelection($event, 'cert')"
@@ -237,7 +237,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="connection.ca"
+                              :model-value="connection.ca"
                               :message="$t('word.browse')"
                               @clear="pathClear('ca')"
                               @change="pathSelection($event, 'ca')"
@@ -342,7 +342,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="connection.sshKey"
+                              :model-value="connection.sshKey"
                               :message="$t('word.browse')"
                               @clear="pathClear('sshKey')"
                               @change="pathSelection($event, 'sshKey')"

src/renderer/components/WorkspaceEditConnectionPanel.vue

@@ -92,7 +92,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="localConnection.databasePath"
+                              :model-value="localConnection.databasePath"
                               :message="$t('word.browse')"
                               @clear="pathClear('databasePath')"
                               @change="pathSelection($event, 'databasePath')"
@@ -207,7 +207,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="localConnection.key"
+                              :model-value="localConnection.key"
                               :message="$t('word.browse')"
                               @clear="pathClear('key')"
                               @change="pathSelection($event, 'key')"
@@ -220,7 +220,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="localConnection.cert"
+                              :model-value="localConnection.cert"
                               :message="$t('word.browse')"
                               @clear="pathClear('cert')"
                               @change="pathSelection($event, 'cert')"
@@ -233,7 +233,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="localConnection.ca"
+                              :model-value="localConnection.ca"
                               :message="$t('word.browse')"
                               @clear="pathClear('ca')"
                               @change="pathSelection($event, 'ca')"
@@ -330,7 +330,7 @@
                         </div>
                         <div class="column col-8 col-sm-12">
                            <BaseUploadInput
-                              :value="localConnection.sshKey"
+                              :model-value="localConnection.sshKey"
                               :message="$t('word.browse')"
                               @clear="pathClear('sshKey')"
                               @change="pathSelection($event, 'sshKey')"

src/renderer/components/WorkspaceTabPropsTableRow.vue

@@ -90,7 +90,7 @@
          </label>
       </div>
       <div class="td p-0 type-int" tabindex="0">
-         <template v-if="fieldType.length">
+         <template v-if="fieldType?.length">
             <span
                v-if="!isInlineEditor.length"
                class="cell-content"
@@ -355,7 +355,7 @@ export default {
    },
    props: {
       row: Object,
-      dataTypes: Array,
+      dataTypes: { type: Array, default: () => [] },
       indexes: Array,
       foreigns: Array,
       customizations: Object

src/renderer/components/WorkspaceTabQueryTable.vue

@@ -112,7 +112,7 @@ import { uidGen } from 'common/libs/uidGen';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkspacesStore } from '@/stores/workspaces';
-import arrayToFile from '../libs/arrayToFile';
+import { arrayToFile } from '../libs/arrayToFile';
 import { TEXT, LONG_TEXT, BLOB } from 'common/fieldTypes';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
 import WorkspaceTabQueryTableRow from '@/components/WorkspaceTabQueryTableRow';

src/renderer/i18n/supported-locales.ts

@@ -1,4 +1,4 @@
-export default {
+export const localesNames = {
    'en-US': 'English',
    'it-IT': 'Italiano',
    'ar-SA': 'العربية',

src/renderer/index.ts

@@ -29,7 +29,7 @@ createApp(App)
    .mount('#app');
 
 const { locale } = useSettingsStore();
-i18n.global.locale = locale;
+i18n.global.locale = locale as string;// TODO: temp
 
 // IPC exceptions
 ipcRenderer.on('unhandled-exception', (event, error) => {
@@ -59,7 +59,7 @@ ipcRenderer.on('no-auto-update', () => {
 
 ipcRenderer.on('download-progress', (event, data) => {
    useApplicationStore().updateStatus = 'downloading';
-   useApplicationStore().downloadprogress = data.percent;
+   useApplicationStore().downloadProgress = data.percent;
 });
 
 ipcRenderer.on('update-downloaded', () => {

src/renderer/stores/workspaces.js

@@ -4,6 +4,9 @@ import Connection from '@/ipc-api/Connection';
 import Schema from '@/ipc-api/Schema';
 import Users from '@/ipc-api/Users';
 import { uidGen } from 'common/libs/uidGen';
+
+import customizations from 'common/customizations';
+
 import { useConnectionsStore } from '@/stores/connections';
 import { useNotificationsStore } from '@/stores/notifications';
 import { useSettingsStore } from '@/stores/settings';
@@ -22,14 +25,14 @@ export const useWorkspacesStore = defineStore('workspaces', {
          if (state.selectedWorkspace) return state.selectedWorkspace;
          return state.workspaces[0].uid;
       },
-      getWorkspace: state => uid => {
+      getWorkspace: state => (uid) => {
          return state.workspaces.find(workspace => workspace.uid === uid);
       },
       getDatabaseVariable: state => (uid, name) => {
          return state.workspaces.find(workspace => workspace.uid === uid).variables.find(variable => variable.name === name);
       },
       getWorkspaceTab (state) {
-         return tUid => {
+         return (tUid) => {
             if (!this.getSelected) return;
             const workspace = state.workspaces.find(workspace => workspace.uid === this.getSelected);
             if ('tabs' in workspace)
@@ -89,24 +92,24 @@ export const useWorkspacesStore = defineStore('workspaces', {
             else {
                let dataTypes = [];
                let indexTypes = [];
-               let customizations = {};
+               let clientCustomizations;
 
                switch (connection.client) {
                   case 'mysql':
                   case 'maria':
-                     dataTypes = require('common/data-types/mysql');
+                     dataTypes = require('common/data-types/mysql').default;
-                     indexTypes = require('common/index-types/mysql');
+                     indexTypes = require('common/index-types/mysql').default;
-                     customizations = require('common/customizations/mysql');
+                     clientCustomizations = customizations.mysql;
                      break;
                   case 'pg':
-                     dataTypes = require('common/data-types/postgresql');
+                     dataTypes = require('common/data-types/postgresql').default;
-                     indexTypes = require('common/index-types/postgresql');
+                     indexTypes = require('common/index-types/postgresql').default;
-                     customizations = require('common/customizations/postgresql');
+                     clientCustomizations = customizations.pg;
                      break;
                   case 'sqlite':
-                     dataTypes = require('common/data-types/sqlite');
+                     dataTypes = require('common/data-types/sqlite').default;
-                     indexTypes = require('common/index-types/sqlite');
+                     indexTypes = require('common/index-types/sqlite').default;
-                     customizations = require('common/customizations/sqlite');
+                     clientCustomizations = customizations.sqlite;
                      break;
                }
 
@@ -144,7 +147,7 @@ export const useWorkspacesStore = defineStore('workspaces', {
                      client: connection.client,
                      dataTypes,
                      indexTypes,
-                     customizations,
+                     customizations: clientCustomizations,
                      structure: response,
                      connectionStatus: 'connected',
                      tabs: cachedTabs,

src/renderer/untyped.d.ts

@@ -0,0 +1,2 @@
+declare module '@/App.vue';
+declare module 'v-mask';