UI improvements and cleanup

src/editors/array.js

@@ -59,11 +59,13 @@ class EditorArray extends Editor {
       const deleteBtn = this.theme.getDeleteItemBtn()
       const moveUpBtn = this.theme.getMoveUpItemBtn()
       const moveDownBtn = this.theme.getMoveDownItemBtn()
+      const btnGroup = this.theme.getBtnGroup()
 
       child.ui.control.arrayActions.innerHTML = ''
-      child.ui.control.arrayActions.appendChild(deleteBtn)
-      child.ui.control.arrayActions.appendChild(moveUpBtn)
-      child.ui.control.arrayActions.appendChild(moveDownBtn)
+      child.ui.control.arrayActions.appendChild(btnGroup)
+      btnGroup.appendChild(deleteBtn)
+      btnGroup.appendChild(moveUpBtn)
+      btnGroup.appendChild(moveDownBtn)
 
       this.control.childrenSlot.appendChild(child.ui.control.container)
 

src/themes/bootstrap3.js

@@ -9,6 +9,13 @@ class ThemeBootstrap3 extends Theme {
     this.useToggleEvents = false
   }
 
+  getAddPropertyButton () {
+    const btn = super.getAddPropertyButton()
+    btn.classList.add('btn-primary')
+    btn.classList.add('btn-block')
+    return btn
+  }
+
   getCollapseToggle (config) {
     const toggle = super.getCollapseToggle(config)
     toggle.setAttribute('href', '#' + config.collapseId)
@@ -156,14 +163,6 @@ class ThemeBootstrap3 extends Theme {
     return control
   }
 
-  getSwitcher (config) {
-    const control = super.getSwitcher(config)
-    const { container, input } = control
-    container.classList.remove('form-group')
-    input.classList.remove('form-control')
-    return control
-  }
-
   getAlert (config) {
     const html = super.getAlert(config)
     html.classList.add('alert')

src/themes/bootstrap4.js

@@ -9,6 +9,13 @@ class ThemeBootstrap4 extends Theme {
     this.useToggleEvents = false
   }
 
+  getAddPropertyButton () {
+    const btn = super.getAddPropertyButton()
+    btn.classList.add('btn-primary')
+    btn.classList.add('btn-block')
+    return btn
+  }
+
   getCollapseToggle (config) {
     const toggle = super.getCollapseToggle(config)
     toggle.setAttribute('href', '#' + config.collapseId)
@@ -66,6 +73,7 @@ class ThemeBootstrap4 extends Theme {
   getCardBody () {
     const html = super.getCardBody()
     html.classList.add('card-body')
+    html.classList.add('pb-0')
     return html
   }
 
@@ -161,14 +169,6 @@ class ThemeBootstrap4 extends Theme {
     return control
   }
 
-  getSwitcher (config) {
-    const control = super.getSwitcher(config)
-    const { container, input } = control
-    container.classList.remove('form-group')
-    input.classList.remove('form-control')
-    return control
-  }
-
   getAlert (config) {
     const html = super.getAlert(config)
     html.classList.add('alert')

src/themes/bootstrap5.js

@@ -9,6 +9,13 @@ class ThemeBootstrap5 extends Theme {
     this.useToggleEvents = false
   }
 
+  getAddPropertyButton () {
+    const btn = super.getAddPropertyButton()
+    btn.classList.add('btn-primary')
+    btn.classList.add('w-100')
+    return btn
+  }
+
   getCollapseToggle (config) {
     const toggle = super.getCollapseToggle(config)
     toggle.setAttribute('href', '#' + config.collapseId)
@@ -65,6 +72,7 @@ class ThemeBootstrap5 extends Theme {
   getCardBody () {
     const html = super.getCardBody()
     html.classList.add('card-body')
+    html.classList.add('pb-0')
     return html
   }
 
@@ -170,15 +178,6 @@ class ThemeBootstrap5 extends Theme {
     return control
   }
 
-  getSwitcher (config) {
-    const control = super.getSwitcher(config)
-    const { container, input, label } = control
-    container.classList.remove('mb-3')
-    input.classList.remove('form-select')
-    this.visuallyHidden(label)
-    return control
-  }
-
   getAlert (config) {
     const html = super.getAlert(config)
     html.classList.add('alert')

src/themes/icons/icons.js

@@ -13,7 +13,6 @@ export const glyphicons = {
   add: 'glyphicon glyphicon-plus',
   moveUp: 'glyphicon glyphicon-arrow-up',
   moveDown: 'glyphicon glyphicon-arrow-down',
-  expand: 'glyphicon glyphicon-chevron-right',
   collapse: 'glyphicon glyphicon-chevron-down'
 }
 
@@ -27,7 +26,6 @@ export const bootstrapIcons = {
   add: 'bi bi-plus',
   moveUp: 'bi bi-arrow-up',
   moveDown: 'bi bi-arrow-down',
-  expand: 'bi bi-chevron-right',
   collapse: 'bi bi-chevron-down'
 }
 
@@ -41,7 +39,6 @@ export const fontAwesome3 = {
   add: 'icon-plus',
   moveUp: 'icon-arrow-up',
   moveDown: 'icon-arrow-down',
-  expand: 'icon-chevron-right',
   collapse: 'icon-chevron-down'
 }
 
@@ -55,7 +52,6 @@ export const fontAwesome4 = {
   add: 'fa fa-plus',
   moveUp: 'fa fa-arrow-up',
   moveDown: 'fa fa-arrow-down',
-  expand: 'fa fa-chevron-right',
   collapse: 'fa fa-chevron-down'
 }
 
@@ -69,7 +65,6 @@ export const fontAwesome5 = {
   add: 'fas fa-plus',
   moveUp: 'fas fa-arrow-up',
   moveDown: 'fas fa-arrow-down',
-  expand: 'fas fa-chevron-right',
   collapse: 'fas fa-chevron-down'
 }
 
@@ -83,6 +78,5 @@ export const fontAwesome6 = {
   add: 'fa-solid fa-plus',
   moveUp: 'fa-solid fa-arrow-up',
   moveDown: 'fa-solid fa-arrow-down',
-  expand: 'fa-solid fa-chevron-right',
   collapse: 'fa-solid fa-chevron-down'
 }

src/themes/theme.js

@@ -114,7 +114,7 @@ class Theme {
    * @private
    */
   getArrayActionsSlot () {
-    const html = this.getBtnGroup()
+    const html = document.createElement('span')
     html.classList.add('jedi-array-actions-slot')
     return html
   }
@@ -211,6 +211,24 @@ class Theme {
       })
     }
 
+    let collapsed = config.startCollapsed
+
+    toggle.style.transition = 'transform 0.1s ease'
+
+    if (collapsed) {
+      toggle.style.transform = 'rotate(90deg)'
+    }
+
+    toggle.addEventListener('click', () => {
+      if (collapsed) {
+        toggle.style.transform = 'rotate(0deg)'
+      } else {
+        toggle.style.transform = 'rotate(90deg)'
+      }
+
+      collapsed = !collapsed
+    })
+
     return toggle
   }
 
@@ -273,7 +291,6 @@ class Theme {
   getBtnGroup () {
     const html = document.createElement('span')
     html.classList.add('jedi-btn-group')
-    html.style.display = 'initial'
     return html
   }
 
@@ -316,7 +333,7 @@ class Theme {
    */
   getArrayBtnAdd () {
     const html = this.getButton({
-      textContent: 'Add item into',
+      textContent: 'Add item',
       icon: 'add'
     })
     html.classList.add('jedi-array-add')
@@ -438,7 +455,8 @@ class Theme {
       id: 'collapse-toggle-' + config.id,
       icon: 'collapse',
       collapseId: collapseId,
-      collapse: collapse
+      collapse: collapse,
+      startCollapsed: config.startCollapsed
     })
 
     const propertiesActivators = this.getPropertiesActivators()
@@ -473,6 +491,7 @@ class Theme {
     if (config.addProperty) {
       propertiesContainer.appendChild(addPropertyControl.container)
       propertiesContainer.appendChild(addPropertyBtn)
+      propertiesContainer.appendChild(document.createElement('hr'))
     }
 
     if (config.enablePropertiesToggle) {
@@ -540,7 +559,8 @@ class Theme {
       id: 'collapse-toggle-' + config.id,
       icon: 'collapse',
       collapseId: collapseId,
-      collapse: collapse
+      collapse: collapse,
+      startCollapsed: config.startCollapsed
     })
 
     container.appendChild(fieldset)
@@ -616,8 +636,8 @@ class Theme {
     card.appendChild(header)
     card.appendChild(body)
     header.appendChild(actions)
-    actions.appendChild(arrayActions)
     actions.appendChild(switcher.container)
+    actions.appendChild(arrayActions)
     body.appendChild(messages)
     body.appendChild(childrenSlot)
 
@@ -923,7 +943,6 @@ class Theme {
 
     const input = document.createElement('select')
     input.setAttribute('id', config.id)
-    input.style.width = '100%'
 
     config.values.forEach((value, index) => {
       const option = document.createElement('option')
@@ -976,7 +995,34 @@ class Theme {
    * @private
    */
   getSwitcher (config) {
-    return this.getSelectControl(config)
+    const container = document.createElement('span')
+    const input = document.createElement('select')
+    input.setAttribute('id', config.id)
+
+    config.values.forEach((value, index) => {
+      const option = document.createElement('option')
+      option.setAttribute('value', value)
+
+      if (config.titles && config.titles[index]) {
+        option.textContent = config.titles[index]
+      }
+
+      input.appendChild(option)
+    })
+
+    const label = document.createElement('label')
+    label.setAttribute('for', config.id)
+
+    const labelText = document.createElement('span')
+    labelText.textContent = config.label
+
+    this.visuallyHidden(label)
+
+    container.appendChild(label)
+    container.appendChild(input)
+    label.appendChild(labelText)
+
+    return { container, input, label, labelText }
   }
 
   /**

todo.md

@@ -1,12 +1,12 @@
 ## Todo
 
-- merge schema into own oneOf schemas https://json.schemastore.org/geojson.json
+- getButton exports object { button, text, icon }
+- x- prefix
+- compact descriptions
 - additionalItems with prefixItems validation and editing https://json-schema.org/understanding-json-schema/reference/array#additionalitems
 - multiple instance: do not transfer values between editors
 - append descriptions if set and not hidden
 - type hidden description
-- enforce margin-bottom
-- add property separated from edit properties
 - editor hidden description
 - hide if-then-else headers
 - better elements class names
@@ -24,20 +24,14 @@
 - placeholderOption
 - array copy button
 - ?can not set value if enum and not in enum?
-- close on escape
-- compact descriptions
 - aria live for multiple
 - aria live for arrays
-- empty jedi-actions-slot weird margins (.btn-group)
 - use same invalid feedback (no alerts)
 - editor method refreshDisableState() to avoid calling refreshUI when enabling / disabling editor (to avoid re-appending editors)
-- array button accessibility for screen reader
 - anyOf, oneOf accessibility switcher (radios are better)
 - position and dry of errors (not, patternProperties)
-- items validation message
 - Configurable i18n via options
 - multiple error messages (oneOf, anyOf, not, any, type undefined, etc.)
-- prefixItems test and error messages
 - move switcher options and titles in editors and not in instances
 - template / titles / descriptions as html with xss lib option
 - active item after array add/move/etc. (min and max items) + test