@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/src/themes/html.css

@@ -0,0 +1,60 @@
+.je-form-input-label {
+  display: block;
+  margin-bottom: 3px;
+  font-weight: bold;
+}
+.je-form-input-description {
+  display: inline-block;
+  margin: 0;
+  font-size: 0.8em;
+  font-style: italic;
+}
+.je-indented-panel {
+  padding: 5px;
+  margin: 10px;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+}
+.je-child-editor-holder {
+  margin-bottom: 8px;
+}
+.je-header-button-holder {
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 0.8em;
+  vertical-align: middle;
+}
+.je-table {
+  margin-bottom: 5px;
+  border-bottom: 1px solid #ccc;
+}
+/* Upload Editor preview image */
+.je-upload-preview img {
+  float: left;
+  margin: 0 0.5rem 0.5rem 0;
+  max-width: 100%;
+  max-height: 5rem;
+}
+.je-dropzone {
+  position: relative;
+  margin: 0.5rem 0;
+  border: 2px dashed black;
+  width: 100%;
+  height: 60px;
+  background: teal;
+  transition: all 0.5s;
+}
+.je-dropzone:before {
+  position: absolute;
+  content: attr(data-text);
+  color: rgba(0, 0, 0, 0.6);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.je-dropzone.valid-dropzone {
+  background: green;
+}
+.je-dropzone.invalid-dropzone {
+  background: red;
+}

package/src/themes/html.css.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export default {".je-form-input-label":"display:block;margin-bottom:3px;font-weight:bold",".je-form-input-description":"display:inline-block;margin:0;font-size:0.8em;font-style:italic",".je-indented-panel":"padding:5px;margin:10px;border-radius:3px;border:1px%20solid%20%23ddd",".je-child-editor-holder":"margin-bottom:8px",".je-header-button-holder":"display:inline-block;margin-left:10px;font-size:0.8em;vertical-align:middle",".je-table":"margin-bottom:5px;border-bottom:1px%20solid%20%23ccc",".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"}
+/* eslint-enable */

package/src/themes/html.js

@@ -1,85 +1,72 @@
-JSONEditor.defaults.themes.html = JSONEditor.AbstractTheme.extend({
-  getFormInputLabel: function(text) {
-    var el = this._super(text);
-    el.style.display = 'block';
-    el.style.marginBottom = '3px';
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  getFormInputDescription: function(text) {
-    var el = this._super(text);
-    el.style.fontSize = '.8em';
-    el.style.margin = 0;
-    el.style.display = 'inline-block';
-    el.style.fontStyle = 'italic';
-    return el;
-  },
-  getIndentedPanel: function() {
-    var el = this._super();
-    el.style.border = '1px solid #ddd';
-    el.style.padding = '5px';
-    el.style.margin = '10px';
-    el.style.borderRadius = '3px';
-    return el;
-  },
-  getTopIndentedPanel: function() {
-    return this.getIndentedPanel();
-  },
-  getChildEditorHolder: function() {
-    var el = this._super();
-    el.style.marginBottom = '8px';
-    return el;
-  },
-  getHeaderButtonHolder: function() {
-    var el = this.getButtonHolder();
-    el.style.display = 'inline-block';
-    el.style.marginLeft = '10px';
-    el.style.fontSize = '.8em';
-    el.style.verticalAlign = 'middle';
-    return el;
-  },
-  getTable: function() {
-    var el = this._super();
-    el.style.borderBottom = '1px solid #ccc';
-    el.style.marginBottom = '5px';
-    return el;
-  },
-  addInputError: function(input, text) {
-    input.style.borderColor = 'red';
-    
-    if(!input.errmsg) {
-      var group = this.closest(input,'.form-control');
-      input.errmsg = document.createElement('div');
-      input.errmsg.setAttribute('class','errmsg');
-      input.errmsg.style = input.errmsg.style || {};
-      input.errmsg.style.color = 'red';
-      group.appendChild(input.errmsg);
-    }
-    else {
-      input.errmsg.style.display = 'block';
+import { AbstractTheme } from '../theme.js'
+import rules from './html.css.js'
+
+export class htmlTheme extends AbstractTheme {
+  getFormInputLabel (text, req) {
+    const el = super.getFormInputLabel(text, req)
+    el.classList.add('je-form-input-label')
+    return el
+  }
+
+  getFormInputDescription (text) {
+    const el = super.getFormInputDescription(text)
+    el.classList.add('je-form-input-label')
+    return el
+  }
+
+  getIndentedPanel () {
+    const el = super.getIndentedPanel()
+    el.classList.add('je-indented-panel')
+    return el
+  }
+
+  getTopIndentedPanel () {
+    return this.getIndentedPanel()
+  }
+
+  getChildEditorHolder () {
+    const el = super.getChildEditorHolder()
+    el.classList.add('je-child-editor-holder')
+    return el
+  }
+
+  getHeaderButtonHolder () {
+    const el = this.getButtonHolder()
+    el.classList.add('je-header-button-holder')
+    return el
+  }
+
+  getTable () {
+    const el = super.getTable()
+    el.classList.add('je-table')
+    return el
+  }
+
+  addInputError (input, text) {
+    const group = this.closest(input, '.form-control') || input.controlgroup
+
+    if (!input.errmsg) {
+      input.errmsg = document.createElement('div')
+      input.errmsg.setAttribute('class', 'errmsg')
+      input.errmsg.style = input.errmsg.style || {}
+      input.errmsg.style.color = 'red'
+      group.appendChild(input.errmsg)
+    } else {
+      input.errmsg.style.display = 'block'
     }
-    
-    input.errmsg.innerHTML = '';
-    input.errmsg.appendChild(document.createTextNode(text));
-  },
-  removeInputError: function(input) {
-    input.style.borderColor = '';
-    if(input.errmsg) input.errmsg.style.display = 'none';
-  },
-  getProgressBar: function() {
-    var max = 100, start = 0;
 
-    var progressBar = document.createElement('progress');
-    progressBar.setAttribute('max', max);
-    progressBar.setAttribute('value', start);
-    return progressBar;
-  },
-  updateProgressBar: function(progressBar, progress) {
-    if (!progressBar) return;
-    progressBar.setAttribute('value', progress);
-  },
-  updateProgressBarUnknown: function(progressBar) {
-    if (!progressBar) return;
-    progressBar.removeAttribute('value');
+    input.errmsg.innerHTML = ''
+    input.errmsg.appendChild(document.createTextNode(text))
+    input.errmsg.setAttribute('role', 'alert')
   }
-});
+
+  removeInputError (input) {
+    if (input.style) {
+      input.style.borderColor = ''
+    }
+    if (input.errmsg) input.errmsg.style.display = 'none'
+  }
+}
+
+/* Custom stylesheet rules. format: "selector" : "CSS rules" */
+htmlTheme.rules = rules

package/src/themes/index.js

@@ -0,0 +1,29 @@
+import { htmlTheme } from './html.js'
+// import  { bootstrap2Theme } from  './bootstrap2'
+import { bootstrap3Theme } from './bootstrap3.js'
+import { bootstrap4Theme } from './bootstrap4.js'
+import { bootstrap5Theme } from './bootstrap5.js'
+// import  { foundationTheme, foundation3Theme, foundation4Theme, foundation5Theme, foundation6Theme } from  './foundation.js'
+import { jqueryuiTheme } from './jqueryui.js'
+import { barebonesTheme } from './barebones.js'
+// import  { materializeTheme } from  './materialize'
+import { spectreTheme } from './spectre.js'
+import { tailwindTheme } from './tailwind.js'
+
+export const themes = {
+  html: htmlTheme,
+  // bootstrap2: bootstrap2Theme,
+  bootstrap3: bootstrap3Theme,
+  bootstrap4: bootstrap4Theme,
+  bootstrap5: bootstrap5Theme,
+  // foundation: foundationTheme,
+  // foundation3: foundation3Theme,
+  // foundation4: foundation4Theme,
+  // foundation5: foundation5Theme,
+  // foundation6: foundation6Theme,
+  jqueryui: jqueryuiTheme,
+  barebones: barebonesTheme,
+  // materialize: materializeTheme,
+  spectre: spectreTheme,
+  tailwind: tailwindTheme
+}

package/src/themes/jqueryui.js

@@ -1,184 +1,198 @@
-JSONEditor.defaults.themes.jqueryui = JSONEditor.AbstractTheme.extend({
-  getTable: function() {
-    var el = this._super();
-    el.setAttribute('cellpadding',5);
-    el.setAttribute('cellspacing',0);
-    return el;
-  },
-  getTableHeaderCell: function(text) {
-    var el = this._super(text);
-    el.classList.add('ui-state-active');
-    el.style.fontWeight = 'bold';
-    return el;
-  },
-  getTableCell: function() {
-    var el = this._super();
-    el.classList.add('ui-widget-content');
-    return el;
-  },
-  getHeaderButtonHolder: function() {
-    var el = this.getButtonHolder();
-    el.style.marginLeft = '10px';
-    el.style.fontSize = '.6em';
-    el.style.display = 'inline-block';
-    return el;
-  },
-  getFormInputDescription: function(text) {
-    var el = this.getDescription(text);
-    el.style.marginLeft = '10px';
-    el.style.display = 'inline-block';
-    return el;
-  },
-  getFormControl: function(label, input, description, infoText) {
-    var el = this._super(label,input,description, infoText);
-    if(input.type === 'checkbox') {
-      el.style.lineHeight = '25px';
-
-      el.style.padding = '3px 0';
-    }
-    else {
-      el.style.padding = '4px 0 8px 0';
-    }
-    return el;
-  },
-  getDescription: function(text) {
-    var el = document.createElement('span');
-    el.style.fontSize = '.8em';
-    el.style.fontStyle = 'italic';
-    if (window.DOMPurify) el.innerHTML = window.DOMPurify.sanitize(text);
-    else el.textContent = this.cleanText(text);
-    return el;
-  },
-  getButtonHolder: function() {
-    var el = document.createElement('div');
-    el.classList.add('ui-buttonset');
-    el.style.fontSize = '.7em';
-    return el;
-  },
-  getFormInputLabel: function(text) {
-    var el = document.createElement('label');
-    el.style.fontWeight = 'bold';
-    el.style.display = 'block';
-    el.textContent = text;
-    return el;
-  },
-  getButton: function(text, icon, title) {
-    var button = document.createElement("button");
-    button.classList.add('ui-button', 'ui-widget', 'ui-state-default', 'ui-corner-all');
-
-    // Icon only
-    if(icon && !text) {
-      button.classList.add('ui-button-icon-only');
-      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary');
-      button.appendChild(icon);
-    }
-    // Icon and Text
-    else if(icon) {
-      button.classList.add('ui-button-text-icon-primary');
-      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary');
-      button.appendChild(icon);
-    }
-    // Text only
-    else {
-      button.classList.add('ui-button-text-only');
-    }
+import { AbstractTheme } from '../theme.js'
+
+export class jqueryuiTheme extends AbstractTheme {
+  getTable () {
+    const el = super.getTable()
+    el.setAttribute('cellpadding', 5)
+    el.setAttribute('cellspacing', 0)
+    return el
+  }
+
+  getTableHeaderCell (text) {
+    const el = super.getTableHeaderCell(text)
+    el.classList.add('ui-state-active')
+    el.style.fontWeight = 'bold'
+    return el
+  }
 
-    var el = document.createElement('span');
-    el.classList.add('ui-button-text');
-    el.textContent = text||title||".";
-    button.appendChild(el);
+  getTableCell () {
+    const el = super.getTableCell()
+    el.classList.add('ui-widget-content')
+    return el
+  }
+
+  getHeaderButtonHolder () {
+    const el = this.getButtonHolder()
+    el.style.marginLeft = '10px'
+    el.style.fontSize = '.6em'
+    el.style.display = 'inline-block'
+    return el
+  }
 
-    button.setAttribute('title',title);
+  getFormInputDescription (text) {
+    const el = this.getDescription(text)
+    el.style.marginLeft = '10px'
+    el.style.display = 'inline-block'
+    return el
+  }
 
-    return button;
-  },
-  setButtonText: function(button,text, icon, title) {
-    button.innerHTML = '';
-    button.classList.add('ui-button', 'ui-widget', 'ui-state-default', 'ui-corner-all');
+  getFormControl (label, input, description, infoText) {
+    const el = super.getFormControl(label, input, description, infoText)
+    if (input.type === 'checkbox') {
+      el.style.lineHeight = '25px'
 
-    // Icon only
-    if(icon && !text) {
-      button.classList.add('ui-button-icon-only');
-      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary');
-      button.appendChild(icon);
+      el.style.padding = '3px 0'
+    } else {
+      el.style.padding = '4px 0 8px 0'
     }
-    // Icon and Text
-    else if(icon) {
-      button.classList.add('ui-button-text-icon-primary');
-      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary');
-      button.appendChild(icon);
+    return el
+  }
+
+  getDescription (text) {
+    const el = document.createElement('span')
+    el.style.fontSize = '.8em'
+    el.style.fontStyle = 'italic'
+    if (window.DOMPurify) el.innerHTML = window.DOMPurify.sanitize(text)
+    else el.textContent = this.cleanText(text)
+    return el
+  }
+
+  getButtonHolder () {
+    const el = document.createElement('div')
+    el.classList.add('ui-buttonset')
+    el.style.fontSize = '.7em'
+    return el
+  }
+
+  getFormInputLabel (text, req) {
+    const el = document.createElement('label')
+    el.style.fontWeight = 'bold'
+    el.style.display = 'block'
+    el.textContent = text
+    if (req) el.classList.add('required')
+    return el
+  }
+
+  getButton (text, icon, title) {
+    const button = document.createElement('button')
+    button.classList.add('ui-button', 'ui-widget', 'ui-state-default', 'ui-corner-all')
+
+    /* Icon only */
+    if (icon && !text) {
+      button.classList.add('ui-button-icon-only')
+      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary')
+      button.appendChild(icon)
+      /* Icon and Text */
+    } else if (icon) {
+      button.classList.add('ui-button-text-icon-primary')
+      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary')
+      button.appendChild(icon)
+      /* Text only */
+    } else {
+      button.classList.add('ui-button-text-only')
     }
-    // Text only
-    else {
-      button.classList.add('ui-button-text-only');
+
+    const el = document.createElement('span')
+    el.classList.add('ui-button-text')
+    el.textContent = text || title || '.'
+    button.appendChild(el)
+
+    button.setAttribute('title', title)
+
+    return button
+  }
+
+  setButtonText (button, text, icon, title) {
+    button.innerHTML = ''
+    button.classList.add('ui-button', 'ui-widget', 'ui-state-default', 'ui-corner-all')
+
+    /* Icon only */
+    if (icon && !text) {
+      button.classList.add('ui-button-icon-only')
+      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary')
+      button.appendChild(icon)
+      /* Icon and Text */
+    } else if (icon) {
+      button.classList.add('ui-button-text-icon-primary')
+      icon.classList.add('ui-button-icon-primary', 'ui-icon-primary')
+      button.appendChild(icon)
+      /* Text only */
+    } else {
+      button.classList.add('ui-button-text-only')
     }
 
-    var el = document.createElement('span');
-    el.classList.add('ui-button-text');
-    el.textContent = text||title||".";
-    button.appendChild(el);
-
-    button.setAttribute('title',title);
-  },
-  getIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.classList.add('ui-widget-content', 'ui-corner-all');
-    el.style.padding = '1em 1.4em';
-    el.style.marginBottom = '20px';
-    return el;
-  },
-  afterInputReady: function(input) {
-    if(input.controls) return;
-    input.controls = this.closest(input,'.form-control');
+    const el = document.createElement('span')
+    el.classList.add('ui-button-text')
+    el.textContent = text || title || '.'
+    button.appendChild(el)
+
+    button.setAttribute('title', title)
+  }
+
+  getIndentedPanel () {
+    const el = document.createElement('div')
+    el.classList.add('ui-widget-content', 'ui-corner-all')
+    el.style.padding = '1em 1.4em'
+    el.style.marginBottom = '20px'
+    return el
+  }
+
+  afterInputReady (input) {
+    if (input.controls) return
+    input.controls = this.closest(input, '.form-control')
     if (this.queuedInputErrorText) {
-        var text = this.queuedInputErrorText;
-        delete this.queuedInputErrorText;
-        this.addInputError(input,text);
-    }
-  },
-  addInputError: function(input,text) {
-    if(!input.controls) {
-        this.queuedInputErrorText = text;
-        return;
-    }
-    if(!input.errmsg) {
-      input.errmsg = document.createElement('div');
-      input.errmsg.classList.add('ui-state-error');
-      input.controls.appendChild(input.errmsg);
-    }
-    else {
-      input.errmsg.style.display = '';
+      const text = this.queuedInputErrorText
+      delete this.queuedInputErrorText
+      this.addInputError(input, text)
     }
+  }
 
-    input.errmsg.textContent = text;
-  },
-  removeInputError: function(input) {
-    if(!input.controls) {
-        delete this.queuedInputErrorText;
-    }
-    if(!input.errmsg) return;
-    input.errmsg.style.display = 'none';
-  },
-  markTabActive: function(row) {
-    row.tab.classList.remove('ui-widget-header');
-    row.tab.classList.add('ui-state-active');
-
-    if(typeof row.rowPane !== 'undefined'){
-      row.rowPane.style.display = '';
+  addInputError (input, text) {
+    if (!input.controls) {
+      this.queuedInputErrorText = text
+      return
+    }
+    if (!input.errmsg) {
+      input.errmsg = document.createElement('div')
+      input.errmsg.classList.add('ui-state-error')
+      input.controls.appendChild(input.errmsg)
+    } else {
+      input.errmsg.style.display = ''
     }
-    else {
-      row.container.style.display = '';
+
+    input.errmsg.textContent = text
+  }
+
+  removeInputError (input) {
+    if (!input.controls) {
+      delete this.queuedInputErrorText
     }
-  },
-  markTabInactive: function(row) {
-    row.tab.classList.add('ui-widget-header');
-    row.tab.classList.remove('ui-state-active');
+    if (!input.errmsg) return
+    input.errmsg.style.display = 'none'
+  }
 
-    if(typeof row.rowPane !== 'undefined'){
-      row.rowPane.style.display = 'none';
+  markTabActive (row) {
+    row.tab.classList.remove('ui-widget-header')
+    row.tab.classList.add('ui-state-active')
+
+    if (typeof row.rowPane !== 'undefined') {
+      row.rowPane.style.display = ''
+    } else {
+      row.container.style.display = ''
     }
-    else {
-      row.container.style.display = 'none';
+  }
+
+  markTabInactive (row) {
+    row.tab.classList.add('ui-widget-header')
+    row.tab.classList.remove('ui-state-active')
+
+    if (typeof row.rowPane !== 'undefined') {
+      row.rowPane.style.display = 'none'
+    } else {
+      row.container.style.display = 'none'
     }
   }
-});
+}
+
+/* Custom stylesheet rules. format: "selector" : "CSS rules" */
+jqueryuiTheme.rules = { 'div[data-schemaid="root"]:after': 'position:relative;color:red;margin:10px 0;font-weight:600;display:block;width:100%;text-align:center;content:"This is an old JSON-Editor 1.x Theme and might not display elements correctly when used with the 2.x version"' }