zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

Lost focus in SQL query editor #54

Browse Source
This commit is contained in:
lana-k
2021-05-19 22:50:56 +02:00
parent 3e503f85a9
commit 414a116f94
4 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/Main/Editor/Tabs/Tab/SqlEditor/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="codemirror-container"> <div class="codemirror-container">
<codemirror v-model="query" :options="cmOptions" @changes="onChange" /> <codemirror ref="cm" v-model="query" :options="cmOptions" @changes="onChange" />
</div> </div>
</template> </template>
@@ -28,7 +28,6 @@ export default {
theme: 'neo', theme: 'neo',
lineNumbers: true, lineNumbers: true,
line: true, line: true,
autofocus: true,
autoRefresh: true, autoRefresh: true,
extraKeys: { 'Ctrl-Space': showHintOnDemand } extraKeys: { 'Ctrl-Space': showHintOnDemand }
} }
@@ -40,7 +39,10 @@ export default {
} }
}, },
methods: { methods: {
onChange: debounce(showHint, 400) onChange: debounce(showHint, 400),
focus () {
this.$refs.cm.codemirror.focus()
}
} }
} }
</script> </script>

16
src/views/Main/Editor/Tabs/Tab/index.vue
View File

@@ -8,7 +8,7 @@
> >
<template #left-pane> <template #left-pane>
<div class="query-editor"> <div class="query-editor">
<sql-editor v-model="query" /> <sql-editor ref="sqlEditor" v-model="query" />
</div> </div>
</template> </template>
<template #right-pane> <template #right-pane>
@@ -86,9 +86,6 @@ export default {
return this.id === this.$store.state.currentTabId return this.id === this.$store.state.currentTabId
} }
}, },
created () {
this.$store.commit('setCurrentTab', this)
},
mounted () { mounted () {
this.resizeObserver = new ResizeObserver(this.handleResize) this.resizeObserver = new ResizeObserver(this.handleResize)
this.resizeObserver.observe(this.$refs.bottomPane) this.resizeObserver.observe(this.$refs.bottomPane)
@@ -98,9 +95,14 @@ export default {
this.resizeObserver.unobserve(this.$refs.bottomPane) this.resizeObserver.unobserve(this.$refs.bottomPane)
}, },
watch: { watch: {
isActive () { isActive: {
if (this.isActive) { immediate: true,
this.$store.commit('setCurrentTab', this) async handler () {
if (this.isActive) {
this.$store.commit('setCurrentTab', this)
await this.$nextTick()
this.$refs.sqlEditor.focus()
}
} }
}, },
query () { query () {

1
tests/views/MainView/Editor/Tabs/Tab/Tab.spec.js
View File

@@ -115,6 +115,7 @@ describe('Tab.vue', () => {
}) })
state.currentTabId = 1 state.currentTabId = 1
await wrapper.vm.$nextTick()
expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true) expect(mutations.setCurrentTab.calledOnceWith(state, wrapper.vm)).to.equal(true)
}) })