Skip to content

Commit 1f65235

Browse files
felixpyfelixpy
committed
Merge branch 'release/1.0.0' into develop
2 parents 17e44f1 + 8ab8329 commit 1f65235

File tree

8 files changed

+225
-11
lines changed

8 files changed

+225
-11
lines changed

‎README.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,96 @@
66

77
Build element-ui forms with JSON schema.
88

9+
:us: English | [:cn: 简体中文](README.zh-CN.md)
10+
911
## Example
1012

13+
[:zap: Live Preview](https://element-form-builder.now.sh) | [:book: Docs](https://codetrial.github.io/element-form-builder)
14+
1115
![Screen Capture](.github/preview.gif)
16+
17+
## Quick Start
18+
19+
First you need to have an element-ui project. If not, it is recommended to create one quickly using the preset below.
20+
21+
```bash
22+
vue create --preset codetrial/vue-cli-plugin-element your-project
23+
```
24+
25+
### Install
26+
27+
```bash
28+
yarn add element-form-builder
29+
# OR
30+
npm i element-form-builder
31+
```
32+
33+
### Registry
34+
35+
```javascript
36+
import FormBuilder from 'element-form-builder'
37+
38+
Vue.use(FormBuilder)
39+
```
40+
41+
### Witness the miracle moment
42+
43+
Vue template:
44+
45+
```html
46+
<el-form-builder :config="formConfig" v-model="formValues" label-width="80px">
47+
</el-form-builder>
48+
```
49+
50+
Vue component:
51+
52+
```javascript
53+
export default {
54+
data() {
55+
return {
56+
formValues: {
57+
title: 'Some Awesome Title'
58+
},
59+
60+
formConfig: {
61+
rules: {
62+
title: [{ required: true, message: 'Please enter the title' }]
63+
},
64+
elements: [
65+
{
66+
tag: 'el-input',
67+
item: {
68+
label: 'Title'
69+
},
70+
detail: {
71+
name: 'title'
72+
}
73+
}
74+
]
75+
}
76+
}
77+
}
78+
}
79+
```
80+
81+
## Core Features
82+
83+
- :camera: Any Component
84+
- :tv: Form Validation
85+
- :watch: Form Model
86+
- :radio: Custom Slot
87+
88+
## Contributing
89+
90+
Looking forward to your pull requests.
91+
92+
## Built With
93+
94+
- [Vue.js](https://github.com/vuejs/vue)
95+
- [ElementUI](https://github.com/ElemeFE/element)
96+
97+
## License
98+
99+
[MIT](http://opensource.org/licenses/MIT)
100+
101+
Copyright (c) 2018 - present, Felix Yang

‎README.zh-CN.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# element-form-builder
2+
3+
[![Version](https://img.shields.io/npm/v/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
4+
[![License](https://img.shields.io/npm/l/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
5+
[![Dependencies](https://img.shields.io/david/codetrial/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
6+
7+
使用 JSON 配置构建 element-ui 动态表单.
8+
9+
:cn: 简体中文 | [:us: English](README.md)
10+
11+
## 在线示例
12+
13+
[:zap: 在线示例](https://element-form-builder.now.sh) | [:book: 参考文档](https://codetrial.github.io/element-form-builder)
14+
15+
![Screen Capture](.github/preview.gif)
16+
17+
## 快速开始
18+
19+
首先你需要有一个 element-ui 项目。如果没有，推荐使用下面的 preset 快速创建一个。
20+
21+
```bash
22+
vue create --preset codetrial/vue-cli-plugin-element your-project
23+
```
24+
25+
### 安装
26+
27+
```bash
28+
yarn add element-form-builder
29+
# OR
30+
npm i element-form-builder
31+
```
32+
33+
### 注册组件
34+
35+
```javascript
36+
import FormBuilder from 'element-form-builder'
37+
38+
Vue.use(FormBuilder)
39+
```
40+
41+
### 见证奇迹的时刻
42+
43+
Vue 模板:
44+
45+
```html
46+
<el-form-builder :config="formConfig" v-model="formValues" label-width="80px">
47+
</el-form-builder>
48+
```
49+
50+
Vue 组件:
51+
52+
```javascript
53+
export default {
54+
name: 'some-component',
55+
data() {
56+
return {
57+
formValues: {
58+
title: 'Some Awesome Title'
59+
},
60+
61+
formConfig: {
62+
rules: {
63+
title: [{ required: true, message: '请输入标题' }]
64+
},
65+
elements: [
66+
{
67+
tag: 'el-input',
68+
item: {
69+
label: '标题'
70+
},
71+
detail: {
72+
name: 'title'
73+
}
74+
}
75+
]
76+
}
77+
}
78+
}
79+
}
80+
```
81+
82+
## 核心功能
83+
84+
- :camera: 支持任意组件
85+
- :tv: 表单校验
86+
- :watch: 表单数据模型
87+
- :radio: 自定义插槽
88+
89+
## 贡献
90+
91+
期待你的 `pull requests`。如果你觉得有帮助，还请多多反馈！
92+
93+
## 技术栈
94+
95+
- [Vue.js](https://github.com/vuejs/vue)
96+
- [ElementUI](https://github.com/ElemeFE/element)
97+
98+
## 许可
99+
100+
[MIT](http://opensource.org/licenses/MIT)
101+
102+
Copyright (c) 2018 - present, Felix Yang

‎dist/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
2-
* Element form-builder v0.1.0
3-
* (c) 2018 Felix Yang
2+
* Element form-builder v1.0.0
3+
* (c) 2019 Felix Yang
44
*/
55
var _extends = Object.assign || function (target) {
66
for (var i = 1; i < arguments.length; i++) {

‎examples/simple-demo/now.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "element-form-builder",
3+
"version": 2,
4+
"alias": "element-form-builder",
5+
"builds": [{ "src": "**", "use": "@now/static" }],
6+
"routes": [
7+
{ "src": "^/js/(.*)", "dest": "/js/$1" },
8+
{ "src": "^/css/(.*)", "dest": "/css/$1" },
9+
{ "src": "^/fonts/(.*)", "dest": "/fonts/$1" },
10+
{ "src": "^/img/(.*)", "dest": "/img/$1" },
11+
{
12+
"src": "^/(favicon|manifest|precache|service-worker|robots)(.*)",
13+
"dest": "/$1$2"
14+
},
15+
{ "src": ".*", "dest": "/index.html" }
16+
]
17+
}

‎examples/simple-demo/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"scripts": {
66
"serve": "vue-cli-service serve",
77
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
8+
"lint": "vue-cli-service lint",
9+
"deploy": "npm run build && now ./dist -A ../now.json && now alias"
910
},
1011
"dependencies": {
1112
"element-ui": "^2.4.11",

‎examples/simple-demo/public/index.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>simple-demo</title>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
8+
<title>ElementUI Form Builder</title>
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but simple-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
<strong
13+
>We're sorry but simple-demo doesn't work properly without JavaScript
14+
enabled. Please enable it to continue.</strong
15+
>
1316
</noscript>
1417
<div id="app"></div>
1518
<!-- built files will be auto injected -->

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "element-form-builder",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"description": "Build element-ui forms with JSON schema.",
55
"main": "dist/index.js",
66
"scripts": {

‎scripts/build.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
const babel = require('rollup-plugin-babel')
22
const rollup = require('rollup')
33
const version = process.env.VERSION || require('../package.json').version
4-
const banner = `/**\n * Element form-builder v${version}\n * (c) 2018 Felix Yang\n */`
4+
const year = new Date().getFullYear()
5+
const banner = `/**\n * Element form-builder v${version}\n * (c) ${year} Felix Yang\n */`
56

67
const inputOptions = {
78
input: 'src/index.js',

0 commit comments

Comments
 (0)