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/object-with-dependencies-array.html CHANGED Viewed

@@ -9,28 +9,38 @@
 <div id="editor"></div>
 <script>
   const schema = {
-    "title": "Person",
-    "type": "object",
-    "properties": {
-      "answerA": {
-        "title": "Question A:",
-        "type": "string",
-        "minLength": 1,
-        "enum": [
-          "A",
-          "B",
-          "C"
-        ]
+    'title': 'Test',
+    'type': 'object',
+    'properties': {
+      'question_1': {
+        'type': 'string',
+        'title': 'Question 1',
+        'enum': ['a', 'b', 'c', 'd']
       },
-      "answerB": {
-        "title": "Question B:",
-        "type": "string",
+      'question_1_feedback': {
+        'type': 'info',
+        'title': 'Question 1 is correct',
         "options": {
           "dependencies": {
-            "answerA": [
-              "A",
-              "B"
-            ]
+            "question_1": ['b', 'd']
+          }
+        }
+      },
+      'question_2': {
+        "type": "array",
+        "uniqueItems": true,
+        'title': 'Question 2',
+        "items": {
+          "type": "string",
+          'enum': ['a', 'b', 'c', 'd']
+        }
+      },
+      'question_2_feedback': {
+        'type': 'info',
+        'title': 'Question 2 is correct',
+        "options": {
+          "dependencies": {
+            "question_2": [['b', 'c']]
           }
         }
       }

package/tests/pages/range.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Range</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://cdn.jsdelivr.net/npm/mathjs@5.3.1/dist/math.min.js" class="external_mathjs"></script>
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+<div class="container">
+  <textarea class="value form-control" rows="10"></textarea>
+  <button class='get-value'>Get Value</button>
+  <button class='set-value'>Set Value</button>
+  <div class='json-editor-container'></div>
+</div>
+<script>
+  var jsonEditorContainer = document.querySelector('.json-editor-container');
+  var value = document.querySelector('.value');
+  var schema = {
+    "title": "Settings",
+    "type": "object",
+    "properties": {
+      "speed": {
+        "title": "speed",
+        "description": "1 - Slowest, 10 - Fastest",
+        "type": "integer",
+        "minimum": 1,
+        "maximum": 10,
+        "format": "range"
+      }
+    }
+  }
+  var editor = new JSONEditor(jsonEditorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    use_default_values: false,
+    required_by_default: true,
+    show_errors: 'always'
+  });
+  document.querySelector('.get-value').addEventListener('click', function () {
+    value.value = JSON.stringify(editor.getValue());
+    console.log(editor.getValue());
+  });
+  document.querySelector('.set-value').addEventListener('click', function () {
+    editor.setValue({number_range: 2})
+  });
+</script>
+</body>
+</html>

package/tests/pages/ready.html ADDED Viewed

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Ready</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="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+<div class="container">
+  <div class='json-editor-container'></div>
+</div>
+<script>
+  var jsonEditorContainer = document.querySelector('.json-editor-container');
+  var schema = {
+    "title": "Test",
+    "type": "object",
+    "properties": {
+      "test": {
+        "title": "test",
+        "type": "string",
+        "default": "lorem ipsum"
+      }
+    }
+  }
+  var editor = new JSONEditor(jsonEditorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    use_default_values: false,
+    required_by_default: true,
+    show_errors: 'always'
+  });
+</script>
+</body>
+</html>

package/tests/pages/references.html ADDED Viewed

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>References JSON Editor Example</title>
+    <script src="../../dist/jsoneditor.js"></script>
+  </head>
+  <body>
+    <h1>References JSON Editor Example</h1>
+    <p>This example demonstrates the following:</p>
+    <ul>
+      <li>Loading external schemas via ajax</li>
+      <li>Referencing internal schema definitions</li>
+      <li>Referencing external schema definitions</li>
+      <li>Referencing external schema properties</li>
+    </ul>
+    <button id='submit'>Submit (console.log)</button>
+    <button id='restore'>Restore to Default</button>
+    <button id='enable_disable'>Disable/Enable Form</button>
+    <span id='valid_indicator'></span>
+    <div id='editor_holder'></div>
+    <script>
+      // This is the starting value for the editor
+      // We will use this to seed the initial editor
+      // and to provide a "Restore to Default" button.
+      var starting_value = [
+        {
+          name: "John Smith",
+          age: 35,
+          gender: "male",
+          location: {
+            city: "San Francisco",
+            state: "California",
+            citystate: ""
+          },
+          pets: [
+            {
+              name: "Spot",
+              type: "dog",
+              fixed: true
+            },
+            {
+              name: "Whiskers",
+              type: "cat",
+              fixed: false
+            }
+          ]
+        }
+      ];
+      // Initialize the editor
+      var editor = new JSONEditor(document.getElementById('editor_holder'),{
+        // Enable fetching schemas via ajax
+        ajax: true,
+        // The schema for the editor
+        schema: {
+          $schema: "https://json-schema.org/draft-04/schema",
+          title: "Example Organization",
+          type: "object",
+          definitions: {
+            taxid: {
+              type: "string",
+              title: "Tax ID"
+            },
+            external: {
+              $ref: "../fixtures/string.json"
+            }
+          },
+          properties: {
+            external: {
+              $ref: "#/definitions/external"
+            },
+            orgid: { $ref: "#/definitions/taxid" },
+            address: {
+              $ref: "../fixtures/definitions.json#/definitions/address"
+            },
+            people: {
+              type: "array",
+              title: "People",
+              format: "tabs",
+              items: {
+                title: "Person",
+                headerTemplate: "{{i}} - {{self.name}}",
+                oneOf: [
+                  {
+                    $ref: "../fixtures/basic_person.json",
+                    title: "Basic Person"
+                  },
+                  {
+                    $ref: "../fixtures/person.json",
+                    title: "Complex Person"
+                  }
+                ]
+              }
+            },
+            link: {
+              $ref: '../fixtures/definitions.json#/properties/address'
+            }
+          }
+        },
+        // Seed the form with a starting value
+        startval: starting_value,
+        // Disable additional properties
+        no_additional_properties: true,
+        // Require all properties by default
+        required_by_default: true
+      });
+      // 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());
+      });
+      // Hook up the Restore to Default button
+      document.getElementById('restore').addEventListener('click',function() {
+        editor.setValue(starting_value);
+      });
+      // Hook up the enable/disable button
+      document.getElementById('enable_disable').addEventListener('click',function() {
+        // Enable form
+        if(!editor.isEnabled()) {
+          editor.enable();
+        }
+        // Disable form
+        else {
+          editor.disable();
+        }
+      });
+      // Hook up the validation indicator to update its
+      // status whenever the editor changes
+      editor.on('change',function() {
+        // Get an array of errors from the validator
+        var errors = editor.validate();
+        var indicator = document.getElementById('valid_indicator');
+        // Not valid
+        if(errors.length) {
+          indicator.style.color = 'red';
+          indicator.textContent = "not valid";
+        }
+        // Valid
+        else {
+          indicator.style.color = 'green';
+          indicator.textContent = "valid";
+        }
+      });
+    </script>
+  </body>
+</html>

package/tests/pages/stepper-manual.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Stepper</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://cdn.jsdelivr.net/npm/mathjs@5.3.1/dist/math.min.js" class="external_mathjs"></script>
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+<div class="container">
+  <textarea class="value form-control" rows="10"></textarea>
+  <button class='get-value'>Get Value</button>
+  <button class='set-value'>Set Value</button>
+  <div class='json-editor-container'></div>
+</div>
+<script>
+  var jsonEditorContainer = document.querySelector('.json-editor-container');
+  var value = document.querySelector('.value');
+  var schema = {
+    "type": "object",
+    "title": "range",
+    "properties": {
+      "stepper": {
+        'type': 'integer',
+        'format': 'stepper',
+        "default": ""
+      }
+    }
+  };
+  var editor = new JSONEditor(jsonEditorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    use_default_values: false,
+    required_by_default: true,
+    show_errors: 'always'
+  });
+  document.querySelector('.get-value').addEventListener('click', function () {
+    value.value = JSON.stringify(editor.getValue());
+    console.log(editor.getValue());
+  });
+  document.querySelector('.set-value').addEventListener('click', function () {
+    editor.setValue({number_range: 2})
+  });
+</script>
+</body>
+</html>

package/tests/pages/string-simplemde-editor.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>string-simple-mde-editor</title>
+    <!-- json editor -->
+    <script src="../../dist/jsoneditor.js"></script>
+    <!-- simpleMDE-editor -->
+    <script src="./../../node_modules/simplemde/dist/simplemde.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="./../../node_modules/simplemde/dist/simplemde.min.css"
+    />
+  </head>
+  <body>
+    <textarea class="debug" cols="30" rows="10"></textarea>
+    <button class="get-value">Get Value</button>
+    <div class="container"></div>
+    <script>
+      const container = document.querySelector(".container");
+      const debug = document.querySelector(".debug");
+      const schema = {
+        type: "array",
+        title: "string-simplemde-editor",
+        items: {
+          $schema: "http://json-schema.org/draft-07/schema#",
+          title: "Example",
+          type: "object",
+          format: "categories",
+          basicCategoryTitle: "Main Editor",
+          required: ["title"],
+          properties: {
+            title: {
+              type: "string",
+              format: "markdown",
+              default: "Lorem",
+              options: {
+                simplemde: {
+                  spellChecker: false,
+                  autorefresh: true,
+                },
+              },
+            },
+            content: {
+              type: "object",
+              title: "Tabbed Editor",
+              properties: {
+                description: {
+                  title: "Test",
+                  type: "string",
+                  format: "markdown",
+                  default: "Lorem ipsum.",
+                  options: {
+                    simplemde: {
+                      spellChecker: false,
+                      autorefresh: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      };
+      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/table-move-events.html CHANGED Viewed

@@ -26,7 +26,8 @@
     schema: schema,
     enable_array_copy: true
   });
-  document.querySelector('.get-value').addEventListener('click', function () {
+  editor.promise.then(() => {
+    document.querySelector('.get-value').addEventListener('click', function () {
     debug.value = JSON.stringify(editor.getValue());
   });
   editor.setValue(["A","B","C","D","E"]);
@@ -50,6 +51,8 @@
     alert('deleteAllRows');
     console.log('deleteAllRows');
   });
+  })
 </script>
 </body>

package/tests/pages/urn.html CHANGED Viewed

@@ -28,7 +28,7 @@
     theme: 'bootstrap4',
     use_default_values: false,
     show_errors: 'always',
-    urn_resolver: (urn, callback) => {
+    urn_resolver: async (urn, callback) => {
       console.log('resolving ' + urn)
       let schema
@@ -68,13 +68,16 @@
           break
         default: return false
       }
-      // simulate async
-      window.setTimeout(() => {
-        callback(JSON.stringify(schema))
-      }, 500)
-      return true
+      return new Promise((resolve) => {
+        // simulate async
+        window.setTimeout(() => {
+          console.log(schema)
+          resolve(JSON.stringify(schema))
+        }, 50);
+      })
+      //return true
     }
   })

package/tests/pages/uuid.html CHANGED Viewed

@@ -1,72 +1,111 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8"/>
+  <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">
   <title>object-no-duplicated-id</title>
 </head>
 <body>
-<div class="container">
-  <div class="form-group">
-    <textarea id="value" class="form-control" rows="10"></textarea>
+  <div class="container">
+    <div class="form-group">
+      <textarea id="value" class="form-control" rows="10"></textarea>
+    </div>
+    <button id="get-value" class='btn btn-secondary'>get value</button>
+    <hr>
+    <div id='form-container'></div>
   </div>
-  <button id="get-value" class='btn btn-secondary'>get value</button>
-  <hr>
-  <div id='form-container'></div>
-</div>
-<script>
-  var formContainer = document.querySelector('#form-container')
-  var value = document.querySelector('#value')
-  var getValue = document.querySelector('#get-value')
+  <script>
+    var formContainer = document.querySelector('#form-container')
+    var value = document.querySelector('#value')
+    var getValue = document.querySelector('#get-value')
-  var today = (offset) => {
-    var t = new Date()
-    t.setDate(t.getDate() + (offset || 0))
-    return t.toISOString().split('T')[0]
-  }
+    var today = (offset) => {
+      var t = new Date()
+      t.setDate(t.getDate() + (offset || 0))
+      return t.toISOString().split('T')[0]
+    }
-  var schema = {
-    'type': 'object',
-    'properties': {
-      'uuid': {
-        'type': 'string',
-        'format': 'uuid',
-        'title': 'single uuid',
-        'required': true,
-        'default': 'banana'
-      },
-      'uuidArray': {
-        'type': 'array',
-        'title': 'uuid array',
-        'required': true,
-        'items': {
-          'type': 'object',
-          'properties': {
-            'uuid': {
-              'type': 'string',
-              'format': 'uuid'
+    var schema = {
+      'type': 'object',
+      'properties': {
+        'uuid': {
+          'type': 'string',
+          'format': 'uuid',
+          'title': 'single uuid',
+          'required': true,
+          'default': 'banana'
+        },
+        'uuidStringArray': {
+          'type': 'array',
+          'required': true,
+          'title': 'array of uuids',
+          'items': {
+            'type': 'string',
+            'format': 'uuid',
+            'title': 'uuid string array item'
+          }
+        },
+        'uuidObjectArray': {
+          'type': 'array',
+          'title': 'array of objects with uuid property',
+          'required': true,
+          'items': {
+            'title': 'uuid object array item',
+            'type': 'object',
+            'properties': {
+              'uuid': {
+                'type': 'string',
+                'format': 'uuid'
+              }
+            }
+          }
+        },
+        'uuidStringTable': {
+          'type': 'array',
+          'required': true,
+          'format': 'table',
+          'title': 'array of uuids (table)',
+          'items': {
+            'title': 'uuid string table item',
+            'type': 'string',
+            'format': 'uuid'
+          }
+        },
+        'uuidObjectTable': {
+          "type": "array",
+          "format": "table",
+          "title": "Array of objects (Table) with uuid property",
+          "items": {
+            'title': 'uuid object table item',
+            "type": "object",
+            "properties": {
+              "uuid": {
+                "type": "string",
+                "format": "uuid",
+              }
             }
           }
         }
       }
     }
-  }
-  var editor = new JSONEditor(formContainer, {
-    schema: schema,
-    theme: 'bootstrap4',
-    show_errors: 'always'
-  })
-  getValue.addEventListener('click', function () {
-    value.value = JSON.stringify(editor.getValue())
-    console.log(editor.getValue())
-  })
+    var editor = new JSONEditor(formContainer, {
+      schema: schema,
+      theme: 'bootstrap4',
+      show_errors: 'always',
+      enable_array_copy: true,
+    })
-</script>
+    getValue.addEventListener('click', function () {
+      value.value = JSON.stringify(editor.getValue())
+      console.log(editor.getValue())
+    })
+  </script>
 </body>
-</html>
+</html>