@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
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>JSON Editor WYSIWYG Example</title>
6
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/ace-builds@latest/src-noconflict/ace.min.js"></script>
8
+ </head>
9
+ <body>
10
+ <h1>JSON Editor ACE Editor Example</h1>
11
+
12
+ <p style='margin-bottom:20px;'>This example demonstrates JSON Editor's integration with ACE ditor</p>
13
+
14
+ <div id='editor_holder'></div>
15
+ <button id='submit'>Submit (console.log)</button>
16
+
17
+ <script>
18
+ // Set ACE Editor basePath to same path as CDN Library.
19
+ window.ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/ace-builds@latest/src-noconflict/");
20
+
21
+ // Initialize the editor with a JSON schema
22
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
23
+ schema: {
24
+ "title": "SQL Editor",
25
+ "type": "object",
26
+ "required": [
27
+ "query"
28
+ ],
29
+ "properties": {
30
+ "query": {
31
+ "type": "string",
32
+ "format": "sql",
33
+ "options": {
34
+ "ace": {
35
+ "theme": "ace/theme/vibrant_ink",
36
+ "tabSize": 2,
37
+ "useSoftTabs": true,
38
+ "wrap": true
39
+ }
40
+ }
41
+ }
42
+ }
43
+ },
44
+ startval: {
45
+ "query": "SELECT f.animal_id AS animal_id, \n f.animal_type AS animal_type, \n d.animal_description AS animal_description, \n f.animal_name AS animal_name, \n 'Farm' AS domain, \n att.animal_type_description AS description \n \nFROM tutorial.farm f \n \nLEFT OUTER JOIN tutorial.animal_types att \nON f.animal_type = att.animal_type_id \n \nLEFT OUTER JOIN tutorial.animal_descriptions d \nON f.animal_description = d.animal_description_id \n \nUNION ALL \n \nSELECT w.animal_id AS animal_id, \n w.animal_type AS animal_type, \n d.animal_description AS animal_description, \n w.animal_name AS animal_name, \n 'Wild' AS domain, \n att.animal_type_description AS description \n \nFROM tutorial.wild w \n \nLEFT OUTER JOIN tutorial.animal_types att \nON w.animal_type = att.animal_type_id \n \nLEFT OUTER JOIN tutorial.animal_descriptions d \nON w.animal_description = d.animal_description_id \n \nWHERE w.animal_id IN (SELECT animal_id FROM wild WHERE animal_id <= 3)"
46
+ }
47
+ });
48
+
49
+ // Hook up the submit button to log to the console
50
+ document.getElementById('submit').addEventListener('click',function() {
51
+ // Get the value from the editor
52
+ console.log(editor.getValue());
53
+ });
54
+ </script>
55
+ </body>
56
+ </html>
@@ -0,0 +1,136 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Advanced JSON Editor Example</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>Advanced JSON Editor Example</h1>
10
+
11
+ <p>This example demonstrates the following:</p>
12
+ <ul>
13
+ <li>Loading external schemas via ajax (using $ref)</li>
14
+ <li>Setting the editor's value from javascript (try the Restore to Default button)</li>
15
+ <li>Validating the editor's contents (try setting name to an empty string)</li>
16
+ <li>Macro templates (try changing the city or state fields and watch the citystate field update automatically)</li>
17
+ <li>Enabling and disabling editor fields</li>
18
+ </ul>
19
+
20
+ <button id='submit'>Submit (console.log)</button>
21
+ <button id='restore'>Restore to Default</button>
22
+ <button id='enable_disable'>Disable/Enable Form</button>
23
+ <span id='valid_indicator'></span>
24
+
25
+ <div id='editor_holder'></div>
26
+
27
+ <script>
28
+ // This is the starting value for the editor
29
+ // We will use this to seed the initial editor
30
+ // and to provide a "Restore to Default" button.
31
+ var starting_value = [
32
+ {
33
+ name: "John Smith",
34
+ age: 35,
35
+ gender: "male",
36
+ location: {
37
+ city: "San Francisco",
38
+ state: "California",
39
+ citystate: ""
40
+ },
41
+ pets: [
42
+ {
43
+ name: "Spot",
44
+ type: "dog",
45
+ fixed: true
46
+ },
47
+ {
48
+ name: "Whiskers",
49
+ type: "cat",
50
+ fixed: false
51
+ }
52
+ ]
53
+ }
54
+ ];
55
+
56
+ // Initialize the editor
57
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
58
+ // Enable fetching schemas via ajax
59
+ ajax: true,
60
+
61
+ // The schema for the editor
62
+ schema: {
63
+ type: "array",
64
+ title: "People",
65
+ format: "tabs",
66
+ items: {
67
+ title: "Person",
68
+ headerTemplate: "{{i}} - {{self.name}}",
69
+ oneOf: [
70
+ {
71
+ $ref: "basic_person.json",
72
+ title: "Basic Person"
73
+ },
74
+ {
75
+ $ref: "person.json",
76
+ title: "Complex Person"
77
+ }
78
+ ]
79
+ }
80
+ },
81
+
82
+ // Seed the form with a starting value
83
+ startval: starting_value,
84
+
85
+ // Disable additional properties
86
+ no_additional_properties: true,
87
+
88
+ // Require all properties by default
89
+ required_by_default: true
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
+
98
+ // Hook up the Restore to Default button
99
+ document.getElementById('restore').addEventListener('click',function() {
100
+ editor.setValue(starting_value);
101
+ });
102
+
103
+ // Hook up the enable/disable button
104
+ document.getElementById('enable_disable').addEventListener('click',function() {
105
+ // Enable form
106
+ if(!editor.isEnabled()) {
107
+ editor.enable();
108
+ }
109
+ // Disable form
110
+ else {
111
+ editor.disable();
112
+ }
113
+ });
114
+
115
+ // Hook up the validation indicator to update its
116
+ // status whenever the editor changes
117
+ editor.on('change',function() {
118
+ // Get an array of errors from the validator
119
+ var errors = editor.validate();
120
+
121
+ var indicator = document.getElementById('valid_indicator');
122
+
123
+ // Not valid
124
+ if(errors.length) {
125
+ indicator.style.color = 'red';
126
+ indicator.textContent = "not valid";
127
+ }
128
+ // Valid
129
+ else {
130
+ indicator.style.color = 'green';
131
+ indicator.textContent = "valid";
132
+ }
133
+ });
134
+ </script>
135
+ </body>
136
+ </html>
@@ -0,0 +1,63 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Basic JSON Editor Example</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>Basic JSON Editor Example</h1>
10
+
11
+ <div id='editor_holder'></div>
12
+ <button id='submit'>Submit (console.log)</button>
13
+
14
+ <script>
15
+ // Initialize the editor with a JSON schema
16
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
17
+ schema: {
18
+ type: "object",
19
+ title: "Car",
20
+ properties: {
21
+ make: {
22
+ type: "string",
23
+ enum: [
24
+ "Toyota",
25
+ "BMW",
26
+ "Honda",
27
+ "Ford",
28
+ "Chevy",
29
+ "VW"
30
+ ]
31
+ },
32
+ model: {
33
+ type: "string"
34
+ },
35
+ year: {
36
+ type: "integer",
37
+ enum: [
38
+ 1995,1996,1997,1998,1999,
39
+ 2000,2001,2002,2003,2004,
40
+ 2005,2006,2007,2008,2009,
41
+ 2010,2011,2012,2013,2014
42
+ ],
43
+ default: 2008
44
+ },
45
+ safety: {
46
+ type: "integer",
47
+ format: "rating",
48
+ maximum: "5",
49
+ exclusiveMaximum: false,
50
+ readonly: false
51
+ }
52
+ }
53
+ }
54
+ });
55
+
56
+ // Hook up the submit button to log to the console
57
+ document.getElementById('submit').addEventListener('click',function() {
58
+ // Get the value from the editor
59
+ console.log(editor.getValue());
60
+ });
61
+ </script>
62
+ </body>
63
+ </html>
@@ -0,0 +1,26 @@
1
+ {
2
+ "title": "Person",
3
+ "type": "object",
4
+ "id": "person",
5
+ "properties": {
6
+ "name": {
7
+ "type": "string",
8
+ "description": "First and Last name",
9
+ "minLength": 4
10
+ },
11
+ "age": {
12
+ "type": "integer",
13
+ "default": 21,
14
+ "minimum": 18,
15
+ "maximum": 99
16
+ },
17
+ "gender": {
18
+ "type": "string",
19
+ "enum": [
20
+ "male",
21
+ "female",
22
+ "other"
23
+ ]
24
+ }
25
+ }
26
+ }
@@ -0,0 +1,86 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>JSON Editor Choices Integration Example</title>
6
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
9
+ <style>
10
+ .choices > * {
11
+ box-sizing: border-box;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <h1>JSON Editor Choices Integration Example</h1>
17
+
18
+ <p style='margin-bottom:20px;'>This example demonstrates JSONEditor's integration with Choices</p>
19
+
20
+ <div id='editor_holder'></div>
21
+ <button id='submit'>Submit (console.log)</button>
22
+
23
+ <script>
24
+ // Initialize the editor with a JSON schema
25
+ var editor = new JSONEditor(document.getElementById('editor_holder'),{
26
+ schema: {
27
+ type: "object",
28
+ title: "Text",
29
+ required: ["fontSize","color","font","weight","possibleFonts"],
30
+ properties: {
31
+ fontSize: {
32
+ format: "choices",
33
+ type: "integer",
34
+ enum: [10,11,12,14,16,18,20,22,24,36,48,60,72,100],
35
+ default: 24,
36
+ options: {
37
+ choices_options: {
38
+ shouldSort: false
39
+ }
40
+ }
41
+ },
42
+ color: {
43
+ type: "string",
44
+ format: "choices",
45
+ enum: ["black","red","green","blue","yellow","orange","purple","brown","white","cyan","magenta"]
46
+ },
47
+ font: {
48
+ type: "string",
49
+ format: "choices",
50
+ enumSource: "possible_fonts",
51
+ watch: {
52
+ "possible_fonts": "root.possibleFonts"
53
+ }
54
+ },
55
+ weight: {
56
+ type: "string",
57
+ format: "choices",
58
+ enum: ["normal","bold","bolder","lighter"],
59
+ options: {
60
+ enum_titles: ["Normal (400)","Bold (700)","Bolder (900)","Lighter (200)"]
61
+ }
62
+ },
63
+ possibleFonts: {
64
+ type: "array",
65
+ format: "choices",
66
+ uniqueItems: true,
67
+ items: {
68
+ type: "string"
69
+ },
70
+ default: ["Arial","Times","Helvetica","Comic Sans"]
71
+ }
72
+ }
73
+ },
74
+ startval: {
75
+ color: "red"
76
+ }
77
+ });
78
+
79
+ // Hook up the submit button to log to the console
80
+ document.getElementById('submit').addEventListener('click',function() {
81
+ // Get the value from the editor
82
+ console.log(editor.getValue());
83
+ });
84
+ </script>
85
+ </body>
86
+ </html>
@@ -0,0 +1,132 @@
1
+ <!DOCTYPE HTML>
2
+
3
+ <html>
4
+
5
+ <head>
6
+ <title>Cleave.js 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.6.1/css/all.css'>
20
+
21
+ <!-- Cleave.js -->
22
+ <script src="https://cdn.jsdelivr.net/npm/cleave.js@1.5.8/dist/cleave.min.js" crossorigin="anonymous"></script>
23
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cleave.js@1.5.8/dist/addons/cleave-phone.dk.js"></script>
24
+ <!-- JSON-Editor -->
25
+ <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
26
+
27
+ <style type="text/css">
28
+ body {
29
+ margin: 1em;
30
+ }
31
+
32
+ </style>
33
+ </head>
34
+
35
+ <body>
36
+ <h2>Example showing how to use Cleave.js to format your &lt;input/&gt; content when you are typing.</h2>
37
+
38
+ <p>For documentation on the Cleave.js options, look at <a href="https://github.com/nosir/cleave.js" target="_blank" title="Cleave.js Github">Cleave.js</a> Github page. You can also find a lot of examples in this <a href="https://jsfiddle.net/nosir/aLnhdf3z/" target="_blank" title="Cleave.js JSFiddle">JSFiddle</a> page.</p>
39
+ <div id="form"></div>
40
+ <script type="text/javascript">
41
+
42
+ // Show the creditcard type in the field 'help-block' section
43
+ // Possible values: uatp, amex, diners, discover, mastercard, dankort, instapayment, jcb15, jcb, maestro, visa, mir, unionPay, general, generalStrict, unknown
44
+ var creditCardTypeChangedHandler = function(type) {
45
+ var el = this.element.nextSibling;
46
+ if (el && el.classList.contains('help-block')) {
47
+ el.innerHTML = 'Card type: <strong>' + type + '</strong>';
48
+ }
49
+ }
50
+
51
+ var options = {
52
+ "theme": "bootstrap4",
53
+ "template": "handlebars",
54
+ "iconlib": "fontawesome5",
55
+ "schema": {
56
+ "title": "Cleave.js editor examples",
57
+ "id": "test",
58
+ "type": "object",
59
+ "format": "grid",
60
+ "options": {
61
+ "disable_edit_json": false,
62
+ "disable_properties": false
63
+ },
64
+ "properties": {
65
+ "creditcard": {
66
+ "type": "string",
67
+ "title": "Credit Card",
68
+ "description": " ",
69
+ "options": {
70
+ "grid_columns": 6,
71
+ "inputAttributes": {
72
+ "placeholder": "enter credit card number"
73
+ },
74
+ "cleave": {
75
+ "creditCard": true,
76
+ "onCreditCardTypeChanged": creditCardTypeChangedHandler
77
+ }
78
+ }
79
+ },
80
+ "phone": {
81
+ "type": "string",
82
+ "title": "Phone number",
83
+ "description": "Phone number formatting (danish) + prefix",
84
+ "options": {
85
+ "grid_columns": 6,
86
+ "cleave": {
87
+ "phone": true,
88
+ "phoneRegionCode": "dk",
89
+ "prefix": "+45 ",
90
+ "noImmediatePrefix": false
91
+ }
92
+ }
93
+ },
94
+ "prefix": {
95
+ "type": "string",
96
+ "title": "Prefix",
97
+ "description": "Prefix",
98
+ "options": {
99
+ "grid_columns": 6,
100
+ "cleave": {
101
+ "prefix": "JE-"
102
+ }
103
+ }
104
+ },
105
+ "blocks": {
106
+ "type": "string",
107
+ "title": "Serial number",
108
+ "description": "Blocks, uppercase formatting",
109
+ "options": {
110
+ "grid_columns": 6,
111
+ "inputAttributes": {
112
+ "placeholder": "Enter serial number",
113
+ },
114
+ "cleave": {
115
+ "blocks": [3, 5, 5],
116
+ "uppercase": true,
117
+ "delimiter": "-",
118
+ "delimiterLazyShow": true
119
+ }
120
+ }
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+ var element = document.getElementById('form');
127
+ var editor = new JSONEditor(element, options);
128
+
129
+ </script>
130
+ </body>
131
+
132
+ </html>