@eturnity/eturnity_reusable_components 9.25.16 → 9.25.17

package/package.json

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

package/src/components/filterComponent/viewFilter.vue

@@ -382,8 +382,9 @@
     position: absolute;
     z-index: 99;
     top: 8px;
-    left: 100%;
-    transform: translateX(-50%);
+    /* Anchor to the trigger's left and grow rightward; clampBoxToViewport()
+       shifts it back in when wide content would overflow the viewport. */
+    left: 0;
     width: max-content;
     max-width: calc(100vw - 32px);
     background-color: ${(props) => props.theme.colors.white};
@@ -501,6 +502,7 @@
     data() {
       return {
         isOptionsVisible: false,
+        boxResizeObserver: null,
       }
     },
     computed: {
@@ -514,10 +516,63 @@
         return getDateFormat(this.activeLanguage)
       },
     },
+    watch: {
+      // Keep the filter box on screen: clamp on open and whenever its content
+      // resizes (e.g. a wide value is selected) or the window resizes.
+      isOptionsVisible(visible) {
+        if (visible) {
+          this.$nextTick(() => {
+            this.clampBoxToViewport()
+            this.observeBoxResize()
+            window.addEventListener('resize', this.clampBoxToViewport)
+          })
+        } else {
+          this.teardownBoxObservers()
+        }
+      },
+    },
     beforeUnmount() {
       document.removeEventListener('click', this.handleClickOutside)
+      this.teardownBoxObservers()
     },
     methods: {
+      // Shift the absolutely-positioned filter box left when its right edge
+      // would overflow the viewport, then clamp so the left edge stays visible.
+      clampBoxToViewport() {
+        const el = this.$refs.boxContainer?.$el
+        if (!el) {
+          return
+        }
+        el.style.transform = 'none'
+        const rect = el.getBoundingClientRect()
+        const margin = 16
+        const viewportWidth = window.innerWidth
+        let shift = 0
+        if (rect.right > viewportWidth - margin) {
+          shift = viewportWidth - margin - rect.right
+        }
+        if (rect.left + shift < margin) {
+          shift = margin - rect.left
+        }
+        el.style.transform = shift !== 0 ? `translateX(${shift}px)` : 'none'
+      },
+      observeBoxResize() {
+        const el = this.$refs.boxContainer?.$el
+        if (!el || typeof ResizeObserver === 'undefined') {
+          return
+        }
+        this.boxResizeObserver = new ResizeObserver(() =>
+          this.clampBoxToViewport()
+        )
+        this.boxResizeObserver.observe(el)
+      },
+      teardownBoxObservers() {
+        if (this.boxResizeObserver) {
+          this.boxResizeObserver.disconnect()
+          this.boxResizeObserver = null
+        }
+        window.removeEventListener('resize', this.clampBoxToViewport)
+      },
       isDateColumn(column) {
         if (column === 'updated') {
           return true