fix: ghost styles while dragging

Author: kevinchappell

src/demo/sass/demo.scss

@@ -176,7 +176,7 @@ body {
   display: inline-block;
   width: 224px;
   height: 150px;
-  mask-image: url("assets/img/formeo-logo.svg");
+  mask-image: url("/assets/img/formeo-logo.svg");
   mask-repeat: no-repeat;
   background-image: linear-gradient(
     -60deg,

src/lib/js/components/data.js

@@ -38,7 +38,11 @@ export default class Data {
     const callbackPath = Array.isArray(path) ? path.join('.') : path
     const callBackGroups = Object.keys(this.setCallbacks).filter(setKey => new RegExp(setKey).test(callbackPath))
     const cbArgs = { newVal, oldVal, path }
-    callBackGroups.forEach(cbGroup => this.setCallbacks[cbGroup].forEach(cb => cb(cbArgs)))
+    for (const cbGroup of callBackGroups) {
+      for (const cb of this.setCallbacks[cbGroup]) {
+        cb(cbArgs)
+      }
+    }
 
     if (!this.disableEvents) {
       const change = this.getChangeType(oldVal, newVal)

src/lib/js/components/rows/row.js

@@ -76,11 +76,9 @@ export default class Row extends Component {
    * @return {Object} edit window dom config for Row
    */
   get editWindow() {
-    const _this = this
-
     const fieldsetInput = {
       tag: 'input',
-      id: _this.id + '-fieldset',
+      id: `${this.id}-fieldset`,
       attrs: {
         type: 'checkbox',
         checked: this.get('config.fieldset'),
@@ -118,11 +116,11 @@ export default class Row extends Component {
       attrs: {
         type: 'text',
         ariaLabel: 'Legend for fieldset',
-        value: _this.get('config.legend'),
+        value: this.get('config.legend'),
         placeholder: 'Legend',
       },
       action: {
-        input: ({ target: { value } }) => _this.set('config.legend', value),
+        input: ({ target: { value } }) => this.set('config.legend', value),
       },
       className: '',
     }
@@ -186,9 +184,9 @@ export default class Row extends Component {
       return
     }
 
-    const width = parseFloat((100 / columns.length).toFixed(1)) / 1
+    const width = Number.parseFloat((100 / columns.length).toFixed(1)) / 1
 
-    columns.forEach(column => {
+    for (const column of columns) {
       column.removeClasses(bsColRegExp)
       const colDom = column.dom
       const newColWidth = numToPercent(width)
@@ -201,7 +199,7 @@ export default class Row extends Component {
         column.refreshFieldPanels()
       }, ANIMATION_SPEED_FAST)
       document.dispatchEvent(events.columnResized)
-    })
+    }
 
     this.updateColumnPreset()
   }
@@ -283,7 +281,6 @@ export default class Row extends Component {
    * @return {Object} columnPresetControlConfig
    */
   get columnPresetControlConfig() {
-    const _this = this
     const layoutPreset = {
       tag: 'select',
       attrs: {
@@ -293,14 +290,7 @@ export default class Row extends Component {
       action: {
         change: ({ target }) => {
           const { value } = target
-
-          // forEach(target.children, option => {
-          //   option.selected = option.value === value
-          // })
-          // if (value !== 'custom') {
-          // removeCustomOption(this.dom)
-          _this.setColumnWidths(value)
-          // }
+          this.setColumnWidths(value)
         },
       },
       options: this.getColumnPresetOptions,

src/lib/js/components/stages/stage.js

@@ -85,7 +85,9 @@ export default class Stage extends Component {
       disabled: false,
       onAdd: this.onAdd.bind(this),
       onRemove: this.onRemove.bind(this),
-      onStart: () => (Stages.active = this),
+      onStart: () => {
+        Stages.active = this
+      },
       onSort: this.onSort.bind(this),
       draggable: `.${ROW_CLASSNAME}`,
       handle: '.item-move',

src/lib/sass/components/_column.scss

@@ -116,6 +116,14 @@
       display: none;
     }
   }
+
+  &.sortable-ghost {
+    background-color: color.$column-highlight-color;
+    box-shadow: 0 0 0 1px color.$column-outline-color;
+    * {
+      opacity: 0;
+    }
+  }
 }
 
 // this is column styleing in the row edit window
@@ -164,6 +172,7 @@
 
 .column-moving {
   background-color: color.$column-highlight-color;
+
   .action-btn-wrap {
     button {
       background-color: color.$column-highlight-color;

src/lib/sass/components/_field.scss

@@ -68,6 +68,14 @@
   &.field-type-hidden {
     border: 1px dashed color.$gray-lighter;
   }
+
+  &.sortable-ghost {
+    background-color: color.$field-highlight-color;
+    box-shadow: 0 0 0 1px color.$field-outline-color;
+    * {
+      opacity: 0;
+    }
+  }
 }
 
 .field-tag {

src/lib/sass/components/_row.scss

@@ -74,10 +74,18 @@
       display: none;
     }
   }
+
+  &.sortable-ghost {
+    background-color: color.$row-highlight-color;
+    box-shadow: 0 0 0 1px color.$row-outline-color;
+    * {
+      opacity: 0;
+    }
+  }
 }
 
 .row-moving {
-  background-color: color.$row-highlight-color;
+  background-color: color.$row-highlight-color !important;
   .action-btn-wrap {
     button {
       background-color: color.$row-highlight-color;

vite.config.js

@@ -70,7 +70,7 @@ const libConfig = {
 const demoConfig = {
   ...sharedConfig,
   root: 'src/demo',
-  base: '',
+  base: '/',
   resolve: {
     alias: {
       'formeo': resolve(__dirname, 'src/lib/js/index.js'),