build: update deps

package.json

@@ -16,52 +16,53 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.2.0",
-    "@vueuse/core": "^4.9.3",
+    "@vueuse/core": "^4.11.0",
-    "@vueuse/integrations": "^4.9.3",
+    "@vueuse/integrations": "^4.11.0",
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
     "dexie": "^3.0.3",
     "element-plus": "^1.0.2-beta.44",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.23.0",
+    "monaco-editor": "^0.24.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^1.0.0-1",
     "qrcode": "^1.4.4",
     "vant": "^3.0.16",
-    "vue": "^3.1.0-beta.2",
+    "vue": "^3.1.0-beta.3",
-    "vue-router": "^4.0.6",
+    "vue-router": "^4.0.8",
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^12.1.1",
+    "@commitlint/cli": "^12.1.4",
-    "@commitlint/config-conventional": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.4",
-    "@types/node": "^14.14.44",
+    "@types/node": "^14.17.0",
-    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
-    "@typescript-eslint/parser": "^4.23.0",
+    "@typescript-eslint/parser": "^4.24.0",
+    "@vitejs/plugin-legacy": "^1.4.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vitejs/plugin-vue-jsx": "^1.1.4",
-    "@vue/compiler-sfc": "^3.1.0-beta.2",
+    "@vue/compiler-sfc": "^3.1.0-beta.3",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
     "eslint": "^7.26.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.23.2",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.9.0",
     "gh-pages": "^3.1.0",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.3.0",
-    "sass": "^1.32.12",
+    "sass": "^1.32.13",
     "typescript": "^4.2.4",
-    "vite": "2.2.4",
+    "vite": "2.3.3",
-    "vite-plugin-components": "^0.9.0",
+    "vite-plugin-components": "^0.9.1",
     "vite-plugin-style-import": "^0.10.0",
-    "vite-plugin-windicss": "^0.16.0-beta.14",
+    "vite-plugin-windicss": "^0.16.0-beta.17",
     "vue-eslint-parser": "^7.6.0",
-    "vue-tsc": "^0.1.2",
+    "vue-tsc": "^0.1.4",
     "windicss": "^2.5.14"
   },
   "repository": {

src/App.vue

@@ -4,23 +4,18 @@
   </router-view>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, provide } from 'vue'
+import { provide } from 'vue'
 import { initVisualData, injectKey, localKey } from '@/visual-editor/hooks/useVisualData'
 
-export default defineComponent({
+const visualData = initVisualData()
-  name: 'App',
+// 注入可视化编辑器所有配置
-  setup() {
+provide(injectKey, visualData)
-    const visualData = initVisualData()
-    // 注入可视化编辑器所有配置
-    provide(injectKey, visualData)
 
-    const { jsonData } = visualData
+const { jsonData } = visualData
 
-    window.addEventListener('beforeunload', () => {
+window.addEventListener('beforeunload', () => {
   sessionStorage.setItem(localKey, JSON.stringify(jsonData))
-    })
-  }
 })
 </script>
 

src/packages/base-widgets/divider/index.tsx

@@ -14,12 +14,12 @@ export default {
   preview: () => <Divider style="width:190px">文本</Divider>,
   render: ({ props }) => {
     const style = `color:${props['text-color']};borderColor:${props['divider-color']}`
-    return props.text ? (
+    return (
       <Divider {...props} style={style}>
-        {props.text}
+        {{
+          default: () => props.text
+        }}
       </Divider>
-    ) : (
-      <Divider {...props} style={style}></Divider>
     )
   },
   props: {

src/visual-editor/components/left-aside/components/base-widgets/index.tsx

@@ -1,7 +1,8 @@
 import { defineComponent } from 'vue'
 import { cloneDeep } from 'lodash'
 import { visualConfig } from '@/visual.config'
-import Draggable from 'vuedraggable'
+// @ts-ignore 暂时方案 待官方修复
+import Draggable from 'vuedraggable/src/vuedraggable'
 import styles from './index.module.scss'
 import { createNewBlock } from '@/visual-editor/visual-editor.utils'
 

src/visual-editor/components/left-aside/components/container-component/index.tsx

@@ -1,7 +1,8 @@
 import { defineComponent } from 'vue'
 import { cloneDeep } from 'lodash'
 import { visualConfig } from '@/visual.config'
-import Draggable from 'vuedraggable'
+// @ts-ignore 暂时方案 待官方修复
+import Draggable from 'vuedraggable/src/vuedraggable'
 import styles from './index.module.scss'
 import { createNewBlock } from '@/visual-editor/visual-editor.utils'
 

src/visual-editor/components/simulator-editor/draggable-transition-group.vue

@@ -33,7 +33,8 @@
  * @update: 2021/5/1 23:15
  */
 import { computed, defineComponent, reactive, toRefs, SetupContext } from 'vue'
-import draggable from 'vuedraggable'
+// @ts-ignore 暂时方案 待官方修复
+import draggable from 'vuedraggable/src/vuedraggable'
 import { useVModel } from '@vueuse/core'
 
 export default defineComponent({
@@ -55,6 +56,7 @@ export default defineComponent({
       list: useVModel(props, 'moduleValue', emit),
       isDrag: useVModel(props, 'drag', emit)
     })
+
     const dragOptions = computed(() => ({
       animation: 200,
       group: 'components',

src/visual.config.tsx

@@ -1,5 +1,4 @@
 import { createVisualEditorConfig } from './visual-editor/visual-editor.utils'
-// import './visual.config.scss'
 import baseWidgets from '@/packages/base-widgets'
 import containerComponent from '@/packages/container-component'
 

vite.config.ts

@@ -1,6 +1,7 @@
 import { ConfigEnv, loadEnv, UserConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import legacy from '@vitejs/plugin-legacy'
 import { resolve } from 'path'
 import ViteComponents, { ElementPlusResolver, VantResolver } from 'vite-plugin-components'
 import styleImport from 'vite-plugin-style-import'
@@ -22,6 +23,9 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       vue(),
       vueJsx(),
       WindiCSS(),
+      legacy({
+        targets: ['defaults', 'not IE 11']
+      }),
       ViteComponents({
         // 自动导入组件（还不够完善，可能会有样式丢失）
         // valid file extensions for components.
@@ -68,7 +72,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         'element-plus',
         'vant',
         'lodash',
-        'vuedraggable'
+        'vuedraggable/src/vuedraggable'
       ],
       exclude: ['vue-demi']
     },