@policystudio/policy-studio-ui-vue 1.0.86 → 1.0.89

package/dist/css/psui_styles.css

@@ -18544,6 +18544,10 @@ html {
   line-height: 130%;
 }
 
+.psui-el-table-results tr th:last-child, .psui-el-table-results tr td:last-child {
+        padding-right: 0.5rem;
+      }
+
 .psui-el-table-results thead {
     background-color: #ffffff ;
     align-items: flex-start;
@@ -18553,6 +18557,17 @@ html {
     z-index: 15;
   }
 
+.psui-el-table-results thead:after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      width: 0.5rem;
+      height: 100%;
+      background-color: #ffffff ;
+      right: -8px;
+    }
+
 .psui-el-table-results thead tr .title {
         font-size: 14px;
         line-height: 130%;
@@ -18564,7 +18579,7 @@ html {
       }
 
 .psui-el-table-results thead tr th {
-        padding-left: 2rem;
+        padding-left: 1.5rem;
         --text-opacity: 1;
         color: #798490;
         color: rgba(121, 132, 144, var(--text-opacity));

package/package.json

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

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

@@ -6,16 +6,30 @@
   .psui-el-table-results {
     @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-p;
 
+    tr {
+      th, td {
+        &:last-child {
+          @apply psui-pr-2;
+        }
+      }
+    }
+
     thead {
       @apply psui-bg-white psui-items-start psui-shadow-elevation-10 psui-sticky psui-top-0 psui-z-15;
 
+      &:after {
+        content: '';
+        @apply psui-inline-block psui-absolute psui-top-0 psui-w-2 psui-h-full psui-bg-white;
+        right: -8px;
+      }
+
       tr {
         .title {
           @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
         }
 
         th {
-          @apply psui-pl-8 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
+          @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
           padding-top: 13px;
           padding-bottom: 13px;
 

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

@@ -172,7 +172,7 @@ export default {
       type: Function
     },
     /**
-    * It sets the format function to display values.
+    * It sets the disabled texts conditionals.
     */
     disabledText: {
       type: String
@@ -220,10 +220,20 @@ export default {
         return []
       }
     },
+    /**
+    * It sets if rows is collapsible.
+    */
     isCollapsible: {
       type: Boolean,
       default: true
     },
+    /**
+    * It sets the level to show opened rows.
+    */
+    customLevelOpened: {
+      type: Number,
+      default: 1
+    },
   },
   data: () => ({
     collapsedRows : []
@@ -266,7 +276,7 @@ export default {
       const newRowsCollpased = []
       if ( this.showRowsCollapsed ) {
         this.getRows.forEach(element => {
-          if ( element?.items?.length ) {
+          if ( element?.items?.length && ( this.customLevelOpened == null || element.index.split('-').length > this.customLevelOpened)) {
             newRowsCollpased.push(element.index)
           }
         })