Merge branch 'release/2.5.0'

Author: chenquincy

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+# [2.5.0](https://github.com/chenquincy/vue-dynamic-form-component/compare/v2.4.1...v2.5.0) (2020-01-15)
+
+
+### Features
+
+* support custom component ([febc7d9](https://github.com/chenquincy/vue-dynamic-form-component/commit/febc7d9)), closes [#5](https://github.com/chenquincy/vue-dynamic-form-component/issues/5)
+
+
+
 ## [2.4.1](https://github.com/chenquincy/vue-dynamic-form-component/compare/v2.4.0...v2.4.1) (2019-12-31)
 
 

README.md

@@ -83,16 +83,15 @@ export default {
 - Support **multi-level form** for `Object `/ `Array` / `Hashmap` 
 - Support data **validation**
 - **Multi-Languages** support
+- Support **custom component**
 
 ## Todo
 
 **vue-dynamic-form-component** can do more. There are a few things that it currently doesn't support but are planned:
 
 - [x] Custom component props
-- [ ] Custom component event
-- [ ] Support more component
-  - [x] textarea
-  - [ ] file upload
+- [x] Custom component event
+- [x] Custom component
 - [ ] Custom theme
 - [ ] Value change event
 

docs/.vuepress/components/custom-component.vue

@@ -0,0 +1,35 @@
+<template>
+  <dynamic-form
+    v-model="data"
+    :descriptors="descriptors">
+  </dynamic-form>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      descriptors: {
+        image: {
+          type: 'url',
+          required: true,
+          message: 'please upload an image',
+          component: {
+            name: 'el-upload',
+            children: [
+              { name: 'el-button', children: 'click to upload', props: { type: 'primary', plain: true, size: 'small' } }
+            ],
+            props: {
+              action: 'https://jsonplaceholder.typicode.com/posts/',
+              onError: function (error, file, fileList) {
+                console.log('upload error ==> ', error)
+              }
+            }
+          }
+        }
+      },
+      data: {}
+    }
+  }
+}
+</script>

docs/.vuepress/components/home-demo.vue

@@ -2,7 +2,8 @@
   <dynamic-form
     ref="dynamic-form"
     v-model="data"
-    :descriptors="descriptors">
+    :descriptors="descriptors"
+    :showOuterError="false">
     <template slot="operations">
       <el-button @click="reset">Reset</el-button>
       <el-button type="primary" @click="validate" plain>Validate</el-button>

docs/.vuepress/config.js

@@ -6,12 +6,12 @@ module.exports = {
     '/': {
       lang: 'en-US',
       title: 'vue-dynamic-form-component',
-      description: 'Vue dynamic nested form component. Support nested Object/Hashmap/Array.'
+      description: 'Vue dynamic nested form component. Support nested Object/Hashmap/Array. Can custom component yourself.'
     },
     '/zh/': {
       lang: 'zh-CN',
       title: 'vue-dynamic-form-component',
-      description: 'Vue动态嵌套表单组件，支持嵌套对象/Hashmap/数组'
+      description: 'Vue动态嵌套表单组件，支持嵌套对象/Hashmap/数组, 可自定义表单组件'
     }
   },
   themeConfig: {

docs/README.md

@@ -9,7 +9,7 @@ meta:
   - name: google-site-verification
     content: -lX8u-MYYDkf5y6QhZWJqZoDxVkmAu004XwR3ynRwFg
 features:
-- title: Generate form by descriptors
+- title: Generate form by descriptors Or custom component
   details: Write only data's descriptor(extend from async-validate), then automatically generate form(use element-ui)
 - title: Support almost all data type with validation
   details: Support almost all data type and normal data validation(email, url, ... etc)

docs/api/descriptors/README.md

@@ -9,13 +9,18 @@
 ## descriptor
 
 ::: tip Warm Prompt
-**descriptor** can be `object` or `array`, but the `fields`, `defaultFields`, `label`, `placeholder`, `hidden`, `disabled`, `options`, `autocomplete`  props should be brother props with `type`. In addition, there is only one object include `type` prop in array.
+**descriptor** can be `object` or `array`, but the `fields`, `defaultFields`, `label`, `hidden`, `disabled`, `options`, `component`  props should be brother props with `type`. In addition, there is only one object include `type` prop in array.
 :::
 
 ### type
 
 `string`, declare the type of data's field, include common data type.
 
+::: warning 注意
+
+Note that [descriptor.component.name](/zh/api/descriptors/#props) has higher priority, the follow rules are invalid if `descriptor.component.name` is not null.
+:::
+
 | Value     | Description                                                  | Component           |
 | --------- | ------------------------------------------------------------ | ------------------- |
 | `string`  | Must be a string                                             | `el-input`          |
@@ -36,10 +41,6 @@
 
 `string`, field's label in form, should be declared with `type` in the same object.
 
-### props
-
-`object` type, it will be the value of input component's `v-bind` prop(input component refer to [descriptor.type](/api/descriptors/#type)). You can custom the component with this option, there are some common prop like: `placeholder`, `disabled`, ... , etc. Other props of component refer to [element-ui](https://element.faas.ele.me/#/en-US/component/installation).
-
 ### hidden
 
 `boolean` , whether hidden the input component of value, should be declared with `type` in the same object. Note that the hidden value still will be validated while validating.
@@ -206,3 +207,43 @@ const descriptors = {
 }
 ```
 
+### component
+
+Provided for user to custom the component easily, it can custom the component's content, props and events.
+
+``` js
+// component demo
+{
+  name: 'el-button',
+  props: {
+    type: 'primary',
+    size: 'small'
+  },
+  events: {
+    click () {
+      console.log('button click')
+    }
+  }
+}
+```
+
+#### name
+
+`string` type, custom to use which element or component.
+
+#### props
+
+`object` type, it will be the value of input component's `v-bind` prop(input component refer to [descriptor.type](/api/descriptors/#type)). You can custom the component props with this option, there are some common props like: `placeholder`, `disabled`, ... , etc. Other props of component refer to [element-ui](https://element.faas.ele.me/#/en-US/component/installation). Note that it will be the  value of the custom component's `v-bind` prop, if `component.name` is not null.
+
+#### events
+
+`object` type, it will be the value of input component's `v-on` prop(input component refer to [descriptor.type](/api/descriptors/#type)). You can custom the component props with this option, there are some common prop like: `placeholder`, `disabled`, ... , etc. Other props of component refer to [element-ui](https://element.faas.ele.me/#/en-US/component/installation). Note that it will be the  value of the custom component's `v-on` prop, if `component.name` is not null.
+
+#### children
+
+`children` is used to custom the content of component. It has two types:
+
+- `string` : the content is plain text. It will be inserted with `span` element
+- `array[component | string]` : the content has more than one element, the array item has two types:
+  - `component` : same structure with [component](/api/descriptors/#component) 
+  - `string` : the item is plain text. It will be inserted with `span` element

docs/getting-started/README.md

@@ -125,6 +125,19 @@ Special prop `label`, `fields`, `defaultField` , ...etc should be used with `typ
 
 <<<@/docs/.vuepress/components/custom-validator.vue
 
+### Custom Component
+
+::: tip Warm Prompt
+
+To custom component, you should ensure `version >= 2.5.0`
+:::
+
+**vue-dynamic-form-component** has components for common data type inside, so you don't need to custom the component generally. But sometimes, we need to custom the component, such as upload a file. To meet these scenes, I provide a way to custom the component. Usage like this:
+
+<code-demo name="custom-component" lang="en_US"></code-demo>
+
+<<<@/docs/.vuepress/components/custom-component.vue
+
 ### Form Operations
 
 **vue-dynamic-form-component** provides some common methods to operate form, you can use them with `operations` slot.

docs/guide/README.md

@@ -9,6 +9,7 @@
 - Support **nested form** for `Object `/ `Array` / `Hashmap` 
 - Support data **validation**
 - **Multi-Languages** support
+- Support **custom component**
 
 ## Question
 

docs/zh/README.md

@@ -7,7 +7,7 @@ meta:
 - name: keywords
   content: vue 动态 嵌套 表单 多级 组件  vue-dynamic-form vue-dynamic-form-component
 features:
-- title: 使用descriptors生成表单
+- title: 使用descriptors生成表单或自定义组件
   details: 只需要提供目标数据的descriptor(基于async-validator扩展)，就可以自动生成对应的表单元素(基于element-ui)
 - title: 支持绝大部分数据类型及其校验
   details: 支持绝大部分数据类型、常见类型校验（如：email、url等）