@json-editor/json-editor 2.9.0-beta.0 → 2.9.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.
Files changed (58) hide show
  1. package/CHANGELOG.md +35 -1
  2. package/README.md +16 -7
  3. package/dist/jsoneditor.js +2 -2
  4. package/dist/jsoneditor.js.LICENSE.txt +15 -0
  5. package/dist/jsoneditor.js.map +1 -0
  6. package/dist/nonmin/jsoneditor.js +989 -127
  7. package/dist/nonmin/jsoneditor.js.map +1 -1
  8. package/docs/index.html +22 -10
  9. package/docs/meta_schema.json +3 -2
  10. package/docs/starrating.html +2 -6
  11. package/package.json +4 -2
  12. package/src/defaults.js +9 -1
  13. package/src/editor.js +17 -3
  14. package/src/editors/array.js +7 -4
  15. package/src/editors/multiselect.js +1 -0
  16. package/src/editors/object.css +3 -3
  17. package/src/editors/object.css.js +1 -1
  18. package/src/editors/object.js +5 -2
  19. package/src/editors/table.js +11 -4
  20. package/src/editors/upload.js +3 -2
  21. package/src/themes/barebones.js +3 -1
  22. package/src/themes/bootstrap5.css +97 -0
  23. package/src/themes/bootstrap5.css.js +3 -0
  24. package/src/themes/bootstrap5.js +623 -0
  25. package/src/themes/index.js +2 -0
  26. package/src/themes/tailwind.js +2 -2
  27. package/tests/codeceptjs/core_test.js +107 -17
  28. package/tests/codeceptjs/editors/array_test.js +6 -5
  29. package/tests/codeceptjs/editors/button_test.js +7 -6
  30. package/tests/codeceptjs/editors/checkbox_test.js +3 -2
  31. package/tests/codeceptjs/editors/integer_test.js +3 -2
  32. package/tests/codeceptjs/editors/issues/issue-gh-1158_test.js +10 -0
  33. package/tests/codeceptjs/editors/issues/issue-gh-1257_test.js +13 -0
  34. package/tests/codeceptjs/editors/number_test.js +2 -1
  35. package/tests/codeceptjs/editors/object_test.js +39 -38
  36. package/tests/codeceptjs/editors/option-no_default_values_test.js +1 -1
  37. package/tests/codeceptjs/editors/programmatic-changes_test.js +3 -2
  38. package/tests/codeceptjs/editors/tabs_test.js +5 -3
  39. package/tests/codeceptjs/editors/validation_test.js +3 -1
  40. package/tests/codeceptjs/meta-schema_test.js +72 -4
  41. package/tests/codeceptjs/schemaloader_test.js +2 -1
  42. package/tests/codeceptjs/test-config.js +3 -0
  43. package/tests/codeceptjs/themes_test.js +14 -0
  44. package/tests/pages/anyof-2.html +90 -0
  45. package/tests/pages/anyof.html +1 -1
  46. package/tests/pages/container-attributes.html +50 -0
  47. package/tests/pages/issues/issue-gh-1158.html +50 -0
  48. package/tests/pages/issues/issue-gh-1233-failing.html +46 -0
  49. package/tests/pages/issues/issue-gh-1233-passing.html +49 -0
  50. package/tests/pages/issues/issue-gh-1257.html +77 -0
  51. package/tests/pages/meta-schema.html +747 -0
  52. package/tests/pages/meta_schema.json +3 -16
  53. package/tests/pages/oneof-2.html +90 -0
  54. package/tests/pages/per-editor-options.html +44 -0
  55. package/tests/pages/stepper.html +2 -2
  56. package/tests/pages/themes.html +2 -0
  57. /package/tests/pages/{table-move-events.html → array-events-table.html} +0 -0
  58. /package/tests/pages/{array-move-events.html → array-events.html} +0 -0
package/docs/index.html CHANGED
@@ -4,13 +4,14 @@
4
4
  <meta charset="utf-8"/>
5
5
  <title>JSON Editor Interactive Example</title>
6
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@1.14.0/src-noconflict/ace.js"></script>
7
8
  <script src="./polyfills/assign.js"></script>
8
9
  <script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script>
9
10
  <link rel='stylesheet' id='theme-link'>
10
11
  <link rel='stylesheet' id='iconlib-link'>
11
12
  </head>
12
13
  <body>
13
- <div class='container grid-xl'>
14
+ <div class='container grid-xl' style="padding: 15px 0;">
14
15
  <div class="row columns md:flex">
15
16
  <div class='col-8 col-md-8 w-8/12'>
16
17
  <h1>Editor</h1>
@@ -20,7 +21,8 @@
20
21
  <div class='col-4 col-md-4 w-4/12'>
21
22
  <div>
22
23
  <a class="btn btn-primary" id="direct-link" title="preserves schema, value, and options">Direct Link</a>
23
- <a class="btn btn-secondary" href="?" title="reload editor with default example settings">reset</a>
24
+ <a class="btn btn-secondary" href="?" title="reload editor with default example settings">Reset</a>
25
+ <a class="btn btn-secondary" href="https://github.com/json-editor/json-editor" title="github" target="_blank">GitHub</a>
24
26
  </div>
25
27
  <h2>JSON Output</h2>
26
28
  <p>You can also make changes to the JSON here and set the value in the editor by clicking "Update Form"</p>
@@ -59,6 +61,7 @@
59
61
  <option value='barebones'>Barebones</option>
60
62
  <option value='bootstrap3'>Bootstrap 3</option>
61
63
  <option value='bootstrap4'>Bootstrap 4</option>
64
+ <option value='bootstrap5'>Bootstrap 5</option>
62
65
  <option value='html'>HTML</option>
63
66
  <option value='spectre'>Spectre</option>
64
67
  <option value='tailwind'>Tailwind</option>
@@ -117,8 +120,7 @@
117
120
  <label for="schema-textarea">You can change the schema and see how the generated form looks. After you make
118
121
  changes, click "Update Schema"</label>
119
122
  <button class='btn btn-primary btn-block' id='setschema'>Update Schema</button>
120
- <textarea id='schema-textarea' rows="30" style="width: 100%; font-family: monospace;"
121
- class='form-control'></textarea>
123
+ <textarea id='schema-textarea' style="height: 100vh;"></textarea>
122
124
  </div>
123
125
  </div>
124
126
  </div>
@@ -252,8 +254,6 @@
252
254
  var libSelect = document.querySelector('#lib-select')
253
255
  var jsonEditorForm = document.querySelector('#json-editor-form')
254
256
  var objectLayoutSelect = document.querySelector('#object-layout-select')
255
- var outputTextarea = document.querySelector('#output-textarea')
256
- var schemaTextarea = document.querySelector('#schema-textarea')
257
257
  var setSchema = document.querySelector('#setschema')
258
258
  var setValue = document.querySelector('#setvalue')
259
259
  var showErrorsSelect = document.querySelector('#show-errors-select')
@@ -261,6 +261,17 @@
261
261
  var themeLink = document.querySelector('#theme-link')
262
262
  var validateTextarea = document.querySelector('#validate-textarea')
263
263
 
264
+ var aceConfig = {
265
+ mode: 'ace/mode/json',
266
+ selection: false,
267
+ maxLines: Infinity,
268
+ minLines: 5
269
+ }
270
+
271
+ var outputTextarea = ace.edit('output-textarea', aceConfig)
272
+
273
+ var schemaTextarea = ace.edit('schema-textarea', aceConfig)
274
+
264
275
  /* -------------------------------------------------------------- parse url */
265
276
 
266
277
  var parseUrl = function () {
@@ -299,13 +310,14 @@
299
310
 
300
311
  var refreshUI = function () {
301
312
  // schema
302
- schemaTextarea.value = JSON.stringify(data.options.schema, null, 2)
313
+ schemaTextarea.setValue(JSON.stringify(data.options.schema, null, 2))
303
314
 
304
315
  // theme
305
316
  var themeMap = {
306
317
  barebones: '',
307
318
  bootstrap3: 'https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css',
308
319
  bootstrap4: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
320
+ bootstrap5: 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css',
309
321
  html: '',
310
322
  spectre: 'https://unpkg.com/spectre.css/dist/spectre.min.css',
311
323
  tailwind: 'https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'
@@ -490,7 +502,7 @@
490
502
  jsoneditor.on('change', function () {
491
503
  // output
492
504
  var json = jsoneditor.getValue()
493
- outputTextarea.value = JSON.stringify(json, null, 2)
505
+ outputTextarea.setValue(JSON.stringify(json, null, 2))
494
506
 
495
507
  // validate
496
508
  var validationErrors = jsoneditor.validate()
@@ -515,12 +527,12 @@
515
527
  /* -------------------------------------------------------- event listeners */
516
528
 
517
529
  setValue.addEventListener('click', function () {
518
- jsoneditor.setValue(JSON.parse(outputTextarea.value))
530
+ jsoneditor.setValue(JSON.parse(outputTextarea.getValue()))
519
531
  })
520
532
 
521
533
  setSchema.addEventListener('click', function () {
522
534
  try {
523
- data.options.schema = JSON.parse(schemaTextarea.value)
535
+ data.options.schema = JSON.parse(schemaTextarea.getValue())
524
536
  } catch (e) {
525
537
  alert('Invalid Schema: ' + e.message)
526
538
  return
package/docs/meta_schema.json CHANGED
@@ -641,9 +641,10 @@
641
641
  }
642
642
  }
643
643
  },
644
-
645
644
  "schema":{
646
- "$ref":"#/definitions/schemaBase",
645
+ "allOf":[{
646
+ "$ref":"#/definitions/schemaBase"
647
+ }],
647
648
  "options":{
648
649
  "keep_oneof_values":false
649
650
  },
package/docs/starrating.html CHANGED
@@ -9,11 +9,7 @@
9
9
  <!-- Enable responsive viewport -->
10
10
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
11
 
12
- <!-- jQuery -->
13
- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/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">
12
+ <link rel="stylesheet" id="theme-link" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
17
13
 
18
14
  <!-- fontawesome5 -->
19
15
  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>
@@ -82,7 +78,7 @@
82
78
  <script type="text/javascript">
83
79
 
84
80
  var options = {
85
- "theme": "bootstrap4",
81
+ "theme": "bootstrap5",
86
82
  "template": "handlebars",
87
83
  "iconlib": "fontawesome5",
88
84
  "schema": {
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@json-editor/json-editor",
3
3
  "title": "JSONEditor",
4
4
  "description": "JSON Schema based editor",
5
- "version": "2.9.0-beta.0",
5
+ "version": "2.9.0",
6
6
  "main": "dist/jsoneditor.js",
7
7
  "author": {
8
8
  "name": "Jeremy Dorn",
@@ -37,7 +37,9 @@
37
37
  "test": "karma start config/karma.conf.js --browsers Chrome --log-level debug",
38
38
  "test-headless": "karma start config/karma.conf.js --singleRun true --browsers ChromeHeadless",
39
39
  "serve-test": "http-server --p 9001",
40
- "docker-test": "docker-compose run --rm node npm install && docker-compose run --rm node npm run build && docker-compose up -d && docker-compose ps && docker-compose exec node codeceptjs -c /repo/tests/codeceptjs/codecept.json run-multiple basic:chrome --invert --grep '@optional'",
40
+ "docker-prepare-codeceptjs": "docker-compose run --rm node npm install && docker-compose run --rm node npm run build && docker-compose up -d && docker-compose ps",
41
+ "docker-codeceptjs": "docker-compose exec node codeceptjs -c /repo/tests/codeceptjs/codecept.json run-multiple basic:chrome --invert --grep '@optional'",
42
+ "docker-test": "npm run docker-prepare-codeceptjs && npm run docker-codeceptjs",
41
43
  "preversion": "npm run test-headless && npm run docker-test",
42
44
  "postversion": "git push && git push --tags && npm publish ./ --access public",
43
45
  "winserver": "cd tests && start cmd /c npm run serve-test .",
package/src/defaults.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { resolvers } from './resolvers.js'
2
+ import { editors } from './editors/index.js'
2
3
 
3
4
  /* default theme */
4
5
  const theme = 'html'
@@ -12,7 +13,6 @@ const callbacks = {}
12
13
  const themes = {}
13
14
  const templates = {}
14
15
  const iconlibs = {}
15
- const editors = {}
16
16
  const languages = {}
17
17
  // eslint-disable-next-line camelcase
18
18
  const custom_validators = []
@@ -229,6 +229,14 @@ languages.en = {
229
229
  * When a hostname is in incorrect format
230
230
  */
231
231
  error_hostname: 'The hostname has the wrong format',
232
+ /**
233
+ * When uploads max size limit is exceeded
234
+ */
235
+ upload_max_size: 'Filesize too large. Max size is ',
236
+ /**
237
+ * When the mime type does not match the type of the file
238
+ */
239
+ upload_wrong_file_format: 'Wrong file format. Allowed format(s): ',
232
240
  /**
233
241
  * Text/Title on Save button
234
242
  */
package/src/editor.js CHANGED
@@ -184,6 +184,7 @@ export class AbstractEditor {
184
184
 
185
185
  setContainer (container) {
186
186
  this.container = container
187
+ this.setContainerAttributes()
187
188
  if (this.schema.id) this.container.setAttribute('data-schemaid', this.schema.id)
188
189
  if (this.schema.type && typeof this.schema.type === 'string') this.container.setAttribute('data-schematype', this.schema.type)
189
190
  this.container.setAttribute('data-schemapath', this.path)
@@ -579,12 +580,13 @@ export class AbstractEditor {
579
580
  if (type === 'number') return this.isDefaultRequired() ? 0.0 : undefined
580
581
  if (type === 'boolean') return this.isDefaultRequired() ? false : undefined
581
582
  if (type === 'integer') return this.isDefaultRequired() ? 0 : undefined
582
- if (type === 'string') return ''
583
+ if (type === 'string') return this.isDefaultRequired() ? '' : undefined
584
+ if (type === 'null') return null
583
585
  if (type === 'object') return {}
584
586
  if (type === 'array') return []
585
587
  }
586
588
 
587
- return null
589
+ return undefined
588
590
  }
589
591
 
590
592
  getTitle () {
@@ -645,7 +647,7 @@ export class AbstractEditor {
645
647
  else if (el.title && used[el.title] <= 1) name = el.title
646
648
  else if (el.format && used[el.format] <= 1) name = el.format
647
649
  else if (el.type && used[el.type] <= 1) name = el.type
648
- else if (el.description && used[el.description] <= 1) name = el.descripton
650
+ else if (el.description && used[el.description] <= 1) name = el.description
649
651
  else if (el.title) name = el.title
650
652
  else if (el.format) name = el.format
651
653
  else if (el.type) name = el.type
@@ -686,6 +688,18 @@ export class AbstractEditor {
686
688
  }
687
689
  }
688
690
 
691
+ setContainerAttributes () {
692
+ if (this.schema.options && this.schema.options.containerAttributes) {
693
+ const containerAttributes = this.schema.options.containerAttributes
694
+ const protectedAttributes = ['data-schemapath', 'data-schematype', 'data-schemaid']
695
+ Object.keys(containerAttributes).forEach(key => {
696
+ if (!protectedAttributes.includes(key.toLowerCase())) {
697
+ this.container.setAttribute(key, containerAttributes[key])
698
+ }
699
+ })
700
+ }
701
+ }
702
+
689
703
  expandCallbacks (scope, options) {
690
704
  const callback = this.defaults.callbacks[scope]
691
705
  Object.entries(options).forEach(([key, value]) => {
package/src/editors/array.js CHANGED
@@ -519,6 +519,7 @@ export class ArrayEditor extends AbstractEditor {
519
519
  let newActiveTab = null
520
520
 
521
521
  const editor = this.rows[i]
522
+ const editorValue = editor.getValue()
522
523
 
523
524
  this.setValue(newval)
524
525
 
@@ -534,7 +535,7 @@ export class ArrayEditor extends AbstractEditor {
534
535
  }
535
536
 
536
537
  this.onChange(true)
537
- this.jsoneditor.trigger('deleteRow', editor)
538
+ this.jsoneditor.trigger('deleteRow', editorValue)
538
539
  })
539
540
 
540
541
  if (holder) {
@@ -734,7 +735,7 @@ export class ArrayEditor extends AbstractEditor {
734
735
  const rows = this.getValue()
735
736
  let newActiveTab = null
736
737
 
737
- const editor = rows.pop()
738
+ const editorValue = rows.pop()
738
739
 
739
740
  this.setValue(rows)
740
741
 
@@ -748,7 +749,7 @@ export class ArrayEditor extends AbstractEditor {
748
749
  }
749
750
 
750
751
  this.onChange(true)
751
- this.jsoneditor.trigger('deleteRow', editor)
752
+ this.jsoneditor.trigger('deleteRow', editorValue)
752
753
  })
753
754
  this.controls.appendChild(button)
754
755
  return button
@@ -765,10 +766,12 @@ export class ArrayEditor extends AbstractEditor {
765
766
  return false
766
767
  }
767
768
 
769
+ const values = this.getValue()
770
+
768
771
  this.empty(true)
769
772
  this.setValue([])
770
773
  this.onChange(true)
771
- this.jsoneditor.trigger('deleteAllRows')
774
+ this.jsoneditor.trigger('deleteAllRows', values)
772
775
  })
773
776
  this.controls.appendChild(button)
774
777
  return button
package/src/editors/multiselect.js CHANGED
@@ -32,6 +32,7 @@ export class MultiSelectEditor extends AbstractEditor {
32
32
 
33
33
  this.select_options = {}
34
34
  this.select_values = {}
35
+ this.option_titles = []
35
36
  this.option_keys = []
36
37
  this.option_enum = []
37
38
 
package/src/editors/object.css CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
 
37
37
  .je-edit-json--textarea {
38
- height: 170px !important;
39
- width: 300px !important;
38
+ height: 170px;
39
+ width: 300px;
40
40
  display: block;
41
- }
41
+ }
package/src/editors/object.css.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /* eslint-disable */
2
- export default {".je-object__title":"display:inline-block",".je-object__controls":"margin:0%200%200%2010px",".je-object__container":"position:relative",".je-object__property-checkbox":"margin:0;height:auto",".property-selector":"width:295px;max-height:160px;padding:5px%200;overflow-y:auto;overflow-x:hidden;padding-left:5px",".property-selector-input":"width:220px;margin-bottom:0;display:inline-block",".json-editor-btntype-toggle":"margin:0%2010px%200%200",".je-edit-json--textarea":"height:170px%20!important;width:300px%20!important;display:block"}
2
+ export default {".je-object__title":"display:inline-block",".je-object__controls":"margin:0%200%200%2010px",".je-object__container":"position:relative",".je-object__property-checkbox":"margin:0;height:auto",".property-selector":"width:295px;max-height:160px;padding:5px%200;overflow-y:auto;overflow-x:hidden;padding-left:5px",".property-selector-input":"width:220px;margin-bottom:0;display:inline-block",".json-editor-btntype-toggle":"margin:0%2010px%200%200",".je-edit-json--textarea":"height:170px;width:300px;display:block"}
3
3
  /* eslint-enable */
package/src/editors/object.js CHANGED
@@ -537,6 +537,8 @@ export class ObjectEditor extends AbstractEditor {
537
537
  editor.postBuild()
538
538
  editor.setOptInCheckbox(editor.header)
539
539
 
540
+ editor.setValue(editor.getDefault(), true)
541
+
540
542
  if (this.editors[key].options.hidden) {
541
543
  holder.style.display = 'none'
542
544
  }
@@ -637,7 +639,8 @@ export class ObjectEditor extends AbstractEditor {
637
639
  this.addproperty_holder.appendChild(spacer)
638
640
 
639
641
  /* Close properties modal if clicked outside modal */
640
- document.addEventListener('click', this.onOutsideModalClick.bind(this))
642
+ this.onOutsideModalClickListener = this.onOutsideModalClick.bind(this)
643
+ document.addEventListener('click', this.onOutsideModalClickListener, true)
641
644
 
642
645
  /* Description */
643
646
  if (this.schema.description) {
@@ -1072,7 +1075,7 @@ export class ObjectEditor extends AbstractEditor {
1072
1075
  this.cached_editors = null
1073
1076
  if (this.editor_holder && this.editor_holder.parentNode) this.editor_holder.parentNode.removeChild(this.editor_holder)
1074
1077
  this.editor_holder = null
1075
- document.removeEventListener('click', this.onOutsideModalClick)
1078
+ document.removeEventListener('click', this.onOutsideModalClickListener, true)
1076
1079
 
1077
1080
  super.destroy()
1078
1081
  }
package/src/editors/table.js CHANGED
@@ -318,6 +318,8 @@ export class TableEditor extends ArrayEditor {
318
318
  }
319
319
 
320
320
  if (typeof value !== 'undefined') this.rows[i].setValue(value)
321
+
322
+ return this.rows[i]
321
323
  }
322
324
 
323
325
  _createDeleteButton (i, holder) {
@@ -335,11 +337,14 @@ export class TableEditor extends ArrayEditor {
335
337
  const j = e.currentTarget.getAttribute('data-i') * 1
336
338
  const value = this.getValue()
337
339
 
340
+ const rows = this.getValue()
341
+ const editorValue = rows[j]
342
+
338
343
  value.splice(j, 1)
339
344
 
340
345
  this.setValue(value)
341
346
  this.onChange(true)
342
- this.jsoneditor.trigger('deleteRow', this.rows[j])
347
+ this.jsoneditor.trigger('deleteRow', editorValue)
343
348
  })
344
349
  holder.appendChild(button)
345
350
  return button
@@ -498,10 +503,10 @@ export class TableEditor extends ArrayEditor {
498
503
  }
499
504
 
500
505
  const rows = this.getValue()
501
- const editor = rows.pop()
506
+ const editorValue = rows.pop()
502
507
  this.setValue(rows)
503
508
  this.onChange(true)
504
- this.jsoneditor.trigger('deleteRow', editor)
509
+ this.jsoneditor.trigger('deleteRow', editorValue)
505
510
  })
506
511
  this.controls.appendChild(button)
507
512
  return button
@@ -518,9 +523,11 @@ export class TableEditor extends ArrayEditor {
518
523
  return false
519
524
  }
520
525
 
526
+ const values = this.getValue()
527
+
521
528
  this.setValue([])
522
529
  this.onChange(true)
523
- this.jsoneditor.trigger('deleteAllRows')
530
+ this.jsoneditor.trigger('deleteAllRows', values)
524
531
  })
525
532
  this.controls.appendChild(button)
526
533
  return button
package/src/editors/upload.js CHANGED
@@ -10,6 +10,7 @@ export class UploadEditor extends AbstractEditor {
10
10
  if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
11
11
  if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
12
12
  if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
13
+ if (this.options.hidden) this.container.style.display = 'none'
13
14
 
14
15
  /* Editor options */
15
16
  this.options = this.expandCallbacks('upload', extend({}, {
@@ -95,9 +96,9 @@ export class UploadEditor extends AbstractEditor {
95
96
  const files = e.target.files || e.dataTransfer.files
96
97
  if (files && files.length) {
97
98
  if (this.options.max_upload_size !== 0 && files[0].size > this.options.max_upload_size) {
98
- this.theme.addInputError(this.uploader, `Filesize too large. Max size is ${this.options.max_upload_size}`)
99
+ this.theme.addInputError(this.uploader, `${this.translate('upload_max_size')} ${this.options.max_upload_size}`)
99
100
  } else if (this.options.mime_type.length !== 0 && !this.isValidMimeType(files[0].type, this.options.mime_type)) {
100
- this.theme.addInputError(this.uploader, `Wrong file format. Allowed format(s): ${this.options.mime_type.toString()}`)
101
+ this.theme.addInputError(this.uploader, `${this.translate('upload_wrong_file_format')} ${this.options.mime_type.toString()}`)
101
102
  } else {
102
103
  if (this.fileDisplay) this.fileDisplay.value = files[0].name
103
104
  let fr = new window.FileReader()
package/src/themes/barebones.js CHANGED
@@ -7,7 +7,9 @@ export class barebonesTheme extends AbstractTheme {
7
7
  const group = this.closest(input, '.form-control')
8
8
  input.errmsg = document.createElement('div')
9
9
  input.errmsg.setAttribute('class', 'errmsg')
10
- group.appendChild(input.errmsg)
10
+ if (group.nodeName) {
11
+ group.appendChild(input.errmsg)
12
+ }
11
13
  } else {
12
14
  input.errmsg.style.display = 'block'
13
15
  }
package/src/themes/bootstrap5.css ADDED
@@ -0,0 +1,97 @@
1
+ .form-group {
2
+ margin-bottom: 1rem;
3
+ }
4
+
5
+ .form-text {
6
+ display: block;
7
+ }
8
+
9
+ .jsoneditor-twbs5-text-button {
10
+ background: none;
11
+ padding: 0;
12
+ border: 0;
13
+ color: currentColor;
14
+ }
15
+ td > .form-group {
16
+ margin-bottom: 0;
17
+ }
18
+ .json-editor-btn-upload {
19
+ margin-top: 1rem;
20
+ }
21
+
22
+ /* Option: object_indent */
23
+ .je-noindent .card {
24
+ padding: 0;
25
+ border: 0;
26
+ }
27
+
28
+ /* no-js handling of tooltips. Option: tooltip = 'css' */
29
+ .je-tooltip:hover::before,
30
+ .je-tooltip:hover::after {
31
+ display: block;
32
+ position: absolute;
33
+ font-size: 0.8em;
34
+ color: #fff;
35
+ }
36
+ .je-tooltip:hover::before {
37
+ border-radius: 0.2em;
38
+ content: attr(title);
39
+ background-color: #000;
40
+ margin-top: -2.5em;
41
+ padding: 0.3em;
42
+ }
43
+
44
+ /* bring select2 input size to default twbs4 size (only matched size for input_size: normal) */
45
+ .select2-container--default .select2-selection--single,
46
+ .select2-container--default
47
+ .select2-selection--single
48
+ .select2-selection__arrow {
49
+ height: calc(1.5em + 0.75rem + 2px);
50
+ }
51
+ .select2-container--default
52
+ .select2-selection--single
53
+ .select2-selection__rendered {
54
+ line-height: calc(1.5em + 0.75rem + 2px);
55
+ }
56
+
57
+ /* selectize */
58
+ .selectize-control.form-control {
59
+ padding: 0;
60
+ }
61
+ /* this cut off options can also be prohibited by setting `copyClassesToDropdown: true` in the slectize options */
62
+ .selectize-dropdown.form-control {
63
+ padding: 0;
64
+ height: auto;
65
+ }
66
+
67
+ /* Upload Editor */
68
+ /* Preview image */
69
+ .je-upload-preview img {
70
+ float: left;
71
+ margin: 0 0.5rem 0.5rem 0;
72
+ max-width: 100%;
73
+ max-height: 5rem;
74
+ }
75
+ .je-dropzone {
76
+ position: relative;
77
+ margin: 0.5rem 0;
78
+ border: 2px dashed black;
79
+ width: 100%;
80
+ height: 60px;
81
+ background: teal;
82
+ transition: all 0.5s;
83
+ }
84
+ .je-dropzone:before {
85
+ position: absolute;
86
+ content: attr(data-text);
87
+ color: rgba(0, 0, 0, 0.6);
88
+ left: 50%;
89
+ top: 50%;
90
+ transform: translate(-50%, -50%);
91
+ }
92
+ .je-dropzone.valid-dropzone {
93
+ background: green;
94
+ }
95
+ .je-dropzone.invalid-dropzone {
96
+ background: red;
97
+ }
package/src/themes/bootstrap5.css.js ADDED
@@ -0,0 +1,3 @@
1
+ /* eslint-disable */
2
+ export default {".form-group":"margin-bottom:1rem",".form-text":"display:block",".jsoneditor-twbs5-text-button":"background:none;padding:0;border:0;color:currentColor","td > .form-group":"margin-bottom:0",".json-editor-btn-upload":"margin-top:1rem",".je-noindent .card":"padding:0;border:0",".je-tooltip:hover::before":"display:block;position:absolute;font-size:0.8em;color:%23fff;border-radius:0.2em;content:attr(title);background-color:%23000;margin-top:-2.5em;padding:0.3em",".je-tooltip:hover::after":"display:block;position:absolute;font-size:0.8em;color:%23fff",".select2-container--default .select2-selection--single":"height:calc(1.5em%20%2B%200.75rem%20%2B%202px)",".select2-container--default .select2-selection--single .select2-selection__arrow":"height:calc(1.5em%20%2B%200.75rem%20%2B%202px)",".select2-container--default .select2-selection--single .select2-selection__rendered":"line-height:calc(1.5em%20%2B%200.75rem%20%2B%202px)",".selectize-control.form-control":"padding:0",".selectize-dropdown.form-control":"padding:0;height:auto",".je-upload-preview img":"float:left;margin:0%200.5rem%200.5rem%200;max-width:100%25;max-height:5rem",".je-dropzone":"position:relative;margin:0.5rem%200;border:2px%20dashed%20black;width:100%25;height:60px;background:teal;transition:all%200.5s",".je-dropzone:before":"position:absolute;content:attr(data-text);color:rgba(0%2C%200%2C%200%2C%200.6);left:50%25;top:50%25;transform:translate(-50%25%2C%20-50%25)",".je-dropzone.valid-dropzone":"background:green",".je-dropzone.invalid-dropzone":"background:red"}
3
+ /* eslint-enable */