@policystudio/policy-studio-ui-vue 1.1.20 → 1.1.23

package/dist/css/psui_styles.css

@@ -18194,6 +18194,13 @@ video {
   left: auto;
 }
 
+.psui--inset-1{
+  top: -1rem;
+  right: -1rem;
+  bottom: -1rem;
+  left: -1rem;
+}
+
 .psui-inset-y-0{
   top: 0;
   bottom: 0;
@@ -18214,6 +18221,16 @@ video {
   left: auto;
 }
 
+.psui--inset-y-1{
+  top: -1rem;
+  bottom: -1rem;
+}
+
+.psui--inset-x-1{
+  right: -1rem;
+  left: -1rem;
+}
+
 .psui-top-0{
   top: 0;
 }
@@ -18246,6 +18263,22 @@ video {
   left: auto;
 }
 
+.psui--top-1{
+  top: -1rem;
+}
+
+.psui--right-1{
+  right: -1rem;
+}
+
+.psui--bottom-1{
+  bottom: -1rem;
+}
+
+.psui--left-1{
+  left: -1rem;
+}
+
 .psui-resize-none{
   resize: none;
 }
@@ -35599,6 +35632,13 @@ html {
     left: auto;
   }
 
+  .sm\:psui--inset-1{
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
+  }
+
   .sm\:psui-inset-y-0{
     top: 0;
     bottom: 0;
@@ -35619,6 +35659,16 @@ html {
     left: auto;
   }
 
+  .sm\:psui--inset-y-1{
+    top: -1rem;
+    bottom: -1rem;
+  }
+
+  .sm\:psui--inset-x-1{
+    right: -1rem;
+    left: -1rem;
+  }
+
   .sm\:psui-top-0{
     top: 0;
   }
@@ -35651,6 +35701,22 @@ html {
     left: auto;
   }
 
+  .sm\:psui--top-1{
+    top: -1rem;
+  }
+
+  .sm\:psui--right-1{
+    right: -1rem;
+  }
+
+  .sm\:psui--bottom-1{
+    bottom: -1rem;
+  }
+
+  .sm\:psui--left-1{
+    left: -1rem;
+  }
+
   .sm\:psui-resize-none{
     resize: none;
   }
@@ -52794,6 +52860,13 @@ html {
     left: auto;
   }
 
+  .md\:psui--inset-1{
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
+  }
+
   .md\:psui-inset-y-0{
     top: 0;
     bottom: 0;
@@ -52814,6 +52887,16 @@ html {
     left: auto;
   }
 
+  .md\:psui--inset-y-1{
+    top: -1rem;
+    bottom: -1rem;
+  }
+
+  .md\:psui--inset-x-1{
+    right: -1rem;
+    left: -1rem;
+  }
+
   .md\:psui-top-0{
     top: 0;
   }
@@ -52846,6 +52929,22 @@ html {
     left: auto;
   }
 
+  .md\:psui--top-1{
+    top: -1rem;
+  }
+
+  .md\:psui--right-1{
+    right: -1rem;
+  }
+
+  .md\:psui--bottom-1{
+    bottom: -1rem;
+  }
+
+  .md\:psui--left-1{
+    left: -1rem;
+  }
+
   .md\:psui-resize-none{
     resize: none;
   }
@@ -69989,6 +70088,13 @@ html {
     left: auto;
   }
 
+  .lg\:psui--inset-1{
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
+  }
+
   .lg\:psui-inset-y-0{
     top: 0;
     bottom: 0;
@@ -70009,6 +70115,16 @@ html {
     left: auto;
   }
 
+  .lg\:psui--inset-y-1{
+    top: -1rem;
+    bottom: -1rem;
+  }
+
+  .lg\:psui--inset-x-1{
+    right: -1rem;
+    left: -1rem;
+  }
+
   .lg\:psui-top-0{
     top: 0;
   }
@@ -70041,6 +70157,22 @@ html {
     left: auto;
   }
 
+  .lg\:psui--top-1{
+    top: -1rem;
+  }
+
+  .lg\:psui--right-1{
+    right: -1rem;
+  }
+
+  .lg\:psui--bottom-1{
+    bottom: -1rem;
+  }
+
+  .lg\:psui--left-1{
+    left: -1rem;
+  }
+
   .lg\:psui-resize-none{
     resize: none;
   }
@@ -87184,6 +87316,13 @@ html {
     left: auto;
   }
 
+  .xl\:psui--inset-1{
+    top: -1rem;
+    right: -1rem;
+    bottom: -1rem;
+    left: -1rem;
+  }
+
   .xl\:psui-inset-y-0{
     top: 0;
     bottom: 0;
@@ -87204,6 +87343,16 @@ html {
     left: auto;
   }
 
+  .xl\:psui--inset-y-1{
+    top: -1rem;
+    bottom: -1rem;
+  }
+
+  .xl\:psui--inset-x-1{
+    right: -1rem;
+    left: -1rem;
+  }
+
   .xl\:psui-top-0{
     top: 0;
   }
@@ -87236,6 +87385,22 @@ html {
     left: auto;
   }
 
+  .xl\:psui--top-1{
+    top: -1rem;
+  }
+
+  .xl\:psui--right-1{
+    right: -1rem;
+  }
+
+  .xl\:psui--bottom-1{
+    bottom: -1rem;
+  }
+
+  .xl\:psui--left-1{
+    left: -1rem;
+  }
+
   .xl\:psui-resize-none{
     resize: none;
   }

package/package.json

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

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

@@ -31,11 +31,11 @@
           @mouseenter="onRowHover(index)"
           @mouseleave="onRowHover(false)"
         >
-          <td>
-            <div class="psui-flex psui-justify-between">
+          <td :style="`background-color:${getBackgroundColor(item.background_color)};`">
+            <div class="psui-flex psui-justify-between psui-relative">
               <div
                 class="psui-flex psui-items-center actions psui-space-x-3"
-                :style="{ paddingLeft: `${item.deep * 16}px` }"
+                :style="{paddingLeft: `${item.deep * 16}px`}"
               >
                 <PsIcon
                   v-if="!item.last_deep || item.type === 'total'"
@@ -47,16 +47,19 @@
                   :class="[checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90', { 'psui-pointer-events-none' : item.is_disabled }]"
                   @click.native="onCollapse(item)"
                 />
-              
+
                 <PsRichTooltip 
-                  v-if="item.is_disabled"
+                  v-if="item.is_disabled || item.tooltip_text"
                   layout="gray"
                   position="top"
                   class="psui-inline-flex psui-cursor-default sticky"
                   :class="{ 'is-last-deep' : item.last_deep }"
                 >
                   <template v-slot:trigger>
+                    <div class="flex psui-items-center psui-relative ">
+                    <PsIcon v-if="item.is_disabled" 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">
+                      
                       {{ item.title }}
 
                       <PsIcon
@@ -68,16 +71,17 @@
                         @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                       />
                     </p>
+                  </div>
                   </template>
                   <template v-slot:content>
-                    <p
-                      v-if="item.disabled_text"
+                    <p 
+                      v-if="item.tooltip_text || item.is_disabled" 
                       class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
                     >
-                      {{ item.disabled_text }}
+                      {{ item.tooltip_text }}
                     </p>
                     <p
-                      v-else
+                      v-else-if="item.is_disabled"
                       class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
                     >
                       {{ item.title }} buildings are <br>not allowed.
@@ -98,7 +102,8 @@
                     v-if="item.has_helper"
                     icon="info"
                     size="14"
-                    class="psui-text-blue-60 psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
+                    :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}` })"
                   />
@@ -143,6 +148,7 @@
                 </PsRichTooltip>
 
                 <PsDropdown
+                  ref="PSDropdown"
                   v-if="shouldShowDropdown(item)"
                   :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
                   position="custom"
@@ -156,7 +162,7 @@
                     />
                   </template>
                   <template v-slot:items>
-                    <ul class="psui-w-full psui-font-bold psui-my-3">        
+                    <ul class="psui-w-full psui-font-bold psui-my-3">
                       <li
                         v-for="(action, index) in item.actions"
                         :key="index"
@@ -170,13 +176,15 @@
                   </template>
                 </PsDropdown>
               </div>
-            </div>
+            </div>              
           </td>
 
           <template v-for="(columnGroup, indexColumn) of columnGroups">
             <td
+              :style="`background-color:${getBackgroundColor(item.background_color)};`"
               v-for="column of columnGroup.columns"
               :key="indexColumn + '-' + columnGroup.key + '-' + column.key"
+              
             >
               <div 
                 v-if="layout != 'comparison'"
@@ -276,6 +284,7 @@ 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'
+import tailwindConfig from '../../../tailwind.config'
 
 export const tableLayout = ['results', 'comparison']
 
@@ -416,6 +425,7 @@ export default {
         const item = this.summaryData[index]
         this.addRow(item, 0, `${index}`, rows)
       }
+
       return rows
     },
   },
@@ -522,6 +532,11 @@ export default {
     executeCallback(item, action) {
       if(item?.actions?.length === 1) item.actions[0].callback(item)
       else action?.callback(item)
+
+      Object.values(this.$refs).flat(Infinity).forEach(( component => {
+        if(component?.$options?._componentTag == 'PsDropdown'){
+          component.close()
+      }}))
     },
     getStatusClass(item) {
       return this.checkRowIsVisible(item) ? 'opened' : 'closed'
@@ -541,6 +556,12 @@ export default {
         return this.selectedRow === item.id && this.columnSelectedKey == column.key
       }
       return column.hasProjections && !item.is_disabled && this.selectedRow == item.id && this.columnSelectedKey == column.key
+    },
+    getBackgroundColor(value){
+      if(value && value.includes('psui-bg-')) {
+        return tailwindConfig.theme.colors[value.replace('psui-bg-', '')]
+      }
+      return value || '#ffffff' 
     }
   },
 }

package/tailwind.config.js

@@ -114,6 +114,9 @@ module.exports = {
       },
       padding: {
         '0.5': '0.125rem',
+      },
+      inset:{
+        '-1': '-1rem',
       }
     },
   },