Merge branch 'master' into feat/json-schema

Author: kevinchappell

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [2.3.1](https://github.com/Draggable/formeo/compare/v2.3.0...v2.3.1) (2024-11-19)
+
+
+### Bug Fixes
+
+* button options ([3075f1c](https://github.com/Draggable/formeo/commit/3075f1c330034b10d62ba4322ae23a82e68e4b13))
+* tab group animations ([399b74a](https://github.com/Draggable/formeo/commit/399b74a0ead36d559c0de36908cdad49f6abc577))
+
 # [2.3.0](https://github.com/Draggable/formeo/compare/v2.2.2...v2.3.0) (2024-11-15)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "formeo",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "type": "module",
   "main": "dist/formeo.cjs.js",
   "module": "dist/formeo.es.js",

package.json

@@ -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/fields/edit-panel.js

@@ -142,11 +142,8 @@ 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.setTranslateX(index, false)
+          this.nav.groupChange(index)
         },
       },
       content: panel.config.label,
@@ -227,19 +224,21 @@ export default class Panels {
     const action = {}
     const groupParent = this.currentPanel.parentElement
     const labelWrap = this.labels.firstChild
+    const panelTabs = labelWrap.children
     const siblingGroups = this.currentPanel.parentElement.childNodes
     this.activePanelIndex = indexOfNode(this.currentPanel, groupParent)
     let offset = { nav: 0, panel: 0 }
     let lastOffset = { ...offset }
 
     action.groupChange = newIndex => {
-      const labels = labelWrap.children
-      dom.removeClasses(siblingGroups, 'active-panel')
-      dom.removeClasses(labels, 'active-tab')
+      this.activePanelIndex = newIndex
       this.currentPanel = siblingGroups[newIndex]
-      this.currentPanel.classList.add('active-panel')
 
-      labels[newIndex].classList.add('active-tab')
+      dom.removeClasses(siblingGroups, 'active-panel')
+      dom.removeClasses(panelTabs, 'active-tab')
+
+      this.currentPanel.classList.add('active-panel')
+      panelTabs[newIndex].classList.add('active-tab')
 
       return this.currentPanel
     }
@@ -278,6 +277,7 @@ export default class Panels {
           lastOffset = offset
         }
       }
+
       panelTransition.addEventListener('finish', handleFinish)
     }
 
@@ -288,10 +288,9 @@ export default class Panels {
 
     action.refresh = (newIndex = this.activePanelIndex) => {
       if (this.activePanelIndex !== newIndex) {
-        this.activePanelIndex = newIndex
         action.groupChange(newIndex)
       }
-      action.setTranslateX(this.activePanelIndex)
+      action.setTranslateX(this.activePanelIndex, false)
       this.resizePanels()
     }
 
@@ -302,13 +301,13 @@ export default class Panels {
     action.nextGroup = () => {
       const newIndex = this.activePanelIndex + 1
       if (newIndex !== siblingGroups.length) {
-        const curPanel = action.groupChange(newIndex)
+        const nextPanel = siblingGroups[newIndex]
         offset = {
           nav: -labelWrap.offsetWidth * newIndex,
-          panel: -curPanel.offsetLeft,
+          panel: -nextPanel.offsetLeft,
         }
         translateX({ offset })
-        this.activePanelIndex++
+        action.groupChange(newIndex)
       } else {
         offset = {
           nav: lastOffset.nav - 8,
@@ -323,13 +322,13 @@ export default class Panels {
     action.prevGroup = () => {
       if (this.activePanelIndex !== 0) {
         const newIndex = this.activePanelIndex - 1
-        const curPanel = action.groupChange(newIndex)
+        const prevPanel = siblingGroups[newIndex]
         offset = {
           nav: -labelWrap.offsetWidth * newIndex,
-          panel: -curPanel.offsetLeft,
+          panel: -prevPanel.offsetLeft,
         }
         translateX({ offset })
-        this.activePanelIndex--
+        action.groupChange(newIndex)
       } else {
         offset = {
           nav: 8,