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

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

@@ -6,116 +6,265 @@
   .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;
+    &.layout-results {
+      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-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
+            padding-top: 13px;
+            padding-bottom: 13px;
+  
+            .description {
+              @apply psui-text-xsmall psui-font-normal;
+              line-height: 110%;
+            }
+  
+            &:first-child {
+              @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
+              box-shadow: inset -1px 0px 0px #EBEEF0;
+              min-width: 300px;
+  
+              > div {
+                @apply psui-pl-0;
+              }
+            }
+          }
+  
+          &:first-of-type {
+            th {
+              @apply psui-text-left;
+              padding-top: 0;
+              padding-bottom: 0;
+  
+              > div {
+                @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
+                padding-top: 11px;
+                padding-bottom: 11px;
+              }
+            }
+  
+            p {
+              @apply psui-text-p;
+              line-height: 18px;
+            }
+          }
+        }
+      }
+  
+      tbody {
+        tr {
+          @apply psui-border-b psui-border-gray-20;
+  
+          &.is-first {
+            .title {
+              @apply psui-font-bold psui-text-gray-80;
+            }
+          }
+  
+          .title {
+            @apply psui-flex psui-items-center;
+          }
+  
+          td {
+            @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-small;
+            padding-top: 11px;
+            padding-bottom: 11px;
+  
+            > div {
+              @apply psui-flex psui-items-center;
+            }
+  
+            .actions {
+              @apply psui-flex psui-items-center psui-h-full psui-relative;
+  
+              &-button {
+                @apply psui-cursor-pointer psui-ml-1;
+              }
+  
+              .is-last-deep {
+                @apply psui-pl-10;
+              }
+            }
+  
+            &:not(:first-child) {
+              > div {
+                @apply psui-justify-end;
+              }
+            }
+  
+            &:first-child {
+              @apply psui-pl-0 psui-pr-8 psui-text-left psui-block psui-bg-white psui-sticky psui-z-10 psui-left-0;
+              box-shadow: inset -1px 0px 0px #EBEEF0;
+              padding-top: 8px;
+              padding-bottom: 8px;
+            }
+          }
         }
       }
     }
 
-    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;
-      }
+    &.layout-comparison {
+      @apply psui-border-separate;
+      border-spacing: 2px 8px;
 
       tr {
-        .title {
-          @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
+        th, td {
+          @apply psui-relative;
         }
+      }
 
-        th {
-          @apply psui-pl-6 psui-text-gray-50 psui-text-right psui-w-auto psui-align-top;
-          padding-top: 13px;
-          padding-bottom: 13px;
+      thead {
+        @apply psui-bg-transparent psui-items-start;
 
-          .description {
-            @apply psui-text-xsmall psui-font-normal;
-            line-height: 110%;
+        div {
+          @apply psui-relative;
+        }
+  
+        tr {
+          .title {
+            @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
           }
-
-          &:first-child {
-            @apply psui-pl-0 psui-pr-8 psui-text-left psui-bg-white psui-sticky psui-z-10 psui-left-0;
-            box-shadow: inset -1px 0px 0px #EBEEF0;
-            min-width: 300px;
-
-            > div {
-              @apply psui-pl-0;
+  
+          th {
+            @apply psui-px-6 psui-py-4 psui-text-gray-50 psui-text-center psui-align-top;
+            padding-top: 13px;
+            padding-bottom: 13px;
+            min-width: 200px;
+  
+            .description {
+              @apply psui-text-xsmall psui-font-normal;
+              line-height: 110%;
             }
           }
-        }
 
-        &:first-of-type {
-          th {
-            @apply psui-text-left;
-            padding-top: 0;
-            padding-bottom: 0;
+          &:not(:first-of-type) {
+            th {
 
-            > div {
-              @apply psui-flex psui-flex-row psui-border-b psui-border-gray-30;
+              &:after {
+                @apply psui-absolute psui-top-0 psui-h-full psui-inline-block psui-bg-gray-30 psui-w-px;
+                content: '';
+                right: -1px;
+              }
+            }
+          }
+  
+          &:first-of-type {
+            th {
+              @apply psui-text-left psui-text-gray-50 psui-text-p;
               padding-top: 11px;
               padding-bottom: 11px;
+
+              &:first-child {
+                @apply psui-pl-0 psui-pt-4;
+                min-width: 240px;
+
+                .title {
+                  @apply psui-text-gray-80 psui-font-bold;
+                }
+              }
+
+              &:not(:first-child) {
+                &:before {
+                  @apply psui-inline-block psui-absolute psui-top-0 psui-left-0 psui-w-full;
+                  content: '';
+                  background: linear-gradient(180deg, #FFFFFF 0%, #E6ECF2 100%);
+                  border-radius: 12px 12px 0px 0px;
+                  height: 5.5rem;
+                }
+              }
             }
-          }
+  
+            p {
+              @apply psui-text-small;
+              line-height: 18px;
 
-          p {
-            @apply psui-text-p;
-            line-height: 18px;
+              &.title {
+                @apply psui-text-gray-50 psui-font-normal;
+              }
+            }
           }
         }
       }
-    }
 
-    tbody {
-      tr {
-        @apply psui-border-b psui-border-gray-20;
+      tbody {
+        tr {
+          td {
+            @apply psui-bg-white psui-relative psui-shadow-elevation-5;
 
-        &.is-first {
-          .title {
-            @apply psui-font-bold psui-text-gray-80;
-          }
-        }
+            .title {
+              @apply psui-text-small psui-text-gray-80 psui-font-bold psui-truncate psui-leading-none psui-ml-1;
+              width: 144px;
+            }
 
-        .title {
-          @apply psui-flex psui-items-center;
-        }
+            .badge {
+              @apply psui-flex psui-items-center psui-justify-center psui-rounded psui-h-6;
+              width: 28px;
+              background-color: #D3EFDE;
+            }
 
-        td {
-          @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-small;
-          padding-top: 11px;
-          padding-bottom: 11px;
+            &:before {
+              @apply psui-inline-block psui-absolute psui-w-full psui-h-2 psui-bg-white psui-left-0;
+              content: '';
+              top: -8px;
+            }
 
-          > div {
-            @apply psui-flex psui-items-center;
-          }
+            &:after {
+              @apply psui-top-0 psui-absolute psui-h-full psui-inline-block psui-bg-blue-20;
+              content: '';
+              width: 2px; 
+              right: -2px;
+              background: linear-gradient(90deg, rgba(214,221,229,1) 50%, rgba(255,255,255,1) 50%);
+            }
 
-          .actions {
-            @apply psui-flex psui-items-center psui-h-full psui-relative;
+            &:first-child {
+              @apply psui-px-3 psui-rounded-tl-md psui-rounded-bl-md;
 
-            &-button {
-              @apply psui-cursor-pointer psui-ml-1;
+              &:after {
+                @apply psui-bg-gray-20 psui-bg-none;
+              }
             }
+          }
 
-            .is-last-deep {
-              @apply psui-pl-10;
+          &.is-first {
+            td {
+              &:before {
+                @apply psui-hidden;
+              }
             }
-          }
 
-          &:not(:first-child) {
-            > div {
-              @apply psui-justify-end;
+            &.opened {
+              td:first-child {
+                @apply psui-rounded-bl-none;
+              }
             }
           }
 
-          &:first-child {
-            @apply psui-pl-0 psui-pr-2 psui-text-left psui-block psui-bg-white psui-sticky psui-z-10 psui-left-0;
-            box-shadow: inset -1px 0px 0px #EBEEF0;
-            padding-top: 8px;
-            padding-bottom: 8px;
+          &:not(.is-first) {
+            td {
+              &:first-child {
+                @apply psui-rounded-tl-none;
+              }
+            }
           }
         }
       }

package/src/components/controls/PsDraggable.vue

@@ -23,6 +23,7 @@
         <span class="flex psui-items-center">
           <p>{{ columnGroup.title }}</p>
           <PsIcon
+            class="psui-el-draggable-wrapper-title-icon"
             v-if="columnGroup.hasHelper && columnGroup.hasHelper.showOnEditHideColumns"
             icon="info"
             size="16"
@@ -37,7 +38,6 @@
         class="psui-el-draggable-wrapper-list" 
         :class="{'psui-opacity-50 psui-pointer-events-none':columnGroup.disabled}"
       >
-        
         <div
           v-for="(column, indexColumn) in columnGroup.columns"
           :key="`edit-columns-column-${indexColumnGroup}-${indexColumn}`"
@@ -62,6 +62,7 @@
                 @change="$emit('on-select-item', { studyKey: getColumns.key, indexColumnGroup, indexColumn, columnGroupKey: columnGroup.key })"
               />
               <PsIcon
+                class="psui-el-draggable-item-title-icon"
                 v-if="column.hasHelper && column.hasHelper.showOnEditHideColumns"
                 icon="info"
                 size="16"

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,9 +3,10 @@
     class="psui-el-table-results-wrapper"
     :style="{ maxHeight: tableMaxHeight }"
   >
-    <table 
+    <table
       ref="table"
       class="psui-el-table-results"
+      :class="`layout-${layout}`"
     >
       <slot name="header"></slot>
 
@@ -16,6 +17,7 @@
           v-for="(item, index) in getRows"
           :key="index"
           :class="[
+            getStatusClass(item),
             {
               'is-disabled' : item.is_disabled,
               'is-first' : item.deep == 0,
@@ -28,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 }]"
@@ -80,7 +80,7 @@
                   ]"
                 >
                   {{ item.title }}
-                  
+
                   <PsIcon
                     v-if="item.has_helper"
                     icon="info"
@@ -90,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"
@@ -152,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"
@@ -196,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>
@@ -210,11 +238,25 @@
 import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
 import PsIcon from '../ui/PsIcon.vue'
 import PsProgressBar from '../badges-and-tags/PsProgressBar.vue'
+import PsTagScope from '../badges-and-tags/PsTagScope.vue'
+import PsBarChart from '../data-graphics/PsBarChart.vue'
+
+export const tableLayout = ['results', 'comparison']
 
 export default {
   name: 'PsTableResults',
-  components: { PsProgressBar, PsIcon, PsRichTooltip },
+  components: { PsProgressBar, PsIcon, PsRichTooltip, PsTagScope, PsBarChart },
   props: {
+    /**
+     * It sets the layout of the table. eg: results or comparison 
+     */
+    layout: {
+      type: String,
+      default: 'results',
+      validator: (value) => {
+        return tableLayout.indexOf(value) !== -1
+      }
+    },
     /**
     * It sets the max-height to table.
     */
@@ -278,6 +320,15 @@ export default {
     /**
     * It sets the values which will be use to render the body.
     */
+    existingColumnGroup: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
     rows: {
       type: Array,
       default() {
@@ -298,6 +349,15 @@ export default {
       type: Number,
       default: 1
     },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    policies: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
   },
   data: () => ({
     collapsedRows : [],
@@ -409,7 +469,10 @@ export default {
     executeCallback(item, action) {
       if(item?.actions?.length === 1) item.actions[0].callback(item)
       else action?.callback(item)
-    }
+    },
+    getStatusClass(item) {
+      return this.checkRowIsVisible(item) ? 'opened' : 'closed'
+    },
   },
 }
 </script>

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

@@ -15,7 +15,6 @@
           v-for="column of columnGroup.columns"
           :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
         >
-          <!-- <pre>{{ column }}</pre> -->
           <p>{{ column.title }}</p>
         </td>
       </template>

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

@@ -45,7 +45,7 @@
                 :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
                 :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
                 size="16"
-                class="psui-cursor-pointer"
+                class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
                 @click.native="$emit('click-order-column', column)" 
@@ -54,7 +54,7 @@
               <PsIcon
                 icon="info"
                 size="16"
-                class="psui-cursor-pointer"
+                class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
                 @click.native="$emit('click-column-helper', column, $event)"