@regcheq/ui-vue-2 1.12.0 → 1.12.1

package/dist/index.css

@@ -949,14 +949,13 @@
   position: relative;
   display: inline-block;
 }
-.rq-tooltip-wrapper:hover .rq-tooltip, .rq-tooltip-wrapper:focus-within .rq-tooltip {
+.rq-tooltip-wrapper .rq-tooltip--visible {
   opacity: 1;
   pointer-events: auto;
 }
 
 .rq-tooltip {
-  position: absolute;
-  z-index: 50;
+  z-index: 1000;
   width: max-content;
   min-width: 100px;
   max-width: 300px;
@@ -990,8 +989,6 @@
   height: 0;
 }
 .rq-tooltip--top {
-  bottom: calc(100% + 8px);
-  left: 50%;
   transform: translateX(-50%);
 }
 .rq-tooltip--top::after {
@@ -1003,8 +1000,6 @@
   border-top: 5px solid #000000;
 }
 .rq-tooltip--bottom {
-  top: calc(100% + 8px);
-  left: 50%;
   transform: translateX(-50%);
 }
 .rq-tooltip--bottom::after {
@@ -1016,8 +1011,6 @@
   border-bottom: 5px solid #000000;
 }
 .rq-tooltip--left {
-  right: calc(100% + 8px);
-  top: 50%;
   transform: translateY(-50%);
 }
 .rq-tooltip--left::after {
@@ -1029,8 +1022,6 @@
   border-left: 5px solid #000000;
 }
 .rq-tooltip--right {
-  left: calc(100% + 8px);
-  top: 50%;
   transform: translateY(-50%);
 }
 .rq-tooltip--right::after {
@@ -1787,8 +1778,7 @@
 .rq-table__td {
   padding: 8px 16px;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow: visible;
   background: inherit;
   font-size: 14px;
   color: #18181b;

package/dist/index.esm.js

@@ -32959,7 +32959,24 @@ const tooltipVariants = cva('rq-tooltip', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
+
+// Separación entre el trigger y la burbuja, en px. Igual al gap que antes
+// definía el CSS con calc(100% + 8px).
+const GAP = 8;
 var script$f = {
   name: 'Tooltip',
   props: {
@@ -32978,12 +32995,93 @@ var script$f = {
       default: ''
     }
   },
+  data() {
+    return {
+      visible: false,
+      coords: null
+    };
+  },
   computed: {
     classes() {
       return tooltipVariants({
         side: this.side,
         textAlign: this.textAlign
       });
+    },
+    // position: fixed lo ancla al viewport, así ningún ancestro con overflow
+    // (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.
+    style() {
+      const base = {
+        position: 'fixed'
+      };
+      if (!this.coords) return {
+        ...base,
+        top: '-9999px',
+        left: '-9999px'
+      };
+      return {
+        ...base,
+        top: `${this.coords.top}px`,
+        left: `${this.coords.left}px`
+      };
+    }
+  },
+  beforeDestroy() {
+    this.unbindReposition();
+  },
+  methods: {
+    show() {
+      this.updatePosition();
+      this.visible = true;
+      this.bindReposition();
+    },
+    hide() {
+      this.visible = false;
+      this.unbindReposition();
+    },
+    // 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.
+    bindReposition() {
+      if (this._reposition) return;
+      this._reposition = () => this.updatePosition();
+      window.addEventListener('scroll', this._reposition, true);
+      window.addEventListener('resize', this._reposition);
+    },
+    unbindReposition() {
+      if (!this._reposition) return;
+      window.removeEventListener('scroll', this._reposition, true);
+      window.removeEventListener('resize', this._reposition);
+      this._reposition = null;
+    },
+    updatePosition() {
+      const trigger = this.$el;
+      const tooltip = this.$refs.tooltip;
+      if (!trigger || !tooltip) return;
+      const t = trigger.getBoundingClientRect();
+      const b = tooltip.getBoundingClientRect();
+      const centerX = t.left + t.width / 2;
+      const centerY = t.top + t.height / 2;
+      const porLado = {
+        top: {
+          top: t.top - b.height - GAP,
+          left: centerX
+        },
+        bottom: {
+          top: t.bottom + GAP,
+          left: centerX
+        },
+        left: {
+          top: centerY,
+          left: t.left - b.width - GAP
+        },
+        right: {
+          top: centerY,
+          left: t.right + GAP
+        }
+      };
+      this.coords = porLado[this.side] || porLado.top;
     }
   }
 };
@@ -32997,10 +33095,20 @@ var __vue_render__$f = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", _vm._g({
-    staticClass: "rq-tooltip-wrapper"
+    staticClass: "rq-tooltip-wrapper",
+    on: {
+      mouseenter: _vm.show,
+      mouseleave: _vm.hide,
+      focusin: _vm.show,
+      focusout: _vm.hide
+    }
   }, _vm.$listeners), [_vm._t("default"), _vm._v(" "), _c("div", {
-    class: _vm.classes
-  }, [_vm._v(_vm._s(_vm.text))])], 2);
+    ref: "tooltip",
+    class: [_vm.classes, {
+      "rq-tooltip--visible": _vm.visible
+    }],
+    style: _vm.style
+  }, [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])], 2);
 };
 var __vue_staticRenderFns__$f = [];
 __vue_render__$f._withStripped = true;
@@ -37790,6 +37898,15 @@ function useTable(props, emit) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$4 = {
   name: 'Table',
@@ -37869,6 +37986,7 @@ var script$4 = {
         y: 0
       },
       truncatedCells: {},
+      cellTexts: {},
       expandedRowId: null
     };
   },
@@ -38029,10 +38147,18 @@ var script$4 = {
       if (!this.$el) return;
       const els = this.$el.querySelectorAll('.rq-table__cell-text[data-cell-key]');
       const result = {};
+      const texts = {};
       els.forEach(el => {
         result[el.dataset.cellKey] = el.scrollWidth > el.clientWidth;
+        // Se guarda el texto ya renderizado: si la celda pasa por un slot que
+        // formatea el valor, el tooltip debe mostrar lo que el usuario ve.
+        texts[el.dataset.cellKey] = el.textContent.trim();
       });
       this.truncatedCells = result;
+      this.cellTexts = texts;
+    },
+    cellTooltipText(rowId, headerId) {
+      return this.cellTexts[this.cellKey(rowId, headerId)] || '';
     }
   },
   watch: {
@@ -38261,27 +38387,32 @@ var __vue_render__$4 = function () {
           "rq-table__td--pinned": header.id in _vm.pinnedLeftWidths
         },
         style: _vm.getColStyle(header)
+      }, [_vm.isTruncated(row.id, header.id) ? _c("Tooltip", {
+        staticClass: "rq-table__cell-tooltip",
+        attrs: {
+          text: _vm.cellTooltipText(row.id, header.id)
+        }
+      }, [_c("span", {
+        staticClass: "rq-table__cell-text",
+        attrs: {
+          "data-cell-key": _vm.cellKey(row.id, header.id)
+        }
       }, [_vm._t("cell-" + header.id, function () {
-        return [_vm.isTruncated(row.id, header.id) ? _c("Tooltip", {
-          staticClass: "rq-table__cell-tooltip",
-          attrs: {
-            text: String(row.getValue(header.id))
-          }
-        }, [_c("span", {
-          staticClass: "rq-table__cell-text",
-          attrs: {
-            "data-cell-key": _vm.cellKey(row.id, header.id)
-          }
-        }, [_vm._v(_vm._s(row.getValue(header.id)))])]) : _c("span", {
-          staticClass: "rq-table__cell-text",
-          attrs: {
-            "data-cell-key": _vm.cellKey(row.id, header.id)
-          }
-        }, [_vm._v(_vm._s(row.getValue(header.id)))])];
+        return [_vm._v(_vm._s(row.getValue(header.id)))];
+      }, {
+        row: row.original,
+        value: row.getValue(header.id)
+      })], 2)]) : _c("span", {
+        staticClass: "rq-table__cell-text",
+        attrs: {
+          "data-cell-key": _vm.cellKey(row.id, header.id)
+        }
+      }, [_vm._t("cell-" + header.id, function () {
+        return [_vm._v(_vm._s(row.getValue(header.id)))];
       }, {
         row: row.original,
         value: row.getValue(header.id)
-      })], 2);
+      })], 2)], 1);
     })], 2), _vm._v(" "), _vm.expandable && _vm.expandedRowId === row.id ? _c("tr", {
       key: row.id + "-expanded",
       staticClass: "rq-table__tr rq-table__tr--expanded"

package/dist/index.js

@@ -32961,7 +32961,24 @@ const tooltipVariants = cva('rq-tooltip', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
+
+// Separación entre el trigger y la burbuja, en px. Igual al gap que antes
+// definía el CSS con calc(100% + 8px).
+const GAP = 8;
 var script$f = {
   name: 'Tooltip',
   props: {
@@ -32980,12 +32997,93 @@ var script$f = {
       default: ''
     }
   },
+  data() {
+    return {
+      visible: false,
+      coords: null
+    };
+  },
   computed: {
     classes() {
       return tooltipVariants({
         side: this.side,
         textAlign: this.textAlign
       });
+    },
+    // position: fixed lo ancla al viewport, así ningún ancestro con overflow
+    // (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.
+    style() {
+      const base = {
+        position: 'fixed'
+      };
+      if (!this.coords) return {
+        ...base,
+        top: '-9999px',
+        left: '-9999px'
+      };
+      return {
+        ...base,
+        top: `${this.coords.top}px`,
+        left: `${this.coords.left}px`
+      };
+    }
+  },
+  beforeDestroy() {
+    this.unbindReposition();
+  },
+  methods: {
+    show() {
+      this.updatePosition();
+      this.visible = true;
+      this.bindReposition();
+    },
+    hide() {
+      this.visible = false;
+      this.unbindReposition();
+    },
+    // 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.
+    bindReposition() {
+      if (this._reposition) return;
+      this._reposition = () => this.updatePosition();
+      window.addEventListener('scroll', this._reposition, true);
+      window.addEventListener('resize', this._reposition);
+    },
+    unbindReposition() {
+      if (!this._reposition) return;
+      window.removeEventListener('scroll', this._reposition, true);
+      window.removeEventListener('resize', this._reposition);
+      this._reposition = null;
+    },
+    updatePosition() {
+      const trigger = this.$el;
+      const tooltip = this.$refs.tooltip;
+      if (!trigger || !tooltip) return;
+      const t = trigger.getBoundingClientRect();
+      const b = tooltip.getBoundingClientRect();
+      const centerX = t.left + t.width / 2;
+      const centerY = t.top + t.height / 2;
+      const porLado = {
+        top: {
+          top: t.top - b.height - GAP,
+          left: centerX
+        },
+        bottom: {
+          top: t.bottom + GAP,
+          left: centerX
+        },
+        left: {
+          top: centerY,
+          left: t.left - b.width - GAP
+        },
+        right: {
+          top: centerY,
+          left: t.right + GAP
+        }
+      };
+      this.coords = porLado[this.side] || porLado.top;
     }
   }
 };
@@ -32999,10 +33097,20 @@ var __vue_render__$f = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", _vm._g({
-    staticClass: "rq-tooltip-wrapper"
+    staticClass: "rq-tooltip-wrapper",
+    on: {
+      mouseenter: _vm.show,
+      mouseleave: _vm.hide,
+      focusin: _vm.show,
+      focusout: _vm.hide
+    }
   }, _vm.$listeners), [_vm._t("default"), _vm._v(" "), _c("div", {
-    class: _vm.classes
-  }, [_vm._v(_vm._s(_vm.text))])], 2);
+    ref: "tooltip",
+    class: [_vm.classes, {
+      "rq-tooltip--visible": _vm.visible
+    }],
+    style: _vm.style
+  }, [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])], 2);
 };
 var __vue_staticRenderFns__$f = [];
 __vue_render__$f._withStripped = true;
@@ -37792,6 +37900,15 @@ function useTable(props, emit) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$4 = {
   name: 'Table',
@@ -37871,6 +37988,7 @@ var script$4 = {
         y: 0
       },
       truncatedCells: {},
+      cellTexts: {},
       expandedRowId: null
     };
   },
@@ -38031,10 +38149,18 @@ var script$4 = {
       if (!this.$el) return;
       const els = this.$el.querySelectorAll('.rq-table__cell-text[data-cell-key]');
       const result = {};
+      const texts = {};
       els.forEach(el => {
         result[el.dataset.cellKey] = el.scrollWidth > el.clientWidth;
+        // Se guarda el texto ya renderizado: si la celda pasa por un slot que
+        // formatea el valor, el tooltip debe mostrar lo que el usuario ve.
+        texts[el.dataset.cellKey] = el.textContent.trim();
       });
       this.truncatedCells = result;
+      this.cellTexts = texts;
+    },
+    cellTooltipText(rowId, headerId) {
+      return this.cellTexts[this.cellKey(rowId, headerId)] || '';
     }
   },
   watch: {
@@ -38263,27 +38389,32 @@ var __vue_render__$4 = function () {
           "rq-table__td--pinned": header.id in _vm.pinnedLeftWidths
         },
         style: _vm.getColStyle(header)
+      }, [_vm.isTruncated(row.id, header.id) ? _c("Tooltip", {
+        staticClass: "rq-table__cell-tooltip",
+        attrs: {
+          text: _vm.cellTooltipText(row.id, header.id)
+        }
+      }, [_c("span", {
+        staticClass: "rq-table__cell-text",
+        attrs: {
+          "data-cell-key": _vm.cellKey(row.id, header.id)
+        }
       }, [_vm._t("cell-" + header.id, function () {
-        return [_vm.isTruncated(row.id, header.id) ? _c("Tooltip", {
-          staticClass: "rq-table__cell-tooltip",
-          attrs: {
-            text: String(row.getValue(header.id))
-          }
-        }, [_c("span", {
-          staticClass: "rq-table__cell-text",
-          attrs: {
-            "data-cell-key": _vm.cellKey(row.id, header.id)
-          }
-        }, [_vm._v(_vm._s(row.getValue(header.id)))])]) : _c("span", {
-          staticClass: "rq-table__cell-text",
-          attrs: {
-            "data-cell-key": _vm.cellKey(row.id, header.id)
-          }
-        }, [_vm._v(_vm._s(row.getValue(header.id)))])];
+        return [_vm._v(_vm._s(row.getValue(header.id)))];
+      }, {
+        row: row.original,
+        value: row.getValue(header.id)
+      })], 2)]) : _c("span", {
+        staticClass: "rq-table__cell-text",
+        attrs: {
+          "data-cell-key": _vm.cellKey(row.id, header.id)
+        }
+      }, [_vm._t("cell-" + header.id, function () {
+        return [_vm._v(_vm._s(row.getValue(header.id)))];
       }, {
         row: row.original,
         value: row.getValue(header.id)
-      })], 2);
+      })], 2)], 1);
     })], 2), _vm._v(" "), _vm.expandable && _vm.expandedRowId === row.id ? _c("tr", {
       key: row.id + "-expanded",
       staticClass: "rq-table__tr rq-table__tr--expanded"

package/package.json

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