codemirror wrapped as a vue component

src/components/SqlEditor.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="codemirror-container">
+    <codemirror v-model="query" :options="cmOptions" @changes="onCmChange" />
+  </div>
+</template>
+
+<script>
+import CM from 'codemirror'
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/theme/neo.css'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/sql-hint.js'
+
+export default {
+  name: 'SqlEditor',
+  props: ['value'],
+  components: {
+    codemirror
+  },
+  data () {
+    return {
+      query: this.value,
+      cmOptions: {
+        // codemirror options
+        tabSize: 4,
+        mode: 'text/x-mysql',
+        theme: 'neo',
+        lineNumbers: true,
+        line: true
+      },
+      result: null
+    }
+  },
+  watch: {
+    query () {
+      this.$emit('input', this.query)
+    }
+  },
+  methods: {
+    onCmChange (editor) {
+      // Don't show autocomplete after a space or semicolon
+      const ch = editor.getTokenAt(editor.getCursor()).string.slice(-1)
+      if (!ch || ch === ' ' || ch === ';') {
+        return
+      }
+
+      const hintOptions = {
+      //   tables: this.state.tables,
+        completeSingle: false,
+        completeOnSingleClick: true
+      }
+
+      // editor.hint.sql is defined when importing codemirror/addon/hint/sql-hint
+      // (this is mentioned in codemirror addon documentation)
+      // Reference the hint function imported here when including other hint addons
+      // or supply your own
+      CM.showHint(editor, CM.hint.sql, hintOptions)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.codemirror-container {
+  flex-grow: 1;
+  min-height: 0;
+}
+
+>>> .vue-codemirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror {
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-big);
+  height: 100%;
+  max-height: 100%;
+}
+</style>

src/components/TabContent.vue

@@ -8,13 +8,11 @@
     >
       <template #left-pane>
         <div class="query-editor">
-          <div class="codemirror-container">
+          <sql-editor v-model="query" />
-            <codemirror v-model="query" :options="cmOptions" @changes="onCmChange" ref="codemirror" />
-          </div>
           <div  class="run-btn-container">
             <button
               class="primary run-btn"
-              @click="execute(query)"
+              @click="execute"
               :disabled="!$store.state.schema"
             >
               Run
@@ -30,7 +28,7 @@
             <pre ref="output" id="output">Results will be displayed here</pre> -->
             <sql-table v-if="result" :data="result" :height="tableViewHeight" />
           </div>
-          <Chart
+          <chart
             :visible="view === 'chart'"
             :sql-result="result"
             :init-chart="initChart"
@@ -45,24 +43,16 @@
 
 <script>
 import SqlTable from '@/components/SqlTable'
+import SqlEditor from '@/components/SqlEditor'
 import Splitpanes from '@/components/splitpanes'
 import ViewSwitcher from '@/components/ViewSwitcher'
 import Chart from '@/components/Chart'
 
-import CM from 'codemirror'
-import { codemirror } from 'vue-codemirror'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/mode/sql/sql.js'
-import 'codemirror/theme/neo.css'
-import 'codemirror/addon/hint/show-hint.js'
-import 'codemirror/addon/hint/show-hint.css'
-import 'codemirror/addon/hint/sql-hint.js'
-
 export default {
   name: 'TabContent',
   props: ['id', 'initName', 'initQuery', 'initChart', 'tabIndex'],
   components: {
-    codemirror,
+    SqlEditor,
     SqlTable,
     Splitpanes,
     ViewSwitcher,
@@ -71,14 +61,6 @@ export default {
   data () {
     return {
       query: this.initQuery,
-      cmOptions: {
-        // codemirror options
-        tabSize: 4,
-        mode: 'text/x-mysql',
-        theme: 'neo',
-        lineNumbers: true,
-        line: true
-      },
       result: null,
       view: 'table',
       tableViewHeight: 0,
@@ -88,25 +70,6 @@ export default {
   computed: {
     isActive () {
       return this.id === this.$store.state.currentTabId
-    },
-    dataSources () {
-      if (!this.result) {
-        return {}
-      }
-      const dataSorces = {}
-      const matrix = this.result.values
-      const [row] = matrix
-      const transposedMatrix = row.map((value, column) => matrix.map(row => row[column]))
-      this.result.columns.forEach((column, index) => {
-        dataSorces[column] = transposedMatrix[index]
-      })
-      return dataSorces
-    },
-    dataSourceOptions () {
-      return Object.keys(this.dataSources).map(name => ({
-        value: name,
-        label: name
-      }))
     }
   },
   created () {
@@ -130,29 +93,10 @@ export default {
     }
   },
   methods: {
-    onCmChange (editor) {
-      // Don't show autocomplete after a space or semicolon
-      const ch = editor.getTokenAt(editor.getCursor()).string.slice(-1)
-      if (!ch || ch === ' ' || ch === ';') {
-        return
-      }
-
-      const hintOptions = {
-      //   tables: this.state.tables,
-        completeSingle: false,
-        completeOnSingleClick: true
-      }
-
-      // editor.hint.sql is defined when importing codemirror/addon/hint/sql-hint
-      // (this is mentioned in codemirror addon documentation)
-      // Reference the hint function imported here when including other hint addons
-      // or supply your own
-      CM.showHint(editor, CM.hint.sql, hintOptions)
-    },
     // Run a command in the database
-    execute (commands) {
+    execute () {
       // this.$refs.output.textContent = 'Fetching results...' */
-      this.$db.execute(commands + ';')
+      this.$db.execute(this.query + ';')
         .then(result => { this.result = result })
         .catch(err => alert(err))
     },
@@ -214,25 +158,10 @@ export default {
   min-height: 150px;
 }
 
-.codemirror-container {
-  flex-grow: 1;
-  min-height: 0;
-}
-
 .run-btn-container {
   text-align: right;
 }
 
->>> .vue-codemirror {
-  height: 100%;
-  max-height: 100%;
-}
->>> .CodeMirror {
-  border: 1px solid var(--color-border);
-  border-radius: var(--border-radius-big);
-  height: 100%;
-  max-height: 100%;
-}
 .table-view {
   margin: 0 52px;
 }