[vue3] 兼容老版本

Author: tzfun

README.md

@@ -486,15 +486,16 @@ The code type message can display code and multi-line text more friendly, the ty
 First you need to configure **Highlight.js**, install it at the main.js entry, see [https://www.npmjs.com/package/highlight.js](https://www.npmjs.com/package/highlight.js)
 
 ```js
-import Terminal from 'vue-web-terminal'
+import {Terminal, configHighlight} from 'vue-web-terminal'
 import hljs from 'highlight.js'
 import java from 'highlight.js/lib/languages/java'
 import vuePlugin from "@highlightjs/vue-plugin"
 import 'highlight.js/styles/tomorrow-night-bright.css'
 
 hljs.registerLanguage('java', java)
 Vue.use(vuePlugin)
-Vue.use(Terminal, {highlight: true})
+Vue.use(Terminal)
+configHighlight(true)
 ```
 
 vue2 version dependency recommendation, vue3 just use the latest version.
@@ -513,22 +514,22 @@ vue2 version dependency recommendation, vue3 just use the latest version.
 It also only needs to be installed at the main.js entry. Recommended version: `"vue-codemirror": "^4.0.6"`
 
 ```js
+import {Terminal, configCodemirror} from 'vue-web-terminal'
 import VueCodemirror from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/darcula.css'
 import 'codemirror/mode/clike/clike.js'
 import 'codemirror/addon/edit/closebrackets.js'
 
 Vue.use(VueCodemirror)
-Vue.use(Terminal, {
-  codemirror: {
-    tabSize: 4,
-    mode: 'text/x-java',
-    theme: "darcula",
-    lineNumbers: true,
-    line: true,
-    smartIndent: true
-  }
+Vue.use(Terminal)
+configCodemirror({
+  tabSize: 4,
+  mode: 'text/x-java',
+  theme: "darcula",
+  lineNumbers: true,
+  line: true,
+  smartIndent: true
 })
 ```
 

README_ZH.md

@@ -486,15 +486,16 @@ code类型消息支持 `highlight.js` 高亮显示。
 ，在main.js入口安装，详细配置见[https://www.npmjs.com/package/highlight.js](https://www.npmjs.com/package/highlight.js)
 
 ```js
-import Terminal from 'vue-web-terminal'
+import {Terminal, configHighlight} from 'vue-web-terminal'
 import hljs from 'highlight.js'
 import java from 'highlight.js/lib/languages/java'
 import vuePlugin from "@highlightjs/vue-plugin"
 import 'highlight.js/styles/tomorrow-night-bright.css'
 
 hljs.registerLanguage('java', java)
 Vue.use(vuePlugin)
-Vue.use(Terminal, {highlight: true})
+Vue.use(Terminal)
+configHighlight(true)
 ```
 
 vue2版本依赖推荐，vue3使用最新的版本即可
@@ -514,22 +515,22 @@ code类型消息也支持 `codemirror`
 同样只需要在main.js入口安装即可，vue2版本推荐：`"vue-codemirror": "^4.0.6"`
 
 ```js
+import {Terminal, configCodemirror} from 'vue-web-terminal'
 import VueCodemirror from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/darcula.css'
 import 'codemirror/mode/clike/clike.js'
 import 'codemirror/addon/edit/closebrackets.js'
 
 Vue.use(VueCodemirror)
-Vue.use(Terminal, {
-    codemirror: {
-        tabSize: 4,
-        mode: 'text/x-java',
-        theme: "darcula",
-        lineNumbers: true,
-        line: true,
-        smartIndent: true
-    }
+Vue.use(Terminal)
+configCodemirror({
+  tabSize: 4,
+  mode: 'text/x-java',
+  theme: "darcula",
+  lineNumbers: true,
+  line: true,
+  smartIndent: true
 })
 ```
 

src/common/api/index.ts

@@ -36,13 +36,18 @@ function getOptions(): Options {
     return data.options as Options
 }
 
+function setOptions(op: Options) {
+    data.options = {...op}
+}
+
 export {
     register,
     unregister,
     rename,
     configHighlight,
     configCodemirror,
-    getOptions
+    getOptions,
+    setOptions
 }
 
 export default new TerminalApi(data)

src/index.ts

@@ -4,12 +4,17 @@ import './css/style.css'
 import 'vue-json-viewer/style.css'
 import type {App} from 'vue'
 import TerminalStore from "./common/store"
-import TerminalApi from "./common/api"
+import TerminalApi, {setOptions} from "./common/api"
 import {configHighlight, configCodemirror, rename} from "./common/api"
 import Terminal from "./Terminal.vue"
-import {TerminalAsk, TerminalFlash} from "./types"
+import {Options, TerminalAsk, TerminalFlash} from "./types"
 
-Terminal.install = (app: App): void => {
+Terminal.install = (app: App, options: Options): void => {
+    setOptions(options)
+    //  兼容老版本
+    Terminal.$api = TerminalApi
+    Terminal.$Flash = TerminalFlash
+    Terminal.$Ask = TerminalAsk
     app.component(Terminal.__name as string, Terminal)
 }
 
@@ -27,3 +32,8 @@ export {
 }
 
 export default Terminal
+
+//  兼容老版本
+export const api = TerminalApi
+export const Flash = TerminalFlash
+export const Ask = TerminalAsk