@regcheq/ui-vue-2 1.5.0 → 1.7.0

package/dist/index.js

@@ -32735,6 +32735,16 @@ var script$g = {
       type: String,
       default: 'default',
       validator: v => ['default', 'round'].includes(v)
+    },
+    // Escape hatch para casos puntuales que no cubren las variantes semánticas
+    // (ej: un color dinámico que viene de datos). Pisan el color de la variante.
+    bgColor: {
+      type: String,
+      default: null
+    },
+    textColor: {
+      type: String,
+      default: null
     }
   },
   computed: {
@@ -32743,6 +32753,12 @@ var script$g = {
         variant: this.variant,
         roundness: this.roundness
       });
+    },
+    inlineStyle() {
+      const style = {};
+      if (this.bgColor) style.backgroundColor = this.bgColor;
+      if (this.textColor) style.color = this.textColor;
+      return style;
     }
   }
 };
@@ -32756,7 +32772,8 @@ var __vue_render__$g = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("span", _vm._g(_vm._b({
-    class: _vm.classes
+    class: _vm.classes,
+    style: _vm.inlineStyle
   }, "span", _vm.$attrs, false), _vm.$listeners), [_vm._t("left"), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t("right")], 2);
 };
 var __vue_staticRenderFns__$g = [];
@@ -34251,7 +34268,7 @@ var __vue_render__$5 = function () {
     }
   }, [_vm._v("\n      Limpiar selección\n    ")])]), _vm._v(" "), _c("Button", {
     attrs: {
-      variant: "primary",
+      variant: "secondary",
       size: "md",
       "icon-right": "Trash2"
     },
@@ -37248,6 +37265,15 @@ function useTable(props, emit) {
   }, {
     immediate: true
   });
+
+  // props.columns puede llegar vacío en el primer render (ej. mientras el
+  // padre carga la vista activa de forma asíncrona) y poblarse después. Sin
+  // este watcher, columnOrder queda pegado al [] inicial para siempre, ya que
+  // el watcher de arriba solo reacciona a cambios de columnOrder, no de
+  // columns. Solo pisa columnOrder si no hay un orden explícito del padre.
+  vue.watch(() => props.columns.map(c => c.key).join('|'), () => {
+    if (!props.columnOrder) columnOrder.value = props.columns.map(c => c.key);
+  });
   vue.watch(() => props.pinnedColumns, val => {
     columnPinning.value = {
       left: val ? [...val] : [],
@@ -37319,7 +37345,7 @@ function useTable(props, emit) {
     const left = columnPinning.value.left || [];
     if (!left.length) return {};
     const offsets = {};
-    let accumulated = props.selectable ? 40 : 0;
+    let accumulated = (props.expandable ? props.expandColWidth || 40 : 0) + (props.selectable ? 40 : 0);
     left.forEach(key => {
       offsets[key] = accumulated;
       const col = props.columns.find(c => c.key === key);
@@ -37578,11 +37604,64 @@ function useTable(props, emit) {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$4 = {
   name: 'Table',
   components: {
-    Checkbox: __vue_component__$j
+    Checkbox: __vue_component__$j,
+    Tooltip: __vue_component__$f
   },
   props: {
     rows: {
@@ -37612,6 +37691,28 @@ var script$4 = {
     maxHeight: {
       type: Number,
       default: null
+    },
+    expandable: {
+      type: Boolean,
+      default: false
+    },
+    // Alto fijo (no máximo) del contenido expandido; con scroll interno si el
+    // contenido no entra.
+    expandedRowHeight: {
+      type: Number,
+      default: 265
+    },
+    // Ancho de la columna de expandir en px. Default 40 (solo el chevron);
+    // subilo si usás el slot `expand-cell` para agregar contenido extra.
+    expandColWidth: {
+      type: Number,
+      default: 40
+    },
+    // { title, subtitle } para el estado "sin datos". Si no se pasa, se usa
+    // un fallback genérico — el texto específico de dominio vive en el consumidor.
+    emptyState: {
+      type: Object,
+      default: null
     }
   },
   setup(props, {
@@ -37632,7 +37733,9 @@ var script$4 = {
         colKey: null,
         x: 0,
         y: 0
-      }
+      },
+      truncatedCells: {},
+      expandedRowId: null
     };
   },
   computed: {
@@ -37644,6 +37747,23 @@ var script$4 = {
     },
     PinIcon() {
       return Pin;
+    },
+    ExpandIcon() {
+      return ChevronRight;
+    },
+    fullColspan() {
+      return this.columns.length + (this.selectable ? 1 : 0) + (this.expandable ? 1 : 0);
+    },
+    resolvedEmptyState() {
+      return {
+        title: this.emptyState?.title || 'Sin datos',
+        subtitle: this.emptyState?.subtitle || ''
+      };
+    },
+    // Offset sticky de la columna de selección: se corre a la derecha
+    // del ancho de la columna de expandir, cuando ambas están activas
+    selectColOffset() {
+      return this.expandable ? this.expandColWidth : 0;
     }
   },
   methods: {
@@ -37681,6 +37801,13 @@ var script$4 = {
         };
       }
     },
+    // Cierra el popover del chevron antes de arrastrar: su posición se calcula
+    // una sola vez al abrirlo, y reordenar columnas la invalida (bug de
+    // posicionamiento si quedaba abierto apuntando a la columna vieja).
+    handleDragStart(columnKey) {
+      this.closeAll();
+      this.onDragStart(columnKey);
+    },
     onChevronClick(columnKey, event) {
       this.contextMenu = {
         visible: false,
@@ -37694,12 +37821,19 @@ var script$4 = {
       }
       this.toggleChevron(columnKey);
       const th = event.currentTarget.closest('th');
-      const tableRect = this.$el.getBoundingClientRect();
       const thRect = th.getBoundingClientRect();
+      // Coordenadas de viewport (no relativas a la tabla): el popover es
+      // position:fixed para no quedar clippado por el overflow:clip de .rq-table
       this.chevronPopoverPos = {
-        top: thRect.bottom - tableRect.top + 4,
-        left: Math.max(100, thRect.left - tableRect.left + thRect.width / 2)
+        top: thRect.bottom + 4,
+        left: Math.max(100, thRect.left + thRect.width / 2)
       };
+      this.$nextTick(() => {
+        if (this.$refs.chevronPopover) {
+          this._chevronPopoverEl = this.$refs.chevronPopover;
+          document.body.appendChild(this._chevronPopoverEl);
+        }
+      });
     },
     openContextMenu(colKey, event) {
       this.closeChevron();
@@ -37721,16 +37855,69 @@ var script$4 = {
         x: 0,
         y: 0
       };
+    },
+    toggleExpand(rowId) {
+      this.expandedRowId = this.expandedRowId === rowId ? null : rowId;
+      this.$emit('update:expanded-row-id', this.expandedRowId);
+    },
+    cellKey(rowId, headerId) {
+      return `${rowId}::${headerId}`;
+    },
+    isTruncated(rowId, headerId) {
+      return !!this.truncatedCells[this.cellKey(rowId, headerId)];
+    },
+    // Compara scrollWidth vs clientWidth de cada celda de texto plano para
+    // saber cuáles están recortadas por el ellipsis y solo a esas envolverlas
+    // en Tooltip. Se dispara por watchers, nunca desde el hook `updated`,
+    // para no re-medir en loop cuando truncatedCells cambia.
+    measureTruncatedCells() {
+      if (!this.$el) return;
+      const els = this.$el.querySelectorAll('.rq-table__cell-text[data-cell-key]');
+      const result = {};
+      els.forEach(el => {
+        result[el.dataset.cellKey] = el.scrollWidth > el.clientWidth;
+      });
+      this.truncatedCells = result;
+    }
+  },
+  watch: {
+    tableRows() {
+      this.$nextTick(this.measureTruncatedCells);
+    },
+    columns: {
+      handler() {
+        this.$nextTick(this.measureTruncatedCells);
+      },
+      deep: true
     }
   },
   mounted() {
     this._onKeydown = e => {
       if (e.key === 'Escape') this.closeAll();
     };
+    this._onDocumentClick = () => this.closeAll();
+    this._onResize = () => this.measureTruncatedCells();
+    // El popover del chevron es position:fixed (coordenadas de viewport);
+    // si cualquier ancestro scrollea (capture:true, scroll no burbujea),
+    // se cierra en vez de quedar desalineado de su columna.
+    this._onScroll = () => this.closeChevron();
     document.addEventListener('keydown', this._onKeydown);
+    document.addEventListener('click', this._onDocumentClick);
+    window.addEventListener('resize', this._onResize);
+    window.addEventListener('scroll', this._onScroll, true);
+    this.$nextTick(this.measureTruncatedCells);
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this._onKeydown);
+    document.removeEventListener('click', this._onDocumentClick);
+    window.removeEventListener('resize', this._onResize);
+    window.removeEventListener('scroll', this._onScroll, true);
+    // El popover del chevron se mueve a document.body al abrirse (fuera del
+    // árbol de la tabla); si el componente se destruye con el popover abierto,
+    // destruir el root de la tabla no lo alcanza — hay que sacarlo a mano.
+    if (this._chevronPopoverEl && this._chevronPopoverEl.parentNode) {
+      this._chevronPopoverEl.parentNode.removeChild(this._chevronPopoverEl);
+    }
   }
 };
 
@@ -37743,10 +37930,7 @@ var __vue_render__$4 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", _vm._g({
-    class: _vm.classes,
-    on: {
-      click: _vm.closeAll
-    }
+    class: _vm.classes
   }, _vm.$listeners), [_c("div", {
     staticClass: "rq-table__scroll",
     style: _vm.maxHeight ? {
@@ -37760,11 +37944,20 @@ var __vue_render__$4 = function () {
     return _c("tr", {
       key: headerGroup.id,
       staticClass: "rq-table__tr rq-table__tr--head"
-    }, [_vm.selectable ? _c("th", {
-      staticClass: "rq-table__th rq-table__th--select",
+    }, [_vm.expandable ? _c("th", {
+      staticClass: "rq-table__th rq-table__th--expand",
       style: {
         position: "sticky",
         left: 0,
+        zIndex: 5,
+        width: _vm.expandColWidth + "px",
+        minWidth: _vm.expandColWidth + "px"
+      }
+    }) : _vm._e(), _vm._v(" "), _vm.selectable ? _c("th", {
+      staticClass: "rq-table__th rq-table__th--select",
+      style: {
+        position: "sticky",
+        left: _vm.selectColOffset + "px",
         zIndex: 5
       }
     }, [_c("Checkbox", {
@@ -37790,7 +37983,7 @@ var __vue_render__$4 = function () {
         },
         on: {
           dragstart: function ($event) {
-            return _vm.onDragStart(header.id);
+            return _vm.handleDragStart(header.id);
           },
           dragover: function ($event) {
             $event.preventDefault();
@@ -37833,12 +38026,18 @@ var __vue_render__$4 = function () {
   }, [_c("td", {
     staticClass: "rq-table__td rq-table__td--empty",
     attrs: {
-      colspan: _vm.columns.length + (_vm.selectable ? 1 : 0)
+      colspan: _vm.fullColspan
     }
   }, [_vm._t("empty", function () {
-    return [_c("span", [_vm._v("Sin datos")])];
+    return [_c("div", {
+      staticClass: "rq-table__empty-state"
+    }, [_c("p", {
+      staticClass: "rq-table__empty-title"
+    }, [_vm._v(_vm._s(_vm.resolvedEmptyState.title))]), _vm._v(" "), _vm.resolvedEmptyState.subtitle ? _c("p", {
+      staticClass: "rq-table__empty-subtitle"
+    }, [_vm._v(_vm._s(_vm.resolvedEmptyState.subtitle))]) : _vm._e()])];
   })], 2)]) : _vm._e(), _vm._v(" "), _vm._l(_vm.tableRows, function (row) {
-    return _c("tr", {
+    return [_c("tr", {
       key: row.id,
       staticClass: "rq-table__tr rq-table__tr--body",
       on: {
@@ -37846,11 +38045,43 @@ var __vue_render__$4 = function () {
           return _vm.$emit("row-click", row.original);
         }
       }
-    }, [_vm.selectable ? _c("td", {
-      staticClass: "rq-table__td rq-table__td--select",
+    }, [_vm.expandable ? _c("td", {
+      staticClass: "rq-table__td rq-table__td--expand",
       style: {
         position: "sticky",
         left: 0,
+        zIndex: 2,
+        width: _vm.expandColWidth + "px",
+        minWidth: _vm.expandColWidth + "px"
+      }
+    }, [_c("div", {
+      staticClass: "rq-table__expand-cell"
+    }, [_c("button", {
+      staticClass: "rq-table__expand-btn",
+      class: {
+        "rq-table__expand-btn--active": _vm.expandedRowId === row.id
+      },
+      attrs: {
+        type: "button"
+      },
+      on: {
+        click: function ($event) {
+          $event.stopPropagation();
+          return _vm.toggleExpand(row.id);
+        }
+      }
+    }, [_c(_vm.ExpandIcon, {
+      tag: "component",
+      attrs: {
+        size: 14
+      }
+    })], 1), _vm._v(" "), _vm._t("expand-cell", null, {
+      row: row.original
+    })], 2)]) : _vm._e(), _vm._v(" "), _vm.selectable ? _c("td", {
+      staticClass: "rq-table__td rq-table__td--select",
+      style: {
+        position: "sticky",
+        left: _vm.selectColOffset + "px",
         zIndex: 2
       },
       on: {
@@ -37876,12 +38107,42 @@ var __vue_render__$4 = function () {
         },
         style: _vm.getColStyle(header)
       }, [_vm._t("cell-" + header.id, function () {
-        return [_vm._v("\n              " + _vm._s(row.getValue(header.id)) + "\n            ")];
+        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)))])];
       }, {
         row: row.original,
         value: row.getValue(header.id)
       })], 2);
-    })], 2);
+    })], 2), _vm._v(" "), _vm.expandable && _vm.expandedRowId === row.id ? _c("tr", {
+      key: row.id + "-expanded",
+      staticClass: "rq-table__tr rq-table__tr--expanded"
+    }, [_c("td", {
+      staticClass: "rq-table__td rq-table__td--expanded",
+      attrs: {
+        colspan: _vm.fullColspan
+      }
+    }, [_c("div", {
+      staticClass: "rq-table__expanded-content",
+      style: {
+        height: _vm.expandedRowHeight + "px"
+      }
+    }, [_vm._t("expanded-row", null, {
+      row: row.original
+    })], 2)])]) : _vm._e()];
   })], 2)])]), _vm._v(" "), _vm.contextMenu.visible ? _c("div", {
     staticClass: "rq-table__context-menu",
     style: {
@@ -37907,6 +38168,7 @@ var __vue_render__$4 = function () {
       size: 14
     }
   }), _vm._v("\n      " + _vm._s(_vm.contextMenu.colKey in _vm.pinnedLeftWidths ? "Desfijar columna" : "Fijar columna") + "\n    ")], 1)]) : _vm._e(), _vm._v(" "), _vm.activeChevronKey ? _c("div", {
+    ref: "chevronPopover",
     staticClass: "rq-table__chevron-popover",
     style: {
       top: _vm.chevronPopoverPos.top + "px",
@@ -38016,6 +38278,24 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -38082,6 +38362,22 @@ var script$3 = {
     deleteLabel: {
       type: String,
       default: 'Eliminar'
+    },
+    expandable: {
+      type: Boolean,
+      default: false
+    },
+    expandedRowHeight: {
+      type: Number,
+      default: 265
+    },
+    expandColWidth: {
+      type: Number,
+      default: 40
+    },
+    emptyState: {
+      type: Object,
+      default: null
     }
   },
   data() {
@@ -38127,6 +38423,8 @@ var __vue_render__$3 = function () {
   var _c = _vm._self._c || _h;
   return _c("div", {
     class: _vm.classes
+  }, [_vm.showSearch || _vm.$slots.actions ? _c("div", {
+    staticClass: "rq-data-table__search-row"
   }, [_vm.showSearch ? _c("SearchInput", {
     staticClass: "rq-data-table__search-bar",
     attrs: {
@@ -38140,7 +38438,11 @@ var __vue_render__$3 = function () {
         return _vm.$emit("update:search", $event);
       }
     }
-  }) : _vm._e(), _vm._v(" "), _vm.selectable && _vm.selectedCount > 0 ? _c("SelectionBar", {
+  }) : _vm._e(), _vm._v(" "), _vm.$slots.actions ? _c("div", {
+    staticClass: "rq-data-table__actions"
+  }, [_vm._t("actions")], 2) : _vm._e()], 1) : _vm._e(), _vm._v(" "), _vm.selectable ? _c("div", {
+    staticClass: "rq-data-table__selection-slot"
+  }, [_vm.selectedCount > 0 ? _c("SelectionBar", {
     attrs: {
       count: _vm.selectedCount,
       "delete-label": _vm.deleteLabel
@@ -38151,7 +38453,7 @@ var __vue_render__$3 = function () {
         return _vm.$emit("delete-selected", _vm.selectedRows);
       }
     }
-  }) : _vm._e(), _vm._v(" "), _c("Table", {
+  }) : _vm._e()], 1) : _vm._e(), _vm._v(" "), _c("Table", {
     ref: "table",
     attrs: {
       columns: _vm.columns,
@@ -38160,7 +38462,11 @@ var __vue_render__$3 = function () {
       "pinned-columns": _vm.pinnedColumns,
       selectable: _vm.selectable,
       "row-id": _vm.rowId,
-      "max-height": _vm.maxHeight
+      "max-height": _vm.maxHeight,
+      expandable: _vm.expandable,
+      "expanded-row-height": _vm.expandedRowHeight,
+      "expand-col-width": _vm.expandColWidth,
+      "empty-state": _vm.emptyState
     },
     on: {
       "row-click": function ($event) {
@@ -38172,6 +38478,9 @@ var __vue_render__$3 = function () {
       },
       "update:pinned-columns": function ($event) {
         return _vm.$emit("update:pinned-columns", $event);
+      },
+      "update:expanded-row-id": function ($event) {
+        return _vm.$emit("update:expanded-row-id", $event);
       }
     },
     scopedSlots: _vm._u([_vm._l(_vm.columns, function (col) {
@@ -38195,6 +38504,16 @@ var __vue_render__$3 = function () {
         return [_vm._t("empty")];
       },
       proxy: true
+    }, {
+      key: "expanded-row",
+      fn: function (slotProps) {
+        return [_vm._t("expanded-row", null, null, slotProps)];
+      }
+    }, {
+      key: "expand-cell",
+      fn: function (slotProps) {
+        return [_vm._t("expand-cell", null, null, slotProps)];
+      }
     }], null, true)
   }), _vm._v(" "), _c("div", {
     staticClass: "rq-data-table__pagination"
@@ -38727,11 +39046,20 @@ var script = {
       } : {};
     }
   },
+  watch: {
+    open: {
+      immediate: true,
+      handler(isOpen) {
+        document.body.style.overflow = isOpen ? 'hidden' : '';
+      }
+    }
+  },
   mounted() {
     document.addEventListener('keydown', this.handleKeydown);
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleKeydown);
+    document.body.style.overflow = '';
   },
   methods: {
     handleKeydown(e) {

package/package.json

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