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

package/src/themes/spectre.css

@@ -0,0 +1,208 @@
+/*  CSS variables */
+* {
+  --primary-color: #5755d9;
+  --gray-color: #bcc3ce;
+  --light-color: #fff;
+}
+/*  Remove slider focus shadow */
+.slider:focus {
+  box-shadow: none;
+}
+/*  Add margin between header and top buttons */
+h4 > label + .btn-group {
+  margin-left: 1rem;
+}
+/*  Remove right margin on right-aligned button */
+.text-right > button {
+  margin-right: 0 !important;
+}
+/*  Remove left margin on left-aligned button */
+.text-left > button {
+  margin-left: 0 !important;
+}
+/*  Fix fontsize in Properties modal and increase size of modal box */
+.property-selector {
+  font-size: 0.7rem;
+  font-weight: normal;
+  max-height: 260px !important;
+  width: 395px !important;
+}
+/*  Remove checkbox margins in Properties modal */
+.property-selector .form-checkbox {
+  margin: 0;
+}
+/*  Prevent textarea from being resized horizontally */
+textarea {
+  width: 100%;
+  min-height: 2rem;
+  resize: vertical;
+}
+/*  Remove gap between table element borders */
+table {
+  border-collapse: collapse;
+}
+/*  reduce table padding */
+.table td {
+  padding: 0.4rem 0.4rem;
+}
+/*  margin for checkbox label */
+.mr-5 {
+  margin-right: 1rem !important;
+}
+/*  Hover on input block (Should be removed in final version) */
+div[data-schematype]:not([data-schematype="object"]) {
+  transition: 0.5s;
+}
+/*  Hover on input block (Should be removed in final version) */
+div[data-schematype]:not([data-schematype="object"]):hover {
+  background-color: #eee;
+}
+/*  Option: table_border */
+.je-table-border td {
+  border: 0.05rem solid #dadee4 !important;
+}
+/*  Infobutton */
+.btn-info {
+  font-size: 0.5rem;
+  font-weight: bold;
+  height: 0.8rem;
+  padding: 0.15rem 0;
+  line-height: 0.8;
+  margin: 0.3rem 0 0.3rem 0.1rem;
+}
+/*  Select box for oneOf, anyOf and allOf */
+.je-label + select {
+  min-width: 5rem;
+}
+/*  Option: label_bold */
+.je-label {
+  font-weight: 600;
+}
+/*  Infobutton */
+.btn-action.btn-info {
+  width: 0.8rem;
+}
+/*  Option: object_border */
+.je-border {
+  border: 0.05rem solid #dadee4;
+}
+.je-panel {
+  padding: 0.2rem;
+  margin: 0.2rem;
+  background-color: rgba(218, 222, 228, 0.1);
+}
+.je-panel-top {
+  padding: 0.2rem;
+  margin: 0.2rem;
+  background-color: rgba(218, 222, 228, 0.1);
+}
+/*  Red * after label if field is required */
+.required:after {
+  content: " *";
+  color: red;
+  font: inherit;
+}
+/*  option: align_bottom */
+.je-align-bottom {
+  margin-top: auto;
+}
+/*  Description */
+.je-desc {
+  font-size: smaller;
+  margin: 0.2rem 0;
+}
+/*  Upload editor preview image */
+.je-upload-preview img {
+  float: left;
+  margin: 0 0.5rem 0.5rem 0;
+  max-width: 100%;
+  max-height: 5rem;
+  border: 3px solid white;
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
+  box-sizing: border-box;
+}
+.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;
+}
+/*  Option: object_indent */
+.columns .container.je-noindent {
+  padding-left: 0;
+  padding-right: 0;
+}
+/*  Adjustments for Selectize styling */
+.selectize-control.multi .item {
+  background: var(--primary-color) !important;
+}
+/*  Adjustments for Select2 styling */
+.select2-container--default
+  .select2-selection--single
+  .select2-selection__arrow {
+  display: none;
+}
+.select2-container--default .select2-selection--single {
+  border: none;
+}
+.select2-container .select2-selection--single .select2-selection__rendered {
+  padding: 0;
+}
+.select2-container .select2-search--inline .select2-search__field {
+  margin-top: 0;
+}
+.select2-container--default.select2-container--focus
+  .select2-selection--multiple {
+  border: 0.05rem solid var(--gray-color);
+}
+.select2-container--default
+  .select2-selection--multiple
+  .select2-selection__choice {
+  margin: 0.4rem 0.2rem 0.2rem 0;
+  padding: 2px 5px;
+  background-color: var(--primary-color);
+  color: var(--light-color);
+}
+.select2-container--default .select2-search--inline .select2-search__field {
+  line-height: normal;
+}
+/*  Adjustment styling for Choices */
+.choices {
+  margin-bottom: auto;
+}
+.choices__list--multiple .choices__item {
+  border: none;
+  background-color: var(--primary-color);
+  color: var(--light-color);
+}
+.choices[data-type*="select-multiple"] .choices__button {
+  border-left: 0.05rem solid #2826a6;
+}
+.choices__inner {
+  font-size: inherit;
+  min-height: 20px;
+  padding: 4px 7.5px 4px 3.75px;
+}
+.choices[data-type*="select-one"] .choices__inner {
+  padding-bottom: 4px;
+}
+.choices__list--dropdown .choices__item {
+  font-size: inherit;
+}

package/src/themes/spectre.css.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export default {"*":"--primary-color:%235755d9;--gray-color:%23bcc3ce;--light-color:%23fff",".slider:focus":"box-shadow:none","h4 > label + .btn-group":"margin-left:1rem",".text-right > button":"margin-right:0%20!important",".text-left > button":"margin-left:0%20!important",".property-selector":"font-size:0.7rem;font-weight:normal;max-height:260px%20!important;width:395px%20!important",".property-selector .form-checkbox":"margin:0","textarea":"width:100%25;min-height:2rem;resize:vertical","table":"border-collapse:collapse",".table td":"padding:0.4rem%200.4rem",".mr-5":"margin-right:1rem%20!important","div[data-schematype]:not([data-schematype='object'])":"transition:0.5s","div[data-schematype]:not([data-schematype='object']):hover":"background-color:%23eee",".je-table-border td":"border:0.05rem%20solid%20%23dadee4%20!important",".btn-info":"font-size:0.5rem;font-weight:bold;height:0.8rem;padding:0.15rem%200;line-height:0.8;margin:0.3rem%200%200.3rem%200.1rem",".je-label + select":"min-width:5rem",".je-label":"font-weight:600",".btn-action.btn-info":"width:0.8rem",".je-border":"border:0.05rem%20solid%20%23dadee4",".je-panel":"padding:0.2rem;margin:0.2rem;background-color:rgba(218%2C%20222%2C%20228%2C%200.1)",".je-panel-top":"padding:0.2rem;margin:0.2rem;background-color:rgba(218%2C%20222%2C%20228%2C%200.1)",".required:after":"content:%22%20*%22;color:red;font:inherit",".je-align-bottom":"margin-top:auto",".je-desc":"font-size:smaller;margin:0.2rem%200",".je-upload-preview img":"float:left;margin:0%200.5rem%200.5rem%200;max-width:100%25;max-height:5rem;border:3px%20solid%20white;box-shadow:0px%200px%208px%20rgba(0%2C%200%2C%200%2C%200.3);box-sizing:border-box",".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",".columns .container.je-noindent":"padding-left:0;padding-right:0",".selectize-control.multi .item":"background:var(--primary-color)%20!important",".select2-container--default   .select2-selection--single   .select2-selection__arrow":"display:none",".select2-container--default .select2-selection--single":"border:none",".select2-container .select2-selection--single .select2-selection__rendered":"padding:0",".select2-container .select2-search--inline .select2-search__field":"margin-top:0",".select2-container--default.select2-container--focus   .select2-selection--multiple":"border:0.05rem%20solid%20var(--gray-color)",".select2-container--default   .select2-selection--multiple   .select2-selection__choice":"margin:0.4rem%200.2rem%200.2rem%200;padding:2px%205px;background-color:var(--primary-color);color:var(--light-color)",".select2-container--default .select2-search--inline .select2-search__field":"line-height:normal",".choices":"margin-bottom:auto",".choices__list--multiple .choices__item":"border:none;background-color:var(--primary-color);color:var(--light-color)",".choices[data-type*='select-multiple'] .choices__button":"border-left:0.05rem%20solid%20%232826a6",".choices__inner":"font-size:inherit;min-height:20px;padding:4px%207.5px%204px%203.75px",".choices[data-type*='select-one'] .choices__inner":"padding-bottom:4px",".choices__list--dropdown .choices__item":"font-size:inherit"}
+/* eslint-enable */

package/src/themes/spectre.js

@@ -0,0 +1,443 @@
+/* Spectre Theme using Spectre CSS framework. <https://picturepan2.github.io/spectre/index.html> */
+import { AbstractTheme } from '../theme.js'
+import rules from './spectre.css.js'
+
+/* Config options that allows changing various aspects of the output */
+const options = {
+  disable_theme_rules: false, /* Disable creation of Inline Style Rules */
+  label_bold: true, /* Element labels bold */
+  align_bottom: false, /* Align elements to bottom of flex container */
+  object_indent: false, /* Indent nested object elements */
+  object_border: false, /* Add border around object elements */
+  table_border: false, /* Add border to array "table" row and cells */
+  table_zebrastyle: false, /* Add "zebra style" to array "table" rows */
+  input_size: 'normal' /* Size of input and select elements. "small", "normal", "large" */
+}
+
+export class spectreTheme extends AbstractTheme {
+  constructor (jsoneditor) {
+    super(jsoneditor, options)
+  }
+
+  getOptInSwitch (formname) {
+    const container = document.createElement('span')
+    container.classList.add('form-group')
+
+    const label = document.createElement('label')
+    label.classList.add('form-switch', 'd-inline-block')
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('json-editor-opt-in')
+
+    const icon = document.createElement('i')
+    icon.classList.add('form-icon')
+
+    const switchLabelText = document.createElement('span')
+    switchLabelText.classList.add('sr-only')
+    switchLabelText.textContent = formname + '-opt-in'
+
+    label.appendChild(switchLabelText)
+    label.appendChild(checkbox)
+    label.appendChild(icon)
+
+    container.appendChild(label)
+
+    return { label, checkbox, container }
+  }
+
+  /* Functions for setting up the grid container, row and columns */
+  setGridColumnSize (el, size, offset) {
+    el.classList.add(`col-${size}`)
+    if (offset) el.classList.add('col-mx-auto')
+  }
+
+  getGridContainer () {
+    const el = document.createElement('div')
+    el.classList.add('container')
+    if (!this.options.object_indent) el.classList.add('je-noindent')
+    return el
+  }
+
+  getGridRow () {
+    const el = document.createElement('div')
+    el.classList.add('columns')
+    return el
+  }
+
+  getGridColumn () {
+    const el = document.createElement('div')
+    el.classList.add('column')
+    if (this.options.align_bottom) el.classList.add('je-align-bottom')
+    return el
+  }
+
+  /* Used for "type: object" or "type: array" (except if "format: tabs-top") */
+  getIndentedPanel () {
+    const el = document.createElement('div')
+    el.classList.add('je-panel')
+    if (this.options.object_border) el.classList.add('je-border')
+    return el
+  }
+
+  /* Used for "type: array" with "format: tabs-top" */
+  getTopIndentedPanel () {
+    const el = document.createElement('div')
+    el.classList.add('je-panel-top')
+    if (this.options.object_border) el.classList.add('je-border')
+    return el
+  }
+
+  /* Button functions */
+  getHeaderButtonHolder () {
+    const el = this.getButtonHolder()
+    return el
+  }
+
+  /* Button holder for the buttons */
+  getButtonHolder () {
+    const el = super.getButtonHolder()
+    el.classList.add('btn-group')
+    return el
+  }
+
+  getFormButtonHolder (buttonAlign) {
+    const el = super.getFormButtonHolder()
+    el.classList.remove('btn-group')
+    el.classList.add('d-block')
+    if (buttonAlign === 'center') el.classList.add('text-center')
+    else if (buttonAlign === 'right') el.classList.add('text-right')
+    else el.classList.add('text-left')
+    return el
+  }
+
+  getFormButton (text, icon, title) {
+    const el = super.getFormButton(text, icon, title)
+    el.classList.add('btn', 'btn-primary', 'mx-2', 'my-1')
+    if (this.options.input_size !== 'small') el.classList.remove('btn-sm')
+    if (this.options.input_size === 'large') el.classList.add('btn-lg')
+    return el
+  }
+
+  getButton (text, icon, title) {
+    const el = super.getButton(text, icon, title)
+    el.classList.add('btn', 'btn-sm', 'btn-primary', 'mr-2', 'my-1')
+    return el
+  }
+
+  getHeader (text, pathDepth) {
+    const el = document.createElement('span')
+    if (typeof text === 'string') {
+      el.textContent = text
+    } else {
+      el.appendChild(text)
+    }
+
+    el.style.display = 'inline-block'
+
+    return el
+  }
+
+  getFormInputDescription (text) {
+    const el = super.getFormInputDescription(text)
+    el.classList.add('je-desc', 'hide-sm')
+    return el
+  }
+
+  /* Label for all elements except checkbox and radio */
+  getFormInputLabel (text, req) {
+    const el = super.getFormInputLabel(text, req)
+    if (this.options.label_bold) el.classList.add('je-label')
+    return el
+  }
+
+  /* Checkbox elements */
+  /* ToDo: Rename function names for consistency */
+  getCheckbox () {
+    const el = this.getFormInputField('checkbox')
+    return el
+  }
+
+  getCheckboxLabel (text, req) {
+    const el = super.getCheckboxLabel(text, req); const icon = document.createElement('i')
+    icon.classList.add('form-icon')
+    el.classList.add('form-checkbox', 'pr-0')
+    el.insertBefore(icon, el.firstChild)
+    return el
+  }
+
+  getFormCheckboxControl (label, input, compact) {
+    label.insertBefore(input, label.firstChild) /* Move input into label element */
+    if (compact) label.classList.add('form-inline')
+    return label
+  }
+
+  getMultiCheckboxHolder (controls, label, description, infoText) {
+    return super.getMultiCheckboxHolder(controls, label, description, infoText)
+  }
+
+  /* Radio elements */
+  getFormRadio (attributes) {
+    const el = this.getFormInputField('radio')
+    for (const key in attributes) {
+      el.setAttribute(key, attributes[key])
+    }
+    return el
+  }
+
+  getFormRadioLabel (text, req) {
+    const el = super.getFormRadioLabel(text, req); const icon = document.createElement('i')
+    icon.classList.add('form-icon')
+    el.classList.add('form-radio')
+    el.insertBefore(icon, el.firstChild)
+    return el
+  }
+
+  getFormRadioControl (label, input, compact) {
+    label.insertBefore(input, label.firstChild) /* Move input into label element */
+    if (compact) label.classList.add('form-inline')
+    return label
+  }
+
+  /* Create input field */
+  getFormInputField (type) {
+    const el = super.getFormInputField(type)
+    if (!['checkbox', 'radio'].includes(type)) {
+      el.classList.add('form-input')
+    }
+    return el
+  }
+
+  /* Create input field for type="range" */
+  getRangeInput (min, max, step, description, formName) {
+    const el = super.getRangeInput(min, max, step, description, formName)
+    el.classList.add('slider')
+    el.classList.remove('form-input')
+    el.setAttribute('oninput', 'this.setAttribute("value", this.value)')
+    return el
+  }
+
+  getRangeControl (input, output) {
+    const el = super.getRangeControl(input, output)
+    el.classList.add('text-center')
+    return el
+  }
+
+  /* Create select box field */
+  getSelectInput (options, multiple) {
+    const el = super.getSelectInput(options)
+    el.classList.add('form-select')
+    return el
+  }
+
+  /* Create textarea field */
+  getTextareaInput () {
+    const el = document.createElement('textarea')
+    el.classList.add('form-input')
+    return el
+  }
+
+  getFormControl (label, input, description, infoText, formName) {
+    const group = document.createElement('div')
+    group.classList.add('form-group')
+
+    if (label && (input.type === 'checkbox' || input.type === 'radio')) {
+      group.classList.add(input.type)
+      if (infoText) label.appendChild(infoText)
+      label.insertBefore(input, label.firstChild)
+      group.appendChild(label)
+    } else {
+      if (label) {
+        label.classList.add('form-label')
+        group.appendChild(label)
+        if (infoText) label.appendChild(infoText)
+      }
+      group.appendChild(input)
+    }
+
+    if (this.options.input_size === 'small') input.classList.add('input-sm', 'select-sm')
+    else if (this.options.input_size === 'large') input.classList.add('input-lg', 'select-lg')
+    if (input.type !== 'checkbox') group.appendChild(input)
+
+    if (description) group.appendChild(description)
+
+    if (input.tagName.toLowerCase() !== 'div' && input && label && formName) {
+      label.setAttribute('for', formName)
+      input.setAttribute('id', formName)
+    }
+
+    if (input.tagName.toLowerCase() !== 'div' && input && description) {
+      description.setAttribute('id', formName + '-description')
+      input.setAttribute('aria-describedby', formName + '-description')
+    }
+
+    return group
+  }
+
+  /* Create input group (input field with buttons) */
+  getInputGroup (input, buttons) {
+    if (!input) return
+
+    const inputGroup = document.createElement('div')
+    inputGroup.classList.add('input-group')
+    inputGroup.appendChild(input)
+    for (let i = 0; i < buttons.length; i++) {
+      buttons[i].classList.add('input-group-btn')
+      buttons[i].classList.remove('btn-sm', 'mr-2', 'my-1')
+      inputGroup.appendChild(buttons[i])
+    }
+
+    return inputGroup
+  }
+
+  /* Create button for displaying infotext tooltip */
+  getInfoButton (text) {
+    const popover = document.createElement('div')
+    popover.classList.add('popover', 'popover-left', 'float-right')
+
+    const button = document.createElement('button')
+    button.classList.add('btn', 'btn-secondary', 'btn-info', 'btn-action', 's-circle')
+    button.setAttribute('tabindex', '-1') /* exclude element from tab order */
+    popover.appendChild(button)
+
+    const icon = document.createTextNode('I')
+    button.appendChild(icon)
+
+    const container = document.createElement('div')
+    container.classList.add('popover-container')
+    popover.appendChild(container)
+
+    const card = document.createElement('div')
+    card.classList.add('card')
+    container.appendChild(card)
+
+    const cardbody = document.createElement('div')
+    cardbody.classList.add('card-body')
+    cardbody.innerHTML = text
+    card.appendChild(cardbody)
+
+    return popover
+  }
+
+  /* Functions for rendering array with format: "table" */
+  getTable () {
+    const el = super.getTable()
+    el.classList.add('table', 'table-scroll')
+    if (this.options.table_border) el.classList.add('je-table-border')
+    if (this.options.table_zebrastyle) el.classList.add('table-striped')
+    return el
+  }
+
+  /* Function for rendering progressbar */
+  getProgressBar () {
+    const progressBar = super.getProgressBar()
+    progressBar.classList.add('progress')
+    return progressBar
+  }
+
+  /* Containers for array with format: "tab" */
+  getTabHolder (propertyName) {
+    const pName = typeof propertyName === 'undefined' ? '' : propertyName
+    const el = document.createElement('div')
+    el.classList.add('columns')
+    el.innerHTML = `<div class="column col-2"></div><div class="column col-10 content" id="${pName}"></div>`
+    return el
+  }
+
+  /* Containers for array with format: "tab-top" */
+  getTopTabHolder (propertyName) {
+    const pName = typeof propertyName === 'undefined' ? '' : propertyName
+    const el = document.createElement('div')
+    el.innerHTML = `<ul class="tab"></ul><div class="content" id="${pName}"></div>`
+    return el
+  }
+
+  /* Tab button for array with format: "tab" */
+  getTab (span, tabId) {
+    const el = document.createElement('a')
+    el.classList.add('btn', 'btn-secondary', 'btn-block')
+    el.setAttribute('href', `#${tabId}`)
+    el.appendChild(span)
+    return el
+  }
+
+  /* Tab button for array with format: "tab-top" */
+  getTopTab (span, tabId) {
+    const el = document.createElement('li')
+    el.id = tabId
+    el.classList.add('tab-item')
+
+    /* Spectre needs an a tag inside the tab item, not a span */
+    const a = document.createElement('a')
+    a.setAttribute('href', `#${tabId}`)
+    a.appendChild(span)
+
+    el.appendChild(a)
+    return el
+  }
+
+  markTabActive (row) {
+    row.tab.classList.add('active')
+    if (typeof row.rowPane !== 'undefined') row.rowPane.style.display = ''
+    else row.container.style.display = ''
+  }
+
+  markTabInactive (row) {
+    row.tab.classList.remove('active')
+    if (typeof row.rowPane !== 'undefined') row.rowPane.style.display = 'none'
+    else row.container.style.display = 'none'
+  }
+
+  afterInputReady (input) {
+    if (input.localName === 'select') {
+      /* Selectize adjustments */
+      if (input.classList.contains('selectized')) {
+        const selectized = input.nextSibling
+        if (selectized) {
+          /* Remove Spectre class 'form-select' as this conflicts with Selectize styling */
+          selectized.classList.remove('form-select')
+          Array.from(selectized.querySelectorAll('.form-select')).forEach(el => {
+            el.classList.remove('form-select')
+          })
+        }
+        /* Select2 ajustments */
+      } else if (input.classList.contains('select2-hidden-accessible')) {
+        const select2 = input.nextSibling
+        const single = select2 && select2.querySelector('.select2-selection--single')
+        /* Add Spectre 'form-select' to single-select2 elements */
+        if (single) select2.classList.add('form-select')
+      }
+    }
+
+    if (input.controlgroup) return
+    input.controlgroup = this.closest(input, '.form-group')
+    if (this.closest(input, '.compact')) {
+      input.controlgroup.style.marginBottom = 0
+    }
+  }
+
+  /* Controls output of errormessages displayed in form */
+  addInputError (input, text) {
+    if (!input.controlgroup) return
+    input.controlgroup.classList.add('has-error')
+    if (!input.errmsg) {
+      input.errmsg = document.createElement('p')
+      input.errmsg.classList.add('form-input-hint')
+      input.controlgroup.appendChild(input.errmsg)
+    }
+    input.errmsg.classList.remove('d-hide')
+    input.errmsg.textContent = text
+    input.errmsg.setAttribute('role', 'alert')
+  }
+
+  removeInputError (input) {
+    if (!input.errmsg) return
+    input.errmsg.classList.add('d-hide')
+    input.controlgroup.classList.remove('has-error')
+  }
+}
+
+/* Custom stylesheet rules. (Does not support comma separated selectors) */
+/*  Will create a stylesheet in document head with the id "theme-spectre" if not exists. */
+spectreTheme.rules = rules