npm - @json-editor/json-editor - Versions diffs - 2.5.4 → 2.7.0 - Mend

@json-editor/json-editor 2.5.4 → 2.7.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 (91) hide show

package/.github/workflows/build.yml +12 -3
package/CHANGELOG.md +51 -14
package/README.md +159 -20
package/dist/jsoneditor.js +2 -2
package/dist/nonmin/jsoneditor.js +5483 -3610
package/dist/nonmin/jsoneditor.js.map +1 -1
package/docs/cleave.html +1 -1
package/docs/datetime.html +1 -1
package/docs/describedby.html +1 -1
package/docs/form-submission.html +76 -0
package/docs/index.html +2 -2
package/docs/materialize_css.html +1 -1
package/docs/meta_schema.json +0 -1
package/docs/radio.html +1 -1
package/docs/select2.html +1 -1
package/docs/selectize.html +1 -1
package/docs/starrating.html +1 -1
package/docs/wysiwyg.html +1 -1
package/package.json +28 -26
package/release-notes.md +5 -3
package/src/core.js +36 -37
package/src/defaults.js +9 -2
package/src/editor.js +6 -2
package/src/editors/array.js +12 -1
package/src/editors/autocomplete.js +4 -3
package/src/editors/button.js +1 -1
package/src/editors/multiple.js +2 -0
package/src/editors/multiselect.js +14 -5
package/src/editors/object.js +10 -6
package/src/editors/radio.js +6 -1
package/src/editors/string.js +7 -1
package/src/editors/table.js +21 -2
package/src/editors/upload.js +1 -1
package/src/editors/uuid.js +2 -12
package/src/iconlib.js +1 -1
package/src/schemaloader.js +232 -109
package/src/style.css +3 -0
package/src/style.css.js +1 -1
package/src/theme.js +5 -4
package/src/themes/bootstrap3.js +3 -2
package/src/themes/bootstrap4.js +7 -0
package/src/themes/spectre.js +2 -1
package/src/utilities.js +18 -0
package/src/validator.js +65 -47
package/tests/codeceptjs/codecept.json +1 -1
package/tests/codeceptjs/core_test.js +98 -0
package/tests/codeceptjs/editors/advanced_test.js +1 -1
package/tests/codeceptjs/editors/array_test.js +74 -0
package/tests/codeceptjs/editors/autocomplete_test.js +16 -0
package/tests/codeceptjs/editors/button_test.js +11 -4
package/tests/codeceptjs/editors/integer_test.js +7 -2
package/tests/codeceptjs/editors/jodit_test.js +3 -3
package/tests/codeceptjs/editors/object_test.js +84 -13
package/tests/codeceptjs/editors/range_test.js +12 -0
package/tests/codeceptjs/editors/stepper_test.js +12 -0
package/tests/codeceptjs/editors/uuid_test.js +31 -4
package/tests/codeceptjs/editors/validation_test.js +1 -1
package/tests/docker-compose.yml +1 -1
package/tests/fixtures/definitions.json +22 -0
package/tests/fixtures/properties.json +20 -0
package/tests/fixtures/validation.json +207 -0
package/tests/pages/array-checkboxes-infotext.html +52 -0
package/tests/pages/array-move-events.html +4 -2
package/tests/pages/array-unique-items-sort.html +78 -0
package/tests/pages/autocomplete.html +69 -0
package/tests/pages/button-icons.html +38 -0
package/tests/pages/core.html +4 -2
package/tests/pages/error-messages.html +47 -0
package/tests/pages/grid-strict.html +6 -10
package/tests/pages/grid.html +0 -4
package/tests/pages/issues/issue-gh-812.html +4 -2
package/tests/pages/meta_schema.json +14 -1
package/tests/pages/object-required-properties.html +37 -14
package/tests/pages/object-show-opt-in.html +110 -0
package/tests/pages/object-with-dependencies-array.html +29 -19
package/tests/pages/range.html +60 -0
package/tests/pages/ready.html +43 -0
package/tests/pages/references.html +162 -0
package/tests/pages/stepper-manual.html +57 -0
package/tests/pages/string-simplemde-editor.html +81 -0
package/tests/pages/table-move-events.html +4 -1
package/tests/pages/urn.html +11 -8
package/tests/pages/uuid.html +89 -50
package/tests/pages/validation-messages.json +705 -0
package/tests/unit/core.spec.js +79 -66
package/tests/unit/editor.spec.js +20 -8
package/tests/unit/editors/array.spec.js +3 -2
package/tests/unit/editors/object.spec.js +3 -1
package/tests/unit/editors/table.spec.js +4 -2
package/tests/unit/schemaloader.spec.js +77 -105
package/tests/unit/validator.spec.js +10 -0

package/tests/pages/array-checkboxes-infotext.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+<textarea class="debug" cols="30" rows="10"></textarea>
+<button class='get-value'>Get Value</button>
+<div class='container'></div>
+<script>
+  var container = document.querySelector('.container')
+  var debug = document.querySelector('.debug')
+  var schema = {
+    'title': 'Checkbox with Infotext',
+    'type': 'array',
+    'uniqueItems': true,
+    'items': {
+      'type': 'string',
+      'enum': ['1', '2', '3', '4', '5'],
+      'options': {
+        'enum_titles': ['old a', 'old b'],
+        'enum': [
+          {},
+          {
+            'title': 'b',
+          },
+          {},
+          { 'infoText': 'dd' },
+          {
+            'title': 'e',
+            'infoText': 'ee'
+          }
+        ]
+      }
+    }
+  }
+  var editor = new JSONEditor(container, {
+    schema: schema
+  })
+  document.querySelector('.get-value').addEventListener('click', function () {
+    debug.value = JSON.stringify(editor.getValue())
+  })
+</script>
+</body>
+</html>

package/tests/pages/array-move-events.html CHANGED Viewed

@@ -27,8 +27,8 @@
   var editor = new JSONEditor(container, {
     schema: schema
   });
-  document.querySelector('.get-value').addEventListener('click', function () {
+  editor.promise.then(() => {
+    document.querySelector('.get-value').addEventListener('click', function () {
     debug.value = JSON.stringify(editor.getValue());
   });
@@ -53,6 +53,8 @@
     action.value = 'deleteAllRows'
     console.log('deleteAllRows')
   });
+  })
 </script>

package/tests/pages/array-unique-items-sort.html ADDED Viewed

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+<textarea class="debug" cols="30" rows="10"></textarea>
+<button class='get-value'>Get Value</button>
+<div class='container'></div>
+<script>
+  var container = document.querySelector('.container');
+  var debug = document.querySelector('.debug');
+  var schema = {
+    "properties": {
+      "items": {
+        "title": "items",
+        "name": "ageband",
+        "type": "array",
+        "uniqueItems": true,
+        "format": "checkbox",
+        "items": {
+          "type": "string",
+          "enum": [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+            "13",
+            "14",
+            "15"
+          ],
+          "options": {
+            "enum_titles": [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15"
+            ]
+          }
+        }
+      }
+    }
+  }
+  var editor = new JSONEditor(container, {
+    schema: schema
+  });
+  document.querySelector('.get-value').addEventListener('click', function () {
+    debug.value = JSON.stringify(editor.getValue());
+  });
+</script>
+</body>
+</html>

package/tests/pages/autocomplete.html ADDED Viewed

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Autocomplete</title>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+    <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
+    <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+<div class="container">
+    <textarea class="value form-control" rows="10"></textarea>
+    <div class='json-editor-container'></div>
+</div>
+<script>
+  window.addEventListener('load', function () {
+    var jsonEditorContainer = document.querySelector('.json-editor-container')
+    var value = document.querySelector('.value')
+    JSONEditor.defaults.callbacks = {
+      'autocomplete': {
+        'search': function (editor, input) {
+          var countries = [
+            'germany',
+            'iran',
+            'iraq',
+            'spain'
+          ]
+          if (input.length < 1) { return [] }
+          return countries.filter(country => {
+            return country.toLowerCase().startsWith(input.toLowerCase())
+          })
+        }
+      }
+    }
+    var schema = {
+      'title': 'Test',
+      'type': 'string',
+      'format': 'autocomplete',
+      'options': {
+        'autocomplete': {
+          'search': 'search',
+          'autoSelect': true
+        }
+      }
+    }
+    var editor = new JSONEditor(jsonEditorContainer, {
+      schema: schema,
+      theme: 'bootstrap4',
+      required_by_default: true,
+      show_errors: 'always'
+    })
+    editor.on('change', function () {
+      value.value = JSON.stringify(editor.getValue())
+    })
+  })
+</script>
+</body>
+</html>

package/tests/pages/button-icons.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Button Callbacks</title>
+  <script src="../../dist/jsoneditor.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+<div class='container'></div>
+<script>
+  var container = document.querySelector('.container');
+  var schema = {
+    'type': 'object',
+    'title': 'test',
+    'properties': {
+      'search': {
+        'type': 'button',
+        'title': 'Search',
+        'options': {
+          'button': {
+            'icon': 'search'
+          }
+        }
+      }
+    }
+  }
+  var editor = new JSONEditor(container, {
+    iconlib: 'fontawesome5',
+    schema: schema,
+  });
+</script>
+</body>
+</html>

package/tests/pages/core.html CHANGED Viewed

@@ -58,8 +58,8 @@
   var editor = new JSONEditor(container, {
     schema: schema
   });
-  var changeCallback = function () {
+  editor.promise.then(() => {
+    var changeCallback = function () {
     if (this.getCount()>1) formChanged.style.display = 'block'
   }.bind({
     count:0,
@@ -111,6 +111,8 @@
   destroy.addEventListener('click', function () {
     editor.destroy();
   });
+  })
 </script>

package/tests/pages/error-messages.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>JSONEditor with forms</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+<div class="container">
+    <button id="switch-es">Switch to ES</button>
+    <div id='editor-container'></div>
+</div>
+<script src="../../dist/jsoneditor.js"></script>
+<script>
+  JSONEditor.defaults.languages.es = {}
+  var switchEs = document.querySelector('#switch-es')
+  var editor = null
+  var initEditor = function () {
+    if (editor) {
+      editor.destroy()
+    }
+    editor = new JSONEditor(document.querySelector('#editor-container'), {
+      theme: 'bootstrap4',
+      disable_edit_json: true,
+      disable_properties: true,
+      disable_collapse: true,
+      ajax: true,
+      show_errors: 'always',
+      schema: {
+        $ref: './validation-messages.json',
+      }
+    })
+  }
+  switchEs.addEventListener('click', function () {
+    JSONEditor.defaults.language = 'es'
+    initEditor()
+  })
+  initEditor()
+</script>
+</body>
+</html>

package/tests/pages/grid-strict.html CHANGED Viewed

@@ -34,7 +34,6 @@
 <script>
   var container = document.querySelector('.json-editor-container');
   var editor = document.querySelector('.value');
   var schema = {
     "type": "object",
     "title": "range",
@@ -291,19 +290,16 @@
       schema: schema,
       theme: theme
     });
+    document.getElementById('theme_switcher').addEventListener('change',function() {
+        setTheme(this.value);
+      });
   };
-  document.getElementById('theme_switcher').addEventListener('change',function() {
-    setTheme(this.value);
-  });
   window.addEventListener('load',function() {
-    editor = new JSONEditor(container, {
-      schema: schema,
-      theme: 'bootstrap4'
-    });
     setTheme(this.value);
   });
 </script>

package/tests/pages/grid.html CHANGED Viewed

@@ -268,10 +268,6 @@
   });
   window.addEventListener('load',function() {
-    editor = new JSONEditor(container, {
-      schema: schema,
-      theme: 'bootstrap4'
-    });
     setTheme(this.value);
   });

package/tests/pages/issues/issue-gh-812.html CHANGED Viewed

@@ -59,8 +59,8 @@
           }
         },
       });
-      // Hook up the submit button to log to the console
+      editor.promise.then(() => {
+        // Hook up the submit button to log to the console
       document.getElementById('submit').addEventListener('click',function() {
         // Get the value from the editor
         console.log(editor.getValue());
@@ -105,6 +105,8 @@
           }
         ]
       });
+      })
     </script>
   </body>
 </html>

package/tests/pages/meta_schema.json CHANGED Viewed

@@ -75,7 +75,6 @@
           "enum":[
             "color",
             "date",
-            "datetime",
             "datetime-local",
             "email",
             "month",
@@ -626,6 +625,20 @@
                 "tilte":"title"
               }
             },
+            "enum": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "properties": {
+                  "title": {
+                    "type": "string"
+                  },
+                  "infoText":{
+                    "type": "string"
+                  }
+                }
+              }
+            },
             "grid_columns":{
               "type":"integer",
               "default": 1,

package/tests/pages/object-required-properties.html CHANGED Viewed

@@ -62,22 +62,33 @@
         "type": "string",
         "minLength": 5,
         "options": {
-          "grid_columns": 4
+          "grid_columns": 3
         }
       },
       "number": {
         "title": "number",
         "type": "number",
         "options": {
-          "grid_columns": 4
+          "grid_columns": 3
         }
       },
       "boolean": {
         "title": "boolean",
         "type": "boolean",
         "options": {
-          "grid_columns": 4,
-          "grid_break": true
+          "grid_columns": 3,
+        }
+      },
+      "radio": {
+        "type": "string",
+        "format": "radio",
+        "title": "Radio Buttons",
+        "enum": [
+          "Home",
+          "Work"
+        ],
+        "options": {
+          "grid_columns": 3
         }
       },
       "array": {
@@ -106,21 +117,33 @@
             "title": "string",
             "type": "string",
             "options": {
-              "grid_columns": 4
+              "grid_columns": 3
             }
           },
           "number": {
             "title": "number",
             "type": "number",
             "options": {
-              "grid_columns": 4
+              "grid_columns": 3
             }
           },
           "boolean": {
             "title": "boolean",
             "type": "boolean",
             "options": {
-              "grid_columns": 4
+              "grid_columns": 3
+            }
+          },
+          "radio": {
+            "type": "string",
+            "format": "radio",
+            "title": "Radio Buttons",
+            "enum": [
+              "Home",
+              "Work"
+            ],
+            "options": {
+              "grid_columns": 3
             }
           },
           "array": {
@@ -139,7 +162,7 @@
     }
   };
-  var setTheme = function(theme) {
+  var setTheme = async function(theme) {
     theme = theme || '';
     var mapping = {
@@ -187,30 +210,30 @@
     document.getElementById('theme_stylesheet').href = mapping[theme];
     document.getElementById('theme_switcher').value = JSONEditor.defaults.options.theme;
+    console.log(editor)
     if (editor) {
       editor.destroy();
     }
-    initJsonEditor();
+    await initJsonEditor();
   };
-  initJsonEditor = function () {
+  initJsonEditor = async function () {
     editor = new JSONEditor(container, {
       schema: schema,
       theme: 'bootstrap4',
       show_opt_in: true
     });
+    await editor.promise;
   }
   document.getElementById('theme_switcher').addEventListener('change',function() {
     setTheme(this.value);
   });
-  window.addEventListener('load',function() {
-    initJsonEditor();
+  window.addEventListener('load', async function() {
+    await initJsonEditor();
     getValue.addEventListener('click', function () {
       value.value = JSON.stringify(editor.getValue());

package/tests/pages/object-show-opt-in.html ADDED Viewed

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Object Required Properties</title>
+    <meta charset="utf-8"/>
+      <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+</head>
+<body>
+<div class="container">
+    <label for="show-opt-in">
+        <span>show_opt_in</span>
+        <input id="show-opt-in" type="checkbox">
+    </label>
+    <div id='json-editor-container'></div>
+    <label for="value"></label>
+    <textarea id="value" class="value" style="width: 100%; height: 300px;"></textarea>
+    <button id='get-value'>get value</button>
+    <button id='get-formatted-value'>get formatted value</button>
+</div>
+<script>
+  var container = document.querySelector('#json-editor-container')
+  var value = document.querySelector('#value')
+  var getValue = document.querySelector('#get-value')
+  var getFormattedValue = document.querySelector('#get-formatted-value')
+  var showOptIn = document.querySelector('#show-opt-in')
+  var schema = {
+    'type': 'object',
+    'title': 'option_show_opt_in_false',
+    'options': {
+      'show_opt_in': false
+    },
+    'properties': {
+      'option_show_opt_in_undefined': {
+        'type': 'object',
+        'title': 'option_show_opt_in_undefined',
+        'properties': {
+          'string': {
+            'title': 'optional_string',
+            'type': 'string'
+          }
+        }
+      },
+      'option_show_opt_in_true': {
+        'type': 'object',
+        'title': 'option_show_opt_in_true',
+        'options': {
+          'show_opt_in': true
+        },
+        'properties': {
+          'string': {
+            'title': 'optional_string',
+            'type': 'string'
+          }
+        }
+      },
+      'option_show_opt_in_false': {
+        'type': 'object',
+        'title': 'option_show_opt_in_false',
+        'options': {
+          'show_opt_in': false
+        },
+        'properties': {
+          'string': {
+            'title': 'optional_string',
+            'type': 'string'
+          }
+        }
+      }
+    }
+  }
+  window.addEventListener('DOMContentLoaded', function () {
+    var editor = null
+    var initJSONEditor = function (show_opt_in) {
+      if (editor) {
+        editor.destroy()
+      }
+      editor = new JSONEditor(container, {
+        schema: schema,
+        theme: 'bootstrap4',
+        disable_collapse: true,
+        disable_edit_json: true,
+        show_opt_in: show_opt_in || false
+      })
+    }
+    initJSONEditor(false)
+    showOptIn.addEventListener('click', function (event) {
+      initJSONEditor(event.target.checked)
+    })
+    getValue.addEventListener('click', function () {
+      value.value = JSON.stringify(editor.getValue())
+    })
+    getFormattedValue.addEventListener('click', function () {
+      value.value = JSON.stringify(editor.getValue(), null, 2)
+    })
+  })
+</script>
+</body>
+</html>