fix: fix formatting errors and documentation errors for some components

packages/varlet-vue2-ui/docs/importOnDemand.en-US.md

@@ -10,11 +10,11 @@ Each component is a `Vue plugin` and is composed of `component logic` and `style
 It is manually install and used as follows.
 
 ```js
-import { createApp } from 'vue'
-import { Button } from '@varlet/ui'
-import '@varlet/ui/es/button/style/index.js'
+import Vue from 'vue'
+import { Button } from '@varlet-vue2/ui'
+import '@varlet-vue2/ui/es/button/style/index.js'
 
-createApp().use(Button)
+Vue.use(Button)
 ```
 
 ### Auto Import

packages/varlet-vue2-ui/docs/importOnDemand.zh-CN.md

@@ -8,11 +8,11 @@
 每一个组件都是一个 `Vue插件`，并由 `组件逻辑` 和 `样式文件` 组成，如下方式进行手动引入使用。
 
 ```js
-import { createApp } from 'vue'
-import { Button } from '@varlet/ui'
-import '@varlet/ui/es/button/style/index.js'
+import Vue from 'vue'
+import { Button } from '@varlet-vue2/ui'
+import '@varlet-vue2/ui/es/button/style/index.js'
 
-createApp().use(Button)
+Vue.use(Button)
 ```
 
 ### 自动引入

packages/varlet-vue2-ui/docs/quickstart.en-US.md

@@ -12,12 +12,15 @@ Here are the most basic ways to access component libraries in common development
 ```html
 <div id="app"></div>
 <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@varlet-vue2/ui/umd/varlet.js"></script>
 <script>
-  const app = Vue.createApp({
-    template: '<var-button>Button</var-button>'
+  const App = Vue.use({
+    template: '<var-button>按钮</var-button>'
+  })
+  new Vue({
+     el: '#app',
+     render: h => h(App)
   })
-  app.use(Varlet).mount('#app')
 </script>
 ```
 
@@ -27,22 +30,27 @@ Here are the most basic ways to access component libraries in common development
 # Install with npm, yarn or pnpm
 
 # npm
-npm i @varlet/ui -S
+npm i @varlet-vue2/ui -S
 
 # yarn
-yarn add @varlet/ui
+yarn add @varlet-vue2/ui
 
 # pnpm
-pnpm add @varlet/ui
+pnpm add @varlet-vue2/ui
 ```
 
 ```js
 import App from './App.vue'
-import Varlet from '@varlet/ui'
-import { createApp } from 'vue'
-import '@varlet/ui/es/style.js'
+import Varlet from '@varlet-vue2/ui'
+import Vue from 'vue'
+import '@varlet-vue2/ui/es/style.js'
+
+Vue.use(Varlet)
 
-createApp(App).use(Varlet).mount('#app')
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
 ```
 
 ### Components Playground

packages/varlet-vue2-ui/docs/quickstart.zh-CN.md

@@ -12,12 +12,15 @@
 ```html
 <div id="app"></div>
 <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@varlet-vue2/ui/umd/varlet.js"></script>
 <script>
-  const app = Vue.createApp({
+  const App = Vue.use({
     template: '<var-button>按钮</var-button>'
   })
-  app.use(Varlet).mount('#app')
+  new Vue({
+     el: '#app',
+     render: h => h(App)
+  })
 </script>
 ```
 
@@ -27,22 +30,27 @@
 # 通过 npm、yarn 或 pnpm 安装
 
 # npm
-npm i @varlet/ui -S
+npm i @varlet-vue2/ui -S
 
 # yarn
-yarn add @varlet/ui
+yarn add @varlet-vue2/ui
 
 # pnpm
-pnpm add @varlet/ui
+pnpm add @varlet-vue2/ui
 ```
 
 ```js
 import App from './App.vue'
-import Varlet from '@varlet/ui'
-import { createApp } from 'vue'
-import '@varlet/ui/es/style.js'
+import Varlet from '@varlet-vue2/ui'
+import Vue from 'vue'
+import '@varlet-vue2/ui/es/style.js'
+
+Vue.use(Varlet)
 
-createApp(App).use(Varlet).mount('#app')
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});
 ```
 
 ### 在线编辑组件

packages/varlet-vue2-ui/src/app-bar/docs/en-US.md

@@ -54,7 +54,7 @@ Set the position of the title and the color of the navigation bar through the `t
 ```
 
 ```js
-import { Snackbar } from '@varlet/ui'
+import { Snackbar } from '@varlet-vue2/ui'
 
 export default {
   methods: {
@@ -87,7 +87,7 @@ export default {
 ```
 
 ```js
-import { Snackbar } from '@varlet/ui'
+import { Snackbar } from '@varlet-vue2/ui'
 
 export default {
   methods: {
@@ -147,7 +147,7 @@ export default {
 ```
 
 ```js
-import { Snackbar } from '@varlet/ui'
+import { Snackbar } from '@varlet-vue2/ui'
 
 export default {
   data: () => ({

packages/varlet-vue2-ui/src/app-bar/docs/zh-CN.md

@@ -54,7 +54,7 @@ Vue.use(AppBar)
 ```
 
 ```js
-import { Snackbar } from '@varlet/ui'
+import { Snackbar } from '@varlet-vue2/ui'
 
 export default {
   methods: {
@@ -87,7 +87,7 @@ export default {
 ```
 
 ```js
-import { Snackbar } from '@varlet/ui'
+import { Snackbar } from '@varlet-vue2/ui'
 
 export default {
   methods: {
@@ -147,7 +147,7 @@ export default {
 ```
 
 ```js
-import { Snackbar } from '@varlet/ui'
+import { Snackbar } from '@varlet-vue2/ui'
 
 export default {
   data: () => ({

packages/varlet-vue2-ui/src/back-top/docs/en-US.md

@@ -8,7 +8,7 @@ A button to back to top.
 
 ```js
 import Vue from 'vue'
-import { BackTop } from '@varlet/ui'
+import { BackTop } from '@varlet-vue2/ui'
 
 Vue.use(BackTop)
 ```

packages/varlet-vue2-ui/src/back-top/docs/zh-CN.md

@@ -8,7 +8,7 @@
 
 ```js
 import Vue from 'vue'
-import { BackTop } from '@varlet/ui'
+import { BackTop } from '@varlet-vue2/ui'
 
 Vue.use(BackTop)
 ```

packages/varlet-vue2-ui/src/card/docs/en-US.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Card } from '@varlet/ui'
+import { Card } from '@varlet-vue2/ui'
 
 Vue.use(Card)
 ```

packages/varlet-vue2-ui/src/card/docs/zh-CN.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Card } from '@varlet/ui'
+import { Card } from '@varlet-vue2/ui'
 
 Vue.use(Card)
 ```

packages/varlet-vue2-ui/src/checkbox-group/docs/en-US.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Checkbox, CheckboxGroup } from '@varlet/ui'
+import { Checkbox, CheckboxGroup } from '@varlet-vue2/ui'
 
 Vue.use(CheckboxGroup).use(Checkbox)
 ```

packages/varlet-vue2-ui/src/checkbox-group/docs/zh-CN.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Checkbox, CheckboxGroup } from '@varlet/ui'
+import { Checkbox, CheckboxGroup } from '@varlet-vue2/ui'
 
 Vue.use(CheckboxGroup).use(Checkbox)
 ```

packages/varlet-vue2-ui/src/divider/__tests__/index.spec.js

@@ -2,11 +2,10 @@ import VarDivider from '../Divider'
 import Vue from 'vue'
 import example from '../example'
 import { mount } from '@vue/test-utils'
-import { createApp } from 'vue'
 
 test('test divider plugin', () => {
-  const app = Vue.use(VarDivider)
-  expect(app.component(VarDivider.name)).toBeTruthy()
+  Vue.use(VarDivider)
+  expect(Vue.component(VarDivider.name)).toBeTruthy()
 })
 
 test('test divider example', () => {

packages/varlet-vue2-ui/src/input/docs/en-US.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Input } from '@varlet/ui'
+import { Input } from '@varlet-vue2/ui'
 
 Vue.use(Input)
 ```
@@ -71,7 +71,7 @@ If you only need the basic functionality of the component, you can remove some s
 ### Display Icon
 ```js
 import Vue from 'vue'
-import { Icon } from '@varlet/ui'
+import { Icon } from '@varlet-vue2/ui'
 
 Vue.use(Icon)
 ```

packages/varlet-vue2-ui/src/input/docs/zh-CN.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Input } from '@varlet/ui'
+import { Input } from '@varlet-vue2/ui'
 
 Vue.use(Input)
 ```
@@ -71,7 +71,7 @@ export default {
 ### 显示图标
 ```js
 import Vue from 'vue'
-import { Icon } from '@varlet/ui'
+import { Icon } from '@varlet-vue2/ui'
 
 Vue.use(Icon)
 ```

packages/varlet-vue2-ui/src/rate/docs/en-US.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Rate } from '@varlet/ui'
+import { Rate } from '@varlet-vue2/ui'
 
 Vue.use(Rate)
 ```

packages/varlet-vue2-ui/src/rate/docs/zh-CN.md

@@ -4,7 +4,7 @@
 
 ```js
 import Vue from 'vue'
-import { Rate } from '@varlet/ui'
+import { Rate } from '@varlet-vue2/ui'
 
 Vue.use(Rate)
 ```

packages/varlet-vue2-ui/src/ripple/docs/en-US.md

@@ -7,7 +7,7 @@ Causes the element to generate a ripple spread effect when clicked.
 
 ```js
 import Vue from 'vue'
-import { Ripple } from '@varlet/ui'
+import { Ripple } from '@varlet-vue2/ui'
 
 Vue.use(Ripple)
 ```

packages/varlet-vue2-ui/src/ripple/docs/zh-CN.md

@@ -7,7 +7,7 @@
 
 ```js
 import Vue from 'vue'
-import { Ripple } from '@varlet/ui'
+import { Ripple } from '@varlet-vue2/ui'
 
 Vue.use(Ripple)
 ```

packages/varlet-vue2-ui/src/row/docs/en-US.md

@@ -9,10 +9,10 @@ so that you can layout more efficiently.
 ### Install
 
 ```js
-import { createApp } from 'vue'
-import { Row, Col } from '@varlet/ui'
+import Vue from 'vue'
+import { Row, Col } from '@varlet-vue2/ui'
 
-createApp().use(Row).use(Col)
+Vue.use(Row).use(Col)
 ```
 
 ### Gird System

packages/varlet-vue2-ui/src/space/docs/en-US.md

@@ -10,7 +10,7 @@ so that you can do flex layout more efficiently.
 
 ```js
 import Vue from 'vue'
-import { Space } from '@varlet/ui'
+import { Space } from '@varlet-vue2/ui'
 
 Vue.use(Space)
 ```

packages/varlet-vue2-ui/src/space/example/index.vue

@@ -59,12 +59,16 @@ import { pack, use } from './locale'
 import { watchLang, watchPlatform, watchDarkMode } from '@varlet-vue2/cli/site/utils'
 
 export default {
+  name: 'VarSpaceExample',
+
   components: { VarSpace, VarButton, AppType },
+
   computed: {
     pack() {
       return pack.value
     },
   },
+
   created() {
     watchLang(this, use)
     watchDarkMode(this, dark)