@json-editor/json-editor 2.7.0 → 2.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +5 -0
- package/dist/jsoneditor.js +2 -2
- package/dist/nonmin/jsoneditor.js +65 -36
- package/dist/nonmin/jsoneditor.js.map +1 -1
- package/docs/form-submission.html +113 -27
- package/package.json +1 -1
- package/src/defaults.js +1 -0
- package/src/editors/checkbox.js +3 -1
- package/src/editors/hidden.js +3 -1
- package/src/editors/multiselect.js +3 -1
- package/src/editors/radio.js +8 -3
- package/src/editors/select.js +3 -1
- package/src/editors/signature.js +3 -1
- package/src/editors/string.js +3 -1
- package/tests/codeceptjs/core_test.js +6 -0
- package/tests/pages/use-name-attributes.html +206 -0
|
@@ -8,59 +8,145 @@
|
|
|
8
8
|
<body>
|
|
9
9
|
<div class="container">
|
|
10
10
|
<p>
|
|
11
|
-
The form is set to send a
|
|
11
|
+
The form is set to send a <code>GET</code> request to the same page.
|
|
12
12
|
A change event listener has been added to the editor so that whenever the form changes, the editor value
|
|
13
13
|
is stored in a hidden input using <code>JSON.stringify()</code>.
|
|
14
14
|
</p>
|
|
15
|
+
|
|
16
|
+
<p>
|
|
17
|
+
The option <code>use_name_attributes</code> was set to <code>false</code>
|
|
18
|
+
to avoid sending the other field with the request.
|
|
19
|
+
</p>
|
|
15
20
|
<p>
|
|
16
21
|
When the form is submitted only the hidden input is sent in the request.
|
|
17
|
-
|
|
22
|
+
This allows to send data structures like arrays and object.
|
|
18
23
|
Also the same schema that is used to build the form can be used as parameter to backend json validators tools.
|
|
19
24
|
Try yourself, submit the form and look in the network tab of the developer tool.
|
|
20
25
|
</p>
|
|
21
26
|
<div class="form-group"></div>
|
|
22
|
-
<form action="" method="
|
|
27
|
+
<form action="/docs/form-submission.html" method="get">
|
|
23
28
|
<input id="input" type="hidden" name="json">
|
|
24
29
|
<div id='editor-container'></div>
|
|
25
30
|
<input id="submit" class="btn btn-primary" width="100" type="submit">
|
|
26
31
|
</form>
|
|
32
|
+
<br>
|
|
33
|
+
<h2>Get params</h2>
|
|
34
|
+
<pre id="get-params"></pre>
|
|
27
35
|
</div>
|
|
28
36
|
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
|
|
29
37
|
<script>
|
|
38
|
+
var params = {}
|
|
39
|
+
for (const [key, value] of new URLSearchParams(window.location.search).entries()) {
|
|
40
|
+
params[key] = value
|
|
41
|
+
console.log(key, value)
|
|
42
|
+
}
|
|
43
|
+
document.querySelector('#get-params').textContent = JSON.stringify(params, null, 2)
|
|
30
44
|
var config = {
|
|
45
|
+
use_name_attributes: false,
|
|
31
46
|
theme: 'bootstrap4',
|
|
32
47
|
disable_edit_json: true,
|
|
33
48
|
disable_properties: true,
|
|
34
49
|
disable_collapse: true,
|
|
35
|
-
startval: {
|
|
36
|
-
name: 'Peter Griffin',
|
|
37
|
-
pets: [
|
|
38
|
-
{ name: 'Kitty' },
|
|
39
|
-
{ name: 'Brian' }
|
|
40
|
-
]
|
|
41
|
-
},
|
|
42
50
|
schema: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
name
|
|
47
|
-
|
|
48
|
-
|
|
51
|
+
'title': 'Person',
|
|
52
|
+
'type': 'object',
|
|
53
|
+
'required': [
|
|
54
|
+
'name',
|
|
55
|
+
'age',
|
|
56
|
+
'date',
|
|
57
|
+
'favorite_color',
|
|
58
|
+
'gender',
|
|
59
|
+
'location',
|
|
60
|
+
'pets'
|
|
61
|
+
],
|
|
62
|
+
'properties': {
|
|
63
|
+
'name': {
|
|
64
|
+
'type': 'string',
|
|
65
|
+
'description': 'First and Last name',
|
|
66
|
+
'minLength': 4,
|
|
67
|
+
'default': 'Jeremy Dorn'
|
|
68
|
+
},
|
|
69
|
+
'age': {
|
|
70
|
+
'type': 'integer',
|
|
71
|
+
'default': 25,
|
|
72
|
+
'minimum': 18,
|
|
73
|
+
'maximum': 99
|
|
74
|
+
},
|
|
75
|
+
'favorite_color': {
|
|
76
|
+
'type': 'string',
|
|
77
|
+
'format': 'color',
|
|
78
|
+
'title': 'favorite color',
|
|
79
|
+
'default': '#ffa500'
|
|
80
|
+
},
|
|
81
|
+
'gender': {
|
|
82
|
+
'type': 'string',
|
|
83
|
+
'enum': [
|
|
84
|
+
'male',
|
|
85
|
+
'female',
|
|
86
|
+
'other'
|
|
87
|
+
]
|
|
49
88
|
},
|
|
50
|
-
|
|
51
|
-
type: '
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
89
|
+
'date': {
|
|
90
|
+
'type': 'string',
|
|
91
|
+
'format': 'date',
|
|
92
|
+
'options': {
|
|
93
|
+
'flatpickr': {}
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
'location': {
|
|
97
|
+
'type': 'object',
|
|
98
|
+
'title': 'Location',
|
|
99
|
+
'properties': {
|
|
100
|
+
'city': {
|
|
101
|
+
'type': 'string',
|
|
102
|
+
'default': 'San Francisco'
|
|
103
|
+
},
|
|
104
|
+
'state': {
|
|
105
|
+
'type': 'string',
|
|
106
|
+
'default': 'CA'
|
|
107
|
+
},
|
|
108
|
+
'citystate': {
|
|
109
|
+
'type': 'string',
|
|
110
|
+
'description': 'This is generated automatically from the previous two fields',
|
|
111
|
+
'template': '{{city}}, {{state}}',
|
|
112
|
+
'watch': {
|
|
113
|
+
'city': 'location.city',
|
|
114
|
+
'state': 'location.state'
|
|
61
115
|
}
|
|
62
116
|
}
|
|
63
117
|
}
|
|
118
|
+
},
|
|
119
|
+
'pets': {
|
|
120
|
+
'type': 'array',
|
|
121
|
+
'format': 'table',
|
|
122
|
+
'title': 'Pets',
|
|
123
|
+
'uniqueItems': true,
|
|
124
|
+
'items': {
|
|
125
|
+
'type': 'object',
|
|
126
|
+
'title': 'Pet',
|
|
127
|
+
'properties': {
|
|
128
|
+
'type': {
|
|
129
|
+
'type': 'string',
|
|
130
|
+
'enum': [
|
|
131
|
+
'cat',
|
|
132
|
+
'dog',
|
|
133
|
+
'bird',
|
|
134
|
+
'reptile',
|
|
135
|
+
'other'
|
|
136
|
+
],
|
|
137
|
+
'default': 'dog'
|
|
138
|
+
},
|
|
139
|
+
'name': {
|
|
140
|
+
'type': 'string'
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
'default': [
|
|
145
|
+
{
|
|
146
|
+
'type': 'dog',
|
|
147
|
+
'name': 'Walter'
|
|
148
|
+
}
|
|
149
|
+
]
|
|
64
150
|
}
|
|
65
151
|
}
|
|
66
152
|
}
|
package/package.json
CHANGED
package/src/defaults.js
CHANGED
package/src/editors/checkbox.js
CHANGED
|
@@ -12,7 +12,9 @@ export class CheckboxEditor extends AbstractEditor {
|
|
|
12
12
|
register () {
|
|
13
13
|
super.register()
|
|
14
14
|
if (!this.input) return
|
|
15
|
-
this.
|
|
15
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
16
|
+
this.input.setAttribute('name', this.formname)
|
|
17
|
+
}
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
unregister () {
|
package/src/editors/hidden.js
CHANGED
|
@@ -7,7 +7,9 @@ export class HiddenEditor extends AbstractEditor {
|
|
|
7
7
|
register () {
|
|
8
8
|
super.register()
|
|
9
9
|
if (!this.input) return
|
|
10
|
-
this.
|
|
10
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
11
|
+
this.input.setAttribute('name', this.formname)
|
|
12
|
+
}
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
unregister () {
|
|
@@ -9,7 +9,9 @@ export class MultiSelectEditor extends AbstractEditor {
|
|
|
9
9
|
register () {
|
|
10
10
|
super.register()
|
|
11
11
|
if (!this.input) return
|
|
12
|
-
this.
|
|
12
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
13
|
+
this.input.setAttribute('name', this.formname)
|
|
14
|
+
}
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
unregister () {
|
package/src/editors/radio.js
CHANGED
|
@@ -29,11 +29,16 @@ export class RadioEditor extends SelectEditor {
|
|
|
29
29
|
|
|
30
30
|
for (let i = 0; i < this.enum_values.length; i++) {
|
|
31
31
|
/* form radio elements */
|
|
32
|
-
|
|
33
|
-
name: this.formname,
|
|
32
|
+
const attributes = {
|
|
34
33
|
id: `${this.formname}[${i}]`,
|
|
35
34
|
value: this.enum_values[i]
|
|
36
|
-
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
38
|
+
attributes.name = this.formname
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
this.input = this.theme.getFormRadio(attributes)
|
|
37
42
|
|
|
38
43
|
/* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
|
|
39
44
|
this.setInputAttributes(['id', 'value', 'name'])
|
package/src/editors/select.js
CHANGED
|
@@ -30,7 +30,9 @@ export class SelectEditor extends AbstractEditor {
|
|
|
30
30
|
register () {
|
|
31
31
|
super.register()
|
|
32
32
|
if (!this.input) return
|
|
33
|
-
this.
|
|
33
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
34
|
+
this.input.setAttribute('name', this.formname)
|
|
35
|
+
}
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
unregister () {
|
package/src/editors/signature.js
CHANGED
|
@@ -20,7 +20,9 @@ export class SignatureEditor extends StringEditor {
|
|
|
20
20
|
|
|
21
21
|
/* Create canvas for signature pad */
|
|
22
22
|
const canvas = document.createElement('canvas')
|
|
23
|
-
|
|
23
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
24
|
+
canvas.setAttribute('name', formname)
|
|
25
|
+
}
|
|
24
26
|
canvas.classList.add('signature')
|
|
25
27
|
signatureContainer.appendChild(canvas)
|
|
26
28
|
|
package/src/editors/string.js
CHANGED
|
@@ -5,7 +5,9 @@ export class StringEditor extends AbstractEditor {
|
|
|
5
5
|
register () {
|
|
6
6
|
super.register()
|
|
7
7
|
if (!this.input) return
|
|
8
|
-
this.
|
|
8
|
+
if (this.jsoneditor.options.use_name_attributes) {
|
|
9
|
+
this.input.setAttribute('name', this.formname)
|
|
10
|
+
}
|
|
9
11
|
this.input.setAttribute('aria-label', this.formname)
|
|
10
12
|
}
|
|
11
13
|
|
|
@@ -4,6 +4,12 @@ var assert = require('assert')
|
|
|
4
4
|
|
|
5
5
|
Feature('core')
|
|
6
6
|
|
|
7
|
+
Scenario('should not set inputs name attributes @use-name-attributes', async (I) => {
|
|
8
|
+
I.amOnPage('use-name-attributes.html')
|
|
9
|
+
I.waitForElement('.je-ready')
|
|
10
|
+
I.dontSeeElement('[name]')
|
|
11
|
+
})
|
|
12
|
+
|
|
7
13
|
Scenario('should have class je-ready when ready @core @ready', async (I) => {
|
|
8
14
|
I.amOnPage('ready.html')
|
|
9
15
|
I.waitForElement('.je-ready')
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"/>
|
|
5
|
+
<title>Use name attributes</title>
|
|
6
|
+
<script src="../../dist/jsoneditor.js"></script>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div class='container'></div>
|
|
10
|
+
<script>
|
|
11
|
+
var schema = {
|
|
12
|
+
"type": "object",
|
|
13
|
+
"title": "root",
|
|
14
|
+
"properties": {
|
|
15
|
+
"booleans": {
|
|
16
|
+
"type": "object",
|
|
17
|
+
"title": "booleans",
|
|
18
|
+
"properties": {
|
|
19
|
+
"boolean": {
|
|
20
|
+
"type": "boolean",
|
|
21
|
+
"title": "default"
|
|
22
|
+
},
|
|
23
|
+
"boolean-enum": {
|
|
24
|
+
"type": "boolean",
|
|
25
|
+
"title": "boolean enum select",
|
|
26
|
+
"format": "select",
|
|
27
|
+
"options": {
|
|
28
|
+
"enum_titles": [
|
|
29
|
+
"No",
|
|
30
|
+
"Yes"
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"boolean-enum-radio": {
|
|
35
|
+
"type": "boolean",
|
|
36
|
+
"title": "boolean enum radio",
|
|
37
|
+
"format": "radio",
|
|
38
|
+
"options": {
|
|
39
|
+
"enum_titles": [
|
|
40
|
+
"No",
|
|
41
|
+
"Yes"
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
"strings": {
|
|
48
|
+
"type": "object",
|
|
49
|
+
"title": "strings",
|
|
50
|
+
"properties": {
|
|
51
|
+
"string": {
|
|
52
|
+
"type": "string",
|
|
53
|
+
"title": "default"
|
|
54
|
+
},
|
|
55
|
+
"string-enum": {
|
|
56
|
+
"type": "string",
|
|
57
|
+
"title": "string enum select",
|
|
58
|
+
"enum": [
|
|
59
|
+
"albert",
|
|
60
|
+
"betti",
|
|
61
|
+
"carl"
|
|
62
|
+
],
|
|
63
|
+
"options": {
|
|
64
|
+
"enum_titles": [
|
|
65
|
+
"Albert",
|
|
66
|
+
"Betti",
|
|
67
|
+
"Carl"
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
"string-radio": {
|
|
72
|
+
"type": "string",
|
|
73
|
+
"title": "string enum radio",
|
|
74
|
+
"format": "radio",
|
|
75
|
+
"enum": [
|
|
76
|
+
"albert",
|
|
77
|
+
"betti",
|
|
78
|
+
"carl"
|
|
79
|
+
],
|
|
80
|
+
"options": {
|
|
81
|
+
"enum_titles": [
|
|
82
|
+
"Albert",
|
|
83
|
+
"Betti",
|
|
84
|
+
"Carl"
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
"numbers": {
|
|
91
|
+
"type": "object",
|
|
92
|
+
"title": "numbers",
|
|
93
|
+
"properties": {
|
|
94
|
+
"number": {
|
|
95
|
+
"type": "number",
|
|
96
|
+
"title": "number"
|
|
97
|
+
},
|
|
98
|
+
"number-enum": {
|
|
99
|
+
"type": "number",
|
|
100
|
+
"title": "number enum select",
|
|
101
|
+
"enum": [
|
|
102
|
+
1.5,
|
|
103
|
+
2.5,
|
|
104
|
+
3.5
|
|
105
|
+
],
|
|
106
|
+
"options": {
|
|
107
|
+
"enum_titles": [
|
|
108
|
+
"small (1.5)",
|
|
109
|
+
"medium (2.5)",
|
|
110
|
+
"big (3.5)"
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"number-enum-radio": {
|
|
115
|
+
"type": "number",
|
|
116
|
+
"title": "number enum radio",
|
|
117
|
+
"format": "radio",
|
|
118
|
+
"enum": [
|
|
119
|
+
1.5,
|
|
120
|
+
2.5,
|
|
121
|
+
3.5
|
|
122
|
+
],
|
|
123
|
+
"options": {
|
|
124
|
+
"enum_titles": [
|
|
125
|
+
"small (1.5)",
|
|
126
|
+
"medium (2.5)",
|
|
127
|
+
"big (3.5)"
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
"integers": {
|
|
134
|
+
"type": "object",
|
|
135
|
+
"title": "integers",
|
|
136
|
+
"properties": {
|
|
137
|
+
"integer": {
|
|
138
|
+
"type": "integer",
|
|
139
|
+
"title": "integer"
|
|
140
|
+
},
|
|
141
|
+
"integer-enum": {
|
|
142
|
+
"type": "integer",
|
|
143
|
+
"title": "integer enum select",
|
|
144
|
+
"enum": [
|
|
145
|
+
1,
|
|
146
|
+
2,
|
|
147
|
+
3
|
|
148
|
+
],
|
|
149
|
+
"options": {
|
|
150
|
+
"enum_titles": [
|
|
151
|
+
"small (1)",
|
|
152
|
+
"medium (2)",
|
|
153
|
+
"big (3)"
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
"integer-enum-radio": {
|
|
158
|
+
"type": "number",
|
|
159
|
+
"title": "integer enum radio",
|
|
160
|
+
"format": "radio",
|
|
161
|
+
"enum": [
|
|
162
|
+
1,
|
|
163
|
+
2,
|
|
164
|
+
3
|
|
165
|
+
],
|
|
166
|
+
"options": {
|
|
167
|
+
"enum_titles": [
|
|
168
|
+
"small (1.5)",
|
|
169
|
+
"medium (2.5)",
|
|
170
|
+
"big (3.5)"
|
|
171
|
+
]
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
"arrays": {
|
|
177
|
+
"type": "object",
|
|
178
|
+
"title": "arrays",
|
|
179
|
+
"properties": {
|
|
180
|
+
"string-array": {
|
|
181
|
+
"type": "array",
|
|
182
|
+
"title": "strings color",
|
|
183
|
+
"default": [
|
|
184
|
+
"#6d80dd",
|
|
185
|
+
"#b80f0f",
|
|
186
|
+
"#280606"
|
|
187
|
+
],
|
|
188
|
+
"items": {
|
|
189
|
+
"type": "string",
|
|
190
|
+
"title": "color",
|
|
191
|
+
"format": "color"
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
var editor = new JSONEditor(document.querySelector('.container'), {
|
|
201
|
+
use_name_attributes: false,
|
|
202
|
+
schema: schema
|
|
203
|
+
})
|
|
204
|
+
</script>
|
|
205
|
+
</body>
|
|
206
|
+
</html>
|