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

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

@@ -13,7 +13,7 @@
         { 'is-sticky': isSticky }
       ]"
     >
-      <slot name="header"></slot>
+      <slot name="header" />
 
       <tbody>
         <tr
@@ -24,10 +24,11 @@
             {
               'is-disabled' : item.is_disabled,
               'is-first' : item.deep == 0,
-              'psui-hidden' : checkRowIsCollapsed(item),
+              'psui-hidden' : checkRowIsCollapsed(item) || item.not_visible,
               'is-last' : item.is_last,
               'is-active' : selectedRow == item.id,
-              'removed-class' : (item.slug == 'removed_measures' || item.is_excluded) && layout == 'flexible'
+              'removed-class' : (item.slug == 'removed_measures' || item.is_excluded) && layout == 'flexible',
+              'appended-row' : item.is_appended,
             },
             `${item.type}`
           ]"
@@ -39,7 +40,6 @@
           <td 
             :style="item.background_color ? `background-color: ${getBackgroundColor(item.background_color)}; transition: background-color 0.5s ease;` : ''"
           >
-
             <div class="psui-flex psui-relative">
               <div
                 v-tooltip="{
@@ -48,42 +48,55 @@
                 }"
               >
                 <PsIcon
-                    v-if="item.remove_add_button"
-                    :icon="item.remove_add_button_icon"
-                    class="psui-flex psui-text-gray-40 pl-4 psui-cursor-pointer leading-none hover:psui-text-blue-60 transition-all"
-                    size="15"
-                    display="flex"
-                    @click.native="$emit('removeOrAddButtonChange', item, $event)"
-                  />
+                  v-if="item.remove_add_button"
+                  :icon="item.remove_add_button_icon"
+                  class="psui-flex psui-text-gray-40 pl-4 psui-cursor-pointer leading-none hover:psui-text-blue-60 transition-all"
+                  size="15"
+                  display="flex"
+                  @click="$emit('removeOrAddButtonChange', item, $event)"
+                />
               </div> 
               <div
                 class="psui-flex psui-items-center psui-space-x-3"
                 :style="{paddingLeft: `${item.deep * 16}px`}"
-              >
+              > 
                 <PsIcon
-                  v-if="!item.last_deep || item.type === 'total'"
+                  v-if="(!item.last_deep || item.type === 'total') && !item.is_appended"
                   icon="expand_more"
                   size="24"
                   class="actions-button psui-transition psui-transform psui-cursor-pointer"
                   :icon-classes="item.is_disabled ? 'psui-text-gray-40' : getIconClasses(item)"
                   display="flex"
                   :class="[checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90',
-                    { 'psui--rotate-90': item.is_disabled }, 
-                    { 'psui-pointer-events-none psui--rotate-90' : item.items.length == 0}
+                           { 'psui--rotate-90': item.is_disabled }, 
+                           { 'psui-pointer-events-none psui--rotate-90' : item.items.length == 0}
                   ]"
-                  @click.native="onCollapse(item, $event)"
+                  @click="onCollapse(item, $event)"
                 />
 
+                <div v-if="item.is_appended">
+                  <span class="psui-text-small psui-font-bold psui-text-blue-60 psui-ml-2">
+                    {{ item.title }}
+                  </span>
+                </div>
+
                 <div 
-                  v-if="item.is_disabled || item.tooltip_text"
+                  v-else-if="item.is_disabled || item.tooltip_text"
                   class="psui-inline-flex psui-cursor-default sticky"
                   :class="{ 'is-last-deep' : item.last_deep }"
                   v-tooltip="getTooltipContent(item)"
                 >
                   <div class="flex psui-items-center psui-relative ">
-                    <PsIcon v-if="item.has_blocked_icon" icon="do_disturb_alt" size="14" icon-classes="psui-absolute psui--left-1 psui-text-gray-50"/>
-                    <p class="title psui-text-gray-50 opacity-100-childrens-on-hover" :style='item.text_color ? `color: ${item.text_color};` : ""'>
-                    
+                    <PsIcon
+                      v-if="item.has_blocked_icon"
+                      icon="do_disturb_alt"
+                      size="14"
+                      icon-classes="psui-absolute psui--left-1 psui-text-gray-50"
+                    />
+                    <p
+                      class="title psui-text-gray-50 opacity-100-childrens-on-hover"
+                      :style="item.text_color ? `color: ${item.text_color};` : ''"
+                    >
                       {{ item.title }}
 
                       <PsIcon
@@ -92,7 +105,7 @@
                         size="14"
                         class="psui-text-gray-40 psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
                         display="flex"
-                        @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
+                        @click="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                       />
                     </p>
                   </div>
@@ -115,7 +128,7 @@
                     :class="[{'psui-text-gray-50': item.tooltip_text}, {'psui-text-blue-60': !item.tooltip_text}]"
                     class="psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
                     display="flex"
-                    @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
+                    @click="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                   />
                 </p>
 
@@ -137,18 +150,18 @@
                   layout="gray"
                   class="psui-inline-flex psui-cursor-default"
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
-                  :ignoreDialog="getIgnoreDialogIcon(item)"
+                  :ignore-dialog="getIgnoreDialogIcon(item)"
                 >
-                  <template v-slot:trigger>
+                  <template #trigger>
                     <PsIcon
                       :icon="getIcon(item)"
                       class="psui-flex psui-text-gray-40 psui-cursor-pointer leading-none hover:psui-text-blue-60 psui-gap-3 psui-px-5 psui-py-1 transition-all"
                       size="18"
                       display="flex"
-                      @click.native="executeCallback(item)"
+                      @click="executeCallback(item)"
                     />
                   </template>
-                  <template v-slot:content>
+                  <template #content>
                     <p
                       class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
                     >
@@ -163,7 +176,7 @@
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
                   position="custom"
                 >
-                  <template v-slot:dropdownTrigger>
+                  <template #dropdownTrigger>
                     <PsIcon 
                       icon="more_horiz"
                       size="18"
@@ -171,7 +184,7 @@
                       display="flex"
                     />
                   </template>
-                  <template v-slot:items>
+                  <template #items>
                     <ul class="psui-w-full psui-font-bold psui-my-3">
                       <li
                         v-for="(action, index) in item.actions"
@@ -204,48 +217,54 @@
                 :class="column.isCenteredContent ? 'psui-justify-center' : 'psui-justify-end'"
               >
                 <PsTooltip v-if="isSelectedRow(column,item)">
-                  <template v-slot:trigger>
+                  <template #trigger>
                     <PsIcon
                       icon="close"
                       size="16"
                       class="psui-cursor-pointer"
                       icon-classes="psui-text-blue-60 psui-leading-none psui-transition"
                       display="flex"
-                      @click.native="onCloseSelectRow(item,column)"
+                      @click="onCloseSelectRow(item,column)"
                     />
                   </template>
-                  <template v-slot:content>
+                  <template #content>
                     Close projections
                   </template>
                 </PsTooltip>
 
-                <PsTooltip v-else-if="column.hasProjections && !item.is_disabled && item.disable_projection_select !== true && layout != 'flexible' || 
-                  column.hasProjections && item.disable_projection_select != true && item.deep != 0 && layout == 'flexible'"
+                <PsTooltip
+                  v-else-if="column.hasProjections && !item.is_disabled && item.disable_projection_select !== true && layout != 'flexible' || 
+                    column.hasProjections && item.disable_projection_select != true && item.deep != 0 && layout == 'flexible'"
                 >
-                  <template v-slot:trigger>
+                  <template #trigger>
                     <PsIcon
                       icon="bar_chart"
                       size="16"
                       class="psui-cursor-pointer"
                       icon-classes="psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
                       display="flex"
-                      @click.native="onSelectRow(item, column, $event)"
+                      @click="onSelectRow(item, column, $event)"
                     />
                   </template>
-                  <template v-slot:content>
+                  <template #content>
                     Show projections in the chart
                   </template>
                 </PsTooltip>
-                <p class="ps-table-cell-value" v-if="!column.isSwitch">
+                <p
+                  class="ps-table-cell-value"
+                  v-if="!column.isSwitch"
+                >
                   <template v-if="column.hasScoreHelper">
                     <PsTooltip 
                       layout="blue"
                     >
-                      <template v-slot:trigger>
+                      <template #trigger>
                         {{ getItemContent(column, item) }}
                       </template>
-                      <template v-slot:content>
-                        <p class="psui-text-xsmall psui-font-bold">{{ column.hasScoreHelper.title }}</p>
+                      <template #content>
+                        <p class="psui-text-xsmall psui-font-bold">
+                          {{ column.hasScoreHelper.title }}
+                        </p>
                         {{ column.hasScoreHelper.description }}
                       </template>
                     </PsTooltip>
@@ -274,20 +293,20 @@
                     classes: 'layout-blue'
                   }"
                 >
-                <div class="flex psui-items-center psui-relative">
-                  <span
-                    v-if="item.has_flag" 
-                    class="psui-w-2 psui-h-2 psui-bg-yellow-20 psui-absolute psui--right-2 psui--top-2 psui-rounded-md"
-                  />
-                  <PsSwitch
-                    :disabled="item.data.is_disabled || item.is_excluded"
-                    :value="item.data[column.key]"
-                    :background-color="switchButtonBackgroundColor"
-                    class="psui-justify-self-center"
-                    :class="{'psui-pointer-events-none':preventClickOnSwitchButtons}"
-                    size="small"
-                    @change="$emit('switchButtonItemChanged', item, $event)"
-                  />
+                  <div class="flex psui-items-center psui-relative">
+                    <span
+                      v-if="item.has_flag" 
+                      class="psui-w-2 psui-h-2 psui-bg-yellow-20 psui-absolute psui--right-2 psui--top-2 psui-rounded-md"
+                    />
+                    <PsSwitch
+                      :disabled="item.data.is_disabled || item.is_excluded"
+                      :value="item.data[column.key]"
+                      :background-color="switchButtonBackgroundColor"
+                      class="psui-justify-self-center"
+                      :class="{'psui-pointer-events-none':preventClickOnSwitchButtons}"
+                      size="small"
+                      @change="$emit('switchButtonItemChanged', item, $event)"
+                    />
                   </div>
                 </div>
               </div>
@@ -307,7 +326,10 @@
                     :fill-width="getPsBarChartWidth(column.key, item.data[column.key])"
                   />
 
-                  <p class="ps-table-cell-value" v-else-if="item.data[column.key] != 0">
+                  <p
+                    class="ps-table-cell-value"
+                    v-else-if="item.data[column.key] != 0"
+                  >
                     {{ formatFunction(column.key, item.data[column.key], item.data) }}
                   </p>
                 </div>
@@ -316,8 +338,7 @@
           </template>
         </tr>
       </tbody>
-
-      <!-- <slot name="footer"></slot> -->
+      <slot name="footer" />
     </table>
   </div>
 </template>
@@ -511,7 +532,7 @@ export default {
       this.selectedRow = null
     })
   },
-  beforeDestroy() {
+  beforeUnmount() {
     eventBus.$off('resetPolicyImpactItemSelected')
     this.$refs.tableWrapper.removeEventListener('scroll', this.handleTableScroll)
   },

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

@@ -5,7 +5,9 @@
       :key="index"
     >
       <td>
-        <p class="title">{{ row.title }}</p>
+        <p class="title">
+          {{ row.title }}
+        </p>
       </td>
 
       <template 

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

@@ -3,7 +3,9 @@
     <tr>
       <th>
         <div v-if="firstColumnTitle">
-          <p class="title">{{ firstColumnTitle }}</p>
+          <p class="title">
+            {{ firstColumnTitle }}
+          </p>
         </div>
       </th>
       
@@ -13,14 +15,16 @@
         :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"
             :style="{ display: 'flex' }"
-            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="$emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -29,7 +33,12 @@
     <tr>
       <th>
         <div>
-          <p v-if="firstColumnDescription" class="description">{{ firstColumnDescription }}</p>
+          <p
+            v-if="firstColumnDescription"
+            class="description"
+          >
+            {{ firstColumnDescription }}
+          </p>
         </div>
       </th>
 
@@ -48,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.native="$emit('click-order-column', column)" 
+                @click="$emit('click-order-column', column)" 
               />
 
               <PsIcon
@@ -57,11 +66,21 @@
                 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)"
+                @click="$emit('click-column-helper', column, $event)"
               />
-              <p class="title" v-if="column.title">{{ column.title }}</p>
+              <p
+                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"
+            >
+              {{ column.description }}
+            </p>
           </div>
         </th>
       </template>

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

@@ -3,10 +3,14 @@
     <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>
       
@@ -16,14 +20,16 @@
         :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"
             :style="{ display: 'flex' }"
-            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="$emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -37,7 +43,12 @@
         >
           <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"
@@ -45,7 +56,7 @@
                 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)"
+                @click="$emit('click-column-helper', column, $event)"
               />
               
               <PsIcon
@@ -56,10 +67,15 @@
                 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)" 
+                @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>

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

@@ -7,14 +7,16 @@
         :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"
             :style="{ display: 'flex' }"
-            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
+            @click="$emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -33,7 +35,12 @@
             :data-index="columnGroupIndex"
           >
             <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"
@@ -41,7 +48,7 @@
                 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)"
+                @click="$emit('click-column-helper', column, $event)"
               />
               
               <PsIcon
@@ -52,10 +59,15 @@
                 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)" 
+                @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>

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

@@ -5,7 +5,9 @@
       :key="index"
     >
       <td>
-        <p class="title">{{ row.title }}</p>
+        <p class="title">
+          {{ row.title }}
+        </p>
       </td>
 
       <template 
@@ -15,7 +17,9 @@
           v-for="column of columnGroup.columns"
           :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
         >
-          <p class="ps-table-cell-value">{{ row.data[column.key] }}</p>
+          <p class="ps-table-cell-value">
+            {{ row.data[column.key] }}
+          </p>
         </td>
       </template>
     </tr>

package/src/components/tabs/PsTabHeader.vue

@@ -4,21 +4,24 @@
     :class="[getComponentClass, `layout-${layout}`]" 
     role="group"
   >
-		
     <template v-for="(item, index) in getItems">
-      <slot v-bind:item="item" >
-      <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
-        <template v-slot:trigger>
-          <button
-            :key="item[keyValue] + index"
-            type="button"
-            @click="selectTab(item)"
-            :class="getButtonClass(item)"
-          >
-                <span>{{ item[keyLabel] }}</span>              
-          </button>
-        </template>
-      </PsRichTooltip>
+      <slot :item="item">
+        <PsRichTooltip
+          v-if="item.tooltip"
+          :title="item.tooltip"
+          layout="blue"
+        >
+          <template #trigger>
+            <button
+              :key="item[keyValue] + index"
+              type="button"
+              @click="selectTab(item)"
+              :class="getButtonClass(item)"
+            >
+              <span>{{ item[keyLabel] }}</span>              
+            </button>
+          </template>
+        </PsRichTooltip>
         <button
           v-else
           :key="item[keyValue] + index"
@@ -26,11 +29,11 @@
           @click="selectTab(item)"
           :class="getButtonClass(item)"
         >
-              <span>{{ item[keyLabel] }}</span>              
+          <span>{{ item[keyLabel] }}</span>              
         </button>
       </slot>
     </template>
-	</div>
+  </div>
 </template>
 
 <script>

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,14 +1,22 @@
 <template>
-  <div @mouseenter="open" v-click-outside="close" ref="tooltip" class='psui-el-tooltip'>
-    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
-      <slot name="trigger"></slot>
+  <div
+    @mouseenter="open"
+    v-click-outside="close"
+    ref="tooltip"
+    class="psui-el-tooltip"
+  >
+    <div
+      ref="tooltiptrigger"
+      class="psui-el-tooltip-trigger"
+    >
+      <slot name="trigger" />
     </div>
 
-    <div class='psui-el-tooltip-wrapper'>
+    <div class="psui-el-tooltip-wrapper">
       <div
         role="menu"
         ref="dialog"
-        class='psui-el-tooltip-dialog'
+        class="psui-el-tooltip-dialog"
         :class="cssClass"
       >
         <div
@@ -16,9 +24,11 @@
           aria-orientation="vertical"
           :class="getComponentClass"
         >
-          <h2 v-if="title">{{ title}}</h2>
+          <h2 v-if="title">
+            {{ title }}
+          </h2>
           <div class="psui-el-tooltip-content-wrapper">
-            <slot name="content"></slot>
+            <slot name="content" />
             <button
               v-if="buttonText"
               @click="onClick"
@@ -89,7 +99,7 @@ export default {
   mounted() {
     document.addEventListener('resize', this.updatePosition)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('resize', this.updatePosition)
   },
   methods: {