@policystudio/policy-studio-ui-vue 1.0.69 → 1.0.71

package/dist/css/psui_styles.css

@@ -18578,7 +18578,6 @@ html {
           padding-left: 0;
           padding-right: 2rem;
           text-align: left;
-          display: block;
           background-color: #ffffff ;
           position: sticky;
           z-index: 10;
@@ -18639,6 +18638,13 @@ html {
           align-items: center;
         }
 
+.psui-el-table-results tbody tr td .actions {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          position: relative;
+        }
+
 .psui-el-table-results tbody tr td:not(:first-child) > div {
             justify-content: flex-end;
           }

package/package.json

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

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

@@ -22,7 +22,7 @@
           }
 
           &:first-child {
-            @apply .psui-pl-0 .psui-pr-8 .psui-text-left .psui-block .psui-bg-white .psui-sticky .psui-z-10 .psui-left-0;
+            @apply .psui-pl-0 .psui-pr-8 .psui-text-left .psui-bg-white .psui-sticky .psui-z-10 .psui-left-0;
             box-shadow: inset -1px 0px 0px #EBEEF0;
             min-width: 300px;
 
@@ -66,6 +66,10 @@
             @apply .psui-flex .psui-items-center;
           }
 
+          .actions {
+            @apply .psui-flex .psui-items-center .psui-h-full .psui-relative;
+          }
+
           &:not(:first-child) {
             > div {
               @apply .psui-justify-end;

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

@@ -7,7 +7,7 @@
     <div class="psui-el-progress-bar-bg" />
     <div
       class="psui-el-progress-bar-value" 
-      :class="[getBg, {'rounded-tr-full rounded-br-full': getProgressWidth === '100%'}]" 
+      :class="[getBg, {'rounded-tr-full rounded-br-full': getProgressWidth === '100%'}]"
       :style="{ width: getProgressWidth }"
     />
     <div
@@ -37,6 +37,10 @@ export default {
       type: Number,
       default: 1
     },
+    forceBreakEven: {
+      Boolean,
+      default: false
+    },
     value: {
       type: [String, Number],
       default: null
@@ -63,12 +67,14 @@ export default {
       return `${this.getProgress}%`
     },
     getIsBreakEven() {
+      if ( this.forceBreakEven ) return true
       return this.value >= this.breakEven ? true : false
     },
     getBreakEvenLeft() {
       return `${(100 / this.getVolume) * this.breakEven}%`
     },
     getBg() {
+      if ( this.forceBreakEven ) return this.positiveBg
       return this.getIsBreakEven ? this.positiveBg : this.negativeBg
     }
   }

package/src/components/forms/PsInput.vue

@@ -18,6 +18,8 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :value="value"
+        :min="minValue"
+        :max="maxValue"
         @focus="onInputFocus"
         @blur="onInputBlur"
         @input="$emit('input', $event)"
@@ -105,6 +107,12 @@ export default {
       type: Boolean,
       default: false
     },
+    minValue: {
+      type: Number
+    },
+    maxValue: {
+      type: Number
+    }
 	},
   data: () => ({
     isFocus: false,

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

@@ -1,6 +1,9 @@
 <template>
   <div class="psui-w-full psui-whitespace-no-wrap psui-flex psui-overflow-auto">
-    <table class="psui-el-table-results">
+    <table 
+      ref="table"
+      class="psui-el-table-results"
+    >
       <slot name="header"></slot>
 
       <!-- <slot name="body"></slot> -->
@@ -11,8 +14,7 @@
           :key="index"
           :class="[
             {
-              'first:psui-font-bold psui-text-gray-80' : item.type == 'total',
-              'psui-text-blue-80' : item.type == 'vintage',
+              'psui-font-bold psui-text-gray-80' : item.type == 'total',
               'psui-hidden' : checkIndexIsHidden(item),
               'cell-pb-20 psui-text-red-70' : item.type == 'vintage' && !checkItemIsVisible(item) || item.type == 'study_data' && item.is_last,
               'is-last' : item.is_last
@@ -22,19 +24,42 @@
         >
           <td>
             <div 
-              class="actions psui-flex psui-items-center psui-space-x-3"
+              class="actions psui-space-x-3"
+              :class="{ 'psui-ml-8' : item.type == 'study_data' }"
               :style="{ paddingLeft: `${item.deep * 20}px` }"
             >
               <PsIcon
-                v-if="isCollapsible && item.deep > 0 && !item.last_deep || item.type === 'total'" 
-                :icon="checkItemIsVisible(item) ? 'expand_more' : 'chevron_right'"
+                v-if="item.deep > 0 && !item.last_deep || item.type === 'total'" 
+                icon="expand_more"
                 size="24"
-                class="psui-cursor-pointer"
-                icon-classes="psui-text-gray-40 psui-leading-none psui-transition"
+                class="psui-cursor-pointer psui-transform psui-transition"
+                icon-classes="psui-text-gray-40 psui-leading-none"
                 :style="{ display: 'flex' }"
-                @click="$emit('collapse-row', item)"
+                :class="checkItemIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90'"
+                @click.native="$emit('collapse-row', item)"
               />
-              <p class="title">{{ item.title }}</p>
+              <PsRichTooltip 
+                v-if="item.is_disabled"
+                layout="gray"
+                position="top"
+                class="psui-inline-flex psui-cursor-default"
+              >
+                <template v-slot:trigger>
+                  <p class="title psui-text-gray-50">{{ item.title }}</p>
+                </template>
+                <template v-slot:content>
+                  <p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">
+                    {{ item.title }} buildings are <br>not allowed.
+                  </p>
+                </template>
+              </PsRichTooltip>
+              <p
+                v-else
+                class="title"
+                :class="{ 'psui-font-bold' : item.type == 'total' }"
+              >
+                {{ item.title }}
+              </p>
             </div>
           </td>
 
@@ -47,20 +72,28 @@
             >
               <div class="psui-space-x-2 psui-show-childrens-on-hover">
                 <PsIcon
-                  v-if="column.hasProjections"
+                  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('open-projections', item)"
+                  @click.native="$emit('policy-selected', { item, column })"
                 />
 
-                <p>{{ item.data[column.key].toFixed(2) }}</p>
+                <p v-if="formatFunction && !item.is_disabled">{{ formatFunction(column.key, item.data[column.key], item.data) }}</p>
+                <p 
+                  v-else-if="item.is_disabled"
+                  class="psui-text-gray-50"
+                >
+                  --
+                </p>
+                <p v-else>{{ item.data[column.key] }}</p>
 
                 <PsProgressBar
                   v-if="column.isChart"
-                  :value="item.data[column.key]"
+                  :value="!item.is_disabled ? item.data[column.key] : 0"
+                  :force-break-even="item.is_disabled ? true : false"
                 />
               </div>
             </td>
@@ -74,12 +107,31 @@
 </template>
 
 <script>
+import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
 import PsIcon from '../ui/PsIcon.vue'
 import PsProgressBar from '../badges-and-tags/PsProgressBar.vue'
 export default {
   name: 'PsTableResults',
-  components: { PsProgressBar, PsIcon },
+  components: { PsProgressBar, PsIcon, PsRichTooltip },
   props: {
+    /**
+    * It sets the format function to display values.
+    */
+    formatFunction: {
+      type: Function
+    },
+    /**
+    * It sets the hidden items.
+    */
+    hiddenItems: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /**
+    * It sets the hidden items index.
+    */
     itemsHiddenIndexes: {
       type: Array,
       default() {
@@ -127,10 +179,6 @@ export default {
       type: String,
       default: 'psui-text-gray-60'
     },
-    testValue: {
-      type: String,
-      default: ''
-    }
   },
   computed: {
     cssAlign() {
@@ -163,7 +211,7 @@ export default {
       }
     },
     checkItemIsVisible(item) {
-      return this.itemsHiddenIndexes.indexOf(item) < 0
+      return this.hiddenItems.indexOf(item) < 0
     },
     checkIndexIsHidden(item) {
       let isHidden = false
@@ -184,7 +232,15 @@ export default {
         this.itemsHiddenIndexes.push(item)
       }
       this.$emit('click')
-    }
+    },
+    progressBarBreakEven(columnKey) {
+      const data = this.formatFunction(columnKey, this.item.data[columnKey], this.item.data)
+      console.log('data:', data)
+      if (Number(data) === 0 || data === '--') {
+        return this.item.data[columnKey]
+      }
+      return 1
+    },
   }
 }
 </script>