@eturnity/eturnity_reusable_components 9.25.5 → 9.25.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.5",
+  "version": "9.25.7",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/redo.svg

@@ -1,3 +1,5 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.14648 0.146423C9.34173 -0.048822 9.65825 -0.0487888 9.85352 0.146423L12.8535 3.14642C13.0488 3.34169 13.0488 3.65819 12.8535 3.85345L9.85352 6.85345C9.65824 7.04858 9.3417 7.04867 9.14648 6.85345C8.95132 6.65823 8.95137 6.34168 9.14648 6.14642L11.293 3.99994H5C2.79095 4.00004 1 5.79086 1 7.99994C1.00005 10.209 2.79097 11.9998 5 11.9999H12.5C12.7761 11.9999 13 12.2238 13 12.4999C13 12.776 12.7761 12.9999 12.5 12.9999H5C2.23869 12.9998 4.52248e-05 10.7613 0 7.99994C0 5.23858 2.23866 3.00004 5 2.99994H11.293L9.14648 0.853455C8.95132 0.658233 8.95137 0.34168 9.14648 0.146423Z" fill="#263238"/>
+<svg width="14" height="14" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g transform="matrix(-1,0,0,1,14,0)">
+<path d="M4.64648 1.64655C4.84173 1.4513 5.15825 1.45133 5.35352 1.64655C5.54878 1.84181 5.54878 2.15831 5.35352 2.35358L3.20703 4.50006H9.5C12.2614 4.50006 14.5 6.73864 14.5 9.50006C14.5 12.2614 12.2614 14.5001 9.5 14.5001H2C1.72397 14.5 1.50005 14.2761 1.5 14.0001C1.5 13.724 1.72394 13.5002 2 13.5001H9.5C11.7091 13.5001 13.5 11.7092 13.5 9.50006C13.5 7.29092 11.7091 5.50006 9.5 5.50006H3.20703L5.35352 7.64655C5.54878 7.84181 5.54878 8.15831 5.35352 8.35358C5.15824 8.54871 4.8417 8.54879 4.64648 8.35358L1.64648 5.35358C1.45132 5.15836 1.45137 4.8418 1.64648 4.64655L4.64648 1.64655Z" fill="#263238"/>
+</g>
 </svg>

package/src/assets/svgIcons/undo.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="14" height="14" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M4.64648 1.64655C4.84173 1.4513 5.15825 1.45133 5.35352 1.64655C5.54878 1.84181 5.54878 2.15831 5.35352 2.35358L3.20703 4.50006H9.5C12.2614 4.50006 14.5 6.73864 14.5 9.50006C14.5 12.2614 12.2614 14.5001 9.5 14.5001H2C1.72397 14.5 1.50005 14.2761 1.5 14.0001C1.5 13.724 1.72394 13.5002 2 13.5001H9.5C11.7091 13.5001 13.5 11.7092 13.5 9.50006C13.5 7.29092 11.7091 5.50006 9.5 5.50006H3.20703L5.35352 7.64655C5.54878 7.84181 5.54878 8.15831 5.35352 8.35358C5.15824 8.54871 4.8417 8.54879 4.64648 8.35358L1.64648 5.35358C1.45132 5.15836 1.45137 4.8418 1.64648 4.64655L4.64648 1.64655Z" fill="#263238"/>
 </svg>

package/src/components/threeDots/index.vue

@@ -12,12 +12,13 @@
       <DotItem />
       <DotItem />
     </ButtonContainer>
-    <DropdownContainer
-      ref="dropdownContainer"
-      :container-width="childOpen ? 440 : 240"
-      @click.stop
-    >
-      <template v-if="isOpen">
+    <Teleport to="body">
+      <DropdownContainer
+        v-if="isOpen"
+        ref="dropdownContainer"
+        :container-width="childOpen ? 440 : 240"
+        @click.stop
+      >
         <LoadingContainer v-if="isLoading">
           <Spinner />
         </LoadingContainer>
@@ -82,8 +83,8 @@
             </span>
           </OptionItem>
         </OptionsContainer>
-      </template>
-    </DropdownContainer>
+      </DropdownContainer>
+    </Teleport>
   </PageContainer>
 </template>
 
@@ -194,8 +195,10 @@
     containerWidth: Number,
   }
   const DropdownContainer = styled('div', dropdownAttrs)`
-    z-index: 99;
-    position: absolute;
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    left: 0;
     display: grid;
     grid-template-columns: auto auto;
   `
@@ -382,19 +385,36 @@
         theme,
       }
     },
+    beforeUnmount() {
+      this.removeListeners()
+    },
     methods: {
       toggleButton() {
         this.isOpen = !this.isOpen
 
         if (this.isOpen) {
-          this.setContextMenuPosition()
+          this.$nextTick(() => this.setContextMenuPosition())
           window.addEventListener('resize', this.toggleButton)
+          window.addEventListener('scroll', this.onWindowScroll, true)
           document.addEventListener('click', this.clickOutside)
         } else {
-          window.removeEventListener('resize', this.toggleButton)
-          document.removeEventListener('click', this.clickOutside)
+          this.removeListeners()
         }
       },
+      removeListeners() {
+        window.removeEventListener('resize', this.toggleButton)
+        window.removeEventListener('scroll', this.onWindowScroll, true)
+        document.removeEventListener('click', this.clickOutside)
+      },
+      onWindowScroll(event) {
+        // Scrolling inside the options list must not close the dropdown
+        const dropdownRef = this.$refs.dropdownContainer
+        const contextMenu = dropdownRef?.$el ?? dropdownRef
+        if (contextMenu && contextMenu.contains(event.target)) {
+          return
+        }
+        this.toggleButton()
+      },
       setContextMenuPosition() {
         const dropdownRef = this.$refs.dropdownContainer
         const pageRef = this.$refs.pageContainer
@@ -408,70 +428,39 @@
           return
         }
         const rectButton = button.getBoundingClientRect()
-        const relativeParent =
-          this.findRelativeParent(contextMenu) || document.documentElement
-        if (
-          !relativeParent ||
-          typeof relativeParent.getBoundingClientRect !== 'function'
-        ) {
-          return
-        }
-        const rectRelativeParent = relativeParent.getBoundingClientRect()
 
         const positionArray = this.determineElementQuarter(button, rectButton)
         contextMenu.style.transform = ''
         if (this.dropdownPosition == 'vertical') {
           // Position horizontally (left/right/center)
           if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left + 'px'
+            contextMenu.style.left = rectButton.left + 'px'
           } else {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 'px'
+            contextMenu.style.left = rectButton.right + 'px'
             contextMenu.style.transform = 'translateX(-100%)'
           }
           // Position vertically (above/below)
           if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 5 + 'px'
+            contextMenu.style.top = rectButton.bottom + 5 + 'px'
           } else {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top - 5 + 'px'
+            contextMenu.style.top = rectButton.top - 5 + 'px'
             contextMenu.style.transform += ' translateY(-100%)'
           }
         } else {
           if (positionArray.includes('left')) {
-            contextMenu.style.left =
-              rectButton.right - rectRelativeParent.left + 5 + 'px'
+            contextMenu.style.left = rectButton.right + 5 + 'px'
           } else {
-            contextMenu.style.left =
-              rectButton.left - rectRelativeParent.left - 5 + 'px'
+            contextMenu.style.left = rectButton.left - 5 + 'px'
             contextMenu.style.transform = 'translateX(-100%)'
           }
           if (positionArray.includes('top')) {
-            contextMenu.style.top =
-              rectButton.top - rectRelativeParent.top + 'px'
+            contextMenu.style.top = rectButton.top + 'px'
           } else {
-            contextMenu.style.top =
-              rectButton.bottom - rectRelativeParent.top + 'px'
+            contextMenu.style.top = rectButton.bottom + 'px'
             contextMenu.style.transform += ' translateY(-100%)'
           }
         }
       },
-      findRelativeParent(element) {
-        while (element.parentElement) {
-          if (
-            window.getComputedStyle(element.parentElement).position ===
-              'relative' ||
-            window.getComputedStyle(element.parentElement).position ===
-              'absolute'
-          ) {
-            return element.parentElement
-          }
-          element = element.parentElement
-        }
-        return null
-      },
       determineElementQuarter(element, rect) {
         const viewportWidth = window.innerWidth
         const viewportHeight = window.innerHeight
@@ -509,7 +498,13 @@
         this.isOpen = false
       },
       clickOutside(event) {
-        if (this.$el.contains(event.target) || !this.isOpen) {
+        if (!this.isOpen || this.$el.contains(event.target)) {
+          return
+        }
+        // The dropdown is teleported to body, so it is not inside this.$el
+        const dropdownRef = this.$refs.dropdownContainer
+        const contextMenu = dropdownRef?.$el ?? dropdownRef
+        if (contextMenu && contextMenu.contains(event.target)) {
           return
         }
         this.toggleButton()