custom-variant-form 2.2.9

package/README.md

@@ -0,0 +1,202 @@
+# Variant Form
+#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。
+
+![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)
+
+<br/>
+
+### 立即体验
+[在线Demo](http://120.92.142.115/)
+
+
+### 🎉🎉<mark>基于VForm的全栈低代码平台已发布</mark>🎉🎉
+![meta_low_code](https://vform666.com/mele.png)
+<br/>
+[美乐低代码——立即进入](https://melecode.com/) （私有部署、开箱即用️，已开源✌✌）️
+
+
+### 立即体验VForm Pro高级版（提供商业支持）
+[Pro Demo](https://www.vform666.com/pro/)
+
+### 视频教程集合：
+[B站观看](https://space.bilibili.com/626932375)
+
+### Vue 3正式版已发布
+[立即进入](https://gitee.com/vdpadmin/variant-form3-vite)
+
+### 🎉🎉基于Vant组件库的Mobile版本已发布🎉🎉
+[立即进入](https://vform666.com/vform-mobile.html)
+
+
+### 友情链接
+
+[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）
+
+
+<br/>
+
+### 功能一览
+```
+> 拖拽式可视化表单设计；
+> 支持PC、Pad、H5三种布局；
+> 支持运行时动态加载表单；
+> 支持表单复杂交互控制；
+> 支持自定义CSS样式；
+> 支持自定义校验逻辑；
+> 支持国际化多语言；
+> 兼容IE 11浏览器；
+> 可导出Vue组件、HTML源码；
+> 可导出Vue的SFC单文件组件；
+> 支持开发自定义组件；
+> 支持响应式自适应布局；
+> 支持VS Code插件；
+> 更多功能等你探究...；
+```
+
+### 安装依赖
+```
+npm install --registry=https://registry.npmmirror.com
+```
+
+### 开发调试
+```
+npm run serve
+```
+
+### 生产打包
+```
+npm run build
+```
+
+### 表单设计器 + 表单渲染器打包
+```
+npm run lib
+```
+
+### 表单渲染器打包
+```
+npm run lib-render
+```
+
+### 浏览器兼容性
+```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11```
+
+<br/>
+
+### 跟Vue项目集成
+
+<br/>
+
+#### 1. 安装包
+  ```bash
+  npm i vform-builds
+  ```
+或
+  ```bash
+  yarn add vform-builds
+  ```
+
+<br/>
+
+#### 2. 引入并全局注册VForm组件
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+
+import ElementUI from 'element-ui'  //引入element-ui库
+import VForm from 'vform-builds'  //引入VForm库
+
+import 'element-ui/lib/theme-chalk/index.css'  //引入element-ui样式
+import 'vform-builds/dist/VFormDesigner.css'  //引入VForm样式
+
+Vue.config.productionTip = false
+
+Vue.use(ElementUI)  //全局注册element-ui
+Vue.use(VForm)  //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
+```
+
+<br/>
+
+#### 3. 在Vue模板中使用表单设计器组件
+```html
+<template>
+  <v-form-designer></v-form-designer>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+body {
+  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
+}
+</style>
+```
+
+<br/>
+
+#### 4. 在Vue模板中使用表单渲染器组件
+```html
+<template>
+  <div>
+    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
+    </v-form-render>
+    <el-button type="primary" @click="submitForm">Submit</el-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formJson: {"widgetList":[],"formConfig":{"labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
+        formData: {},
+        optionData: {}
+      }
+    },
+    methods: {
+      submitForm() {
+        this.$refs.vFormRef.getFormData().then(formData => {
+          // Form Validation OK
+          alert( JSON.stringify(formData) )
+        }).catch(error => {
+          // Form Validation failed
+          this.$message.error(error)
+        })
+      }
+    }
+  }
+</script>
+```
+
+<br/>
+
+### 资源链接
+<hr>
+
+文档官网：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
+
+在线演示：<a href="http://120.92.142.115/" target="_blank">http://120.92.142.115/</a>
+
+Gitee仓库：<a href="https://gitee.com/vdpadmin/variant-form" target="_blank">https://gitee.com/vdpadmin/variant-form</a>
+
+Github仓库：<a href="https://github.com/vform666/variant-form" target="_blank">https://github.com/vform666/variant-form</a>
+
+VS Code插件：<a href="https://www.vform666.com/plugin/" target="_blank">https://www.vform666.com/plugin/</a>
+
+更新日志：<a href="https://www.vform666.com/changelog.html" target="_blank">https://www.vform666.com/changelog.html</a>
+
+订阅Pro版：<a href="https://www.vform666.com/pro/" target="_blank">https://www.vform666.com/pro/</a>
+
+技术交流群：扫如下二维码加群
+
+![image](https://vform2022.ks3-cn-beijing.ksyuncs.com/vchat_qrcode.png)

package/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/index_template/index_dev.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/index_template/index_prod.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- 禁止浏览器缓存index.html begin -->
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
+    <!-- 禁止浏览器缓存index.html end -->
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
+    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"></script>
+  </body>
+</html>

package/install-render.js

@@ -0,0 +1,29 @@
+import VFormRender from '@/components/form-render/index.vue'
+import {loadExtension} from "@/extension/extension-loader"
+import axios from "axios"
+
+loadExtension()
+
+VFormRender.install = function (Vue) {
+  Vue.component(VFormRender.name, VFormRender)
+}
+
+const components = [
+  VFormRender
+]
+
+const install = (Vue) => {
+  window.axios = axios
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
+  install(window.Vue);
+}
+
+export default {
+  install,
+  VFormRender
+}

package/install.js

@@ -0,0 +1,41 @@
+import axios from 'axios'
+
+import VFormDesigner from '@/components/form-designer/index.vue'
+import VFormRender from '@/components/form-render/index.vue'
+import {loadExtension} from "@/extension/extension-loader"
+
+import '@/utils/directive'
+import '@/icons'
+import '@/iconfont/iconfont.css'
+
+loadExtension()
+
+VFormDesigner.install = function (Vue) {
+  Vue.component(VFormDesigner.name, VFormDesigner)
+}
+
+VFormRender.install = function (Vue) {
+  Vue.component(VFormRender.name, VFormRender)
+}
+
+const components = [
+  VFormDesigner,
+  VFormRender
+]
+
+const install = (Vue) => {
+  window.axios = axios
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
+  install(window.Vue);
+}
+
+export default {
+  install,
+  VFormDesigner,
+  VFormRender
+}

package/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "######": "本文件用于解决IDEA无法识别Vue项目@符号的问题",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/license.txt

@@ -0,0 +1,8 @@
+# Variant Form 许可条款 1.0
+
+1. 免责声明：任何情况下根据任何法律，本作者不对用户因使用VariantForm产生的侵权、数据损坏丢失、软硬件故障和违法犯罪等问题承担任何责任；
+2. 禁止任何用户对VariantForm进行简单包装后，即声称为自己的产品、销售源码获利；
+3. VariantForm为开源项目，获取到源代码的用户可自由修改源码供自身开发使用，可分发build构建后的库代码，也可分发VariantForm源代码（需保留文件头部的作者声明），本作者保留VariantForm的原始著作权；
+4. 个人或公司用户均可将VariantForm项目应用于商业项目开发，为支持本项目持续开发，请尽量购买VariantForm Pro版源码订阅更新服务；
+5. 如果你不同意本许可条款，请勿使用VariantForm；任何情况下，一旦实际使用VariantForm，则代表你已确定完全同意本许可条款；
+6. 条款内容结束。

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "custom-variant-form",
+  "version": "2.2.9",
+  "private": false,
+  "scripts": {
+    "serve": "vue-cli-service serve --open src/main.js",
+    "build": "vue-cli-service build --report --dest dist/build",
+    "lib": "vue-cli-service build --report --target lib --dest dist/lib --name VFormDesigner install.js",
+    "lib-render": "vue-cli-service build --report --target lib --dest dist/lib-render --name VFormRender install-render.js",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.21.1",
+    "clipboard": "^2.0.8",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.15.1",
+    "file-saver": "^2.0.5",
+    "vue": "^2.6.11",
+    "vue2-editor": "^2.10.2",
+    "vuedraggable": "^2.24.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "ace-builds": "^1.4.12",
+    "babel-eslint": "^10.1.0",
+    "babel-polyfill": "^6.26.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "mvdir": "^1.0.21",
+    "sass": "^1.45.1",
+    "sass-loader": "^8.0.2",
+    "svg-sprite-loader": "^5.2.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv">
+      <template #customToolButtons>
+        <el-button type="text" @click="printFormJson">测试按钮</el-button>
+      </template>
+    </VFormDesigner>
+  </div>
+</template>
+
+<script>
+import VFormDesigner from './components/form-designer/index.vue'
+
+export default {
+  name: 'App',
+  components: {
+    VFormDesigner,
+  },
+  data() {
+    return {
+      designerConfig: {
+        resetFormJson: false,
+        toolbarMaxWidth: 490,
+      },
+
+      //全局数据源变量
+      globalDsv: {
+        testApiHost: 'http://www.test.com/api',
+        testPort: 8080,
+      },
+    }
+  },
+  methods: {
+    printFormJson() {
+      console.log( this.$refs.vfDesignerRef.getFormJson() )
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  #app {
+    height: 100%;
+  }
+</style>

package/src/components/code-editor/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="ace-container">
+    <!-- 官方文档中使用id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行 -->
+    <div class="ace-editor" ref="ace"></div>
+  </div>
+</template>
+
+<script>
+  import ace from 'ace-builds'
+  /* 启用此行后webpack打包回生成很多动态加载的js文件，不便于部署，故禁用！！
+     特别提示：禁用此行后，需要调用ace.config.set('basePath', 'path...')指定动态js加载URL！！
+   */
+  //import 'ace-builds/webpack-resolver'
+
+  //import 'ace-builds/src-min-noconflict/theme-monokai' // 默认设置的主题
+  import 'ace-builds/src-min-noconflict/theme-sqlserver' // 新设主题
+  import 'ace-builds/src-min-noconflict/mode-javascript' // 默认设置的语言模式
+  import 'ace-builds/src-min-noconflict/mode-json' //
+  import 'ace-builds/src-min-noconflict/mode-css' //
+  import 'ace-builds/src-min-noconflict/ext-language_tools'
+  import {ACE_BASE_PATH} from "@/utils/config";
+
+  export default {
+    name: 'CodeEditor',
+    props: {
+      value: {
+        type: String,
+        required: true
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      mode: {
+        type: String,
+        default: 'javascript'
+      },
+      userWorker: {  //是否开启语法检查，默认开启
+        type: Boolean,
+        default: true
+      },
+
+    },
+    mounted() {
+      //ace.config.set('basePath', 'https://ks3-cn-beijing.ksyun.com/vform2021/ace')
+      ace.config.set('basePath', ACE_BASE_PATH)
+
+      this.addAutoCompletion(ace)  //添加自定义代码提示！！
+
+      this.aceEditor = ace.edit(this.$refs.ace, {
+        maxLines: 20, // 最大行数，超过会自动出现滚动条
+        minLines: 5, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+        fontSize: 12, // 编辑器内字体大小
+        theme: this.themePath, // 默认设置的主题
+        mode: this.modePath, // 默认设置的语言模式
+        tabSize: 2, // 制表符设置为2个空格大小
+        readOnly: this.readonly,
+        highlightActiveLine: true,
+        value: this.codeValue
+      })
+
+      this.aceEditor.setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,  // 设置代码片段提示
+        enableLiveAutocompletion: true,  // 设置自动提示
+      })
+
+      if (this.mode === 'json') {
+        this.setJsonMode()
+      } else if (this.mode === 'css') {
+        this.setCssMode()
+      }
+
+      if (!this.userWorker) {
+        this.aceEditor.getSession().setUseWorker(false)
+      }
+
+      //编辑时同步数据
+      this.aceEditor.getSession().on('change',(ev)=>{
+        //this.$emit('update:value', this.aceEditor.getValue())  // 触发更新事件, 实现.sync双向绑定！！
+        this.$emit('input', this.aceEditor.getValue())
+      })
+    },
+    data() {
+      return {
+        aceEditor: null,
+        themePath: 'ace/theme/sqlserver', // 不导入 webpack-resolver，该模块路径会报错
+        modePath: 'ace/mode/javascript', // 同上
+        codeValue: this.value
+      }
+    },
+    watch: {
+      //
+    },
+    methods: {
+      addAutoCompletion(ace) {
+        let acData = [
+          {meta: 'VForm API', caption: 'getWidgetRef', value: 'getWidgetRef()', score: 1},
+          {meta: 'VForm API', caption: 'getFormRef', value: 'getFormRef()', score: 1},
+          //TODO: 待补充！！
+        ]
+        let langTools = ace.require('ace/ext/language_tools')
+        langTools.addCompleter({
+          getCompletions: function(editor, session, pos, prefix, callback) {
+            if (prefix.length === 0) {
+              return callback(null, []);
+            }else {
+              return callback(null, acData);
+            }
+          }
+        })
+      },
+
+      setJsonMode() {
+        this.aceEditor.getSession().setMode('ace/mode/json')
+      },
+
+      setCssMode() {
+        this.aceEditor.getSession().setMode('ace/mode/css')
+      },
+
+      getEditorAnnotations() {
+        return this.aceEditor.getSession().getAnnotations()
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .ace-editor {
+    min-height: 300px;
+  }
+</style>