@policystudio/policy-studio-ui-vue 1.0.31 → 1.0.32

package/.eslintrc.js

@@ -15,41 +15,42 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'semi': ['warn', 'never'],
-    "vue/order-in-components": ["warn", {
-      "order": [
-        "el",
-        "name",
-        "key",
-        "parent",
-        ["components", "directives", "filters"],
-        ["props", "propsData"],
-        "functional",
-        ["delimiters", "comments"],
-        "extends",
-        "mixins",
-        ["provide", "inject"],
-        "ROUTER_GUARDS",
-        "layout",
-        "middleware",
-        "validate",
-        "scrollToTop",
-        "transition",
-        "loading",
-        "inheritAttrs",
-        "model",
-        "emits",
-        "setup",
-        "asyncData",
-        "data",
-        "fetch",
-        "head",
-        "computed",
-        "watch",
-        "watchQuery",
-        "LIFECYCLE_HOOKS",
-        "methods",
-        ["template", "render"],
-        "renderError"
+    'quotes': [2, 'single'],
+    'vue/order-in-components': ['warn', {
+      'order': [
+        'el',
+        'name',
+        'key',
+        'parent',
+        ['components', 'directives', 'filters'],
+        ['props', 'propsData'],
+        'functional',
+        ['delimiters', 'comments'],
+        'extends',
+        'mixins',
+        ['provide', 'inject'],
+        'ROUTER_GUARDS',
+        'layout',
+        'middleware',
+        'validate',
+        'scrollToTop',
+        'transition',
+        'loading',
+        'inheritAttrs',
+        'model',
+        'emits',
+        'setup',
+        'asyncData',
+        'data',
+        'fetch',
+        'head',
+        'computed',
+        'watch',
+        'watchQuery',
+        'LIFECYCLE_HOOKS',
+        'methods',
+        ['template', 'render'],
+        'renderError'
       ]
     }]
   },

package/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ['@vue/cli-plugin-babel/preset'],
 }

package/dist/css/psui_styles.css

@@ -17618,7 +17618,6 @@ html {
       transition-duration: 300ms;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       transition-delay: 0.4s;
-      min-width: 256px;
     }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content {
@@ -18189,6 +18188,8 @@ html {
 .psui-el-dropdown-menu-list {
   width: 100%;
   font-weight: 700;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
 }
 
 .psui-el-dropdown-menu-list li {
@@ -18209,7 +18210,10 @@ html {
 .psui-el-dropdown-menu-list li:hover {
       --text-opacity: 1;
       color: #318FAC;
-      color: rgba(49, 143, 172, var(--text-opacity))
+      color: rgba(49, 143, 172, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #ECF7FB;
+      background-color: rgba(236, 247, 251, var(--bg-opacity));
     }
 
 .psui-el-dropdown-menu-list li span {
@@ -18244,8 +18248,6 @@ html {
 .psui-el-dropdown-menu-dialog-wrapper {
     display: none;
     transform-origin: top right;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
     background-color: #ffffff;
     position: fixed;
     width: auto;
@@ -18895,6 +18897,19 @@ html {
       border-bottom: 0;
     }
 
+.psui-el-table-rich thead th {
+        padding: 15px 16px;
+      }
+
+.psui-el-table-rich tbody th,
+        .psui-el-table-rich tbody td,
+        .psui-el-table-rich tbody tr {
+        padding: 7px 16px;
+        --text-opacity: 1;
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
+      }
+
 .psui-el-highlight-ripple-icon {
   position: static;
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",
@@ -17,6 +17,7 @@
     "build-temp-tailwind": "postcss src/assets/scss/base.scss -o temp/css/psui_styles.css",
     "publish": "npm run lint && npm run build-tailwind && build-storybook && npm publish",
     "serve": "concurrently --kill-others \"npm run watch-storybook\" \"npm run watch-tailwind\"",
+    "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",

package/postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     'postcss-nested': {},
-    "postcss-import": {},
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },

package/src/assets/scss/components/PsDataTable.scss

@@ -45,6 +45,23 @@
         border-bottom: 0; 
       }
     }
+
+    &-rich {
+      thead {
+        th {
+          padding: 15px 16px;
+        }
+      }
+
+      tbody {
+        th,
+        td,
+        tr {
+          padding: 7px 16px;
+          @apply .psui-text-gray-80;
+        }
+      }
+    }
   }
 
 }

package/src/assets/scss/components/PsDropdown.scss

@@ -1,7 +1,7 @@
 @layer components {
     .psui-el-dropdown-menu {
         @apply psui-relative psui-inline-block psui-text-left;
-
+        
         button {
             @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
             background-color: transparent;
@@ -9,6 +9,7 @@
             padding-bottom: 2.5px;
             min-height: 27px;
             font-size: 0.875rem;
+            
 
             &:focus {
                 outline: none;
@@ -17,10 +18,11 @@
         }
 
         &-dialog-wrapper {
-            @apply psui-hidden psui-origin-top-right psui-py-4 psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
-
+            @apply psui-hidden psui-origin-top-right psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in;
+            
             &-dialog {
-                @apply w-full;
+                @apply psui-w-full;
+
             }
         }
     }

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

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-dropdown-menu-list {
-        @apply psui-w-full psui-font-bold;
+        @apply psui-w-full psui-font-bold psui-my-3;
 
         li {
             @apply psui-w-full psui-text-gray-60 psui-text-small psui-list-none psui-flex psui-flex-col psui-cursor-pointer;
@@ -8,7 +8,7 @@
             font-weight: 700;
 
             &:hover {
-                @apply psui-text-blue-60
+                @apply psui-text-blue-60 psui-bg-blue-10;
             }
 
             span {

package/src/assets/scss/components/PsTooltip.scss

@@ -7,7 +7,6 @@
             .psui-el-tooltip-dialog {
                 @apply psui-fixed psui-opacity-0 psui-transition-opacity psui-duration-300 psui-ease-in-out;
                 transition-delay: 0.4s;
-                min-width: 256px;
 
                 .psui-el-tooltip-content {
                     @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;

package/src/components/accordion/PsAccordionItem.vue

@@ -21,7 +21,7 @@
 <script>
 import { getParentVueComponentByName } from '../../util/GeneralFunctions'
 export default {
-  name: "PsAccordionItem",
+  name: 'PsAccordionItem',
   props: {
     /**
      * It sets the title of the accordion item.

package/src/components/chips/PsChips.vue

@@ -31,17 +31,17 @@
 </template>
 
 <script>
-export const type = ["radio", "checkbox", "button"]
+export const type = ['radio', 'checkbox', 'button']
 
 export default {
-  name: "PsChips",
+  name: 'PsChips',
   props: {
     /**
      * It sets the label of the chips button.
      */
     label: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * It sets the type of the chips button. eg: radio, checkbox, button.
@@ -50,7 +50,7 @@ export default {
       type: String,
       required: true,
       default: 'button',
-      validator: (type) => ["radio", "checkbox", "button"].includes(type)
+      validator: (type) => ['radio', 'checkbox', 'button'].includes(type)
     },
     /**
      * It sets the layout of the chipsbutton. eg: simple, with-icon, rich.
@@ -65,7 +65,7 @@ export default {
     */
     icon: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * It sets if the button was checked or not checked.
@@ -89,7 +89,7 @@ export default {
       default: false
     },
   },
-  emits: ["click", "change"],
+  emits: ['click', 'change'],
   data() {
     return {
       isChecked: false,
@@ -107,7 +107,7 @@ export default {
       let cssClass = ''
       
       if (this.checked === true ) {
-        cssClass = "psui-text-blue-50 psui-bg-blue-20"
+        cssClass = 'psui-text-blue-50 psui-bg-blue-20'
       }
 
       return cssClass
@@ -116,15 +116,15 @@ export default {
   methods: {
     onClick() {
       this.isChecked = !this.isChecked
-      this.$emit("click")
+      this.$emit('click')
     },
     onChange(event) {
       this.isChecked = event.target.checked
       this.$emit('update:checked', event.target.checked)
-      this.$emit("change", event)
+      this.$emit('change', event)
     },
     onClose() {
-      this.$emit("close")
+      this.$emit('close')
     },
   },
 }

package/src/components/datatable/PsDataTable.vue

@@ -57,7 +57,9 @@ export default {
      */
     data: {
       type: Array,
-      required: true
+      default() {
+        return []
+      }
     },
     /**
     * It sets the values which will be use to render the footer.

package/src/components/datatable/PsDataTableItem.vue

@@ -36,7 +36,7 @@
 
 <script>
 export default {
-  name: "PsDataTableItem",
+  name: 'PsDataTableItem',
   props: {
     data: {
       type: Array,

package/src/components/forms/PsDropdown.vue

@@ -1,31 +1,33 @@
 <template>
-  <div 
-    class="psui-el-dropdown-menu"
-    ref="PSDropdown"
-    v-click-outside="close"
-  >
-
-    <div ref="PSDropdownTrigger" v-if="$slots.dropdownTrigger" @click="show && !toggleWhenActive ? '' : toggle()">
+  <div class="psui-el-dropdown-menu" ref="PSDropdown" v-click-outside="close">
+    <div
+      ref="PSDropdownTrigger"
+      v-if="$slots.dropdownTrigger"
+      @click="show && !toggleWhenActive ? '' : toggle()"
+    >
       <slot name="dropdownTrigger"></slot>
     </div>
 
     <button
       v-else
-      @click="show && !toggleWhenActive ? '' : toggle()" 
-      type="button" 
+      @click="show && !toggleWhenActive ? '' : toggle()"
+      type="button"
       :id="id"
-      aria-haspopup="true" 
+      aria-haspopup="true"
       aria-expanded="true"
       ref="PSDropdownTrigger"
     >
-      <slot v-if="show && $slots.buttonLabelOnShow" name="buttonLabelOnShow"></slot>
+      <slot
+        v-if="show && $slots.buttonLabelOnShow"
+        name="buttonLabelOnShow"
+      ></slot>
       <slot v-else name="buttonLabel"></slot>
     </button>
-    <div 
+    <div
       ref="PSDropdownDialog"
-      role="menu" 
-      class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300" 
-      aria-orientation="vertical" 
+      role="menu"
+      class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300"
+      aria-orientation="vertical"
       :aria-labelledby="id"
       :style="{ minWidth: minWidthDropDown }"
     >
@@ -39,7 +41,10 @@
 <script>
 // Figma - 2.3 Dropdown with category divider https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64886
 
-import { randomString, getParentScrollableEl } from '../../util/GeneralFunctions'
+import {
+  randomString,
+  getParentScrollableEl,
+} from '../../util/GeneralFunctions'
 
 export default {
   name: 'PsDropdown',
@@ -49,21 +54,21 @@ export default {
    */
     minWidthDropDown: {
       type: String,
-      default: '340px'
+      default: '240px',
     },
     /**
     * It's a boolean responsible for showing a slot within the html tag button.
      */
     buttonLabelOnShow: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /**
     * It's a property responsible for toggling the dropdown menu. default: true.
      */
     toggleWhenActive: {
       type: Boolean,
-      default: true
+      default: true,
     },
   },
   data() {
@@ -71,14 +76,14 @@ export default {
       show: false,
       id: randomString(8),
       marginLeft: '-0px',
-      scrollableParentEl : null 
+      scrollableParentEl: null,
     }
   },
   computed: {
     getMaxWidth() {
       let bounds = this.$refs.PSDropdown.getBoundingClientRect()
-      return (document.documentElement.clientWidth - bounds['left']) -30
-    }
+      return document.documentElement.clientWidth - bounds['left'] - 30
+    },
   },
   beforeDestroy() {
     this.unwatchParentScrolling()
@@ -99,36 +104,41 @@ export default {
     },
     unwatchParentScrolling() {
       if (this.scrollableParentEl) {
-        this.scrollableParentEl.removeEventListener('scroll', this.updatePosition)
+        this.scrollableParentEl.removeEventListener(
+          'scroll',
+          this.updatePosition
+        )
       }
     },
     updatePosition() {
-      
       const PSDropdownDialog = this.$refs.PSDropdownDialog
       const PSDropdownTrigger = this.$refs.PSDropdownTrigger
-      if (!PSDropdownDialog || !PSDropdownTrigger) return 
+      if (!PSDropdownDialog || !PSDropdownTrigger) return
 
       const rectTrigger = PSDropdownTrigger.getBoundingClientRect()
       const rectDialog = PSDropdownDialog.getBoundingClientRect()
       const windowWidth = document.documentElement.clientWidth
 
       PSDropdownDialog.style.position = 'fixed'
-      PSDropdownDialog.style.top = `${rectTrigger.y + rectTrigger.height }px`
-      
-      if (( rectTrigger.x + rectDialog.width + 20 ) > windowWidth ) {
-        PSDropdownDialog.style.left = `${windowWidth - rectDialog.width - 30}px`
-      } else {        
+      PSDropdownDialog.style.top = `${rectTrigger.y + rectTrigger.height}px`
+
+      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+        PSDropdownDialog.style.left = `${
+          windowWidth - rectDialog.width - 30
+        }px`
+      } else {
         PSDropdownDialog.style.left = `${rectTrigger.x}px`
       }
 
-      if(rectTrigger.top < 10) {
+      if (rectTrigger.top < 10) {
         this.close()
         console.warn('The dropdown are too close from the top of the page')
         return
       }
 
-      setTimeout(() => { PSDropdownDialog.style.opacity = 1 }, 10)
-
+      setTimeout(() => {
+        PSDropdownDialog.style.opacity = 1
+      }, 10)
     },
     open() {
       this.$emit('open')
@@ -138,9 +148,9 @@ export default {
       setTimeout(() => {
         this.updatePosition()
         this.watchParentScrolling()
-        document.addEventListener("keyup", this.handleEsc)
-        window.addEventListener("resize", this.updatePosition)
-        window.addEventListener("click", this.clickOutside)
+        document.addEventListener('keyup', this.handleEsc)
+        window.addEventListener('resize', this.updatePosition)
+        window.addEventListener('click', this.clickOutside)
       }, 10)
     },
     close() {
@@ -151,20 +161,24 @@ export default {
         this.show = false
         this.unwatchParentScrolling()
       }
-      document.removeEventListener("keyup", this.handleEsc)
-      document.removeEventListener("resize", this.updatePosition)
-      document.removeEventListener("click", this.clickOutside)
+      document.removeEventListener('keyup', this.handleEsc)
+      document.removeEventListener('resize', this.updatePosition)
+      document.removeEventListener('click', this.clickOutside)
     },
     handleEsc(evt) {
       if (this.show && evt.keyCode === 27) this.close()
     },
     clickOutside(event) {
-      if(!this.show) return
-      if (!(this.$refs.PSDropdown == event.target || this.$refs.PSDropdown.contains(event.target))) {
+      if (!this.show) return
+      if (
+        !(
+          this.$refs.PSDropdown == event.target ||
+          this.$refs.PSDropdown.contains(event.target)
+        )
+      ) {
         this.close()
       }
-    }
-  }
+    },
+  },
 }
 </script>
-

package/src/components/forms/PsDropdownList.vue

@@ -79,4 +79,4 @@ export default {
     },
   }
 }
-</script>
+</script>

package/src/components/forms/PsInputTextArea.vue

@@ -21,7 +21,7 @@
 
 <script>
 export default {
-  name: "PsInputTextArea",
+  name: 'PsInputTextArea',
   props: {
     /**
      * It sets the placeholder of the textarea input. 

package/src/components/playground/PsScrollBar.vue

@@ -1,13 +1,52 @@
 <template>
-  <div>
-      Playground
+  <div 
+    class="psui-flex psui-flex-col psui-h-56 psui-w-2/6 psui-overflow-y-scroll"
+    :style="getComponentClass"
+  >
+      <h2 class="psui-font-bold ">Scrollbar Playground</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
   </div>
 </template>
 
 <script>
 export default {
     name: 'PsScrollBar',
+    props:{
+      thumbColor:{
+        type: String,
+      }
+    },
+    computed:{
+      getComponentClass(){
+        return `scrollbarColor: ${this.thumbColor}`
+    }
+  } 
 }
+
 </script>
 
 <style>

package/src/components/tabs/PsTabHeader.vue

@@ -7,18 +7,26 @@
 		
     <template v-for="item in getItems">
       <slot v-bind:item="item" >
+      <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
+        <template v-slot:trigger>
+          <button
+            :key="item[keyValue]"
+            type="button"
+            @click="selectTab(item)"
+            :class="getButtonClass(item)"
+          >
+                <span>{{ item[keyLabel] }}</span>              
+          </button>
+        </template>
+      </PsRichTooltip>
         <button
+        v-else
           :key="item[keyValue]"
           type="button"
           @click="selectTab(item)"
           :class="getButtonClass(item)"
         >
-          <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
-            <template v-slot:trigger>
               <span>{{ item[keyLabel] }}</span>              
-            </template>
-          </PsRichTooltip>
-          <span v-else>{{ item[keyLabel] }}</span>
         </button>
       </slot>
     </template>

package/src/components/tooltip/PsDialogTooltip.vue

@@ -35,7 +35,7 @@
 <script>
 
 export default {
-  name: "PsDialogTooltip",
+  name: 'PsDialogTooltip',
   props: {
     /**
      * It sets the title of the tooltip if needed.
@@ -54,8 +54,8 @@ export default {
      */
     layout: {
       type: String,
-      default: "white",
-      validator: (value) => ["white", "dark", "color"].includes(value),
+      default: 'white',
+      validator: (value) => ['white', 'dark', 'color'].includes(value),
     },
     /**
      * It sets a additional styling if needed.
@@ -66,7 +66,7 @@ export default {
     },
   },
   inheritAttrs: true,
-  emits: ["show", 'click'],
+  emits: ['show', 'click'],
   data() {
     return {
       show: false,
@@ -79,18 +79,18 @@ export default {
     }
   },
   mounted() {
-    document.addEventListener("resize", this.updatePosition)
+    document.addEventListener('resize', this.updatePosition)
   },
   beforeDestroy() {
-    document.removeEventListener("resize", this.updatePosition)
+    document.removeEventListener('resize', this.updatePosition)
   },
   methods: {
     open() {
       if (this.show || this.ignoreDialog) return
-      this.$emit("show")
+      this.$emit('show')
       this.show = true
 
-      this.$refs.dialog.style.display = "block"
+      this.$refs.dialog.style.display = 'block'
       this.$refs.dialog.style.opacity = 0
 
       setTimeout(() => {
@@ -99,10 +99,10 @@ export default {
     },
     close() {
       if (this.show && this.$refs.dialog) {
-        this.$emit("close")
+        this.$emit('close')
         this.show = false
 
-        this.$refs.dialog.style.display = "none"
+        this.$refs.dialog.style.display = 'none'
       }
     },
     updatePosition() {
@@ -129,7 +129,7 @@ export default {
       }, 100)
     },
     onClick() {
-      this.$emit("click", this.$event)
+      this.$emit('click', this.$event)
     },
   },
 }

package/src/components/tooltip/PsRichTooltip.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-import PsTooltip from "../tooltip/PsTooltip.vue"
+import PsTooltip from '../tooltip/PsTooltip.vue'
 
 export default {
-  name: "PsRichTooltip",
+  name: 'PsRichTooltip',
   components: { PsTooltip },
   props: {
     /**
@@ -21,19 +21,19 @@ export default {
      */
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * It sets the layout of the tooltip. eg: gray, red and blue.
      */
     layout: {
       type: String,
-      default: "gray",
-      validator: (type) => ["gray", "red", "blue"].includes(type),
+      default: 'gray',
+      validator: (type) => ['gray', 'red', 'blue'].includes(type),
     },
     cssClass: {
       type: String,
-      default: "",
+      default: '',
     },
   },
 }

package/src/components/tooltip/PsTooltip.vue

@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: "PsTooltip",
+  name: 'PsTooltip',
   props: {
     /**
      * It sets the title of the tooltip if needed.
@@ -57,7 +57,7 @@ export default {
     }
   },
   inheritAttrs: true,
-  emits: ["show"],
+  emits: ['show'],
   data() {
     return {
       show: false,
@@ -70,18 +70,18 @@ export default {
     }
   },
   mounted() {
-    document.addEventListener("resize", this.updatePosition)
+    document.addEventListener('resize', this.updatePosition)
   },
   beforeDestroy() {
-    document.removeEventListener("resize", this.updatePosition)
+    document.removeEventListener('resize', this.updatePosition)
   },
   methods: {
     open() {
       if (this.show || this.ignoreDialog) return
-      this.$emit("show")
+      this.$emit('show')
       this.show = true
 
-      this.$refs.dialog.style.display = "block"
+      this.$refs.dialog.style.display = 'block'
       this.$refs.dialog.style.opacity = 0
 
       setTimeout(() => {
@@ -90,10 +90,10 @@ export default {
     },
     close() {
       if (this.show && this.$refs.dialog) {
-        this.$emit("close")
+        this.$emit('close')
         this.show = false
 
-        this.$refs.dialog.style.display = "none"
+        this.$refs.dialog.style.display = 'none'
       }
     },
     updatePosition() {

package/src/stories/Chips.stories.js

@@ -1,4 +1,4 @@
-import PsChips from "../components/chips/PsChips.vue"
+import PsChips from '../components/chips/PsChips.vue'
 
 export default {
   title: 'Components/Chips',
@@ -26,7 +26,7 @@ const Template = (args, { argTypes }) => ({
 export const Simple = Template.bind({})
 Simple.args = {
   label: 'Simple Chip',
-  icon:"",
+  icon:'',
 }
 
 export const SimpleWithIcon = Template.bind({})

package/src/stories/Dropdown.stories.js

@@ -1,55 +1,99 @@
 import PsDropdown from '../components/forms/PsDropdown.vue'
 import PsDropdownList from '../components/forms/PsDropdownList.vue'
 export default {
-title: 'Components/Dropdown',
-component: { PsDropdown , PsDropdownList },
+  title: 'Components/Dropdown',
+  component: { PsDropdown, PsDropdownList },
 }
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsDropdown, PsDropdownList },
   template: `
-  <div style='background: #E6ECF2; width:900px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
+  <div style='background: #E6ECF2; width:1200px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
     <PsDropdown>
-      <template v-slot:dropdownTrigger>
+      <template #dropdownTrigger>
         <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
       </template>
-      <template v-slot:items>
-        <p class='psui-uppercase psui-text-gray-40' style='padding: 24px 20px 8px 20px;'>divider label</p>
+      <template #items>
+        <div class='psui-pb-5'>
+        <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 20px 8px 20px;'>divider label</p>
+
         <ul>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>public</i><span>Selectable option 01</span></li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>share</i><span>Selectable option 02</span></li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>person</i><span>Selectable option 03</span></li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>settings</i><span>Selectable option 04</span></li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>save</i><span>Selectable option 05</span></li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
+          <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 01</li>
+          <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 02</li>
+          <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 03</li>
+
+          <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
+
+          <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 04</li>
+          <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 05</li>
+          <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 06</li>
         </ul>
-        <p class='psui-uppercase psui-text-gray-40' style='padding: 24px 20px 8px 20px;'>divider label</p>
-        <ul>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 01</li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 02</li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 03</li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 04</li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 05</li>
-          <li style=' padding: 7px 20px;' class='hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 06</li>
-        </ul>   
-   
+        </div>
       </template>
     </PsDropdown>
+
     <PsDropdown>
-      <template v-slot:dropdownTrigger>
-      <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
+    <template #dropdownTrigger>
+      <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
+    </template>
+    <template #items>
+      <div class='psui-pb-5'>
+      <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
+
+      <ul>
+        <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>public</i><span>Selectable option 01</span></li>
+        <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>share</i><span>Selectable option 02</span></li>
+        <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>person</i><span>Selectable option 03</span></li>
+
+        <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
+
+        <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>settings</i><span>Selectable option 04</span></li>
+        <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>save</i><span>Selectable option 05</span></li>
+        <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
+      </ul>
+      </div>
+    </template>
+  </PsDropdown>
+
+    <PsDropdown>
+      <template #dropdownTrigger>
+        <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
       </template>
-      <template v-slot:items>
+      <template #items>
         <PsDropdownList v-bind='$props'></PsDropdownList>
-        </template>
+      </template>
     </PsDropdown>
+
+    <PsDropdown>
+    <template #dropdownTrigger>
+      <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
+    </template>
+    <template #items>
+    <div class='psui-my-3'>
+    <ul>
+    <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>public</i><span>Selectable option 01</span></li>
+    <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>share</i><span>Selectable option 02</span></li>
+    <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>person</i><span>Selectable option 03</span></li>
+    <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>settings</i><span>Selectable option 04</span></li>
+    <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>save</i><span>Selectable option 05</span></li>
+    <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
+  </ul>
+  </div>
+    </template>
+  </PsDropdown>
   </div>
   `,
 })
 
-
-export const DropdownMenu= Template.bind({})
+export const DropdownMenu = Template.bind({})
 DropdownMenu.args = {
-  items: ["Selectable option 01", "Selectable option 02", "Selectable option 03", "Selectable option 04"]
+  items: [
+    'Selectable option 01',
+    'Selectable option 02',
+    'Selectable option 03',
+    'Selectable option 04',
+    'Selectable option 05',
+    'Selectable option 06',
+  ],
 }

package/src/stories/InlineSelector.stories.js

@@ -1,4 +1,4 @@
-import PsInlineSelector from "../components/controls/PsInlineSelector.vue"
+import PsInlineSelector from '../components/controls/PsInlineSelector.vue'
 
 export default {
     title: 'Components/InlineSelector',

package/src/stories/Playground.stories.js

@@ -9,7 +9,7 @@ const Template =  (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsScrollBar},
     template: `
-            <PsScrollBar v-bind='$props'></PsScrollbar>
+            <PsScrollBar v-bind='$props' thumbColor="blue"></PsScrollbar>
     `
 })
 

package/src/util/imageLoader.js

@@ -19,7 +19,7 @@ export default ({ imageUrl, onProgress = null, returnsBase64 = true }) => {
     }
 
     xhr.onloadend = () => {
-      const contentType = xhr.getResponseHeader("Content-Type")
+      const contentType = xhr.getResponseHeader('Content-Type')
       if (!contentType.includes('image')) {
         reject(xhr)
       } else {