@policystudio/policy-studio-ui-vue 1.1.7 → 1.1.8

package/dist/css/psui_styles.css

@@ -2099,10 +2099,6 @@ video {
         position: relative;
       }
 
-.psui-el-table-results.layout-comparison tr th:last-child, .psui-el-table-results.layout-comparison tr td:last-child {
-          padding-right: 0.5rem;
-        }
-
 .psui-el-table-results.layout-comparison thead {
       background-color: transparent;
       align-items: flex-start;
@@ -2152,8 +2148,8 @@ video {
               --bg-opacity: 1;
               background-color: #D6DDE5;
               background-color: rgba(214, 221, 229, var(--bg-opacity));
-              content: '';
               width: 1px;
+              content: '';
               right: -1px;
             }
 
@@ -2169,6 +2165,8 @@ video {
           }
 
 .psui-el-table-results.layout-comparison thead tr:first-of-type th:first-child {
+              padding-left: 0;
+              padding-top: 1rem;
               min-width: 240px;
             }
 
@@ -2180,13 +2178,15 @@ video {
               }
 
 .psui-el-table-results.layout-comparison thead tr:first-of-type th:not(:first-child):before {
-                content: '';
                 display: inline-block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                content: '';
                 background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF2 100%);
                 border-radius: 12px 12px 0px 0px;
-                position: absolute;
-                top: 0; left: 0;
-                width: 100%; height: 88px;
+                height: 5.5rem;
               }
 
 .psui-el-table-results.layout-comparison thead tr:first-of-type p {
@@ -2208,20 +2208,59 @@ video {
           box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
         }
 
+.psui-el-table-results.layout-comparison tbody tr td .title {
+            font-size: 14px;
+            line-height: 130%;
+            --text-opacity: 1;
+            color: #28323B;
+            color: rgba(40, 50, 59, var(--text-opacity));
+            font-weight: 700;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 1;
+            margin-left: 0.25rem;
+            width: 144px;
+          }
+
+.psui-el-table-results.layout-comparison tbody tr td .badge {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 0.25rem;
+            height: 1.5rem;
+            width: 28px;
+            background-color: #D3EFDE;
+          }
+
+.psui-el-table-results.layout-comparison tbody tr td:before {
+            display: inline-block;
+            position: absolute;
+            width: 100%;
+            height: 0.5rem;
+            background-color: #ffffff ;
+            left: 0;
+            content: '';
+            top: -8px;
+          }
+
 .psui-el-table-results.layout-comparison tbody tr td:after {
             top: 0;
             position: absolute;
             height: 100%;
             display: inline-block;
+            --bg-opacity: 1;
+            background-color: #E0EFF6;
+            background-color: rgba(224, 239, 246, var(--bg-opacity));
             content: '';
             width: 2px;
             right: -2px;
-            background: rgb(214,221,229);
             background: linear-gradient(90deg, rgba(214,221,229,1) 50%, rgba(255,255,255,1) 50%);
           }
 
 .psui-el-table-results.layout-comparison tbody tr td:first-child {
             padding-left: 0.75rem;
+            padding-right: 0.75rem;
             border-top-left-radius: 0.375rem;
             border-bottom-left-radius: 0.375rem;
           }
@@ -2233,9 +2272,17 @@ video {
               background-image: none;
             }
 
-.psui-el-table-results.layout-comparison tbody tr td .psui-truncate {
-            width: 144px;
-          }
+.psui-el-table-results.layout-comparison tbody tr.is-first td:before {
+              display: none;
+            }
+
+.psui-el-table-results.layout-comparison tbody tr.is-first.opened td:first-child {
+              border-bottom-left-radius: 0;
+            }
+
+.psui-el-table-results.layout-comparison tbody tr:not(.is-first) td:first-child {
+              border-top-left-radius: 0;
+            }
 
 .psui-el-checkbox {
   position: relative;

package/package.json

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

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

@@ -124,16 +124,12 @@
     }
 
     &.layout-comparison {
-      border-collapse: separate;
+      @apply psui-border-separate;
       border-spacing: 2px 8px;
 
       tr {
         th, td {
           @apply psui-relative;
-
-          &:last-child {
-            @apply psui-pr-2;
-          }
         }
       }
 
@@ -165,9 +161,8 @@
             th {
 
               &:after {
-                @apply psui-absolute psui-top-0 psui-h-full psui-inline-block psui-bg-gray-30;
+                @apply psui-absolute psui-top-0 psui-h-full psui-inline-block psui-bg-gray-30 psui-w-px;
                 content: '';
-                width: 1px; 
                 right: -1px;
               }
             }
@@ -180,7 +175,9 @@
               padding-bottom: 11px;
 
               &:first-child {
+                @apply psui-pl-0 psui-pt-4;
                 min-width: 240px;
+
                 .title {
                   @apply psui-text-gray-80 psui-font-bold;
                 }
@@ -188,13 +185,11 @@
 
               &:not(:first-child) {
                 &:before {
+                  @apply psui-inline-block psui-absolute psui-top-0 psui-left-0 psui-w-full;
                   content: '';
-                  display: inline-block;
                   background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF2 100%);
                   border-radius: 12px 12px 0px 0px;
-                  position: absolute;
-                  top: 0; left: 0;
-                  width: 100%; height: 88px;
+                  height: 5.5rem;
                 }
               }
             }
@@ -214,29 +209,61 @@
       tbody {
         tr {
           td {
-            @apply psui-bg-white psui-relative;
-            box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+            @apply psui-bg-white psui-relative psui-shadow-elevation-5;
+
+            .title {
+              @apply psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
+              width: 144px;
+            }
+
+            .badge {
+              @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-h-6;
+              width: 28px;
+              background-color: #D3EFDE;
+            }
+
+            &:before {
+              @apply psui-inline-block psui-absolute psui-w-full psui-h-2 psui-bg-white psui-left-0;
+              content: '';
+              top: -8px;
+            }
 
             &:after {
-              @apply psui-top-0 psui-absolute psui-h-full psui-inline-block;
+              @apply psui-top-0 psui-absolute psui-h-full psui-inline-block psui-bg-blue-20;
               content: '';
               width: 2px; 
               right: -2px;
-              background: rgb(214,221,229);
               background: linear-gradient(90deg, rgba(214,221,229,1) 50%, rgba(255,255,255,1) 50%);
             }
 
             &:first-child {
-              @apply psui-pl-3 psui-rounded-tl-md psui-rounded-bl-md;
+              @apply psui-px-3 psui-rounded-tl-md psui-rounded-bl-md;
 
               &:after {
-                @apply psui-bg-gray-20;
-                background-image: none;
+                @apply psui-bg-gray-20 psui-bg-none;
               }
             }
+          }
 
-            .psui-truncate {
-              width: 144px;
+          &.is-first {
+            td {
+              &:before {
+                @apply psui-hidden;
+              }
+            }
+
+            &.opened {
+              td:first-child {
+                @apply psui-rounded-bl-none;
+              }
+            }
+          }
+
+          &:not(.is-first) {
+            td {
+              &:first-child {
+                @apply psui-rounded-tl-none;
+              }
             }
           }
         }

package/src/components/data-graphics/PsBarChart.vue

@@ -21,7 +21,7 @@ export default {
       default: true
     },
     total: {
-      type: String,
+      type: [String, Number],
       default: '5,0',
     },
     fillWidth: {

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

@@ -3,120 +3,7 @@
     class="psui-el-table-results-wrapper"
     :style="{ maxHeight: tableMaxHeight }"
   >
-    <table 
-      v-if="layout == 'comparison'"
-      ref="table"
-      class="psui-el-table-results"
-      :class="`layout-${layout}`"
-    >
-      <slot name="header"></slot>
-
-      <!-- <slot name="body"></slot> -->
-
-      <tbody class="psui-el-table-results-body">
-        <tr
-          v-for="(item, index) in getRows"
-          :key="index"
-          :class="[
-            {
-              'is-disabled' : item.is_disabled,
-              'is-first' : item.deep == 0,
-              'psui-hidden' : checkRowIsCollapsed(item),
-              'is-last' : item.is_last
-            },
-            `type-${item.type}`
-          ]"
-          @mouseenter="onRowHover(index)"
-          @mouseleave="onRowHover(false)"
-        >
-          <td>
-            <div class="psui-flex psui-items-center">
-              <PsIcon
-                icon="expand_more"
-                size="24"
-                class="actions-button psui-transition psui-transform psui-mr-1"
-                :icon-classes="item.is_disabled ? 'psui-text-gray-40' : getIconClasses(item)"
-                :style="{ display: 'flex' }"
-                :class="[checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90', { 'psui-pointer-events-none' : item.is_disabled }]"
-                @click.native="onCollapse(item)"
-              />
-              <span class="psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-pr-3">{{ item.title }}</span>
-              <PsIcon
-                icon="trending_down"
-                size="24"
-                class="actions-button psui-transition psui-transform psui-mr-1"
-                :icon-classes="item.is_disabled ? 'psui-text-gray-40' : getIconClasses(item)"
-                :style="{ display: 'flex' }"
-                :class="[checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90', { 'psui-pointer-events-none' : item.is_disabled }]"
-                @click.native="onCollapse(item)"
-              />
-            </div>
-          </td>
-          <template 
-            v-for="(columnGroup, indexColumn) of columnGroups"
-          >
-            <td
-              v-for="column of columnGroup.columns"
-              :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
-            >
-              <div class="psui-py-4 psui-px-6">
-                <PsTagScope 
-                  v-if="column.isScope"
-                  :included="item[column.key]"
-                />
-                <PsBarChart 
-                  v-else-if="column.isChart"
-                  :show-number="item[column.key]"
-                  :total="item[column.key]"
-                  :fill-width="Math.floor(Math.random() * 100)"
-                />
-                <p v-else>
-                  {{ item[column.key] }}
-                </p>
-                <!-- <PsIcon
-                  v-if="column.hasProjections && !item.is_disabled"
-                  icon="bar_chart"
-                  size="16"
-                  class="psui-cursor-pointer"
-                  icon-classes="psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
-                  :style="{ display: 'flex' }"
-                  @click.native="$emit('policy-selected', { item, column })"
-                /> -->
-
-                <!-- <p v-if="formatFunction && !item.is_disabled">
-                  {{ formatFunction(column.key, item.data[column.key], item.data) }}
-                </p> -->
-
-                <!-- <p 
-                  v-else-if="item.is_disabled"
-                  class="psui-text-gray-50"
-                >
-                  --
-                </p> -->
-                
-
-                <!-- <PsProgressBar
-                  v-if="column.isChart && formatFunction"
-                  :value="formatFunction(column.key, item.data[column.key], item.data) == '--' ? 0 : item.data[column.key]"
-                  :force-break-even="item.is_disabled || formatFunction(column.key, item.data[column.key], item.data) === '--' ? true : false"
-                />
-
-                <PsProgressBar
-                  v-else-if="column.isChart"
-                  :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
-                  :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
-                /> -->
-              </div>
-            </td>
-          </template>
-        </tr>
-      </tbody>
-
-      <!-- <slot name="footer"></slot> -->
-    </table>
-    
     <table
-      v-else
       ref="table"
       class="psui-el-table-results"
       :class="`layout-${layout}`"
@@ -130,6 +17,7 @@
           v-for="(item, index) in getRows"
           :key="index"
           :class="[
+            getStatusClass(item),
             {
               'is-disabled' : item.is_disabled,
               'is-first' : item.deep == 0,
@@ -142,18 +30,16 @@
           @mouseleave="onRowHover(false)"
         >
           <td>
-            <div 
-              class="psui-flex psui-justify-between"
-            >
+            <div class="psui-flex psui-justify-between">
               <div
-                class="actions psui-space-x-3"
+                class="psui-flex psui-items-center actions psui-space-x-3"
                 :style="{ paddingLeft: `${item.deep * 16}px` }"
               >
                 <PsIcon
                   v-if="!item.last_deep || item.type === 'total'"
                   icon="expand_more"
                   size="24"
-                  class="actions-button psui-transition psui-transform"
+                  class="actions-button psui-transition psui-transform psui-cursor-pointer"
                   :icon-classes="item.is_disabled ? 'psui-text-gray-40' : getIconClasses(item)"
                   :style="{ display: 'flex' }"
                   :class="[checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90', { 'psui-pointer-events-none' : item.is_disabled }]"
@@ -194,7 +80,7 @@
                   ]"
                 >
                   {{ item.title }}
-                  
+
                   <PsIcon
                     v-if="item.has_helper"
                     icon="info"
@@ -204,6 +90,14 @@
                     @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                   />
                 </p>
+
+                <PsIcon
+                  v-if="item.has_badge"
+                  :icon="item.has_badge"
+                  size="20"
+                  class="badge psui-text-green-70 psui-leading-none psui-ml-0"
+                  :style="{ display: 'flex' }"
+                />
               </div>
               <div 
                 class="actions psui-space-x-3 flex justify-between"
@@ -266,14 +160,15 @@
             </div>
           </td>
 
-          <template 
-            v-for="(columnGroup, indexColumn) of columnGroups"
-          >
+          <template v-for="(columnGroup, indexColumn) of columnGroups">
             <td
               v-for="column of columnGroup.columns"
               :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
             >
-              <div class="psui-space-x-2 psui-show-childrens-on-hover">
+              <div 
+                v-if="layout != 'comparison'"
+                class="psui-space-x-2 psui-show-childrens-on-hover"
+              >
                 <PsIcon
                   v-if="column.hasProjections && !item.is_disabled"
                   icon="bar_chart"
@@ -310,6 +205,25 @@
                   :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
                 />
               </div>
+              <div v-else>
+                <div class="psui-py-4 psui-px-6">
+                  <PsTagScope 
+                    v-if="item.data[column.key] != 0 && column.renderType && column.renderType == 'tag_scope'"
+                    :included="item.data[column.key] != 0 ? true : false"
+                  />
+
+                  <PsBarChart 
+                    v-else-if="item.data[column.key] != 0 && column.renderType && column.renderType == 'bar_chart'"
+                    :show-number="item.data[column.key] != 0 ? true : false"
+                    :total="item.data[column.key]"
+                    :fill-width="Math.floor(Math.random() * 100)"
+                  />
+
+                  <p v-else-if="item.data[column.key] != 0">
+                    {{ item.data[column.key] }}
+                  </p>
+                </div>
+              </div>
             </td>
           </template>
         </tr>
@@ -556,6 +470,9 @@ export default {
       if(item?.actions?.length === 1) item.actions[0].callback(item)
       else action?.callback(item)
     },
+    getStatusClass(item) {
+      return this.checkRowIsVisible(item) ? 'opened' : 'closed'
+    },
   },
 }
 </script>