@eturnity/eturnity_reusable_components 1.2.86-EPDM-7435 → 1.2.86-EPDM-7509

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.86-EPDM-7435",
+  "version": "1.2.86-EPDM-7509",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/select/index.vue

@@ -193,7 +193,7 @@ const selectButton = styled('div', selectButtonAttrs)`
   box-sizing: border-box;
   border-radius: 4px;
   padding: ${(props) =>
-    props.isSearchBarVisible ? '0' : '0px 0px 0 15px'};
+    props.isSearchBarVisible ? '0 10px 0 0' : '0px 10px 0 15px'};
   text-align: left;
   border-radius: 4px;
   min-height: 36px;
@@ -230,6 +230,7 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
     z-index:${(props) => (props.isActive ? '2' : '1')};
     position:absolute;
     top:5px;
+    padding:10px;
     border:1px solid ${(props) => props.theme.colors.grey4}
     border-radius:4px;
     display: flex;

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

@@ -12,6 +12,7 @@
           v-else
           :cellPaddings="cellPaddings"
           :tableCursor="tableCursor"
+          @mouseover="setHovers($event)"
         >
           <slot />
         </table-container>
@@ -87,8 +88,8 @@ const TableContainer = styled('table', containerAttrs)`
   }
 
   tbody {
-    tr {
-      &:hover {
+    tr, td {
+      &:hover, &.hover {
         background-color: ${(props) => props.theme.colors.white};
         cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
 
@@ -378,6 +379,30 @@ export default {
     tableCursor: {
       required: false
     }
+  },
+  methods: {
+    setHovers(event) {
+      let parentTd
+
+      if (event.target.tagName === 'TD') {
+        parentTd = event.target
+      } else {
+        let currentElement = event.target.parentElement
+        while (currentElement.tagName !== 'TR') {
+          if (currentElement.tagName === 'TD') parentTd = currentElement
+          currentElement = currentElement.parentElement
+        }
+      }
+
+      if (parentTd) {
+        const trChildren = Array.from(parentTd.parentElement.children)
+        const trList = Array.from(document.querySelectorAll('tr'))
+        trList.forEach((el) => {
+          const cells = Array.from(el.children)
+          cells[trChildren.indexOf(parentTd)].classList.add('hover')
+        })
+      }
+    }
   }
 }
 </script>