Merge branch 'develop'

Author: lkccy

README.md

@@ -1,7 +1,7 @@
 # element-schema-form
 
 <p align="left">
-  <a href="https://travis-ci.org/vueblocks/element-schema-form"><img src="https://travis-ci.org/vueblocks/element-schema-form.svg?branch=dev"></a>
+  <!-- <a href="https://travis-ci.org/vueblocks/element-schema-form"><img src="https://travis-ci.org/vueblocks/element-schema-form.svg?branch=dev"></a> -->
   <a href="https://www.npmjs.com/package/@vueblocks/element-schema-form" target="_blank"><img src="https://img.shields.io/npm/v/@vueblocks/element-schema-form.svg"></a>
   <a href="https://github.com/vueblocks/element-schema-form"><img src="https://img.shields.io/github/stars/vueblocks/element-schema-form.svg"></a>
   <a href="https://github.com/vueblocks/element-schema-form"><img src="https://img.shields.io/github/license/vueblocks/element-schema-form.svg"></a>
@@ -21,7 +21,17 @@ npm i @vueblocks/element-schema-form -S
 
 ## Online Demo
 
-> [WIP]
+### 表单验证
+
+[![Edit 表单验证](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/biaodanyanzheng-er1t1?fontsize=14&hidenavigation=1&theme=dark)
+
+### 数字类型验证
+
+[![Edit 数字类型验证](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/shuzileixingyanzheng-eezhn?fontsize=14&hidenavigation=1&theme=dark)
+
+### 动态增减表单项
+
+[![Edit 动态增减表单项](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dongtaizengjianbiaodanxiang-h0ogx?fontsize=14&hidenavigation=1&theme=dark)
 
 ## License
 

app/views/test-common/const.js

@@ -73,9 +73,15 @@ export const schema = [
       formItem: { label: '成绩' },
       attrs: { 'show-stops': true, step: 10 }
     }, {
-      type: 'timeselect',
+      type: 'timepicker',
       prop: 'sleepTime',
-      formItem: { label: '晚睡时间' }
+      formItem: { label: '晚睡时间' },
+      attrs: {
+        'picker-options': {
+          selectableRange: '18:30:00 - 20:30:00'
+        },
+        'arrow-control': true
+      }
     }, {
       type: 'rate',
       prop: 'star',

docs/.vuepress/components/code-contain.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script>
+
 // 在线示例
 import BasicValidate from './basic-validate'
 import ValidateNumber from './validate-number'
@@ -30,6 +31,8 @@ import SlotSlot from './slot-slot'
 import CustomInput from './custom-input'
 // 动态属性
 import DynamicInput from './dynamic-input'
+// 拓展组件
+import ExpandCodeMirror from './expand-code-mirror'
 
 export default {
   props: {
@@ -50,7 +53,8 @@ export default {
     SlotRear,
     SlotSlot,
     CustomInput,
-    DynamicInput
+    DynamicInput,
+    ExpandCodeMirror
   },
   data () {
     return {

docs/.vuepress/components/dynamic-input.vue

@@ -21,7 +21,7 @@ export default {
   computed: {
     schema () {
       return [
-        [ 
+        [
           {
             type: 'switch',
             prop: 'editable',

docs/.vuepress/components/expand-code-mirror.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-form label-position="top">
+    <schema-form
+      :model="model"
+      :schema="schema"
+    >
+    </schema-form>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: { code: 'let a = 100' },
+      schema: [
+        [
+          {
+            type: 'codemirror',
+            prop: 'code',
+            formItem: { label: '代码镜像' },
+            attrs: {
+              cmOptions: {
+                tabSize: 2,
+                mode: 'text/javascript',
+                theme: 'night',
+                lineNumbers: true,
+                line: true
+              }
+            },
+            on: {
+              change: this.codeChange
+            }
+          }
+        ]
+      ]
+    }
+  },
+  methods: {
+    codeChange (code) {
+      console.log(code)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

docs/.vuepress/config.js

@@ -1,6 +1,6 @@
 module.exports = {
   title: 'Element Schema Form',
-  description: '基于 JSON Schema 构建 Element 表单',
+  description: '基于 JSON Schema 构建 Element 表单，表单页面开发从未如此高效',
   base: '/element-schema-form/',
   port: 5454,
   themeConfig: {
@@ -31,7 +31,6 @@ module.exports = {
             '快速开始',
             '更新日志',
             '在线示例',
-            '设计导图',
           ]
         },
         {
@@ -44,7 +43,8 @@ module.exports = {
             ['/guide/component/layout', 'layout 布局'],
             ['/guide/component/slot', 'slot 插槽'],
             ['/guide/component/dynamic', 'dynamicAttrs 动态属性'],
-            ['/guide/component/custom', '自定义组件']
+            ['/guide/component/custom', '自定义组件'],
+            ['/guide/component/expand', '第三方拓展']
           ]
         }
       ]

docs/.vuepress/enhanceApp.js

@@ -5,8 +5,10 @@ import CustomNumber from './components/custom/custom-number.vue'
 import "element-ui/lib/theme-chalk/index.css"
 import '@vuepress/theme-default'
 
+
 export default ({ Vue }) => {
   Vue.use(SchemaForm)
   Vue.use(ElementUI)
+  // Vue.use(SchemaFormQuill)
   Vue.component('CustomNumber', CustomNumber)
 }

docs/README.md

@@ -4,11 +4,11 @@ heroImage: /element-schema-form__logo.jpg
 actionText: 快速开始 →
 actionLink: /guide/
 features:
-- title: Schema Form Based
-  details: 基于 JSON 数据结构的 Schema。
-- title: Element Based
-  details: 基于 Element UI组件库的 Form 表单。
-- title: Responsable Form
-  details: 响应式的栅格表单布局。
+- title: JSON Schema Based
+  details: 基于 JSON Schema 规范的数据驱动
+- title: Element UI Based
+  details: 基于 Element UI 组件库的 Form 表单
+- title: Responsive Form
+  details: 灵活的响应式的栅格表单布局
 footer: MIT Licensed | Copyright © 2019-present VueBlocks
 ---

docs/guide/README.md

@@ -4,24 +4,43 @@
 }
 ---
 
-## Element Schema Form
+## 背景
 
-**Element Schema Form** 是一个基于 `Vue`、`element-ui` 技术栈封装的表单组件库。
+前端领域里，在中后台实际业务场景中，基本上逃不过表单页面的开发，表单页面承担着数据输入的角色，是数据收集的重要来源。
 
-用于解决大型、复杂表单页面开发过程中所做的大量重复性工作。
+而对于工程中使用 **Element** 作为UI组件库的项目而言，前端开发者在使用 `el-form` 的时候可能更多的都在关注：
 
-Element Schema Form 使用一份 JSON Schema 即可生成一个成型的 form 表单。
+* 如何布局表单
+* 表单控件类型
+* 表单控件配置项
+* 表单的状态管理
+* 表单校验
+
+从而为了实现一个业务场景复杂的表单，往往要编写大量重复的代码，以及产生篇幅巨大的单页面组件，而这样的开发方式是不必要的。
+
+## 方案
+
+经过我们在表单领域的不断探索与尝试，总结出了一套基于 **JSON Schema** 规范的数据动态生成表单的解决方案 **Element Schema Form**。
+
+**Element Schema Form** 是一个基于 `Vue`、`element-ui` 技术栈封装的表单组件，用于解决大型、复杂表单页面开发过程中所做的大量重复性工作。使用一份 JSON Schema 即可生成一个成型的 form 表单，使表单组件代码变得简洁并便于维护。开发表单更高效。
 
 ## 核心功能
 
 * 基于 JSON Schema 的数据结构生成表单
 * 基于 `el-row`/`el-col` 的灵活表单布局
 * 支持所有 `element-ui` 基础表单组件
-* 支持常用第三方扩展组件，如 `codemirror`、`quill-editor`、`jsoneditor` 等
+* 支持常用第三方扩展组件，如 `codemirror`、`quill editor`、`markdown editor` 等
 * 支持个性化的自定义插槽组件
+* 支持可视化构建表单
+
+## JSON Schema 规范
+
+如果你还不了解什么是 JSON Schema，请移步这里 [JSON Schema](https://json-schema.org/)
 
 ## 可视化探索
 
-我们提供了基于 `@vueblocks/element-schema-form` 开发的表单设计器 [element-form-generator](https://github.com/vueblocks/element-form-generator)
+为了开发更高效，我们提供了基于 **Element Schema Form** 开发的可视化配置工具
+
+表单设计器 [element-form-generator](https://github.com/vueblocks/element-form-generator)
 
-只需简单操作几步即可配置好一个 form 表单
+只需简单操作几步即可配置好一个 form 表单

docs/guide/component/SchemaForm.md

@@ -5,7 +5,7 @@
 ---
 
 
-### 组件使用
+## 组件使用
 
 ```vue
 <template>
@@ -38,16 +38,16 @@ export default {
 </script>
 ```
 
-### Props
+## Props
 
-#### layout
+### layout
 
-##### 表单布局信息，详见 [layout布局](layout.html)
+#### 表单布局信息，详见 [layout布局](layout.html)
 
 
-#### model
+### model
 
-##### 表单数据对象,表单绑定值的集合,例如
+#### 表单数据对象,表单绑定值的集合,例如
 ``` js
 {
   model: {
@@ -57,8 +57,8 @@ export default {
 }
 ```
 
-#### schema
-##### 表单模板，用于表单的构建。详情见 [schema 详解](schema.html)
+### schema
+#### 表单模板，用于表单的构建。详情见 [schema 详解](schema.html)
 
 参数|说明|类型|可选值|默认值
 :--|:--|:--|:--|:--
@@ -72,9 +72,9 @@ on|组件事件|object|-|-
 hide|是否隐藏|boolean|-|false
 colGrid|栅格布局,与el-col属性相同|object|-|-
 
-#### options
+### options
 
-##### 表单可选数据源，如我们常用的 el-select 的数据源
+#### 表单可选数据源，如我们常用的 el-select 的数据源
 ``` js
 {
   options: {