@everchron/ec-shards 5.0.69 → 5.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "5.0.69",
+  "version": "5.0.71",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/data-grid/data-grid-head-cell.vue

@@ -119,6 +119,7 @@
         newSort: this.sorting,
         resizeWidth: null,
         initialized: false,
+        beingResized : false,
         cellFixedLeftOffset: ''
       }
     },
@@ -174,6 +175,10 @@
       resizeStyles(){
         if(this.resizable)
           return { resize: 'horizontal', overflow: 'hidden' }
+      },
+
+      beingResizedName(){
+        return this.beingResized ? this.uniformName + '-noresize' : this.this.uniformName
       }
     },
 
@@ -196,14 +201,13 @@
           return
         }
 
+        this.beingResized = true
         const resizedEl = document.querySelector('[data-column="'+ this.computedId +'"]')
         const currentColumnWidth = resizedEl.offsetWidth
 
         /** Emitted when the column has been resized. Returns the new width of the column in pixels. */
         this.$emit('resizedWidth', { id: this.id, currentColumnWidth })
 
-        console.log('columnCells', '[data-column="' + this.name.toLowerCase().replace(' ', '-') + '-column-cell"]')
-
         let columnCells = document.querySelectorAll('[data-column="' + this.name.toLowerCase().replace(' ', '-') + '-column-cell"]')
         columnCells.forEach(cell => {
           // if (cell.parentElement && cell.parentElement.__vue__ && typeof cell.parentElement.__vue__.setWidth === 'function')
@@ -211,17 +215,18 @@
           cell.style.width = `${ currentColumnWidth }px`
         })
 
-        console.log('headName', this.uniformName.toLowerCase() + '-column-head')
-        let columnHeads = document.querySelectorAll('[data-headname="' + this.uniformName.toLowerCase() + '-column-head"]')
+        // To support resizing other column heads of the same type, to allow more than just the first column from being resizeable
+        console.log('beingResizedName', '[data-headname="' + this.beingResizedName.toLowerCase() + '"]')
+        let columnHeads = document.querySelectorAll('[data-headname="' + this.beingResizedName.toLowerCase() + '"]')
         console.log('columnHeads', columnHeads)
         columnHeads.forEach(cell => {
-          // if (cell.parentElement && cell.parentElement.__vue__ && typeof cell.parentElement.__vue__.setWidth === 'function')
-          //  cell.parentElement.__vue__.setWidth(currentColumnWidth)
           cell.style.width = `${ currentColumnWidth }px`
         })
 
         if (this.fixedLeft)
           this.setCellsFixedLeftOffset()
+
+        this.beingResized = false
       },
 
       setCellsFixedLeftOffset(){