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

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,
     }

package/src/components/playground/PsScrollBar.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="wrapper psui-flex psui-gap-4">
+    <div 
+      class="visible-scrollbar psui-flex psui-flex-col psui-h-full psui-w-56 psui-bg-gray-30 psui-p-2"
+      @click="onClick"
+    >
+        <h2 class="psui-font-bold">Scrollbar Playground (click over here to copy the computed style to clipboard)</h2>
+        <p >Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, id.</p>
+    </div>
+    <div class="psui-flex psui-bg-gray-60 psui-p-2 psui-gap-4">
+      <div class="psui-flex psui-flex-col">
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Scroll Width (px)</label>
+          <input type="text" id="width" name="width" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Scroll Height (px)</label>
+          <input type="text" id="height" name="height" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">ScrollTrack Color</label>
+          <input type="text" id="track" name="track" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Color</label>
+          <input type="text" id="thumb" name="thumb" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Border-Radius (px)</label>
+          <input type="text" id="thumb-radius" name="thumb-radius" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Border Size(px)</label>
+          <input type="text" id="thumb-border" name="thumb-border" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Border Color</label>
+          <input type="text" id="thumb-border-color" name="thumb-border-color" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Border Style</label>
+          <select id="thumb-border-style" name="thumb-border-style" v-model="selectedStyle">
+                <option value="" hidden selected></option>
+                <option   
+                  v-for="(style, index) in borderStyle"
+                  :value="style"
+                  :key="index"
+                >{{style}}</option>
+          </select>
+        </div>
+      </div>
+      <div class="psui-flex psui-flex-col">
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Hover Color</label>
+          <input type="text" id="thumb-hover-color" name="thumb-hover-color" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Hover Border Size</label>
+          <input type="text" id="thumb-hover-border-size" name="thumb-hover-border-size" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Hover Border Color</label>
+          <input type="text" id="thumb-hover-border-color" name="thumb-hover-border-color" @change="onChange">
+        </div>
+        <div class="psui-flex psui-flex-col psui-w-48">
+          <label for="width">Thumb Border Style</label>
+          <select id="thumb-border-style" name="thumb-border-style" v-model="selectedHoverStyle">
+                <option value="" hidden selected></option>
+                <option   
+                  v-for="(style, index) in borderStyle"
+                  :value="style"
+                  :key="index"
+                >{{style}}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: 'PsScrollBar',
+    data(){
+      return {
+          borderStyle: ['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'ouset'],
+          selectedStyle: null,
+          selectedHoverStyle: null
+      }
+    },
+    watch:{
+        selectedStyle(){
+          const visibleScrollBar = document.querySelector('.visible-scrollbar')
+          visibleScrollBar.style.setProperty('--scrollbar-thumb-border-style', this.selectedStyle)    
+        },
+        selectedHoverStyle(){
+          const visibleScrollBar = document.querySelector('.visible-scrollbar')
+          visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-style', this.selectedHoverStyle)
+        }
+    },
+    methods:{
+      onChange(event){
+      
+      const visibleScrollBar = document.querySelector('.visible-scrollbar')
+
+      switch(event.target.id){
+        case 'width':
+        visibleScrollBar.style.setProperty('--scrollbar-width', `${event.target.value}px`)
+        break
+        case 'thumb':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-color', event.target.value)
+        break
+        case 'track':
+        visibleScrollBar.style.setProperty('--scrollbar-track-color', event.target.value)  
+        break
+        case 'thumb-radius':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-radius', `${event.target.value}px`)
+        break
+        case 'thumb-border':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-border', `${event.target.value}px`)
+        break
+        case 'thumb-border-color':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-border-color', event.target.value)
+        break
+        case 'height':
+        visibleScrollBar.style.setProperty('--scrollbar-height', `${event.target.value}px`)    
+        break
+        case 'thumb-hover-color':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-color', event.target.value)
+        break
+        case 'thumb-hover-border-size':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-size', `${event.target.value}px`)
+        break    
+        case 'thumb-hover-border-color':
+        visibleScrollBar.style.setProperty('--scrollbar-thumb-hover-border-color', event.target.value)
+        break        
+      }
+
+    },
+    onClick(){
+      const visibleScrollBar = document.querySelector('.visible-scrollbar')
+
+      const styleScrollBar = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar')
+      const styleScrollBarTrack = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-track')
+      const styleScrollBarThumb = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-thumb')
+      const styleScrollBarThumbHover = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-thumb:hover')
+      const styleScrollBarCorner = getComputedStyle(visibleScrollBar, '::-webkit-scrollbar-corner')
+
+      navigator.clipboard.writeText(`
+        ::-webkit-scrollbar {
+        display: ${styleScrollBar.display};
+        width: ${styleScrollBar.width};
+        }
+
+        ::-webkit-scrollbar-track {
+        background-color: ${styleScrollBarTrack.backgroundColor};
+        }
+
+        ::-webkit-scrollbar-thumb {
+        background-color: ${styleScrollBarThumb.backgroundColor};
+        border-radius: ${styleScrollBarThumb.borderRadius};
+        border: ${styleScrollBarThumb.border};  
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+          background-color: ${styleScrollBarThumbHover.backgroundColor};
+          border: ${styleScrollBarThumbHover.border};
+        }
+
+        ::-webkit-scrollbar-corner {
+        display: ${styleScrollBarCorner.display};
+        background-color: ${styleScrollBarCorner.backgroundColor};
+        height: ${styleScrollBarCorner.height};
+        width: ${styleScrollBarCorner.width};
+        }
+      `)
+
+      window.alert('Copied to clipboard')
+    }
+  },
+}
+
+</script>
+
+<style scoped>
+
+  .visible-scrollbar{
+    overflow: scroll;
+    white-space: nowrap;
+  }
+
+  .visible-scrollbar::-webkit-scrollbar {
+    display: block;
+    width: var(--scrollbar-width, 10px);
+    height: var(--scrollbar-height, 10px);
+  }
+
+  .visible-scrollbar::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-color, gray);
+  }
+
+  .visible-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-color,black);
+    border-radius: var(--scrollbar-thumb-radius);
+    border: var(--scrollbar-thumb-border) var(--scrollbar-thumb-border-style) var(--scrollbar-thumb-border-color);
+  }
+
+  .visible-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover-color, black);
+    border: var(--scrollbar-thumb-hover-border-size) var(--scrollbar-thumb-hover-border-style) var(--scrollbar-thumb-hover-border-color);
+  }
+
+  .visible-scrollbar::-webkit-scrollbar-corner {
+    display: none;
+    background-color: var(--scrollbar-track-color, gray);
+    height: var(--scrollbar-height, 10px);
+    width: var(--scrollbar-width, 10px);
+  }
+
+  .wrapper {
+    height: 450px;
+  }
+</style>

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" layout="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: '',
     },
   },
 }