@policystudio/policy-studio-ui-vue 1.1.73 → 1.1.75

package/dist/css/psui_styles.css

@@ -2518,6 +2518,7 @@ video {
         --border-opacity: 1;
         border-color: #E6ECF2;
         border-color: rgba(230, 236, 242, var(--border-opacity));
+        transition: background-color 0.5s ease;
       }
 
 .psui-el-table-results.layout-flexible tbody tr .title {
@@ -2533,12 +2534,19 @@ video {
             --text-opacity: 1 !important;
             color: #A2ACB7 !important;
             color: rgba(162, 172, 183, var(--text-opacity)) !important;
+            transition: background-color 0.5s ease;
           }
 
 .psui-el-table-results.layout-flexible tbody tr.removed-class td:first-child > div {
                 margin-left: 4px;
               }
 
+.psui-el-table-results.layout-flexible tbody tr.is-disabled td.hover-color {
+              background-color: #E6ECF2 !important;
+              opacity: 0.99;
+              transition: background-color 0.5s ease;
+            }
+
 .psui-el-table-results.layout-flexible tbody tr td {
           --text-opacity: 1;
           color: #34404A;
@@ -2553,6 +2561,12 @@ video {
           padding-left: 20px;
         }
 
+.psui-el-table-results.layout-flexible tbody tr td.hover-color {
+            background-color: #ECF7FB !important;
+            opacity: 0.99;
+            transition: background-color 0.5s ease;
+          }
+
 .psui-el-table-results.layout-flexible tbody tr td > div {
             display: flex;
             align-items: center;
@@ -2644,6 +2658,7 @@ video {
               --text-opacity: 1;
               color: #A2ACB7;
               color: rgba(162, 172, 183, var(--text-opacity));
+              transition: background-color 0.5s ease;
             }
 
 .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class td .title {
@@ -2757,6 +2772,7 @@ video {
               --text-opacity: 1 !important;
               color: #A2ACB7 !important;
               color: rgba(162, 172, 183, var(--text-opacity)) !important;
+              transition: background-color 0.5s ease;
             }
 
 .psui-el-table-results.layout-flexible tbody tr.is-last.removed-class td:first-child {
@@ -2797,6 +2813,7 @@ video {
             --bg-opacity: 1;
             background-color: #F3F6F9;
             background-color: rgba(243, 246, 249, var(--bg-opacity));
+            transition: background-color 0.5s ease;
           }
 
 .psui-el-checkbox {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.73",
+  "version": "1.1.75",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/components/PsTableResults.scss

@@ -464,6 +464,7 @@
       tbody {
         tr {
           @apply psui-border-gray-20;
+          transition: background-color 0.5s ease;
   
           .title {
             @apply psui-flex psui-items-center;
@@ -473,6 +474,8 @@
           &.removed-class {
             td {
               @apply psui-bg-gray-10 psui-text-gray-40 !important;
+              transition: background-color 0.5s ease;
+
               &:first-child {
                 > div {
                   margin-left: 4px;
@@ -481,6 +484,16 @@
             }
           
           }
+
+          &.is-disabled {
+            td {
+              &.hover-color {
+                background-color: #E6ECF2 !important;
+                opacity: 0.99;
+                transition: background-color 0.5s ease;
+              }
+            }
+          }
   
           td {
             @apply psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
@@ -488,7 +501,14 @@
             padding-bottom: 0.688rem;
             min-height: 41.5px;
             padding-left: 20px;
-  
+            
+
+            &.hover-color {
+              background-color: #ECF7FB !important;
+              opacity: 0.99;
+              transition: background-color 0.5s ease;
+            }
+
             > div {
               @apply psui-flex psui-items-center;
             }
@@ -556,6 +576,7 @@
             &.removed-class {
               td {
                 @apply psui-bg-gray-10 psui-text-gray-40;
+                transition: background-color 0.5s ease;
 
                 .title {
                   margin-left: 6px;
@@ -669,8 +690,8 @@
             &.removed-class {
               td {
                 @apply psui-bg-gray-10 psui-text-gray-40 !important;
+                transition: background-color 0.5s ease;
                 
-  
                 &:first-child {
                   @apply psui-sticky;
 
@@ -704,6 +725,7 @@
 
             td:first-child {
               @apply psui-bg-gray-10;
+              transition: background-color 0.5s ease;
             }
           }
         }

package/src/components/table-results/PsTableResults.vue

@@ -33,11 +33,11 @@
           ]"
           :id=" item.id"
           :data-group="item.id"
-          @mouseenter="onRowHover(index)"
-          @mouseleave="onRowHover(false)"
+          @mouseenter="onRowHover(index,item,'enter')"
+          @mouseleave="onRowHover(false,item,'leave')"
         >
           <td 
-            :style="isHoveringRow == index && layout == 'flexible' ? `background-color: ${getHoveringRowColor(item)};` : item.background_color ? `background-color: ${getBackgroundColor(item.background_color)};` : ''"
+            :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)}; transition: background-color 0.5s ease;` : ''"
           >
 
             <div class="psui-flex psui-relative">
@@ -57,7 +57,7 @@
                   />
               </div> 
               <div
-                class="psui-flex psui-items-center actions psui-space-x-3"
+                class="psui-flex psui-items-center psui-space-x-3"
                 :style="{paddingLeft: `${item.deep * 16}px`}"
               >
                 <PsIcon
@@ -136,7 +136,7 @@
                   layout="gray"
                   class="psui-inline-flex psui-cursor-default"
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
-                  :ignoreDialog="!shouldShowIcon(item)"
+                  :ignoreDialog="getIgnoreDialogIcon(item)"
                 >
                   <template v-slot:trigger>
                     <PsIcon
@@ -190,7 +190,7 @@
 
           <template v-for="(columnGroup, indexColumn) of columnGroups">
             <td
-              :style="isHoveringRow == index && layout == 'flexible'  ? `background-color: ${getHoveringRowColor(item)};` : item.background_color ? `background-color: ${getBackgroundColor(item.background_color)};` : ''"
+              :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)}; transition: background-color 0.5s ease;` : ''"
               v-for="column of columnGroup.columns"
               class="psui-transition"
               :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
@@ -575,9 +575,25 @@ export default {
       this.$forceUpdate()
       this.$emit('collapse-row', this.collapsedRows)
     }, 
-    onRowHover(index) {
+    onRowHover(index, item, type) {
+      const parent = document.getElementById(`${item.id}`) 
+      const children = parent.children
+
+      if (type == 'enter' && item.index != 0 && item.deep != 0 && this.layout == 'flexible') {
+        for (let i = 0; i < children.length; i++) {
+          children[i].classList.add('hover-color')
+        }
+      } else {
+        parent.querySelectorAll('.hover-color').forEach(child => {
+          child.classList.remove('hover-color')
+        })
+      }
+
       this.isHoveringRow = index
     },
+    getIgnoreDialogIcon(item){
+      return !this.shouldShowIcon(item) || item.actions[0].ignoreDialog
+    },
     shouldShowIcon(item) {
       if(item?.actions?.length === 1) return true
       else return false