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

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" type="blue">
-            <template v-slot:trigger>
               <span>{{ item[keyLabel] }}</span>              
-            </template>
-          </PsRichTooltip>
-          <span v-else>{{ item[keyLabel] }}</span>
         </button>
       </slot>
     </template>
@@ -31,27 +39,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: {

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,52 +1,135 @@
 <template>
-  <PsTooltip :layout="layout" :cssClass="cssClass" :title="title">
-    <template v-slot:trigger>
+  <div @mouseenter="open" v-click-outside="close" ref="tooltip" class='psui-el-tooltip'>
+    <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
       <slot name="trigger"></slot>
-    </template>
-    <template
-      v-slot:content
-    >
-      <slot name="content"></slot> 
-      <button
-        v-if="buttonText"
-        @click="onClick"
+    </div>
+
+    <div class='psui-el-tooltip-wrapper'>
+      <div
+        role="menu"
+        ref="dialog"
+        class='psui-el-tooltip-dialog'
+        :class="cssClass"
       >
-        {{ buttonText }}
-      </button>
-    </template>
-  </PsTooltip>
+        <div
+          class="psui-el-tooltip-content"
+          aria-orientation="vertical"
+          :class="getComponentClass"
+        >
+          <h2 v-if="title">{{ title}}</h2>
+          <div class="psui-el-tooltip-content-wrapper">
+            <slot name="content"></slot>
+            <button
+              v-if="buttonText"
+              @click="onClick"
+            >
+              {{ buttonText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import PsTooltip from "./PsTooltip.vue"
 
 export default {
-  name: "PsDialogTooltip",
-  components: { PsTooltip },
+  name: 'PsDialogTooltip',
   props: {
-    text: {
-      type: String,
-    },
+    /**
+     * It sets the title of the tooltip if needed.
+     */
     title: {
       type: String,
     },
+    /**
+     * It sets the label of the button within the tooltip if needed.
+     */
     buttonText: {
       type: String,
     },
+    /**
+     * It sets the layout of the tooltip. eg: white, dark and color.
+     */
     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.
+     */
     cssClass: {
       type: String,
       required: false,
     },
   },
-  emits: ["click"],
+  inheritAttrs: true,
+  emits: ['show', 'click'],
+  data() {
+    return {
+      show: false,
+      closingTimeout: null,
+    }
+  },
+  computed:{
+    getComponentClass(){
+      return `layout-${this.layout}`
+    }
+  },
+  mounted() {
+    document.addEventListener('resize', this.updatePosition)
+  },
+  beforeDestroy() {
+    document.removeEventListener('resize', this.updatePosition)
+  },
   methods: {
+    open() {
+      if (this.show || this.ignoreDialog) return
+      this.$emit('show')
+      this.show = true
+
+      this.$refs.dialog.style.display = 'block'
+      this.$refs.dialog.style.opacity = 0
+
+      setTimeout(() => {
+        this.updatePosition()
+      }, 10)
+    },
+    close() {
+      if (this.show && this.$refs.dialog) {
+        this.$emit('close')
+        this.show = false
+
+        this.$refs.dialog.style.display = 'none'
+      }
+    },
+    updatePosition() {
+      const dialog = this.$refs.dialog
+      const trigger = this.$refs.tooltiptrigger
+
+      const rectDialog = dialog.getBoundingClientRect()
+      const rectTrigger = trigger.getBoundingClientRect()
+      const windowWidth = document.documentElement.clientWidth
+      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 + ((rectTrigger.width - rectDialog.width)/2)}px`
+      }
+
+      setTimeout(() => {
+        dialog.style.opacity = 100
+      }, 100)
+    },
     onClick() {
-      this.$emit("click", this.$event)
+      this.$emit('click', this.$event)
     },
   },
 }

package/src/components/tooltip/PsRichTooltip.vue

@@ -10,27 +10,30 @@
 </template>
 
 <script>
-import PsTooltip from "../tooltip/PsTooltip.vue"
+import PsTooltip from '../tooltip/PsTooltip.vue'
 
 export default {
-  name: "PsRichTooltip",
+  name: 'PsRichTooltip',
   components: { PsTooltip },
   props: {
+    /**
+     * It sets the title of the tooltip if needed.
+     */
     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),
-    },
-    text: {
-      type: String,
+      default: 'gray',
+      validator: (type) => ['gray', 'red', 'blue'].includes(type),
     },
     cssClass: {
       type: String,
-      default: "",
+      default: '',
     },
   },
 }

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/PsDotLoader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="psui-el-dotloader">
+      <div class="psui-el-dotloader-wrapper">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PsDotLoader',
+}
+</script>

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'
@@ -14,6 +18,7 @@ import PsChips from './components/chips/PsChips.vue'
 import PsDataTable from './components/datatable/PsDataTable.vue'
 import PsDataTableItem from './components/datatable/PsDataTableItem.vue'
 import PsIcon from './components/ui/PsIcon.vue'
+import PsDotLoader from './components/ui/PsDotLoader.vue'
 import PsTooltip from './components/tooltip/PsTooltip.vue'
 import PsRichTooltip from './components/tooltip/PsRichTooltip.vue'
 import PsDialogTooltip from './components/tooltip/PsDialogTooltip.vue'
@@ -21,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) {
@@ -42,6 +48,7 @@ export default {
     Vue.component('PsDataTable', PsDataTable)
     Vue.component('PsDataTableItem', PsDataTableItem)
     Vue.component('PsIcon', PsIcon)
+    Vue.component('PsDotLoader', PsDotLoader)
     Vue.component('PsTooltip', PsTooltip)
     Vue.component('PsRichTooltip', PsRichTooltip)
     Vue.component('PsDialogTooltip', PsDialogTooltip)
@@ -51,25 +58,46 @@ 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)
+      },
+    })
   },
 }
 
 export {
   PsButton,
   PsCheckbox,
-  PsDialog,
-  PsToast,
-  PsTabHeader,
   PsRadioButton,
   PsSlider,
   PsSwitch,
-  PsInput,
   PsToggle,
+  PsInput,
+  PsDialog,
+  PsToast,
+  PsTabHeader,
   PsAccordion,
   PsAccordionItem,
   PsChips,
   PsDataTable,
   PsDataTableItem,
+  PsIcon,
+  PsDotLoader,
   PsTooltip,
   PsRichTooltip,
   PsDialogTooltip,
@@ -78,5 +106,9 @@ export {
   PsChartLegend,
   PsInlineSelector,
   PsInputTextArea,
-  PsInputSelect
+  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>  
     `,
 })