@policystudio/policy-studio-ui-vue 1.1.90-beta.5 → 1.1.91

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

@@ -13,7 +13,7 @@
         { 'is-sticky': isSticky }
       ]"
     >
-      <slot name="header" />
+      <slot name="header"></slot>
 
       <tbody>
         <tr
@@ -40,6 +40,7 @@
           <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,13 +49,13 @@
                 }"
               >
                 <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="$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.native="$emit('removeOrAddButtonChange', item, $event)"
+                  />
               </div> 
               <div
                 class="psui-flex psui-items-center psui-space-x-3"
@@ -68,10 +69,10 @@
                   :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="onCollapse(item, $event)"
+                  @click.native="onCollapse(item, $event)"
                 />
 
                 <div v-if="item.is_appended">
@@ -87,25 +88,18 @@
                   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
                         v-if="item.has_helper"
-                        icon="info"
-                        size="14"
-                        class="psui-text-gray-40 psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
+                        icon="info_outline"
+                        size="16"
+                        class="psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
                         display="flex"
-                        @click="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
+                        @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                       />
                     </p>
                   </div>
@@ -123,12 +117,11 @@
 
                   <PsIcon
                     v-if="item.has_helper"
-                    icon="info"
-                    size="14"
-                    :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"
+                    icon="info_outline"
+                    size="16"
+                    class="psui-opacity-0 psui-text-gray-40 hover:psui-text-blue-60 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
                     display="flex"
-                    @click="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
+                    @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                   />
                 </p>
 
@@ -150,18 +143,18 @@
                   layout="gray"
                   class="psui-inline-flex psui-cursor-default"
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
-                  :ignore-dialog="getIgnoreDialogIcon(item)"
+                  :ignoreDialog="getIgnoreDialogIcon(item)"
                 >
-                  <template #trigger>
+                  <template v-slot: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"
+                      size="16"
                       display="flex"
-                      @click="executeCallback(item)"
+                      @click.native="executeCallback(item)"
                     />
                   </template>
-                  <template #content>
+                  <template v-slot:content>
                     <p
                       class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
                     >
@@ -176,7 +169,7 @@
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
                   position="custom"
                 >
-                  <template #dropdownTrigger>
+                  <template v-slot:dropdownTrigger>
                     <PsIcon 
                       icon="more_horiz"
                       size="18"
@@ -184,7 +177,7 @@
                       display="flex"
                     />
                   </template>
-                  <template #items>
+                  <template v-slot:items>
                     <ul class="psui-w-full psui-font-bold psui-my-3">
                       <li
                         v-for="(action, index) in item.actions"
@@ -217,54 +210,48 @@
                 :class="column.isCenteredContent ? 'psui-justify-center' : 'psui-justify-end'"
               >
                 <PsTooltip v-if="isSelectedRow(column,item)">
-                  <template #trigger>
+                  <template v-slot:trigger>
                     <PsIcon
                       icon="close"
                       size="16"
                       class="psui-cursor-pointer"
                       icon-classes="psui-text-blue-60 psui-leading-none psui-transition"
                       display="flex"
-                      @click="onCloseSelectRow(item,column)"
+                      @click.native="onCloseSelectRow(item,column)"
                     />
                   </template>
-                  <template #content>
+                  <template v-slot: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 #trigger>
+                  <template v-slot: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="onSelectRow(item, column, $event)"
+                      @click.native="onSelectRow(item, column, $event)"
                     />
                   </template>
-                  <template #content>
+                  <template v-slot: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 #trigger>
+                      <template v-slot:trigger>
                         {{ getItemContent(column, item) }}
                       </template>
-                      <template #content>
-                        <p class="psui-text-xsmall psui-font-bold">
-                          {{ column.hasScoreHelper.title }}
-                        </p>
+                      <template v-slot:content>
+                        <p class="psui-text-xsmall psui-font-bold">{{ column.hasScoreHelper.title }}</p>
                         {{ column.hasScoreHelper.description }}
                       </template>
                     </PsTooltip>
@@ -293,20 +280,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>
@@ -326,10 +313,7 @@
                     :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>
@@ -338,7 +322,7 @@
           </template>
         </tr>
       </tbody>
-      <slot name="footer" />
+      <slot name="footer"></slot>
     </table>
   </div>
 </template>
@@ -532,7 +516,7 @@ export default {
       this.selectedRow = null
     })
   },
-  beforeUnmount() {
+  beforeDestroy() {
     eventBus.$off('resetPolicyImpactItemSelected')
     this.$refs.tableWrapper.removeEventListener('scroll', this.handleTableScroll)
   },

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

@@ -5,9 +5,7 @@
       :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,9 +3,7 @@
     <tr>
       <th>
         <div v-if="firstColumnTitle">
-          <p class="title">
-            {{ firstColumnTitle }}
-          </p>
+          <p class="title">{{ firstColumnTitle }}</p>
         </div>
       </th>
       
@@ -15,16 +13,14 @@
         :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"
+            icon="info_outline"
+            size="16"
             class="psui-cursor-pointer"
-            icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+            icon-classes="psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
             :style="{ display: 'flex' }"
-            @click="$emit('click-column-group-helper', columnGroup, $event)"
+            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -33,12 +29,7 @@
     <tr>
       <th>
         <div>
-          <p
-            v-if="firstColumnDescription"
-            class="description"
-          >
-            {{ firstColumnDescription }}
-          </p>
+          <p v-if="firstColumnDescription" class="description">{{ firstColumnDescription }}</p>
         </div>
       </th>
 
@@ -57,30 +48,20 @@
                 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.native="$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"
+                icon-classes="psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-column-helper', column, $event)"
+                @click.native="$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,14 +3,10 @@
     <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>
       
@@ -20,16 +16,14 @@
         :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="$emit('click-column-group-helper', columnGroup, $event)"
+            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -43,12 +37,7 @@
         >
           <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"
@@ -56,7 +45,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.native="$emit('click-column-helper', column, $event)"
               />
               
               <PsIcon
@@ -67,15 +56,10 @@
                 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.native="$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,16 +7,14 @@
         :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"
+            icon="info_outline"
+            size="16"
             class="psui-cursor-pointer"
-            icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+            icon-classes="psui-text-blue-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
             :style="{ display: 'flex' }"
-            @click="$emit('click-column-group-helper', columnGroup, $event)"
+            @click.native="$emit('click-column-group-helper', columnGroup, $event)"
           />
         </div>
       </th>
@@ -35,20 +33,15 @@
             :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"
+                icon="info_outline"
                 size="16"
                 class="psui-cursor-pointer helper"
-                icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
+                icon-classes="psui-text-gray-40 hover:psui-text-blue-60 psui-opacity-0 psui-leading-none psui-transition"
                 :style="{ display: 'flex' }"
-                @click="$emit('click-column-helper', column, $event)"
+                @click.native="$emit('click-column-helper', column, $event)"
               />
               
               <PsIcon
@@ -59,15 +52,10 @@
                 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.native="$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,9 +5,7 @@
       :key="index"
     >
       <td>
-        <p class="title">
-          {{ row.title }}
-        </p>
+        <p class="title">{{ row.title }}</p>
       </td>
 
       <template 
@@ -17,9 +15,7 @@
           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,24 +4,21 @@
     :class="[getComponentClass, `layout-${layout}`]" 
     role="group"
   >
+		
     <template v-for="(item, index) in getItems">
-      <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>
+      <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>
         <button
           v-else
           :key="item[keyValue] + index"
@@ -29,11 +26,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,22 +1,14 @@
 <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" />
+  <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>
 
-    <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
@@ -24,11 +16,9 @@
           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 name="content"></slot>
             <button
               v-if="buttonText"
               @click="onClick"
@@ -99,7 +89,7 @@ export default {
   mounted() {
     document.addEventListener('resize', this.updatePosition)
   },
-  beforeUnmount() {
+  beforeDestroy() {
     document.removeEventListener('resize', this.updatePosition)
   },
   methods: {

package/src/components/tooltip/PsRichTooltip.vue

@@ -1,17 +1,10 @@
 <template>
-  <PsTooltip
-    :layout="layout"
-    :title="title"
-    :css-class="cssClass"
-    :position="position"
-    :ignore-dialog="ignoreDialog"
-    :custom-position="customPosition"
-  >
-    <template #trigger>
-      <slot name="trigger" />
+  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass" :position="position" :ignoreDialog="ignoreDialog" :customPosition="customPosition">
+    <template v-slot:trigger>
+      <slot name="trigger"></slot>
     </template>
-    <template #content>
-      <slot name="content" />
+    <template v-slot:content>
+      <slot name="content"></slot>
     </template>
   </PsTooltip>
 </template>