Skip to content

Commit 9ba3c1d

Browse files
yourtionyourtion
committed
🎨 add .prettierrc.js and format code
1 parent 1a08bb5 commit 9ba3c1d

File tree

7 files changed

+548
-512
lines changed

7 files changed

+548
-512
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ module.exports = {
22
extends: 'guo/vue',
33
rules: {
44
'valid-jsdoc': 'off',
5+
'array-bracket-spacing': 'off'
56
}
67
};

‎.prettierrc.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// .prettierrc.js
2+
module.exports = {
3+
printWidth: 120,
4+
singleQuote: true,
5+
trailingComma: "es5",
6+
};

‎example/App.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<template>
32
<div id="app">
43
<Subscription/>
@@ -25,4 +24,4 @@ export default {
2524
color: #2c3e50;
2625
margin-top: 60px;
2726
}
28-
</style>
27+
</style>

‎example/components/Subscription.vue

Lines changed: 145 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -20,157 +20,156 @@
2020
</template>
2121

2222
<script>
23-
// import JsonEditor from '../../lib/json-editor.min.js';
24-
import JsonEditor from '../../src/JsonEditor.vue';
25-
import { Option } from 'element-ui';
26-
27-
JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
28-
// vm is the JsonEditor VM
29-
30-
const labelWidth = '120px';
31-
const model = vm.data;
32-
const rules = {};
33-
34-
function parseField(fields) {
35-
Object.keys(fields).forEach((key) => {
36-
if(key.indexOf('$') === 0 && key !== '$sub') return;
37-
const field = fields[key];
38-
if(field.$sub) {
39-
return parseField(field);
40-
}
41-
if(!field.name) return;
42-
rules[field.name] = [];
43-
// http://element.eleme.io/#/en-US/component/form#validation
44-
const type = field.schemaType === 'array' && field.type === 'radio' ? 'string' : field.schemaType;
45-
const required = field.required;
46-
const message = field.title;
47-
const trigger = [ 'radio', 'checkbox', 'select' ].includes(field.type) ? 'change' : 'blur';
48-
rules[field.name].push({ type, required, message, trigger });
49-
50-
if(field.minlength !== undefined || field.maxlength !== undefined) {
51-
const max = field.maxlength || 255;
52-
const min = field.minlength || 0;
53-
const msg = `Length must between ${ min } and ${ max }`;
54-
rules[field.name].push({ min, max, message: msg, trigger });
23+
import JsonEditor from '../../src/JsonEditor.vue';
24+
import { Option } from 'element-ui';
25+
26+
JsonEditor.setComponent('form', 'el-form', ({ vm }) => {
27+
// vm is the JsonEditor VM
28+
29+
const labelWidth = '120px';
30+
const model = vm.data;
31+
const rules = {};
32+
33+
function parseField(fields) {
34+
Object.keys(fields).forEach(key => {
35+
if (key.indexOf('$') === 0 && key !== '$sub') return;
36+
const field = fields[key];
37+
if (field.$sub) {
38+
return parseField(field);
39+
}
40+
if (!field.name) return;
41+
rules[field.name] = [];
42+
// http://element.eleme.io/#/en-US/component/form#validation
43+
const type = field.schemaType === 'array' && field.type === 'radio' ? 'string' : field.schemaType;
44+
const required = field.required;
45+
const message = field.title;
46+
const trigger = ['radio', 'checkbox', 'select'].includes(field.type) ? 'change' : 'blur';
47+
rules[field.name].push({ type, required, message, trigger });
48+
49+
if (field.minlength !== undefined || field.maxlength !== undefined) {
50+
const max = field.maxlength || 255;
51+
const min = field.minlength || 0;
52+
const msg = `Length must between ${ min } and ${ max }`;
53+
rules[field.name].push({ min, max, message: msg, trigger });
54+
}
55+
});
56+
}
57+
58+
parseField(vm.fields);
59+
60+
// returning the form props
61+
return { labelWidth, rules, model };
62+
});
63+
64+
// http://element.eleme.io/#/en-US/component/form#validation
65+
JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({
66+
prop: field.name,
67+
}));
68+
69+
JsonEditor.setComponent('email', 'el-input');
70+
JsonEditor.setComponent('url', 'el-input');
71+
JsonEditor.setComponent('number', 'el-input-number');
72+
JsonEditor.setComponent('text', 'el-input');
73+
JsonEditor.setComponent('textarea', 'el-input');
74+
JsonEditor.setComponent('checkbox', 'el-checkbox');
75+
JsonEditor.setComponent('checkboxgroup', 'el-checkbox-group');
76+
JsonEditor.setComponent('radio', 'el-radio');
77+
JsonEditor.setComponent('select', 'el-select');
78+
JsonEditor.setComponent('switch', 'el-switch');
79+
JsonEditor.setComponent('color', 'el-color-picker');
80+
JsonEditor.setComponent('rate', 'el-rate');
81+
82+
// You can also use the component object
83+
JsonEditor.setComponent('option', Option);
84+
85+
// By default `<h1/>` is used to render the form title.
86+
// To override this, use the `title` type:
87+
JsonEditor.setComponent('title', 'h2');
88+
89+
// By default `<p/>` is used to render the form title.
90+
// To override this, use the `description` type:
91+
JsonEditor.setComponent('description', 'small');
92+
93+
// By default `<div/>` is used to render the message error.
94+
// To override this, use the `error` type:
95+
JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
96+
type: 'error',
97+
title: vm.error,
98+
}));
99+
100+
export default {
101+
data: () => ({
102+
schema: require('@/schema/newsletter'),
103+
model: {
104+
name: 'Yourtion',
105+
sub: {
106+
sEmail: 'yourtion@gmail.com',
107+
},
108+
},
109+
}),
110+
computed: {
111+
jsonString() {
112+
return JSON.stringify(this.model, null, 2).trim();
113+
},
114+
},
115+
methods: {
116+
submit(_e) {
117+
this.$refs.JsonEditor.form().validate(valid => {
118+
if (valid) {
119+
// this.model contains the valid data according your JSON Schema.
120+
// You can submit your model to the server here
121+
122+
// eslint-disable-next-line no-console
123+
console.log('model', JSON.stringify(this.model));
124+
this.$refs.JsonEditor.clearErrorMessage();
125+
} else {
126+
this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields');
127+
return false;
55128
}
56129
});
57-
}
58-
59-
parseField(vm.fields);
60-
61-
// returning the form props
62-
return { labelWidth, rules, model };
63-
});
64-
65-
// http://element.eleme.io/#/en-US/component/form#validation
66-
JsonEditor.setComponent('label', 'el-form-item', ({ field }) => ({
67-
prop: field.name,
68-
}));
69-
70-
JsonEditor.setComponent('email', 'el-input');
71-
JsonEditor.setComponent('url', 'el-input');
72-
JsonEditor.setComponent('number', 'el-input-number');
73-
JsonEditor.setComponent('text', 'el-input');
74-
JsonEditor.setComponent('textarea', 'el-input');
75-
JsonEditor.setComponent('checkbox', 'el-checkbox');
76-
JsonEditor.setComponent('checkboxgroup', 'el-checkbox-group');
77-
JsonEditor.setComponent('radio', 'el-radio');
78-
JsonEditor.setComponent('select', 'el-select');
79-
JsonEditor.setComponent('switch', 'el-switch');
80-
JsonEditor.setComponent('color', 'el-color-picker');
81-
JsonEditor.setComponent('rate', 'el-rate');
82-
83-
// You can also use the component object
84-
JsonEditor.setComponent('option', Option);
85-
86-
// By default `<h1/>` is used to render the form title.
87-
// To override this, use the `title` type:
88-
JsonEditor.setComponent('title', 'h2');
89-
90-
// By default `<p/>` is used to render the form title.
91-
// To override this, use the `description` type:
92-
JsonEditor.setComponent('description', 'small');
93-
94-
// By default `<div/>` is used to render the message error.
95-
// To override this, use the `error` type:
96-
JsonEditor.setComponent('error', 'el-alert', ({ vm }) => ({
97-
type: 'error',
98-
title: vm.error,
99-
}));
100-
101-
export default {
102-
data: () => ({
103-
schema: require('@/schema/newsletter'),
104-
model: {
105-
name: 'Yourtion',
106-
sub: {
107-
sEmail: 'yourtion@gmail.com',
108-
},
109-
},
110-
}),
111-
computed: {
112-
jsonString() {
113-
return JSON.stringify(this.model, null, 2).trim();
114-
},
115130
},
116-
methods: {
117-
submit(_e) {
118-
this.$refs.JsonEditor.form().validate((valid) => {
119-
if (valid) {
120-
// this.model contains the valid data according your JSON Schema.
121-
// You can submit your model to the server here
122-
123-
// eslint-disable-next-line no-console
124-
console.log('model', JSON.stringify(this.model));
125-
this.$refs.JsonEditor.clearErrorMessage();
126-
} else {
127-
this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields');
128-
return false;
129-
}
130-
});
131-
},
132-
reset() {
133-
this.$refs.JsonEditor.reset();
134-
},
131+
reset() {
132+
this.$refs.JsonEditor.reset();
135133
},
136-
components: { JsonEditor },
137-
};
134+
},
135+
components: { JsonEditor },
136+
};
138137
</script>
139138

140139
<style>
141-
.form {
142-
text-align: left;
143-
width: 90%;
144-
margin: auto;
145-
}
146-
147-
h2 {
148-
font-size: 1.7em;
149-
text-align: center;
150-
margin-top: 0;
151-
margin-bottom: .2em
152-
}
153-
154-
h2 + small {
155-
display: block;
156-
text-align: center;
157-
margin-bottom: 1.2em
158-
}
159-
160-
small {
161-
line-height: 20px;
162-
display: block;
163-
}
164-
165-
.el-alert {
166-
margin-bottom: 15px
167-
}
168-
169-
.el-form .sub {
170-
margin-left: 10%;
171-
}
172-
173-
.json {
174-
text-align: left;
175-
}
140+
.form {
141+
text-align: left;
142+
width: 90%;
143+
margin: auto;
144+
}
145+
146+
h2 {
147+
font-size: 1.7em;
148+
text-align: center;
149+
margin-top: 0;
150+
margin-bottom: 0.2em;
151+
}
152+
153+
h2 + small {
154+
display: block;
155+
text-align: center;
156+
margin-bottom: 1.2em;
157+
}
158+
159+
small {
160+
line-height: 20px;
161+
display: block;
162+
}
163+
164+
.el-alert {
165+
margin-bottom: 15px;
166+
}
167+
168+
.el-form .sub {
169+
margin-left: 10%;
170+
}
171+
172+
.json {
173+
text-align: left;
174+
}
176175
</style>

0 commit comments

Comments
 (0)