@policystudio/policy-studio-ui-vue 1.1.9 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.9",
+  "version": "1.1.13",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -34,6 +34,7 @@
 @import './components/PsTagScope.scss';
 @import './components/PsBarChart.scss';
 @import './components/PsSimpleAlert.scss';
+@import './components/PsBreadcrumb.scss';
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";

package/src/assets/scss/components/PsBreadcrumb.scss

@@ -0,0 +1,20 @@
+@layer components{
+
+  .psui-el-breadcrumb {
+    ol {
+      @apply psui-flex psui-items-center;
+
+      li {
+        + li {
+          &::before {
+            @apply psui-float-left psui-inline-block psui-font-normal psui-mr-0.5;
+            content: "chevron_right";
+            font-family: 'Material Icons Round';
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+}

package/src/assets/scss/components/PsDateCardInfo.scss

@@ -1,13 +1,14 @@
 @layer components {
-    .psui-el-date-card {
-        @apply psui-flex psui-flex-col psui-items-center psui-bg-blue-60 psui-text-white;
-        padding: 8px 11px;
-        border-radius:3px;
-        width: fit-content;
-        height: fit-content;
-        
-        &-day {
-            @apply psui-font-bold;    
-        }
+  .psui-el-date-card {
+    @apply psui-flex psui-flex-col psui-items-center psui-py-2 psui-bg-blue-60 psui-text-white psui-text-small psui-w-10;
+    border-radius: 3px;
+
+    &-month {
+      @apply psui-mb-1;
     }
+    
+    &-day {
+      @apply psui-font-bold;
+    }
+  }
 }

package/src/assets/scss/components/PsTableResults.scss

@@ -89,6 +89,7 @@
             @apply psui-pl-8 psui-text-gray-80 psui-h-10 psui-text-right psui-text-small;
             padding-top: 11px;
             padding-bottom: 11px;
+            min-height: 41.5px;
   
             > div {
               @apply psui-flex psui-items-center;
@@ -119,6 +120,14 @@
               padding-bottom: 8px;
             }
           }
+
+          &.is-active {
+            @apply psui-bg-gray-10;
+
+            td:first-child {
+              @apply psui-bg-gray-10;
+            }
+          }
         }
       }
     }

package/src/components/badges-and-tags/PsDateCardInfo.vue

@@ -20,7 +20,7 @@ export default {
   },
   computed: {
     getMonthFromDate() {
-      return (new Date(this.date))?.toLocaleString('default', { month: 'short' }) 
+      return (new Date(this.date))?.toLocaleString('default', { month: 'short' }).replace('.', '') 
     },
     getDayFromDate() {
       return (new Date(this.date))?.toLocaleString('default', { day: '2-digit' }) 

package/src/components/navigations/PsBreadcrumb.vue

@@ -0,0 +1,78 @@
+<template>  
+  <nav
+    v-if="items.length > 0"
+    aria-label="breadcrumb"
+    class="psui-el-breadcrumb"
+  >
+    <ol class="psui-space-x-0.5">
+      <li
+        v-for="item in items"
+        :key="item.title"
+        :class="liClass"
+      >
+        <router-link
+          v-if="item.route && !item.isReset"
+          :to="item.route"
+          @click.native="onNavigate(item)"
+        >
+          {{ item.title }}
+        </router-link>
+
+        <span
+          v-else-if="item.isReset"
+          class="psui-flex psui-items-center psui-cursor-pointer psui-text-blue-60 psui-font-bold"
+          @click="$emit('reset-state', item)"
+        >
+          <PsIcon
+            size="18"
+            icon="arrow_back"
+            icon-classes="psui-text-blue-60 psui-leading-none psui-transition psui-mr-2"
+            :style="{ display: 'flex' }"
+          />
+          {{ item.title }}
+        </span>
+
+        <span 
+          v-else 
+          :title="item.title"
+        >
+          {{ item.title }}
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import PsIcon from '../ui/PsIcon.vue'
+export default {
+  name: 'PsBreadcrumb',
+  components: { PsIcon },
+  props: {
+    /**
+     * It sets the items which will be rendered.
+    */
+    items: {
+      type: [Array, Boolean],
+    },
+    /**
+     * It sets the li style.
+    */
+    liClass: {
+      type: String,
+      default: 'psui-text-small psui-text-gray-60'
+    }
+  },
+  methods: {
+    onNavigate(item) {       
+      if (item.route === this.$route.path) {
+        this.$parent.closeDrawer()
+      }
+    },
+  }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -22,10 +22,12 @@
               'is-disabled' : item.is_disabled,
               'is-first' : item.deep == 0,
               'psui-hidden' : checkRowIsCollapsed(item),
-              'is-last' : item.is_last
+              'is-last' : item.is_last,
+              'is-active' : selectedRow == item.id,
             },
-            `type-${item.type}`
+            `${item.type}`
           ]"
+          :id=" item.id"
           @mouseenter="onRowHover(index)"
           @mouseleave="onRowHover(false)"
         >
@@ -169,15 +171,37 @@
                 v-if="layout != 'comparison'"
                 class="psui-space-x-2 psui-show-childrens-on-hover"
               >
-                <PsIcon
-                  v-if="column.hasProjections && !item.is_disabled"
-                  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('policy-selected', { item, column })"
-                />
+                <PsTooltip v-if="column.hasProjections && !item.is_disabled && selectedRow != item.id">
+                  <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"
+                      :style="{ display: 'flex' }"
+                      @click.native="onSelectRow(item, column)"
+                    />
+                  </template>
+                  <template v-slot:content>
+                    Show projections in the chart
+                  </template>
+                </PsTooltip>
+
+                <PsTooltip v-if="column.hasProjections && !item.is_disabled && selectedRow == item.id && columnSelectedKey == column.key">
+                  <template v-slot:trigger>
+                    <PsIcon
+                      icon="close"
+                      size="16"
+                      class="psui-cursor-pointer"
+                      icon-classes="psui-text-blue-60 psui-leading-none psui-transition"
+                      :style="{ display: 'flex' }"
+                      @click.native="onCloseSelectRow(item)"
+                    />
+                  </template>
+                  <template v-slot:content>
+                    Close projections
+                  </template>
+                </PsTooltip>
 
                 <p v-if="formatFunction && !item.is_disabled">
                   {{ formatFunction(column.key, item.data[column.key], item.data) }}
@@ -240,12 +264,20 @@ import PsIcon from '../ui/PsIcon.vue'
 import PsProgressBar from '../badges-and-tags/PsProgressBar.vue'
 import PsTagScope from '../badges-and-tags/PsTagScope.vue'
 import PsBarChart from '../data-graphics/PsBarChart.vue'
+import PsTooltip from '../tooltip/PsTooltip.vue'
 
 export const tableLayout = ['results', 'comparison']
 
 export default {
   name: 'PsTableResults',
-  components: { PsProgressBar, PsIcon, PsRichTooltip, PsTagScope, PsBarChart },
+  components: { 
+    PsProgressBar, 
+    PsIcon, 
+    PsRichTooltip, 
+    PsTagScope, 
+    PsBarChart, 
+    PsTooltip 
+  },
   props: {
     /**
      * It sets the layout of the table. eg: results or comparison 
@@ -361,7 +393,10 @@ export default {
   },
   data: () => ({
     collapsedRows : [],
-    isHoveringRow: false
+    isHoveringRow : false,
+    selectedRow : null,
+    policyItemSelected: null,
+    columnSelectedKey : null
   }),
   computed: {
     getRows() {
@@ -473,6 +508,17 @@ export default {
     getStatusClass(item) {
       return this.checkRowIsVisible(item) ? 'opened' : 'closed'
     },
+    onSelectRow(item, column) {
+      this.selectedRow = item.id
+      this.policyItemSelected = { ...item }
+      delete this.policyItemSelected.items
+      this.columnSelectedKey = column.key
+      this.$emit('policy-selected', { item: item, column: column })
+    },
+    onCloseSelectRow(item) {
+      this.$eventBus.$emit('setPolicyItemSelected', { item, columnSelectedKey: 'forecast_emissions_savings' })
+      this.selectedRow = null
+    }
   },
 }
 </script>

package/src/index.js

@@ -45,6 +45,7 @@ import PsDateCardInfo from './components/badges-and-tags/PsDateCardInfo.vue'
 import PsTagScope from './components/badges-and-tags/PsTagScope.vue'
 import PsBarChart from './components/data-graphics/PsBarChart.vue'
 import PsSimpleAlert from './components/notifications/PsSimpleAlert.vue'
+import PsBreadcrumb from './components/navigations/PsBreadcrumb.vue'
 
 export default {
   install(Vue) {
@@ -90,6 +91,7 @@ export default {
     Vue.component('PsTagScope',PsTagScope)
     Vue.component('PsBarChart',PsBarChart)
     Vue.component('PsSimpleAlert',PsSimpleAlert)
+    Vue.component('PsBreadcrumb', PsBreadcrumb)
     
     Vue.directive('click-outside', {
       bind: function (el, binding, vnode) {
@@ -151,6 +153,7 @@ export {
   PsDateCardInfo,
   PsTagScope,
   PsBarChart,
-  PsSimpleAlert
+  PsSimpleAlert,
+  PsBreadcrumb
 }
 

package/src/stories/Breadcrumb.stories.js

@@ -0,0 +1,25 @@
+import PsBreadcrumb from '../components/navigations/PsBreadcrumb.vue'
+export default {
+  title: 'Navigations/Breadcrumb',
+  component: PsBreadcrumb,
+  argTypes: {},
+}
+const items = [
+  { title: '1st level', route: '' },
+  { title: 'Big name that needs to be shortened', route: '#' },
+  { title: '3rd level', route: '' },
+  { title: '4th level', route: '' },
+]
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsBreadcrumb },
+  template: `
+    <PsBreadcrumb v-bind="$props" />
+  `,
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  items: items,
+}

package/src/stories/DateCardInfo.stories.js

@@ -20,5 +20,5 @@ export default {
 export const Default = Template.bind({})
 
 Default.args = {
-  date: new Date()
+  date: '2021/02/23'
 }

package/tailwind.config.js

@@ -48,7 +48,7 @@ module.exports = {
       transparent: 'transparent',
     },
     fontFamily: {
-      sans: ['Lato'],
+      sans: ['Lato', 'sans-serif'],
     },
     fontSize: {
       big: ['16px', '130%'],
@@ -105,6 +105,15 @@ module.exports = {
       },
       zIndex: {
         '15': '15',
+      },
+      space: {
+        '0.5': '0.125rem',
+      },
+      margin: {
+        '0.5': '0.125rem',
+      },
+      padding: {
+        '0.5': '0.125rem',
       }
     },
   },
@@ -137,6 +146,8 @@ module.exports = {
       'hover',
       'checked'
     ],
+    space: ['responsive', 'hover', 'focus', 'first'],
+    padding: ['responsive', 'hover', 'focus', 'first'],
     extend: {},
   },
   plugins: [],