feat(vue): implement components

packages/vue/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@tidbcloud/tisqleditor-vue",
-  "version": "0.0.6",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.4.31"
+    "@tidbcloud/tisqleditor": "workspace:^"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
     "typescript": "^5.2.2",
     "vite": "^5.3.4",
+    "vue": "^3.4.31",
     "vue-tsc": "^2.0.24"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.31"
   }
 }

packages/vue/src/editor-cache-provide.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { provide, onUnmounted } from 'vue'
+import { EditorCache } from '@tidbcloud/tisqleditor'
+
+const editorCache = new EditorCache()
+
+provide('editor-cache', editorCache)
+
+onUnmounted(() => {
+  editorCache.clearEditors()
+})
+</script>
+
+<template>
+  <slot />
+</template>

packages/vue/src/index.ts

@@ -1,3 +1,4 @@
-import HelloWorld from './components/HelloWorld.vue'
+import EditorCacheProvide from './editor-cache-provide.vue'
+import SQLEditor from './sql-editor.vue'
 
-export { HelloWorld }
+export { EditorCacheProvide, SQLEditor }

packages/vue/src/sql-editor.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, watch, inject, watchEffect } from 'vue'
+import {
+  CreateSQLEditorOptions,
+  createSQLEditorInstance,
+  EditorCache
+} from '@tidbcloud/tisqleditor'
+
+type SQLEditorProps = CreateSQLEditorOptions & {
+  class?: string
+}
+const props = defineProps<SQLEditorProps>()
+
+const editorContainerRef = ref<HTMLInputElement | null>(null)
+const editorCache = inject('editor-cache', new EditorCache())
+
+function editorIdChange(newId: string, oldId: string) {
+  if (!editorContainerRef.value) {
+    return
+  }
+  const oldInst = editorCache.getEditor(oldId)
+  if (oldInst) {
+    editorContainerRef.value.removeChild(oldInst.editorView.dom)
+  }
+  let newInst = editorCache.getEditor(newId)
+  if (!newInst) {
+    const { theme, sqlConfig, ...rest } = props
+    newInst = createSQLEditorInstance({
+      theme,
+      sqlConfig,
+      ...rest,
+      editorId: newId
+    })
+    editorCache.addEditor(newId, newInst)
+  }
+  editorContainerRef.value.appendChild(newInst.editorView.dom)
+  newInst.editorView.focus()
+}
+editorIdChange(props.editorId, '')
+
+watch(() => props.editorId, editorIdChange)
+
+watchEffect(() => {
+  editorCache.getEditor(props.editorId)?.changeTheme(props.theme ?? [])
+})
+
+watchEffect(() => {
+  editorCache.getEditor(props.editorId)?.changeSQLConfig(props.sqlConfig ?? {})
+})
+</script>
+
+<template>
+  <div :class="class" ref="editorContainerRef"></div>
+</template>