@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.5 → 6.37.0-EPDM-8148.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.37.0-EPDM-8148.5",
+  "version": "6.37.0-EPDM-8148.7",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/select/index.vue

@@ -408,7 +408,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue:null,
+      hoveredValue: null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +447,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue=e
+      this.hoveredValue = e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -477,10 +477,14 @@ export default {
       this.toggleDropdown()
     },
     clickOutside(event) {
+      const dropdownRef = this.$refs.dropdown
+      // we need to prevent closing on selecting an option, because in the case of
+      // a disabled option, we don't want to close the dropdown
       if (!this.isClickOutsideActive) return
       if (
         this.$refs.select.$el == event.target ||
-        this.$refs.select.$el.contains(event.target)
+        this.$refs.select.$el.contains(event.target) ||
+        event.target.parentNode === dropdownRef.$el
       ) {
         return
       } else {
@@ -502,14 +506,16 @@ export default {
     },
     onArrowPress(dir) {
       let newHoveredElem
-      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
-      if(currentHoveredElem){
-        if(dir>0){
-          newHoveredElem=currentHoveredElem.nextElementSibling
-        }else{
-          newHoveredElem=currentHoveredElem.previousElementSibling
+      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+        `[data-value="${this.hoveredValue}"]`
+      )
+      if (currentHoveredElem) {
+        if (dir > 0) {
+          newHoveredElem = currentHoveredElem.nextElementSibling
+        } else {
+          newHoveredElem = currentHoveredElem.previousElementSibling
         }
-        if(newHoveredElem){
+        if (newHoveredElem) {
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos

package/src/components/inputs/select/option/index.vue

@@ -77,6 +77,10 @@ export default {
     },
     hoverText: {
       required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
     }
   },
 
@@ -87,7 +91,12 @@ export default {
   },
   methods: {
     clickHandler() {
-      this.$parent.$emit('option-selected', this.value)
+      if (this.isDisabled) {
+        // prevent emitter if the option is disabled
+        return
+      } else {
+        this.$parent.$emit('option-selected', this.value)
+      }
     },
     hoverHandler() {
       this.$parent.$emit('option-hovered', this.value)

package/src/components/threeDots/index.vue

@@ -1,64 +1,65 @@
 <template>
-  <page-container @click="toggleButton()">
+  <page-container @click="toggleButton()" ref="pageContainer" :activated="isOpen">
     <button-container ref="dropdownItem">
       <dot-item />
       <dot-item />
       <dot-item />
     </button-container>
     <dropdown-container
-      v-if="isOpen"
       @click.stop
       :containerWidth="childOpen ? 440 : 240"
       ref="dropdownContainer"
     >
-      <loading-container v-if="isLoading">
-        <spinner />
-      </loading-container>
-      <children-container
-        class="child"
-        :isOpen="hoverItem !== null"
-        v-if="hoverItem !== null && !isLoading"
-      >
-        <option-child
-          v-for="child in childOpen"
-          :key="child.value"
-          @click.stop="
+      <template v-if="isOpen">
+        <loading-container v-if="isLoading">
+          <spinner />
+        </loading-container>
+        <children-container
+          class="child"
+          :isOpen="hoverItem !== null"
+          v-if="hoverItem !== null && !isLoading"
+        >
+          <option-child
+            v-for="child in childOpen"
+            :key="child.value"
+            @click.stop="
             onSelect({
               item: child,
               hasChildren: hasChildren(child)
             })
           "
-          @keyup.enter.stop="
+            @keyup.enter.stop="
             onSelect({
               item: child,
               hasChildren: hasChildren(child)
             })
           "
-        >
-          {{ child.name }}
-        </option-child>
-      </children-container>
-      <options-container v-if="!isLoading">
-        <option-item
-          v-for="(item, index) in options"
-          :key="item.value"
-          tabindex="0"
-          @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
-          @keyup.enter="
+          >
+            {{ child.name }}
+          </option-child>
+        </children-container>
+        <options-container v-if="!isLoading">
+          <option-item
+            v-for="(item, index) in options"
+            :key="item.value"
+            tabindex="0"
+            @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
+            @keyup.enter="
             onSelect({ item: item, hasChildren: hasChildren(item) })
           "
-          @mouseover="onItemHover({ index, item })"
-          :isDisabled="item.disabled"
-        >
-          <arrow-left
-            :hasChildren="hasChildren(item)"
-            v-if="hasChildren(item)"
-          />
-          <span>
+            @mouseover="onItemHover({ index, item })"
+            :isDisabled="item.disabled"
+          >
+            <arrow-left
+              :hasChildren="hasChildren(item)"
+              v-if="hasChildren(item)"
+            />
+            <span>
             {{ item.name }}
           </span>
-        </option-item>
-      </options-container>
+          </option-item>
+        </options-container>
+      </template>
     </dropdown-container>
   </page-container>
 </template>
@@ -122,17 +123,20 @@
 import styled from 'vue-styled-components'
 import Spinner from '../spinner'
 
-const PageContainer = styled.div`
+const PageContainerAttrs = {
+  activated: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
   display: grid;
   align-items: center;
   justify-items: center;
   width: 30px;
   height: 30px;
-  position: relative;
+  border-radius: 4px;
+  background-color: ${(props) => props.activated ? props.theme.colors.grey5 : ''};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
   }
 `
 
@@ -162,10 +166,6 @@ const dropdownAttrs = {
 }
 const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
-  height: 200px;
-  top: 0;
-  right: 27px;
-
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -175,8 +175,8 @@ const LoadingContainer = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 200px;
-  height: 200px;
+  min-width: 100px;
+  height: 100px;
   align-items: center;
   justify-items: center;
   background: #fff;
@@ -257,6 +257,9 @@ const ChildrenContainer = styled('div', childAttrs)`
   height: max-content;
   max-height: 200px;
   overflow: auto;
+  position: absolute;
+  top: 0;
+  right: 100%;
 `
 
 export default {
@@ -296,11 +299,65 @@ export default {
       this.isOpen = !this.isOpen
 
       if (this.isOpen) {
+        this.setContextMenuPosition()
+        window.addEventListener('resize', this.toggleButton)
         document.addEventListener('click', this.clickOutside)
       } else {
+        window.removeEventListener('resize', this.toggleButton)
         document.removeEventListener('click', this.clickOutside)
       }
     },
+    setContextMenuPosition() {
+      const contextMenu = this.$refs.dropdownContainer.$el
+      const button = this.$refs.pageContainer.$el
+      const rectButton = button.getBoundingClientRect()
+      const relativeParent = this.findRelativeParent(contextMenu)
+      const rectRelativeParent = relativeParent.getBoundingClientRect()
+
+      const positionArray = this.determineElementQuarter(button, rectButton)
+      contextMenu.style.transform = ''
+      if (positionArray.includes('left')) {
+        contextMenu.style.left = (rectButton.right - rectRelativeParent.left + 5) + 'px'
+      } else {
+        contextMenu.style.left = (rectButton.left - rectRelativeParent.left - 5) + 'px'
+        contextMenu.style.transform = 'translateX(-100%)'
+      }
+      if (positionArray.includes('top')) {
+        contextMenu.style.top = (rectButton.top - rectRelativeParent.top) + 'px'
+      } else {
+        contextMenu.style.top = (rectButton.bottom - rectRelativeParent.top) + 'px'
+        contextMenu.style.transform += ' translateY(-100%)'
+      }
+    },
+    findRelativeParent(element) {
+      while (element.parentElement) {
+        if (window.getComputedStyle(element.parentElement).position === 'relative') {
+          return element.parentElement
+        }
+        element = element.parentElement
+      }
+      return null
+    },
+    determineElementQuarter(element, rect) {
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      const horizontalMidpoint = viewportWidth / 2
+      const verticalMidpoint = viewportHeight / 2
+
+      const isLeft = rect.left + rect.width / 2 < horizontalMidpoint
+      const isTop = rect.top + rect.height / 2 < verticalMidpoint
+
+      if (isLeft && isTop) {
+        return ['left', 'top']
+      } else if (isLeft && !isTop) {
+        return ['left', 'bottom']
+      } else if (!isLeft && isTop) {
+        return ['right', 'top']
+      } else {
+        return ['right', 'bottom']
+      }
+    },
     hasChildren(item) {
       return !!item.children && !!item.children.length
     },