@eturnity/eturnity_reusable_components 7.24.3-EPDM-11143.1 → 7.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.3-EPDM-11143.1",
+  "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
 

package/src/assets/svgIcons/copy.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="copy" fill="none" transform="translate(85.333333, 42.666667)">
-            <path d="M341.333333,85.3333333 L341.333333,405.333333 L85.3333333,405.333333 L85.3333333,85.3333333 L341.333333,85.3333333 Z M298.666667,128 L128,128 L128,362.666667 L298.666667,362.666667 L298.666667,128 Z M234.666667,7.10542736e-15 L234.666667,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 L1.42108547e-14,298.666667 L1.42108547e-14,7.10542736e-15 L234.666667,7.10542736e-15 Z">
-            </path>
-        </g>
-    </g>
-</svg>