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

package/src/components/ui/PsIcon.vue

@@ -4,6 +4,7 @@
       v-if="getIconType === 'material-icons'"
       class="material-icons-round"
       :class="[getIconClasses]"
+      :style="{ fontSize: `${size}px`}"
     >
       {{ getIcon }}
     </span>
@@ -11,8 +12,8 @@
     <inline-svg
       v-else
       :src="icon"
-      :width="getWidth"
-      :height="getHeight"
+      :width="size"
+      :height="size"
       :stroke="getColor"
       :fill="getColor"
     ></inline-svg>
@@ -32,38 +33,30 @@ export default {
       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
+      type: String,
+      default: null
     },
+
     /**
-     * It sets the size of the icon. 
+     * 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.
      */
@@ -71,6 +64,7 @@ export default {
       type: String,
       default: null
     },
+
     /**
      * It sets the color of the icon.
      */
@@ -83,6 +77,7 @@ export default {
           typeof(tailwindConfig.theme.colors[value]) != 'undefined'
       }
     },
+
     /**
      * It set a animation icon if needed.
      */
@@ -90,6 +85,7 @@ export default {
       type: String,
       default: 'hourglass_top'
     },
+    
     /**
      * It sets a error when the icon is not available.
      */
@@ -120,14 +116,9 @@ export default {
     },
     getIconClasses() {
       if(this.iconClasses) return this.iconClasses
-      return `${this.size} ${this.color}`
-    },
-    getWidth() {
-      if(this.size) return this.size
-      return this.width
+      return `${this.color}`
     },
     getHeight() {
-      if(this.size) return this.size
       return this.height
     },
     getColor() {

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,46 +11,21 @@ const Template = (args, { argTypes }) => ({
   data: ()=>{
     return{
       isChecked: null,
+      isCheckedTwo: null,
     }
   },
   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='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'
-}
-
-export const Rich = Template.bind({})
-Rich.args = {
-  label: 'Rich Chip',
-  type: 'button',
-  icon: 'text_snippet',
-  layout: 'rich'
+  icon:'',
 }

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/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

@@ -9,7 +9,7 @@ const Template =  (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsScrollBar},
     template: `
-            <PsScrollBar v-bind='$props'></PsScrollbar>
+            <PsScrollBar v-bind='$props' scrollWidth='30'></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 {