@policystudio/policy-studio-ui-vue 1.1.90-beta.62 → 1.1.90-beta.63

package/dist/css/psui_styles_output.css

@@ -2728,9 +2728,6 @@ video {
   font-size: 14px;
   line-height: 130%;
 }
-.psui-el-table-results.layout-flexible thead tr .title {
-  font-weight: 700;
-}
 .psui-el-table-results.layout-flexible thead tr .title {
   line-height: 1rem;
 }
@@ -2747,10 +2744,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(121 132 144/var(--tw-text-opacity));
 }
-.psui-el-table-results.layout-flexible thead tr th {
-  padding-top: 0.438rem;
-  padding-bottom: 0.625rem;
-}
 .psui-el-table-results.layout-flexible thead tr th .description {
   font-size: 12px;
   line-height: 130%;
@@ -2820,7 +2813,7 @@ video {
 }
 .psui-el-table-results.layout-flexible thead tr:first-of-type th > div {
   padding-top: 0.5rem;
-  padding-bottom: 0.625rem;
+  padding-bottom: 0.5rem;
 }
 .psui-el-table-results.layout-flexible thead tr:first-of-type th > div > .title {
   font-size: 12px;
@@ -2835,7 +2828,7 @@ video {
 }
 .psui-el-table-results.layout-flexible thead tr:first-of-type th > div > .title {
   --tw-text-opacity: 1;
-  color: rgb(81 94 106/var(--tw-text-opacity));
+  color: rgb(0 42 58/var(--tw-text-opacity));
 }
 .psui-el-table-results.layout-flexible thead tr:first-of-type p {
   font-size: 16px;
@@ -2844,8 +2837,15 @@ video {
 .psui-el-table-results.layout-flexible thead tr:first-of-type p {
   line-height: 18px;
 }
-.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th {
-  padding-left: 20px;
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th > div {
+  border-bottom-width: 1px;
+}
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th > div {
+  --tw-border-opacity: 1;
+  border-color: rgb(230 236 242/var(--tw-border-opacity));
+}
+.psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th > div {
+  padding-right: 20px;
 }
 .psui-el-table-results.layout-flexible thead tr:not(:first-of-type) th .title {
   --tw-text-opacity: 1;
@@ -2925,7 +2925,7 @@ video {
   transition: background-color 0.5s ease;
 }
 .psui-el-table-results.layout-flexible tbody tr td {
-  height: 2.5rem;
+  height: 32px;
 }
 .psui-el-table-results.layout-flexible tbody tr td {
   text-align: right;
@@ -2938,12 +2938,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(52 64 74/var(--tw-text-opacity));
 }
-.psui-el-table-results.layout-flexible tbody tr td {
-  padding-top: 0.688rem;
-  padding-bottom: 0.688rem;
-  min-height: 41.5px;
-  padding-left: 20px;
-}
 .psui-el-table-results.layout-flexible tbody tr td.hover-color {
   background-color: #ECF7FB !important;
   opacity: 0.99;
@@ -2989,10 +2983,7 @@ video {
   text-align: left;
 }
 .psui-el-table-results.layout-flexible tbody tr td:first-child {
-  padding-top: 8px;
-  padding-bottom: 8px;
   width: 352px;
-  padding-left: 0px;
 }
 .psui-el-table-results.layout-flexible tbody tr td:nth-child(2) {
   position: sticky;
@@ -3048,10 +3039,8 @@ video {
   height: auto;
 }
 .psui-el-table-results.layout-flexible tbody tr.is-first td {
-  padding-top: 0.5rem;
-}
-.psui-el-table-results.layout-flexible tbody tr.is-first td {
-  padding-bottom: 0px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .psui-el-table-results.layout-flexible tbody tr.is-first td {
   min-height: 1rem;
@@ -6302,6 +6291,11 @@ video {
   float: left;
 }
 
+.psui-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .psui-my-3 {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
@@ -6367,6 +6361,10 @@ video {
   height: 1.25rem;
 }
 
+.psui-h-full {
+  height: 100%;
+}
+
 .psui-w-2 {
   width: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.62",
+  "version": "1.1.90-beta.63",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

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

@@ -373,13 +373,11 @@
   
         tr {
           .title {
-            @apply psui-text-small psui-font-bold psui-leading-4;
+            @apply psui-text-small psui-leading-4;
           }
 
           th {
             @apply psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
-            padding-top: 0.438rem;
-            padding-bottom: 0.625rem;
 
             .description {
               @apply psui-text-xsmall psui-font-normal;
@@ -423,12 +421,10 @@
               }
   
               > div {
-                @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
-                padding-top: 0.5rem;
-                padding-bottom: 0.625rem;
+                @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30 psui-py-2;
 
                  > .title {
-                  @apply psui-text-accentSmall psui-text-gray-60 psui-font-bold psui-uppercase;
+                  @apply psui-text-accentSmall psui-text-blue-80 psui-font-bold psui-uppercase;
 
                  }
               }
@@ -442,7 +438,11 @@
 
           &:not(:first-of-type) {
             th {
-              padding-left: 20px;
+
+               > div {
+                @apply psui-border-b psui-border-gray-20 psui-pr-[20px];
+
+                }
 
               .title {
                 @apply psui-text-blue-80;
@@ -509,12 +509,7 @@
 
   
           td {
-            @apply psui-text-gray-70 psui-h-10 psui-text-right psui-text-small;
-            padding-top: 0.688rem;
-            padding-bottom: 0.688rem;
-            min-height: 41.5px;
-            padding-left: 20px;
-            
+            @apply psui-text-gray-70 psui-h-[32px] psui-text-right psui-text-small;            
 
             &.hover-color {
               background-color: #ECF7FB !important;
@@ -536,10 +531,7 @@
   
             &:first-child {
               @apply psui-pr-8 psui-text-left psui-block psui-sticky psui-z-10 psui-left-0;
-              padding-top: 8px;
-              padding-bottom: 8px;
               width: 352px;
-              padding-left: 0px;
             }
 
             &:nth-child(2) {
@@ -582,7 +574,7 @@
             }
 
             td {
-              @apply psui-h-auto psui-pt-2 psui-pb-0;
+              @apply psui-h-auto psui-py-1;
               min-height: 1rem;
             }
 

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

@@ -35,7 +35,7 @@
           @mouseleave="onRowHover(false, item, 'leave')"
         >
           <td :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)}; transition: background-color 0.5s ease;` : ''">
-            <div class="psui-flex psui-relative">
+            <div class="psui-flex psui-relative psui-h-full">
               <div
                 v-tooltip="{
                   classes: 'layout-gray-50',
@@ -52,7 +52,7 @@
                 />
               </div>
               <div
-                class="psui-flex psui-items-center psui-space-x-3"
+                class="psui-flex psui-items-center psui-space-x-2"
                 :style="{ paddingLeft: `${item.deep * 16}px` }"
               >
                 <PsIcon
@@ -207,7 +207,10 @@
               <div
                 v-if="layout != 'comparison'"
                 class="psui-space-x-2 psui-show-childrens-on-hover"
-                :class="column.isCenteredContent ? 'psui-justify-center' : 'psui-justify-end'"
+                :class="[
+                  {},
+                  column.isCenteredContent ? 'psui-justify-center' : 'psui-justify-end'
+                ]"
               >
                 <PsTooltip v-if="isSelectedRow(column, item)">
                   <template #trigger>

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

@@ -66,6 +66,7 @@
                 @click="emit('click-column-helper', column, $event)"
               />
               <p
+                v-tooltip="getTooltip(column)"
                 class="title"
                 v-if="column.title"
               >
@@ -74,7 +75,7 @@
             </div>
             <p
               class="description"
-              v-if="column.description"
+              v-if="column.description && layout != 'flexible'"
             >
               {{ column.description }}
             </p>
@@ -89,7 +90,7 @@
 import PsIcon from '../ui/PsIcon.vue'
 import { computed, getCurrentInstance } from 'vue'
 
-defineProps({
+const props = defineProps({
   /**
    * It sets the title for the first column.
    */
@@ -97,6 +98,13 @@ defineProps({
     type: String,
     default: '',
   },
+  layout: {
+    type: String,
+    default: 'results',
+    validator: (value) => {
+      return ['results', 'comparison', 'flexible'].indexOf(value) !== -1
+    },
+  },
   /**
    * It sets the description for the first column.
    */
@@ -135,6 +143,15 @@ const orderColumn = computed(() => {
   return parent.orderColumn
 })
 
+const getTooltip = (column) => {
+  if(props.layout == 'flexible' && column) {
+    return {
+    content: column.description,
+    classes: 'custom-tooltip'
+  }
+  }
+  return null
+}
 const orderDirection = computed(() => {
   return parent.orderDirection
 })

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

@@ -24,18 +24,25 @@
     <tr>
       <template v-for="(columnGroup, columnGroupIndex) of header">
         <th
-          v-for="column of columnGroup.columns"
+          v-for="(column, index) of columnGroup.columns"
           :key="`${columnGroup.key}-${column.key}`"
           :data-test-id="column.key"
+          class="pr-0"
+          :class="{'pl-2':index == 0 && columnGroupIndex > 0}"
         >
           <div
-            class="psui-flex psui-flex-col psui-justify-center"
+            class="psui-flex psui-flex-col psui-justify-center py-[7px]"
             :class="columnGroupIndex == 0 ? 'psui-items-center' : 'psui-items-end'"
             :data-index="columnGroupIndex"
             @mouseleave="emit('column-alert-hide', column, $event, false)"
           >
-            <div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">
+            <div class="psui-show-childrens-on-hover absolute-childrens psui-mx-auto">
               <p
+                v-tooltip="{
+                  content: column.description,
+                  placement: 'bottom',
+                  classes: 'custom-tooltip'
+                }"
                 class="title"
                 :class="{'is-warning-column': !!column.warning}"
                 v-if="column.title"
@@ -82,12 +89,6 @@
                 @click="emit('click-order-column', column)"
               />
             </div>
-            <p
-              class="description"
-              v-if="column.description"
-            >
-              {{ column.description }}
-            </p>
           </div>
         </th>
       </template>