Skip to content

Commit e839ad7

Browse files
felixpyfelixpy
committed
Merge branch 'release/1.0.0'
2 parents b5e21fd + 8ab8329 commit e839ad7

21 files changed

+7542
-9
lines changed

‎.github/preview.gif

2.27 MB
Loading

‎README.md

+99-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,101 @@
11
# element-form-builder
22

3-
Build form of element-ui using JSON configuration.
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+
Build element-ui forms with JSON schema.
8+
9+
:us: English | [:cn: 简体中文](README.zh-CN.md)
10+
11+
## Example
12+
13+
[:zap: Live Preview](https://element-form-builder.now.sh) | [:book: Docs](https://codetrial.github.io/element-form-builder)
14+
15+
![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

+102
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

+7-4
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++) {
@@ -96,6 +96,9 @@ var FormBuilder = {
9696
}
9797
}, [].concat(toConsumableArray(vm.$slots.prepend || []), toConsumableArray(vm.renderFormItems(h) || []), toConsumableArray(vm.$slots.append || [])));
9898
},
99+
created: function created() {
100+
this.$emit('input', this.formValues);
101+
},
99102

100103

101104
methods: {
@@ -125,8 +128,8 @@ var FormBuilder = {
125128
},
126129
renderFormItem: function renderFormItem(h, _ref2) {
127130
var tag = _ref2.tag,
128-
_ref2$label = _ref2.label,
129-
label = _ref2$label === undefined ? {} : _ref2$label,
131+
_ref2$item = _ref2.item,
132+
label = _ref2$item === undefined ? {} : _ref2$item,
130133
_ref2$detail = _ref2.detail,
131134
detail = _ref2$detail === undefined ? {} : _ref2$detail;
132135

‎examples/simple-demo/.editorconfig

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎examples/simple-demo/.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
package-lock.json
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw*

‎examples/simple-demo/README.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# simple-demo
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn run build
16+
```
17+
18+
### Run your tests
19+
```
20+
yarn run test
21+
```
22+
23+
### Lints and fixes files
24+
```
25+
yarn run lint
26+
```
27+
28+
### Customize configuration
29+
See [Configuration Reference](https://cli.vuejs.org/config/).

‎examples/simple-demo/babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎examples/simple-demo/now.json

+17
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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "simple-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint",
9+
"deploy": "npm run build && now ./dist -A ../now.json && now alias"
10+
},
11+
"dependencies": {
12+
"element-ui": "^2.4.11",
13+
"vue": "^2.5.17"
14+
},
15+
"devDependencies": {
16+
"@vue/cli-plugin-babel": "^3.2.0",
17+
"@vue/cli-plugin-eslint": "^3.2.0",
18+
"@vue/cli-service": "^3.2.0",
19+
"@vue/eslint-config-standard": "^4.0.0",
20+
"babel-eslint": "^10.0.1",
21+
"eslint": "^5.8.0",
22+
"eslint-plugin-vue": "^5.0.0-0",
23+
"vue-template-compiler": "^2.5.17"
24+
},
25+
"eslintConfig": {
26+
"root": true,
27+
"env": {
28+
"node": true
29+
},
30+
"extends": [
31+
"plugin:vue/essential",
32+
"@vue/standard"
33+
],
34+
"rules": {
35+
"space-before-function-paren": "off"
36+
},
37+
"parserOptions": {
38+
"parser": "babel-eslint"
39+
}
40+
},
41+
"postcss": {
42+
"plugins": {
43+
"autoprefixer": {}
44+
}
45+
},
46+
"browserslist": [
47+
"> 1%",
48+
"last 2 versions",
49+
"not ie <= 8"
50+
]
51+
}

‎examples/simple-demo/public/favicon.ico

1.12 KB
Binary file not shown.

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<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>ElementUI Form Builder</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong
13+
>We're sorry but simple-demo doesn't work properly without JavaScript
14+
enabled. Please enable it to continue.</strong
15+
>
16+
</noscript>
17+
<div id="app"></div>
18+
<!-- built files will be auto injected -->
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)