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

package/src/components/forms/PsDropdown.vue

@@ -1,20 +1,18 @@
 <template>
-<div class="background-temporary">
   <div 
     class="psui-el-dropdown-menu"
     ref="PSDropdown"
+    v-click-outside="close"
   >
 
-    <div class="psui-bg-red" ref="PSDropdownTrigger" v-if="$slots.dropdownTrigger" @click="show && !toggleWhenActive ? '' : toggle()" >
-      <slot name="dropdownTrigger" ></slot>
+    <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" 
-      class="psui-el-dropdown-menu-button" 
-      :class="[buttonClasses]"
       :id="id"
       aria-haspopup="true" 
       aria-expanded="true"
@@ -23,55 +21,46 @@
       <slot v-if="show && $slots.buttonLabelOnShow" name="buttonLabelOnShow"></slot>
       <slot v-else name="buttonLabel"></slot>
     </button>
-
     <div 
       ref="PSDropdownDialog"
       role="menu" 
-      class="psui-el-dropdown-menu-dialog" 
+      class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300" 
       aria-orientation="vertical" 
       :aria-labelledby="id"
-      :class="[dialogClasses]"
-      :style="{ minWidth: minWidthDropdown, marginLeft: marginLeft }"
+      :style="{ minWidth: minWidthDropDown }"
     >
-
-      <div class="psui-el-dropdown-menu-dialog-category-divider">
-        <h2 class="ts--accent--1" v-if="title">{{ title }}</h2>
+      <div class="psui-el-dropdown-menu-dialog">
         <slot name="items"></slot>
       </div>
-
     </div>
   </div>
-</div>
 </template>
 
 <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'
 
 export default {
   name: 'PsDropdown',
   props: {
-    buttonClasses: {
-      type: String,
-      default: 'psui-bg-white psui-border psui-border-blue'
-    },
-    title: {
-      type: String,
-    },
-    dialogClasses: {
-      type: String,
-      default: 'psui-p-6 psui-left-0 psui-bg-white'
-    },
-    minWidthDropdown: {
-      type: [String, Number],
-    },
-    maxWidthDropDown: {
+  /**
+    * It sets a minimun width for the dropdown menu.
+   */
+    minWidthDropDown: {
       type: String,
       default: '340px'
     },
+    /**
+    * It's a boolean responsible for showing a slot within the html tag button.
+     */
     buttonLabelOnShow: {
       type: Boolean,
       default: false
     },
+    /**
+    * It's a property responsible for toggling the dropdown menu. default: true.
+     */
     toggleWhenActive: {
       type: Boolean,
       default: true
@@ -179,34 +168,3 @@ export default {
 }
 </script>
 
-<style>
-
-  .background-temporary {
-    width: 300px;
-    height: 200px;
-    left: 0;
-    top: 8px;
-
-    background-color: #e6ecf2;
-    border: 1.5px dashed #7b61ff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* .dropdown-button {
-    background-color: transparent;
-    padding-top: 2.5px;
-    padding-bottom: 2.5px;
-    min-height: 27px;
-  } */
-
-  /* .dropdown-button:focus {
-    outline: none;
-  } */
-
-  /* .psui-dropdown-dialog {
-    transition: opacity 150ms ease-in-out;
-  } */
-  
-</style>

package/src/components/forms/PsDropdownList.vue

@@ -0,0 +1,82 @@
+<template>
+  <ul class="psui-el-dropdown-menu-list">
+    <li 
+      v-for="item in getItems" 
+      :key="getKeyValue(item)"
+      @click="selectItem(item)"
+    >
+    <span>{{ getKeyLabel(item) }}</span>
+    </li>
+  </ul>  
+</template>
+
+<script>
+export default {
+  name: 'PsDropdownSimple',
+  props: {
+    /**
+    * 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:{
+      type: String,
+    },
+    /**
+    * It sets the items which will be displayed on the dropdown menu.
+     */
+    items: {
+      type: Array,
+      required: true
+    },
+    /**
+    * It sets the item selected on the dropdown menu.
+     */
+    selected: {},
+    /**
+    * It sets the key label of your items if needed. 
+     */
+    keyLabel: {
+      type: [String, Function],
+      default: 'label'
+    },
+    /**
+    * It sets the key value of your items if needed.
+     */
+    keyValue: {
+      type: [String, Function],
+      default: 'value'
+    }
+  },
+  computed: {
+    getSelected() {
+      if (this.selected) {
+        if (typeof this.selected === 'object' && this.selected[this.keyValue] ) {
+          return this.selected[this.keyValue]        
+        } else {
+          return this.selected
+        }
+      } else {
+        return false
+      }
+    },
+    getItems() {
+      return this.items
+    },
+  },
+  methods: {
+    selectItem(item) {
+      this.$emit('update:selected', this.getKeyValue(item) )
+      this.$emit('change', item )
+    },
+    getKeyLabel(item) {
+      if(typeof this.keyLabel == 'function') return this.keyLabel(item)
+      if(typeof item === 'string') return item
+      return item[this.keyLabel]
+    },
+    getKeyValue(item) {
+      if(typeof this.keyValue == 'function') return this.keyValue(item)
+      if(typeof item === 'string') return item
+      return item[this.keyValue]
+    },
+  }
+}
+</script>

package/src/components/forms/PsInput.vue

@@ -46,35 +46,62 @@
 export default {
 	name: 'PsInput',  
   props: {
+    /**
+    * It sets the type of your button. default: text.
+     */
     type: {
       type: String,
       default: 'text'
     },
+    /**
+     * It sets a placeholder for your button if needed.
+     */
 		placeholder: {
 			type: String
 		},
+    /**
+     * It sets the label of the input if needed.
+     */
 		label: {
 			type: String
 		},
+    /**
+     * It sets a text below the input. See Figma Text fileds & Forms.
+     */
 		hint: {
 			type: String
-		},    
+		},
+    /**
+     * It sets the layout of your button. eg: mini and default. 
+     */    
     layout: {
       type: String,
       default: 'default',
       validator: (value) => ['default', 'mini'].includes(value)
     },
+    /**
+     * It sets the value of the button.
+     */
     value: {
       required: true,
     },
+    /**
+     * It disables the input. All mouse events are disabled.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * It sets if the input found any error.
+     */
     hasError: {
       type: [String, Boolean],
       default: false
     },
+    /**
+     * It sets a active css class based on a boolean property.
+     */
     active: {
       type: Boolean,
       default: false

package/src/components/forms/PsInputSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="psui-el-input-select" :class="[{'disabled':disabled}, {'selected':selectedClass}]">
+  <div class="psui-el-input-select" :class="[{'disabled':disabled}, getComponentClass, {'selected':selectedClass}]">
     <label :for='label' v-if="label" >{{ label }}</label>
     <select 
       :name="label"
@@ -9,7 +9,7 @@
       <option value='' disabled>Select</option>
       <option v-for="item in getItems" :value="item[keyValue]" :key="item[keyValue]">{{ item[keyLabel] }}</option>
     </select>
-    <p v-if="optionalLabel && !disabled" class="psui-el-input-helper">{{ optionalLabel }}</p>
+    <p v-if="optionalLabel && !disabled && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
   </div>
 </template>
 
@@ -18,6 +18,9 @@
 export default {
   name: 'PsSelectInput',
   props: {
+    /**
+     * It sets the items which will be rendered within the select input.
+     */
     items: {
       required: true
     },
@@ -25,21 +28,44 @@ export default {
       default: '',
       required: true
     },
+    /**
+     * It sets the value label of the select input if needed.
+     */
     label: {
       default: ''
     },
+    /**
+     * It sets a o optional label below the select input.
+     */
     optionalLabel:{
       default:''
     },
+    /**
+     * It sets the key label of your items if needed.
+     */
     keyLabel: {
       default: 'label'
     },
+    /**
+     * It sets the key value of yout items if needed.
+     */
     keyValue: {
       default: 'value'
     },
+    /**
+     * It disables the select input. All mouse events are disabled.
+     */
     disabled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * It sets the layout of the select input. eg: default and mini.
+     */
+    layout:{
+      type: String,
+      default: 'default',
+      validator: (value) => ['default','mini'].includes(value)
     }
   },
   data(){
@@ -48,6 +74,9 @@ export default {
     }
   },
   computed: {
+    getComponentClass(){
+      return `layout-${this.layout}`
+    },
     childValue: {
       get() {
         return this.value

package/src/components/forms/PsInputTextArea.vue

@@ -23,48 +23,61 @@
 export default {
   name: "PsInputTextArea",
   props: {
-        placeholder: {
-          type: String,
-          default: ''
-        },
-        value: {
-          required: true,
-        },
-        label: {
-          type: String,
-        },
-        optionalLabel:{
-          type: String,
-        },
-        action: {
-          type: Function,
-          required: false
-        },
-        required:{
-            type: Boolean,
-            default:true
-        },
-        autocapitalize: {
-          type: String,
-          default: 'sentences'
-        },
-        autocomplete: {
-          type: Boolean,
-          default: true
-        },
-        rows: {
-          type: Number,
-          default: 5
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        }
+    /**
+     * It sets the placeholder of the textarea input. 
+     */
+    placeholder: {
+      type: String,
+      default: ''
     },
-    methods: {
-    makeAction() {
-      if(this.action && typeof(this.action) == 'function') this.action()
+    /**
+     * It sets the value selected of the textarea input.
+     */
+    value: {
+      required: true,
+    },
+    /**
+     * It sets the label of the textarea input.
+     */
+    label: {
+      type: String,
+    },
+    /**
+     * It sets a optional label if needed.
+     */
+    optionalLabel:{
+      type: String,
+    },
+    /**
+     * It sets aria-required property. eg: true or false.
+     */
+    required:{
+        type: Boolean,
+        default:true
+    },
+    /**
+     * It sets the type of autocapitalize. See mdn web-doc for full information. default: sentences.
+     */
+    autocapitalize: {
+      type: String,
+      default: 'sentences'
     },
+    /**
+     * It sets the size of the textarea input.
+     */
+    rows: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * It disabled the textarea input. All mouse events are disabled.
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    }
+    },
+    methods: {
     onBlur(){
         this.$emit('blur', this.$event)
     },

package/src/components/notifications/PsDialog.vue

@@ -27,23 +27,38 @@
 export default {
   name: 'PsDialog',
   props: {
+    /**
+     * It sets the theme of the dialog. eg: informative, success and alert.
+     */
     theme: {
       type: String,
       default: 'informative',
       validator: (value) => ['informative', 'success', 'alert'].includes(value)
     },
+    /**
+     * It set the which will be displayed when component is rendered.
+     */
     message: {
       type: String,
     },
+    /**
+     * It sets the direction of the items within the dialog. See Figma Notifications for full information.
+     */
     layout:{
       type: String,
       default: 'horizontal',
       validator: (value) => ['horizontal', 'vertical'].includes(value)
     },
+    /**
+     * It sets a close button if needed.
+     */
     hasClose: {
       type: Boolean,
       default: true
     },
+    /**
+     * 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: 'info'

package/src/components/notifications/PsToast.vue

@@ -12,19 +12,31 @@
 export default {
   name: 'PsToast',
   props: {
+    /**
+     * It sets the layout of the toast. eg: info, success, warning and error.
+     */
     layout: {
       type: String,
       default: 'info',
       validator: (value) => ['info', 'success', 'warning', 'error'].includes(value)
     },
+    /**
+     * It sets a supportive layout. eg: soft and intese. See Figma - Notification for full information.
+     */
     fill: {
       type: String,
       default: 'intense',
       validator: (value) => ['soft', 'intense'].includes(value)
     },
+    /**
+     * It sets the message which will be displayed when component is rendered.
+     */
     message: {
       type: String,
     },
+    /**
+     * 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,
     }
@@ -36,3 +48,6 @@ export default {
   },
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsToast.scss */ </style>
+

package/src/components/playground/PsScrollBar.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+      Playground
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'PsScrollBar',
+}
+</script>
+
+<style>
+
+</style>

package/src/components/tabs/PsTabHeader.vue

@@ -13,7 +13,7 @@
           @click="selectTab(item)"
           :class="getButtonClass(item)"
         >
-          <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" type="blue">
+          <PsRichTooltip v-if="item.tooltip" :title="item.tooltip" layout="blue">
             <template v-slot:trigger>
               <span>{{ item[keyLabel] }}</span>              
             </template>
@@ -31,27 +31,45 @@ export default {
   name: 'PsTabHeader',
   components: { PsRichTooltip },
   props: {
+    /**
+     * It sets the layout of the tabheader. eg: standard, underline and folder. 
+     */
     layout: {
       type: String,
       default: 'standard',
       validator: (value) => ['standard', 'underline', 'folder'].includes(value)
     },
+    /**
+     * It sets the tabs which will be rendered.
+     */
     items: {
       type: Array,
       required: true
     },
+    /**
+     * It sets the key label of the items if needed.
+     */
     keyLabel: {
       type: String,
       default: 'label'
     },
+    /**
+     * It sets the key value of the items if needed.
+     */
     keyValue: {
       type: String,
       default: 'value'
     },
+    /**
+     * It disabled the tab header. All mouse events are disabled.
+     */
     disabled: {
       type: Boolean,
       default: false
     },
+    /**
+     * It sets the tab seleced.
+     */
     selected: {},
   },
   computed: {