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

package/dist/css/psui_styles.css

@@ -2444,7 +2444,7 @@ video {
             text-align: left;
             padding-top: 0;
             padding-bottom: 0;
-            min-width: 497px;
+            min-width: 100px;
             position: sticky;
           }
 
@@ -2459,6 +2459,17 @@ video {
               padding-bottom: 0.625rem;
             }
 
+.psui-el-table-results.layout-flexible thead tr:first-of-type th > div > .title {
+                font-size: 12px;
+                line-height: 130%;
+                letter-spacing: 0.6px;
+                --text-opacity: 1;
+                color: #515E6A;
+                color: rgba(81, 94, 106, var(--text-opacity));
+                font-weight: 700;
+                text-transform: uppercase;
+              }
+
 .psui-el-table-results.layout-flexible thead tr:first-of-type p {
             font-size: 16px;
             line-height: 130%;
@@ -2590,6 +2601,10 @@ video {
             left: 357px;
           }
 
+.psui-el-table-results.layout-flexible tbody tr td:nth-child(2) > div {
+              justify-content: center;
+            }
+
 .psui-el-table-results.layout-flexible tbody tr td:nth-child(3) {
             position: sticky;
             z-index: 10;
@@ -2598,6 +2613,10 @@ video {
             padding-right: 22px;
           }
 
+.psui-el-table-results.layout-flexible tbody tr td:nth-child(3) > div {
+              justify-content: center;
+            }
+
 .psui-el-table-results.layout-flexible tbody tr td .psui-el-tooltip-dialog {
             text-align: left;
             max-width: 180px;

package/package.json

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

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

@@ -399,13 +399,18 @@
               @apply psui-text-left;
               padding-top: 0;
               padding-bottom: 0;
-              min-width: 497px;
+              min-width: 100px;
               position: sticky;
   
               > div {
                 @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
                 padding-top: 0.5rem;
                 padding-bottom: 0.625rem;
+
+                 > .title {
+                  @apply psui-text-accentSmall psui-text-gray-60 psui-font-bold psui-uppercase;
+
+                 }
               }
             }
   
@@ -510,6 +515,9 @@
               @apply psui-sticky psui-z-10;
               min-width: 140px;
               left: 357px;
+              > div {
+                @apply psui-justify-center;
+              }
             }
 
             &:nth-child(3) {
@@ -517,6 +525,9 @@
               min-width: 140px;
               left: 497px;
               padding-right: 22px;
+              > div {
+                @apply psui-justify-center;
+              }
             }
 
             .psui-el-tooltip-dialog {

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

@@ -271,27 +271,27 @@
                   :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
                   :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
                 />
-                <PsRichTooltip
-                    v-if="column.isSwitch && item.data[column.key] != null"
-                    :ignoreDialog="!item.data.is_disabled || item.is_excluded"
-                    position="top"
-                    layout="blue"
-                  >
-                  <template v-slot:trigger>
-                    <PsSwitch
-                      :disabled="item.data.is_disabled"
-                      :value="item.data[column.key]"
-                      :background-color="switchButtonBackgroundColor"
-                      :class="{'psui-pointer-events-none':preventClickOnSwitchButtons}"
-                      size="small"
-                      @change="$emit('switchButtonItemChanged', item)"
-                    />
-                  </template>
-                  <template v-slot:content>
-                    {{ item.tooltip_text }}
-                  </template>
-                </PsRichTooltip>
                 
+                <div
+                  v-if="column.isSwitch && item.data[column.key] != null"
+                  class="psui-inline-flex" 
+                  v-tooltip="{
+                    content: !item.data.is_disabled || item.is_excluded ? false : `<p class='psui-text-white psui-text-xsmall'>${item.tooltip_text}</p>`,
+                    classes: 'layout-blue'
+                  }"
+                >
+                <div class="flex psui-items-center psui-relative">
+                  <PsSwitch
+                    :disabled="item.data.is_disabled"
+                    :value="item.data[column.key]"
+                    :background-color="switchButtonBackgroundColor"
+                    class="psui-justify-self-center"
+                    :class="{'psui-pointer-events-none':preventClickOnSwitchButtons}"
+                    size="small"
+                    @change="$emit('switchButtonItemChanged', item)"
+                  />
+                  </div>
+                </div>
               </div>
               
               <!-- only comparison layout -->