@policystudio/policy-studio-ui-vue 1.0.16 → 1.0.20

package/src/components/forms/PsDropdown.vue

@@ -0,0 +1,196 @@
+<template>
+  <div 
+    class="psui-relative psui-inline-block psui-text-left" 
+    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-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-focus:shadow-outline-blue psui-dropdown-button psui-text-sm psui-leading-none" 
+      :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-dropdown-dialog psui-hidden psui-origin-top-right psui-fixed psui-mt-2 psui-w-auto psui-rounded psui-shadow-lg psui-border psui-border-blue05 psui-z-50 psui-opacity-0" 
+      aria-orientation="vertical" 
+      :aria-labelledby="id"
+      :class="[dialogClasses]"
+      :style="{ minWidth: minWidthDropdown, marginLeft: marginLeft }"
+    >
+      <div class="w-full">
+        <h2 class="psui-text-gray02 psui-font-bold psui-whitespace-no-wrap psui-mb-4 ts--accent--1" v-if="title">{{ title }}</h2>
+        <slot name="items"></slot>
+      </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>
+
+  .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/PsInput.vue

@@ -14,11 +14,11 @@
         :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
         :required="required"
         :value="value"
-        @focus="$emit('focus')"
-        @blur="$emit('blur')"
-        @input="$emit('input', $event.target.value)"
-        @keydown.enter="$emit('keydown', $event.target.value)"
-        @change="$emit('change')"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        @input="$emit('input', $event)"
+        @keydown.enter="$emit('keydown', $event)"
+        @change="$emit('change', $event)"
         v-bind="getAttrs"
       />
       <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
@@ -70,7 +70,7 @@ export default {
 	},
   computed: {
     getInputClasses() {
-      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-bg-white psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50`
+      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50 ${this.getState}`
     },
     getText() {
       return this.mini ? 'psui-text-small' : ''
@@ -78,6 +78,9 @@ export default {
     getPadding() {
       return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
     },
+    getState() {
+      return this.disabled ? 'disabled:psui-bg-gray-20' : 'psui-bg-white'
+    },
     getAttrs() {
       const defaultAttrs = {
         autocapitalize: 'sentences',

package/src/components/tabs/PsTabHeader.vue

@@ -21,6 +21,26 @@
 export const themeOptions = ['standard', 'underline', 'folder']
 export default {
   name: 'PsTabHeader',
+  props: {
+    theme: {
+      type: String,
+      default: 'standard',
+      validator: (value) => themeOptions.indexOf(value) !== -1
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    selected: {},
+    keyLabel: {
+      type: String,
+      default: 'label'
+    },
+    keyValue: {
+      type: String,
+      default: 'value'
+    }
+  },
   computed: {
     wrapperClasses() {
       if (this.theme === 'underline') {
@@ -67,27 +87,6 @@ export default {
       }
     }
   },
-
-  props: {
-    theme: {
-      type: String,
-      default: 'standard',
-      validator: (value) => themeOptions.indexOf(value) !== -1
-    },
-    items: {
-      type: Array,
-      required: true
-    },
-    selected: {},
-    keyLabel: {
-      type: String,
-      default: 'label'
-    },
-    keyValue: {
-      type: String,
-      default: 'value'
-    }
-  },
   methods: {
     selectTab(item) {
       this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )

package/src/components/tooltip/PsDialogTooltip.vue

@@ -0,0 +1,79 @@
+<template>
+  <PsTooltip :cssClass="getCssClass.content" :title="title">
+    <template v-slot:trigger>
+      <slot></slot>
+    </template>
+    <template
+      v-slot:dialog
+      class="psui-flex psui-fkex-col psui-gap-3 psui-items-start"
+    >
+      <p :class="type === 'white' ? 'psui-text-gray-50' : ''">{{ text }}</p>
+      <button
+        v-if="buttonText"
+        class="psui-py-2 psui-px-4 psui-rounded-md"
+        :class="getCssClass.button"
+        @click="onClick"
+      >
+        {{ buttonText }}
+      </button>
+    </template>
+  </PsTooltip>
+</template>
+
+<script>
+import PsTooltip from "./PsTooltip.vue"
+
+export default {
+  name: "PsDialogTooltip",
+  components: { PsTooltip },
+  props: {
+    text: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+    buttonText: {
+      type: String,
+    },
+    type: {
+      type: String,
+      default: "white",
+      validator: (value) => ["white", "dark", "color"].includes(value),
+    },
+    cssClass: {
+      type: String,
+      required: false,
+    },
+  },
+  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")
+    },
+  },
+}
+</script>
+
+<style scoped>
+button {
+  width: fit-content;
+}
+</style>>

package/src/components/tooltip/PsRichTooltip.vue

@@ -0,0 +1,38 @@
+<template>
+  <PsTooltip :cssClass="`${textColorClass} ${cssClass}`" :title="title">
+    <template v-slot:trigger>
+      <slot></slot>
+    </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),
+    },
+    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>

package/src/components/tooltip/PsTooltip.vue

@@ -0,0 +1,120 @@
+<template>
+  <div @mouseover="open" @mouseleave="close" ref="tooltip">
+    <div ref="tooltiptrigger">
+      <slot name="trigger"></slot>
+    </div>
+
+    <div class="psui-relative">
+      <div
+        role="menu"
+        ref="dialog"
+        class="
+          psui-fixed
+          psui-hidden
+          psui-opacity-0
+          psui-transition-opacity
+          psui-duration-500
+          psui-ease-in-out
+        "
+      >
+        <div
+          class="
+            psui-flex
+            psui-flex-col
+            psui-py-1
+            psui-px-2
+            psui-rounded-md
+            psui-shadow-md
+            psui-z-20
+          "
+          aria-orientation="vertical"
+          :class="cssClass"
+        >
+          <h2 v-if="title" class="psui-font-bold">{{ title}}</h2>
+          <slot name="dialog" class="psui-font-normal"
+            >
+          </slot
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PsTooltip",
+  props: {
+    title: {
+      type: String,
+    },
+    ignoreDialog: {
+      type: Boolean,
+      default: false,
+    },
+    keepOpen: {
+      default: false,
+    },
+    cssClass:{
+        type: String,
+        default: 'psui-bg-gray-50 psui-text-white'
+    }
+  },
+  inheritAttrs: true,
+  emits: ["show"],
+  data() {
+    return {
+      show: false,
+      closingTimeout: null,
+    }
+  },
+  mounted() {
+      console.log(this.$attrs)
+    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}px`
+
+      if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
+        dialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else {
+        dialog.style.left = `${rectTrigger.x}px`
+      }
+
+      setTimeout(() => {
+        dialog.style.opacity = 100
+      }, 100)
+    },
+  },
+}
+</script>

package/src/components/ui/PsIcon.vue

@@ -0,0 +1,128 @@
+<template>
+  <div style="display: contents">
+    <span
+      v-if="getIconType === 'material-icons'"
+      class="material-icons-round"
+      :class="[getIconClasses]"
+    >
+      {{ getIcon }}
+    </span>
+    <img v-else-if="getIconType === 'url'" :src="icon" :class="[iconClasses]" />
+    <inline-svg
+      v-else
+      :src="icon"
+      :width="getWidth"
+      :height="getHeight"
+      :stroke="getColor"
+      :fill="getColor"
+    ></inline-svg>
+  </div>
+</template>
+
+<script>
+import tailwindConfig from '../../../tailwind.config'
+import imageLoader from '../../util/imageLoader'
+export default {
+  name: 'AppIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+    },
+    iconClasses: {
+      type: String
+    },
+    size: {
+      type: [Number, String],
+    },
+    width: {
+      type: Number,
+      default: 24
+    },
+    height: {
+      type: Number,
+      default: 24
+    },
+    stroke: {
+      type: String,
+      default: null
+    },
+    color: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.includes('psui-text-') && 
+          typeof(tailwindConfig.theme.colors[value.replace('psui-text-', '')]) != 'undefined' ||
+          typeof(tailwindConfig.theme.colors[value]) != 'undefined'
+      }
+    },
+    loaderIcon: {
+      type: String,
+      default: 'hourglass_top'
+    },
+    loaderErrorIcon: {
+      type: String,
+      default: 'more_horiz'
+    }
+  },
+  data() {
+    return {
+      finishedImageLoad: false,
+      imageLoadError: false
+    }
+  },
+  computed: {
+    getIconType() {
+      if(this.imageLoadError || !this.finishedImageLoad) return 'material-icons'
+      if(this.type) return this.type
+      if(!this.icon.includes('/')) return 'material-icons'
+      if(!this.icon.includes('.svg')) return 'url'
+      return 'svg'
+    },
+    getIcon() {
+      if(!this.icon.includes('/')) return this.icon
+      if(!this.finishedImageLoad && !this.imageLoadError && this.loaderIcon) return this.loaderIcon
+      if(this.imageLoadError) return this.loaderErrorIcon
+      return this.icon ? this.icon : ''
+    },
+    getIconClasses() {
+      if(this.iconClasses) return this.iconClasses
+      return `${this.size} ${this.color}`
+    },
+    getWidth() {
+      if(this.size) return this.size
+      return this.width
+    },
+    getHeight() {
+      if(this.size) return this.size
+      return this.height
+    },
+    getColor() {
+      if(this.getIconType === 'material-icons') return this.color
+      return tailwindConfig.theme.colors[this.color.replace('psui-text-', '')] || tailwindConfig.theme.colors[this.color]
+    }
+  },
+  watch: {
+    'icon': function() {
+      this.loadImage()
+    }
+  },
+  mounted() {
+    if(this.icon.includes('/')) this.loadImage()
+  },
+  methods: {
+    loadImage() {
+      imageLoader({ imageUrl: this.icon, returnsBase64: false })
+        .then(() => {
+          this.finishedImageLoad = true
+        })
+        .catch(() => {
+          this.imageLoadError = true
+        })
+    }
+  }
+}
+</script>