@eturnity/eturnity_reusable_components 9.25.15 → 9.25.17

package/package.json

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

package/src/assets/svgIcons/evu4u.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4961 8.68262C11.4961 8.94088 11.5489 9.16727 11.6543 9.3623C11.765 9.55206 11.9173 9.70274 12.1123 9.81348C12.3074 9.91895 12.532 9.97168 12.7852 9.97168C13.0435 9.97167 13.2707 9.91894 13.4658 9.81348C13.666 9.70275 13.8184 9.55205 13.9238 9.3623C14.0292 9.16727 14.082 8.94087 14.082 8.68262V5.16992H15V8.68262C15 9.10959 14.9081 9.48408 14.7236 9.80566C14.5443 10.1274 14.2857 10.3783 13.9482 10.5576C13.6161 10.7316 13.223 10.8183 12.7695 10.8184C12.3319 10.8184 11.9465 10.7316 11.6143 10.5576C11.2873 10.3783 11.0313 10.1274 10.8467 9.80566C10.6674 9.48406 10.5782 9.10963 10.5781 8.68262V5.16992H11.4961V8.68262ZM4.40918 6.00879H1.91797V7.47949H4.11719V8.30273H1.91797V9.86914H4.43359V10.707H1V5.16992H4.40918V6.00879ZM7.50098 9.63184L9.26562 5.16992H10.2461L8.00781 10.707H7.00293L4.76465 5.16992H5.7373L7.50098 9.63184Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/plannis.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.59233 2.09407L4.4078 8.34331C4.2456 8.53883 4.38465 8.83486 4.63869 8.83486H6.85299C7.05209 8.83486 7.19596 9.02525 7.14159 9.21678L5.88818 13.6325C5.7996 13.9445 6.20054 14.1556 6.40767 13.9059L11.5922 7.65669C11.7544 7.46117 11.6154 7.16514 11.3613 7.16514H9.14701C8.94791 7.16514 8.80404 6.97475 8.85841 6.78322L10.1118 2.36754C10.2004 2.05547 9.79946 1.8444 9.59233 2.09407Z" fill="#263238"/>
+</svg>

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