@eturnity/eturnity_reusable_components 6.43.9-EPDM-6751.4 → 6.43.9-EPDM-6751.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.43.9-EPDM-6751.4",
+  "version": "6.43.9-EPDM-6751.6",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -63,4 +63,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/assets/theme.js

@@ -3,7 +3,7 @@ const theme = {
     primary: '#48a2d0',
     secondary: '#fdb813',
     tertiary: '#d5d5d5',
-    black: '#353535',
+    black: '#263238',
     yellow: '#fdb813',
     darkGray: '#818181',
     gray1: '#666',
@@ -20,8 +20,8 @@ const theme = {
     grey5: '#fafafa',
     grey6: '#555d61',
     green: '#99db0c',
-    transparentWhite1:'#ffffff32',
-    transparentBlack1:'#263238e6',
+    transparentWhite1: '#ffffff32',
+    transparentBlack1: '#263238e6',
     disabled: '#dfe1e1',
     eturnityGrey: '#263238'
   },

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

@@ -93,17 +93,18 @@
             ref="dropdown"
             v-show="isDropdownOpen"
             :hoveredIndex="hoveredIndex"
+            :hoveredValue="hoveredValue"
             :isActive="isActive"
             :optionWidth="optionWidth"
-            :bgColor="
-              dropdownBgColor || colorMode == 'dark' ? 'black' : 'white'
-            "
+            :hoveredBgColor="colorMode == 'dark' ? '#000000' : dropdownBgColor"
+            :bgColor="colorMode == 'dark' ? 'black' : dropdownBgColor"
             :fontColor="
               dropdownFontColor || colorMode == 'dark' ? 'white' : 'black'
             "
             :selectedValue="selectedValue"
             @option-selected="optionSelected"
             @option-hovered="optionHovered"
+            @mouseleave="optionLeave"
           >
             <slot name="dropdown"></slot>
           </selectDropdown>
@@ -154,7 +155,7 @@ const Selector = styled.div`
   width: 100%;
 `
 
-const labelAttrs = { fontSize: String }
+const labelAttrs = { fontSize: String, fontColor: String }
 const InputLabel = styled('div', labelAttrs)`
   color: ${(props) =>
     props.theme.colors[props.fontColor]
@@ -234,11 +235,13 @@ const selectButton = styled('div', selectButtonAttrs)`
   ${(props) => (props.disabled ? 'pointer-events: none' : '')};
 `
 const selectDropdownAttrs = {
+  hoveredBgColor: String,
   bgColor: String,
   fontColor: String,
   selectWidth: String,
   optionWidth: String,
   hoveredIndex: Number,
+  hoveredValue: Number | String,
   selectedValue: Number | String
 }
 const selectDropdown = styled('div', selectDropdownAttrs)`
@@ -262,14 +265,13 @@ const selectDropdown = styled('div', selectDropdownAttrs)`
       props.theme.colors[props.fontColor]
         ? props.theme.colors[props.fontColor]
         : props.fontColor};
-    max-height: 300px;
-    min-height: 39px;
-    overflow-y: auto;
-    & [data-value="${(props) => props.selectedValue}"]{
-        backdrop-filter: brightness(1.4);
-    }
-    &>div:nth-child(${(props) => props.hoveredIndex}){
-        backdrop-filter: brightness(1.2);
+    max-height:300px;
+    overflow-y:auto;
+    &>div[data-value="${(props) => props.hoveredValue}"]{
+        background-color:${(props) =>
+          props.theme.colors[props.hoveredBgColor]
+            ? props.theme.colors[props.hoveredBgColor]
+            : props.hoveredBgColor};
     }
 `
 const DropdownWrapper = styled('div')`
@@ -334,6 +336,10 @@ export default {
       required: false,
       default: false
     },
+    dropdownAutoClose: {
+      required: false,
+      default: true
+    },
     alignItems: {
       required: false,
       default: 'horizontal'
@@ -345,7 +351,8 @@ export default {
       required: false
     },
     dropdownBgColor: {
-      required: false
+      required: false,
+      default: 'grey5'
     },
     dropdownFontColor: {
       required: false
@@ -406,6 +413,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
+      hoveredValue:null,
       isClickOutsideActive: false
     }
   },
@@ -444,13 +452,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      const optionElement = this.$el.querySelector(`[data-value="${e}"]`)
-      if (this.$refs.dropdown) {
-        this.hoveredIndex =
-          this.$refs.dropdown.$children
-            .map((component) => component.$el)
-            .indexOf(optionElement) + 1
-      }
+      this.hoveredValue=e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -463,6 +465,11 @@ export default {
         this.blur()
       }
     },
+    optionLeave() {
+      if(this.dropdownAutoClose) {
+        this.isDropdownOpen = false
+      }
+    },
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)
@@ -504,16 +511,20 @@ export default {
       }
     },
     onArrowPress(dir) {
-      this.hoveredIndex =
-        ((this.hoveredIndex + dir + this.optionLength - 1) %
-          this.optionLength) +
-        1
-      const optionHoveredComponent =
-        this.$refs.dropdown.$children[
-          (this.hoveredIndex - 1 + this.optionLength) % this.optionLength
-        ]
-      const topPos = optionHoveredComponent.$el.offsetTop
-      this.$refs.dropdown.$el.scrollTop = topPos
+      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
+        }
+        if(newHoveredElem){
+          this.hoveredValue = newHoveredElem.getAttribute('data-value')
+          const topPos = newHoveredElem.offsetTop
+          this.$refs.dropdown.$el.scrollTop = topPos
+        }
+      }
     }
   },
   computed: {

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

@@ -1,9 +1,8 @@
 <template>
   <optionContainer
     :data-value="value"
-    :hoveredBgColor="
-      hoveredBgColor || colorMode == 'dark' ? '#000000' : 'grey5'
-    "
+    :hoveredBgColor="colorMode == 'dark' ? '#000000' : 'hoveredBgColor'"
+    :backgroundColor="colorMode == 'dark' ? 'eturnityGrey' : '#fff'"
     @click="clickHandler"
     @mouseover="hoverHandler"
   >
@@ -15,7 +14,7 @@
 //   import selectButton from './selectButton'
 //   import selectDropdown from './selectDropDown'
 import styled from 'vue-styled-components'
-const optionProps = { hoveredBgColor: String }
+const optionProps = { hoveredBgColor: String, backgroundColor: String }
 const optionContainer = styled('div', optionProps)`
   display: flex;
   cursor: pointer;
@@ -25,12 +24,13 @@ const optionContainer = styled('div', optionProps)`
   padding: 12px 10px;
   gap: 14px;
   width: 100%;
+  background-color: ${(props) => props.theme.colors[props.backgroundColor]?props.theme.colors[props.backgroundColor]:props.backgroundColor};
   box-sizing: inherit;
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBgColor]
         ? props.theme.colors[props.hoveredBgColor]
-        : props.hoveredBgColor};
+        : props.hoveredBgColor} !important;
   }
 `
 

package/src/components/sideMenu/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-container>
+  <page-container :isLoading="!tabsData.length">
     <spinner-container v-if="!tabsData.length">
       <spinner />
     </spinner-container>
@@ -76,8 +76,10 @@ import styled from 'vue-styled-components'
 import Icon from '../icon'
 import Spinner from '../spinner'
 
-const PageContainer = styled.div`
-  background-color: ${(props) => props.theme.colors.grey6};
+const PageAttrs = { isLoading: Boolean }
+const PageContainer = styled('div', PageAttrs)`
+  background-color: ${(props) =>
+    props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
   padding: 14px 12px;
   min-width: 220px;
   display: flex;

package/src/components/tableDropdown/index.vue

@@ -104,12 +104,7 @@
             :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
         </arrow-wrapper>
-        <options-container
-          v-if="isOpen"
-          :top="getItemLocation('top')"
-          :left="getItemLocation('left')"
-          ref="optionsContainer"
-        >
+        <options-container v-if="isOpen" ref="optionsContainer">
           <options-wrapper @click.prevent.stop>
             <search-container @click.prevent.stop>
               <search-input
@@ -288,8 +283,7 @@ const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.left + 'px'};
+  left: 20px;
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -510,8 +504,13 @@ export default {
     }
   },
   methods: {
-    toggleOpen() {
-      if (this.disabled) {
+    toggleOpen(event) {
+      if (
+        this.disabled ||
+        (event &&
+          !(event.target === this.$el) &&
+          !this.$el.contains(event.target))
+      ) {
         return
       }
       this.wasClicked = false
@@ -558,14 +557,6 @@ export default {
       this.inputText = value
       this.$emit('dropdown-search', value)
     },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem[0]
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
-        location = location + window.scrollY + 40
-      }
-      return location
-    },
     clickOutside(event) {
       if (event.target === this.$el || this.$el.contains(event.target)) {
         return

package/src/components/tables/mainTable/index.vue

@@ -1,9 +1,15 @@
 <template>
-  <page-container>
+  <page-container
+    :tableHeight="tableHeight"
+    :shouldSetCustomHeight="doesTableContainDraggables"
+  >
     <table-title v-if="titleText">
       {{ titleText }}
     </table-title>
-    <table-scroll>
+    <table-scroll
+      ref="tableRef"
+      :isPositionAbsolute="doesTableContainDraggables"
+    >
       <table-wrapper :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
@@ -26,7 +32,15 @@
 import styled from 'vue-styled-components'
 import Spinner from '../../spinner'
 
-const PageContainer = styled.div``
+const pageContainerProps = {
+  tableHeight: String,
+  shouldSetCustomHeight: Boolean
+}
+const PageContainer = styled('div', pageContainerProps)`
+  position: relative;
+  height: ${(props) =>
+    props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
+`
 
 const TableTitle = styled.div`
   margin-bottom: 16px;
@@ -35,15 +49,27 @@ const TableTitle = styled.div`
   text-transform: uppercase;
 `
 
-const TableScroll = styled.div`
+const tableScrollProps = {
+  isPositionAbsolute: Boolean
+}
+
+const TableScroll = styled('div', tableScrollProps)`
   max-width: 100%;
+  height: auto;
+  ${(props) =>
+    props.isPositionAbsolute &&
+    `
+    position: absolute;
+    left: -20px;
+  `}
 `
 
 const wrapperAttrs = { fullWidth: Boolean }
 const TableWrapper = styled('div', wrapperAttrs)`
   width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   ::-webkit-scrollbar {
     height: 5px; //height of the whole scrollbar area
@@ -67,7 +93,11 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const containerAttrs = { cellPaddings: String, tableCursor: String }
+const containerAttrs = {
+  cellPaddings: String,
+  tableCursor: String
+}
+
 const TableContainer = styled('table', containerAttrs)`
   width: 100%;
   border-collapse: collapse;
@@ -378,6 +408,39 @@ export default {
     tableCursor: {
       required: false
     }
+  },
+  data() {
+    return {
+      tableHeight: 'auto',
+      doesTableContainDraggables: false
+    }
+  },
+  mounted() {
+    this.observeTableHeight()
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  },
+  methods: {
+    observeTableHeight() {
+      if (!this.$refs.tableRef) return
+
+      const tableElement = this.$refs.tableRef.$el
+
+      this.resizeObserver = new ResizeObserver(() => {
+        const newTableHeight = this.titleText
+          ? tableElement.offsetHeight + 33
+          : tableElement.offsetHeight
+        this.tableHeight = `${newTableHeight}px`
+        this.doesTableContainDraggables = Boolean(
+          tableElement.querySelector('.drag-container')
+        )
+      })
+
+      this.resizeObserver.observe(tableElement)
+    }
   }
 }
 </script>

package/src/components/threeDots/index.vue

@@ -1,66 +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
-      :top="getItemLocation('top')"
-      :right="getItemLocation('right')"
       :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>
@@ -124,16 +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;
+  border-radius: 4px;
+  background-color: ${(props) => props.activated ? props.theme.colors.grey5 : ''};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
-    border-radius: 4px;
   }
 `
 
@@ -158,12 +161,11 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
+const dropdownAttrs = {
+  containerWidth: Number
+}
 const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
-  height: 200px;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.right - props.containerWidth + 'px'};
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -173,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;
@@ -255,6 +257,9 @@ const ChildrenContainer = styled('div', childAttrs)`
   height: max-content;
   max-height: 200px;
   overflow: auto;
+  position: absolute;
+  top: 0;
+  right: 100%;
 `
 
 export default {
@@ -294,18 +299,64 @@ 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)
       }
     },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
-        location = location + window.scrollY
+    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']
       }
-      return location
     },
     hasChildren(item) {
       return !!item.children && !!item.children.length

package/src/helpers/numberConverter.js

@@ -1,12 +1,11 @@
+import { langForLocaleString } from './translateLang'
+
 export const stringToNumber = ({
-  value,
+  value = '',
   numberPrecision = false,
-  allowNegative
+  allowNegative = false
 }) => {
   // This is for saving. It converts our input string to a readable number
-  if (value === undefined) {
-    value = ''
-  }
   let newVal = value.toString()
   const selectedLang = localStorage.getItem('lang')
   // The first replace will replace not allowed characters with a blank
@@ -92,18 +91,19 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision }) => {
-  let selectedLang = localStorage.getItem('lang')
-    ? localStorage.getItem('lang') === 'fr-lu'
-      ? 'fr-fr'
-      : localStorage.getItem('lang')
-    : 'en-US'
-  if (selectedLang == 'null') {
-    selectedLang = 'en-US'
-  }
+export const numberToString = ({ value, numberPrecision = 0 }) => {
   value = parseFloat(value)
-  return value.toLocaleString(selectedLang, {
-    minimumFractionDigits: numberPrecision,
-    maximumFractionDigits: numberPrecision
+  let minNumberPrecision
+  let maxNumberPrecision
+  if (typeof numberPrecision === 'number') {
+    minNumberPrecision = numberPrecision
+    maxNumberPrecision = numberPrecision
+  } else {
+    minNumberPrecision = numberPrecision[0]
+    maxNumberPrecision = numberPrecision[1]
+  }
+  return value.toLocaleString(langForLocaleString(), {
+    minimumFractionDigits: minNumberPrecision,
+    maximumFractionDigits: maxNumberPrecision
   })
 }

package/src/helpers/translateLang.js

@@ -78,6 +78,7 @@ export const datePickerLang = (lang) => {
 }
 
 export const tinyLanguage = (lang) => {
+  // the function is used to pass correct language to Tiny MCE text editor https://www.tiny.cloud/docs/tinymce/6/ui-localization/#language
   if (
     lang === 'de' ||
     lang === 'de-de' ||
@@ -106,3 +107,14 @@ export const tinyLanguage = (lang) => {
     return langCode
   }
 }
+
+export const langForLocaleString = () => {
+  const selectedLang = localStorage.getItem('lang')
+      ? localStorage.getItem('lang') === 'fr-lu'
+          ? 'fr-fr'
+          : localStorage.getItem('lang') === 'fr-ch'
+              ? 'de-ch'
+              : localStorage.getItem('lang')
+      : 'en-US'
+  return selectedLang !== 'null' ? selectedLang : 'en-US'
+}