feat(vue): update README

tidbcloud · Jul 25, 2024 · bbe8074 · bbe8074
1 parent 01c2846
commit bbe8074
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,5 @@
 # TiSQLEditor
 
-
 SQL Editor is built on [CodeMirror6](https://codemirror.net/), a modern code editor that is written in TypeScript and supports a wide range of extensions. Based on that, we provide a set of extensions to make it easy to use and easy to extend, all these features are validated in the [TiDB Cloud](https://tidbcloud.com), with countless customers all around the world. We also contribute to the CodeMirror6 project, and we are happy to share our extensions with the community.
 
 👉🏻 [Try Full Featured Playground](https://tisqleditor-playground.netlify.app/)
@@ -16,7 +15,7 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 ## Features
 
 - Support edit multiple SQL files
-- Supply React component (Vue component wip)
+- Supply React component and Vue component
 - Out of box extensions
 - AI Widget to chat with AI to help write or refine SQL
 
@@ -26,6 +25,7 @@ https://github.com/tidbcloud/tisqleditor/assets/1284531/732b600f-5b4e-45d3-a3d2-
 | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
 | [@tidbcloud/tisqleditor](./packages/core/README.md)                                                  | SQLEditorInstance with pre-configured extensions                          |
 | [@tidbcloud/tisqleditor-react](./packages/react/README.md)                                           | React component wrapper                                                   |
+| [@tidbcloud/tisqleditor-vue](./packages/vue/README.md)                                               | Vue component wrapper                                                     |
 | [@tidbcloud/codemirror-extension-ai-widget](./packages/extensions/ai-widget/README.md)               | A widget to chat with AI to help write or refine SQL                      |
 | [@tidbcloud/codemirror-extension-sql-parser](./packages/extensions/sql-parser/README.md)             | Parse the editor content to SQL statements                                |
 | [@tidbcloud/codemirror-extension-cur-sql](./packages/extensions/cur-sql/README.md)                   | Get the selected SQL statements                                           |
@@ -69,8 +69,9 @@ export function Editor() {
 ```
 
 ## Documentation
-* Official site: [https://tiui.tidbcloud.com/sql-editor](https://tiui.tidbcloud.com/sql-editor)
-* Documentation: [https://tiui.tidbcloud.com/docs/sql-editor-getting-started](https://tiui.tidbcloud.com/docs/sql-editor-getting-started)
+
+- Official site: [https://tiui.tidbcloud.com/sql-editor](https://tiui.tidbcloud.com/sql-editor)
+- Documentation: [https://tiui.tidbcloud.com/docs/sql-editor-getting-started](https://tiui.tidbcloud.com/docs/sql-editor-getting-started)
 
 ## Development
 

diff --git a/packages/vue/README.md b/packages/vue/README.md
@@ -0,0 +1,48 @@
+# @tidbcloud/tisqleditor-vue
+
+This package provides a vue component wrap for `SQLEditorInstance` from `@tidbcloud/tisqleditor`.
+
+## Installation
+
+```shell
+npm install @tidbcloud/tisqleditor-vue
+```
+
+You need to install all its peer dependencies manually as well, such as `@codemirror/view`, `@codemirror/state`.
+
+## Usage
+
+`@tidbcloud/tisqleditor-vue` supports multiple CodeMirror instances, it uses `EditorCacheProvide` to cache the instances, then you can access all the cached editor instances anywhere inside the provide. You can put the provide in a proper place.
+
+```vue
+<script setup>
+import { EditorCacheProvide, SQLEditor } from '@tidbcloud/tisqleditor-vue'
+</script>
+
+<template>
+  <EditorCacheProvide>
+    <SQLEditor editorId="test" doc="select * from test;" />
+  </EditorCacheProvide>
+</template>
+```
+
+When `EditorCacheProvide` unmounts, it will clear all the cached editor instances.
+
+## API
+
+### EditorCacheProvider
+
+- `const cache=inject('editor-cache')`: get the cache
+- `cache.addEditor(editorId, instance)`: add new editor instance
+- `cache.getEditor(editorId)`: get the cached editor instance by editorId
+- `cache.deleteEditor(editorId)`: remove the editor instance from cache
+- `cache.clearEditors()`: clear all cached editor instances
+
+### SQLEditor Props
+
+- `class`: CodeMirror root container css class
+- `editorId`: editor id, used to differ multiple editor instances
+- `doc`: editor initial content
+- `sqlConfig`: config for SQL dialect, schemas, tables
+- `theme`: editor theme, `@tidbcloud/codemirror-extensions-themes` provides 2 simple themes, `bbedit` for light mode, `oneDark` for dark mode, you can choose any other themes from third-party libraries or customize it by self
+- `extraExts`: any other extra CodeMirror extensions you want to use, `@tidbcloud/tisqleditor-react` install some builtin extensions, likes `@codemirror/lang-sql`, `@tidbcloud/codemirror-extension-sql-parser`, `@tidbcloud/codemirror-extension-cur-sql`
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,12 +1,29 @@
 {
   "name": "@tidbcloud/tisqleditor-vue",
   "version": "0.0.1",
+  "description": "tisqleditor vue component",
   "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist/*.js",
+    "dist/*.ts",
+    "package.json",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "build": "vue-tsc -b && vite build"
   },
+  "keywords": [
+    "tidbcloud",
+    "sql",
+    "editor",
+    "codemirror",
+    "vue component"
+  ],
+  "author": "",
+  "license": "MIT",
   "dependencies": {
     "@tidbcloud/tisqleditor": "workspace:^"
   },