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

package/src/components/controls/PsToggle.vue

@@ -3,11 +3,11 @@
       <button 
         type="button"
         v-for="(item, index) in items"
-        :key="index"
+        :key="getKeyValue(item) + index"
         @click="selectOption(item)"
-        :class="{ 'status-active': getSelected === item }"
+        :class="{ 'status-active': selected == item }"
       >
-        {{ item }}
+        {{ getKeyLabel(item) }}
       </button>
     </div>
 </template>
@@ -18,26 +18,47 @@
 export default {
   name: 'PsToggle',
   props: {
+    /**
+    * It sets the items which will be used to create the toggle tab. See Figma - Controls & Selector for more information.
+     */
     items: {
       type: Array,
       required: true
     },
+    /**
+    * It sets the value selected.
+     */
     selected: {},
-  },
-  computed: {
-    getSelected() {
-      if (this.selected) {
-        return this.selected
-      } else {
-        return false
-      }
+    /**
+    * 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'
+    }
   },
   methods: {
     selectOption(item) {
       this.$emit('update:selected', item)
       this.$emit('change', item)
-    }
+    },
+    getKeyLabel(item) {
+      if(typeof this.keyLabel == 'function') return this.keyLabel(item)
+      if(typeof item === 'object') return item[this.keyLabel]
+      return item
+    },
+    getKeyValue(item) {
+      if(typeof this.keyValue == 'function') return this.keyValue(item)
+      if(typeof item === 'object') return item[this.keyLabel]
+      return item
+    },
   }
 }
 </script>

package/src/components/datatable/PsDataTable.vue

@@ -35,6 +35,9 @@ export const alignment = ['center', 'right', 'left']
 export default {
   name: 'PsDataTable',
   props: {
+    /**
+     * It sets the type of the data table. eg: simple or rich.
+     */
     type: {
       type: String,
       required: true,
@@ -42,17 +45,31 @@ export default {
         return ['simple', 'rich'].indexOf(value) !== -1
       },
     },
+    /**
+    * It sets the values which will be use to render the header.
+     */
     header: {
       type: Array,
       required: true,
     },
+    /**
+    * It sets the values which will be use to render the body.
+     */
     data: {
       type: Array,
-      required: true
+      default() {
+        return []
+      }
     },
+    /**
+    * It sets the values which will be use to render the footer.
+     */
     footer: {
       type: Array,
     },
+    /**
+    * It sets the alignment of the whole context.
+     */
     align: {
       type: String,
       default: 'left',
@@ -60,6 +77,9 @@ export default {
         return ['center', 'right', 'left'].indexOf(value) !== -1
       }
     },
+    /**
+    * It sets additional styling if needed.
+     */
     cssStyle: {
       type: String,
       default: 'psui-text-gray-60'

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,80 +1,74 @@
 <template>
-<div class="background-temporary">
-  <div 
-    class="psui-el-dropdown-menu"
-    ref="PSDropdown"
-  >
-
-    <div class="psui-bg-red" ref="PSDropdownTrigger" v-if="$slots.dropdownTrigger" @click="show && !toggleWhenActive ? '' : toggle()" >
-      <slot name="dropdownTrigger" ></slot>
+  <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" 
-      class="psui-el-dropdown-menu-button" 
-      :class="[buttonClasses]"
+      @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" 
-      aria-orientation="vertical" 
+      role="menu"
+      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>
-import { randomString, getParentScrollableEl } from '../../util/GeneralFunctions'
+// 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: {
+  /**
+    * It sets a minimun width for the dropdown menu.
+   */
+    minWidthDropDown: {
       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: {
-      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() {
@@ -82,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()
@@ -110,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')
@@ -149,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() {
@@ -162,51 +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>
-
-<style scoped>
-
-  .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

@@ -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,22 +28,40 @@ 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',

package/src/components/forms/PsInputTextArea.vue

@@ -21,50 +21,63 @@
 
 <script>
 export default {
-  name: "PsInputTextArea",
+  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)
     },