@policystudio/policy-studio-ui-vue 1.1.2 → 1.1.4

package/dist/css/psui_styles.css

@@ -1711,6 +1711,7 @@ video {
     color: rgba(121, 132, 144, var(--text-opacity));
     font-size: 16px;
     line-height: 130%;
+    margin-top: 0.25rem;
   }
 
 .psui-el-climate-zone-badge {
@@ -2077,7 +2078,7 @@ video {
 
 .psui-el-table-results tbody tr td:first-child {
           padding-left: 0;
-          padding-right: 2rem;
+          padding-right: 0.5rem;
           text-align: left;
           display: block;
           background-color: #ffffff ;

package/package.json

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

package/src/assets/scss/components/PsChartLegend.scss

@@ -18,7 +18,7 @@
     }
 
     &-percentage {
-      @apply psui-text-gray-50 psui-text-p;
+      @apply psui-text-gray-50 psui-text-p psui-mt-1;
     }
   }
 

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

@@ -112,7 +112,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-2 psui-text-left psui-block psui-bg-white psui-sticky psui-z-10 psui-left-0;
             box-shadow: inset -1px 0px 0px #EBEEF0;
             padding-top: 8px;
             padding-bottom: 8px;

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

@@ -1,12 +1,17 @@
 <template>
   <div class="psui-el-chart-legend">
     <div class="psui-flex psui-flex-shrink-0">
-      <div class="psui-el-chart-legend-dot" :style="dotColor"></div>
+      <div class="psui-el-chart-legend-dot" :style="dotColor"/>
     </div>
-    <div class="psui-flex-grow-1">
+    <div class="psui-flex-grow-1 flex psui-flex-col">
       <div class="psui-el-chart-legend-text">{{ text }}</div>
-      <span v-if="this.total" class="psui-el-chart-legend-total">{{ total }}</span>
-      <span class="psui-el-chart-legend-percentage" v-if="percentage"><span class="psui-text-gray-30" v-if="total && percentage"> | </span>{{ percentage }}%</span>
+      <div class="flex psui-items-center psui-flex-shrink-0 psui-gap-1">
+        <span v-if="this.total" class="psui-el-chart-legend-total">{{ total }}</span>
+        <span class="psui-text-gray-30" v-if="total && percentage"> | </span>
+        <span class="psui-el-chart-legend-percentage" v-if="percentage">
+          {{ percentage }}%
+        </span>
+      </div>
     </div>
   </div>
 </template>

package/src/components/forms/PsDropdown.vue

@@ -77,6 +77,20 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * It sets the vertical position.
+     */
+    position: {
+      type: String,
+      validator: (value)=> ['bottom','top', 'custom'].includes(value)
+    },
+    /**
+     * It sets the custom positions.
+     */
+    customPosition: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -139,6 +153,16 @@ export default {
         PSDropdownDialog.style.left = `${rectTrigger.x}px`
       }
 
+      if(this.position == 'top') {
+        PSDropdownDialog.style.top = `${(rectTrigger.y - rectDialog.height) - 10}px`
+      }
+
+      if(this.position == 'custom') {
+        PSDropdownDialog.style = this.customPosition
+        PSDropdownDialog.style.display = 'block'
+        PSDropdownDialog.style.position = 'absolute'
+      }
+
       if (rectTrigger.top < 10) {
         this.close()
         console.warn('The dropdown are too close from the top of the page')
@@ -152,8 +176,10 @@ export default {
     open() {
       this.$emit('open')
       this.show = true
-      this.$refs.PSDropdownDialog.style.opacity = 0
-      this.$refs.PSDropdownDialog.style.display = 'block'
+      if(this.$refs.PSDropdownDialog){
+        this.$refs.PSDropdownDialog.style.opacity = 0
+        this.$refs.PSDropdownDialog.style.display = 'block'
+      }
       setTimeout(() => {
         this.updatePosition()
         this.watchParentScrolling()
@@ -165,8 +191,10 @@ export default {
     close() {
       if (this.show) {
         this.$emit('close')
-        this.$refs.PSDropdownDialog.style.display = 'none'
-        this.$refs.PSDropdownDialog.style.opacity = 0
+        if(this.$refs.PSDropdownDialog){
+          this.$refs.PSDropdownDialog.style.display = 'none'
+          this.$refs.PSDropdownDialog.style.opacity = 0
+        }
         this.show = false
         this.unwatchParentScrolling()
       }
@@ -179,12 +207,7 @@ export default {
     },
     clickOutside(event) {
       if (!this.show) return
-      if (
-        !(
-          this.$refs.PSDropdown == event.target ||
-          this.$refs.PSDropdown.contains(event.target)
-        )
-      ) {
+      if (!this.$refs.PSDropdown == event.target || !this.$refs.PSDropdown?.contains(event.target)) {
         this.close()
       }
     },

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

@@ -29,89 +29,127 @@
         >
           <td>
             <div 
-              class="actions psui-space-x-3"
-              :style="{ paddingLeft: `${item.deep * 16}px` }"
+              class="psui-flex psui-justify-between"
             >
-              <PsIcon
-                v-if="!item.last_deep || item.type === 'total'" 
-                icon="expand_more"
-                size="24"
-                class="actions-button psui-transition psui-transform"
-                :icon-classes="item.is_disabled ? 'psui-text-gray-40' : getIconClasses(item)"
-                :style="{ display: 'flex' }"
-                :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"
-                layout="gray"
-                position="top"
-                class="psui-inline-flex psui-cursor-default"
-                :class="{ 'is-last-deep' : item.last_deep }"
-              >
-                <template v-slot:trigger>
-                  <p class="title psui-text-gray-50">{{ item.title }}</p>
-                </template>
-                <template v-slot:content>
-                  <p
-                    v-if="item.disabled_text"
-                    class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
-                  >
-                    {{ item.disabled_text }}
-                  </p>
-                  <p
-                    v-else
-                    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 opacity-100-childrens-on-hover"
-                :class="[
-                  { 'psui-font-bold' : item.type == 'total' },
-                  { 'is-last-deep' : item.last_deep }
-                ]"
+              <div
+                class="actions psui-space-x-3"
+                :style="{ paddingLeft: `${item.deep * 16}px` }"
               >
-                {{ item.title }}
-                
                 <PsIcon
-                  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"
+                  v-if="!item.last_deep || item.type === 'total'"
+                  icon="expand_more"
+                  size="24"
+                  class="actions-button psui-transition psui-transform"
+                  :icon-classes="item.is_disabled ? 'psui-text-gray-40' : getIconClasses(item)"
                   :style="{ display: 'flex' }"
-                  @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
+                  :class="[checkRowIsVisible(item) ? 'psui-rotate-0' : 'psui--rotate-90', { 'psui-pointer-events-none' : item.is_disabled }]"
+                  @click.native="onCollapse(item)"
                 />
-              </p>
-              <PsRichTooltip 
-                v-if="shouldShowIcon(item)"
-                position="top"
-                layout="gray"
-                class="psui-inline-flex psui-cursor-default"
-                :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0', { 'is-last-deep' : item.last_deep }]"
-                :ignoreDialog="!shouldShowIcon(item)"
-              >
-                <template v-slot:trigger>
+              
+                <PsRichTooltip 
+                  v-if="item.is_disabled"
+                  layout="gray"
+                  position="top"
+                  class="psui-inline-flex psui-cursor-default sticky"
+                  :class="{ 'is-last-deep' : item.last_deep }"
+                >
+                  <template v-slot:trigger>
+                    <p class="title psui-text-gray-50">{{ item.title }}</p>
+                  </template>
+                  <template v-slot:content>
+                    <p
+                      v-if="item.disabled_text"
+                      class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
+                    >
+                      {{ item.disabled_text }}
+                    </p>
+                    <p
+                      v-else
+                      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 opacity-100-childrens-on-hover"
+                  :class="[
+                    { 'psui-font-bold' : item.type == 'total' },
+                    { 'is-last-deep' : item.last_deep }
+                  ]"
+                >
+                  {{ item.title }}
+                  
                   <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"
+                    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"
                     :style="{ display: 'flex' }"
-                    @click.native="executeCallback(item)"
+                    @click.native="$eventBus.$emit('openDescriptionModal', { type: 'helper', slug: `table-results-${item.helper_slug}` })"
                   />
-                </template>
-                <template v-slot:content>
-                  <p
-                    class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
-                  >
-                    {{ getText(item) }}
-                  </p>
-                </template>
-              </PsRichTooltip>
+                </p>
+              </div>
+              <div 
+                class="actions psui-space-x-3 flex justify-between"
+                :style="{ paddingLeft: `${item.deep * 16}px` }"
+              >
+                <PsRichTooltip 
+                  v-if="shouldShowIcon(item)"
+                  position="top"
+                  layout="gray"
+                  class="psui-inline-flex psui-cursor-default"
+                  :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
+                  :ignoreDialog="!shouldShowIcon(item)"
+                >
+                  <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"
+                      :style="{ display: 'flex' }"
+                      @click.native="executeCallback(item)"
+                    />
+                  </template>
+                  <template v-slot:content>
+                    <p
+                      class="psui-font-bold psui-text-gray-80 psui-text-xsmall"
+                    >
+                      {{ getText(item) }}
+                    </p>
+                  </template>
+                </PsRichTooltip>
+
+                <PsDropdown
+                  v-if="shouldShowDropdown(item)"
+                  :class="[isHoveringRow === index ? 'opacity-1' : 'opacity-0']"
+                  position="custom"
+                  custom-position="top: 0; left: 5rem;"
+                >
+                  <template v-slot:dropdownTrigger>
+                    <PsIcon 
+                      icon="more_horiz"
+                      size="18"
+                      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"
+                      :style="{ display: 'flex' }"
+                    />
+                  </template>
+                  <template v-slot:items>
+                    <ul class="psui-w-full psui-font-bold psui-my-3">        
+                      <li
+                        v-for="(action, index) in item.actions"
+                        :key="index"
+                        :title="action.title"
+                        class="psui-text-gray-60 hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3 psui-px-5 psui-py-1 transition-all"
+                        @click="executeCallback(item, action)"
+                      >
+                        <span class="psui-w-auto psui-text-small">{{ action.title }}</span>
+                      </li>
+                    </ul> 
+                  </template>
+                </PsDropdown>
+              </div>
             </div>
           </td>
 
@@ -356,19 +394,24 @@ export default {
       this.isHoveringRow = index
     },
     shouldShowIcon(item) {
-      if(item?.action && item?.deep == 2) return true
+      if(item?.actions?.length === 1) return true
+      else return false
+    },
+    shouldShowDropdown(item) {
+      if(item?.actions?.length > 1) return true
       else return false
     },
     getIcon(item) {
-      if(item?.action) return item.action.icon
+      if(item?.actions?.length === 1) return item.actions[0].icon
     },
     getText(item) {
-      if(item?.action) return item.action.text
-    },
-    executeCallback(item) {
-      if(item?.action) item.action.callback(item)
+      if(item?.actions?.length === 1) return item.actions[0].text
     },
-  }
+    executeCallback(item, action) {
+      if(item?.actions?.length === 1) item.actions[0].callback(item)
+      else action?.callback(item)
+    }
+  },
 }
 </script>
 <style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>