@everchron/ec-shards 5.0.78 → 5.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "5.0.78",
+  "version": "5.0.80",
   "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

@@ -202,30 +202,32 @@
         }
 
         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 })
-
-        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')
-          //  cell.parentElement.__vue__.setWidth(currentColumnWidth)
-          cell.style.width = `${ currentColumnWidth }px`
-        })
-
-        // To support resizing other column heads of the same type, to allow more than just the first column from being resizeable
-        let columnHeads = document.querySelectorAll('[data-headname="' + this.uniformName.toLowerCase() + '"]')
-        console.log('columnHeads:to:resize', columnHeads, '[data-headname="' + this.uniformName.toLowerCase() + '"]', '(should be 1 if theres 2 and 1 is being resized by the User, only the other should be picked up)')
-        columnHeads.forEach(cell => {
-          cell.style.width = `${ currentColumnWidth }px`
+        setTimeout(() => { 
+          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 })
+
+          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')
+            //  cell.parentElement.__vue__.setWidth(currentColumnWidth)
+            cell.style.width = `${ currentColumnWidth }px`
+          })
+
+          // To support resizing other column heads of the same type, to allow more than just the first column from being resizeable
+          let columnHeads = document.querySelectorAll('[data-headname="' + this.uniformName.toLowerCase() + '"]')
+          console.log('columnHeads:to:resize', columnHeads, '[data-headname="' + this.uniformName.toLowerCase() + '"]', this.beingResizedName)
+          columnHeads.forEach(cell => {
+            cell.style.width = `${ currentColumnWidth }px`
+          })
+
+          if (this.fixedLeft)
+            this.setCellsFixedLeftOffset()
+
+          this.beingResized = false
         })
-
-        if (this.fixedLeft)
-          this.setCellsFixedLeftOffset()
-
-        setTimeout(() => { this.beingResized = false })
       },
 
       setCellsFixedLeftOffset(){