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

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

@@ -6,116 +6,238 @@
   .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;
+  
+      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;
         }
-
-        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%;
+  
+        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-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;
             }
           }
         }
-
-        &: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;
+      }
+  
+      tbody {
+        tr {
+          @apply psui-border-b psui-border-gray-20;
+  
+          &.is-first {
+            .title {
+              @apply psui-font-bold psui-text-gray-80;
             }
           }
-
-          p {
-            @apply psui-text-p;
-            line-height: 18px;
+  
+          .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;
+            }
           }
         }
       }
     }
 
-    tbody {
+    &.layout-comparison {
+      border-collapse: separate;
+      border-spacing: 2px 8px;
+
       tr {
-        @apply psui-border-b psui-border-gray-20;
+        th, td {
+          @apply psui-relative;
 
-        &.is-first {
-          .title {
-            @apply psui-font-bold psui-text-gray-80;
+          &:last-child {
+            @apply psui-pr-2;
           }
         }
+      }
 
-        .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;
+      thead {
+        @apply psui-bg-transparent psui-items-start;
 
-          > div {
-            @apply psui-flex psui-items-center;
+        div {
+          @apply psui-relative;
+        }
+  
+        tr {
+          .title {
+            @apply psui-text-small psui-font-bold psui-leading-4 psui-text-gray-80;
+          }
+  
+          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%;
+            }
           }
 
-          .actions {
-            @apply psui-flex psui-items-center psui-h-full psui-relative;
+          &:not(:first-of-type) {
+            th {
 
-            &-button {
-              @apply psui-cursor-pointer psui-ml-1;
+              &:after {
+                @apply psui-absolute psui-top-0 psui-h-full psui-inline-block psui-bg-gray-30;
+                content: '';
+                width: 1px; 
+                right: -1px;
+              }
             }
+          }
+  
+          &:first-of-type {
+            th {
+              @apply psui-text-left psui-text-gray-50 psui-text-p;
+              padding-top: 11px;
+              padding-bottom: 11px;
 
-            .is-last-deep {
-              @apply psui-pl-10;
+              &:first-child {
+                min-width: 240px;
+                .title {
+                  @apply psui-text-gray-80 psui-font-bold;
+                }
+              }
+
+              &:not(:first-child) {
+                &:before {
+                  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;
+                }
+              }
+            }
+  
+            p {
+              @apply psui-text-small;
+              line-height: 18px;
+
+              &.title {
+                @apply psui-text-gray-50 psui-font-normal;
+              }
             }
           }
+        }
+      }
 
-          &:not(:first-child) {
-            > div {
-              @apply psui-justify-end;
+      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);
+
+            &:after {
+              @apply psui-top-0 psui-absolute psui-h-full psui-inline-block;
+              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-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;
+            &:first-child {
+              @apply psui-pl-3 psui-rounded-tl-md psui-rounded-bl-md;
+
+              &:after {
+                @apply psui-bg-gray-20;
+                background-image: none;
+              }
+            }
+
+            .psui-truncate {
+              width: 144px;
+            }
           }
         }
       }

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/forms/PsDropdown.vue

@@ -78,18 +78,11 @@ export default {
       default: false,
     },
     /**
-     * It sets the vertical position.
+     * It sets the vertical and horizontal position.
      */
     position: {
       type: String,
-      validator: (value)=> ['bottom','top', 'custom'].includes(value)
-    },
-    /**
-     * It sets the custom positions.
-     */
-    customPosition: {
-      type: String,
-      default: '',
+      validator: (value)=> ['custom'].includes(value)
     },
   },
   data() {
@@ -153,14 +146,9 @@ export default {
         PSDropdownDialog.style.left = `${rectTrigger.x}px`
       }
 
-      if(this.position == 'top') {
-        PSDropdownDialog.style.top = `${(rectTrigger.y - rectDialog.height) - 10}px`
-      }
-
       if(this.position == 'custom') {
-        PSDropdownDialog.style = this.customPosition
-        PSDropdownDialog.style.display = 'block'
-        PSDropdownDialog.style.position = 'absolute'
+        PSDropdownDialog.style.top = `${rectTrigger.y}px`
+        PSDropdownDialog.style.left = `${rectTrigger.x + 80}px`
       }
 
       if (rectTrigger.top < 10) {

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

@@ -4,8 +4,122 @@
     :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}`"
     >
       <slot name="header"></slot>
 
@@ -125,7 +239,6 @@
                   v-if="shouldShowDropdown(item)"
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
                   position="custom"
-                  custom-position="top: 0; left: 5rem;"
                 >
                   <template v-slot:dropdownTrigger>
                     <PsIcon 
@@ -211,11 +324,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.
     */
@@ -279,6 +406,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() {
@@ -299,6 +435,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 : [],
@@ -410,7 +555,7 @@ export default {
     executeCallback(item, action) {
       if(item?.actions?.length === 1) item.actions[0].callback(item)
       else action?.callback(item)
-    }
+    },
   },
 }
 </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)"