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

package/src/components/forms/PsDropdownCopy.vue

@@ -0,0 +1,212 @@
+<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>
+
+    <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"
+      ref="PSDropdownTrigger"
+    >
+      <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" 
+      aria-orientation="vertical" 
+      :aria-labelledby="id"
+      :class="[dialogClasses]"
+      :style="{ minWidth: minWidthDropdown, marginLeft: marginLeft }"
+    >
+
+      <div class="psui-el-dropdown-menu-dialog-category-divider">
+        <h2 class="ts--accent--1" v-if="title">{{ title }}</h2>
+        <slot name="items"></slot>
+      </div>
+
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+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: {
+      type: String,
+      default: '340px'
+    },
+    buttonLabelOnShow: {
+      type: Boolean,
+      default: false
+    },
+    toggleWhenActive: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      show: false,
+      id: randomString(8),
+      marginLeft: '-0px',
+      scrollableParentEl : null 
+    }
+  },
+  computed: {
+    getMaxWidth() {
+      let bounds = this.$refs.PSDropdown.getBoundingClientRect()
+      return (document.documentElement.clientWidth - bounds['left']) -30
+    }
+  },
+  beforeDestroy() {
+    this.unwatchParentScrolling()
+  },
+  methods: {
+    toggle() {
+      if (!this.show) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    watchParentScrolling() {
+      this.scrollableParentEl = getParentScrollableEl(this.$refs.PSDropdown)
+      if (this.scrollableParentEl) {
+        this.scrollableParentEl.addEventListener('scroll', this.updatePosition)
+      }
+    },
+    unwatchParentScrolling() {
+      if (this.scrollableParentEl) {
+        this.scrollableParentEl.removeEventListener('scroll', this.updatePosition)
+      }
+    },
+    updatePosition() {
+      
+      const PSDropdownDialog = this.$refs.PSDropdownDialog
+      const PSDropdownTrigger = this.$refs.PSDropdownTrigger
+      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.left = `${rectTrigger.x}px`
+      }
+
+      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)
+
+    },
+    open() {
+      this.$emit('open')
+      this.show = true
+      this.$refs.PSDropdownDialog.style.opacity = 0
+      this.$refs.PSDropdownDialog.style.display = 'block'
+      setTimeout(() => {
+        this.updatePosition()
+        this.watchParentScrolling()
+        document.addEventListener("keyup", this.handleEsc)
+        window.addEventListener("resize", this.updatePosition)
+        window.addEventListener("click", this.clickOutside)
+      }, 10)
+    },
+    close() {
+      if (this.show) {
+        this.$emit('close')
+        this.$refs.PSDropdownDialog.style.display = 'none'
+        this.$refs.PSDropdownDialog.style.opacity = 0
+        this.show = false
+        this.unwatchParentScrolling()
+      }
+      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))) {
+        this.close()
+      }
+    }
+  }
+}
+</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/PsInputSelect.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="psui-el-input-select" :class="[{'disabled':disabled}, getComponentClass, {'selected':selectedClass}]">
+    <label :for='label' v-if="label" >{{ label }}</label>
+    <select 
+      :name="label"
+      :id="label"  
+      v-model="childValue"
+    >
+      <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 && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'PsSelectInput',
+  props: {
+    items: {
+      required: true
+    },
+    value: {
+      default: '',
+      required: true
+    },
+    label: {
+      default: ''
+    },
+    optionalLabel:{
+      default:''
+    },
+    keyLabel: {
+      default: 'label'
+    },
+    keyValue: {
+      default: 'value'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    layout:{
+      type: String,
+      default: 'default',
+      validator: (value) => ['default','mini'].includes(value)
+    }
+  },
+  data(){
+    return {
+      selectedClass: false,
+    }
+  },
+  computed: {
+    getComponentClass(){
+      return `layout-${this.layout}`
+    },
+    childValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        if(this.isString) return this.$emit('input', value)
+        const finded = find(this.items, { [this.keyValue]: value })
+        this.$emit('input', value)
+        this.$emit('change', finded)
+        this.selectedClass = true
+      }
+    },
+    isString() {
+      return  this.items.length > 0 && typeof this.items[0] === 'string'
+    },
+    getItems() {
+      if (this.items.length > 0 && typeof this.items[0] === 'string') {
+        return this.items.map((item) => { 
+          return {
+            [this.keyLabel]: item,
+            [this.keyValue]: item,
+          }
+        })
+      } else {
+        return this.items
+      }
+    },
+  },
+}
+</script>

package/src/components/forms/PsInputTextArea.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="psui-el-input-textarea" :class="[{'disabled':disabled}]">
+    <div class="psui-el-input-textarea-wrapper">
+      <label :for="label" v-if="label">{{label}}</label>
+      <textarea
+        :id="label"
+        :autocapitalize="autocapitalize"
+        :aria-required="required"
+        :value="value"
+        @blur="onBlur"
+        @focus="onFocus"
+        @input="onInput"
+        :rows="rows"
+        :placeholder="placeholder"
+        :readonly='disabled'
+      />
+    </div>
+    <p class="psui-el-input-textarea-message" v-if="optionalLabel && !disabled">{{optionalLabel}}</p>
+  </div>
+</template>
+
+<script>
+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,
+        }
+    },
+    methods: {
+    makeAction() {
+      if(this.action && typeof(this.action) == 'function') this.action()
+    },
+    onBlur(){
+        this.$emit('blur', this.$event)
+    },
+    onFocus(){
+        this.$emit('focus',this.$event)
+    },
+    onInput(){
+        this.$emit('input', this.$event)
+    }
+  }
+}
+</script>
+

package/src/components/notifications/PsDialog.vue

@@ -62,3 +62,6 @@ export default {
   }
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsDialog.scss */</style>
+

package/src/components/notifications/PsToast.vue

@@ -1,53 +1,41 @@
 <template>
-  <div :class="cssClass">
-    <span class="material-icons psui-mr-4">{{ icon }}</span>
-    <div class="psui-w-full">{{ message }}</div>
-    <div class="psui-flex psui-space-x-4">
+  <div class='psui-el-toast' :class="getComponentClass">
+    <i class="material-icons-round psui-el-toast-icon">{{ icon }}</i>
+    <p class="psui-el-toast-message">{{ message }}</p>
+    <div class="psui-el-toast-actions">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
-export const typeOptions = ['info', 'success', 'warning', 'error']
-export const fillOptions = ['soft', 'intense']
 export default {
   name: 'PsToast',
   props: {
-    type: {
+    layout: {
       type: String,
       default: 'info',
-      validator: (value) => typeOptions.indexOf(value) !== -1
+      validator: (value) => ['info', 'success', 'warning', 'error'].includes(value)
     },
     fill: {
       type: String,
       default: 'intense',
-      validator: (value) => fillOptions.indexOf(value) !== -1
+      validator: (value) => ['soft', 'intense'].includes(value)
     },
     message: {
       type: String,
-      required: true
+    },
+    icon:{
+      type: String,
     }
   },
   computed: {
-    icon() {
-      if (this.type === 'info') return 'info'
-      if (this.type === 'success') return 'check_circle'
-      return 'warning'
-    },
-    cssClass() {
-      const colors = {
-        info: 'blue-60',
-        success: 'green-20',
-        warning: 'yellow-20',
-        error: 'red-20'
-      }
-
-      const textColor = this.fill === 'intense' ? 'white': colors[this.type]
-      const background = this.fill === 'soft'? `${colors[this.type].split('-', 1)}-10` : colors[this.type]
-
-      return `psui-font-bold psui-shadow-md psui-rounded-md psui-p-3 psui-h-12 psui-flex psui-bg-${background} psui-text-${textColor}`
+    getComponentClass(){
+      return `layout-${this.layout} fill-${this.fill}`
     }
-  }
+  },
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsToast.scss */ </style>
+

package/src/components/tabs/PsTabHeader.vue

@@ -5,22 +5,31 @@
     role="group"
   >
 		
-    <button
-      type="button" 
-      v-for="item in getItems" 
-      :key="item[keyValue]"
-      @click="selectTab(item)"
-      :class="{ 'status-active': getSelected === item[keyValue] }"
-    >
-      {{ item[keyLabel] }}
-    </button>
-
+    <template v-for="item in getItems">
+      <slot v-bind:item="item" >
+        <button
+          :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>
 	</div>
 </template>
 
 <script>
+import PsRichTooltip from '../tooltip/PsRichTooltip.vue'
 export default {
   name: 'PsTabHeader',
+  components: { PsRichTooltip },
   props: {
     layout: {
       type: String,
@@ -82,8 +91,17 @@ export default {
   },
   methods: {
     selectTab(item) {
-      this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )
-      this.$emit('change', this.getIsObject ? item : item[this.keyValue])
+      if (item.disabled !== true) {
+        this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )
+        this.$emit('change', this.getIsObject ? item : item[this.keyValue])        
+      }
+    },
+    getButtonClass(item) {
+      if (item.disabled) {
+        return ['status-disabled']
+      } else {
+        return { 'status-active': this.getSelected === item[this.keyValue], 'status-enabled' : true }
+      }      
     }
   }
 

package/src/components/tooltip/PsDialogTooltip.vue

@@ -1,17 +1,14 @@
 <template>
-  <PsTooltip :cssClass="getCssClass.content" :title="title">
+  <PsTooltip :layout="layout" :cssClass="cssClass" :title="title">
     <template v-slot:trigger>
-      <slot></slot>
+      <slot name="trigger"></slot>
     </template>
     <template
-      v-slot:dialog
-      class="psui-flex psui-fkex-col psui-gap-3 psui-items-start"
+      v-slot:content
     >
-      <p :class="type === 'white' ? 'psui-text-gray-50' : ''">{{ text }}</p>
+      <slot name="content"></slot> 
       <button
         v-if="buttonText"
-        class="psui-py-2 psui-px-4 psui-rounded-md"
-        :class="getCssClass.button"
         @click="onClick"
       >
         {{ buttonText }}
@@ -36,7 +33,7 @@ export default {
     buttonText: {
       type: String,
     },
-    type: {
+    layout: {
       type: String,
       default: "white",
       validator: (value) => ["white", "dark", "color"].includes(value),
@@ -47,33 +44,11 @@ export default {
     },
   },
   emits: ["click"],
-  computed: {
-    getCssClass() {
-        
-      if (this.type === "dark")
-        return {
-          content: `psui-bg-blue-70 psui-text-white ${this.cssClass}`,
-          button: `psui-bg-blue-60 psui-text-white`,
-        }
-      if (this.type === "color")
-        return {
-          content: `psui-bg-blue-50 psui-text-white ${this.cssClass}`,
-          button: `psui-bg-blue-60 psui-text-white`,
-        }
-
-        return { content: `psui-bg-white psui-text-gray-80 ${this.cssClass}`, button: `psui-bg-blue-20 psui-text-blue-60`,}
-    },
-  },
   methods: {
     onClick() {
-      this.$emit("click")
+      this.$emit("click", this.$event)
     },
   },
 }
 </script>
 
-<style scoped>
-button {
-  width: fit-content;
-}
-</style>>

package/src/components/tooltip/PsRichTooltip.vue

@@ -1,44 +1,37 @@
-<template>
-  <PsTooltip :cssClass="`${textColorClass} ${cssClass}`" :title="title">
-    <template v-slot:trigger>
-      <slot></slot>
-    </template>
-    <template v-slot:dialog>
-      <p v-if="text">{{text}}</p>
-    </template>
-  </PsTooltip>
-</template>
-
-<script>
-import PsTooltip from "../tooltip/PsTooltip.vue"
-
-export default {
-  name: "PsRichTooltip",
-  components: { PsTooltip },
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    type: {
-      type: String,
-      default: "gray",
-      validator: (type) => ["gray", "red", "blue"].includes(type),
-    },
-    text: {
-      type: String,
-    },
-    cssClass: {
-      type: String,
-      default: "",
-    },
-  },
-  computed: {
-    textColorClass() {
-      if (this.type === "red") return `psui-text-red-70 psui-bg-red-10 `
-      if (this.type === "blue") return `psui-bg-blue-70 psui-text-white`
-      return `psui-text-gray-80 psui-bg-gray-30 `
-    },
-  },
-}
-</script>
+<template>
+  <PsTooltip :layout="layout" :title="title" :cssClass="cssClass">
+    <template v-slot:trigger>
+      <slot name="trigger"></slot>
+    </template>
+    <template v-slot:content>
+      <slot name="content"></slot>
+    </template>
+  </PsTooltip>
+</template>
+
+<script>
+import PsTooltip from "../tooltip/PsTooltip.vue"
+
+export default {
+  name: "PsRichTooltip",
+  components: { PsTooltip },
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    layout: {
+      type: String,
+      default: "gray",
+      validator: (type) => ["gray", "red", "blue"].includes(type),
+    },
+    text: {
+      type: String,
+    },
+    cssClass: {
+      type: String,
+      default: "",
+    },
+  },
+}
+</script>