@regcheq/ui-vue-2 1.10.0 → 1.12.0

package/dist/index.css

@@ -1578,7 +1578,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 56px;
+  min-height: 60px;
   padding: 12px 16px;
   background: #e6f0fc;
   border-radius: 0px;
@@ -1915,7 +1915,7 @@
   margin-left: auto;
 }
 .rq-data-table__selection-slot {
-  min-height: 56px;
+  min-height: 60px;
 }
 .rq-data-table__pagination {
   display: flex;
@@ -2139,8 +2139,9 @@
   width: 100%;
 }
 .rq-drawer-wrapper {
-  position: absolute;
+  position: fixed;
   inset: 0;
+  z-index: 1050;
   overflow: hidden;
   pointer-events: none;
 }

package/dist/index.esm.js

@@ -32743,6 +32743,16 @@ var script$h = {
     textColor: {
       type: String,
       default: null
+    },
+    // Padding por eje (ej: "4px", "8px"). Pisan el padding del SCSS.
+    // Cada eje es independiente: setear uno deja el otro con su default.
+    paddingX: {
+      type: String,
+      default: null
+    },
+    paddingY: {
+      type: String,
+      default: null
     }
   },
   computed: {
@@ -32756,6 +32766,14 @@ var script$h = {
       const style = {};
       if (this.bgColor) style.backgroundColor = this.bgColor;
       if (this.textColor) style.color = this.textColor;
+      if (this.paddingX) {
+        style.paddingLeft = this.paddingX;
+        style.paddingRight = this.paddingX;
+      }
+      if (this.paddingY) {
+        style.paddingTop = this.paddingY;
+        style.paddingBottom = this.paddingY;
+      }
       return style;
     }
   }
@@ -39156,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: {
@@ -39184,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

@@ -32745,6 +32745,16 @@ var script$h = {
     textColor: {
       type: String,
       default: null
+    },
+    // Padding por eje (ej: "4px", "8px"). Pisan el padding del SCSS.
+    // Cada eje es independiente: setear uno deja el otro con su default.
+    paddingX: {
+      type: String,
+      default: null
+    },
+    paddingY: {
+      type: String,
+      default: null
     }
   },
   computed: {
@@ -32758,6 +32768,14 @@ var script$h = {
       const style = {};
       if (this.bgColor) style.backgroundColor = this.bgColor;
       if (this.textColor) style.color = this.textColor;
+      if (this.paddingX) {
+        style.paddingLeft = this.paddingX;
+        style.paddingRight = this.paddingX;
+      }
+      if (this.paddingY) {
+        style.paddingTop = this.paddingY;
+        style.paddingBottom = this.paddingY;
+      }
       return style;
     }
   }
@@ -39158,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: {
@@ -39186,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.10.0",
+  "version": "1.12.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "files": [