@wirenboard/json-editor 2.5.3-wb13

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.
Files changed (283) hide show
  1. package/.env-dist +2 -0
  2. package/.eslintrc +7 -0
  3. package/.gitattributes +1 -0
  4. package/.github/PULL_REQUEST_TEMPLATE.md +9 -0
  5. package/.github/issue_template +25 -0
  6. package/.github/workflows/build.yml +58 -0
  7. package/.travis.yml +70 -0
  8. package/CHANGELOG.md +915 -0
  9. package/CONTRIBUTING.md +92 -0
  10. package/LICENSE +20 -0
  11. package/Makefile +26 -0
  12. package/README.md +1646 -0
  13. package/README_ADDON.md +573 -0
  14. package/UPGRADING.md +46 -0
  15. package/build/CssToJson.js +55 -0
  16. package/codecept.conf.js +35 -0
  17. package/config/.eslintrc +7 -0
  18. package/config/codeceptjs_helpers.js +139 -0
  19. package/config/helpers.js +10 -0
  20. package/config/karma.conf.js +93 -0
  21. package/config/readme.md +31 -0
  22. package/config/webpack.common.js +75 -0
  23. package/config/webpack.dev.js +15 -0
  24. package/config/webpack.nonmin.js +19 -0
  25. package/config/webpack.prod.js +25 -0
  26. package/dist/jsoneditor.js +14 -0
  27. package/dist/nonmin/jsoneditor.js +29097 -0
  28. package/dist/nonmin/jsoneditor.js.map +1 -0
  29. package/docs/ace_editor.html +56 -0
  30. package/docs/advanced.html +136 -0
  31. package/docs/basic.html +63 -0
  32. package/docs/basic_person.json +26 -0
  33. package/docs/choices.html +86 -0
  34. package/docs/cleave.html +132 -0
  35. package/docs/colorpicker.html +194 -0
  36. package/docs/css_integration.html +135 -0
  37. package/docs/datetime.html +305 -0
  38. package/docs/describedby.html +161 -0
  39. package/docs/enumsource.html +67 -0
  40. package/docs/images/categoriesDemo.png +0 -0
  41. package/docs/images/inheritance_tree.png +0 -0
  42. package/docs/images/jsoneditor.png +0 -0
  43. package/docs/imask.html +192 -0
  44. package/docs/index.html +579 -0
  45. package/docs/materialize_css.html +164 -0
  46. package/docs/meta_schema.json +705 -0
  47. package/docs/multiple_upload_base64.html +65 -0
  48. package/docs/person.json +73 -0
  49. package/docs/polyfills/assign.js +29 -0
  50. package/docs/radio.html +156 -0
  51. package/docs/recursive.html +170 -0
  52. package/docs/select2.html +99 -0
  53. package/docs/selectize.html +100 -0
  54. package/docs/signature.html +42 -0
  55. package/docs/starrating.html +137 -0
  56. package/docs/upload.html +131 -0
  57. package/docs/uuid.html +70 -0
  58. package/docs/wysiwyg.html +56 -0
  59. package/jasmine.json +11 -0
  60. package/json-editor-json-editor-2.5.3-wb13.tgz +0 -0
  61. package/package.json +100 -0
  62. package/release-notes.md +88 -0
  63. package/src/core.js +412 -0
  64. package/src/defaults.js +402 -0
  65. package/src/editor.js +707 -0
  66. package/src/editors/ace.js +89 -0
  67. package/src/editors/array/choices.js +103 -0
  68. package/src/editors/array/select2.js +110 -0
  69. package/src/editors/array/selectize.js +103 -0
  70. package/src/editors/array.css +9 -0
  71. package/src/editors/array.css.js +3 -0
  72. package/src/editors/array.js +818 -0
  73. package/src/editors/autocomplete.js +58 -0
  74. package/src/editors/base64.js +157 -0
  75. package/src/editors/button.js +97 -0
  76. package/src/editors/checkbox.js +95 -0
  77. package/src/editors/choices.css +3 -0
  78. package/src/editors/choices.css.js +3 -0
  79. package/src/editors/choices.js +69 -0
  80. package/src/editors/colorpicker.js +103 -0
  81. package/src/editors/datetime.js +141 -0
  82. package/src/editors/describedby.js +188 -0
  83. package/src/editors/enum.js +136 -0
  84. package/src/editors/hidden.js +127 -0
  85. package/src/editors/index.js +81 -0
  86. package/src/editors/info.js +20 -0
  87. package/src/editors/integer.js +19 -0
  88. package/src/editors/ip.js +36 -0
  89. package/src/editors/jodit.js +64 -0
  90. package/src/editors/multiple.js +409 -0
  91. package/src/editors/multiselect.js +218 -0
  92. package/src/editors/null.js +18 -0
  93. package/src/editors/number.js +51 -0
  94. package/src/editors/object.css +41 -0
  95. package/src/editors/object.css.js +3 -0
  96. package/src/editors/object.js +1290 -0
  97. package/src/editors/radio.js +111 -0
  98. package/src/editors/sceditor.js +72 -0
  99. package/src/editors/select.js +370 -0
  100. package/src/editors/select2.js +110 -0
  101. package/src/editors/selectize.js +112 -0
  102. package/src/editors/signature.js +113 -0
  103. package/src/editors/simplemde.js +100 -0
  104. package/src/editors/starrating.css +52 -0
  105. package/src/editors/starrating.css.js +3 -0
  106. package/src/editors/starrating.js +135 -0
  107. package/src/editors/stepper.js +27 -0
  108. package/src/editors/string.js +372 -0
  109. package/src/editors/table.js +516 -0
  110. package/src/editors/upload.js +321 -0
  111. package/src/editors/uuid.js +56 -0
  112. package/src/iconlib.js +24 -0
  113. package/src/iconlibs/bootstrap2.js +28 -0
  114. package/src/iconlibs/bootstrap3.js +28 -0
  115. package/src/iconlibs/fontawesome3.js +28 -0
  116. package/src/iconlibs/fontawesome4.js +28 -0
  117. package/src/iconlibs/fontawesome5.js +28 -0
  118. package/src/iconlibs/foundation2.js +24 -0
  119. package/src/iconlibs/foundation3.js +28 -0
  120. package/src/iconlibs/index.js +25 -0
  121. package/src/iconlibs/jqueryui.js +28 -0
  122. package/src/iconlibs/materialicons.js +49 -0
  123. package/src/iconlibs/openiconic.js +28 -0
  124. package/src/iconlibs/spectre.js +28 -0
  125. package/src/resolvers.js +128 -0
  126. package/src/schemaloader.js +408 -0
  127. package/src/style.css +150 -0
  128. package/src/style.css.js +3 -0
  129. package/src/templates/default.js +52 -0
  130. package/src/templates/ejs.js +13 -0
  131. package/src/templates/handlebars.js +1 -0
  132. package/src/templates/hogan.js +10 -0
  133. package/src/templates/index.js +21 -0
  134. package/src/templates/lodash.js +9 -0
  135. package/src/templates/markup.js +9 -0
  136. package/src/templates/mustache.js +9 -0
  137. package/src/templates/swig.js +1 -0
  138. package/src/templates/underscore.js +9 -0
  139. package/src/theme.js +659 -0
  140. package/src/themes/barebones.css +35 -0
  141. package/src/themes/barebones.css.js +3 -0
  142. package/src/themes/barebones.js +28 -0
  143. package/src/themes/bootstrap2.js +319 -0
  144. package/src/themes/bootstrap3.css +0 -0
  145. package/src/themes/bootstrap3.css.js +3 -0
  146. package/src/themes/bootstrap3.js +315 -0
  147. package/src/themes/bootstrap4.css +89 -0
  148. package/src/themes/bootstrap4.css.js +3 -0
  149. package/src/themes/bootstrap4.js +690 -0
  150. package/src/themes/bootstrap5.css.js +3 -0
  151. package/src/themes/foundation.js +569 -0
  152. package/src/themes/html.css +60 -0
  153. package/src/themes/html.css.js +3 -0
  154. package/src/themes/html.js +71 -0
  155. package/src/themes/index.js +28 -0
  156. package/src/themes/jqueryui.js +198 -0
  157. package/src/themes/materialize.js +426 -0
  158. package/src/themes/spectre.css +208 -0
  159. package/src/themes/spectre.css.js +3 -0
  160. package/src/themes/spectre.js +406 -0
  161. package/src/themes/tailwind.css +249 -0
  162. package/src/themes/tailwind.css.js +3 -0
  163. package/src/themes/tailwind.js +443 -0
  164. package/src/utilities.js +138 -0
  165. package/src/validator.js +877 -0
  166. package/src/validators/ip-validator.js +51 -0
  167. package/tests/Dockerfile +3 -0
  168. package/tests/README.md +48 -0
  169. package/tests/codeceptjs/codecept.json +42 -0
  170. package/tests/codeceptjs/constrains/if-then-else_test.js +143 -0
  171. package/tests/codeceptjs/core_test.js +217 -0
  172. package/tests/codeceptjs/editors/advanced_test.js +13 -0
  173. package/tests/codeceptjs/editors/array_any_of_test.js +50 -0
  174. package/tests/codeceptjs/editors/array_test.js +900 -0
  175. package/tests/codeceptjs/editors/button_test.js +35 -0
  176. package/tests/codeceptjs/editors/checkbox_test.js +21 -0
  177. package/tests/codeceptjs/editors/colorpicker_test.js +27 -0
  178. package/tests/codeceptjs/editors/datetime_test.js +33 -0
  179. package/tests/codeceptjs/editors/inheritance_test.js +11 -0
  180. package/tests/codeceptjs/editors/integer_test.js +84 -0
  181. package/tests/codeceptjs/editors/issues/issue-gh-812_test.js +32 -0
  182. package/tests/codeceptjs/editors/jodit_test.js +24 -0
  183. package/tests/codeceptjs/editors/multiselect_test.js +8 -0
  184. package/tests/codeceptjs/editors/number_test.js +82 -0
  185. package/tests/codeceptjs/editors/object_test.js +204 -0
  186. package/tests/codeceptjs/editors/option-no_default_values_test.js +42 -0
  187. package/tests/codeceptjs/editors/programmatic-changes_test.js +20 -0
  188. package/tests/codeceptjs/editors/radio_test.js +10 -0
  189. package/tests/codeceptjs/editors/rating_test.js +13 -0
  190. package/tests/codeceptjs/editors/select_test.js +22 -0
  191. package/tests/codeceptjs/editors/stepper_test.js +27 -0
  192. package/tests/codeceptjs/editors/string_test.js +118 -0
  193. package/tests/codeceptjs/editors/table-confirm-delete_test.js +67 -0
  194. package/tests/codeceptjs/editors/tabs_test.js +14 -0
  195. package/tests/codeceptjs/editors/uuid_test.js +21 -0
  196. package/tests/codeceptjs/editors/validation_test.js +14 -0
  197. package/tests/codeceptjs/meta-schema_test.js +17 -0
  198. package/tests/codeceptjs/schemaloader_test.js +13 -0
  199. package/tests/codeceptjs/steps.d.ts +13 -0
  200. package/tests/codeceptjs/steps_file.js +12 -0
  201. package/tests/codeceptjs/themes_test.js +519 -0
  202. package/tests/docker-compose.yml +34 -0
  203. package/tests/fixtures/basic_person.json +26 -0
  204. package/tests/fixtures/nested_object.json +26 -0
  205. package/tests/fixtures/person.json +55 -0
  206. package/tests/fixtures/recursive.json +8 -0
  207. package/tests/fixtures/some_types.json +32 -0
  208. package/tests/fixtures/string.json +3 -0
  209. package/tests/fixtures/validation.json +1140 -0
  210. package/tests/pages/_demo.html +475 -0
  211. package/tests/pages/advanced.html +137 -0
  212. package/tests/pages/anyof.html +80 -0
  213. package/tests/pages/array-anyof.html +142 -0
  214. package/tests/pages/array-checkboxes.html +41 -0
  215. package/tests/pages/array-choices.html +45 -0
  216. package/tests/pages/array-integers.html +37 -0
  217. package/tests/pages/array-move-events.html +61 -0
  218. package/tests/pages/array-multiselects.html +42 -0
  219. package/tests/pages/array-nested-arrays.html +40 -0
  220. package/tests/pages/array-numbers.html +37 -0
  221. package/tests/pages/array-objects.html +42 -0
  222. package/tests/pages/array-ratings.html +40 -0
  223. package/tests/pages/array-selectize.html +51 -0
  224. package/tests/pages/array-selects.html +36 -0
  225. package/tests/pages/array-strings.html +36 -0
  226. package/tests/pages/array.html +42 -0
  227. package/tests/pages/assets/pages.css +130 -0
  228. package/tests/pages/button-callbacks.html +77 -0
  229. package/tests/pages/checkbox-labels.html +114 -0
  230. package/tests/pages/colorpicker-no-3rd-party.html +43 -0
  231. package/tests/pages/colorpicker-use-vanilla-picker.html +50 -0
  232. package/tests/pages/core.html +118 -0
  233. package/tests/pages/datetime.html +76 -0
  234. package/tests/pages/form-name.html +108 -0
  235. package/tests/pages/grid-strict.html +311 -0
  236. package/tests/pages/grid.html +284 -0
  237. package/tests/pages/if-then-else-allOf.html +117 -0
  238. package/tests/pages/inheritance.html +76 -0
  239. package/tests/pages/integer.html +68 -0
  240. package/tests/pages/issues/_template.html +50 -0
  241. package/tests/pages/issues/issue-gh-812.html +110 -0
  242. package/tests/pages/issues/issue-gh-823-meta-schema.html +35 -0
  243. package/tests/pages/issues/issue-gh-848.html +81 -0
  244. package/tests/pages/meta_schema.json +705 -0
  245. package/tests/pages/number.html +89 -0
  246. package/tests/pages/object-no-additional-properties.html +65 -0
  247. package/tests/pages/object-no-duplicated-id.html +68 -0
  248. package/tests/pages/object-required-properties.html +236 -0
  249. package/tests/pages/object-with-dependencies-array.html +46 -0
  250. package/tests/pages/object-with-dependencies.html +60 -0
  251. package/tests/pages/object.html +79 -0
  252. package/tests/pages/oneof.html +103 -0
  253. package/tests/pages/option-no_default_values.html +58 -0
  254. package/tests/pages/programmatic-changes.html +120 -0
  255. package/tests/pages/read-only.html +105 -0
  256. package/tests/pages/select.html +41 -0
  257. package/tests/pages/stepper.html +59 -0
  258. package/tests/pages/string-ace-editor.html +52 -0
  259. package/tests/pages/string-cleave.html +46 -0
  260. package/tests/pages/string-custom-attributes.html +62 -0
  261. package/tests/pages/string-formats.html +52 -0
  262. package/tests/pages/string-formats2.html +57 -0
  263. package/tests/pages/string-jodit-editor.html +49 -0
  264. package/tests/pages/string-sceditor.html +62 -0
  265. package/tests/pages/table-move-events.html +56 -0
  266. package/tests/pages/table.html +46 -0
  267. package/tests/pages/tabs.html +131 -0
  268. package/tests/pages/themes.html +527 -0
  269. package/tests/pages/translate-property.html +247 -0
  270. package/tests/pages/urn.html +93 -0
  271. package/tests/pages/uuid.html +72 -0
  272. package/tests/pages/validation.html +99 -0
  273. package/tests/unit/.eslintrc +8 -0
  274. package/tests/unit/core.spec.js +309 -0
  275. package/tests/unit/defaults.spec.js +40 -0
  276. package/tests/unit/editor.spec.js +160 -0
  277. package/tests/unit/editors/array.spec.js +86 -0
  278. package/tests/unit/editors/object.spec.js +79 -0
  279. package/tests/unit/editors/table.spec.js +91 -0
  280. package/tests/unit/readme.md +35 -0
  281. package/tests/unit/schemaloader.spec.js +498 -0
  282. package/tests/unit/validator.spec.js +94 -0
  283. package/tests/unit/validators/ip-validator.spec.js +62 -0
package/docs/multiple_upload_base64.html ADDED
@@ -0,0 +1,65 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>JSON Editor multiple file upload (base64)</title>
6
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
7
+ </head>
8
+ <body>
9
+ <h1>JSON Editor multiple file upload (base64)</h1>
10
+
11
+ <div>Upload multiple files simultaneously. Add multiple files in the upload dialog and new rows in the picture array will automatically be added. Description will not be overwritten for the current selected element.
12
+ </div>
13
+
14
+ <div id='editor_holder'></div>
15
+ <button id='submit'>Submit (console.log)</button>
16
+
17
+ <script>
18
+ // Initialize the editor with a JSON schema
19
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
20
+ "schema": {
21
+ "type": "object",
22
+ "title": "Car",
23
+ "properties": {
24
+ "pictures": {
25
+ "type": "array",
26
+ "title": "Pictures",
27
+ "items": {
28
+ "type": "object",
29
+ "title": "Image",
30
+ "format": "grid",
31
+ "properties": {
32
+ "file": {
33
+ "type": "string",
34
+ "title": "file",
35
+ "media": {
36
+ "binaryEncoding": "base64",
37
+ "type": "img/png"
38
+ },
39
+ "options": {
40
+ "grid_columns": 6,
41
+ "multiple": true,
42
+ }
43
+ },
44
+ "description": {
45
+ "type": "string",
46
+ "title": "Description",
47
+ "options": {
48
+ "grid_columns": 6
49
+ }
50
+ }
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+ });
57
+
58
+ // Hook up the submit button to log to the console
59
+ document.getElementById('submit').addEventListener('click',function() {
60
+ // Get the value from the editor
61
+ console.log(editor.getValue());
62
+ });
63
+ </script>
64
+ </body>
65
+ </html>
package/docs/person.json ADDED
@@ -0,0 +1,73 @@
1
+ {
2
+ "$ref": "basic_person.json",
3
+ "properties": {
4
+ "location": {
5
+ "type": "object",
6
+ "title": "Location",
7
+ "properties": {
8
+ "city": {
9
+ "type": "string"
10
+ },
11
+ "state": {
12
+ "type": "string"
13
+ },
14
+ "citystate": {
15
+ "type": "string",
16
+ "description": "This is generated automatically from the previous two fields",
17
+ "template": "{{city}}, {{state}}",
18
+ "watch": {
19
+ "city": "person.location.city",
20
+ "state": "person.location.state"
21
+ }
22
+ }
23
+ }
24
+ },
25
+ "pets": {
26
+ "type": "array",
27
+ "format": "table",
28
+ "title": "Pets",
29
+ "uniqueItems": true,
30
+ "items": {
31
+ "type": "object",
32
+ "properties": {
33
+ "type": {
34
+ "type": "string",
35
+ "enum": [
36
+ "cat",
37
+ "dog",
38
+ "bird",
39
+ "reptile",
40
+ "other"
41
+ ],
42
+ "default": "dog"
43
+ },
44
+ "name": {
45
+ "type": "string"
46
+ },
47
+ "fixed": {
48
+ "type": "boolean",
49
+ "title": "spayed / neutered"
50
+ }
51
+ }
52
+ }
53
+ },
54
+ "cars": {
55
+ "type": "array",
56
+ "format": "tabs",
57
+ "title": "Cars",
58
+ "uniqueItems": false,
59
+ "items":{
60
+ "type": "object",
61
+ "title": "Car",
62
+ "properties": {
63
+ "manufacturer": {
64
+ "type": "string"
65
+ },
66
+ "model": {
67
+ "type": "string"
68
+ }
69
+ }
70
+ }
71
+ }
72
+ }
73
+ }
package/docs/polyfills/assign.js ADDED
@@ -0,0 +1,29 @@
1
+ if (typeof Object.assign !== 'function') {
2
+ // Must be writable: true, enumerable: false, configurable: true
3
+ Object.defineProperty(Object, 'assign', {
4
+ value: function assign (target, varArgs) { // .length of function is 2
5
+ 'use strict'
6
+ if (target === null || target === undefined) {
7
+ throw new TypeError('Cannot convert undefined or null to object')
8
+ }
9
+
10
+ var to = Object(target)
11
+
12
+ for (var index = 1; index < arguments.length; index++) {
13
+ var nextSource = arguments[index]
14
+
15
+ if (nextSource !== null && nextSource !== undefined) {
16
+ for (var nextKey in nextSource) {
17
+ // Avoid bugs when hasOwnProperty is shadowed
18
+ if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
19
+ to[nextKey] = nextSource[nextKey]
20
+ }
21
+ }
22
+ }
23
+ }
24
+ return to
25
+ },
26
+ writable: true,
27
+ configurable: true
28
+ })
29
+ }
package/docs/radio.html ADDED
@@ -0,0 +1,156 @@
1
+ <!DOCTYPE HTML>
2
+
3
+ <html>
4
+
5
+ <head>
6
+ <title>radio button editor examples</title>
7
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
8
+
9
+ <!-- Enable responsive viewport -->
10
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
+
12
+ <!-- jQuery -->
13
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
14
+
15
+ <!-- Bootstrap4 -->
16
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
17
+
18
+ <!-- fontawesome5 -->
19
+ <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>
20
+
21
+ <!-- JSON-Editor -->
22
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
23
+
24
+ <style type="text/css">
25
+ body {
26
+ margin: 1em;
27
+ }
28
+
29
+ .radio {
30
+ position: relative;
31
+ display: inline-block;
32
+ min-width: 1.625rem;
33
+ min-height: 1.625rem;
34
+ max-width: 100%;
35
+ }
36
+
37
+ .radio:first-child {
38
+ margin-right: 20px;
39
+ }
40
+
41
+ .radio__field {
42
+ display: none;
43
+ }
44
+
45
+ .radio__icon {
46
+ position: absolute;
47
+ top: -0.125rem;
48
+ left: -0.125rem;
49
+ width: 1.875rem;
50
+ height: 1.875rem;
51
+ -webkit-box-sizing: border-box;
52
+ box-sizing: border-box;
53
+ border: 0.125rem solid #626669;
54
+ border-radius: 50%;
55
+ cursor: pointer;
56
+ }
57
+
58
+ .radio__icon::before {
59
+ position: absolute;
60
+ content: '';
61
+ top: 50%;
62
+ left: 50%;
63
+ width: 0.75rem;
64
+ height: 0.75rem;
65
+ -webkit-transform: translate(-50%, -50%);
66
+ transform: translate(-50%, -50%);
67
+ border-radius: 50%;
68
+ visibility: hidden;
69
+ }
70
+
71
+ .radio__field:checked ~ .radio__icon::before {
72
+ background: #626669;
73
+ visibility: visible;
74
+ }
75
+
76
+ .radio__icon::after {
77
+ position: absolute;
78
+ content: '';
79
+ top: -0.4375rem;
80
+ right: -0.4375rem;
81
+ bottom: -0.4375rem;
82
+ left: -0.4375rem;
83
+ }
84
+
85
+ .radio__label {
86
+ font-weight: 400;
87
+ font-size: 1rem;
88
+ line-height: 1.5rem;
89
+ display: block;
90
+ min-height: 1.625rem;
91
+ padding: 0.0625rem 0 0 2.375rem;
92
+ color: #000;
93
+ cursor: pointer;
94
+ }
95
+
96
+ /* disabled state css */
97
+ .radio__field:disabled:checked ~ .radio__icon,
98
+ .radio__field:disabled:not(:checked) ~ .radio__icon {
99
+ cursor: default;
100
+ border-color: #959899;
101
+ }
102
+
103
+ .radio__field:disabled:checked ~ .radio__label,
104
+ .radio__field:disabled:not(:checked) ~ .radio__label {
105
+ cursor: default;
106
+ color: #959899;
107
+ }
108
+
109
+ .radio__field:disabled:checked ~ .radio__icon::before,
110
+ .radio__field:disabled:not(:checked) ~ .radio__icon::before {
111
+ background-color: #959899;
112
+ }
113
+
114
+ </style>
115
+ </head>
116
+
117
+ <body>
118
+ <h2>String based Radio buttons</h2>
119
+ <div id="form"></div>
120
+ <script type="text/javascript">
121
+
122
+ var options = {
123
+ "theme": "bootstrap4",
124
+ "template": "handlebars",
125
+ "iconlib": "fontawesome5",
126
+ "schema": {
127
+ "title": "radio buttons editor examples",
128
+ "type": "object",
129
+ "format": "grid",
130
+ "properties": {
131
+ "radio": {
132
+ "type": "string",
133
+ "format": "radio",
134
+ "title": "Radio Buttons",
135
+ "description": "Active Radio Buttons",
136
+ "enum": ["Home", "Work"]
137
+ },
138
+ "radio1": {
139
+ "type": "string",
140
+ "format": "radio",
141
+ "title": "Radio Buttons",
142
+ "readonly": true,
143
+ "description": "Disabled/Readonly Radio Buttons",
144
+ "enum": ["Home", "Work"]
145
+ }
146
+ }
147
+ }
148
+ };
149
+
150
+ var element = document.getElementById('form');
151
+ var editor = new JSONEditor(element, options);
152
+
153
+ </script>
154
+ </body>
155
+
156
+ </html>
package/docs/recursive.html ADDED
@@ -0,0 +1,170 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Recursive JSON Editor Example</title>
6
+
7
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
8
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
9
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
10
+
11
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
12
+ <style>
13
+ .row {
14
+ max-width:960px;
15
+ margin: 0 auto;
16
+ padding-bottom: 15px
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <div class='container'>
22
+ <div class='row'>
23
+ <div class='col-md-12'>
24
+ <h1>Recursive JSON Editor Example</h1>
25
+
26
+ <p>
27
+ This example demonstrates the many ways you can use recursive schemas (aka self-referential or circular schemas).
28
+ </p>
29
+ <ul>
30
+ <li>Within array items as long as minLength is 0. See "coworkers" below.</li>
31
+ <li>In non-default properties. See "mother" below (click the "object properties" button and check "mother")</li>
32
+ <li>In oneOf as long as it's not the 1st choice. See "bestFriend" below.</li>
33
+ <li>In patternProperties. Try adding the property "cousin_1" using the "object properties" button.</li>
34
+ </ul>
35
+ </div>
36
+ </div>
37
+ <div class='row'>
38
+ <div class='col-md-12'>
39
+ <button id='submit' class='btn btn-info'>Submit (console.log)</button>
40
+ <button id='restore' class='btn btn-info'>Restore to Default</button>
41
+ <button id='enable_disable' class='btn btn-info'>Disable/Enable Form</button>
42
+ <span id='valid_indicator' class='label label-success'></span>
43
+ </div>
44
+ </div>
45
+ <div class='row'>
46
+ <div class='col-md-12'>
47
+ <div id='editor_holder'></div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <script>
53
+ // Initialize the editor
54
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
55
+ theme: 'spectre',
56
+ iconlib: 'spectre',
57
+ // The schema for the editor
58
+ schema: {
59
+ title: "Person",
60
+ $ref: "#/definitions/person",
61
+ definitions: {
62
+ person: {
63
+ type: "object",
64
+ id: "person",
65
+ // The object will start with only these properties
66
+ defaultProperties: [
67
+ "fname",
68
+ "lname",
69
+ "bestFriend",
70
+ "coworkers"
71
+ ],
72
+ patternProperties: {
73
+ // Self-referntial schema in patternProperties
74
+ "^cousin_[0-9]+$": {
75
+ $ref: "#/definitions/person"
76
+ }
77
+ },
78
+ properties: {
79
+ fname: {
80
+ title: "first name",
81
+ type: "string"
82
+ },
83
+ lname: {
84
+ title: "last name",
85
+ type: "string"
86
+ },
87
+ bestFriend: {
88
+ title: "best friend",
89
+ oneOf: [
90
+ {
91
+ title: "none",
92
+ type: "null"
93
+ },
94
+ // Self-referential schema as 2nd choice in oneOf
95
+ {
96
+ title: "person",
97
+ $ref: "#/definitions/person"
98
+ }
99
+ ]
100
+ },
101
+ coworkers: {
102
+ type: "array",
103
+ // Self-referential schema in array items
104
+ items: {
105
+ title: "Coworker",
106
+ $ref: "#/definitions/person"
107
+ }
108
+ },
109
+ // Self-referential schemas in non-default properties
110
+ mother: {
111
+ title: "mother",
112
+ $ref: "#/definitions/person"
113
+ }
114
+ }
115
+ },
116
+ year: {
117
+ type: "integer",
118
+ pattern: "^[0-9]{4}$",
119
+ minimum: 1900,
120
+ maximum: 2100
121
+ }
122
+ }
123
+ }
124
+ });
125
+
126
+ // Hook up the submit button to log to the console
127
+ document.getElementById('submit').addEventListener('click',function() {
128
+ // Get the value from the editor
129
+ console.log(editor.getValue());
130
+ });
131
+
132
+ // Hook up the Restore to Default button
133
+ document.getElementById('restore').addEventListener('click',function() {
134
+ editor.setValue(starting_value);
135
+ });
136
+
137
+ // Hook up the enable/disable button
138
+ document.getElementById('enable_disable').addEventListener('click',function() {
139
+ // Enable form
140
+ if(!editor.isEnabled()) {
141
+ editor.enable();
142
+ }
143
+ // Disable form
144
+ else {
145
+ editor.disable();
146
+ }
147
+ });
148
+
149
+ // Hook up the validation indicator to update its
150
+ // status whenever the editor changes
151
+ editor.on('change',function() {
152
+ // Get an array of errors from the validator
153
+ var errors = editor.validate();
154
+
155
+ var indicator = document.getElementById('valid_indicator');
156
+
157
+ // Not valid
158
+ if(errors.length) {
159
+ indicator.className = 'label label-danger'
160
+ indicator.textContent = "not valid";
161
+ }
162
+ // Valid
163
+ else {
164
+ indicator.className = 'label label-success'
165
+ indicator.textContent = "valid";
166
+ }
167
+ });
168
+ </script>
169
+ </body>
170
+ </html>
package/docs/select2.html ADDED
@@ -0,0 +1,99 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>JSON Editor Select2 Integration Example</title>
6
+ <!-- jQuery -->
7
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
8
+
9
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
10
+
11
+ <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js "></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css">
13
+ </head>
14
+
15
+ <body>
16
+ <h1>JSON Editor Select2 Integration Example</h1>
17
+
18
+ <p style='margin-bottom:20px;'>This example demonstrates JSONEditor's integration with Select2</p>
19
+
20
+ <div id='editor_holder'></div>
21
+ <button id='submit'>Submit (console.log)</button>
22
+
23
+ <script>
24
+
25
+ // Initialize the editor with a JSON schema
26
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
27
+ schema: {
28
+ type: "object",
29
+ title: "Text",
30
+ required: ["fontSize","color","font","weight","tags","possibleFonts"],
31
+ properties: {
32
+ fontSize: {
33
+ format: "select2",
34
+ type: "integer",
35
+ enum: [10,11,12,14,16,18,20,22,24,36,48,60,72,100],
36
+ default: 24,
37
+ options: {
38
+ // Override defaullt options
39
+ select2: {
40
+ width: 'off'
41
+ }
42
+ }
43
+ },
44
+ color: {
45
+ type: "string",
46
+ format: "select2",
47
+ enum: ["black","red","green","blue","yellow","orange","purple","brown","white","cyan","maagenta"]
48
+ },
49
+ font: {
50
+ type: "string",
51
+ format: "select2",
52
+ enumSource: "possible_fonts",
53
+ watch: {
54
+ "possible_fonts": "root.possibleFonts"
55
+ },
56
+ },
57
+ weight: {
58
+ type: "string",
59
+ format: "select2",
60
+ enum: ["normal","bold","bolder","lighter"],
61
+ options: {
62
+ enum_titles: ["Normal (400)","Bold (700)","Bolder (900)","Lighter (200)"]
63
+ }
64
+ },
65
+ tags: {
66
+ type: "array",
67
+ format: "select2",
68
+ uniqueItems: true,
69
+ items: {
70
+ type: "string",
71
+ enum: ["bold","italic","smallcaps"]
72
+ }
73
+ },
74
+ possibleFonts: {
75
+ type: "array",
76
+ format: 'table',
77
+ items: {
78
+ type: "string"
79
+ },
80
+ default: ["Arial","Times","Helvetica","Comic Sans"],
81
+ options: {
82
+ collapsed: true
83
+ }
84
+ }
85
+ }
86
+ },
87
+ startval: {
88
+ color: "red"
89
+ }
90
+ });
91
+
92
+ // Hook up the submit button to log to the console
93
+ document.getElementById('submit').addEventListener('click',function() {
94
+ // Get the value from the editor
95
+ console.log(editor.getValue());
96
+ });
97
+ </script>
98
+ </body>
99
+ </html>
package/docs/selectize.html ADDED
@@ -0,0 +1,100 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>JSON Editor Selectize Integration Example</title>
6
+ <!-- jQuery -->
7
+ <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
8
+
9
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
10
+
11
+ <script src="https://cdn.jsdelivr.net/npm/selectize@0.12.6/dist/js/standalone/selectize.min.js"></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selectize@0.12.6/dist/css/selectize.default.css">
13
+ </head>
14
+ <body>
15
+ <h1>JSON Editor Selectize Integration Example</h1>
16
+
17
+ <p style='margin-bottom:20px;'>This example demonstrates JSONEditor's integration with Selectize</p>
18
+
19
+ <div id='editor_holder'></div>
20
+ <button id='submit'>Submit (console.log)</button>
21
+
22
+ <script>
23
+ // Initialize the editor with a JSON schema
24
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
25
+ schema: {
26
+ type: "object",
27
+ title: "Text",
28
+ required: ["fontSize","color","font","weight","possibleFonts"],
29
+ properties: {
30
+ fontSize: {
31
+ type: "integer",
32
+ format: "selectize",
33
+ enum: [10,11,12,14,16,18,20,22,24,36,48,60,72,100],
34
+ default: 24,
35
+ options: {
36
+ // Override defaullt options
37
+ selectize: {
38
+ create: true
39
+ }
40
+ }
41
+ },
42
+ color: {
43
+ type: "string",
44
+ format: "selectize",
45
+ enum: ["black","red","green","blue","yellow","orange","purple","brown","white","cyan","magenta"],
46
+ options: {
47
+ // Override defaullt options
48
+ selectize: {
49
+ create: false,
50
+ sortField: 'text'
51
+ }
52
+ }
53
+ },
54
+ font: {
55
+ type: "string",
56
+ format: "selectize",
57
+ enumSource: "possible_fonts",
58
+ watch: {
59
+ "possible_fonts": "root.possibleFonts"
60
+ },
61
+ options: {
62
+ // Override defaullt options
63
+ selectize: {
64
+ create: false,
65
+ sortField: 'text'
66
+ }
67
+ }
68
+ },
69
+ weight: {
70
+ type: "string",
71
+ format: "selectize",
72
+ enum: ["normal","bold","bolder","lighter"],
73
+ options: {
74
+ enum_titles: ["Normal (400)","Bold (700)","Bolder (900)","Lighter (200)"]
75
+ }
76
+ },
77
+ possibleFonts: {
78
+ type: "array",
79
+ format: "selectize",
80
+ uniqueItems: true,
81
+ items: {
82
+ type: "string"
83
+ },
84
+ default: ["Arial","Times","Helvetica","Comic Sans"]
85
+ }
86
+ }
87
+ },
88
+ startval: {
89
+ color: "red"
90
+ }
91
+ });
92
+
93
+ // Hook up the submit button to log to the console
94
+ document.getElementById('submit').addEventListener('click',function() {
95
+ // Get the value from the editor
96
+ console.log(editor.getValue());
97
+ });
98
+ </script>
99
+ </body>
100
+ </html>