@policystudio/policy-studio-ui-vue 1.1.64 → 1.1.66

package/dist/css/psui_styles.css

@@ -2374,7 +2374,6 @@ video {
 .psui-el-table-results.layout-flexible thead {
       background-color: #ffffff ;
       align-items: flex-start;
-      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
       position: sticky;
       top: 0;
       z-index: 15;
@@ -2399,7 +2398,7 @@ video {
         }
 
 .psui-el-table-results.layout-flexible thead tr th {
-          padding-left: 1.5rem;
+          padding-left: 1rem;
           --text-opacity: 1;
           color: #798490;
           color: rgba(121, 132, 144, var(--text-opacity));
@@ -2419,7 +2418,7 @@ video {
 
 .psui-el-table-results.layout-flexible thead tr th:first-child {
             padding-left: 1rem;
-            padding-right: 2rem;
+            padding-right: 1rem;
             text-align: left;
             background-color: #ffffff ;
             position: sticky;
@@ -2431,11 +2430,22 @@ video {
               align-items: flex-start;
             }
 
+.psui-el-table-results.layout-flexible thead tr th:first-child.pseudo-line::after {
+                content: '';
+                position: absolute;
+                top: 10px;
+                right: 0;
+                width: 1px;
+                height: calc(100%);
+                background-color: #D6DDE5;
+              }
+
 .psui-el-table-results.layout-flexible thead tr:first-of-type th {
             text-align: left;
             padding-top: 0;
             padding-bottom: 0;
-            min-width: 596px;
+            min-width: 497px;
+            position: sticky;
           }
 
 .psui-el-table-results.layout-flexible thead tr:first-of-type th > div {
@@ -2469,7 +2479,22 @@ video {
 
 .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:first-child {
               text-align: left;
-              min-width: 388px;
+              min-width: 357px;
+            }
+
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(2) {
+              position: sticky;
+              z-index: 10;
+              background-color: #ffffff ;
+              left:357px;
+              min-width: 140px;
+            }
+
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th:nth-child(3) {
+              position: sticky;
+              z-index: 10;
+              background-color: #ffffff ;
+              left: 497px;
             }
 
 .psui-el-table-results.layout-flexible tbody tr {
@@ -2555,6 +2580,22 @@ video {
             left: 0;
             padding-top: 8px;
             padding-bottom: 8px;
+            min-width: 357px;
+          }
+
+.psui-el-table-results.layout-flexible tbody tr td:nth-child(2) {
+            position: sticky;
+            z-index: 10;
+            min-width: 140px;
+            left: 357px;
+          }
+
+.psui-el-table-results.layout-flexible tbody tr td:nth-child(3) {
+            position: sticky;
+            z-index: 10;
+            min-width: 140px;
+            left: 497px;
+            padding-right: 22px;
           }
 
 .psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog {
@@ -2634,6 +2675,38 @@ video {
                   height: 10px;
                 }
 
+.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child {
+                  position: sticky;
+                }
+
+.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:before,
+                    .psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                  }
+
+.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:before {
+                    background-color: #ffffff ;
+                    left: 0;
+                    width: 16px;
+                    height: calc(100% + 1px);
+                  }
+
+.psui-el-table-results.layout-flexible tbody tr.is-first.removed-class.closed td:first-child:after {
+                    --bg-opacity: 1;
+                    background-color: #F3F6F9;
+                    background-color: rgba(243, 246, 249, var(--bg-opacity));
+                    border-top-left-radius: 9999px;
+                    border-bottom-left-radius: 9999px;
+                    box-shadow: -8px 0px 0px 4px #ffffff;
+                    z-index: 30;
+                    top: 0;
+                    left: 16px;
+                    width: 10px;
+                    height: calc(100%);
+                  }
+
 .psui-el-table-results.layout-flexible tbody tr:not(.is-first):not(.removed-class) td:first-child {
               position: sticky;
             }

package/package.json

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

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

@@ -348,7 +348,7 @@
       }
   
       thead {
-        @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
+        @apply psui-bg-white psui-items-start psui-sticky psui-top-0 psui-z-15;
   
         &:after {
           content: '';
@@ -362,7 +362,7 @@
           }
   
           th {
-            @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
+            @apply psui-pl-4 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
             padding-top: 0.438rem;
             padding-bottom: 0.625rem;
 
@@ -372,12 +372,26 @@
             }
 
             &:first-child {
-              @apply psui-pl-4 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
+              @apply psui-pl-4 psui-pr-4 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
+              
 
               > div {
                 @apply psui-items-start;
               }
+
+              &.pseudo-line {
+                &::after {
+                  content: '';
+                  position: absolute;
+                  top: 10px;
+                  right: 0;
+                  width: 1px;
+                  height: calc(100%);
+                  background-color: #D6DDE5;
+                }
+              }
             }
+
           }
 
           &:first-of-type {
@@ -385,15 +399,14 @@
               @apply psui-text-left;
               padding-top: 0;
               padding-bottom: 0;
-              min-width: 596px;
+              min-width: 497px;
+              position: sticky;
   
               > div {
                 @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
                 padding-top: 0.5rem;
                 padding-bottom: 0.625rem;
               }
-
-              
             }
   
             p {
@@ -414,7 +427,18 @@
 
               &:first-child {
                 @apply psui-text-left;
-                min-width: 388px;
+                min-width: 357px;
+              }
+
+              &:nth-child(2) {
+                @apply psui-sticky psui-z-10 psui-bg-white;
+                left:357px;
+                min-width: 140px;
+              }
+  
+              &:nth-child(3) {
+                @apply psui-sticky psui-z-10 psui-bg-white;
+                left: 497px;
               }
             }
           }
@@ -479,6 +503,20 @@
               @apply psui-pl-2 psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
               padding-top: 8px;
               padding-bottom: 8px;
+              min-width: 357px;
+            }
+
+            &:nth-child(2) {
+              @apply psui-sticky psui-z-10;
+              min-width: 140px;
+              left: 357px;
+            }
+
+            &:nth-child(3) {
+              @apply psui-sticky psui-z-10;
+              min-width: 140px;
+              left: 497px;
+              padding-right: 22px;
             }
 
             .psui-el-tooltip-dialog {
@@ -540,8 +578,37 @@
                     height: 10px;
                   }
                 }
-  
-              }         
+              }
+              
+              &.closed {
+                 td {
+                  &:first-child {
+                    @apply psui-sticky;
+      
+                    &:before,
+                    &:after {
+                      content: '';
+                      @apply psui-absolute psui-top-0;
+                    }
+      
+                    &:before {
+                      @apply psui-bg-white psui-left-0;
+                      width: 16px;
+                      height: calc(100% + 1px);
+                    }
+      
+                    &:after {
+                      @apply psui-bg-gray-10 psui-rounded-tl-full psui-rounded-bl-full;
+                      box-shadow: -8px 0px 0px 4px #ffffff;
+                      z-index: 30;
+                      top: 0;
+                      left: 16px;
+                      width: 10px;
+                      height: calc(100%);
+                    }
+                  }
+                 }
+              }
             }
 
           }

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

@@ -655,9 +655,38 @@ export default {
       const max = Math.max(...this.getRows.map(item => item.data[key]))
       return (value * 100) / max
     },
+    setVerticalStyleWhenScroolingForFlexibleLayout(tableWrapper){
+      if(tableWrapper.scrollTop > 0 && tableWrapper.classList.contains('table-flexible')) {     
+        tableWrapper.getElementsByTagName('thead')[0].style.boxShadow = '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)'
+      } else if(tableWrapper.classList.contains('table-flexible')) {
+        tableWrapper.getElementsByTagName('thead')[0].style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
+      }
+    },
+    setHorizontalStyleWhenScrollingForFlexibleLayout(tableWrapper){
+      const firstHeaderElement = tableWrapper.querySelector('thead > tr:first-child > th:first-child')
+      const secondHeaderElment = tableWrapper.querySelector('thead > tr:not(:first-of-type) > th:nth-child(3)')
+      const getAllOtherBodyElements = tableWrapper.querySelectorAll( 'tbody > tr > td:nth-child(3)')
 
+      if (tableWrapper.scrollLeft > 0 && tableWrapper.classList.contains('table-flexible')) {
+        firstHeaderElement.classList.add('pseudo-line')
+        secondHeaderElment.style.boxShadow = 'inset -1px 0px 0px #D6DDE5'
+        getAllOtherBodyElements.forEach(element => {
+          element.style.boxShadow = 'inset -1px 0px 0px #D6DDE5'
+        })
+      } else if(tableWrapper.classList.contains('table-flexible')) {
+        firstHeaderElement.classList.remove('pseudo-line')
+        secondHeaderElment.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
+        getAllOtherBodyElements.forEach(element => {
+          element.style.boxShadow = '0 0 0 rgba(0, 0, 0, 0)'
+        })
+      }
+    },
     handleTableScroll() {
       const tableWrapper = this.$refs.tableWrapper
+
+      this.setVerticalStyleWhenScroolingForFlexibleLayout(tableWrapper)
+      this.setHorizontalStyleWhenScrollingForFlexibleLayout(tableWrapper)
+
       if (tableWrapper.scrollLeft > 0) {
         this.isSticky = true
       } else {