@eturnity/eturnity_reusable_components 7.24.3-EPDM-10926.0 → 7.24.3-EPDM-7509.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.3-EPDM-10926.0",
+  "version": "7.24.3-EPDM-7509.4",
   "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/adjust_roof.svg

@@ -1,6 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 13L27 16.8175L26.0477 18.4379L20 15.1397L13.9523 18.4379L13 16.8175L20 13Z" fill="#263238"/>
-<path d="M17.1006 19.1906L20.0001 17.6078L22.8996 19.1906" stroke="#263238" stroke-width="2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 21.5621L22.6508 23.0078L21.6985 24.6282L20 23.7019L18.3015 24.6282L17.3492 23.0078L20 21.5621ZM16.1269 25.8141L13.9523 27L13 25.3797L15.1746 24.1937L16.1269 25.8141ZM26.0477 27L23.8731 25.8141L24.8254 24.1937L27 25.3797L26.0477 27Z" fill="#263238"/>
-<path d="M20.9662 22.9146H19.0332L19.0332 18.2928H20.9662L20.9662 22.9146Z" fill="#263238"/>
-</svg>