@regcheq/ui-vue-2 1.15.1 → 1.16.0

package/dist/index.css

@@ -2212,6 +2212,12 @@ td[data-v-6ca52014],th[data-v-6ca52014]{padding:2px;background-color:#fff}td.tod
   outline: 2px solid #5497ea;
   outline-offset: -2px;
 }
+.rq-table__td--expand-disabled {
+  cursor: default;
+}
+.rq-table__td--expand-disabled .rq-table__expand-btn {
+  color: #d4d4d8;
+}
 .rq-table__td--expanded {
   padding: 0;
   cursor: default;
@@ -2259,6 +2265,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

@@ -33245,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);
@@ -33313,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
@@ -33426,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
@@ -33541,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
@@ -33646,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: {
@@ -34614,6 +34630,13 @@ const selectionBarVariants = cva('rq-selection-bar', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 var script$b = {
   name: 'SelectionBar',
@@ -34636,6 +34659,10 @@ var script$b = {
     clearLabel: {
       type: String,
       default: 'Limpiar selección'
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -34676,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) {
@@ -39025,6 +39054,8 @@ function useTable(props, emit) {
 //
 //
 //
+//
+//
 
 var script$4 = {
   name: 'Table',
@@ -39076,6 +39107,15 @@ var script$4 = {
       type: Boolean,
       default: false
     },
+    // Predicado opcional por fila: recibe la fila original y decide si se
+    // puede expandir. Sirve para las filas que no tienen contenido que
+    // desplegar (p. ej. una ficha sin personas relacionadas). El guard vive
+    // acá y no en el consumidor porque expandedRowId es estado interno de la
+    // tabla: bloquear el evento afuera no evita que la fila se abra.
+    rowExpandable: {
+      type: Function,
+      default: null
+    },
     // Alto fijo (no máximo) del contenido expandido; con scroll interno si el
     // contenido no entra.
     expandedRowHeight: {
@@ -39311,7 +39351,19 @@ var script$4 = {
         y: 0
       };
     },
+    canExpand(row) {
+      if (!this.rowExpandable) return true;
+      return !!this.rowExpandable(row.original);
+    },
+    canExpandById(rowId) {
+      if (!this.rowExpandable) return true;
+      const row = this.tableRows.find(r => r.id === rowId);
+      return row ? this.canExpand(row) : true;
+    },
     toggleExpand(rowId) {
+      // Colapsar siempre se permite: si la fila abierta dejara de ser
+      // expandible (cambió la data), igual tiene que poder cerrarse.
+      if (this.expandedRowId !== rowId && !this.canExpandById(rowId)) return;
       this.expandedRowId = this.expandedRowId === rowId ? null : rowId;
       this.$emit('update:expanded-row-id', this.expandedRowId);
       if (this.expandedRowId) {
@@ -39551,6 +39603,9 @@ var __vue_render__$4 = function () {
       }
     }, [_vm.expandable ? _c("td", {
       staticClass: "rq-table__td rq-table__td--expand",
+      class: {
+        "rq-table__td--expand-disabled": !_vm.canExpand(row)
+      },
       style: {
         position: "sticky",
         left: 0,
@@ -39560,8 +39615,9 @@ var __vue_render__$4 = function () {
       },
       attrs: {
         role: "button",
-        tabindex: "0",
-        "aria-expanded": _vm.expandedRowId === row.id
+        tabindex: _vm.canExpand(row) ? 0 : -1,
+        "aria-expanded": _vm.expandedRowId === row.id,
+        "aria-disabled": !_vm.canExpand(row)
       },
       on: {
         click: function ($event) {
@@ -39843,6 +39899,9 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -39910,6 +39969,10 @@ var script$3 = {
       type: String,
       default: null
     },
+    deleteLoading: {
+      type: Boolean,
+      default: false
+    },
     texts: {
       type: Object,
       default: () => ({})
@@ -39918,6 +39981,12 @@ var script$3 = {
       type: Boolean,
       default: false
     },
+    // Se reenvía a Table: predicado por fila para las que no tienen nada que
+    // desplegar (ver Table.rowExpandable).
+    rowExpandable: {
+      type: Function,
+      default: null
+    },
     expandedRowHeight: {
       type: Number,
       default: 265
@@ -39970,6 +40039,7 @@ var script$3 = {
     },
     mergedTexts() {
       return {
+        searchPlaceholder: 'Buscar...',
         selectedCount: '{count} registros seleccionados',
         clearSelection: 'Limpiar selección',
         delete: 'Eliminar',
@@ -40014,7 +40084,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) {
@@ -40033,7 +40104,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,
@@ -40052,6 +40124,7 @@ var __vue_render__$3 = function () {
       "row-id": _vm.rowId,
       "max-height": _vm.maxHeight,
       expandable: _vm.expandable,
+      "row-expandable": _vm.rowExpandable,
       "expanded-row-height": _vm.expandedRowHeight,
       "expand-col-width": _vm.expandColWidth,
       "empty-state": _vm.emptyState,

package/dist/index.js

@@ -33247,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);
@@ -33315,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
@@ -33428,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
@@ -33543,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
@@ -33648,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: {
@@ -34616,6 +34632,13 @@ const selectionBarVariants = cva('rq-selection-bar', {
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 var script$b = {
   name: 'SelectionBar',
@@ -34638,6 +34661,10 @@ var script$b = {
     clearLabel: {
       type: String,
       default: 'Limpiar selección'
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -34678,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) {
@@ -39027,6 +39056,8 @@ function useTable(props, emit) {
 //
 //
 //
+//
+//
 
 var script$4 = {
   name: 'Table',
@@ -39078,6 +39109,15 @@ var script$4 = {
       type: Boolean,
       default: false
     },
+    // Predicado opcional por fila: recibe la fila original y decide si se
+    // puede expandir. Sirve para las filas que no tienen contenido que
+    // desplegar (p. ej. una ficha sin personas relacionadas). El guard vive
+    // acá y no en el consumidor porque expandedRowId es estado interno de la
+    // tabla: bloquear el evento afuera no evita que la fila se abra.
+    rowExpandable: {
+      type: Function,
+      default: null
+    },
     // Alto fijo (no máximo) del contenido expandido; con scroll interno si el
     // contenido no entra.
     expandedRowHeight: {
@@ -39313,7 +39353,19 @@ var script$4 = {
         y: 0
       };
     },
+    canExpand(row) {
+      if (!this.rowExpandable) return true;
+      return !!this.rowExpandable(row.original);
+    },
+    canExpandById(rowId) {
+      if (!this.rowExpandable) return true;
+      const row = this.tableRows.find(r => r.id === rowId);
+      return row ? this.canExpand(row) : true;
+    },
     toggleExpand(rowId) {
+      // Colapsar siempre se permite: si la fila abierta dejara de ser
+      // expandible (cambió la data), igual tiene que poder cerrarse.
+      if (this.expandedRowId !== rowId && !this.canExpandById(rowId)) return;
       this.expandedRowId = this.expandedRowId === rowId ? null : rowId;
       this.$emit('update:expanded-row-id', this.expandedRowId);
       if (this.expandedRowId) {
@@ -39553,6 +39605,9 @@ var __vue_render__$4 = function () {
       }
     }, [_vm.expandable ? _c("td", {
       staticClass: "rq-table__td rq-table__td--expand",
+      class: {
+        "rq-table__td--expand-disabled": !_vm.canExpand(row)
+      },
       style: {
         position: "sticky",
         left: 0,
@@ -39562,8 +39617,9 @@ var __vue_render__$4 = function () {
       },
       attrs: {
         role: "button",
-        tabindex: "0",
-        "aria-expanded": _vm.expandedRowId === row.id
+        tabindex: _vm.canExpand(row) ? 0 : -1,
+        "aria-expanded": _vm.expandedRowId === row.id,
+        "aria-disabled": !_vm.canExpand(row)
       },
       on: {
         click: function ($event) {
@@ -39845,6 +39901,9 @@ const dataTableVariants = cva('rq-data-table', {
 //
 //
 //
+//
+//
+//
 
 var script$3 = {
   name: 'DataTable',
@@ -39912,6 +39971,10 @@ var script$3 = {
       type: String,
       default: null
     },
+    deleteLoading: {
+      type: Boolean,
+      default: false
+    },
     texts: {
       type: Object,
       default: () => ({})
@@ -39920,6 +39983,12 @@ var script$3 = {
       type: Boolean,
       default: false
     },
+    // Se reenvía a Table: predicado por fila para las que no tienen nada que
+    // desplegar (ver Table.rowExpandable).
+    rowExpandable: {
+      type: Function,
+      default: null
+    },
     expandedRowHeight: {
       type: Number,
       default: 265
@@ -39972,6 +40041,7 @@ var script$3 = {
     },
     mergedTexts() {
       return {
+        searchPlaceholder: 'Buscar...',
         selectedCount: '{count} registros seleccionados',
         clearSelection: 'Limpiar selección',
         delete: 'Eliminar',
@@ -40016,7 +40086,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) {
@@ -40035,7 +40106,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,
@@ -40054,6 +40126,7 @@ var __vue_render__$3 = function () {
       "row-id": _vm.rowId,
       "max-height": _vm.maxHeight,
       expandable: _vm.expandable,
+      "row-expandable": _vm.rowExpandable,
       "expanded-row-height": _vm.expandedRowHeight,
       "expand-col-width": _vm.expandColWidth,
       "empty-state": _vm.emptyState,

package/package.json

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