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

package/dist/css/psui_styles.css

@@ -1250,6 +1250,7 @@ video {
     color: #798490;
     color: rgba(121, 132, 144, var(--text-opacity));
     margin-top: 0.25rem;
+    font-style: italic;
     font-size: 12px;
     line-height: 15.6px;
   }
@@ -2916,38 +2917,104 @@ video {
 
 .psui-el-dropdown-menu-list {
   width: 100%;
-  font-weight: 700;
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  font-weight: 500;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
-.psui-el-dropdown-menu-list li {
-    width: 100%;
+.psui-el-dropdown-menu-list-item {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    font-size: 16px;
+    line-height: 130%;
+    border-radius: 0.375rem;
     --text-opacity: 1;
     color: #515E6A;
     color: rgba(81, 94, 106, var(--text-opacity));
-    font-size: 14px;
-    line-height: 130%;
-    list-style-type: none;
-    display: flex;
-    flex-direction: column;
+    margin-left: 1rem;
+    margin-right: 1rem;
     cursor: pointer;
-    padding: 7px 20px;
-    font-weight: 700;
+    transition-property: all;
   }
 
-.psui-el-dropdown-menu-list li:hover {
-      --text-opacity: 1;
-      color: #318FAC;
-      color: rgba(49, 143, 172, var(--text-opacity));
+.psui-el-dropdown-menu-list-item:hover * {
+        opacity: 1 !important;
+      }
+
+.psui-el-dropdown-menu-list-item.absolute-childrens {
+      position: relative;
+    }
+
+.psui-el-dropdown-menu-list-item.absolute-childrens .helper {
+        position: absolute;
+        top: 0;
+        right: -18px;
+      }
+
+.psui-el-dropdown-menu-list-item{
+    padding: 11.5px 16px 11.5px 8px;
+}
+
+.psui-el-dropdown-menu-list-item:hover {
+      --bg-opacity: 1;
+      background-color: #F3F6F9;
+      background-color: rgba(243, 246, 249, var(--bg-opacity));
+    }
+
+.psui-el-dropdown-menu-list-item-left-label {
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      flex: 0 1 auto;
+      width: auto;
+    }
+
+.psui-el-dropdown-menu-list-item-line {
+      display: flex;
+      flex: 1 1 0%;
+      border-bottom-width: 1px;
+      --border-opacity: 1;
+      border-color: #A2ACB7;
+      border-color: rgba(162, 172, 183, var(--border-opacity));
+      border-style: dashed;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      margin-bottom: 0.25rem;
+    }
+
+.psui-el-dropdown-menu-list-item-right-label {
+      display: flex;
+      flex: 0 1 auto;
+      width: auto;
+      font-weight: 400;
+    }
+
+.psui-el-dropdown-menu-list-item.is-selected {
       --bg-opacity: 1;
       background-color: #ECF7FB;
       background-color: rgba(236, 247, 251, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #318FAC;
+      color: rgba(49, 143, 172, var(--text-opacity));
     }
 
-.psui-el-dropdown-menu-list li span {
-      width: 100%;
-    }
+.psui-el-dropdown-menu-list-item.is-selected .psui-el-dropdown-menu-list-item-line {
+        --border-opacity: 1;
+        border-color: #318FAC;
+        border-color: rgba(49, 143, 172, var(--border-opacity));
+      }
+
+.psui-el-dropdown-menu-list-item.is-selected:hover {
+        --bg-opacity: 1;
+        background-color: #ECF7FB;
+        background-color: rgba(236, 247, 251, var(--bg-opacity));
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
 
 .psui-el-slider .psui-el-slider-label {
     margin-bottom: 0.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.13",
+  "version": "1.1.17",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -20,8 +20,7 @@
     "serve-prod": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-prod-tailwind\"",
     "watch-storybook": "start-storybook -p 6006",
     "watch-prod-tailwind": "watch 'npm run build-tailwind' ./src/assets",
-    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets",
-    "build-prop-intellisense": "vue-int --input src/components --output vetur --recursive"
+    "watch-tailwind": "watch 'npm run build-temp-tailwind' ./src/assets"
   },
   "dependencies": {
     "core-js": "^3.6.5",
@@ -53,12 +52,5 @@
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.11",
     "watch": "^1.0.2"
-  },
-  "optionalDependencies": {
-    "vue-intellisense": "^1.0.1"
-  },
-  "vetur": {
-    "tags": "vetur/tags.json",
-    "attributes": "vetur/attributes.json"
   }
 }

package/src/assets/scss/components/PsDropdownList.scss

@@ -1,19 +1,38 @@
 @layer components {
-    .psui-el-dropdown-menu-list {
-        @apply psui-w-full psui-font-bold psui-my-3;
+  .psui-el-dropdown-menu-list {
+    @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4;
 
-        li {
-            @apply psui-w-full psui-text-gray-60 psui-text-small psui-list-none psui-flex psui-flex-col psui-cursor-pointer;
-            padding: 7px 20px;
-            font-weight: 700;
+    &-item {
+      @apply psui-flex psui-items-end psui-justify-between psui-text-p psui-rounded-md psui-text-gray-60 psui-mx-4 psui-cursor-pointer psui-transition-all psui-show-childrens-on-hover;
+      padding: 11.5px 16px 11.5px 8px;
 
-            &:hover {
-                @apply psui-text-blue-60 psui-bg-blue-10;
-            }
+      &:hover {
+        @apply psui-bg-gray-10;
+      }
 
-            span {
-                @apply psui-w-full;
-            }
+      &-left-label {
+        @apply psui-font-bold psui-flex psui-items-center psui-flex-initial psui-w-auto;
+      }
+
+      &-line {
+        @apply psui-flex psui-flex-1 psui-border-b psui-border-gray-40 psui-border-dashed psui-mx-2 psui-mb-1;
+      }
+
+      &-right-label {
+        @apply psui-flex psui-flex-initial psui-w-auto psui-font-normal;
+      }
+
+      &.is-selected {
+        @apply psui-bg-blue-10 psui-text-blue-60;
+
+        .psui-el-dropdown-menu-list-item-line {
+          @apply psui-border-blue-60;
+        }
+
+        &:hover {
+          @apply psui-bg-blue-10 psui-text-blue-60;
         }
+      }
     }
+  }
 }

package/src/assets/scss/components/PsInput.scss

@@ -11,7 +11,7 @@
     }
 
     &-hint {
-      @apply psui-text-gray-50 psui-mt-1;
+      @apply psui-text-gray-50 psui-mt-1 psui-italic;
       font-size: 12px;
       line-height: 15.6px;
     }

package/src/components/forms/PsDropdown.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="psui-el-dropdown-menu" ref="PSDropdown" v-click-outside="close">
+  <div 
+    ref="PSDropdown"
+    class="psui-el-dropdown-menu" 
+    :class="{ 'is-open' : show }"
+    v-click-outside="close"
+  >
     <div
       ref="PSDropdownTrigger"
       v-if="$slots.dropdownTrigger"

package/src/components/forms/PsDropdownList.vue

@@ -1,23 +1,75 @@
 <template>
-  <ul class="psui-el-dropdown-menu-list">
+  <ul 
+    class="psui-el-dropdown-menu-list"
+    :class="`layout-${layout}`"
+  >
     <li 
-      v-for="item in getItems" 
-      :key="getKeyValue(item)"
+      v-for="(item, index) in getItems" 
+      :key="`${index}-${getKeyValue(item)}`"
+      :id="`${index}-${getKeyValue(item)}`"
+      :class="{ 'is-selected psui-bg-blue-10 psui-text-blue-60 hover:psui-bg-blue-10 hover:psui-text-blue-60' : getSelected === getKeyValue(item) }"
+      class="psui-el-dropdown-menu-list-item"
+      @mouseover="isHovering = index" 
+      @mouseout="isHovering = false"
       @click="selectItem(item)"
     >
-    <span>{{ getKeyLabel(item) }}</span>
+      <div class="psui-el-dropdown-menu-list-item-left-label">
+        {{ getLeftLabel(item) }}
+        <div
+          v-if="item.description"
+          class="psui-font-normal psui-text-gray-50 psui-ml-1"
+          :class="{ 'psui-text-blue-60' : item.key == getItems.key }"
+        >
+          {{ item.description }}
+        </div>
+        <PsIcon
+          v-if="item.hasHelper"
+          icon="help_outline"
+          size="20"
+          class="psui-text-blue-60 psui-opacity-0 psui-transition psui-leading-none psui-cursor-pointer psui-ml-1"
+          :display="item.key == getItems.key || isHovering == index ? 'flex' : 'none'"
+          @click.native.stop="$eventBus.$emit('openDescriptionModal', { type: item.hasHelper.type, id: item.hasHelper.id, slug: item.hasHelper.slug })"
+        />
+      </div>
+      <div class="psui-el-dropdown-menu-list-item-line" />
+      <div 
+        v-if="rightLabelFormatter"
+        class="psui-el-dropdown-menu-list-item-rigth-label"
+      >
+        {{ rightLabelFormatter(item.key, studyData[item.key], studyData) }}
+      </div>
+      <div 
+        v-else
+        class="psui-el-dropdown-menu-list-item-rigth-label"
+      >
+        {{ getRightLabel(item) }}
+      </div>
     </li>
   </ul>  
 </template>
 
 <script>
+import PsIcon from '../ui/PsIcon.vue'
+export const itemStyle = ['default', 'radio', 'icon', 'checkbox', 'switch', 'rich']
+
 export default {
-  name: 'PsDropdownSimple',
+  name: 'PsDropdownList',
+  components: { PsIcon },
   props: {
+    /**
+     * It sets the style of items
+     */
+    layout: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return itemStyle.indexOf(value) !== -1
+      }
+    },
     /**
     * It sets the text key which will retrieve a icon from Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
     */
-    icon:{
+    icon: {
       type: String,
     },
     /**
@@ -28,13 +80,23 @@ export default {
       required: true
     },
     /**
-    * It sets the item selected on the dropdown menu.
+    * It sets the left key label of your items if needed. 
      */
-    selected: {},
+    leftLabel: {
+      type: [String, Function],
+      default: 'left_label'
+    },
+    /**
+    * It sets the right key label of your items if needed. 
+     */
+    rightLabel: {
+      type: [String, Function],
+      default: 'right_label'
+    },
     /**
     * It sets the key label of your items if needed. 
      */
-    keyLabel: {
+    label: {
       type: [String, Function],
       default: 'label'
     },
@@ -44,11 +106,30 @@ export default {
     keyValue: {
       type: [String, Function],
       default: 'value'
-    }
+    },
+    /**
+    * It sets the format function to display values.
+    */
+    rightLabelFormatter: {
+      type: Function
+    },
+    /**
+    * It sets the format function to display values.
+    */
+    studyData: {
+      type: [String, Object]
+    },
+    /**
+    * It sets the item selected on the dropdown menu.
+     */
+    selected: {},
   },
+  data: () => ({
+    isHovering: false
+  }),
   computed: {
     getSelected() {
-      if (this.selected) {
+      if (this.selected !== undefined) {
         if (typeof this.selected === 'object' && this.selected[this.keyValue] ) {
           return this.selected[this.keyValue]        
         } else {
@@ -67,10 +148,20 @@ export default {
       this.$emit('update:selected', this.getKeyValue(item) )
       this.$emit('change', item )
     },
-    getKeyLabel(item) {
-      if(typeof this.keyLabel == 'function') return this.keyLabel(item)
+    getLeftLabel(item) {
+      if(typeof this.leftLabel == 'function') return this.leftLabel(item)
+      if(typeof item === 'string') return item
+      return item[this.leftLabel]
+    },
+    getRightLabel(item) {
+      if(typeof this.rightLabel == 'function') return this.rightLabel(item)
+      if(typeof item === 'string') return item
+      return item[this.rightLabel]
+    },
+    getLabel(item) {
+      if(typeof this.label == 'function') return this.label(item)
       if(typeof item === 'string') return item
-      return item[this.keyLabel]
+      return item[this.label]
     },
     getKeyValue(item) {
       if(typeof this.keyValue == 'function') return this.keyValue(item)

package/src/components/ui/PsIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display: contents">
+  <div :style="{display: display}">
     <span
       v-if="getIconType === 'material-icons'"
       class="material-icons-round"
@@ -65,6 +65,14 @@ export default {
       default: null
     },
 
+    /**
+     * It sets fill property display of the icon.
+     */
+    display: {
+      type: String,
+      default: 'contents'
+    },
+
     /**
      * It sets the color of the icon.
      */

package/src/stories/DropdownList.stories.js

@@ -0,0 +1,158 @@
+import PsDropdownList, { itemStyle } from '../components/forms/PsDropdownList.vue'
+export default {
+  title: 'Components/Dropdown/Dropdown List',
+  component: { PsDropdownList },
+  argTypes: {
+    layout: { 
+      control: { 
+        type: 'inline-radio', 
+        options: itemStyle 
+      } 
+    },
+    rigthLabelFormatter: {
+      control: {
+        type: 'select',
+        options: [null, 'label', 'function']
+      }
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsDropdownList },
+  data: () => ({
+    selected: item
+  }),
+  template: `
+    <div style="width:100%;" class="psui-flex psui-space-x-10">
+      <PsDropdownList 
+        v-bind="$props" 
+        :selected.sync="selected" 
+        left-label="title"
+        key-value="key" 
+        :study-data="study_data" 
+      />
+    </div>
+  `,
+})
+
+const items = [
+  {
+    'isActive': true,
+    'key': 'forecast_units_affected',
+    'title': 'Affected Units',
+    'description': '(lifecycle)',
+    'right_label': '00',
+    'hasProjections': true,
+    'hasHelper': {
+      'type': 'helpers',
+      'id': 17,
+      'slug': 'forecast_units_affected'
+    },
+    'chartProjection': {
+      'title': 'Number of Affected Units',
+      'subtitle': ''
+    }
+  },
+  {
+    'isActive': false,
+    'key': 'forecast_initial_cost',
+    'title': 'Compliance Cost',
+    'description': '(lifecycle)',
+    'right_label': '00',
+    'hasProjections': true,
+    'hasHelper': {
+      'type': 'helpers',
+      'id': 20,
+      'slug': 'forecast_initial_cost'
+    },
+    'chartProjection': {
+      'title': 'Compliance Cost',
+      'subtitle': ''
+    }
+  },
+  {
+    'isActive': true,
+    'key': 'forecast_emissions_savings',
+    'title': 'Emissions Reductions',
+    'description': '(lifecycle MTCO²e)',
+    'right_label': '00',
+    'hasProjections': true,
+    'hasHelper': {
+      'type': 'helpers',
+      'id': 18,
+      'slug': 'forecast_emissions_savings'
+    },
+    'chartProjection': {
+      'title': 'Emissions Reductions',
+      'subtitle': 'MTCO²e'
+    }
+  },
+  {
+    'isActive': true,
+    'key': 'forecast_lifecycle_savings',
+    'title': 'Lifecycle Savings',
+    'description': '(on-bill)',
+    'right_label': '00',
+    'hasProjections': true,
+    'hasHelper': {
+      'type': 'helpers',
+      'id': 19,
+      'slug': 'forecast_lifecycle_savings'
+    },
+    'chartProjection': {
+      'title': 'Bill Savings',
+      'subtitle': ''
+    }
+  },
+  {
+    'isActive': false,
+    'key': 'forecast_kwh_savings',
+    'title': 'Electricity Savings',
+    'description': '(lifecycle kWh)',
+    'right_label': '00',
+    'hasProjections': true,
+    'hasHelper': {
+      'type': 'helpers',
+      'id': 21,
+      'slug': 'forecast_kwh_savings'
+    },
+    'chartProjection': {
+      'title': 'Electricity Savings',
+      'subtitle': 'kWh'
+    }
+  },
+  {
+    'isActive': false,
+    'key': 'forecast_therms_savings',
+    'title': 'Gas Savings',
+    'description': '(lifecycle therms)',
+    'right_label': '00',
+    'hasProjections': true,
+    'hasHelper': {
+      'type': 'helpers',
+      'id': 22,
+      'slug': 'forecast_therms_savings'
+    },
+    'chartProjection': {
+      'title': 'Gas Savings',
+      'subtitle': 'therms'
+    }
+  }
+]
+const item = items[0]
+const studyData = {
+  'forecast_units_affected': 7001.75,
+  'forecast_emissions_savings': 17575.66588897,
+  'forecast_therms_savings': 5060589.279978376,
+  'forecast_kwh_savings': -104561078.77158748,
+  'forecast_lifecycle_savings': -40645997.14350001,
+  'forecast_initial_cost': -21144739.311334003
+}
+
+export const DropdownList = Template.bind({})
+DropdownList.args = {
+  items: items,
+  study_data: studyData,
+}