@json-editor/json-editor 1.3.5 → 1.17.0

package/docs/datetime.html

@@ -10,29 +10,21 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <!-- jQuery -->
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
-  <!-- Bootstrap3 -->
-  <!-- Latest compiled and minified CSS -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-  <!-- Optional theme -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
-  <!-- Latest compiled and minified JavaScript -->
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
+  <!-- Bootstrap4 -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 
-  <!-- Foundation
-  <script type="text/javascript" src=""></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
-  -->
+  <!-- fontawesome5 -->
+  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>
 
   <!-- Handlebars -->
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
 
   <!-- Flatpickr -->
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.5.1/flatpickr.min.css" />
-
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.3/dist/flatpickr.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.3/dist/flatpickr.min.js" integrity="sha256-/irFIZmSo2CKXJ4rxHWfrI+yGJuI16Z005X/bENdpTY=" crossorigin="anonymous"></script>
+  
   <!-- JSON-Editor -->
   <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
 
@@ -68,9 +60,9 @@
   });
 
   var options = {
-    "theme": "bootstrap3",
+    "theme": "bootstrap4",
     "template": "handlebars",
-    "iconlib": "bootstrap3",
+    "iconlib": "fontawesome5",
     "schema": {
       "title": "datetime editor examples",
       "id": "test",
@@ -265,7 +257,42 @@
             }
           }
         },
-
+        "isofsdatetime": {
+          "type": "string",
+          "format": "datetime-local",
+          "title": "Datetime (String)",
+          "description": "ISO datetime-local field with flatpickr",
+          "options": {
+            "grid_columns": 4,
+            "inputAttributes": {
+              "placeholder": "Enter datetime"
+            },
+            "flatpickr": {
+              "dateFormat": "Z",
+              "wrap": true,
+              "allowInput": true,
+              "enableSeconds": true,
+            }
+          }
+        },
+        "isofidatetime": {
+          "type": "integer",
+          "format": "datetime-local",
+          "title": "Datetime (Integer)",
+          "description": "ISO datetime-local field with flatpickr",
+          "options": {
+            "grid_columns": 4,
+            "inputAttributes": {
+              "placeholder": "Enter datetime"
+            },
+            "flatpickr": {
+              "dateFormat": "Z",
+              "wrap": true,
+              "allowInput": true,
+              "enableSeconds": true,
+            }
+          }
+        },
         "fisdatetime": {
           "type": "string",
           "format": "datetime-local",
@@ -310,4 +337,4 @@
   </script>
 </body>
 
-</html>
+</html>

package/docs/describedby.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hyper-Link DescribedBy JSON Editor Example</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+  <!-- Enable responsive viewport -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- jQuery -->
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+  <!-- Bootstrap4 -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+
+  <!-- fontawesome5 -->
+  <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.12.1/css/all.css'>
+  
+  <!-- JSON-Editor -->
+  <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+
+  <style type="text/css">
+  body {
+    margin: 1em;
+  }
+
+  </style>
+  </head>
+  <body>
+    <h1>Hyper-Link DescribedBy JSON Editor Example</h1>
+
+    <div id='editor_holder'></div>
+    <button id='submit'>Submit (console.log)</button>
+
+    <script>
+
+      // Initialize the editor
+      var editor = new JSONEditor(document.getElementById("editor_holder"), {
+        theme: "bootstrap4",
+        iconlib: "fontawesome5",
+        disable_collapse: true,
+        disable_edit_json: true,
+        disable_properties: true,
+        //no_additional_properties: true,
+        schema: {
+          "title": "Property for Sale",
+          "$ref": "#/definitions/single",
+          "definitions": {
+            "multiple": {
+              "type": "array",
+              "items": {
+                "$ref": "#/definitions/single"
+              }
+            },
+            "single": {
+              "id": "basic",
+              "type": "object",
+              "properties": {
+                "propertyName": {
+                  "type": "string",
+                  "title": "Property Name",
+                  "description": "The name of the property being sold",
+                  "minLength": 5
+                },
+                "propertyType": {
+                  "type": "string",
+                  "title": "Property Type",
+                  "enum": ["house", "car", "yacht","multiple"]
+                },
+                "propertyTypeOptions": {
+                  "type": ["object","array"],
+                  "title": "Property Options",
+                  "watch": {
+                    "tag": "basic.propertyType"
+                  },
+                  "links": [{
+                    "rel": "describedBy",
+                    "href": "#/definitions/{{tag}}"
+                  }]
+                }
+              },
+              "required": ["propertyName","propertyType"],
+            },
+            "house": {
+              "properties": {
+                "address": {
+                  "type": "string",
+                  "title": "Address"
+                },
+                "rooms": {
+                  "type": "integer",
+                  "title": "Number Of Rooms"
+                }
+              }
+            },
+            "car": {
+              "properties": {
+                "brand": {
+                  "type": "string",
+                  "title": "Brand",
+                  "enum": ["Audi", "BMW", "Chevrolet", "Opel", "Mitsubishi"]
+                },
+                "color": {
+                  "type": "string",
+                  "title": "Color",
+                  "format": "color"
+                },
+                "year": {
+                  "type": "string",
+                  "title": "Build Year"
+                }
+              }
+            },
+            "yacht": {
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "title": "Name"
+                },
+                "model": {
+                  "type": "string",
+                  "title": "Model"
+                },
+                "year": {
+                  "type": "integer",
+                  "title": "Year"
+                },
+                "yachtLength": {
+                  "type": "integer",
+                  "title": "Length"
+                }
+              }
+            }
+          }
+        }
+      });
+
+      function validate() {
+          var errors = editor.validate();
+          console.log(editor.getValue());
+          if(errors.length) {
+            // errors is an array of objects, each with a `path`, `property`, and `message` parameter
+            // `property` is the schema keyword that triggered the validation error (e.g. "minLength")
+            // `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")
+            editor.root.showValidationErrors(errors);
+            console.log('ERRORS', errors);
+          }
+          else {
+            // It's valid!
+            console.log("OK");
+          }
+      }
+
+      // Hook up the submit button to log to the console
+      document.getElementById('submit').addEventListener('click',function() {
+        // Get the value from the editor
+        validate();
+      });
+    </script>
+  </body>
+</html>

package/docs/enumsource.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Editor enumSource Integration Example</title>
+    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+</head>
+
+<body>
+  <h1>Enum source sort example</h1>
+
+  <p style='margin-bottom:20px;'>
+    This example lets you edit a selection of values from an editable enumSource.
+    The selection must have unique items, which is useful to showcase an issue
+    where any changes to ordering of the enumSource array reset selections to a start value.
+  </p>
+
+  <div id='editor_holder'></div>
+  <button id='submit'>Submit (console.log)</button>
+
+  <script>
+
+    // Initialize the editor with a JSON schema
+    JSONEditor.defaults.options.enum_source_value_auto_select = true;
+    var editor = new JSONEditor(document.getElementById('editor_holder'), {
+      schema: {
+        type: "object",
+        title: "Text",
+        required: ["selectedFonts", "possibleFonts"],
+        properties: {
+          selectedFonts: {
+            type: "array",
+            format: "table",
+            uniqueItems: true,
+            items: {
+              type: "string",
+              enumSource: "possible_fonts",
+              watch: {
+                "possible_fonts": "root.possibleFonts"
+              }
+            },
+            default: ["Arial", "Times"]
+          },
+          possibleFonts: {
+            type: "array",
+            format: 'table',
+            items: {
+              type: "string"
+            },
+            default: ["Arial", "Times", "Helvetica", "Comic Sans"],
+            options: {
+              collapsed: false
+            }
+          }
+        }
+      }
+    });
+
+    // 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());
+    });
+  </script>
+</body>
+
+</html>

package/docs/form-submission.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <p>
+        The form is set to send a <code>GET</code> request to the same page.
+        A change event listener has been added to the editor so that whenever the form changes, the editor value
+        is stored in a hidden input using <code>JSON.stringify()</code>.
+    </p>
+
+    <p>
+        The option <code>use_name_attributes</code> was set to <code>false</code>
+        to avoid sending the other field with the request.
+    </p>
+    <p>
+        When the form is submitted only the hidden input is sent in the request.
+        This allows to send data structures like arrays and object.
+        Also the same schema that is used to build the form can be used as parameter to backend json validators tools.
+        Try yourself, submit the form and look in the network tab of the developer tool.
+    </p>
+    <div class="form-group"></div>
+    <form method="get">
+        <input id="input" type="hidden" name="json">
+        <div id='editor-container'></div>
+        <input id="submit" class="btn btn-primary" width="100" type="submit">
+    </form>
+    <br>
+    <h2>Get params</h2>
+    <pre id="get-params"></pre>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+<script>
+  var params = {}
+  for (const [key, value] of new URLSearchParams(window.location.search).entries()) {
+    params[key] = value
+    console.log(key, value)
+  }
+  document.querySelector('#get-params').textContent = JSON.stringify(params, null, 2)
+  var config = {
+    use_name_attributes: false,
+    theme: 'bootstrap4',
+    disable_edit_json: true,
+    disable_properties: true,
+    disable_collapse: true,
+    schema: {
+      'title': 'Person',
+      'type': 'object',
+      'required': [
+        'name',
+        'age',
+        'date',
+        'favorite_color',
+        'gender',
+        'location',
+        'pets'
+      ],
+      'properties': {
+        'name': {
+          'type': 'string',
+          'description': 'First and Last name',
+          'minLength': 4,
+          'default': 'Jeremy Dorn'
+        },
+        'age': {
+          'type': 'integer',
+          'default': 25,
+          'minimum': 18,
+          'maximum': 99
+        },
+        'favorite_color': {
+          'type': 'string',
+          'format': 'color',
+          'title': 'favorite color',
+          'default': '#ffa500'
+        },
+        'gender': {
+          'type': 'string',
+          'enum': [
+            'male',
+            'female',
+            'other'
+          ]
+        },
+        'date': {
+          'type': 'string',
+          'format': 'date',
+          'options': {
+            'flatpickr': {}
+          }
+        },
+        'location': {
+          'type': 'object',
+          'title': 'Location',
+          'properties': {
+            'city': {
+              'type': 'string',
+              'default': 'San Francisco'
+            },
+            'state': {
+              'type': 'string',
+              'default': 'CA'
+            },
+            'citystate': {
+              'type': 'string',
+              'description': 'This is generated automatically from the previous two fields',
+              'template': '{{city}}, {{state}}',
+              'watch': {
+                'city': 'location.city',
+                'state': 'location.state'
+              }
+            }
+          }
+        },
+        'pets': {
+          'type': 'array',
+          'format': 'table',
+          'title': 'Pets',
+          'uniqueItems': true,
+          'items': {
+            'type': 'object',
+            'title': 'Pet',
+            'properties': {
+              'type': {
+                'type': 'string',
+                'enum': [
+                  'cat',
+                  'dog',
+                  'bird',
+                  'reptile',
+                  'other'
+                ],
+                'default': 'dog'
+              },
+              'name': {
+                'type': 'string'
+              }
+            }
+          },
+          'default': [
+            {
+              'type': 'dog',
+              'name': 'Walter'
+            }
+          ]
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(document.querySelector('#editor-container'), config)
+
+  editor.on('change', function () {
+    document.querySelector('#input').value = JSON.stringify(editor.getValue())
+  })
+</script>
+</body>
+</html>

package/docs/imask.html

@@ -0,0 +1,192 @@
+<html lang="en">
+  <head>
+<title>JSON-Editor Form</title>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+body {margin:0;padding:0;font: normal .9em/1.2 Arial;background-color:#02577a !important;}
+.inner-row {height: 100vh;background-color: #fff;position: relative;max-width: 1200px;left:50%;transform: translate(-50%,0);padding: 1rem 2rem;box-shadow: 2px 0 5px rgba(0,0,0,.2);}
+</style>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/css/jsoneditor.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/nonmin/jsoneditor.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css@latest/dist/spectre.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectre.css@latest/dist/spectre-exp.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css">
+<script src="https://cdn.jsdelivr.net/npm/imask@latest/dist/imask.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@latest/dist/purify.min.js"></script>
+<script>JSONEditor.defaults.options["theme"] = "spectre";
+JSONEditor.defaults.options["iconlib"] = "fontawesome4";
+JSONEditor.defaults.options["object_layout"] = "normal";
+JSONEditor.defaults.options["template"] = "default";
+JSONEditor.defaults.options["show_errors"] = "always";
+JSONEditor.defaults.options["required_by_default"] = 1;
+JSONEditor.defaults.options["no_additional_properties"] = 0;
+JSONEditor.defaults.options["display_required_only"] = 0;
+JSONEditor.defaults.options["remove_empty_properties"] = 0;
+JSONEditor.defaults.options["keep_oneof_values"] = 1;
+JSONEditor.defaults.options["ajax"] = 0;
+JSONEditor.defaults.options["ajaxCredentials"] = 0;
+JSONEditor.defaults.options["show_opt_in"] = 0;
+JSONEditor.defaults.options["disable_edit_json"] = 0;
+JSONEditor.defaults.options["disable_collapse"] = 0;
+JSONEditor.defaults.options["disable_properties"] = 0;
+JSONEditor.defaults.options["disable_array_add"] = 0;
+JSONEditor.defaults.options["disable_array_reorder"] = 0;
+JSONEditor.defaults.options["disable_array_delete"] = 0;
+JSONEditor.defaults.options["enable_array_copy"] = 0;
+JSONEditor.defaults.options["array_controls_top"] = 0;
+JSONEditor.defaults.options["disable_array_delete_all_rows"] = 0;
+JSONEditor.defaults.options["disable_array_delete_last_row"] = 0;
+JSONEditor.defaults.options["prompt_before_delete"] = 1;
+</script>
+</head>
+<body >
+<div class="inner-row"><div id="json-editor-form"></div></div>
+<script>
+
+var jseditor, jedata = {schema:{
+  "title": "Imask.js editor examples",
+  "id": "test",
+  "type": "object",
+  "format": "grid",
+  "options": {
+    "disable_edit_json": false,
+    "disable_properties": false
+  },
+  "properties": {
+    "_header": {
+      "format": "info",
+      "title": "Example showing how to use Imask.js to format your &lt;input/&gt; content when you are typing.",
+      "description": "<p>For documentation on the Imask.js options, look at <a href=\"https://imask.js.org/\" target=\"_blank\" title=\"Imask.js Homepage\">IMask.js</a> homepage.</p>",
+      "options": {
+        "compact": true,
+        "grid_columns": 12
+      }
+    },
+    "phone": {
+      "type": "string",
+      "title": "Phone number",
+      "description": "Phone number formatting with prefix and placeholder chars",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "returnUnmasked": true,
+          "mask": "+{7}(000)000-00-00",
+          "lazy": false,
+          "placeholderChar": "#"
+        }
+      }
+    },
+    "number": {
+      "type": "string",
+      "title": "Number",
+      "description": "Advanced number formatting",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "mask": "Number",
+          "scale": 2,
+          "signed": false,
+          "thousandsSeparator": "",
+          "padFractionalZeros": false,
+          "normalizeZeros": true,
+          "radix": ",",
+          "mapToRadix": [
+            "."
+          ]
+        }
+      }
+    },
+    "currency": {
+      "type": "string",
+      "title": "Currency",
+      "description": "Currency with prefix and thousands separator",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "mask": "$num",
+          "blocks": {
+            "num": {
+              "mask": "Number",
+              "thousandsSeparator": " "
+            }
+          }
+        }
+      }
+    },
+    "regex": {
+      "type": "string",
+      "title": "Regular Expression",
+      "description": "Numeric digits only",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "mask": "regex:/^\\d+$/"
+        }
+      }
+    },
+    "func": {
+      "type": "string",
+      "title": "Callback Function",
+      "description": "Numeric digits only and next digit must be higher than previous",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "mask": "testFunction"
+        }
+      }
+    },
+    "range": {
+      "type": "string",
+      "title": "Masked Range",
+      "description": "Numeric value between 10 and 30",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "mask": "IMask.MaskedRange",
+          "from": 10,
+          "to": 30
+        }
+      }
+    },
+    "dynamic": {
+      "type": "string",
+      "title": "Dynamic Mask",
+      "description": "RGB - 3 numeric values between 0 and 255 separated by commas",
+      "options": {
+        "grid_columns": 6,
+        "imask": {
+          "mask": [{
+            "mask": "RGB,RGB,RGB",
+            "blocks": {
+              "RGB": {
+                "mask": "IMask.MaskedRange",
+                "from": 0,
+                "to": 255
+              }
+            }
+          },
+            {
+              "mask": "regex:/^#[0-9a-f]{0,6}$/i"
+            }]
+        }
+      }
+    }
+  }
+}};
+window.JSONEditor.defaults.callbacks.imask = {
+  "testFunction": function(jseditor, value) {
+    return /^\d*$/.test(value) &&
+      value.split('').every(function(ch, i) {
+        var prevCh = value[i-1];
+        return !prevCh || prevCh < ch;
+      });
+  }
+};
+
+if (jseditor instanceof window.JSONEditor) jseditor.destroy();
+jseditor = new window.JSONEditor(document.querySelector("#json-editor-form"), jedata);
+
+</script>
+
+</body>
+</html>