@json-editor/json-editor 2.15.1 → 2.15.3

package/src/editors/table.js

@@ -1,4 +1,4 @@
-import { ArrayEditor } from './array.js'
+import { ArrayEditor, supportDragDrop } from './array.js'
 import { extend, generateUUID, trigger } from '../utilities.js'
 
 export class TableEditor extends ArrayEditor {
@@ -187,6 +187,8 @@ export class TableEditor extends ArrayEditor {
   }
 
   setValue (value = [], initial) {
+    value = this.applyConstFilter(value)
+
     /* Make sure value has between minItems and maxItems items in it */
     value = this.ensureArraySize(value)
 
@@ -221,7 +223,6 @@ export class TableEditor extends ArrayEditor {
     if (numrowsChanged || initial) this.refreshRowButtons()
 
     this.onChange()
-
     /* TODO: sortable */
   }
 
@@ -321,6 +322,8 @@ export class TableEditor extends ArrayEditor {
       this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
     }
 
+    this._supportDragDrop(this.rows[i].row)
+
     if (typeof value !== 'undefined') this.rows[i].setValue(value)
 
     return this.rows[i]
@@ -434,6 +437,20 @@ export class TableEditor extends ArrayEditor {
     return button
   }
 
+  _supportDragDrop (tab) {
+    supportDragDrop(tab, (i, j) => {
+      const rows = this.getValue()
+      const tmp = rows[i]
+      rows.splice(i, 1)
+      rows.splice(j, 0, tmp)
+
+      this.setValue(rows)
+      this.onChange(true)
+
+      this.jsoneditor.trigger('moveRow', this.rows[j])
+    }, { useTrigger: true })
+  }
+
   addControls () {
     this.collapsed = false
     this.toggle_button = this._createToggleButton()

package/src/editors/upload.js

@@ -276,6 +276,8 @@ export class UploadEditor extends AbstractEditor {
   }
 
   setValue (val) {
+    val = this.applyConstFilter(val)
+
     if (this.value !== val) {
       this.value = val
       this.input.value = this.value

package/src/editors/uuid.js

@@ -31,6 +31,8 @@ export class UuidEditor extends StringEditor {
   }
 
   setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
     if (!this.testUuid(value)) value = this.uuid
     this.uuid = value
     super.setValue(value, initial, fromTemplate)

package/src/resolvers.js

@@ -81,7 +81,7 @@ const arraysOfStrings = (schema, je) => {
 }
 
 /* Use the multiple editor for schemas with `oneOf` or `anyOf` set */
-const oneOf = schema => (schema.oneOf || schema.anyOf) && 'multiple'
+const oneOf = schema => (schema.oneOf || schema.anyOf) && (schema.options?.switcher ?? true) === true && 'multiple'
 
 /* Use the multiple editor for schemas with `if` set */
 const ifThenElse = schema => (schema.if) && 'multiple'

package/src/theme.js

@@ -23,6 +23,29 @@ export class AbstractTheme {
     return document.createElement('div')
   }
 
+  getOptInCheckbox (formname) {
+    const container = document.createElement('span')
+
+    const label = this.getHiddenLabel(formname + ' opt-in')
+    label.setAttribute('for', formname + '-opt-in')
+    label.textContent = formname + '-opt-in'
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('style', 'margin: 0 10px 0 0;')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('json-editor-opt-in')
+
+    container.appendChild(checkbox)
+    container.appendChild(label)
+
+    return { label, checkbox, container }
+  }
+
+  getOptInSwitch (formname) {
+    return this.getOptInCheckbox()
+  }
+
   getFloatRightLinkHolder () {
     const el = document.createElement('div')
     el.classList.add('je-float-right-linkholder')

package/src/themes/bootstrap3.css

@@ -0,0 +1,53 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 28px;
+    height: 16px;
+    margin-right: 10px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.switch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .1s;
+    border-radius: 34px;
+}
+
+.switch-slider:before {
+    position: absolute;
+    content: "";
+    height: 12px;
+    width: 12px;
+    left: 1px;
+    top: 2px;
+    background-color: white;
+    transition: .1s;
+    border-radius: 50%;
+}
+
+input:checked + .switch-slider {
+    background-color: #2196F3;
+}
+
+input:focus + .switch-slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switch-slider:before {
+    transform: translateX(12px);
+}
+
+input:disabled + .switch-slider {
+    opacity: 0.5;
+}

package/src/themes/bootstrap3.css.js

@@ -1,3 +1,3 @@
 /* eslint-disable */
-export default {}
+export default {".switch":"position:relative;display:inline-block;width:28px;height:16px;margin-right:10px",".switch input":"opacity:0;width:0;height:0",".switch-slider":"position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:%23ccc;transition:.1s;border-radius:34px",".switch-slider:before":"position:absolute;content:%22%22;height:12px;width:12px;left:1px;top:2px;background-color:white;transition:.1s;border-radius:50%25","input:checked + .switch-slider":"background-color:%232196F3","input:focus + .switch-slider":"box-shadow:0%200%201px%20%232196F3","input:checked + .switch-slider:before":"transform:translateX(12px)","input:disabled + .switch-slider":"opacity:0.5"}
 /* eslint-enable */

package/src/themes/bootstrap3.js

@@ -2,6 +2,32 @@ import { AbstractTheme } from '../theme.js'
 import rules from './bootstrap3.css.js'
 
 export class bootstrap3Theme extends AbstractTheme {
+  getOptInSwitch (formname) {
+    const label = this.getHiddenLabel(formname + ' opt-in')
+    label.setAttribute('for', formname + '-opt-in')
+
+    const container = document.createElement('label')
+    container.classList.add('switch')
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('json-editor-opt-in')
+
+    const slider = document.createElement('span')
+    slider.classList.add('switch-slider')
+
+    const switchLabelText = document.createElement('span')
+    switchLabelText.classList.add('sr-only')
+    switchLabelText.textContent = formname + '-opt-in'
+
+    container.appendChild(switchLabelText)
+    container.appendChild(checkbox)
+    container.appendChild(slider)
+
+    return { label, checkbox, container }
+  }
+
   getSelectInput (options, multiple) {
     const el = super.getSelectInput(options)
     el.classList.add('form-control')
@@ -145,6 +171,10 @@ export class bootstrap3Theme extends AbstractTheme {
     return el
   }
 
+  getHeaderContainer () {
+    return document.createElement('div')
+  }
+
   getHeader (text, pathDepth) {
     const el = document.createElement('span')
     el.classList.add('h3')

package/src/themes/bootstrap4.js

@@ -43,6 +43,33 @@ export class bootstrap4Theme extends AbstractTheme {
     return el
   }
 
+  getOptInSwitch (formname) {
+    const label = this.getHiddenLabel(formname + ' opt-in')
+    label.setAttribute('for', formname + '-opt-in')
+
+    const container = document.createElement('div')
+    container.classList.add('custom-control', 'custom-switch', 'd-inline-block', 'fs-6')
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('custom-control-input', 'json-editor-opt-in')
+
+    const switchLabel = document.createElement('label')
+    switchLabel.setAttribute('for', formname + '-opt-in')
+    switchLabel.classList.add('custom-control-label')
+
+    const switchLabelText = document.createElement('span')
+    switchLabelText.classList.add('sr-only')
+    switchLabelText.textContent = formname + '-opt-in'
+    switchLabel.appendChild(switchLabelText)
+
+    container.appendChild(checkbox)
+    container.appendChild(switchLabel)
+
+    return { label, checkbox, container }
+  }
+
   setGridColumnSize (el, size, offset) {
     el.classList.add(`col-md-${size}`)
 

package/src/themes/bootstrap5.js

@@ -35,6 +35,34 @@ export class bootstrap5Theme extends AbstractTheme {
     return el
   }
 
+  getOptInSwitch (formname) {
+    const label = this.getHiddenLabel(formname + ' opt-in')
+    label.setAttribute('for', formname + '-opt-in')
+
+    const container = document.createElement('div')
+    container.classList.add('form-check', 'form-switch', 'd-inline-block', 'fs-6')
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('role', 'switch')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('form-check-input', 'json-editor-opt-in')
+
+    const switchLabel = document.createElement('label')
+    switchLabel.setAttribute('for', formname + '-opt-in')
+    switchLabel.classList.add('form-check-label')
+
+    const switchLabelText = document.createElement('span')
+    switchLabelText.classList.add('visually-hidden')
+    switchLabelText.textContent = formname + '-opt-in'
+    switchLabel.appendChild(switchLabelText)
+
+    container.appendChild(checkbox)
+    container.appendChild(switchLabel)
+
+    return { label, checkbox, container }
+  }
+
   setGridColumnSize (el, size, offset) {
     el.classList.add(`col-md-${size}`)
 

package/src/themes/spectre.js

@@ -19,6 +19,34 @@ export class spectreTheme extends AbstractTheme {
     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}`)

package/src/themes/tailwind.css

@@ -247,3 +247,57 @@ select[multiple].from-select {
 .je-dropzone.invalid-dropzone {
   background: red;
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 28px;
+  height: 16px;
+  margin-right: 10px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .1s;
+  border-radius: 34px;
+}
+
+.switch-slider:before {
+  position: absolute;
+  content: "";
+  height: 12px;
+  width: 12px;
+  left: 1px;
+  top: 2px;
+  background-color: white;
+  transition: .1s;
+  border-radius: 50%;
+}
+
+input:checked + .switch-slider {
+  background-color: #2196F3;
+}
+
+input:focus + .switch-slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switch-slider:before {
+  transform: translateX(12px);
+}
+
+input:disabled + .switch-slider {
+  opacity: 0.5;
+}

package/src/themes/tailwind.css.js

@@ -1,3 +1,3 @@
 /* eslint-disable */
-export default {".slider":"-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;display:block;border:none;height:1.2rem;width:100%25",".slider:focus":"box-shadow:0%200%200%200%20rgba(87%2C%2085%2C%20217%2C%200.2);outline:none",".slider.tooltip:not([data-tooltip])::after":"content:attr(value)",".slider::-webkit-slider-thumb":"-webkit-appearance:none;background:%23f17405;border-radius:100%25;height:0.6rem;margin-top:-0.25rem;transition:transform%200.2s;width:0.6rem",".slider:active::-webkit-slider-thumb":"transform:scale(1.25);outline:none",".slider::-webkit-slider-runnable-track":"background:%23b2b4b6;border-radius:0.1rem;height:0.1rem;width:100%25","a.tooltips":"position:relative;display:inline","a.tooltips span":"position:absolute;white-space:nowrap;width:auto;padding-left:1rem;padding-right:1rem;color:%23ffffff;background:rgba(56%2C%2056%2C%2056%2C%200.85);height:1.5rem;line-height:1.5rem;text-align:center;visibility:hidden;border-radius:3px","a.tooltips span:after":"content:%22%22;position:absolute;top:50%25;left:100%25;margin-top:-5px;width:0;height:0;border-left:5px%20solid%20rgba(56%2C%2056%2C%2056%2C%200.85);border-top:5px%20solid%20transparent;border-bottom:5px%20solid%20transparent","a:hover.tooltips span":"visibility:visible;opacity:0.9;font-size:0.8rem;right:100%25;top:50%25;margin-top:-12px;margin-right:10px;z-index:999",".json-editor-btntype-properties + div":"font-size:0.8rem;font-weight:normal","textarea":"width:100%25;min-height:2rem;resize:vertical","table":"width:100%25;border-collapse:collapse",".table td":"padding:0rem%200rem","div[data-schematype]:not([data-schematype='object'])":"transition:0.5s","div[data-schematype]:not([data-schematype='object']):hover":"background-color:%23e6f4fe","div[data-schemaid='root']":"position:relative;width:inherit;display:inherit;overflow-x:hidden;z-index:10","select[multiple]":"height:auto","select[multiple].from-select":"height:auto",".je-table-zebra:nth-child(even)":"background-color:%23f2f2f2",".je-table-border":"border:0.5px%20solid%20black",".je-table-hdiv":"border-bottom:1px%20solid%20black",".je-border":"border:0.05rem%20solid%20%233182ce",".je-panel":"width:inherit;padding:0.2rem;margin:0.2rem;background-color:rgba(218%2C%20222%2C%20228%2C%200.1)",".je-panel-top":"width:100%25;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;font-weight:bold",".je-desc":"font-size:smaller;margin:0.2rem%200",".container-xl.je-noindent":"padding-left:0;padding-right:0",".json-editor-btntype-add":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%234299e1;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btntype-deletelast":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%23e53e3e;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btntype-deleteall":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%23000000;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btn-save":"float:right;color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%232b6cb0;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btn-back":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%232b6cb0;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btntype-delete":"color:%23e53e3e;background-color:rgba(218%2C%20222%2C%20228%2C%200.1);margin:0.03rem;padding:0.1rem",".json-editor-btntype-move":"color:%23000000;background-color:rgba(218%2C%20222%2C%20228%2C%200.1);margin:0.03rem;padding:0.1rem",".json-editor-btn-collapse":"padding:0em%200.8rem;font-size:1.3rem;color:%23e53e3e;background-color:rgba(218%2C%20222%2C%20228%2C%200.1)",".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"}
+export default {".slider":"-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;display:block;border:none;height:1.2rem;width:100%25",".slider:focus":"box-shadow:0%200%200%200%20rgba(87%2C%2085%2C%20217%2C%200.2);outline:none",".slider.tooltip:not([data-tooltip])::after":"content:attr(value)",".slider::-webkit-slider-thumb":"-webkit-appearance:none;background:%23f17405;border-radius:100%25;height:0.6rem;margin-top:-0.25rem;transition:transform%200.2s;width:0.6rem",".slider:active::-webkit-slider-thumb":"transform:scale(1.25);outline:none",".slider::-webkit-slider-runnable-track":"background:%23b2b4b6;border-radius:0.1rem;height:0.1rem;width:100%25","a.tooltips":"position:relative;display:inline","a.tooltips span":"position:absolute;white-space:nowrap;width:auto;padding-left:1rem;padding-right:1rem;color:%23ffffff;background:rgba(56%2C%2056%2C%2056%2C%200.85);height:1.5rem;line-height:1.5rem;text-align:center;visibility:hidden;border-radius:3px","a.tooltips span:after":"content:%22%22;position:absolute;top:50%25;left:100%25;margin-top:-5px;width:0;height:0;border-left:5px%20solid%20rgba(56%2C%2056%2C%2056%2C%200.85);border-top:5px%20solid%20transparent;border-bottom:5px%20solid%20transparent","a:hover.tooltips span":"visibility:visible;opacity:0.9;font-size:0.8rem;right:100%25;top:50%25;margin-top:-12px;margin-right:10px;z-index:999",".json-editor-btntype-properties + div":"font-size:0.8rem;font-weight:normal","textarea":"width:100%25;min-height:2rem;resize:vertical","table":"width:100%25;border-collapse:collapse",".table td":"padding:0rem%200rem","div[data-schematype]:not([data-schematype='object'])":"transition:0.5s","div[data-schematype]:not([data-schematype='object']):hover":"background-color:%23e6f4fe","div[data-schemaid='root']":"position:relative;width:inherit;display:inherit;overflow-x:hidden;z-index:10","select[multiple]":"height:auto","select[multiple].from-select":"height:auto",".je-table-zebra:nth-child(even)":"background-color:%23f2f2f2",".je-table-border":"border:0.5px%20solid%20black",".je-table-hdiv":"border-bottom:1px%20solid%20black",".je-border":"border:0.05rem%20solid%20%233182ce",".je-panel":"width:inherit;padding:0.2rem;margin:0.2rem;background-color:rgba(218%2C%20222%2C%20228%2C%200.1)",".je-panel-top":"width:100%25;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;font-weight:bold",".je-desc":"font-size:smaller;margin:0.2rem%200",".container-xl.je-noindent":"padding-left:0;padding-right:0",".json-editor-btntype-add":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%234299e1;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btntype-deletelast":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%23e53e3e;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btntype-deleteall":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%23000000;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btn-save":"float:right;color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%232b6cb0;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btn-back":"color:white;margin:0.3rem;padding:0.3rem%200.8rem;background-color:%232b6cb0;box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-webkit-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2);-moz-box-shadow:3px%203px%205px%201px%20rgba(4%2C%204%2C%204%2C%200.2)",".json-editor-btntype-delete":"color:%23e53e3e;background-color:rgba(218%2C%20222%2C%20228%2C%200.1);margin:0.03rem;padding:0.1rem",".json-editor-btntype-move":"color:%23000000;background-color:rgba(218%2C%20222%2C%20228%2C%200.1);margin:0.03rem;padding:0.1rem",".json-editor-btn-collapse":"padding:0em%200.8rem;font-size:1.3rem;color:%23e53e3e;background-color:rgba(218%2C%20222%2C%20228%2C%200.1)",".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",".switch":"position:relative;display:inline-block;width:28px;height:16px;margin-right:10px",".switch input":"opacity:0;width:0;height:0",".switch-slider":"position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:%23ccc;transition:.1s;border-radius:34px",".switch-slider:before":"position:absolute;content:%22%22;height:12px;width:12px;left:1px;top:2px;background-color:white;transition:.1s;border-radius:50%25","input:checked + .switch-slider":"background-color:%232196F3","input:focus + .switch-slider":"box-shadow:0%200%201px%20%232196F3","input:checked + .switch-slider:before":"transform:translateX(12px)","input:disabled + .switch-slider":"opacity:0.5"}
 /* eslint-enable */

package/src/themes/tailwind.js

@@ -19,6 +19,32 @@ export class tailwindTheme extends AbstractTheme {
     super(jsoneditor, options)
   }
 
+  getOptInSwitch (formname) {
+    const label = this.getHiddenLabel(formname + ' opt-in')
+    label.setAttribute('for', formname + '-opt-in')
+
+    const container = document.createElement('label')
+    container.classList.add('switch')
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('json-editor-opt-in')
+
+    const slider = document.createElement('span')
+    slider.classList.add('switch-slider', 'round')
+
+    const switchLabelText = document.createElement('span')
+    switchLabelText.classList.add('sr-only')
+    switchLabelText.textContent = formname + '-opt-in'
+
+    container.appendChild(switchLabelText)
+    container.appendChild(checkbox)
+    container.appendChild(slider)
+
+    return { label, checkbox, container }
+  }
+
   getGridContainer () {
     const el = document.createElement('div')
     el.classList.add('flex', 'flex-col', 'w-full')

package/tests/codeceptjs/core_test.js

@@ -5,6 +5,34 @@ const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
+Scenario('should use switch toggles for opt-in inputs @opt-in-widget', async ({ I }) => {
+  I.amOnPage('opt-in-widget.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{}')
+  I.click('[data-schemapath="root.address"] .switch-slider')
+  I.click('[data-schemapath="root.email"] .switch-slider')
+  I.click('[data-schemapath="root.password"] .switch-slider')
+  I.click('[data-schemapath="root.name"] .switch-slider')
+  I.click('[data-schemapath="root.gender"] .switch-slider')
+  I.click('[data-schemapath="root.pets"] .switch-slider')
+  I.click('[data-schemapath="root.agree"] .switch-slider')
+  I.click('[data-schemapath="root.address.street"] .switch-slider')
+  I.click('[data-schemapath="root.address.number"] .switch-slider')
+  I.waitForValue('#value', '{"email":"","password":"","name":"Random-223","gender":"Male","address":{"street":"","number":""},"pets":[{"type":"dog","name":"Walter"}],"agree":false}')
+})
+
+Scenario('should show all validation errors on demand @editor-show-validation-errors', async ({ I }) => {
+  I.amOnPage('editor-show-validation-errors.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('Value must be the constant value')
+  I.dontSee('Value must be at least 4 characters long')
+  I.dontSee('Value must be at least 4')
+  I.click('#show-validation-errors')
+  I.waitForText('Value must be the constant value')
+  I.waitForText('Value must be at least 4 characters long')
+  I.waitForText('Value must be at least 4')
+})
+
 Scenario('should enforce const @enforce_const', async ({ I }) => {
   I.amOnPage('enforce-const.html')
   I.waitForElement('.je-ready')

package/tests/codeceptjs/editors/multiple_test.js

@@ -0,0 +1,27 @@
+/* global Feature Scenario Event */
+
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('multiple')
+
+Scenario('should hide switcher input @switcher-option', async ({ I }) => {
+  I.amOnPage('switcher-option.html')
+  I.waitForElement('.je-ready')
+  I.dontSeeElement('.je-switcher')
+
+  I.fillField('[name="root[name]"]', 'a')
+  I.pressKey('Tab')
+  I.waitForText('If provided, value must be at least 4 and at most 10')
+
+  I.fillField('[name="root[name]"]', '')
+  I.pressKey('Tab')
+  I.dontSee('If provided, value must be at least 4 and at most 10')
+
+  I.fillField('[name="root[name]"]', 'abcdefghijklmnopq')
+  I.pressKey('Tab')
+  I.waitForText('If provided, value must be at least 4 and at most 10')
+
+  I.fillField('[name="root[name]"]', 'test')
+  I.pressKey('Tab')
+  I.dontSee('If provided, value must be at least 4 and at most 10')
+})

package/tests/codeceptjs/issues/issue-gh-1559_test.js

@@ -0,0 +1,15 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1559 should remain fixed @issue-1559', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1559.html')
+  I.waitForElement('.je-ready')
+  I.dontSeeElement('[data-schemapath="root.dependent_on_false"]')
+  I.click('[data-schemapath="root.dependent_on_true"] input')
+  I.waitForElement('[data-schemapath="root.dependent_on_false"]', 2)
+  I.seeElement('[data-schemapath="root.dependent_on_false"]')
+  I.click('[data-schemapath="root.dependent_on_true"] input')
+  I.waitForInvisible('[data-schemapath="root.dependent_on_false"]', 2)
+  I.dontSeeElement('[data-schemapath="root.dependent_on_false"]')
+})

package/tests/codeceptjs/issues/issue-gh-1562_test.js

@@ -0,0 +1,12 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1562 should remain fixed @issue-1562', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1562.html')
+  I.waitForElement('.je-ready')
+  I.click('#editor-container > div > div.card.card-body.mb-3.bg-light > div > div > div > div > div.card.card-body.mb-3.bg-light > div > div > div:nth-child(2) > div > span.btn-group.je-object__controls > button.btn.btn-secondary.btn-sm.json-editor-btn-edit_properties.json-editor-btntype-properties')
+  I.fillField('[id="root.model.entities-property-selector"]', 'test')
+  I.click('#editor-container > div > div.card.card-body.mb-3.bg-light > div > div > div > div > div.card.card-body.mb-3.bg-light > div > div > div:nth-child(2) > div > span.btn-group.je-object__controls > div:nth-child(2) > button')
+  I.waitForText('Expand')
+})

package/tests/codeceptjs/issues/issue-gh-1586_test.js

@@ -0,0 +1,15 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 1586 should remain fixed @issue-1586', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1586.html')
+  I.waitForElement('.je-ready')
+  I.click({ xpath: '//button[contains(@class, "json-editor-btn-add") and .//span[contains(text(), "Add item")]]' })
+  I.checkOption('[id="root[0][type]-opt-in"]')
+  I.checkOption('[id="root[0][subtype][type]-opt-in"]')
+  I.click('.json-editor-btn-delete')
+  I.click({ xpath: '//button[contains(@class, "json-editor-btn-add") and .//span[contains(text(), "Add item")]]' })
+  I.seeDisabledAttribute('[id="root[0][type]"]')
+  I.seeDisabledAttribute('[id="root[0][subtype][type]"]')
+})

package/tests/pages/editor-show-validation-errors.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>showValidationErrors</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <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">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+    <div class="btn btn-success" id="show-validation-errors">Show validation errors</div>
+</div>
+
+<script>
+  const editorContainer = document.querySelector('#editor-container')
+  const schema = {
+    "type": "object",
+    "properties": {
+      "boolean-checkbox": {
+        "title": "boolean-checkbox",
+        "type": "boolean",
+        "format": "checkbox",
+        "const": true,
+        "default": false
+      },
+      "minLength": {
+        "type": "string",
+        "minLength": 4,
+      },
+      "minimum": {
+        "type": "number",
+        "minimum": 4,
+      }
+    }
+  }
+
+  const editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome'
+  })
+
+  const showValidationErrors = document.querySelector('#show-validation-errors')
+
+  showValidationErrors.addEventListener('click', () => {
+    editor.showValidationErrors()
+  })
+</script>
+
+</body>
+</html>