@policystudio/policy-studio-ui-vue 1.0.66 → 1.0.69

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

@@ -0,0 +1,191 @@
+<template>
+  <div class="psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto">
+    <table class="psui-el-table-results">
+      <slot name="header"></slot>
+
+      <!-- <slot name="body"></slot> -->
+
+      <tbody>
+        <tr
+          v-for="(item, index) in getRows"
+          :key="index"
+          :class="[
+            {
+              'first:psui-font-bold psui-text-gray-80' : item.type == 'total',
+              'psui-text-blue-80' : item.type == 'vintage',
+              'psui-hidden' : checkIndexIsHidden(item),
+              'cell-pb-20 psui-text-red-70' : item.type == 'vintage' && !checkItemIsVisible(item) || item.type == 'study_data' && item.is_last,
+              'is-last' : item.is_last
+            },
+            `type-${item.type}`
+          ]"
+        >
+          <td>
+            <div 
+              class="actions psui-flex psui-items-center psui-space-x-3"
+              :style="{ paddingLeft: `${item.deep * 20}px` }"
+            >
+              <PsIcon
+                v-if="isCollapsible && item.deep > 0 && !item.last_deep || item.type === 'total'" 
+                :icon="checkItemIsVisible(item) ? 'expand_more' : 'chevron_right'"
+                size="24"
+                class="psui-cursor-pointer"
+                icon-classes="psui-text-gray-40 psui-leading-none psui-transition"
+                :style="{ display: 'flex' }"
+                @click="$emit('collapse-row', item)"
+              />
+              <p class="title">{{ item.title }}</p>
+            </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-space-x-2 psui-show-childrens-on-hover">
+                <PsIcon
+                  v-if="column.hasProjections"
+                  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('open-projections', item)"
+                />
+
+                <p>{{ item.data[column.key].toFixed(2) }}</p>
+
+                <PsProgressBar
+                  v-if="column.isChart"
+                  :value="item.data[column.key]"
+                />
+              </div>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+
+      <!-- <slot name="footer"></slot> -->
+    </table>
+  </div>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+import PsProgressBar from '../badges-and-tags/PsProgressBar.vue'
+export default {
+  name: 'PsTableResults',
+  components: { PsProgressBar, PsIcon },
+  props: {
+    itemsHiddenIndexes: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    summaryData: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    columnGroups: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    rows: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+     * It sets a close button if needed.
+     */
+    isCollapsible: {
+      type: Boolean,
+      default: true
+    },
+    /**
+    * It sets additional styling if needed.
+    */
+    cssStyle: {
+      type: String,
+      default: 'psui-text-gray-60'
+    },
+    testValue: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    cssAlign() {
+      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
+      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
+      return `psui-text-left ${this.cssStyle}`
+    },
+    getRows() {
+      const rows = []
+      for (let index = 0; index < this.summaryData.length; index++) {
+        const item = this.summaryData[index]
+        this.addRow(item, 0, `${index}`, rows)
+      }
+      return rows
+    }
+  },
+  methods: {
+    addRow(item, deep = 0, index, rows) {
+      item.deep = deep
+      item.index = index
+      rows.push(item)
+      item.last_deep = item.items ? false : true
+      if (item.items) {
+        const items_child = [...item.items]
+        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+          const item_child = items_child[indexChild]
+          item_child.is_last = indexChild + 1 === items_child.length ? true : false
+          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
+        }
+      }
+    },
+    checkItemIsVisible(item) {
+      return this.itemsHiddenIndexes.indexOf(item) < 0
+    },
+    checkIndexIsHidden(item) {
+      let isHidden = false
+      for (let index = 0; index < this.itemsHiddenIndexes.length; index++) {
+        const item_hidden = this.itemsHiddenIndexes[index]
+        if (item.index.startsWith(`${item_hidden}-`)) {
+          isHidden = true
+          break
+        }
+      }
+      return isHidden
+    },
+    onCollapse(item) {
+      const index = this.itemsHiddenIndexes.indexOf(item)
+      if(index > -1) {
+        this.itemsHiddenIndexes.splice(index, 1)
+      } else {
+        this.itemsHiddenIndexes.push(item)
+      }
+      this.$emit('click')
+    }
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

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

@@ -0,0 +1,98 @@
+<template>
+  <tbody>
+    <tr
+      v-for="(row, index) in getRows"
+      :key="index"
+    >
+      <td>
+        <p class="title">{{ row.title }}</p>
+      </td>
+
+      <template 
+        v-for="(columnGroup, indexColumn) of columnGroups"
+      >
+        <td
+          v-for="column of columnGroup.columns"
+          :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
+        >
+          <!-- <pre>{{ column }}</pre> -->
+          <p>{{ column.title }}</p>
+        </td>
+      </template>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'PsTableResultsBody',
+  props: {
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    summaryData: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    columnGroups: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    rows: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets additional styling if needed.
+    */
+    cssStyle: {
+      type: String,
+      default: 'psui-text-gray-60'
+    }
+  },
+  computed: {
+    cssAlign() {
+      if (this.align === 'right') return `psui-text-right ${this.cssStyle}`
+      if (this.align === 'center') return `psui-text-center  ${this.cssStyle}`
+      return `psui-text-left ${this.cssStyle}`
+    },
+    getRows() {
+      const rows = []
+      for (let index = 0; index < this.summaryData.length; index++) {
+        const item = this.summaryData[index]
+        this.addRow(item, 0, `${index}`, rows)
+      }
+      return rows
+    }
+  },
+  methods: {
+    addRow(item, deep = 0, index, rows) {
+      item.deep = deep
+      item.index = index
+      rows.push(item)
+      item.last_deep = item.items ? false : true
+      if (item.items) {
+        const items_child = [...item.items]
+        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+          const item_child = items_child[indexChild]
+          item_child.is_last = indexChild + 1 === items_child.length ? true : false
+          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
+        }
+      }
+    }
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

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

@@ -0,0 +1,109 @@
+<template>
+  <thead>
+    <tr>
+      <th>
+        <div>
+          <p class="title">Measures & Packages</p>
+        </div>
+      </th>
+      
+      <th
+        v-for="columnGroup of header"
+        :key="columnGroup.key"
+        :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
+      >
+        <div class="psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
+          <p class="title">{{ columnGroup.title }}</p>
+          <PsIcon
+            icon="info"
+            size="18"
+            class="psui-cursor-pointer"
+            icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+            :style="{ display: 'flex' }"
+            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+          />
+        </div>
+      </th>
+    </tr>
+
+    <tr>
+      <th>
+        <div>
+          <p class="description">Select the measures you want to combine <br />to create your policy.</p>
+        </div>
+      </th>
+
+      <template v-for="columnGroup of header">
+        <th 
+          v-for="column of columnGroup.columns" 
+          :key="`${columnGroup.key}-${column.key}`" 
+        >
+          <div class="psui-flex psui-flex-col">
+            <div class="psui-flex psui-flex-row psui-space-x-1 psui-items-center psui-justify-end psui-show-childrens-on-hover psui-mb-px">
+              <PsIcon
+                v-if="showOrder"
+                :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
+                :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
+                size="16"
+                class="psui-cursor-pointer"
+                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                :style="{ display: 'flex' }"
+                @click.native="$emit('click-order-column', column)" 
+              />
+
+              <PsIcon
+                icon="info"
+                size="16"
+                class="psui-cursor-pointer"
+                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)"
+              />
+              <p class="title" v-if="column.title">{{ column.title }}</p>
+            </div>
+            <p class="description" v-if="column.description">{{ column.description }}</p>
+          </div>
+        </th>
+      </template>
+    </tr>
+  </thead>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+export default {
+  name: 'PsTableResultsHead',
+  components: { PsIcon },
+  props: {
+    /**
+    * It sets the values which will be use to render the header.
+    */
+    header: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      },
+    },
+    /**
+    * this sets whether sorting will be displayed.
+    */
+    showOrder: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    columnsSelectedForStudy() {
+      return this.$parent.columnsSelectedForStudy
+    },
+    orderColumn() {
+      return this.$parent.orderColumn
+    },
+    orderDirection() {
+      return this.$parent.orderDirection
+    },
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

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

@@ -0,0 +1,86 @@
+<template>
+  <tbody>
+    <tr
+      v-for="(row, index) in getRows"
+      :key="index"
+    >
+      <td>
+        <p class="title">{{ row.title }}</p>
+      </td>
+
+      <template 
+        v-for="(columnGroup, indexColumn) of columnGroups"
+      >
+        <td
+          v-for="column of columnGroup.columns"
+          :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
+        >
+          <!-- <pre>{{ column }}</pre> -->
+          <p>{{ row.data[column.key] }}</p>
+        </td>
+      </template>
+    </tr>
+  </tbody>
+</template>
+
+<script>
+export default {
+  name: 'PsTableResultsRow',
+  props: {
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    summaryData: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    columnGroups: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the values which will be use to render the body.
+    */
+    rows: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+  },
+  computed: {
+    getRows() {
+      const rows = []
+      for (let index = 0; index < this.summaryData.length; index++) {
+        const item = this.summaryData[index]
+        this.addRow(item, 0, `${index}`, rows)
+      }
+      return rows
+    }
+  },
+  methods: {
+    addRow(item, deep = 0, index, rows) {
+      item.deep = deep
+      item.index = index
+      rows.push(item)
+      item.last_deep = item.items ? false : true
+      if (item.items) {
+        const items_child = [...item.items]
+        for (let indexChild = 0; indexChild < items_child.length; indexChild++) {
+          const item_child = items_child[indexChild]
+          item_child.is_last = indexChild + 1 === items_child.length ? true : false
+          this.addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)					
+        }
+      }
+    }
+  }
+}
+</script>
+<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>

package/src/components/tooltip/PsDialogTooltip.vue

@@ -64,6 +64,14 @@ export default {
       type: String,
       required: false,
     },
+    /**
+     * It sets the vertical position.
+     */
+    position:{
+      type: String,
+      default: 'bottom',
+      validator: (value)=> ['bottom','top'].includes(value)
+    }
   },
   inheritAttrs: true,
   emits: ['show', 'click'],
@@ -124,6 +132,10 @@ export default {
         dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
       }
 
+      if(this.position == 'top') {
+        dialog.style.top = `${rectTrigger.y - rectTrigger.height - 10}px`
+      }
+
       setTimeout(() => {
         dialog.style.opacity = 100
       }, 100)

package/src/components/tooltip/PsRichTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass">
+  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position">
     <template v-slot:trigger>
       <slot name="trigger"></slot>
     </template>
@@ -35,6 +35,12 @@ export default {
       type: String,
       default: '',
     },
+    position:{
+      type: String,
+      default: 'bottom',
+      validator: (value)=> ['bottom','top'].includes(value)
+    }
+
   },
 }
 </script>

package/src/components/tooltip/PsTooltip.vue

@@ -4,7 +4,9 @@
       <slot name="trigger"></slot>
     </div>
 
-    <div class='psui-el-tooltip-wrapper'>
+    <div 
+      class='psui-el-tooltip-wrapper'
+    >
       <div
         role="menu"
         ref="dialog"
@@ -54,6 +56,14 @@ export default {
      */
     cssClass:{
         type: String,
+    },
+    /**
+     * It sets the vertical position.
+     */
+    position:{
+      type: String,
+      default: 'bottom',
+      validator: (value)=> ['bottom','top'].includes(value)
     }
   },
   inheritAttrs: true,
@@ -67,7 +77,7 @@ export default {
   computed:{
     getComponentClass(){
       return `layout-${this.layout}`
-    }
+    },
   },
   mounted() {
     document.addEventListener('resize', this.updatePosition)
@@ -115,6 +125,10 @@ export default {
         dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
       }
 
+      if(this.position == 'top') {
+        dialog.style.top = `${rectTrigger.y - rectDialog.height - 10}px`
+      }
+
       setTimeout(() => {
         dialog.style.opacity = 100
       }, 100)

package/src/index.js

@@ -17,6 +17,9 @@ import PsAccordionItem from './components/accordion/PsAccordionItem.vue'
 import PsChips from './components/chips/PsChips.vue'
 import PsDataTable from './components/datatable/PsDataTable.vue'
 import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
+import PsTableResults from './components/table-results/PsTableResults.vue'
+import PsTableResultsHead from './components/table-results/PsTableResultsHead.vue'
+import PsTableResultsBody from './components/table-results/PsTableResultsBody.vue'
 import PsIcon from './components/ui/PsIcon.vue'
 import PsDotLoader from './components/ui/PsDotLoader.vue'
 import PsTooltip from './components/tooltip/PsTooltip.vue'
@@ -30,6 +33,7 @@ import PsScrollBar from './components/playground/PsScrollBar.vue'
 import PsMiniTag from './components/badges-and-tags/PsMiniTag.vue'
 import PsCheckboxSimple from './components/controls/PsCheckboxSimple.vue'
 import PsBadgeWithIcon from './components/badges-and-tags/PsBadgeWithIcon.vue'
+import PsProgressBar from './components/badges-and-tags/PsProgressBar.vue'
 import PsRadioButtonSimple from './components/controls/PsRadioButtonSimple.vue'
 
 
@@ -51,6 +55,9 @@ export default {
     Vue.component('PsChips', PsChips)
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
+    Vue.component('PsTableResults', PsTableResults)
+    Vue.component('PsTableResultsHead', PsTableResultsHead)
+    Vue.component('PsTableResultsBody', PsTableResultsBody)
     Vue.component('PsIcon', PsIcon)
     Vue.component('PsDotLoader', PsDotLoader)
     Vue.component('PsTooltip', PsTooltip)
@@ -68,6 +75,7 @@ export default {
     Vue.component('PsMiniTag', PsMiniTag)
     Vue.component('PsCheckboxSimple', PsCheckboxSimple)
     Vue.component('PsBadgeWithIcon', PsBadgeWithIcon)
+    Vue.component('PsProgressBar', PsProgressBar)
     Vue.component('PsRadioButtonSimple', PsRadioButtonSimple)
     
     Vue.directive('click-outside', {
@@ -104,6 +112,9 @@ export {
   PsChips,
   PsDataTable,
   PsDataTableItem,
+  PsTableResults,
+  PsTableResultsHead,
+  PsTableResultsBody,
   PsIcon,
   PsDotLoader,
   PsTooltip,
@@ -121,6 +132,7 @@ export {
   PsMiniTag,
   PsCheckboxSimple,
   PsBadgeWithIcon,
+  PsProgressBar,
   PsRadioButtonSimple
 }
 

package/src/stories/Draggable.stories.js

@@ -12,7 +12,7 @@ const Template = (args, {argTypes}) => ({
     <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
         <PsDraggable v-bind='$props'/>
     </div>
-        `
+  `
 })
 
 export const Component = Template.bind({})