@v1nt1248/3nclient-lib 0.3.29 → 0.3.30

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.29",
+  "version": "0.3.30",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

package/src/components/ui3n-autocomplete/types.ts

@@ -57,6 +57,11 @@ export interface Ui3nAutocompleteProps<T extends Ui3nAutocompleteOptionBase> {
    * @default false
    */
   hideSelected?: boolean;
+  /**
+   * Whether to lock scroll when menu is open
+   * @default false
+   */
+  lockScroll?: boolean;
   /**
    * Items to display
    */

package/src/components/ui3n-autocomplete/ui3n-autocomplete.vue

@@ -19,6 +19,7 @@
   const vUi3nHtml = Ui3nHtml;
 
   const props = withDefaults(defineProps<Ui3nAutocompleteProps<T>>(), {
+    lockScroll: false,
     clearOnSelect: false,
     filterKeys: () => [],
     hideSelected: false,
@@ -133,7 +134,7 @@
   function handlePressingDownKey() {
     if (activeItemsIndex.value === null) {
       activeItemsIndex.value = 0;
-      menuBodyEl.value && menuBodyEl.value.focus();
+      menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
       return;
     }
 
@@ -145,7 +146,7 @@
   function handlePressingUpKey() {
     if (activeItemsIndex.value === null) {
       activeItemsIndex.value = size(filteredItems.value) - 1;
-      menuBodyEl.value && menuBodyEl.value.focus();
+      menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
       return;
     }
 
@@ -167,7 +168,7 @@
     if (activeItemsIndex.value === null && !isMenuOpen.value) {
       isMenuOpen.value = true;
       activeItemsIndex.value = 0;
-      menuBodyEl.value && menuBodyEl.value.focus();
+      menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
       return;
     }
 
@@ -322,8 +323,10 @@
 
     <ui3n-menu
       v-model="isMenuOpen"
+      :lock-scroll="lockScroll"
       :offset-x="2"
       :offset-y="4"
+      position-strategy="fixed"
       position-autoupdate
       :content-border-radius="[0, 0, 8, 8]"
       :disabled="disabled"
@@ -381,7 +384,7 @@
           :placeholder="isEmpty(modelValue) && placeholder ? placeholder : ''"
           :disabled="disabled"
           @input="onInput"
-          @focusin="emits('update:focused', true)"
+          @focusin.prevent="emits('update:focused', true)"
           @focusout="onBlur"
           @keydown.down="onKeydown($event, 'down')"
           @keydown.up="onKeydown($event, 'up')"

package/src/components/ui3n-menu/types.ts

@@ -31,6 +31,11 @@ export interface Ui3nMenuProps {
    * @default true
    */
   allowFlip?: boolean;
+  /**
+   * Whether to lock scroll when menu is open
+   * @default false
+   */
+  lockScroll?: boolean;
   /**
    * Offset X
    * @default 0

package/src/components/ui3n-menu/ui3n-menu.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-  import { computed, ref, watch, useTemplateRef } from 'vue';
+  import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue';
   import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
   import { default as vClickOutside } from '../../directives/ui3n-click-outside';
   import { Nullable } from '@/types';
   import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots, Ui3nMenuExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nMenuProps>(), {
+    lockScroll: false,
     positionStrategy: 'absolute',
     offsetX: 0,
     offsetY: 0,
@@ -23,6 +24,8 @@
   const menuContentElement = useTemplateRef<HTMLDivElement>('menu-content-element');
   const isShow = ref(false);
 
+  let targetScrollElement: HTMLElement | null = null;
+
   const outerTriggerElement = ref<Nullable<HTMLElement>>(props.triggerElement || null);
 
   const usedTriggerElement = computed(() => outerTriggerElement.value || menuTriggerElement.value);
@@ -72,6 +75,109 @@
     };
   });
 
+  function preventScrollEvent(e: Event) {
+    e.preventDefault();
+  }
+
+  function getVerticalScrollParent(element: HTMLElement | null): HTMLElement {
+    if (!element) {
+      return document.body;
+    }
+
+    let parent: HTMLElement | null = element.parentElement;
+
+    while (parent && parent !== document.body && parent !== document.documentElement) {
+      const style = window.getComputedStyle(parent);
+
+      if (/(auto|scroll)/.test(style.overflowY || style.overflow)) {
+        if (parent.scrollHeight > parent.clientHeight) {
+          return parent;
+        }
+      }
+      parent = parent.parentElement;
+    }
+
+    return document.body;
+  }
+
+  function lockScroll() {
+    if (!props.lockScroll) {
+      return;
+    }
+
+    const trigger = usedTriggerElement.value;
+    targetScrollElement = getVerticalScrollParent(trigger);
+
+    if (targetScrollElement) {
+      const el = targetScrollElement;
+
+      const currentLocks = Number(el.dataset.scrollLocksCount || '0');
+
+      // If this is the FIRST menu opened for this container
+      if (currentLocks === 0) {
+        el.dataset.scrollLocksCount = '1';
+
+        // We remember the original overscroll-behavior-y in data-original-overscroll
+        el.dataset.originalOverscroll = el.style.overscrollBehaviorY || '';
+
+        // Isolating scrolling
+        el.style.overscrollBehaviorY = 'contain';
+
+        if (targetScrollElement === document.body) {
+          document.addEventListener('wheel', preventScrollEvent, { passive: false });
+          document.addEventListener('touchmove', preventScrollEvent, { passive: false });
+        } else {
+          targetScrollElement.addEventListener('wheel', preventScrollEvent, { passive: false });
+          targetScrollElement.addEventListener('touchmove', preventScrollEvent, { passive: false });
+        }
+      } else {
+        // If the container is already blocked by another menu, simply increment the counter
+        el.dataset.scrollLocksCount = String(currentLocks + 1);
+      }
+    }
+  }
+
+  function unlockScroll() {
+    if (!targetScrollElement) {
+      return;
+    }
+
+    const el = targetScrollElement;
+    const currentLocks = Number(el.dataset.scrollLocksCount || '0');
+
+    if (currentLocks > 0) {
+      const newLocks = currentLocks - 1;
+
+      // Release the lock only when the LAST menu holding this container has closed
+      if (newLocks === 0) {
+        const originalOverscroll = el.dataset.originalOverscroll;
+
+        if (originalOverscroll) {
+          el.style.overscrollBehaviorY = originalOverscroll;
+        } else {
+          el.style.removeProperty('overscroll-behavior-y');
+        }
+
+        if (targetScrollElement === document.body) {
+          document.removeEventListener('wheel', preventScrollEvent);
+          document.removeEventListener('touchmove', preventScrollEvent);
+        } else {
+          targetScrollElement.removeEventListener('wheel', preventScrollEvent);
+          targetScrollElement.removeEventListener('touchmove', preventScrollEvent);
+        }
+
+        // We completely remove data attributes from the DOM tree to avoid leaving garbage.
+        delete el.dataset.scrollLocksCount;
+        delete el.dataset.originalOverscroll;
+      } else {
+        // If there are still open menus, simply keep the reduced counter
+        el.dataset.scrollLocksCount = String(newLocks);
+      }
+    }
+
+    targetScrollElement = null;
+  }
+
   function toggleMenu() {
     if (props.disabled) {
       return;
@@ -101,13 +207,13 @@
     }
   }
 
-  watch(isPositioned, val => {
-    val ? emits('opened') : emits('closed');
-  });
-
   watch(
     () => props.modelValue,
-    val => {
+    async val => {
+      if (!val) {
+        unlockScroll();
+      }
+
       if (isShow.value !== val) {
         isShow.value = val;
       }
@@ -115,6 +221,15 @@
     { immediate: true },
   );
 
+  watch(isPositioned, val => {
+    if (val) {
+      lockScroll();
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  });
+
   watch(
     () => props.triggerElement,
     val => {
@@ -131,6 +246,10 @@
     }
   });
 
+  onUnmounted(() => {
+    unlockScroll();
+  });
+
   defineExpose<Ui3nMenuExpose>({
     isPositioned,
     update,
@@ -187,7 +306,7 @@
 
   .ui3nMenuContent {
     position: absolute;
-    border-radius: var(--ui3n-menu-content-border-raduis);
+    border-radius: var(--ui3n-menu-content-border-radius);
     background-color: var(--ui3n-menu-content-bg);
     z-index: var(--ui3n-menu-zIndex, 1000);
     overflow: hidden;