@eturnity/eturnity_reusable_components 8.7.5-qa-16-02-21.2 → 8.7.5-qa-16-02-21.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.7.5-qa-16-02-21.2",
+  "version": "8.7.5-qa-16-02-21.4",
   "files": [
     "dist",
     "src"

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

@@ -142,6 +142,7 @@
                   ? 'black'
                   : 'white'
               "
+              class="rc-select-dropdown"
               :dropdown-position="dropdownPosition"
               :font-color="
                 dropdownFontColor ||
@@ -161,6 +162,7 @@
               :hovered-index="hoveredIndex"
               :hovered-value="hoveredValue"
               :is-active="isActive"
+              :is-parent-modal="isParentModal"
               :min-width="minWidth"
               :no-relative="noRelative"
               :option-width="getOptionWidth"
@@ -207,7 +209,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'
@@ -391,10 +393,12 @@
     selectedValue: Number | String,
     noRelative: Boolean,
     minWidth: String,
+    isParentModal: Boolean,
   }
   const SelectDropdown = styled('div', selectDropdownAttrs)`
     box-sizing: border-box;
-    z-index: ${(props) => (props.isActive ? '2' : '99999')};
+    z-index: ${(props) =>
+      props.isActive ? '2' : props.isParentModal ? '9999999' : '99999'};
     position: absolute;
     top: 0px;
     left: 0px;
@@ -668,6 +672,13 @@
         animationFrameId: null,
       }
     },
+    setup() {
+      const rcModalRef = inject('rcModalRef')
+
+      return {
+        rcModalRef,
+      }
+    },
     computed: {
       optionLength() {
         if (this.isDropdownOpen) {
@@ -723,6 +734,9 @@
           /windows phone/i.test(userAgent)
         )
       },
+      isParentModal() {
+        return !!this.rcModalRef
+      },
     },
     watch: {
       value(val) {

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

@@ -1,6 +1,7 @@
 <template>
   <PageWrapper
     v-if="isOpen"
+    ref="rcModalRef"
     :backdrop="backdrop"
     :is-open="isOpen"
     :position="position"
@@ -30,6 +31,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'
@@ -48,13 +50,13 @@
       props.backdrop == 'dark'
         ? 'rgba(0, 0, 0, 0.4)'
         : 'rgba(255, 255, 255, 0.9)'};
-    z-index: 99999;
+    z-index: 9999999;
     overflow: auto;
 
-  @media (max-width: 425px) {
-    background: white;
-  }
-`
+    @media (max-width: 425px) {
+      background: white;
+    }
+  `
 
   const modalContainerAttrs = { overflow: String }
   const ModalContainer = styled('div', modalContainerAttrs)`
@@ -148,6 +150,14 @@
         default: 'auto',
       },
     },
+    setup() {
+      const rcModalRef = ref(null)
+      provide('rcModalRef', rcModalRef)
+
+      return {
+        rcModalRef,
+      }
+    },
     watch: {
       isOpen: {
         immediate: true,