@policystudio/policy-studio-ui-vue 1.1.88 → 1.1.90-access.0

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

@@ -5,12 +5,12 @@
       :key="index"
     >
       <td>
-        <p class="title">{{ row.title }}</p>
+        <p class="title">
+          {{ row.title }}
+        </p>
       </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"
@@ -22,76 +22,77 @@
   </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 []
-      }
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /**
+   * 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.
-    */
-    rows: {
-      type: Array,
-      default() {
-        return []
-      }
+  },
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  columnGroups: {
+    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}`
+  /**
+   * It sets the values which will be use to render the body.
+   */
+  rows: {
+    type: Array,
+    default() {
+      return []
     },
-    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)					
-        }
-      }
+  /**
+   * It sets additional styling if needed.
+   */
+  cssStyle: {
+    type: String,
+    default: 'psui-text-gray-60',
+  },
+})
+
+const cssAlign = computed(() => {
+  if (props.align === 'right') return `psui-text-right ${props.cssStyle}`
+  if (props.align === 'center') return `psui-text-center  ${props.cssStyle}`
+  return `psui-text-left ${props.cssStyle}`
+})
+
+const 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
+      addRow(item_child, deep + 1, `${index}-${indexChild}`, rows)
     }
   }
 }
+
+const getRows = computed(() => {
+  const rows = []
+  for (let index = 0; index < props.summaryData.length; index++) {
+    const item = props.summaryData[index]
+    addRow(item, 0, `${index}`, rows)
+  }
+  return rows
+})
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsTableResults.scss */
+</style>

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

@@ -3,24 +3,27 @@
     <tr>
       <th>
         <div v-if="firstColumnTitle">
-          <p class="title">{{ firstColumnTitle }}</p>
+          <p class="title">
+            {{ firstColumnTitle }}
+          </p>
         </div>
       </th>
-      
+
       <th
         v-for="columnGroup of header"
         :key="columnGroup.key"
-        :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
+        :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>
+          <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"
+            icon="info_outline"
+            size="16"
+            class="psui-cursor-pointer psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"            
             :style="{ display: 'flex' }"
-            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -29,14 +32,19 @@
     <tr>
       <th>
         <div>
-          <p v-if="firstColumnDescription" class="description">{{ firstColumnDescription }}</p>
+          <p
+            v-if="firstColumnDescription"
+            class="description"
+          >
+            {{ firstColumnDescription }}
+          </p>
         </div>
       </th>
 
       <template v-for="columnGroup of header">
-        <th 
-          v-for="column of columnGroup.columns" 
-          :key="`${columnGroup.key}-${column.key}`" 
+        <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">
@@ -45,23 +53,32 @@
                 :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
                 :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
                 size="16"
-                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)" 
+                class="helper psui-cursor-pointer psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"                
+                :style="{ display: 'flex', marginTop: '1px' }"
+                @click="emit('click-order-column', column)"
               />
 
               <PsIcon
-                icon="info"
+                icon="info_outline"
                 size="16"
-                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)"
+                class="helper psui-cursor-pointer psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"                
+                :style="{ display: 'flex', marginTop: '1px' }"
+                @click="emit('click-column-helper', column, $event)"
               />
-              <p class="title" v-if="column.title">{{ column.title }}</p>
+              <p
+                v-tooltip="getTooltip(column)"
+                class="title"
+                v-if="column.title"
+              >
+                {{ column.title }}
+              </p>
             </div>
-            <p class="description" v-if="column.description">{{ column.description }}</p>
+            <p
+              class="description"
+              v-if="column.description && layout != 'flexible'"
+            >
+              {{ column.description }}
+            </p>
           </div>
         </th>
       </template>
@@ -69,55 +86,77 @@
   </thead>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export default {
-  name: 'PsTableResultsHead',
-  components: { PsIcon },
-  props: {
-    /**
-    * It sets the title for the first column.
-    */
-    firstColumnTitle: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the description for the first column.
-    */
-    firstColumnDescription: {
-      type: String,
-      default: ''
-    },
-    /**
-    * 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
-    }
+import { computed, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+  /**
+   * It sets the title for the first column.
+   */
+  firstColumnTitle: {
+    type: String,
+    default: '',
   },
-  computed: {
-    columnsSelectedForStudy() {
-      return this.$parent.columnsSelectedForStudy
+  layout: {
+    type: String,
+    default: 'results',
+    validator: (value) => {
+      return ['results', 'comparison', 'flexible'].indexOf(value) !== -1
     },
-    orderColumn() {
-      return this.$parent.orderColumn
-    },
-    orderDirection() {
-      return this.$parent.orderDirection
+  },
+  /**
+   * It sets the description for the first column.
+   */
+  firstColumnDescription: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 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,
+  },
+})
+
+const emit = defineEmits(['click-column-group-helper', 'click-order-column', 'click-column-helper'])
+
+const parent = getCurrentInstance().proxy.$parent
+
+const columnsSelectedForStudy = computed(() => {
+  return parent.columnsSelectedForStudy
+})
+
+const orderColumn = computed(() => {
+  return parent.orderColumn
+})
+
+const getTooltip = (column) => {
+  if(props.layout == 'flexible' && column) {
+    return {
+    content: column.description,
+    classes: 'custom-tooltip'
   }
+  }
+  return null
 }
+const orderDirection = computed(() => {
+  return parent.orderDirection
+})
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsTableResults.scss */
+</style>

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

@@ -3,27 +3,32 @@
     <tr>
       <th rowspan="2">
         <div v-if="firstColumnTitle">
-          <p class="title">{{ firstColumnTitle }}</p>
+          <p class="title">
+            {{ firstColumnTitle }}
+          </p>
         </div>
         <div v-if="firstColumnDescription">
-          <p class="description">{{ firstColumnDescription }}</p>
+          <p class="description">
+            {{ firstColumnDescription }}
+          </p>
         </div>
       </th>
-      
+
       <th
         v-for="columnGroup of header"
         :key="columnGroup.key"
-        :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
+        :colspan="columnGroup.columns.reduce((prev, cur) => (cur.isActive ? prev + 1 : prev), 0)"
       >
         <div class="psui-flex psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
-          <p class="title">{{ columnGroup.title }}</p>
+          <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"
+            class="psui-cursor-pointer psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"            
             :style="{ display: 'flex' }"
-            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -31,35 +36,43 @@
 
     <tr>
       <template v-for="columnGroup of header">
-        <th 
-          v-for="column of columnGroup.columns" 
+        <th
+          v-for="column of columnGroup.columns"
           :key="`${columnGroup.key}-${column.key}`"
         >
           <div class="psui-flex psui-flex-col psui-justify-center psui-items-center psui-text-center">
             <div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">
-              <p class="title" v-if="column.title">{{ column.title }}</p>
+              <p
+                class="title"
+                v-if="column.title"
+              >
+                {{ column.title }}
+              </p>
 
               <PsIcon
                 icon="info"
                 size="16"
-                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)"
+                class="helper psui-cursor-pointer psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"                
+                :style="{ display: 'flex', marginTop: '1px' }"
+                @click="emit('click-column-helper', column, $event)"
               />
-              
+
               <PsIcon
                 v-if="showOrder"
                 :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
                 :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
                 size="16"
-                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)" 
+                class="helper psui-cursor-pointer psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"                
+                :style="{ display: 'flex', marginTop: '1px' }"
+                @click="emit('click-order-column', column)"
               />
             </div>
-            <p class="description" v-if="column.description">{{ column.description }}</p>
+            <p
+              class="description"
+              v-if="column.description"
+            >
+              {{ column.description }}
+            </p>
           </div>
         </th>
       </template>
@@ -67,55 +80,61 @@
   </thead>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export default {
-  name: 'PsTableResultsHead',
-  components: { PsIcon },
-  props: {
-    /**
-    * It sets the title for the first column.
-    */
-    firstColumnTitle: {
-      type: String,
-      default: ''
-    },
-    /**
-    * It sets the description for the first column.
-    */
-    firstColumnDescription: {
-      type: String,
-      default: ''
-    },
-    /**
-    * 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
-    }
+import { computed, getCurrentInstance } from 'vue'
+
+defineProps({
+  /**
+   * It sets the title for the first column.
+   */
+  firstColumnTitle: {
+    type: String,
+    default: '',
   },
-  computed: {
-    columnsSelectedForStudy() {
-      return this.$parent.columnsSelectedForStudy
-    },
-    orderColumn() {
-      return this.$parent.orderColumn
-    },
-    orderDirection() {
-      return this.$parent.orderDirection
+  /**
+   * It sets the description for the first column.
+   */
+  firstColumnDescription: {
+    type: String,
+    default: '',
+  },
+  /**
+   * 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,
+  },
+})
+
+const emit = defineEmits(['click-column-group-helper', 'click-column-helper', 'click-order-column'])
+
+const parent = getCurrentInstance().proxy.$parent
+
+const columnsSelectedForStudy = computed(() => {
+  return parent.columnsSelectedForStudy
+})
+
+const orderColumn = computed(() => {
+  return parent.orderColumn
+})
+
+const orderDirection = computed(() => {
+  return parent.orderDirection
+})
 </script>
-<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>
+
+<style>
+/* Please, use the file src/assets/scss/components/PsTableResults.scss */
+</style>