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

package/src/components/forms/PsDropdown.vue

@@ -1,31 +1,33 @@
 <template>
-  <div 
-    class="psui-el-dropdown-menu"
-    ref="PSDropdown"
-    v-click-outside="close"
-  >
-
-    <div ref="PSDropdownTrigger" v-if="$slots.dropdownTrigger" @click="show && !toggleWhenActive ? '' : toggle()">
+  <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" 
+      @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-wrapper psui-duration-300" 
-      aria-orientation="vertical" 
+      role="menu"
+      class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300"
+      aria-orientation="vertical"
       :aria-labelledby="id"
       :style="{ minWidth: minWidthDropDown }"
     >
@@ -39,7 +41,10 @@
 <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'
+import {
+  randomString,
+  getParentScrollableEl,
+} from '../../util/GeneralFunctions'
 
 export default {
   name: 'PsDropdown',
@@ -49,21 +54,21 @@ export default {
    */
     minWidthDropDown: {
       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() {
@@ -71,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()
@@ -99,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')
@@ -138,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() {
@@ -151,20 +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>
-

package/src/components/forms/PsDropdownList.vue

@@ -79,4 +79,4 @@ export default {
     },
   }
 }
-</script>
+</script>

package/src/components/forms/PsInputTextArea.vue

@@ -21,7 +21,7 @@
 
 <script>
 export default {
-  name: "PsInputTextArea",
+  name: 'PsInputTextArea',
   props: {
     /**
      * It sets the placeholder of the textarea input. 

package/src/components/playground/PsScrollBar.vue

@@ -1,15 +1,248 @@
 <template>
-  <div>
-      Playground
+  <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>
+<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>

package/src/components/tooltip/PsDialogTooltip.vue

@@ -35,7 +35,7 @@
 <script>
 
 export default {
-  name: "PsDialogTooltip",
+  name: 'PsDialogTooltip',
   props: {
     /**
      * It sets the title of the tooltip if needed.
@@ -54,8 +54,8 @@ export default {
      */
     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.
@@ -66,7 +66,7 @@ export default {
     },
   },
   inheritAttrs: true,
-  emits: ["show", 'click'],
+  emits: ['show', 'click'],
   data() {
     return {
       show: false,
@@ -79,18 +79,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(() => {
@@ -99,10 +99,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() {
@@ -129,7 +129,7 @@ export default {
       }, 100)
     },
     onClick() {
-      this.$emit("click", this.$event)
+      this.$emit('click', this.$event)
     },
   },
 }

package/src/components/tooltip/PsRichTooltip.vue

@@ -10,10 +10,10 @@
 </template>
 
 <script>
-import PsTooltip from "../tooltip/PsTooltip.vue"
+import PsTooltip from '../tooltip/PsTooltip.vue'
 
 export default {
-  name: "PsRichTooltip",
+  name: 'PsRichTooltip',
   components: { PsTooltip },
   props: {
     /**
@@ -21,19 +21,19 @@ export default {
      */
     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),
+      default: 'gray',
+      validator: (type) => ['gray', 'red', 'blue'].includes(type),
     },
     cssClass: {
       type: String,
-      default: "",
+      default: '',
     },
   },
 }

package/src/components/tooltip/PsTooltip.vue

@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: "PsTooltip",
+  name: 'PsTooltip',
   props: {
     /**
      * It sets the title of the tooltip if needed.
@@ -57,7 +57,7 @@ export default {
     }
   },
   inheritAttrs: true,
-  emits: ["show"],
+  emits: ['show'],
   data() {
     return {
       show: false,
@@ -70,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(() => {
@@ -90,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() {