@eturnity/eturnity_reusable_components 7.24.3 → 7.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.3",
+  "version": "7.30.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/tables/mainTable/index.vue

@@ -18,6 +18,8 @@
           v-else
           :cellPaddings="cellPaddings"
           :tableCursor="tableCursor"
+          @mouseover="hasAimHover ? setHovers($event) : null"
+          @mouseleave="hasAimHover ? removeHoverClass : null"
         >
           <slot />
         </table-container>
@@ -122,7 +124,7 @@ const TableContainer = styled('table', containerAttrs)`
 
   tbody {
     tr {
-      &:hover {
+      &:hover, td.hovered-column {
         background-color: ${(props) => props.theme.colors.white};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
@@ -406,6 +408,10 @@ export default {
       required: false,
       default: null
     },
+    hasAimHover: {
+      required: false,
+      default: false
+    },
     tableCursor: {
       required: false
     }
@@ -425,6 +431,46 @@ export default {
     }
   },
   methods: {
+    findParentElementByTagName(element, tagName) {
+      let currentParentElement = element.parentElement
+      while (currentParentElement && currentParentElement.tagName !== tagName) {
+        currentParentElement = currentParentElement.parentElement
+      }
+
+      return currentParentElement && currentParentElement.tagName === tagName ? currentParentElement : null
+    },
+    removeHoverClass() {
+      const hoveredItems = document.querySelectorAll('.hovered-column')
+      hoveredItems.forEach((el) => {
+        el.classList.remove('hovered-column')
+      })
+    },
+    setHovers(event) {
+      this.removeHoverClass()
+      if (event.target.tagName !== 'TABLE' && event.target.tagName !== 'TH' && event.target.tagName !== 'TR') {
+        let hoveredCell = event.target
+
+        if (hoveredCell.tagName !== 'TD') {
+          // Looking for hovered TD element
+          hoveredCell = this.findParentElementByTagName(hoveredCell, 'TD')
+        }
+
+        if (hoveredCell) {
+          const rowChildren = Array.from(hoveredCell.parentElement.children)
+          const hoveredCellIndex = rowChildren.indexOf(hoveredCell)
+          const currentTable = this.findParentElementByTagName(hoveredCell, 'TABLE')
+          if (currentTable) {
+            const rowList = Array.from(currentTable.querySelectorAll('tr'))
+            rowList.forEach((el) => {
+              const cells = Array.from(el.children)
+              if (cells[hoveredCellIndex]) {
+                cells[hoveredCellIndex].classList.add('hovered-column')
+              }
+            })
+          }
+        }
+      }
+    },
     observeTableHeight() {
       if (!this.$refs.tableRef) return