@regcheq/ui-vue-2 1.11.0 → 1.12.0

package/dist/index.esm.js

@@ -39174,6 +39174,52 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
 //
 //
 
+
+// Registro de bloqueos compartido entre todas las instancias: guarda cuántos
+// drawers abiertos dependen de cada contenedor y cuál era su overflow original.
+// Sin el contador, cerrar un drawer devolvería el scroll aunque siguiera otro
+// abierto sobre el mismo contenedor.
+const scrollLocks = new Map();
+
+// El scroll de fondo no siempre vive en el body: muchas apps scrollean en un
+// contenedor interno. Se bloquean todos los ancestros scrolleables más el body.
+function scrollableAncestors(node) {
+  const targets = [];
+  let el = node;
+  while (el && el !== document.body && el.nodeType === 1) {
+    const {
+      overflowY
+    } = window.getComputedStyle(el);
+    if (overflowY === 'auto' || overflowY === 'scroll') targets.push(el);
+    el = el.parentElement;
+  }
+  targets.push(document.body);
+  return targets;
+}
+function lockScroll(targets) {
+  targets.forEach(el => {
+    const lock = scrollLocks.get(el);
+    if (lock) {
+      lock.count += 1;
+      return;
+    }
+    scrollLocks.set(el, {
+      count: 1,
+      previousOverflow: el.style.overflow
+    });
+    el.style.overflow = 'hidden';
+  });
+}
+function unlockScroll(targets) {
+  targets.forEach(el => {
+    const lock = scrollLocks.get(el);
+    if (!lock) return;
+    lock.count -= 1;
+    if (lock.count > 0) return;
+    el.style.overflow = lock.previousOverflow;
+    scrollLocks.delete(el);
+  });
+}
 var script = {
   name: 'Drawer',
   props: {
@@ -39202,21 +39248,33 @@ var script = {
     }
   },
   watch: {
-    open: {
-      immediate: true,
-      handler(isOpen) {
-        document.body.style.overflow = isOpen ? 'hidden' : '';
-      }
+    open(isOpen) {
+      this.setScrollLock(isOpen);
     }
   },
+  created() {
+    this.locked = false;
+    this.scrollTargets = [];
+  },
   mounted() {
+    // Se resuelven acá y no en cada apertura: en mounted el drawer todavía está
+    // en su lugar del DOM y los ancestros son los que corresponden.
+    this.scrollTargets = scrollableAncestors(this.$el.parentElement);
     document.addEventListener('keydown', this.handleKeydown);
+    if (this.open) this.setScrollLock(true);
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleKeydown);
-    document.body.style.overflow = '';
+    this.setScrollLock(false);
   },
   methods: {
+    // Idempotente: solo actúa cuando cambia el estado, para no descuadrar el
+    // contador del registro compartido.
+    setScrollLock(shouldLock) {
+      if (shouldLock === this.locked) return;
+      this.locked = shouldLock;
+      if (shouldLock) lockScroll(this.scrollTargets);else unlockScroll(this.scrollTargets);
+    },
     handleKeydown(e) {
       if (e.key === 'Escape' && this.open) {
         this.$emit('close');

package/dist/index.js

@@ -39176,6 +39176,52 @@ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
 //
 //
 
+
+// Registro de bloqueos compartido entre todas las instancias: guarda cuántos
+// drawers abiertos dependen de cada contenedor y cuál era su overflow original.
+// Sin el contador, cerrar un drawer devolvería el scroll aunque siguiera otro
+// abierto sobre el mismo contenedor.
+const scrollLocks = new Map();
+
+// El scroll de fondo no siempre vive en el body: muchas apps scrollean en un
+// contenedor interno. Se bloquean todos los ancestros scrolleables más el body.
+function scrollableAncestors(node) {
+  const targets = [];
+  let el = node;
+  while (el && el !== document.body && el.nodeType === 1) {
+    const {
+      overflowY
+    } = window.getComputedStyle(el);
+    if (overflowY === 'auto' || overflowY === 'scroll') targets.push(el);
+    el = el.parentElement;
+  }
+  targets.push(document.body);
+  return targets;
+}
+function lockScroll(targets) {
+  targets.forEach(el => {
+    const lock = scrollLocks.get(el);
+    if (lock) {
+      lock.count += 1;
+      return;
+    }
+    scrollLocks.set(el, {
+      count: 1,
+      previousOverflow: el.style.overflow
+    });
+    el.style.overflow = 'hidden';
+  });
+}
+function unlockScroll(targets) {
+  targets.forEach(el => {
+    const lock = scrollLocks.get(el);
+    if (!lock) return;
+    lock.count -= 1;
+    if (lock.count > 0) return;
+    el.style.overflow = lock.previousOverflow;
+    scrollLocks.delete(el);
+  });
+}
 var script = {
   name: 'Drawer',
   props: {
@@ -39204,21 +39250,33 @@ var script = {
     }
   },
   watch: {
-    open: {
-      immediate: true,
-      handler(isOpen) {
-        document.body.style.overflow = isOpen ? 'hidden' : '';
-      }
+    open(isOpen) {
+      this.setScrollLock(isOpen);
     }
   },
+  created() {
+    this.locked = false;
+    this.scrollTargets = [];
+  },
   mounted() {
+    // Se resuelven acá y no en cada apertura: en mounted el drawer todavía está
+    // en su lugar del DOM y los ancestros son los que corresponden.
+    this.scrollTargets = scrollableAncestors(this.$el.parentElement);
     document.addEventListener('keydown', this.handleKeydown);
+    if (this.open) this.setScrollLock(true);
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleKeydown);
-    document.body.style.overflow = '';
+    this.setScrollLock(false);
   },
   methods: {
+    // Idempotente: solo actúa cuando cambia el estado, para no descuadrar el
+    // contador del registro compartido.
+    setScrollLock(shouldLock) {
+      if (shouldLock === this.locked) return;
+      this.locked = shouldLock;
+      if (shouldLock) lockScroll(this.scrollTargets);else unlockScroll(this.scrollTargets);
+    },
     handleKeydown(e) {
       if (e.key === 'Escape' && this.open) {
         this.$emit('close');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@regcheq/ui-vue-2",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "files": [