@eturnity/eturnity_reusable_components 6.33.1-EPDM-5205.1 → 6.33.1-EPDM-6487

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.33.1-EPDM-5205.1",
+  "version": "6.33.1-EPDM-6487",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

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

@@ -311,7 +311,8 @@ export default {
     return {
       textInput: '',
       isFocused: false,
-      warningIcon: warningIcon
+      warningIcon: warningIcon,
+      isBlurred: false
     }
   },
   props: {
@@ -488,7 +489,9 @@ export default {
           return num
         }
       })
-      let evaluated = eval(formatted.join(''))
+      let evaluated
+      formatted = this.removeStringItemsAfterLastNumber(formatted)
+      evaluated = eval(formatted.join(' '))
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
@@ -499,7 +502,32 @@ export default {
       }
       return evaluated
     },
+    removeStringItemsAfterLastNumber(array) {
+      // fixed in EPDM-6487, in order to prevent 'Unexpected end of input'
+      let lastNumberIndex = -1
+      // Find the index of the last number in the array
+      for (let i = array.length - 1; i >= 0; i--) {
+        if (typeof array[i] === 'number') {
+          lastNumberIndex = i
+          break
+        }
+      }
+      // if there are no numbers, return an empty array
+      if (lastNumberIndex === -1) {
+        return []
+      }
+      // Remove non-numeric items after the last number
+      if (lastNumberIndex !== -1) {
+        const newArray = array.slice(0, lastNumberIndex + 1)
+        return newArray
+      }
+      return array
+    },
     onInput(value) {
+      if (this.isBlurred) {
+        this.isBlurred = false
+        return
+      }
       if (value === '') {
         this.$emit('on-input', '')
       }
@@ -514,6 +542,8 @@ export default {
     },
     onInputBlur(e) {
       this.isFocused = false
+      // setting isBlurred so we don't trigger onInput as well
+      this.isBlurred = true
       let value = e.target.value
       let evaluatedInput = this.onEvaluateCode(value)
       this.onChangeHandler(evaluatedInput ? evaluatedInput : value)

package/src/components/tableDropdown/index.vue

@@ -104,7 +104,12 @@
             :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
         </arrow-wrapper>
-        <options-container v-if="isOpen" ref="optionsContainer">
+        <options-container
+          v-if="isOpen"
+          :top="getItemLocation('top')"
+          :left="getItemLocation('left')"
+          ref="optionsContainer"
+        >
           <options-wrapper @click.prevent.stop>
             <search-container @click.prevent.stop>
               <search-input
@@ -283,7 +288,8 @@ const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  left: 20px;
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.left + 'px'};
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -504,13 +510,8 @@ export default {
     }
   },
   methods: {
-    toggleOpen(event) {
-      if (
-        this.isDisabled ||
-        (event &&
-          !(event.target === this.$el) &&
-          !this.$el.contains(event.target))
-      ) {
+    toggleOpen() {
+      if (this.disabled) {
         return
       }
       this.wasClicked = false
@@ -557,6 +558,14 @@ 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,15 +1,9 @@
 <template>
-  <page-container
-    :tableHeight="tableHeight"
-    :shouldSetCustomHeight="doesTableContainDraggables"
-  >
+  <page-container>
     <table-title v-if="titleText">
       {{ titleText }}
     </table-title>
-    <table-scroll
-      ref="tableRef"
-      :isPositionAbsolute="doesTableContainDraggables"
-    >
+    <table-scroll>
       <table-wrapper :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
@@ -32,15 +26,7 @@
 import styled from 'vue-styled-components'
 import Spinner from '../../spinner'
 
-const pageContainerProps = {
-  tableHeight: String,
-  shouldSetCustomHeight: Boolean
-}
-const PageContainer = styled('div', pageContainerProps)`
-  position: relative;
-  height: ${(props) =>
-    props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
-`
+const PageContainer = styled.div``
 
 const TableTitle = styled.div`
   margin-bottom: 16px;
@@ -49,27 +35,15 @@ const TableTitle = styled.div`
   text-transform: uppercase;
 `
 
-const tableScrollProps = {
-  isPositionAbsolute: Boolean
-}
-
-const TableScroll = styled('div', tableScrollProps)`
+const TableScroll = styled.div`
   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-x: auto;
-  overflow-y: hidden;
+  overflow: auto;
 
   ::-webkit-scrollbar {
     height: 5px; //height of the whole scrollbar area
@@ -93,11 +67,7 @@ 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;
@@ -408,39 +378,6 @@ 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

@@ -8,6 +8,8 @@
     <dropdown-container
       v-if="isOpen"
       @click.stop
+      :top="getItemLocation('top')"
+      :right="getItemLocation('right')"
       :containerWidth="childOpen ? 440 : 240"
       ref="dropdownContainer"
     >
@@ -128,7 +130,6 @@ const PageContainer = styled.div`
   justify-items: center;
   width: 30px;
   height: 30px;
-  position: relative;
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
@@ -157,15 +158,12 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const dropdownAttrs = {
-  containerWidth: Number
-}
+const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
 const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: 0;
-  right: 27px;
-
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.right - props.containerWidth + 'px'};
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -301,6 +299,14 @@ export default {
         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
+      }
+      return location
+    },
     hasChildren(item) {
       return !!item.children && !!item.children.length
     },