fix: button options

src/lib/js/components/columns/column.js

@@ -108,7 +108,9 @@ export default class Column extends Component {
 
   // loops through children and refresh their edit panels
   refreshFieldPanels = () => {
-    this.children.forEach(field => field.panels.nav.refresh())
+    for (const field of this.children) {
+      field.panels.nav.refresh()
+    }
   }
 
   /**

src/lib/js/components/fields/edit-panel.js

@@ -161,18 +161,23 @@ export default class EditPanel {
     const metaId = this.field.data.meta.id
     const fieldOptionData = this.field.get('options')
     const type = metaId === 'select' ? 'option' : metaId
-    const newOptionLabel = i18n.get(`newOptionLabel`, { type }) || 'New Option'
+    const newOptionLabel = i18n.get('newOptionLabel', { type }) || 'New Option'
     const itemKey = `options.${this.data.length}`
-
-    const optionTemplate = fieldOptionData.length ? cleanObj(fieldOptionData[fieldOptionData.length - 1]) : {}
-    const itemData = { ...optionTemplate, label: newOptionLabel, value: slugify(newOptionLabel) }
+
+    const lastOptionData = fieldOptionData[fieldOptionData.length - 1]
+    const optionTemplate = fieldOptionData.length ? lastOptionData : {}
+    const itemData = { ...optionTemplate, label: newOptionLabel }
+    if (metaId !== 'button') {
+      itemData.value = slugify(newOptionLabel)
+    }
     const newOption = new EditPanelItem({
       key: itemKey,
       data: itemData,
       field: this.field,
       index: this.props.children.length,
     })
-
+
+    // debugger
     this.editPanelItems.push(newOption)
     this.props.appendChild(newOption.dom)
     this.field.set(itemKey, itemData)

src/lib/js/components/panels.js

@@ -142,11 +142,12 @@ export default class Panels {
       action: {
         click: evt => {
           const index = indexOfNode(evt.target, evt.target.parentElement)
-          this.currentPanel = this.panels[index]
-          const labels = evt.target.parentElement.childNodes
-          this.nav.refresh(index)
-          dom.removeClasses(labels, 'active-tab')
-          evt.target.classList.add('active-tab')
+          this.nav.groupChange(index)
+          // this.currentPanel = this.panels[index]
+          // const labels = this.labels.querySelectorAll('h5')
+          // this.nav.refresh(index)
+          // dom.removeClasses(labels, 'active-tab')
+          // evt.target.classList.add('active-tab')
         },
       },
       content: panel.config.label,
@@ -233,14 +234,15 @@ export default class Panels {
     let lastOffset = { ...offset }
 
     action.groupChange = newIndex => {
+      this.activePanelIndex = newIndex
       const labels = labelWrap.children
       dom.removeClasses(siblingGroups, 'active-panel')
       dom.removeClasses(labels, 'active-tab')
       this.currentPanel = siblingGroups[newIndex]
       this.currentPanel.classList.add('active-panel')
-
       labels[newIndex].classList.add('active-tab')
-
+
+      action.setTranslateX(newIndex)
       return this.currentPanel
     }
 
@@ -255,6 +257,8 @@ export default class Panels {
       const panelQueue = [getTransition(lastOffset.panel), getTransition(offset.panel)]
       const navQueue = [getTransition(lastOffset.nav), getTransition(this.isTabbed ? 0 : offset.nav)]
 
+      debugger
+
       if (reset) {
         const [panelStart] = panelQueue
         const [navStart] = navQueue
@@ -278,6 +282,7 @@ export default class Panels {
           lastOffset = offset
         }
       }
+
       panelTransition.addEventListener('finish', handleFinish)
     }
 
@@ -291,6 +296,7 @@ export default class Panels {
         this.activePanelIndex = newIndex
         action.groupChange(newIndex)
       }
+      // debugger
       action.setTranslateX(this.activePanelIndex)
       this.resizePanels()
     }