fix: some bug

Author: buqiyuan

README.md

@@ -32,6 +32,27 @@
 目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
 然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
 
+### 快速生成组件属性
+
+```javascript
+// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
+let propObj = {
+  string: (config) => `createEditorInputProp(${JSON.stringify(config)})`,
+  number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`,
+  boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})`
+}
+
+$$('#props + table tr').reduce((prev, curr) => {
+  const children = curr.children
+  const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase())
+  const value = (propObj[children[2].textContent] ?? propObj['string'])({
+    label: `'${children[1].textContent}'`
+  }).replaceAll('"', '')
+  prev[key] = value
+  return prev
+}, {})
+```
+
 ## 浏览器支持
 
 本地开发推荐使用`Chrome 80+` 浏览器

package.json

@@ -20,34 +20,34 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@vant/touch-emulator": "^1.2.0",
+    "@vant/touch-emulator": "^1.3.0",
     "@vueuse/core": "^4.11.1",
     "@vueuse/integrations": "^4.11.1",
     "axios": "^0.21.1",
     "dayjs": "^1.10.4",
     "dexie": "^3.0.3",
-    "element-plus": "^1.0.2-beta.44",
+    "element-plus": "^1.0.2-beta.45",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.24.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^1.0.0-1",
     "qrcode": "^1.4.4",
     "vant": "^3.0.17",
-    "vue": "^3.1.0-beta.4",
+    "vue": "3.0.11",
     "vue-router": "^4.0.8",
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@types/node": "^14.17.1",
+    "@types/node": "^15.6.1",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
     "@typescript-eslint/parser": "^4.25.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.4",
+    "@vue/compiler-sfc": "3.0.11",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
@@ -56,24 +56,24 @@
     "eslint-plugin-import": "^2.23.3",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.9.0",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^3.2.0",
     "husky": "^6.0.0",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.0.0",
     "prettier": "^2.3.0",
     "pretty-quick": "^3.1.0",
-    "sass": "1.32.13",
+    "sass": "1.34.0",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
-    "typescript": "^4.2.4",
+    "typescript": "^4.3.2",
     "vite": "2.3.4",
-    "vite-plugin-components": "^0.10.2",
+    "vite-plugin-components": "^0.10.3",
     "vite-plugin-style-import": "^0.10.1",
-    "vite-plugin-windicss": "^0.16.0",
+    "vite-plugin-windicss": "^0.16.7",
     "vue-eslint-parser": "^7.6.0",
     "vue-tsc": "^0.1.6",
-    "windicss": "^2.5.14"
+    "windicss": "^3.0.12"
   },
   "repository": {
     "type": "git",

preview/main.ts

@@ -3,10 +3,13 @@ import App from './App.vue'
 
 import router from './router'
 
-import '@/plugins/vant'
+import { setupVant } from '@/plugins/vant'
 
 const app = createApp(App)
 
+// 安装vant插件
+setupVant(app)
+
 app.config.globalProperties.$$refs = {}
 
 // if (import.meta.env.DEV) {

preview/views/preview.vue

@@ -44,26 +44,9 @@ export default defineComponent({
       router.replace('/')
     }
 
-    // 渲染组件
-    const renderCom = (element) => {
-      if (Array.isArray(element)) {
-        return element.map((item) => renderCom(item))
-      }
-      const component = visualConfig.componentMap[element.componentKey]
-
-      return component.render({
-        size: {},
-        props: element.props || {},
-        block: element,
-        model: {},
-        custom: {}
-      })
-    }
-
     return {
       ...toRefs(state),
-      visualConfig,
-      renderCom
+      visualConfig
     }
   }
 })

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import './plugins/element-plus'
-import './plugins/vant'
+import { setupVant } from './plugins/vant'
 
 import 'normalize.css'
 import 'virtual:windi.css'
@@ -13,6 +13,9 @@ import store from './store/'
 
 const app = createApp(App)
 
+// 使用vant插件
+setupVant(app)
+
 app.config.globalProperties.$$refs = {}
 
 // if (import.meta.env.DEV) {

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

@@ -37,23 +37,23 @@ export default {
       options: [
         {
           label: '主要按钮',
-          val: 'primary'
+          value: 'primary'
         },
         {
           label: '成功按钮',
-          val: 'success'
+          value: 'success'
         },
         {
           label: '默认按钮',
-          val: 'default'
+          value: 'default'
         },
         {
           label: '警告按钮',
-          val: 'warning'
+          value: 'warning'
         },
         {
           label: '危险按钮',
-          val: 'danger'
+          value: 'danger'
         }
       ],
       defaultValue: 'default'
@@ -63,30 +63,30 @@ export default {
       options: [
         {
           label: '大型',
-          val: 'large'
+          value: 'large'
         },
         {
           label: '普通',
-          val: 'normal'
+          value: 'normal'
         },
         {
           label: '小型',
-          val: 'small'
+          value: 'small'
         },
         {
           label: '迷你',
-          val: 'mini'
+          value: 'mini'
         }
       ],
       defaultValue: 'normal'
     }),
     'native-type': createEditorSelectProp({
       label: '原生button的type属性',
       options: [
-        { label: '普通button', val: 'button' },
+        { label: '普通button', value: 'button' },
         {
           label: '表单提交按钮',
-          val: 'submit'
+          value: 'submit'
         }
       ],
       defaultValue: 'button'
@@ -110,11 +110,11 @@ export default {
       options: [
         {
           label: '左侧',
-          val: 'left'
+          value: 'left'
         },
         {
           label: '右侧',
-          val: 'right'
+          value: 'right'
         }
       ]
     }),
@@ -128,8 +128,8 @@ export default {
     'loading-type': createEditorSelectProp({
       label: '加载图标类型',
       options: [
-        { label: 'circular', val: 'circular' },
-        { label: 'spinner', val: 'spinner' }
+        { label: 'circular', value: 'circular' },
+        { label: 'spinner', value: 'spinner' }
       ],
       defaultValue: 'circular'
     })

src/packages/base-widgets/checkbox/createFieldProps.ts

@@ -19,15 +19,15 @@ export const createFieldProps = () => ({
     options: [
       {
         label: '左对齐',
-        val: 'left'
+        value: 'left'
       },
       {
         label: '居中',
-        val: 'center'
+        value: 'center'
       },
       {
         label: '右对齐',
-        val: 'right'
+        value: 'right'
       }
     ],
     defaultValue: 'left'

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

@@ -54,13 +54,13 @@ export default {
     modelValue: createEditorSelectProp({
       label: '默认值',
       options: [
-        { label: '萝卜', val: 'radish' },
-        { label: '青菜', val: 'greens' }
+        { label: '萝卜', value: 'radish' },
+        { label: '青菜', value: 'greens' }
       ],
       multiple: true,
       defaultValue: []
     }),
-    name: createEditorInputProp({ label: '名称，提交表单的标识符', defaultValue: 'checkbox' }),
+    name: createEditorInputProp({ label: '字段名', defaultValue: 'checkbox' }),
     label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '复选框' }),
     options: createEditorTableProp({
       label: '默认选项',
@@ -82,11 +82,11 @@ export default {
       options: [
         {
           label: '水平',
-          val: 'horizontal'
+          value: 'horizontal'
         },
         {
           label: '垂直',
-          val: 'vertical'
+          value: 'vertical'
         }
       ],
       defaultValue: 'horizontal'

src/packages/base-widgets/datetimePicker/createFieldProps.ts

@@ -19,15 +19,15 @@ export const createFieldProps = () => ({
     options: [
       {
         label: '左对齐',
-        val: 'left'
+        value: 'left'
       },
       {
         label: '居中',
-        val: 'center'
+        value: 'center'
       },
       {
         label: '右对齐',
-        val: 'right'
+        value: 'right'
       }
     ],
     defaultValue: 'left'