@eturnity/eturnity_reusable_components 8.13.13-EPDM-6306.0 → 8.13.13-EPDM-12459.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.13.13-EPDM-6306.0",
+  "version": "8.13.13-EPDM-12459.0",
   "files": [
     "dist",
     "src"

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

@@ -60,7 +60,7 @@
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
         :text-align="textAlign"
-        :value="formattedValue"
+        :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
         @input="onInput($event)"
@@ -74,7 +74,7 @@
 
       <UnitContainer
         v-if="unitName && showLinearUnitName && !hasSlot"
-        :has-length="hasLength"
+        :has-length="!!textInput.length"
         :is-error="isError"
         >{{ unitName }}</UnitContainer
       >
@@ -91,7 +91,7 @@
           :disabled="isSelectDisabled"
           :select-width="`${selectWidth}px`"
           :show-border="false"
-          @input-change="handleSelectChange"
+          @input-change="$emit('select-change', $event)"
         >
           <template #selector>
             <SelectText>{{ getSelectValue }}</SelectText>
@@ -449,18 +449,8 @@
     background-color: ${({ theme }) => theme.colors.grey4};
   `
 
-  const EVENT_TYPES = {
-    INPUT_FOCUS: 'input-focus',
-    INPUT_CHANGE: 'input-change',
-    INPUT_BLUR: 'input-blur',
-    PRESS_ENTER: 'on-enter-click',
-    INPUT_DRAG: 'on-input-drag',
-    SELECT_CHANGE: 'select-change',
-  }
-
   export default {
     name: 'InputNumber',
-    emits: [...Object.values(EVENT_TYPES)],
     components: {
       Container,
       InputContainer,
@@ -699,10 +689,9 @@
     },
     data() {
       return {
+        textInput: '',
         isFocused: false,
         warningIcon: warningIcon,
-        inputValue: null,
-        enteredValue: null,
       }
     },
     computed: {
@@ -725,14 +714,6 @@
 
         return item ? item.label : '-'
       },
-      formattedValue() {
-        return this.isFocused
-          ? this.enteredValue
-          : this.formatWithCurrency(this.value)
-      },
-      hasLength() {
-        return this.formattedValue !== null && this.formattedValue.length > 0
-      },
     },
     watch: {
       focus(value) {
@@ -743,19 +724,30 @@
       clearInput: function (value) {
         if (value) {
           // If the value is typed, then we should clear the textInput on Continue
-          this.inputValue = ''
-          this.enteredValue = ''
+          this.textInput = ''
         }
       },
-      value: {
-        immediate: true,
-        handler(val) {
-          if (this.value !== this.inputValue && !Number.isNaN(this.value)) {
-            this.inputValue = this.value
-            this.enteredValue = this.value
-          }
-        },
-      },
+    },
+    created() {
+      if (this.value) {
+        this.textInput = numberToString({
+          value: this.value,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      } else if (this.defaultNumber !== null) {
+        this.textInput = numberToString({
+          value: this.defaultNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      } else if (this.minNumber !== null) {
+        this.textInput = numberToString({
+          value: this.minNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+      }
     },
     mounted() {
       if (this.focus) {
@@ -794,28 +786,29 @@
         }
       },
       onEnterPress() {
-        this.$emit(EVENT_TYPES.PRESS_ENTER)
+        this.$emit('on-enter-click')
         this.$refs.inputField1.$el.blur()
       },
-      onChangeHandler(value) {
-        if (isNaN(value) || value === '') {
-          value = this.defaultNumber
+      onChangeHandler(event) {
+        if (isNaN(event) || event === '') {
+          event = this.defaultNumber
             ? this.defaultNumber
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
-            : value
+            : event
         }
         if (!this.allowNegative) {
-          value = Math.abs(value)
+          event = Math.abs(event)
         }
-        value = parseFloat(value)
+        event = parseFloat(event)
         // Need to return an integer rather than a string
-        return parseFloat(value)
+        this.$emit('input-change', event)
       },
-      onEvaluateCode(value) {
+      onEvaluateCode(event) {
         // function to perform math on the code
         // filter the string in case of any malicious content
-        let filtered = value.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
+        const val = event.target.value
+        let filtered = val.replace('(auto)', '').replace(/[^-()\d/*+.,]/g, '')
         filtered = filtered.split(/([-+*/()])/)
         let formatted = filtered.map((item) => {
           if (
@@ -873,29 +866,48 @@
         return array
       },
       onInput(event) {
-        this.enteredValue = event.target.value
-        if (!this.isFocused || this.enteredValue === this.inputValue) {
+        if (!this.isFocused) {
           return
         }
+        if (event.target.value === '') {
+          this.$emit('on-input', '')
+        }
         let evaluatedVal
         try {
-          evaluatedVal = this.onEvaluateCode(String(this.enteredValue))
+          evaluatedVal = this.onEvaluateCode(event)
         } finally {
-          this.inputValue = this.onChangeHandler(evaluatedVal)
-
-          if (this.isFocused && typeof this.enteredValue !== 'number') {
-            this.$emit(EVENT_TYPES.INPUT_CHANGE, this.inputValue)
+          if (evaluatedVal && this.value != evaluatedVal) {
+            this.$emit('on-input', evaluatedVal)
           }
         }
         this.textInput = evaluatedVal
       },
       onInputBlur(e) {
         this.isFocused = false
-        this.enteredValue = this.inputValue
-        this.$emit(
-          EVENT_TYPES.INPUT_BLUR,
-          this.onEvaluateCode(String(this.inputValue))
-        )
+        let value = e.target.value
+        let evaluatedInput = this.onEvaluateCode(e)
+        this.onChangeHandler(evaluatedInput ? evaluatedInput : value)
+        if ((evaluatedInput && value.length) || this.minNumber !== null) {
+          this.textInput = numberToString({
+            value:
+              evaluatedInput && value.length
+                ? evaluatedInput
+                : this.defaultNumber
+                ? this.defaultNumber
+                : this.minNumber,
+            numberPrecision: this.numberPrecision,
+            minDecimals: this.minDecimals,
+          })
+        }
+        let adjustedMinValue =
+          evaluatedInput && evaluatedInput.length
+            ? evaluatedInput
+            : this.defaultNumber
+            ? this.defaultNumber
+            : this.minNumber || this.minNumber === 0
+            ? this.minNumber
+            : ''
+        this.$emit('input-blur', adjustedMinValue)
       },
       focusInput() {
         if (this.disabled) {
@@ -905,7 +917,7 @@
         this.$nextTick(() => {
           this.$refs.inputField1.$el.select()
         })
-        this.$emit(EVENT_TYPES.INPUT_FOCUS, this.inputValue)
+        this.$emit('input-focus')
       },
       blurInput() {
         if (this.disabled) {
@@ -925,7 +937,7 @@
             : this.minNumber || this.minNumber === 0
             ? this.minNumber
             : ''
-        if (adjustedMinValue || adjustedMinValue === 0) {
+        if ((adjustedMinValue || adjustedMinValue === 0) && !this.isFocused) {
           let input = this.numberToStringEnabled
             ? numberToString({
                 value: adjustedMinValue,
@@ -938,8 +950,6 @@
           return input + ' ' + unit
         } else if (!adjustedMinValue && adjustedMinValue !== 0) {
           return ''
-        } else if (this.isFocused) {
-          return value
         } else {
           return this.numberToStringEnabled
             ? numberToString({
@@ -960,7 +970,14 @@
         e.preventDefault()
         let value = parseFloat(this.value || 0)
         value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-        this.$emit(EVENT_TYPES.INPUT_DRAG, this.onChangeHandler(value))
+        this.$emit('on-input-drag', value)
+
+        this.textInput = numberToString({
+          value: value && value.length ? value : this.minNumber,
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals,
+        })
+        //this.value=value
       },
       stopInteract(e) {
         e.preventDefault()
@@ -968,9 +985,6 @@
         window.removeEventListener('mouseup', this.stopInteract, false)
         this.blurInput()
       },
-      handleSelectChange(value) {
-        this.$emit(EVENT_TYPES.SELECT_CHANGE, value)
-      },
     },
   }
 </script>

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

@@ -109,11 +109,7 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret
-            class="caret_dropdown"
-            :color-mode="colorMode"
-            @click.stop="toggleCaretDropdown"
-          >
+          <Caret class="caret_dropdown" :color-mode="colorMode">
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -142,12 +138,11 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                dropdownBgColor ||
-                colorMode == 'dark' ||
-                colorMode == 'transparent'
+                colorMode == 'dark' || colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
+              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -167,10 +162,17 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-fixed-dropdown-position="isFixedDropdownPosition"
+              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
               :selected-value="selectedValue"
+              :style="{
+                transform: `translate(${dropdownPosition?.left}px, ${
+                  noRelative ? 'auto' : `${dropdownPosition?.top}px`
+                })`,
+              }"
               @mouseleave="optionLeave"
               @option-hovered="optionHovered"
               @option-selected="optionSelected"
@@ -208,7 +210,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport } from 'vue'
+  import { Teleport, inject } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -392,14 +394,17 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
+    isFixedDropdownPosition: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
-    z-index: ${(props) => (props.isActive ? '2' : '99999')};
-    position: absolute;
-    top: ${(props) =>
-      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
-    left: ${(props) => props.dropdownPosition?.left}px;
+    z-index: ${(props) =>
+      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
+    position: ${(props) =>
+      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
+    top: 0px;
+    left: 0px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -647,6 +652,11 @@
         type: String,
         required: false,
       },
+      isFixedDropdownPosition: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {
@@ -664,6 +674,17 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
+        isDisplayedAtBottom: true,
+        selectTopPosition: 0,
+        selectAndDropdownDistance: 0,
+        animationFrameId: null,
+      }
+    },
+    setup() {
+      const modalRef = inject('modalRef')
+
+      return {
+        modalRef,
       }
     },
     computed: {
@@ -721,6 +742,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.modalRef
+      },
     },
     watch: {
       value(val) {
@@ -734,8 +758,13 @@
           }, 10)
           await this.$nextTick()
           this.handleSetDropdownOffet()
+          if (!this.isFixedDropdownPosition) this.calculateSelectTopPosition()
         } else {
           this.dropdownPosition.left = null
+          if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId)
+            this.animationFrameId = null
+          }
           setTimeout(() => {
             this.isClickOutsideActive = false
           }, 10)
@@ -748,11 +777,30 @@
           })
         }
       },
+      isSelectDropdownShown(isShown) {
+        if (!isShown) return
+        // Need to wait for 1ms to make sure the dropdown menu is shown in the DOM
+        // before getting the distance between the select and the dropdown menu
+        setTimeout(() => {
+          this.getDistanceBetweenSelectAndDropdownMenu()
+        }, 100)
+      },
+      selectTopPosition() {
+        this.dropdownPosition.top =
+          this.selectTopPosition +
+          this.$refs.select.$el.clientHeight +
+          this.selectAndDropdownDistance
+      },
     },
     mounted() {
       this.observeDropdownHeight()
       this.observeSelectWidth()
       window.addEventListener('resize', this.handleSetDropdownOffet)
+      if (!this.isFixedDropdownPosition)
+        document.body.addEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
     },
     beforeMount() {
       this.selectedValue = this.value
@@ -761,6 +809,12 @@
       window.removeEventListener('resize', this.handleSetDropdownOffet)
       if (this.dropdownResizeObserver) this.dropdownResizeObserver.disconnect()
       if (this.selectResizeObserver) this.selectResizeObserver.disconnect()
+      if (!this.isFixedDropdownPosition) {
+        document.body.removeEventListener(
+          'scroll',
+          this.calculateSelectTopPosition
+        )
+      }
     },
     unmounted() {
       document.removeEventListener('click', this.clickOutside)
@@ -866,11 +920,11 @@
           return
         }
         await this.$nextTick()
-        const isDisplayedAtBottom = await this.generateDropdownPosition()
+        this.isDisplayedAtBottom = await this.generateDropdownPosition()
         // If the dropdown menu is going to be displayed at the bottom,
         // we need reverify its position after a dom update (nextTick)
         await this.$nextTick()
-        if (isDisplayedAtBottom) this.generateDropdownPosition()
+        if (this.isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -963,6 +1017,25 @@
           }
         }
       },
+      getDistanceBetweenSelectAndDropdownMenu() {
+        const wholeSelectTopPosition =
+          this.selectTopPosition + this.$refs.select.$el.clientHeight
+        this.selectAndDropdownDistance =
+          this.dropdownPosition.top - wholeSelectTopPosition
+      },
+      calculateSelectTopPosition() {
+        const selectRef = this.$refs.select
+        if (selectRef) {
+          const currentTopPosition =
+            selectRef.$el.getBoundingClientRect().top + window.scrollY
+          if (this.selectTopPosition !== currentTopPosition) {
+            this.selectTopPosition = currentTopPosition
+          }
+        }
+        this.animationFrameId = requestAnimationFrame(
+          this.calculateSelectTopPosition
+        )
+      },
     },
   }
 </script>

package/src/components/modals/modal/index.vue

@@ -1,7 +1,11 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+<<<<<<< HEAD
+    ref="modalRef"
+=======
     :add-padding-top="addPaddingTop"
+>>>>>>> master
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -36,6 +40,7 @@
   //   <div>Data....</div>
   // </modal>
 
+  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -58,14 +63,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 99999;
+  z-index: 9999999;
   overflow: auto;
   padding-top: ${(props) => (props.addPaddingTop ? '80px' : '0')};
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -163,6 +168,14 @@
         default: false,
       },
     },
+    setup() {
+      const modalRef = ref(null)
+      provide('modalRef', modalRef)
+
+      return {
+        modalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,

package/src/helpers/numberConverter.js

@@ -94,7 +94,7 @@ export const stringToNumber = ({
 
 export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   const minimumRounding = minDecimals ? minDecimals : 0
-  value = !Number.isNaN(parseFloat(value)) ? parseFloat(value) : 0
+  value = parseFloat(value)
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
     maximumFractionDigits: