@regcheq/ui-vue-2 1.15.0 → 1.15.2

package/dist/index.css

@@ -965,10 +965,6 @@
   position: relative;
   display: inline-block;
 }
-.rq-tooltip-wrapper .rq-tooltip--visible {
-  opacity: 1;
-  pointer-events: auto;
-}
 
 .rq-tooltip {
   z-index: 1051;
@@ -989,6 +985,10 @@
   pointer-events: none;
   transition: opacity 100ms ease-out;
 }
+.rq-tooltip--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
 .rq-tooltip--text-left {
   text-align: left;
 }
@@ -2259,6 +2259,7 @@ td[data-v-6ca52014],th[data-v-6ca52014]{padding:2px;background-color:#fff}td.tod
   color: #71717a;
   max-width: 480px;
   margin: 0;
+  text-align: center;
 }
 .rq-table__cell-tooltip {
   display: block;

package/dist/index.esm.js

@@ -33076,6 +33076,9 @@ var script$l = {
     // (celda de tabla, panel con scroll, drawer) puede recortarlo. Además deja
     // de aportar al área scrolleable del contenedor, que con `absolute`
     // producía scrollbars horizontales aunque el tooltip estuviera oculto.
+    // Ojo: `fixed` se resuelve contra el bloque contenedor, y basta un
+    // ancestro con transform/filter/perspective para volverse uno — por eso
+    // la burbuja se mueve a <body> mientras se muestra (ver portal()).
     style() {
       const base = {
         position: 'fixed'
@@ -33094,9 +33097,15 @@ var script$l = {
   },
   beforeDestroy() {
     this.unbindReposition();
+    // Si se destruye mientras se muestra, la burbuja está colgada de <body>:
+    // devolverla evita dejarla huérfana ahí cuando Vue saque el wrapper.
+    this.unportal();
   },
   methods: {
     show() {
+      this.portal();
+      // Lee layout (getBoundingClientRect), así el navegador aplica el
+      // opacity: 0 inicial antes de que --visible dispare la transición.
       this.updatePosition();
       this.visible = true;
       this.bindReposition();
@@ -33104,6 +33113,25 @@ var script$l = {
     hide() {
       this.visible = false;
       this.unbindReposition();
+      this.unportal();
+    },
+    // `fixed` se resuelve contra el bloque contenedor, no siempre contra el
+    // viewport: cualquier ancestro con transform, filter o perspective se
+    // vuelve uno. .rq-drawer, por ejemplo, anima con translateX, así que un
+    // tooltip dentro de un Drawer aparecía corrido en horizontal tanto como
+    // el drawer estuviera desplazado.
+    // Mover la burbuja a <body> mientras se muestra la deja sin ancestros
+    // que puedan capturarla, y las coordenadas del viewport valen tal cual.
+    // Solo vive ahí mientras se ve: cada tooltip oculto vuelve a su wrapper.
+    portal() {
+      const tip = this.$refs.tooltip;
+      if (!tip || tip.parentNode === document.body) return;
+      document.body.appendChild(tip);
+    },
+    unportal() {
+      const tip = this.$refs.tooltip;
+      if (!tip || tip.parentNode !== document.body) return;
+      this.$el.appendChild(tip);
     },
     // Al estar fijo al viewport, el tooltip no sigue al trigger cuando la
     // página o un contenedor interno scrollea: se recalcula mientras se ve.
@@ -33217,6 +33245,22 @@ const groupMixin = {
       default: false
     }
   },
+  computed: {
+    // `change` se saca de los listeners que se reenvían a la raíz, igual que
+    // en el atom Checkbox. Estos grupos emiten 'change' Y montan un control
+    // que dispara un 'change' nativo del DOM: ese evento burbujea hasta la
+    // raíz y, si el listener del consumidor sigue enganchado ahí, se ejecuta
+    // dos veces por un solo click (una con el booleano del componente, otra
+    // con el Event nativo). En un consumidor que togglea, los dos disparos se
+    // anulan: el control no cambia de estado pero la acción corre igual.
+    listenersWithoutChange() {
+      const {
+        change,
+        ...rest
+      } = this.$listeners;
+      return rest;
+    }
+  },
   methods: {
     handleClick() {
       if (!this.disabled) this.$emit('change', !this.checked);
@@ -33285,7 +33329,7 @@ var __vue_render__$k = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("Checkbox", {
+  }, _vm.listenersWithoutChange), [_c("Checkbox", {
     attrs: {
       checked: _vm.checked,
       disabled: _vm.disabled
@@ -33398,7 +33442,7 @@ var __vue_render__$j = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("Checkbox", {
+  }, _vm.listenersWithoutChange), [_c("Checkbox", {
     attrs: {
       checked: _vm.checked,
       disabled: _vm.disabled
@@ -33513,7 +33557,7 @@ var __vue_render__$i = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("RqSwitch", {
+  }, _vm.listenersWithoutChange), [_c("RqSwitch", {
     attrs: {
       checked: _vm.checked,
       disabled: _vm.disabled
@@ -33618,7 +33662,7 @@ var __vue_render__$h = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("div", {
+  }, _vm.listenersWithoutChange), [_c("div", {
     staticClass: "rq-rich-switch-group__aligner"
   }, [_c("RqSwitch", {
     attrs: {
@@ -34586,6 +34630,13 @@ const selectionBarVariants = cva('rq-selection-bar', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 var script$b = {
   name: 'SelectionBar',
@@ -34608,6 +34659,10 @@ var script$b = {
     clearLabel: {
       type: String,
       default: 'Limpiar selección'
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -34648,7 +34703,9 @@ var __vue_render__$b = function () {
     attrs: {
       variant: "secondary",
       size: "md",
-      "icon-right": "Trash2"
+      "icon-right": "Trash2",
+      loading: _vm.loading,
+      disabled: _vm.loading
     },
     on: {
       click: function ($event) {
@@ -39815,6 +39872,8 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -39882,6 +39941,10 @@ var script$3 = {
       type: String,
       default: null
     },
+    deleteLoading: {
+      type: Boolean,
+      default: false
+    },
     texts: {
       type: Object,
       default: () => ({})
@@ -39942,6 +40005,7 @@ var script$3 = {
     },
     mergedTexts() {
       return {
+        searchPlaceholder: 'Buscar...',
         selectedCount: '{count} registros seleccionados',
         clearSelection: 'Limpiar selección',
         delete: 'Eliminar',
@@ -39986,7 +40050,8 @@ var __vue_render__$3 = function () {
   }, [_vm.showSearch ? _c("SearchInput", {
     staticClass: "rq-data-table__search-bar",
     attrs: {
-      value: _vm.searchText
+      value: _vm.searchText,
+      placeholder: _vm.mergedTexts.searchPlaceholder
     },
     on: {
       input: function ($event) {
@@ -40005,7 +40070,8 @@ var __vue_render__$3 = function () {
       count: _vm.selectedCount,
       "delete-label": _vm.deleteLabel || _vm.mergedTexts.delete,
       "selected-count-text": _vm.mergedTexts.selectedCount,
-      "clear-label": _vm.mergedTexts.clearSelection
+      "clear-label": _vm.mergedTexts.clearSelection,
+      loading: _vm.deleteLoading
     },
     on: {
       clear: _vm.onClearSelection,

package/dist/index.js

@@ -33078,6 +33078,9 @@ var script$l = {
     // (celda de tabla, panel con scroll, drawer) puede recortarlo. Además deja
     // de aportar al área scrolleable del contenedor, que con `absolute`
     // producía scrollbars horizontales aunque el tooltip estuviera oculto.
+    // Ojo: `fixed` se resuelve contra el bloque contenedor, y basta un
+    // ancestro con transform/filter/perspective para volverse uno — por eso
+    // la burbuja se mueve a <body> mientras se muestra (ver portal()).
     style() {
       const base = {
         position: 'fixed'
@@ -33096,9 +33099,15 @@ var script$l = {
   },
   beforeDestroy() {
     this.unbindReposition();
+    // Si se destruye mientras se muestra, la burbuja está colgada de <body>:
+    // devolverla evita dejarla huérfana ahí cuando Vue saque el wrapper.
+    this.unportal();
   },
   methods: {
     show() {
+      this.portal();
+      // Lee layout (getBoundingClientRect), así el navegador aplica el
+      // opacity: 0 inicial antes de que --visible dispare la transición.
       this.updatePosition();
       this.visible = true;
       this.bindReposition();
@@ -33106,6 +33115,25 @@ var script$l = {
     hide() {
       this.visible = false;
       this.unbindReposition();
+      this.unportal();
+    },
+    // `fixed` se resuelve contra el bloque contenedor, no siempre contra el
+    // viewport: cualquier ancestro con transform, filter o perspective se
+    // vuelve uno. .rq-drawer, por ejemplo, anima con translateX, así que un
+    // tooltip dentro de un Drawer aparecía corrido en horizontal tanto como
+    // el drawer estuviera desplazado.
+    // Mover la burbuja a <body> mientras se muestra la deja sin ancestros
+    // que puedan capturarla, y las coordenadas del viewport valen tal cual.
+    // Solo vive ahí mientras se ve: cada tooltip oculto vuelve a su wrapper.
+    portal() {
+      const tip = this.$refs.tooltip;
+      if (!tip || tip.parentNode === document.body) return;
+      document.body.appendChild(tip);
+    },
+    unportal() {
+      const tip = this.$refs.tooltip;
+      if (!tip || tip.parentNode !== document.body) return;
+      this.$el.appendChild(tip);
     },
     // Al estar fijo al viewport, el tooltip no sigue al trigger cuando la
     // página o un contenedor interno scrollea: se recalcula mientras se ve.
@@ -33219,6 +33247,22 @@ const groupMixin = {
       default: false
     }
   },
+  computed: {
+    // `change` se saca de los listeners que se reenvían a la raíz, igual que
+    // en el atom Checkbox. Estos grupos emiten 'change' Y montan un control
+    // que dispara un 'change' nativo del DOM: ese evento burbujea hasta la
+    // raíz y, si el listener del consumidor sigue enganchado ahí, se ejecuta
+    // dos veces por un solo click (una con el booleano del componente, otra
+    // con el Event nativo). En un consumidor que togglea, los dos disparos se
+    // anulan: el control no cambia de estado pero la acción corre igual.
+    listenersWithoutChange() {
+      const {
+        change,
+        ...rest
+      } = this.$listeners;
+      return rest;
+    }
+  },
   methods: {
     handleClick() {
       if (!this.disabled) this.$emit('change', !this.checked);
@@ -33287,7 +33331,7 @@ var __vue_render__$k = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("Checkbox", {
+  }, _vm.listenersWithoutChange), [_c("Checkbox", {
     attrs: {
       checked: _vm.checked,
       disabled: _vm.disabled
@@ -33400,7 +33444,7 @@ var __vue_render__$j = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("Checkbox", {
+  }, _vm.listenersWithoutChange), [_c("Checkbox", {
     attrs: {
       checked: _vm.checked,
       disabled: _vm.disabled
@@ -33515,7 +33559,7 @@ var __vue_render__$i = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("RqSwitch", {
+  }, _vm.listenersWithoutChange), [_c("RqSwitch", {
     attrs: {
       checked: _vm.checked,
       disabled: _vm.disabled
@@ -33620,7 +33664,7 @@ var __vue_render__$h = function () {
     on: {
       click: _vm.handleClick
     }
-  }, _vm.$listeners), [_c("div", {
+  }, _vm.listenersWithoutChange), [_c("div", {
     staticClass: "rq-rich-switch-group__aligner"
   }, [_c("RqSwitch", {
     attrs: {
@@ -34588,6 +34632,13 @@ const selectionBarVariants = cva('rq-selection-bar', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 var script$b = {
   name: 'SelectionBar',
@@ -34610,6 +34661,10 @@ var script$b = {
     clearLabel: {
       type: String,
       default: 'Limpiar selección'
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -34650,7 +34705,9 @@ var __vue_render__$b = function () {
     attrs: {
       variant: "secondary",
       size: "md",
-      "icon-right": "Trash2"
+      "icon-right": "Trash2",
+      loading: _vm.loading,
+      disabled: _vm.loading
     },
     on: {
       click: function ($event) {
@@ -39817,6 +39874,8 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -39884,6 +39943,10 @@ var script$3 = {
       type: String,
       default: null
     },
+    deleteLoading: {
+      type: Boolean,
+      default: false
+    },
     texts: {
       type: Object,
       default: () => ({})
@@ -39944,6 +40007,7 @@ var script$3 = {
     },
     mergedTexts() {
       return {
+        searchPlaceholder: 'Buscar...',
         selectedCount: '{count} registros seleccionados',
         clearSelection: 'Limpiar selección',
         delete: 'Eliminar',
@@ -39988,7 +40052,8 @@ var __vue_render__$3 = function () {
   }, [_vm.showSearch ? _c("SearchInput", {
     staticClass: "rq-data-table__search-bar",
     attrs: {
-      value: _vm.searchText
+      value: _vm.searchText,
+      placeholder: _vm.mergedTexts.searchPlaceholder
     },
     on: {
       input: function ($event) {
@@ -40007,7 +40072,8 @@ var __vue_render__$3 = function () {
       count: _vm.selectedCount,
       "delete-label": _vm.deleteLabel || _vm.mergedTexts.delete,
       "selected-count-text": _vm.mergedTexts.selectedCount,
-      "clear-label": _vm.mergedTexts.clearSelection
+      "clear-label": _vm.mergedTexts.clearSelection,
+      loading: _vm.deleteLoading
     },
     on: {
       clear: _vm.onClearSelection,

package/package.json

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