#63 migrate to Vue 3

src/components/CheckBox.vue

@@ -46,6 +46,7 @@ export default {
       default: false
     }
   },
+  emits: ['click'],
   data () {
     return {
       checked: this.init

src/components/CsvJsonImport/DelimiterSelector/index.vue

@@ -16,13 +16,13 @@
           @click.stop
           :disabled="disabled"
         />
-        <div class="name">{{ getSymbolName(value) }}</div>
+        <div class="name">{{ getSymbolName(modelValue) }}</div>
       </div>
       <div class="controls" @click.stop>
-        <clear-icon @click.native="clear" :disabled="disabled"/>
+        <clear-icon @click="clear" :disabled="disabled"/>
         <drop-down-chevron
           :disabled="disabled"
-          @click.native="!disabled && (showOptions = !showOptions)"
+          @click="!disabled && (showOptions = !showOptions)"
         />
       </div>
     </div>
@@ -46,7 +46,7 @@ import ClearIcon from '@/components/svg/clear'
 
 export default {
   name: 'DelimiterSelector',
-  props: ['value', 'width', 'disabled'],
+  props: ['modelValue', 'width', 'disabled'],
   components: { DropDownChevron, ClearIcon },
   data () {
     return {
@@ -60,8 +60,8 @@ export default {
     inputValue () {
       if (this.inputValue) {
         this.filled = true
-        if (this.inputValue !== this.value) {
-          this.$emit('input', this.inputValue)
+        if (this.inputValue !== this.modelValue) {
+          this.$emit('update:modelValue', this.inputValue)
         }
       } else {
         this.filled = false
@@ -69,7 +69,7 @@ export default {
     }
   },
   created () {
-    this.inputValue = this.value
+    this.inputValue = this.modelValue
   },
   methods: {
     getSymbolName (str) {

src/components/CsvJsonImport/index.vue

@@ -1,9 +1,8 @@
 <template>
   <modal
-    :name="dialogName"
-    classes="dialog"
-    height="auto"
-    width="80%"
+    :modal-id="dialogName"
+    class="dialog"
+    content-class="import-modal"
     scrollable
     :clickToClose="false"
   >
@@ -130,6 +129,7 @@ export default {
     db: Object,
     dialogName: String
   },
+  emits: ['cancel', 'finish'],
   data () {
     return {
       disableDialog: false,
@@ -304,7 +304,7 @@ export default {
       let importLoadingIndicator = null
 
       const updateProgress = progress => {
-        this.$set(importMsg, 'progress', progress)
+        importMsg.progress = progress
       }
       const progressCounterId = this.db.createProgressCounter(updateProgress)
 
@@ -392,15 +392,17 @@ export default {
       events.send('inquiry.create', null, { auto: true })
     },
     getQueryExample () {
-      return this.isNdJson ? this.getNdJsonQueryExample()
-        : this.isJson ? this.getJsonQueryExample()
+      return this.isNdJson
+        ? this.getNdJsonQueryExample()
+        : this.isJson
+          ? this.getJsonQueryExample()
           : [
-            '/*',
+              '/*',
         ` * Your CSV file has been imported into ${this.addedTable} table.`,
         ' * You can run this SQL query to make all CSV records available for charting.',
         ' */',
         `SELECT * FROM "${this.addedTable}"`
-          ].join('\n')
+            ].join('\n')
     },
     getNdJsonQueryExample () {
       try {
@@ -455,6 +457,15 @@ export default {
 }
 </script>
 
+<style>
+.import-modal {
+  width: 80%;
+  max-width: 1152px;
+  margin: auto;
+  left: 0 !important;
+}
+</style>
+
 <style scoped>
 .dialog-body {
   padding-bottom: 0;
@@ -495,10 +506,4 @@ margin-bottom: 24px;
   align-items: center;
 }
 
-/* https://github.com/euvl/vue-js-modal/issues/623 */
->>> .vm--modal {
-  max-width: 1152px;
-  margin: auto;
-  left: 0 !important;
-}
 </style>

src/components/DbUploader.vue

@@ -78,6 +78,7 @@ export default {
       default: 'unset'
     }
   },
+  emits: [],
   components: {
     ChangeDbIcon,
     CsvJsonImport

src/components/IconButton.vue

@@ -23,6 +23,7 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 export default {
   name: 'SideBarButton',
   props: ['active', 'disabled', 'tooltip', 'tooltipPosition', 'loading'],
+  emits: ['click'],
   components: { LoadingIndicator },
   mixins: [tooltipMixin],
   methods: {
@@ -51,15 +52,15 @@ export default {
   border-radius: var(--border-radius-medium-2);
 }
 
-.icon-btn:hover .icon >>> path,
-.icon-btn.active .icon >>> path,
-.icon-btn:hover .icon >>> circle,
-.icon-btn.active .icon >>> circle {
+.icon-btn:hover .icon :deep(path),
+.icon-btn.active .icon :deep(path),
+.icon-btn:hover .icon :deep(circle),
+.icon-btn.active .icon :deep(circle) {
   fill: var(--color-accent);
 }
 
-.icon-btn:disabled  .icon >>> path,
-.icon-btn:disabled  .icon >>> circle {
+.icon-btn:disabled  .icon :deep(path),
+.icon-btn:disabled  .icon :deep(circle) {
   fill: var(--color-border);
 }
 
@@ -68,7 +69,7 @@ export default {
   pointer-events: none;
 }
 
-.disabled.icon-btn:hover .icon >>> path {
+.disabled.icon-btn:hover .icon :deep(path) {
   fill: var(--color-border);
 }
 

src/components/LoadingDialog.vue

@@ -1,8 +1,7 @@
 <template>
   <modal
-    :name="name"
-    classes="dialog"
-    height="auto"
+    :modal-id="name"
+    class="dialog"
     :clickToClose="false"
   >
     <div class="dialog-header">
@@ -52,6 +51,7 @@ export default {
     title: String,
     loading: Boolean
   },
+  emits: ['cancel', 'action'],
   watch: {
     loading () {
       if (this.loading) {

src/components/LoadingIndicator.vue

@@ -31,6 +31,7 @@ export default {
       default: 20
     }
   },
+  emits: [],
   computed: {
     circleProgress () {
       const circle = this.radius * 3.14 * 2

src/components/Logs.vue

@@ -16,6 +16,7 @@ import LoadingIndicator from '@/components/LoadingIndicator'
 export default {
   name: 'logs',
   props: ['messages'],
+  emits: [],
   components: { LoadingIndicator },
   watch: {
     'messages.length': 'scrollToBottom'

src/components/Splitpanes/index.vue

@@ -86,15 +86,18 @@ export default {
       }
     }
   },
+  emits: [],
   data () {
     return {
       container: null,
       paneBefore: this.before,
       paneAfter: this.after,
-      beforeMinimising: !this.after.size || !this.before.size ? this.default : {
-        before: this.before.size,
-        after: this.after.size
-      },
+      beforeMinimising: !this.after.size || !this.before.size
+        ? this.default
+        : {
+            before: this.before.size,
+            after: this.after.size
+          },
       dragging: false,
       movableSplitter: {
         top: 0,

src/components/SqlTable/Pager.vue

@@ -18,15 +18,16 @@
 </template>
 
 <script>
-import Paginate from 'vuejs-paginate'
+import Paginate from 'vuejs-paginate-next'
 
 export default {
   name: 'Pager',
   components: { Paginate },
-  props: ['pageCount', 'value'],
+  props: ['pageCount', 'modelValue'],
+  emits: ['update:modelValue'],
   data () {
     return {
-      page: this.value,
+      page: this.modelValue,
       chevron: `
         <svg width="9" height="9" viewBox="0 0 8 12" fill="none">
         <path
@@ -39,10 +40,10 @@ export default {
   },
   watch: {
     page () {
-      this.$emit('input', this.page)
+      this.$emit('update:modelValue', this.page)
     },
-    value () {
-      this.page = this.value
+    modelValue () {
+      this.page = this.modelValue
     }
   }
 }
@@ -54,48 +55,48 @@ export default {
   align-items: center;
   line-height: 10px;
 }
->>> .paginator-page-link {
+:deep(.paginator-page-link) {
   padding: 2px 3px;
   margin: 0 5px;
   display: block;
   color: var(--color-text-base);
   font-size: 11px;
 }
->>> .paginator-page-link:hover {
+:deep(.paginator-page-link:hover) {
   color: var(--color-text-active);
 }
->>> .paginator-page-link:active,
->>> .paginator-page-link:visited,
->>> .paginator-page-link:focus,
->>> .paginator-next:active,
->>> .paginator-next:visited,
->>> .paginator-next:focus,
->>> .paginator-prev:active,
->>> .paginator-prev:visited,
->>> .paginator-prev:focus {
+:deep(.paginator-page-link:active),
+:deep(.paginator-page-link:visited),
+:deep(.paginator-page-link:focus),
+:deep(.paginator-next:active),
+:deep(.paginator-next:visited),
+:deep(.paginator-next:focus),
+:deep(.paginator-prev:active),
+:deep(.paginator-prev:visited),
+:deep(.paginator-prev:focus) {
   outline: none;
 }
 
->>> .paginator-active-page,
->>> .paginator-active-page:hover {
+:deep(.paginator-active-page),
+:deep(.paginator-active-page:hover) {
   color: var(--color-accent);
 }
 
->>> .paginator-break:hover,
->>> .paginator-disabled:hover {
+:deep(.paginator-break:hover),
+:deep(.paginator-disabled:hover) {
   cursor: default;
 }
 
->>> .paginator-prev svg {
+:deep(.paginator-prev svg) {
   transform: rotate(180deg);
 }
 
->>> .paginator-next:hover path,
->>> .paginator-prev:hover path {
+:deep(.paginator-next:hover path),
+:deep(.paginator-prev:hover path) {
    fill: var(--color-text-active);
 }
->>> .paginator-disabled path,
->>> .paginator-disabled:hover path {
+:deep(.paginator-disabled path),
+:deep(.paginator-disabled:hover path) {
   fill: var(--color-text-light-2);
 }
 </style>

src/components/SqlTable/index.vue

@@ -87,6 +87,7 @@ export default {
     preview: Boolean,
     selectedCellCoordinates: Object
   },
+  emits: ['updateSelectedCell'],
   data () {
     return {
       header: null,
@@ -248,7 +249,7 @@ export default {
       }
     }
   },
-  beforeDestroy () {
+  beforeUnmount () {
     this.resizeObserver.unobserve(this.$refs.table)
   },
   watch: {

src/components/TextField.vue

@@ -9,9 +9,9 @@
       :placeholder="placeholder"
       :class="{ error: errorMsg }"
       :style="{ width: width }"
-      :value="value"
+      :value="modelValue"
       :disabled="disabled"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('update:modelValue', $event.target.value)"
     />
     <div v-show="errorMsg" class="text-field-error">{{ errorMsg }}</div>
   </div>
@@ -21,7 +21,16 @@
 import HintIcon from '@/components/svg/hint'
 export default {
   name: 'textField',
-  props: ['placeholder', 'label', 'errorMsg', 'value', 'width', 'hint', 'maxHintWidth', 'disabled'],
+  props: [
+    'placeholder',
+    'label',
+    'errorMsg',
+    'modelValue',
+    'width',
+    'hint',
+    'maxHintWidth',
+    'disabled'
+  ],
   components: { HintIcon }
 }
 </script>

src/components/svg/addTable.vue

@@ -46,6 +46,7 @@ export default {
   name: 'AddTableIcon',
   mixins: [tooltipMixin],
   props: ['tooltip'],
+  emits: ['click'],
   methods: {
     onClick () {
       this.hideTooltip()

src/components/svg/changeDb.vue

@@ -33,6 +33,7 @@ import tooltipMixin from '@/tooltipMixin'
 export default {
   name: 'changeDbIcon',
   mixins: [tooltipMixin],
+  emits: ['click'],
   methods: {
     onClick () {
       this.hideTooltip()

src/components/svg/close.vue

@@ -30,7 +30,8 @@ export default {
       required: false,
       default: false
     }
-  }
+  },
+  emits: ['click']
 }
 </script>
 

src/components/svg/export.vue

@@ -30,6 +30,7 @@ export default {
   name: 'ExportIcon',
   mixins: [tooltipMixin],
   props: ['tooltip', 'tooltipPosition'],
+  emits: ['click'],
   methods: {
     onClick () {
       this.hideTooltip()

src/components/svg/hint.vue

@@ -45,6 +45,7 @@ import tooltipMixin from '@/tooltipMixin'
 export default {
   name: 'HintIcon',
   props: ['hint', 'maxWidth'],
+  emits: ['click'],
   mixins: [tooltipMixin],
   methods: {
     onClick () {