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

package/package.json

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

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

@@ -109,7 +109,11 @@
           >
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
-          <Caret class="caret_dropdown" :color-mode="colorMode">
+          <Caret
+            class="caret_dropdown"
+            :color-mode="colorMode"
+            @click.stop="toggleCaretDropdown"
+          >
             <Icon
               v-if="isDropdownOpen"
               :color="
@@ -138,11 +142,12 @@
               v-show="isSelectDropdownShown"
               ref="dropdown"
               :bg-color="
-                colorMode == 'dark' || colorMode == 'transparent'
+                dropdownBgColor ||
+                colorMode == 'dark' ||
+                colorMode == 'transparent'
                   ? 'black'
                   : 'white'
               "
-              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -162,17 +167,10 @@
               :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"
@@ -210,7 +208,7 @@
   //     </template>
   // </Select>
 
-  import { Teleport, inject } from 'vue'
+  import { Teleport } from 'vue'
   import styled from 'vue3-styled-components'
   import InfoText from '../../infoText'
   import Icon from '../../icon'
@@ -394,17 +392,14 @@
     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' : props.isParentModal ? '9999999' : '99999'};
-    position: ${(props) =>
-      props.isFixedDropdownPosition ? 'fixed' : 'absolute'};
-    top: 0px;
-    left: 0px;
+    z-index: ${(props) => (props.isActive ? '2' : '99999')};
+    position: absolute;
+    top: ${(props) =>
+      props.noRelative ? 'auto' : props.dropdownPosition?.top + 'px'};
+    left: ${(props) => props.dropdownPosition?.left}px;
     border: ${BORDER_WIDTH} solid ${(props) => props.theme.colors.grey4};
     border-radius: 4px;
     display: flex;
@@ -652,11 +647,6 @@
         type: String,
         required: false,
       },
-      isFixedDropdownPosition: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
     },
 
     data() {
@@ -674,17 +664,6 @@
         },
         dropdownWidth: null,
         hoveredValue: null,
-        isDisplayedAtBottom: true,
-        selectTopPosition: 0,
-        selectAndDropdownDistance: 0,
-        animationFrameId: null,
-      }
-    },
-    setup() {
-      const modalRef = inject('modalRef')
-
-      return {
-        modalRef,
       }
     },
     computed: {
@@ -742,9 +721,6 @@
           /windows phone/i.test(userAgent)
         )
       },
-      isParentModal() {
-        return !!this.modalRef
-      },
     },
     watch: {
       value(val) {
@@ -758,13 +734,8 @@
           }, 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)
@@ -777,30 +748,11 @@
           })
         }
       },
-      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
@@ -809,12 +761,6 @@
       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)
@@ -920,11 +866,11 @@
           return
         }
         await this.$nextTick()
-        this.isDisplayedAtBottom = await this.generateDropdownPosition()
+        const 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 (this.isDisplayedAtBottom) this.generateDropdownPosition()
+        if (isDisplayedAtBottom) this.generateDropdownPosition()
       },
       async generateDropdownPosition() {
         const isDropdownNotCompletelyVisible =
@@ -1017,25 +963,6 @@
           }
         }
       },
-      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,11 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
-<<<<<<< HEAD
-    ref="modalRef"
-=======
     :add-padding-top="addPaddingTop"
->>>>>>> master
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -40,7 +36,6 @@
   //   <div>Data....</div>
   // </modal>
 
-  import { ref, provide } from 'vue'
   import styled from 'vue3-styled-components'
   import CloseButton from '../../buttons/closeButton'
   import Spinner from '../../spinner'
@@ -63,14 +58,14 @@
     props.backdrop == 'dark'
       ? 'rgba(0, 0, 0, 0.4)'
       : 'rgba(255, 255, 255, 0.9)'};
-  z-index: 9999999;
+  z-index: 99999;
   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)`
@@ -168,14 +163,6 @@
         default: false,
       },
     },
-    setup() {
-      const modalRef = ref(null)
-      provide('modalRef', modalRef)
-
-      return {
-        modalRef,
-      }
-    },
     watch: {
       isOpen: {
         immediate: true,

package/src/components/spinnerGif/index.vue

@@ -1,7 +1,7 @@
 <template>
   <SpinnerContainer v-if="fullWidth" data-test-id="spinner_full_container">
     <Container>
-      <SpinnerWrapper data-test-id="spinner_full_wrapper">
+      <SpinnerWrapper data-test-id="spinner_full_wrapper" :size="size">
         <img
           :class="{ white: isWhite }"
           data-test-id="spinner_full_icon"
@@ -16,7 +16,7 @@
     data-test-id="spinner_container"
     :limited-to-modal="limitedToModal"
   >
-    <SpinnerWrapper data-test-id="spinner_wrapper">
+    <SpinnerWrapper data-test-id="spinner_wrapper" :size="size">
       <img
         :class="{ white: isWhite }"
         data-test-id="spinner_full_icon"
@@ -55,7 +55,7 @@
     width: ${(props) => (props.limitedToModal ? '100%' : 'inherit')};
   `
 
-  const SpinnerWrapper = styled.div`
+  const SpinnerWrapper = styled('div', { size: String })`
     width: ${(props) => (props.size ? props.size : '60px')};
     height: auto;