@json-editor/json-editor 2.5.2 → 2.6.1

package/tests/pages/object-no-additional-properties.html

@@ -16,27 +16,42 @@
   var getValue = document.querySelector('.get-value');
 
   var schema = {
-  "title": "Person",
+  "title": "Additional properties",
   "type": "object",
-  "required": [
-    "name"
-  ],
   "properties": {
-    "name": {
-      "type": "string",
-      "description": "First and Last name",
-      "minLength": 4,
+    "aptrue": {
+      "type": "object",
+      "additionalProperties": true,
+      "description": "with additionalProperties: true",
+      "properties": {
+        "name": {
+          "type": "string",
+          "default": "albert"
+        },
+        "age": {
+          "type": "number",
+          "default": 15
+        }
+      }
+    },
+    "apfalse": {
+      "type": "object",
+      "description": "without additionalProperties",
+      "properties": {
+        "name": {
+          "type": "string",
+          "default": "albert"
+        }
+      }
     }
   }
 };
 
   var editor = new JSONEditor(container, {
     schema: schema,
+    required_by_default: true,
     no_additional_properties: true,
-    startval:{
-    "name": "Jeremy Dorn",
-    "age": 34
-  }
+    startval: {"aptrue":{"name":"Albert","age":0},"apfalse":{"name":"Albert","age":0}}
   });
 
   getValue.addEventListener('click', function () {

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

@@ -33,6 +33,8 @@
       </div>
       <textarea class="value" style="width: 100%; height: 600px;"></textarea>
       <button class='get-value'>get value</button>
+      <button class='set-value'>set value</button>
+      <button class='set-empty-value'>set empty value</button>
       <button class='get-formatted-value'>get formatted value</button>
     </div>
   </div>
@@ -42,6 +44,8 @@
   var container = document.querySelector('.json-editor-container');
   var value = document.querySelector('.value');
   var getValue = document.querySelector('.get-value');
+  var setValue = document.querySelector('.set-value');
+  var setEmptyValue = document.querySelector('.set-empty-value');
   var getFormattedValue = document.querySelector('.get-formatted-value');
 
   var schema = {
@@ -58,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": {
@@ -102,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": {
@@ -196,8 +223,7 @@
     editor = new JSONEditor(container, {
       schema: schema,
       theme: 'bootstrap4',
-      show_opt_in: true,
-      // display_required_only: true
+      show_opt_in: true
     });
   }
 
@@ -213,6 +239,14 @@
       value.value = JSON.stringify(editor.getValue());
     });
 
+    setValue.addEventListener('click', function () {
+      editor.setValue({"string":"test","number":0,"boolean":false,"array":["test"],"object":{"string":"","number":10,"boolean":true,"array":[]}})
+    });
+
+    setEmptyValue.addEventListener('click', function () {
+      editor.setValue({})
+    });
+
     getFormattedValue.addEventListener('click', function () {
       value.value = JSON.stringify(editor.getValue(), null, 2);
     });

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

@@ -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>

package/tests/pages/object-with-dependencies-array.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <script src="../../dist/jsoneditor.js"></script>
+</head>
+
+<body>
+<div id="editor"></div>
+<script>
+  const schema = {
+    'title': 'Test',
+    'type': 'object',
+    'properties': {
+      'question_1': {
+        'type': 'string',
+        'title': 'Question 1',
+        'enum': ['a', 'b', 'c', 'd']
+      },
+      'question_1_feedback': {
+        'type': 'info',
+        'title': 'Question 1 is correct',
+        "options": {
+          "dependencies": {
+            "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']]
+          }
+        }
+      }
+    }
+  }
+
+  const editor = new JSONEditor(document.getElementById('editor'), {
+    schema: schema,
+    show_errors: 'always'
+  });
+</script>
+</body>
+</html>

package/tests/pages/oneof.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>oneOf</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">
+    <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",
+    "properties": {
+      "p4": {
+        "type": "string",
+        "minLength": 4
+      },
+      "p5": {
+        "oneOf": [
+          {
+            "type": "object",
+            "properties": {
+              "p1": {
+                "type": "string",
+                "minLength": 4
+              },
+              "p2": {
+                "type": "string",
+                "minLength": 4
+              }
+            },
+            "required": [
+              "p1",
+              "p2"
+            ]
+          },
+          {
+            "type": "object",
+            "properties": {
+              "p3": {
+                "type": "number"
+              }
+            },
+            "required": [
+              "p3"
+            ]
+          }
+        ],
+        "options": {
+          "keep_oneof_values": false
+        }
+      }
+    },
+    "required": [
+      "p4",
+      "p5"
+    ]
+  }
+
+  var editor = new JSONEditor(jsonEditorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    show_errors: 'always',
+    iconlib: 'fontawesome5',
+    object_layout: 'normal',
+    disable_collapse: true,
+    disable_edit_json: true,
+    disable_properties: true,
+    use_default_values: false,
+    required_by_default: true,
+    disable_array_reorder: true,
+    disable_array_delete_all_rows: true,
+    disable_array_delete_last_row: true,
+    keep_oneof_values: false,
+    no_additional_properties: true
+  });
+
+  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/read-only.html

@@ -55,6 +55,22 @@
         "type": "boolean",
         "readOnly": true
       },
+      checkbox: {
+        "title": "checkbox",
+        "format": "checkbox",
+        "type": "boolean",
+        "readOnly": true
+      },
+      radio: {
+        "title": "radio",
+        "format": "radio",
+        "type": "string",
+        "enum": [
+          "yes",
+          "no"
+        ],
+        "readOnly": true
+      },
       rating: {
         "title": "rating",
         "readOnly": true,
@@ -63,10 +79,9 @@
         "maximum": "5",
         "exclusiveMaximum": false
       },
-      checkbox: {
-        "title": "checkbox",
-        "format": "checkbox",
-        "type": "boolean",
+      button: {
+        "title": "button",
+        "format": "button",
         "readOnly": true
       }
     }

package/tests/pages/stepper-manual.html

@@ -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/themes.html

@@ -38,6 +38,7 @@
       <option value='foundation3'>Foundation 3</option>
       <option value='jqueryui'>jQuery UI</option>
       <option value='materialicons'>Material icons</option>
+      <option value='openiconic'>Open Iconic</option>
       <option value='spectre'>Spectre</option>
     </select>
   </div>
@@ -510,6 +511,7 @@
         foundation3: 'https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css',
         jqueryui: 'https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css',
         materialicons: 'https://fonts.googleapis.com/icon?family=Material+Icons',
+        openiconic: 'https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css',
         spectre: 'https://unpkg.com/spectre.css/dist/spectre-icons.min.css'
       };