@policystudio/policy-studio-ui-vue 1.0.30 → 1.0.33

package/src/components/tooltip/PsTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @mouseover="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
+  <div @mouseenter="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
     <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
       <slot name="trigger"></slot>
     </div>
@@ -28,24 +28,36 @@
 
 <script>
 export default {
-  name: "PsTooltip",
+  name: 'PsTooltip',
   props: {
+    /**
+     * It sets the title of the tooltip if needed.
+     */
     title: {
       type: String,
     },
+    /**
+     * It disables the dialog section.
+     */
     ignoreDialog: {
       type: Boolean,
       default: false,
     },
+    /**
+     * It sets the layout of the tooltip if needed. Usefull when using rich or dialog tooltip.
+     */
     layout:{
         type: String,
     },
+    /**
+     * It sets a additional styling if needed.
+     */
     cssClass:{
         type: String,
     }
   },
   inheritAttrs: true,
-  emits: ["show"],
+  emits: ['show'],
   data() {
     return {
       show: false,
@@ -58,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(() => {
@@ -78,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() {
@@ -91,12 +103,16 @@ export default {
       const rectDialog = dialog.getBoundingClientRect()
       const rectTrigger = trigger.getBoundingClientRect()
       const windowWidth = document.documentElement.clientWidth
-      dialog.style.top = `${rectTrigger.y + rectTrigger.height}px`
+      dialog.style.top = `${rectTrigger.y + rectTrigger.height + 8}px`
 
       if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
         dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else if (rectTrigger.x - Math.abs(rectTrigger.width-rectDialog.width) < 0) {
+        dialog.style.left = `${rectTrigger.x + 10}px`  
+      } else if (rectDialog.width >= rectTrigger.width){
+        dialog.style.left = `${rectTrigger.x - ((rectDialog.width - rectTrigger.width)/2)}px`
       } else {
-        dialog.style.left = `${rectTrigger.x}px`
+        dialog.style.left = `${rectTrigger.x + ((rectTrigger.width - rectDialog.width)/2)}px`
       }
 
       setTimeout(() => {

package/src/components/ui/PsIcon.vue

@@ -25,31 +25,55 @@ import imageLoader from '../../util/imageLoader'
 export default {
   name: 'AppIcon',
   props: {
+    /**
+     * It sets the text key to get the svg icon in Google Fonts. Make sure to get the correct description of your icon on https://fonts.google.com/.
+     */
     icon: {
       type: String,
       default: 'more_horiz'
     },
+    /**
+     * It sets the type of the icon.
+     */
     type: {
       type: String,
     },
+    /**
+     * It sets the style of the icon.
+     */
     iconClasses: {
       type: String
     },
+    /**
+     * It sets the size of the icon. 
+     */
     size: {
       type: [Number, String],
     },
+    /**
+     * It sets the width of the icon.
+     */
     width: {
       type: [Number, String],
       default: 24
     },
+    /**
+     * It sets the height of the icon.
+     */
     height: {
       type: [Number, String],
       default: 24
     },
+    /**
+     * It sets fill property of the icon.
+     */
     stroke: {
       type: String,
       default: null
     },
+    /**
+     * It sets the color of the icon.
+     */
     color: {
       type: String,
       default: null,
@@ -59,10 +83,16 @@ export default {
           typeof(tailwindConfig.theme.colors[value]) != 'undefined'
       }
     },
+    /**
+     * It set a animation icon if needed.
+     */
     loaderIcon: {
       type: String,
       default: 'hourglass_top'
     },
+    /**
+     * It sets a error when the icon is not available.
+     */
     loaderErrorIcon: {
       type: String,
       default: 'more_horiz'

package/src/index.js

@@ -5,6 +5,10 @@ import PsSlider from './components/controls/PsSlider.vue'
 import PsSwitch from './components/controls/PsSwitch.vue'
 import PsToggle from './components/controls/PsToggle.vue'
 import PsInput from './components/forms/PsInput.vue'
+import PsDropdown from './components/forms/PsDropdown.vue'
+import PsDropdownList from './components/forms/PsDropdownList.vue'
+import PsInputTextArea from './components/forms/PsInputTextArea.vue'
+import PsInputSelect from './components/forms/PsInputSelect.vue'
 import PsDialog from './components/notifications/PsDialog.vue'
 import PsToast from './components/notifications/PsToast.vue'
 import PsTabHeader from './components/tabs/PsTabHeader.vue'
@@ -22,8 +26,9 @@ import PsDraggable from './components/controls/PsDraggable.vue'
 import PsCardInfos from './components/badges-and-tags/PsCardInfos.vue'
 import PsChartLegend from './components/badges-and-tags/PsChartLegend.vue'
 import PsInlineSelector from './components/controls/PsInlineSelector.vue'
-import PsInputTextArea from './components/forms/PsInputTextArea.vue'
-import PsInputSelect from './components/forms/PsInputSelect.vue'
+import PsScrollBar from './components/playground/PsScrollBar.vue'
+
+
 
 export default {
   install(Vue) {
@@ -53,6 +58,25 @@ export default {
     Vue.component('PsInlineSelector', PsInlineSelector)
     Vue.component('PsInputTextArea', PsInputTextArea)
     Vue.component('PsInputSelect', PsInputSelect)
+    Vue.component('PsDropdown',PsDropdown)
+    Vue.component('PsDropdownList', PsDropdownList)
+    Vue.component('PsScrollBar', PsScrollBar)
+    
+    Vue.directive('click-outside', {
+      bind: function (el, binding, vnode) {
+        el.clickOutsideEvent = function (event) {
+          // here I check that click was outside the el and his children
+          if (!(el == event.target || el.contains(event.target))) {
+            // and if it did, call method provided in attribute value
+            vnode.context[binding.expression](event)
+          }
+        }
+        document.body.addEventListener('click', el.clickOutsideEvent)
+      },
+      unbind: function (el) {
+        document.body.removeEventListener('click', el.clickOutsideEvent)
+      },
+    })
   },
 }
 
@@ -83,4 +107,8 @@ export {
   PsInlineSelector,
   PsInputTextArea,
   PsInputSelect,
+  PsDropdown,
+  PsDropdownList,
+  PsScrollBar
 }
+

package/src/stories/Accordion.stories.js

@@ -1,21 +1,10 @@
-import PsAccordionItem, {
-  iconTypes,
-  fontCss,
-} from '../components/accordion/PsAccordionItem.vue'
-import PsAccordion, { sizes } from '../components/accordion/PsAccordion.vue'
+import PsAccordionItem  from '../components/accordion/PsAccordionItem.vue'
+import PsAccordion from '../components/accordion/PsAccordion.vue'
 
 export default {
   title: 'Components/Accordion',
   component: PsAccordion,
   subcomponents: { PsAccordionItem },
-  argTypes: {
-    size: { control: { type: 'select', options: sizes } },
-    iconType: { control: { type: 'select', options: iconTypes } },
-    fontCss: { control: { type: 'select', options: fontCss } },
-  },
-  args: {
-    title: 'Section 1',
-  },
 }
 
 
@@ -23,8 +12,8 @@ export const Index = (args, { argTypes }) => ({
   props: Object.keys(argTypes, args),
   components: { PsAccordion, PsAccordionItem },
   template:
-    `<div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">                    
-
+    `
+    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">                    
       <div>
         <div class="psui-my-4">
           <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Big</h1>
@@ -32,6 +21,10 @@ export const Index = (args, { argTypes }) => ({
         <PsAccordion layout="big" class="psui-bg-white">
           <PsAccordionItem title="Header 01">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
           </PsAccordionItem>      
           <PsAccordionItem title="Header 02">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
@@ -49,6 +42,9 @@ export const Index = (args, { argTypes }) => ({
         <PsAccordion layout="medium" class="psui-bg-white">
           <PsAccordionItem title="Header 01">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
           </PsAccordionItem>      
           <PsAccordionItem title="Header 02" :opened="false">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
@@ -58,38 +54,6 @@ export const Index = (args, { argTypes }) => ({
           </PsAccordionItem>      
         </PsAccordion>
       </div>
-      
-      <div>
-        <div class="psui-my-4">
-          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Variations</h1>
-        </div>
-        <PsAccordion layout="medium" class="psui-bg-white" iconOpened="thumb_down" iconClosed="thumb_up">
-          <PsAccordionItem title="Custom Icon">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-          <PsAccordionItem title="Initial Content Opened" :opened="true">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-        </PsAccordion>
-      </div>
-      
-      <div>
-        <div class="psui-my-4">
-          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Custom Icons By Accordion Item</h1>
-        </div>
-        <PsAccordion layout="medium" class="psui-bg-white">
-          <PsAccordionItem title="Custom Icon" iconOpened="thumb_down" iconClosed="thumb_up">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-          <PsAccordionItem title="Initial Content Opened" :opened="true">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-          <PsAccordionItem title="Initial Content Opened" iconOpened="visibility_off" iconClosed="visibility_on">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>
-        </PsAccordion>
-      </div>
-      
-     </div>    
+    </div>  
     `,
 })

package/src/stories/Button.stories.js

@@ -6,12 +6,12 @@ export default {
   argTypes: {
     size: { control: { type: 'select', options: sizes } },
     disabled: { control: 'boolean' },
-    icon: { control: { type: 'select',  options: icons} },
-    iconRight: { control: { type: 'select',  options: icons} }
+    icon: { control: { type: 'select', options: icons } },
+    iconRight: { control: { type: 'select', options: icons } },
   },
 }
 
-const TemplateDefault = (args, {argTypes}) => ({
+const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsButton },
   template: `
@@ -19,7 +19,7 @@ const TemplateDefault = (args, {argTypes}) => ({
     <p>Size: Big</p> 
     <div style="display: flex; flex-direction: column; gap: 10px;">
       <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
-          <span style="text-align: center; color: red;">Solid Style</span>
+          <span style="text-align: center; color: black;">Solid Style</span>
           <PsButton label='Left Icon'  layout='solid' icon='verified' iconPosition='left'/>
           <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
           <PsButton label='Text Only'  layout='solid' />
@@ -46,11 +46,20 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Text Only' layout='onlytext'/>
           <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
       </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='caution' />
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
+    </div>
+
+
     </div>
     <p>Size: Medium</p>
     <div style="display: flex; flex-direction: column; gap: 10px;">
       <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: red;">Solid Style</span>
+          <span style="text-align: center; color: black;">Solid Style</span>
           <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
           <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
           <PsButton label='Text Only' layout='solid'  size='medium'/>
@@ -77,11 +86,18 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Text Only' layout='onlytext' size='medium'/>
           <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
       </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='caution' size='medium'/>
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>      
     </div>
     <p>Size: Small</p>
     <div style="display: flex; flex-direction: column; gap: 10px;">
       <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
-          <span style="text-align: center; color: red;">Solid Style</span>
+          <span style="text-align: center; color: black;">Solid Style</span>
           <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
           <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
           <PsButton label='Text Only' layout='solid' size='small'/>
@@ -94,9 +110,16 @@ const TemplateDefault = (args, {argTypes}) => ({
           <PsButton label='Text Only' layout='onlytext' size='small'/>
           <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
       </div>
+      <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='caution' size='small'/>
+          <PsButton label='Disabled' layout='caution' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
     </div>
     </div>
-  `
+  `,
 })
 
 export const Default = TemplateDefault.bind({})

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',
@@ -11,34 +11,21 @@ const Template = (args, { argTypes }) => ({
   data: ()=>{
     return{
       isChecked: null,
+      isCheckedTwo: null,
     }
   },
-  template: `<div >
-              <PsChips v-bind='$props' @update:checked='isChecked = $event' :checked='isChecked'/>
+  template: `<div style="display:flex; gap: 10px;">
+                <PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
+                <PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
+                <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
               </div>
               `
 })
 
-export const Simple = Template.bind({})
-Simple.args = {
+export const Default = Template.bind({})
+Default.args = {
   label: 'Simple Chip',
-  icon:"",
-}
-
-export const SimpleWithIcon = Template.bind({})
-SimpleWithIcon.args = {
-  label: 'Simple With Icon',
-  icon: 'home',
-}
-
-export const Radio = Template.bind({})
-Radio.args = {
-  label: 'Radio Chip',
-  type:'radio'
-}
-
-export const Checkbox = Template.bind({})
-Checkbox.args = {
-  label: 'Checkbox Chip',
-  type: 'checkbox'
+  icon:'',
 }

package/src/stories/Dropdown.stories.js

@@ -1,32 +1,99 @@
 import PsDropdown from '../components/forms/PsDropdown.vue'
+import PsDropdownList from '../components/forms/PsDropdownList.vue'
 export default {
   title: 'Components/Dropdown',
-  component: PsDropdown,
-  argTypes: {},
+  component: { PsDropdown, PsDropdownList },
 }
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { PsDropdown },
+  components: { PsDropdown, PsDropdownList },
   template: `
-  <div>
-    <PsDropdown
-      buttonClasses="psui-p-3 "
-    >
-      <template v-slot:dropdownTrigger>
-        <div>Custom Trigger</div>
+  <div style='background: #E6ECF2; width:1200px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
+    <PsDropdown>
+      <template #dropdownTrigger>
+        <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
       </template>
-      <template v-slot:items>
+      <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>Small list of the drop down</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>
+        </div>
       </template>
     </PsDropdown>
+
+    <PsDropdown>
+    <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 #items>
+        <PsDropdownList v-bind='$props'></PsDropdownList>
+      </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 CustomTrigger = Template.bind({})
-CustomTrigger.args = {
-  title: 'Custom trigger',
+export const DropdownMenu = Template.bind({})
+DropdownMenu.args = {
+  items: [
+    'Selectable option 01',
+    'Selectable option 02',
+    'Selectable option 03',
+    'Selectable option 04',
+    'Selectable option 05',
+    'Selectable option 06',
+  ],
 }

package/src/stories/Icon.stories.js

@@ -0,0 +1,21 @@
+import PsIcon from '../components/ui/PsIcon.vue'
+
+export default {
+    title: 'Components/Icon',
+    component: PsIcon,
+    argTypes: {},
+  }
+  
+  const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PsIcon },
+    template: `
+    <div class='psui-flex'>  
+      <PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg" />
+      <PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg"/>
+    </div>
+    `,
+  })
+  
+  export const IconSimple = Template.bind({})
+  IconSimple.args = {}

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

@@ -0,0 +1,16 @@
+import PsScrollBar from '../components/playground/PsScrollBar.vue'
+
+export default {
+    title: 'Components/Playground',
+    component: PsScrollBar
+}
+
+const Template =  (args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PsScrollBar},
+    template: `
+            <PsScrollBar v-bind='$props' scrollWidth='30'></PsScrollbar>
+    `
+})
+
+export const ScrollBar = Template.bind({})

package/src/stories/Switch.stories.js

@@ -7,6 +7,12 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsSwitch },
+  data(){
+    return {
+      dt: false
+
+    }
+  },
   template: `
     <div style='display: flex; gap:10px;'> 
       <div style='display: flex; gap: 10px; flex-direction: column; margin-right: 10px;'>
@@ -16,8 +22,8 @@ const Template = (args, { argTypes }) => ({
       </div>
       <div style='display: flex; gap: 10px; flex-direction: column;'>
         <span>Disable</span>
-        <PsSwitch v-bind="$props" label='Switch1'  :value="${false}" size='big'/>
-        <PsSwitch v-bind="$props" label='Switch2' :value="${false}" size='small'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch1'   size='big'/>
+        <PsSwitch v-bind="$props" v-model="dt" label='Switch2' size='small'/>
       </div>
       <div style='display: flex; gap: 10px; flex-direction: column;'>
       <span>Enable</span>