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

package/src/components/forms/PsDropdownCopy.vue

@@ -1,212 +0,0 @@
-<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>