@regcheq/ui-vue-2 1.6.0 → 1.7.0

package/dist/index.css

@@ -686,6 +686,7 @@
   justify-content: center;
   flex-shrink: 0;
   vertical-align: middle;
+  margin-bottom: 4px;
   width: 16px;
   height: 16px;
   border-radius: 4px;
@@ -839,8 +840,8 @@
   align-items: center;
   justify-content: center;
   gap: 4px;
-  height: 32px;
-  padding: 4px 12px;
+  height: 20px;
+  padding: 0 12px;
   font-family: "Inter", sans-serif;
   font-weight: 400;
   font-size: 12px;
@@ -1536,9 +1537,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 56px;
   padding: 12px 16px;
   background: #e6f0fc;
-  border-radius: 8px;
+  border-radius: 0px;
 }
 .rq-selection-bar__info {
   display: flex;
@@ -1552,7 +1554,7 @@
   width: 6px;
   height: 6px;
   border-radius: 999px;
-  background: #0064e0;
+  background: #00479f;
 }
 .rq-selection-bar__clear {
   background: none;
@@ -1562,8 +1564,23 @@
   font-size: 14px;
   color: #0064e0;
   cursor: pointer;
-  text-decoration: underline;
+  text-decoration: none;
+}
+.rq-table__expanded-content::-webkit-scrollbar, .rq-table__scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.rq-table__expanded-content::-webkit-scrollbar-track, .rq-table__scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.rq-table__expanded-content::-webkit-scrollbar-thumb, .rq-table__scroll::-webkit-scrollbar-thumb {
+  background: #e4e4e7;
+  border-radius: 999px;
+}
+.rq-table__expanded-content::-webkit-scrollbar-corner, .rq-table__scroll::-webkit-scrollbar-corner {
+  background: transparent;
 }
+
 .rq-table {
   position: relative;
   display: flex;
@@ -1579,20 +1596,6 @@
   overflow: auto;
   flex: 1;
 }
-.rq-table__scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.rq-table__scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-.rq-table__scroll::-webkit-scrollbar-thumb {
-  background: #e4e4e7;
-  border-radius: 999px;
-}
-.rq-table__scroll::-webkit-scrollbar-corner {
-  background: transparent;
-}
 .rq-table__table {
   width: 100%;
   border-collapse: separate;
@@ -1606,6 +1609,7 @@
   background: #040045;
 }
 .rq-table__tr--body {
+  height: 38px;
   cursor: pointer;
   background: #ffffff;
   transition: background 100ms ease;
@@ -1627,8 +1631,6 @@
   font-weight: 500;
   color: #ffffff;
   text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
   background: #040045;
   cursor: grab;
   user-select: none;
@@ -1664,6 +1666,12 @@
 .rq-table__th--drag-over {
   border-left: 2px solid #5497ea;
 }
+.rq-table__th--expand {
+  width: 40px;
+  min-width: 40px;
+  cursor: default;
+  background: #040045;
+}
 .rq-table__th-content {
   display: flex;
   align-items: center;
@@ -1672,8 +1680,8 @@
 }
 .rq-table__th-label {
   flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
 }
 .rq-table__chevron-btn {
   display: flex;
@@ -1697,10 +1705,38 @@
   color: #ffffff;
   transform: rotate(180deg);
 }
+.rq-table__expand-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.rq-table__expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 2px;
+  color: #71717a;
+  padding: 0;
+  transition: color 200ms ease, background 200ms ease, transform 100ms ease;
+}
+.rq-table__expand-btn:hover {
+  color: #18181b;
+  background: #f4f4f5;
+}
+.rq-table__expand-btn--active {
+  color: #18181b;
+  transform: rotate(90deg);
+}
 .rq-table__chevron-popover {
-  position: absolute;
+  position: fixed;
   transform: translateX(-50%);
-  z-index: 10;
+  z-index: 1000;
   background: #ffffff;
   border: 1px solid #e4e4e7;
   border-radius: 8px;
@@ -1727,10 +1763,64 @@
   text-align: center;
   text-overflow: clip;
 }
+.rq-table__td--expand {
+  width: 40px;
+  min-width: 40px;
+  text-overflow: clip;
+}
 .rq-table__td--empty {
   padding: 48px 16px;
   text-align: center;
-  color: #a1a1aa;
+}
+.rq-table__td--expanded {
+  padding: 0;
+  cursor: default;
+  border-bottom: 1px solid #f4f4f5;
+}
+.rq-table__tr--expanded {
+  background: #e6e6ec;
+  cursor: default;
+}
+.rq-table__tr--expanded .rq-table__td:first-child {
+  border-left: 2px solid #040045;
+}
+.rq-table__expanded-content {
+  display: flex;
+  justify-content: center;
+  overflow-y: auto;
+  padding: 16px;
+}
+.rq-table__empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.rq-table__empty-title {
+  font-family: "Inter", sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  color: #18181b;
+  margin: 0;
+}
+.rq-table__empty-subtitle {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #71717a;
+  max-width: 480px;
+  margin: 0;
+}
+.rq-table__cell-tooltip {
+  display: block;
+  width: 100%;
+}
+.rq-table__cell-text {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .rq-table__context-menu {
   position: absolute;
@@ -1769,9 +1859,23 @@
   border-radius: 12px;
   padding: 16px;
 }
+.rq-data-table__search-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
 .rq-data-table__search-bar {
   display: flex;
 }
+.rq-data-table__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+.rq-data-table__selection-slot {
+  min-height: 56px;
+}
 .rq-data-table__pagination {
   display: flex;
   align-items: center;

package/dist/index.esm.js

@@ -32733,6 +32733,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: {
@@ -32741,6 +32751,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;
     }
   }
 };
@@ -32754,7 +32770,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 = [];
@@ -34249,7 +34266,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"
     },
@@ -37326,7 +37343,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);
@@ -37585,11 +37602,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: {
@@ -37619,6 +37689,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, {
@@ -37639,7 +37731,9 @@ var script$4 = {
         colKey: null,
         x: 0,
         y: 0
-      }
+      },
+      truncatedCells: {},
+      expandedRowId: null
     };
   },
   computed: {
@@ -37651,6 +37745,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: {
@@ -37688,6 +37799,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,
@@ -37701,12 +37819,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();
@@ -37728,6 +37853,40 @@ 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() {
@@ -37735,12 +37894,28 @@ var script$4 = {
       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);
+    }
   }
 };
 
@@ -37767,11 +37942,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", {
@@ -37797,7 +37981,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();
@@ -37840,12 +38024,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: {
@@ -37853,11 +38043,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: {
@@ -37883,12 +38105,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: {
@@ -37914,6 +38166,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",
@@ -38023,6 +38276,24 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -38089,6 +38360,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() {
@@ -38134,6 +38421,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: {
@@ -38147,7 +38436,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
@@ -38158,7 +38451,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,
@@ -38167,7 +38460,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) {
@@ -38179,6 +38476,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) {
@@ -38202,6 +38502,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"

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"
     },
@@ -37328,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);
@@ -37587,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: {
@@ -37621,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, {
@@ -37641,7 +37733,9 @@ var script$4 = {
         colKey: null,
         x: 0,
         y: 0
-      }
+      },
+      truncatedCells: {},
+      expandedRowId: null
     };
   },
   computed: {
@@ -37653,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: {
@@ -37690,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,
@@ -37703,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();
@@ -37730,6 +37855,40 @@ 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() {
@@ -37737,12 +37896,28 @@ var script$4 = {
       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);
+    }
   }
 };
 
@@ -37769,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", {
@@ -37799,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();
@@ -37842,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: {
@@ -37855,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: {
@@ -37885,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: {
@@ -37916,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",
@@ -38025,6 +38278,24 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -38091,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() {
@@ -38136,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: {
@@ -38149,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
@@ -38160,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,
@@ -38169,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) {
@@ -38181,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) {
@@ -38204,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"

package/package.json

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