@policystudio/policy-studio-ui-vue 1.0.85 → 1.0.88

package/dist/css/psui_styles.css

@@ -18538,12 +18538,16 @@ html {
 .psui-el-table-results {
   position: relative;
   vertical-align: top;
-  width: 100%;
+  width: auto;
   max-width: 100%;
   font-size: 16px;
   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.25rem;
         --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.85",
+  "version": "1.0.88",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

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

@@ -4,18 +4,32 @@
   }
 
   .psui-el-table-results {
-    @apply psui-relative psui-align-top psui-w-full psui-max-w-full psui-text-p;
+    @apply psui-relative psui-align-top psui-w-auto 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-5 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

@@ -3,6 +3,7 @@
     class="psui-el-table-results-wrapper"
     :style="{ maxHeight: tableMaxHeight }"
   >
+    <!-- <pre>{{ collapsedRows }}</pre> -->
     <table 
       ref="table"
       class="psui-el-table-results"
@@ -172,7 +173,7 @@ export default {
       type: Function
     },
     /**
-    * It sets the format function to display values.
+    * It sets the disabled texts conditionals.
     */
     disabledText: {
       type: String
@@ -220,10 +221,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 +277,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)
           }
         })

package/src/components/tooltip/PsTooltip.vue

@@ -19,7 +19,7 @@
           :class="getComponentClass"
         >
           <h2 v-if="title">{{ title}}</h2>
-          <div class="psui-el-tooltip-content-wrapper">
+          <div v-else class="psui-el-tooltip-content-wrapper">
             <slot name="content"></slot>
           </div>
         </div>