@policystudio/policy-studio-ui-vue 1.1.90-beta.12 → 1.1.90-beta.18

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

@@ -10,9 +10,7 @@
         </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"
@@ -24,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 { defineProps, 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

@@ -8,11 +8,11 @@
           </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">
@@ -24,7 +24,7 @@
             class="psui-cursor-pointer"
             icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
             :style="{ display: 'flex' }"
-            @click="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -43,9 +43,9 @@
       </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">
@@ -57,7 +57,7 @@
                 class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-order-column', column)" 
+                @click="emit('click-order-column', column)"
               />
 
               <PsIcon
@@ -66,7 +66,7 @@
                 class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-column-helper', column, $event)"
+                @click="emit('click-column-helper', column, $event)"
               />
               <p
                 class="title"
@@ -88,55 +88,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 { defineProps, computed, defineEmits, 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-order-column', 'click-column-helper'])
+
+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>

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

@@ -13,11 +13,11 @@
           </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">
@@ -29,7 +29,7 @@
             class="psui-cursor-pointer"
             icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
             :style="{ display: 'flex' }"
-            @click="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -37,8 +37,8 @@
 
     <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">
@@ -56,9 +56,9 @@
                 class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-column-helper', column, $event)"
+                @click="emit('click-column-helper', column, $event)"
               />
-              
+
               <PsIcon
                 v-if="showOrder"
                 :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
@@ -67,7 +67,7 @@
                 class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-order-column', column)" 
+                @click="emit('click-order-column', column)"
               />
             </div>
             <p
@@ -83,55 +83,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 { defineProps, computed, defineEmits, 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>

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

@@ -4,7 +4,7 @@
       <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">
@@ -16,7 +16,7 @@
             class="psui-cursor-pointer"
             icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
             :style="{ display: 'flex' }"
-            @click="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -24,12 +24,12 @@
 
     <tr>
       <template v-for="(columnGroup, columnGroupIndex) of header">
-        <th 
-          v-for="column of columnGroup.columns" 
+        <th
+          v-for="column of columnGroup.columns"
           :key="`${columnGroup.key}-${column.key}`"
           :data-test-id="column.key"
         >
-          <div 
+          <div
             class="psui-flex psui-flex-col psui-justify-center"
             :class="columnGroupIndex == 0 ? 'psui-items-center' : 'psui-items-end'"
             :data-index="columnGroupIndex"
@@ -48,9 +48,9 @@
                 class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-column-helper', column, $event)"
+                @click="emit('click-column-helper', column, $event)"
               />
-              
+
               <PsIcon
                 v-if="showOrder"
                 :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
@@ -59,7 +59,7 @@
                 class="psui-cursor-pointer helper"
                 icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-order-column', column)" 
+                @click="emit('click-order-column', column)"
               />
             </div>
             <p
@@ -75,55 +75,62 @@
   </thead>
 </template>
 
-<script>
+<script setup>
 import PsIcon from '../ui/PsIcon.vue'
-export default {
-  name: 'PsTableResultsHeadFlexible',
-  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 { defineEmits, computed, defineProps, 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>