vue-laravel-crud 2.0.0 → 2.0.4

package/dist/vue-laravel-crud.esm.js

@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 function normalizeComponent (
     scriptExports,
     render,
@@ -296,15 +298,28 @@ var CrudFilters = __component__$f.exports;
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$6 = "\n.crud-header[data-v-dec590e4] {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  max-height: 3rem;\n}\n.crud-title[data-v-dec590e4] {\r\n  margin: 0;\n}\n.crud-search[data-v-dec590e4] {\r\n  max-width: 15rem;\n}\n.crud-search .btn[data-v-dec590e4] {\r\n  border-top-left-radius: 0;\r\n  border-bottom-left-radius: 0;\r\n  border-top-right-radius: 0.375rem;\r\n  border-bottom-right-radius: 0.375rem;\n}\n.crud-search .btn.open[data-v-dec590e4] {\r\n  border-top-right-radius: 0;\r\n  border-bottom-right-radius: 0;\n}\n.table-options[data-v-dec590e4] {\r\n  margin-bottom: 1rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\n}\r\n";
-n(css$6, {});
+var css$8 = "\n.crud-header[data-v-ed8e5777] {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  max-height: 3rem;\n}\n.crud-title[data-v-ed8e5777] {\r\n  margin: 0;\n}\n.crud-search[data-v-ed8e5777] {\r\n  max-width: 15rem;\n}\n.crud-search .btn[data-v-ed8e5777] {\r\n  border-top-left-radius: 0;\r\n  border-bottom-left-radius: 0;\r\n  border-top-right-radius: 0.375rem;\r\n  border-bottom-right-radius: 0.375rem;\n}\n.crud-search .btn.open[data-v-ed8e5777] {\r\n  border-top-right-radius: 0;\r\n  border-bottom-right-radius: 0;\n}\n.table-options[data-v-ed8e5777] {\r\n  margin-bottom: 1rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\n}\r\n";
+n(css$8, {});
 
 const _sfc_main$e = {
   name: 'CrudHeader',
   components: {
     CrudFilters
   },
-  inject: ['showHeader', 'showTitle', 'title', 'filterSidebarOpen', 'showImport', 'showExport', 'showPrincipalSortBtn', 'principalSort', 'bulkDelete', 'showCreateBtn', 'enableFilters', 'displayModeToggler', 'displayMode', 'displayModes', 'showSearch', 'displaySearch', 'search', 'searchPlaceholder', 'loading', 'messageImport', 'messageExport', 'messageNew', 'createItem', 'toggleDisplayMode', 'togglePrincipalSort', 'confirmBulkDelete', 'toggleFilters', 'refresh']
+  inject: ['showHeader', 'showTitle', 'title', 'filterSidebarOpen', 'showImport', 'showExport', 'showPrincipalSortBtn', 'principalSort', 'bulkDelete', 'showCreateBtn', 'enableFilters', 'displayModeToggler', 'displayMode', 'displayModes', 'showSearch', 'displaySearch', 'search', 'searchPlaceholder', 'loading', 'messageImport', 'messageExport', 'messageNew', 'createItem', 'toggleDisplayMode', 'togglePrincipalSort', 'confirmBulkDelete', 'toggleFilters', 'refresh'],
+  computed: {
+    sidebarVisible() {
+      // Acceder directamente al componente padre para obtener reactividad
+      return this.$parent ? this.$parent.filterSidebarOpen : this.filterSidebarOpen;
+    }
+  },
+  methods: {
+    closeSidebar() {
+      if (this.filterSidebarOpen) {
+        this.toggleFilters();
+      }
+    }
+  }
 };
 var _sfc_render$e = function render() {
   var _vm = this,
@@ -315,16 +330,13 @@ var _sfc_render$e = function render() {
     staticClass: "crud-title"
   }, [_vm._v(_vm._s(_vm.title))]) : _vm._e(), _c('b-sidebar', {
     attrs: {
+      "visible": _vm.sidebarVisible,
       "title": "Filtrar",
       "right": "",
       "shadow": ""
     },
-    model: {
-      value: _vm.filterSidebarOpen,
-      callback: function ($$v) {
-        _vm.filterSidebarOpen = $$v;
-      },
-      expression: "filterSidebarOpen"
+    on: {
+      "hidden": _vm.closeSidebar
     }
   }, [_c('CrudFilters')], 1), _c('div', {
     staticClass: "table-options"
@@ -447,7 +459,7 @@ var _sfc_render$e = function render() {
   })], 2)], 1)], 1) : _vm._e();
 };
 var _sfc_staticRenderFns$e = [];
-var __component__$e = /*#__PURE__*/normalizeComponent(_sfc_main$e, _sfc_render$e, _sfc_staticRenderFns$e, false, null, "dec590e4", null, null);
+var __component__$e = /*#__PURE__*/normalizeComponent(_sfc_main$e, _sfc_render$e, _sfc_staticRenderFns$e, false, null, "ed8e5777", null, null);
 var CrudHeader = __component__$e.exports;
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -709,7 +721,7 @@ function toggleClass(el, name, state) {
   }
 }
 
-function css$5(el, prop, val) {
+function css$7(el, prop, val) {
   var style = el && el.style;
 
   if (style) {
@@ -738,7 +750,7 @@ function matrix(el, selfOnly) {
     appliedTransforms = el;
   } else {
     do {
-      var transform = css$5(el, 'transform');
+      var transform = css$7(el, 'transform');
 
       if (transform && transform !== 'none') {
         appliedTransforms = transform + ' ' + appliedTransforms;
@@ -820,11 +832,11 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS
 
     if (!IE11OrLess) {
       do {
-        if (container && container.getBoundingClientRect && (css$5(container, 'transform') !== 'none' || relativeToNonStaticParent && css$5(container, 'position') !== 'static')) {
+        if (container && container.getBoundingClientRect && (css$7(container, 'transform') !== 'none' || relativeToNonStaticParent && css$7(container, 'position') !== 'static')) {
           var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container
 
-          top -= containerRect.top + parseInt(css$5(container, 'border-top-width'));
-          left -= containerRect.left + parseInt(css$5(container, 'border-left-width'));
+          top -= containerRect.top + parseInt(css$7(container, 'border-top-width'));
+          left -= containerRect.left + parseInt(css$7(container, 'border-left-width'));
           bottom = top + elRect.height;
           right = left + elRect.width;
           break;
@@ -931,7 +943,7 @@ function getChild(el, childNum, options) {
 function lastChild(el, selector) {
   var last = el.lastElementChild;
 
-  while (last && (last === Sortable.ghost || css$5(last, 'display') === 'none' || selector && !matches(last, selector))) {
+  while (last && (last === Sortable.ghost || css$7(last, 'display') === 'none' || selector && !matches(last, selector))) {
     last = last.previousElementSibling;
   }
 
@@ -1017,7 +1029,7 @@ function getParentAutoScrollElement(el, includeSelf) {
   do {
     // we don't need to get elem css if it isn't even overflowing in the first place (performance)
     if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {
-      var elemCSS = css$5(elem);
+      var elemCSS = css$7(elem);
 
       if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) {
         if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement();
@@ -1093,19 +1105,19 @@ function clone(el) {
 }
 
 function setRect(el, rect) {
-  css$5(el, 'position', 'absolute');
-  css$5(el, 'top', rect.top);
-  css$5(el, 'left', rect.left);
-  css$5(el, 'width', rect.width);
-  css$5(el, 'height', rect.height);
+  css$7(el, 'position', 'absolute');
+  css$7(el, 'top', rect.top);
+  css$7(el, 'left', rect.left);
+  css$7(el, 'width', rect.width);
+  css$7(el, 'height', rect.height);
 }
 
 function unsetRect(el) {
-  css$5(el, 'position', '');
-  css$5(el, 'top', '');
-  css$5(el, 'left', '');
-  css$5(el, 'width', '');
-  css$5(el, 'height', '');
+  css$7(el, 'position', '');
+  css$7(el, 'top', '');
+  css$7(el, 'left', '');
+  css$7(el, 'width', '');
+  css$7(el, 'height', '');
 }
 
 var expando = 'Sortable' + new Date().getTime();
@@ -1119,7 +1131,7 @@ function AnimationStateManager() {
       if (!this.options.animation) return;
       var children = [].slice.call(this.el.children);
       children.forEach(function (child) {
-        if (css$5(child, 'display') === 'none' || child === Sortable.ghost) return;
+        if (css$7(child, 'display') === 'none' || child === Sortable.ghost) return;
         animationStates.push({
           target: child,
           rect: getRect(child)
@@ -1226,8 +1238,8 @@ function AnimationStateManager() {
     },
     animate: function animate(target, currentRect, toRect, duration) {
       if (duration) {
-        css$5(target, 'transition', '');
-        css$5(target, 'transform', '');
+        css$7(target, 'transition', '');
+        css$7(target, 'transform', '');
         var elMatrix = matrix(this.el),
             scaleX = elMatrix && elMatrix.a,
             scaleY = elMatrix && elMatrix.d,
@@ -1235,15 +1247,15 @@ function AnimationStateManager() {
             translateY = (currentRect.top - toRect.top) / (scaleY || 1);
         target.animatingX = !!translateX;
         target.animatingY = !!translateY;
-        css$5(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
+        css$7(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
         repaint(target); // repaint
 
-        css$5(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
-        css$5(target, 'transform', 'translate3d(0,0,0)');
+        css$7(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
+        css$7(target, 'transform', 'translate3d(0,0,0)');
         typeof target.animated === 'number' && clearTimeout(target.animated);
         target.animated = setTimeout(function () {
-          css$5(target, 'transition', '');
-          css$5(target, 'transform', '');
+          css$7(target, 'transition', '');
+          css$7(target, 'transform', '');
           target.animated = false;
           target.animatingX = false;
           target.animatingY = false;
@@ -1512,12 +1524,12 @@ supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in
   return el.style.pointerEvents === 'auto';
 }(),
     _detectDirection = function _detectDirection(el, options) {
-  var elCSS = css$5(el),
+  var elCSS = css$7(el),
       elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth),
       child1 = getChild(el, 0, options),
       child2 = getChild(el, 1, options),
-      firstChildCSS = child1 && css$5(child1),
-      secondChildCSS = child2 && css$5(child2),
+      firstChildCSS = child1 && css$7(child1),
+      secondChildCSS = child2 && css$7(child2),
       firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width,
       secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;
 
@@ -1606,12 +1618,12 @@ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
 },
     _hideGhostForTarget = function _hideGhostForTarget() {
   if (!supportCssPointerEvents && ghostEl) {
-    css$5(ghostEl, 'display', 'none');
+    css$7(ghostEl, 'display', 'none');
   }
 },
     _unhideGhostForTarget = function _unhideGhostForTarget() {
   if (!supportCssPointerEvents && ghostEl) {
-    css$5(ghostEl, 'display', '');
+    css$7(ghostEl, 'display', '');
   }
 }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position
 
@@ -2146,10 +2158,10 @@ Sortable.prototype =
         }
 
         var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")");
-        css$5(ghostEl, 'webkitTransform', cssMatrix);
-        css$5(ghostEl, 'mozTransform', cssMatrix);
-        css$5(ghostEl, 'msTransform', cssMatrix);
-        css$5(ghostEl, 'transform', cssMatrix);
+        css$7(ghostEl, 'webkitTransform', cssMatrix);
+        css$7(ghostEl, 'mozTransform', cssMatrix);
+        css$7(ghostEl, 'msTransform', cssMatrix);
+        css$7(ghostEl, 'transform', cssMatrix);
         lastDx = dx;
         lastDy = dy;
         touchEvt = touch;
@@ -2170,7 +2182,7 @@ Sortable.prototype =
         // Get relatively positioned parent
         ghostRelativeParent = container;
 
-        while (css$5(ghostRelativeParent, 'position') === 'static' && css$5(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {
+        while (css$7(ghostRelativeParent, 'position') === 'static' && css$7(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {
           ghostRelativeParent = ghostRelativeParent.parentNode;
         }
 
@@ -2189,22 +2201,22 @@ Sortable.prototype =
       toggleClass(ghostEl, options.ghostClass, false);
       toggleClass(ghostEl, options.fallbackClass, true);
       toggleClass(ghostEl, options.dragClass, true);
-      css$5(ghostEl, 'transition', '');
-      css$5(ghostEl, 'transform', '');
-      css$5(ghostEl, 'box-sizing', 'border-box');
-      css$5(ghostEl, 'margin', 0);
-      css$5(ghostEl, 'top', rect.top);
-      css$5(ghostEl, 'left', rect.left);
-      css$5(ghostEl, 'width', rect.width);
-      css$5(ghostEl, 'height', rect.height);
-      css$5(ghostEl, 'opacity', '0.8');
-      css$5(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');
-      css$5(ghostEl, 'zIndex', '100000');
-      css$5(ghostEl, 'pointerEvents', 'none');
+      css$7(ghostEl, 'transition', '');
+      css$7(ghostEl, 'transform', '');
+      css$7(ghostEl, 'box-sizing', 'border-box');
+      css$7(ghostEl, 'margin', 0);
+      css$7(ghostEl, 'top', rect.top);
+      css$7(ghostEl, 'left', rect.left);
+      css$7(ghostEl, 'width', rect.width);
+      css$7(ghostEl, 'height', rect.height);
+      css$7(ghostEl, 'opacity', '0.8');
+      css$7(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');
+      css$7(ghostEl, 'zIndex', '100000');
+      css$7(ghostEl, 'pointerEvents', 'none');
       Sortable.ghost = ghostEl;
       container.appendChild(ghostEl); // Set transform-origin
 
-      css$5(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');
+      css$7(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');
     }
   },
   _onDragStart: function _onDragStart(
@@ -2273,7 +2285,7 @@ Sortable.prototype =
 
       on(document, 'drop', _this); // #1276 fix:
 
-      css$5(dragEl, 'transform', 'translateZ(0)');
+      css$7(dragEl, 'transform', 'translateZ(0)');
     }
 
     awaitingDragStarted = true;
@@ -2282,7 +2294,7 @@ Sortable.prototype =
     moved = true;
 
     if (Safari) {
-      css$5(document.body, 'user-select', 'none');
+      css$7(document.body, 'user-select', 'none');
     }
   },
   // Returns true - if no further action is needed (either inserted or another condition)
@@ -2502,7 +2514,7 @@ Sortable.prototype =
           do {
             dragIndex -= direction;
             sibling = parentEl.children[dragIndex];
-          } while (sibling && (css$5(sibling, 'display') === 'none' || sibling === ghostEl));
+          } while (sibling && (css$7(sibling, 'display') === 'none' || sibling === ghostEl));
         } // If dragEl is already beside target: Do not insert
 
 
@@ -2617,10 +2629,10 @@ Sortable.prototype =
     this._offUpEvents();
 
     if (Safari) {
-      css$5(document.body, 'user-select', '');
+      css$7(document.body, 'user-select', '');
     }
 
-    css$5(dragEl, 'transform', '');
+    css$7(dragEl, 'transform', '');
 
     if (evt) {
       if (moved) {
@@ -2895,7 +2907,7 @@ Sortable.prototype =
     if (!cloneHidden) {
       pluginEvent('hideClone', this);
       if (Sortable.eventCanceled) return;
-      css$5(cloneEl, 'display', 'none');
+      css$7(cloneEl, 'display', 'none');
 
       if (this.options.removeCloneOnHide && cloneEl.parentNode) {
         cloneEl.parentNode.removeChild(cloneEl);
@@ -2927,7 +2939,7 @@ Sortable.prototype =
         this.animate(dragEl, cloneEl);
       }
 
-      css$5(cloneEl, 'display', '');
+      css$7(cloneEl, 'display', '');
       cloneHidden = false;
     }
   }
@@ -3102,7 +3114,7 @@ if (documentExists) {
 Sortable.utils = {
   on: on,
   off: off,
-  css: css$5,
+  css: css$7,
   find: find,
   is: function is(el, selector) {
     return !!closest(el, selector, el, false);
@@ -3329,7 +3341,7 @@ var autoScroll = throttle(function (evt, options, rootEl, isFallback) {
         canScrollY = void 0,
         scrollWidth = el.scrollWidth,
         scrollHeight = el.scrollHeight,
-        elCSS = css$5(el),
+        elCSS = css$7(el),
         scrollPosX = el.scrollLeft,
         scrollPosY = el.scrollTop;
 
@@ -3665,7 +3677,7 @@ function MultiDragPlugin() {
       if (!this.isMultiDrag) return;
       insertMultiDragClones(false, rootEl);
       multiDragClones.forEach(function (clone) {
-        css$5(clone, 'display', '');
+        css$7(clone, 'display', '');
       });
       cloneNowShown();
       clonesHidden = false;
@@ -3679,7 +3691,7 @@ function MultiDragPlugin() {
           cancel = _ref5.cancel;
       if (!this.isMultiDrag) return;
       multiDragClones.forEach(function (clone) {
-        css$5(clone, 'display', 'none');
+        css$7(clone, 'display', 'none');
 
         if (_this.options.removeCloneOnHide && clone.parentNode) {
           clone.parentNode.removeChild(clone);
@@ -3723,7 +3735,7 @@ function MultiDragPlugin() {
         if (this.options.animation) {
           multiDragElements.forEach(function (multiDragElement) {
             if (multiDragElement === dragEl$1) return;
-            css$5(multiDragElement, 'position', 'absolute');
+            css$7(multiDragElement, 'position', 'absolute');
           });
           var dragRect = getRect(dragEl$1, false, true, true);
           multiDragElements.forEach(function (multiDragElement) {
@@ -6618,9 +6630,38 @@ vuedraggable_umd.exports;
 var vuedraggable_umdExports = vuedraggable_umd.exports;
 var draggable = /*@__PURE__*/getDefaultExportFromCjs(vuedraggable_umdExports);
 
+var css$6 = "\r\n/* Fijar ancho de la columna de acciones en el header */\n.actions-header[data-v-37559362] {\r\n  width: 1%;\r\n  white-space: nowrap;\n}\r\n";
+n(css$6, {});
+
 const _sfc_main$d = {
   name: 'TableHeader',
-  inject: ['columns', 'enableFilters', 'filtersVisible', 'isColumnHasFilter', 'internalFilterByProp', 'onChangeFilter', 'toggleAll', 'toggleSortFilter', 'sortable', 'optionsLoaded']
+  inject: ['columns', 'enableFilters', 'filtersVisible', 'isColumnHasFilter', 'internalFilterByProp', 'onChangeFilter', 'toggleAll', 'toggleSortFilter', 'sortable', 'optionsLoaded', 'isAllSelected'],
+  data() {
+    return {
+      hoveredColumn: null
+    };
+  },
+  methods: {
+    isSortableColumn(column) {
+      return this.sortable && column.type != 'select' && column.type != 'checkbox' && this.internalFilterByProp(column.prop + '_sort');
+    },
+    shouldShowSortIcon(column) {
+      const sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      return this.hoveredColumn === column.prop || sortFilter.value;
+    },
+    getSortIconDirection(column) {
+      const sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      const sortValue = sortFilter.value;
+      if (sortValue === 'DESC') {
+        return 'down';
+      } else if (sortValue === 'ASC') {
+        return 'up';
+      } else if (this.hoveredColumn === column.prop) {
+        return 'up';
+      }
+      return null;
+    }
+  }
 };
 var _sfc_render$d = function render() {
   var _vm = this,
@@ -6631,11 +6672,22 @@ var _sfc_render$d = function render() {
     return _vm._l(_vm.columns, function (column, indexc) {
       return _c('th', {
         key: indexc,
+        class: {
+          'actions-header': column.type == 'actions'
+        },
         style: {
-          width: column.width ? column.width : 'inherit'
+          width: column.width ? column.width : column.type == 'actions' ? '1%' : 'inherit'
         },
         attrs: {
           "scope": "col"
+        },
+        on: {
+          "mouseenter": function ($event) {
+            _vm.hoveredColumn = column.prop;
+          },
+          "mouseleave": function ($event) {
+            _vm.hoveredColumn = null;
+          }
         }
       }, [_vm.enableFilters && _vm.filtersVisible && _vm.isColumnHasFilter(column) && _vm.internalFilterByProp(column.prop) ? _vm._t('filter-' + column.prop, function () {
         return [_c('div', {
@@ -6781,21 +6833,19 @@ var _sfc_render$d = function render() {
           }, [_vm._v(" " + _vm._s(option.text ? option.text : option.label ? option.label : "") + " ")]);
         })], 2) : column.type == 'checkbox' ? _c('b-form-checkbox', {
           attrs: {
-            "name": "select-all"
+            "name": "select-all",
+            "checked": _vm.isAllSelected
           },
           on: {
-            "change": function ($event) {
-              return _vm.toggleAll($event);
-            }
+            "change": _vm.toggleAll
           }
         }) : column.type == 'select' ? _c('b-form-checkbox', {
           attrs: {
-            "name": "select-all"
+            "name": "select-all",
+            "checked": _vm.isAllSelected
           },
           on: {
-            "change": function ($event) {
-              return _vm.toggleAll($event);
-            }
+            "change": _vm.toggleAll
           }
         }) : _c('input', {
           directives: [{
@@ -6827,26 +6877,33 @@ var _sfc_render$d = function render() {
         "internalFilterByProp": _vm.internalFilterByProp
       }) : column.type == 'select' ? _c('span', [_c('b-form-checkbox', {
         attrs: {
-          "name": "select-all"
+          "name": "select-all",
+          "checked": _vm.isAllSelected
         },
         on: {
-          "change": function ($event) {
-            return _vm.toggleAll($event);
-          }
+          "change": _vm.toggleAll
+        }
+      })], 1) : column.type == 'checkbox' ? _c('span', [_c('b-form-checkbox', {
+        attrs: {
+          "name": "select-all",
+          "checked": _vm.isAllSelected
+        },
+        on: {
+          "change": _vm.toggleAll
         }
-      })], 1) : _c('span', [_vm._v(_vm._s(column.label))]), _vm.sortable && column.type != 'select' && column.type != 'checkbox' && _vm.internalFilterByProp(column.prop + '_sort') ? _c('span', {
+      })], 1) : _c('span', [_vm._v(_vm._s(column.label))]), _vm.isSortableColumn(column) && _vm.shouldShowSortIcon(column) ? _c('span', {
         staticClass: "sort-filter",
         on: {
           "click": function ($event) {
             return _vm.toggleSortFilter(column);
           }
         }
-      }, [!_vm.internalFilterByProp(column.prop + '_sort').value ? _c('b-icon-sort-down') : _vm._e(), _vm.internalFilterByProp(column.prop + '_sort').value == 'ASC' ? _c('b-icon-sort-up') : _vm._e(), _vm.internalFilterByProp(column.prop + '_sort').value == 'DESC' ? _c('b-icon-sort-down') : _vm._e()], 1) : _vm._e()], 2);
+      }, [_vm.getSortIconDirection(column) === 'up' ? _c('b-icon-sort-up') : _vm._e(), _vm.getSortIconDirection(column) === 'down' ? _c('b-icon-sort-down') : _vm._e()], 1) : _vm._e()], 2);
     });
   })], 2)]);
 };
 var _sfc_staticRenderFns$d = [];
-var __component__$d = /*#__PURE__*/normalizeComponent(_sfc_main$d, _sfc_render$d, _sfc_staticRenderFns$d, false, null, null, null, null);
+var __component__$d = /*#__PURE__*/normalizeComponent(_sfc_main$d, _sfc_render$d, _sfc_staticRenderFns$d, false, null, "37559362", null, null);
 var TableHeader = __component__$d.exports;
 
 function commonjsRequire(path) {
@@ -12542,6 +12599,9 @@ moment$1.exports;
 var momentExports = moment$1.exports;
 var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
 
+var css$5 = "\r\n/* Fijar ancho de la columna de acciones */\n.actions-cell[data-v-3309b7c7] {\r\n  width: 1%;\r\n  white-space: nowrap;\n}\n.actions-button-group[data-v-3309b7c7] {\r\n  display: inline-flex;\r\n  flex-wrap: nowrap;\n}\n.actions-dropdown[data-v-3309b7c7] {\r\n  display: inline-block;\n}\r\n\r\n/* Asegurar que los botones no se expandan */\n.actions-button-group .btn[data-v-3309b7c7] {\r\n  flex-shrink: 0;\n}\r\n";
+n(css$5, {});
+
 const _sfc_main$c = {
   name: 'TableCell',
   props: {
@@ -12561,6 +12621,9 @@ var _sfc_render$c = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('td', {
+    class: {
+      'actions-cell': _vm.column.type == 'actions'
+    },
     attrs: {
       "scope": _vm.column.prop == 'id' ? 'row' : ''
     }
@@ -12586,13 +12649,68 @@ var _sfc_render$c = function render() {
         },
         expression: "item.selected"
       }
+    })], 1) : _vm.column.type == 'checkbox' ? _c('span', [_c('b-form-checkbox', {
+      on: {
+        "change": function ($event) {
+          return _vm.onCheckSelect($event, _vm.item);
+        }
+      },
+      model: {
+        value: _vm.item.selected,
+        callback: function ($$v) {
+          _vm.$set(_vm.item, "selected", $$v);
+        },
+        expression: "item.selected"
+      }
     })], 1) : _vm.column.type == 'state' && _vm.optionsLoaded ? _c('span', [_vm._v(" " + _vm._s(_vm.getStateValue(_vm.itemValue(_vm.column, _vm.item), _vm.column.options)) + " ")]) : _vm.column.type == 'array' && _vm.optionsLoaded ? _c('span', [_vm._v(" " + _vm._s(_vm.getArrayValue(_vm.itemValue(_vm.column, _vm.item), _vm.column.displayProp, _vm.column.options)) + " ")]) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(_vm.column, _vm.item)) + " ")])];
   }, {
     "item": _vm.item,
     "index": _vm.index,
     "itemindex": _vm.index,
     "columnindex": _vm.columnIndex
-  }), _vm.column.type == 'actions' ? _c('b-button-group', [_vm._t("rowAction", function () {
+  }), _vm.column.type == 'actions' && _vm.column.useDropdown ? _c('b-dropdown', {
+    staticClass: "actions-dropdown",
+    attrs: {
+      "variant": "secondary",
+      "size": "sm"
+    },
+    scopedSlots: _vm._u([{
+      key: "button-content",
+      fn: function () {
+        return [_c('b-icon-list')];
+      },
+      proxy: true
+    }], null, false, 4241371057)
+  }, [_vm._t("rowAction", function () {
+    return [_c('b-dropdown-item', {
+      on: {
+        "click": function ($event) {
+          return _vm.showItem(_vm.item.id, _vm.index);
+        }
+      }
+    }, [_c('b-icon-eye'), _vm._v(" Ver ")], 1), _c('b-dropdown-item', {
+      on: {
+        "click": function ($event) {
+          return _vm.updateItem(_vm.item.id, _vm.index);
+        }
+      }
+    }, [_c('b-icon-pencil'), _vm._v(" Editar ")], 1), _c('b-dropdown-item', {
+      staticClass: "text-danger",
+      on: {
+        "click": function ($event) {
+          return _vm.removeItem(_vm.item.id, _vm.index);
+        }
+      }
+    }, [_c('b-icon-trash'), _vm._v(" Eliminar ")], 1)];
+  }, {
+    "item": _vm.item,
+    "index": _vm.index,
+    "showItem": _vm.showItem,
+    "updateItem": _vm.updateItem,
+    "removeItem": _vm.removeItem
+  })], 2) : _vm.column.type == 'actions' ? _c('b-button-group', {
+    staticClass: "actions-button-group"
+  }, [_vm._t("rowAction", function () {
     return [_c('b-button', {
       attrs: {
         "variant": "primary"
@@ -12630,7 +12748,7 @@ var _sfc_render$c = function render() {
   })], 2) : _vm._e()], 2);
 };
 var _sfc_staticRenderFns$c = [];
-var __component__$c = /*#__PURE__*/normalizeComponent(_sfc_main$c, _sfc_render$c, _sfc_staticRenderFns$c, false, null, null, null, null);
+var __component__$c = /*#__PURE__*/normalizeComponent(_sfc_main$c, _sfc_render$c, _sfc_staticRenderFns$c, false, null, "3309b7c7", null, null);
 var TableCell = __component__$c.exports;
 
 const _sfc_main$b = {
@@ -12649,7 +12767,9 @@ var _sfc_render$b = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('tr', {
-    staticClass: "item",
+    class: ['item', {
+      'selected': _vm.item.selected
+    }],
     on: {
       "mouseover": function ($event) {
         return _vm.onRowHover(_vm.item, _vm.index);
@@ -12705,6 +12825,7 @@ var _sfc_render$a = function render() {
     class: ['table table-hover table-striped w-100', _vm.tableClass]
   }, [_c('TableHeader'), _c('draggable', {
     attrs: {
+      "list": _vm.items,
       "group": _vm.draggableGroup,
       "tag": "tbody",
       "draggable": _vm.orderable ? '.item' : '.none',
@@ -12726,13 +12847,6 @@ var _sfc_render$a = function render() {
       "change": function ($event) {
         return _vm.onDraggableChange($event);
       }
-    },
-    model: {
-      value: _vm.items,
-      callback: function ($$v) {
-        _vm.items = $$v;
-      },
-      expression: "items"
     }
   }, _vm._l(_vm.itemsList, function (item, index) {
     return _c('TableRow', {
@@ -12743,7 +12857,7 @@ var _sfc_render$a = function render() {
         "grouped": _vm.grouped
       }
     });
-  }), 1)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
+  }), 1)], 1), !_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
   }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]) : _vm._e();
 };
@@ -13092,11 +13206,12 @@ var _sfc_staticRenderFns$9 = [];
 var __component__$9 = /*#__PURE__*/normalizeComponent(_sfc_main$9, _sfc_render$9, _sfc_staticRenderFns$9, false, null, null, null, null);
 var ItemCard = __component__$9.exports;
 
+// Registrar el componente masonry usando el Plugin
+Vue.use(Plugin);
 const _sfc_main$8 = {
   name: 'CrudCards',
   components: {
     draggable,
-    VueMasonry: Plugin,
     ItemCard
   },
   inject: ['displayMode', 'displayModes', 'items', 'draggableGroup', 'orderable', 'draggableOptions', 'itemsList', 'colLg', 'colXl', 'colMd', 'colSm', 'colXs', 'columns', 'cardClass', 'cardHideFooter', 'itemValue', 'getStateValue', 'getArrayValue', 'showItem', 'updateItem', 'removeItem', 'loading', 'infiniteScroll', 'messageEmptyResults', 'onSort', 'onDraggableAdded', 'onDraggableChange'],
@@ -13109,7 +13224,7 @@ const _sfc_main$8 = {
 var _sfc_render$8 = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('div', [_c('draggable', {
+  return _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('div', [_c('draggable', {
     attrs: {
       "group": _vm.draggableGroup,
       "draggable": _vm.orderable ? '.item' : '.none',
@@ -13177,9 +13292,9 @@ var _sfc_render$8 = function render() {
     }, {
       "item": item
     })], 2);
-  }), 0)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
+  }), 0)], 1), !_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
-  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()], 1);
+  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()], 1) : _vm._e();
 };
 var _sfc_staticRenderFns$8 = [];
 var __component__$8 = /*#__PURE__*/normalizeComponent(_sfc_main$8, _sfc_render$8, _sfc_staticRenderFns$8, false, null, null, null, null);
@@ -13449,7 +13564,7 @@ const _sfc_main$4 = {
 var _sfc_render$4 = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('div', [_c('KanbanBoard')], 1);
+  return _vm.displayMode == _vm.displayModes.MODE_KANBAN ? _c('div', [_c('KanbanBoard')], 1) : _vm._e();
 };
 var _sfc_staticRenderFns$4 = [];
 var __component__$4 = /*#__PURE__*/normalizeComponent(_sfc_main$4, _sfc_render$4, _sfc_staticRenderFns$4, false, null, null, null, null);
@@ -13462,9 +13577,9 @@ const _sfc_main$3 = {
 var _sfc_render$3 = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _c('div', [_c('div', {
+  return _vm.displayMode == _vm.displayModes.MODE_CUSTOM ? _c('div', [_c('div', {
     class: _vm.listContainerClass
-  }, [!_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
+  }, [!_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
   }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e(), _vm._l(_vm.itemsList, function (item, index) {
     return _c('div', {
@@ -13473,7 +13588,7 @@ var _sfc_render$3 = function render() {
     }, [_vm._t("card", null, {
       "item": item
     })], 2);
-  })], 2)]);
+  })], 2)]) : _vm._e();
 };
 var _sfc_staticRenderFns$3 = [];
 var __component__$3 = /*#__PURE__*/normalizeComponent(_sfc_main$3, _sfc_render$3, _sfc_staticRenderFns$3, false, null, null, null, null);
@@ -13719,7 +13834,7 @@ vueInfiniteLoading.exports;
 var vueInfiniteLoadingExports = vueInfiniteLoading.exports;
 var InfiniteLoading = /*@__PURE__*/getDefaultExportFromCjs(vueInfiniteLoadingExports);
 
-var css$1 = "\n.crud-pagination[data-v-975091ac] {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  justify-content: center;\r\n  margin-top: 1rem;\n}\r\n";
+var css$1 = "\n.paginator-container[data-v-11671e09] {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto 1fr;\r\n  align-items: center;\r\n  width: 100%;\r\n  margin-top: 1rem;\r\n  gap: 1rem;\n}\n.paginator-data[data-v-11671e09] {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  font-size: 0.875rem;\r\n  grid-column: 1;\n}\n.paginator-badge[data-v-11671e09] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  padding: 0.375rem 0.625rem;\r\n  background-color: #f8f9fa;\r\n  border: 1px solid #dee2e6;\r\n  border-radius: 0.375rem;\r\n  color: #495057;\r\n  transition: all 0.2s ease;\n}\n.paginator-badge[data-v-11671e09]:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\n.paginator-label[data-v-11671e09] {\r\n  font-weight: 500;\r\n  color: #6c757d;\n}\n.paginator-value[data-v-11671e09] {\r\n  font-weight: 600;\r\n  color: #212529;\n}\n.paginator-dropdown[data-v-11671e09] {\r\n  font-size: 0.875rem;\n}\n.paginator-dropdown[data-v-11671e09] .btn {\r\n  padding: 0.375rem 0.625rem;\r\n  font-size: 0.875rem;\r\n  background-color: #f8f9fa;\r\n  border: 1px solid #dee2e6;\r\n  color: #495057;\n}\n.paginator-dropdown[data-v-11671e09] .btn:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\n.crud-paginator[data-v-11671e09] {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  grid-column: 2;\n}\n.paginator-badge-dropdown[data-v-11671e09] {\r\n  z-index: 1;\r\n  position: relative;\n}\n.paginator-badge-dropdown[data-v-11671e09] .btn {\r\n  padding: 0.375rem 0.625rem;\r\n  font-size: 0.875rem;\r\n  background-color: #f8f9fa;\r\n  border: 1px solid #dee2e6;\r\n  color: #495057;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\n}\n.paginator-badge-dropdown[data-v-11671e09] .btn:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\r\n";
 n(css$1, {});
 
 const _sfc_main$1 = {
@@ -13727,7 +13842,18 @@ const _sfc_main$1 = {
   components: {
     InfiniteLoading
   },
-  inject: ['infiniteScroll', 'infiniteScrollKey', 'messageLoading', 'messageNoMore', 'messageEmptyResults', 'loading', 'items', 'pagination', 'selectedItems', 'showPaginator', 'infiniteHandler', 'onPaginationChange']
+  inject: ['infiniteScroll', 'infiniteScrollKey', 'messageLoading', 'messageNoMore', 'messageEmptyResults', 'loading', 'items', 'pagination', 'selectedItems', 'showPaginator', 'infiniteHandler', 'onPaginationChange', 'onPerPageChange', 'clearSelection'],
+  data() {
+    return {
+      perPageOptions: [10, 20, 50, 100]
+    };
+  },
+  computed: {
+    selectedItemsCount() {
+      // Computed para forzar reactividad del contador
+      return this.selectedItems ? this.selectedItems.length : 0;
+    }
+  }
 };
 var _sfc_render$1 = function render() {
   var _vm = this,
@@ -13763,8 +13889,48 @@ var _sfc_render$1 = function render() {
   }, [!_vm.loading ? _c('div', {
     staticClass: "text-center"
   }, [_vm._v(_vm._s(_vm.items.length == 0 ? _vm.messageEmptyResults : _vm.messageNoMore))]) : _vm._e()])]) : _vm._e(), !_vm.infiniteScroll ? _c('div', {
+    staticClass: "paginator-container"
+  }, [_c('div', {
     staticClass: "paginator-data"
-  }, [_vm._v(" Filas: " + _vm._s(_vm.pagination.total) + " | xPág: " + _vm._s(_vm.pagination.per_page) + " | Pág: " + _vm._s(_vm.pagination.current_page) + " | Seleccionados: " + _vm._s(_vm.selectedItems.length) + " ")]) : _vm._e(), !_vm.infiniteScroll ? _c('div', {
+  }, [_c('span', {
+    staticClass: "paginator-badge"
+  }, [_c('span', {
+    staticClass: "paginator-label"
+  }, [_vm._v("Filas:")]), _c('span', {
+    staticClass: "paginator-value"
+  }, [_vm._v(_vm._s(_vm.pagination.total))])]), _c('b-dropdown', {
+    staticClass: "paginator-dropdown",
+    attrs: {
+      "variant": "outline-secondary",
+      "size": "sm",
+      "text": `xPág: ${_vm.pagination.per_page}`
+    }
+  }, _vm._l(_vm.perPageOptions, function (option) {
+    return _c('b-dropdown-item', {
+      key: option,
+      attrs: {
+        "active": _vm.pagination.per_page === option
+      },
+      on: {
+        "click": function ($event) {
+          return _vm.onPerPageChange(option);
+        }
+      }
+    }, [_vm._v(" " + _vm._s(option) + " ")]);
+  }), 1), _vm.selectedItemsCount > 0 ? _c('b-dropdown', {
+    staticClass: "paginator-dropdown paginator-badge-dropdown",
+    attrs: {
+      "variant": "outline-secondary",
+      "size": "sm",
+      "text": `Seleccionados: ${_vm.selectedItemsCount}`
+    }
+  }, [_c('b-dropdown-item', {
+    on: {
+      "click": _vm.clearSelection
+    }
+  }, [_c('b-icon-x-circle', {
+    staticClass: "mr-1"
+  }), _vm._v(" Limpiar selección ")], 1)], 1) : _vm._e()], 1), _c('div', {
     staticClass: "crud-paginator"
   }, [_vm.showPaginator ? _c('b-pagination', {
     attrs: {
@@ -13783,10 +13949,10 @@ var _sfc_render$1 = function render() {
       },
       expression: "pagination.current_page"
     }
-  }) : _vm._e()], 1) : _vm._e()], 1);
+  }) : _vm._e()], 1)]) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /*#__PURE__*/normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, "975091ac", null, null);
+var __component__$1 = /*#__PURE__*/normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, "11671e09", null, null);
 var CrudPagination = __component__$1.exports;
 
 var crudData = {
@@ -13828,7 +13994,8 @@ var crudData = {
       refreshing: false,
       fetchError: false,
       principalSort: false,
-      exportFormat: 'JSON'
+      exportFormat: 'JSON',
+      fileImport: null
     };
   },
   computed: {
@@ -13918,6 +14085,73 @@ var crudData = {
       if (!this.ajax) {
         this.items = val;
       }
+    },
+    limit(val) {
+      if (val && val > 0) {
+        this.pagination.per_page = val;
+        // Resetear a la primera página y recargar datos
+        this.pagination.current_page = 1;
+        this.fetchItems();
+      }
+    },
+    displayMode() {
+      // Forzar re-renderizado cuando cambia el modo de visualización
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    showPaginator() {
+      // Forzar re-renderizado cuando cambia la visibilidad del paginador
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    showSearch() {
+      // Forzar re-renderizado cuando cambia la visibilidad de la búsqueda
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    showCreateBtn() {
+      // Forzar re-renderizado cuando cambia la visibilidad del botón crear
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    showHeader() {
+      // Forzar re-renderizado cuando cambia la visibilidad del header
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    tableClass() {
+      // Forzar re-renderizado cuando cambian las clases de la tabla
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    cardClass() {
+      // Forzar re-renderizado cuando cambian las clases de las tarjetas
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    tableContainerClass() {
+      // Forzar re-renderizado cuando cambian las clases del contenedor
+      this.$nextTick(() => {
+        this.forceRecomputeCounter++;
+      });
+    },
+    columns: {
+      handler() {
+        // Recargar opciones cuando cambian las columnas
+        this.loadOptions();
+        // Forzar re-renderizado
+        this.$nextTick(() => {
+          this.forceRecomputeCounter++;
+        });
+      },
+      deep: true
     }
   },
   mounted() {
@@ -14022,15 +14256,13 @@ var crudData = {
       });
     },
     makePagination: function (data) {
-      let pagination = {
-        current_page: data.current_page,
-        last_page: data.last_page,
-        next_page_url: data.next_page_url,
-        prev_page_url: data.prev_page_url,
-        total: data.total,
-        per_page: data.per_page
-      };
-      this.pagination = pagination;
+      // Mutar propiedades existentes para mantener reactividad con provide/inject
+      this.pagination.current_page = data.current_page ?? 1;
+      this.pagination.last_page = data.last_page ?? 1;
+      this.pagination.next_page_url = data.next_page_url ?? "";
+      this.pagination.prev_page_url = data.prev_page_url ?? "";
+      this.pagination.total = data.total ?? 0;
+      this.pagination.per_page = data.per_page ?? 20;
     }
   }
 };
@@ -19307,17 +19539,31 @@ var crudApi = {
           filters: JSON.stringify(this.finalFilters)
         }
       }).then(response => {
+        console.debug("fetchItems - Response recibida:", response.data);
         this.makePagination(response.data);
+
+        // Validar que response.data.data existe y es un array
         let items = response.data.data;
+        if (!items) {
+          console.warn("fetchItems - response.data.data es undefined o null, usando array vacío");
+          items = [];
+        } else if (!Array.isArray(items)) {
+          console.warn("fetchItems - response.data.data no es un array, tipo:", typeof items, items);
+          items = [];
+        }
+        console.debug("fetchItems - Items procesados:", items, "Cantidad:", items.length);
         if (this.grouped) {
           this.groupItems(items, concat, this.isSplitGroups);
         } else {
           if (concat) {
-            this.items = this.items.concat(items);
+            // Para concat, agregar items al array existente
+            this.items.push(...items);
           } else {
-            this.items = items;
+            // Mutar el array existente en lugar de reemplazarlo para mantener reactividad con provide/inject
+            this.items.splice(0, this.items.length, ...items);
           }
         }
+        console.debug("fetchItems - this.items después de asignar:", this.items, "Cantidad:", this.items ? this.items.length : 0);
         this.loading = false;
         this.firstLoad = true;
         this.$emit("afterFetch", {});
@@ -19345,11 +19591,13 @@ var crudApi = {
       }, {});
       if (splitGroups) {
         // Dividimos los grupos en arrays separados
-        this.items = Object.entries(groupedMap).map(([groupKey, groupItems]) => ({
+        const groupedItems = Object.entries(groupedMap).map(([groupKey, groupItems]) => ({
           groupKey,
           groupLabel: groupLabelPre + groupKey + groupLabelAfter,
           items: groupItems
         }));
+        // Mutar el array existente para mantener reactividad
+        this.items.splice(0, this.items.length, ...groupedItems);
       } else {
         // Creamos la estructura agrupada en un solo array
         for (const [groupKey, groupItems] of Object.entries(groupedMap)) {
@@ -19362,9 +19610,10 @@ var crudApi = {
 
         // Decidimos si concatenar o reemplazar los items existentes
         if (concat) {
-          this.items = this.items.concat(itemsWithGroup);
+          this.items.push(...itemsWithGroup);
         } else {
-          this.items = itemsWithGroup;
+          // Mutar el array existente para mantener reactividad
+          this.items.splice(0, this.items.length, ...itemsWithGroup);
         }
       }
     },
@@ -19747,6 +19996,11 @@ var crudApi = {
     onPaginationChange(page) {
       this.fetchItems(page);
     },
+    onPerPageChange(perPage) {
+      this.pagination.per_page = perPage;
+      this.pagination.current_page = 1;
+      this.fetchItems(1);
+    },
     infiniteHandler($state) {
       const hasNextPage = (this.pagination.total > 0 || !this.firstLoad) && (!this.firstLoad || this.pagination.current_page * this.pagination.per_page <= this.pagination.total);
       console.debug("Has next page", hasNextPage, this.pagination);
@@ -19808,14 +20062,14 @@ var crudFilters = {
       } else if (value == "DESC") {
         this.internalFilterByProp(column.prop + "_sort").value = null;
       }
+      this.forceRecomputeCounter++;
+      setTimeout(() => {
+        this.refresh();
+      }, 1);
     },
     toggleFilters() {
       this.filtersVisible = !this.filtersVisible;
-      if (this.displayMode == this.displayModes.MODE_CARDS) {
-        this.filterSidebarOpen = this.filtersVisible;
-      } else {
-        this.filterSidebarOpen = false;
-      }
+      this.filterSidebarOpen = this.filtersVisible;
     },
     resetFilters(refresh = true) {
       this.internalFilters = [];
@@ -19910,6 +20164,25 @@ var crudValidation = {
 };
 
 var crudHelpers = {
+  computed: {
+    isAllSelected() {
+      // Forzar dependencia en selectedItems.length para que se recalcule cuando cambie
+      const selectedCount = this.selectedItems ? this.selectedItems.length : 0;
+      if (!this.itemsList || this.itemsList.length === 0) {
+        return false;
+      }
+
+      // Si no hay items seleccionados, retornar false
+      if (selectedCount === 0) {
+        return false;
+      }
+
+      // Verificar que todos los items de la lista actual estén seleccionados
+      // Usar Boolean() para manejar valores undefined/null
+      const allSelected = this.itemsList.every(item => Boolean(item.selected) === true);
+      return allSelected;
+    }
+  },
   methods: {
     onRowHover(item, itemIndex) {
       if (this.selectHover) {
@@ -19946,35 +20219,76 @@ var crudHelpers = {
       console.debug("Selected Items", this.selectedItems);
     },
     toggleAll(value) {
-      if (value) {
-        this.selectedItems = this.items;
-        this.selectedItems.forEach(item => item.selected = true);
+      // b-form-checkbox emite el valor booleano directamente en el evento change
+      // El valor puede venir directamente como booleano o como evento del DOM
+      const checked = typeof value === 'boolean' ? value : value && value.target ? value.target.checked : value;
+      if (checked) {
+        // Seleccionar todos los items de la lista actual (itemsList)
+        this.itemsList.forEach(item => {
+          this.$set(item, 'selected', true);
+          // Agregar a selectedItems si no está ya
+          if (!this.selectedItems.find(si => si.id === item.id)) {
+            this.selectedItems.push(item);
+          }
+        });
       } else {
-        this.selectedItems.forEach(item => item.selected = false);
-        this.items.forEach(item => item.selected = false);
-        this.selectedItems = [];
+        // Deseleccionar todos
+        this.selectedItems.forEach(item => this.$set(item, 'selected', false));
+        this.items.forEach(item => this.$set(item, 'selected', false));
+        this.itemsList.forEach(item => this.$set(item, 'selected', false));
+        // Usar splice para mantener la referencia del array y reactividad con provide/inject
+        this.selectedItems.splice(0, this.selectedItems.length);
       }
       this.onSelect();
       console.debug("toggle all", this.selectedItems);
+      // Forzar actualización inmediata y en el siguiente tick
       this.$forceUpdate();
+      this.$nextTick(() => {
+        this.$forceUpdate();
+      });
     },
     unSelectItem(item) {
-      item.selected = false;
-      this.selectedItems = this.selectedItems.filter(e => e.id != item.id);
+      this.$set(item, 'selected', false);
+
+      // Filtrar el array y reasignarlo para asegurar reactividad
+      const filtered = this.selectedItems.filter(e => e.id != item.id);
+      // Vaciar el array y luego agregar los elementos filtrados para mantener la referencia
+      this.selectedItems.splice(0, this.selectedItems.length, ...filtered);
+
+      // Forzar actualización para que el computed isAllSelected se recalcule
+      this.$forceUpdate();
     },
     selectItem() {
       let sitem = this.selectedItems.find(e => e.id == this.item.id);
       if (sitem) {
-        this.item.selected = false;
-        this.selectedItems = this.selectedItems.filter(e => e.id != this.item.id);
+        this.$set(this.item, 'selected', false);
+        const filtered = this.selectedItems.filter(e => e.id != this.item.id);
+        // Usar splice para mantener la referencia del array
+        this.selectedItems.splice(0, this.selectedItems.length, ...filtered);
       } else {
-        this.item.selected = true;
+        this.$set(this.item, 'selected', true);
         this.selectedItems.push(this.item);
       }
+      // Forzar actualización para que el computed isAllSelected se recalcule
+      this.$forceUpdate();
     },
     getSelectedItems() {
       return this.selectedItems;
     },
+    clearSelection() {
+      // Limpiar todas las selecciones
+      this.selectedItems.forEach(item => this.$set(item, 'selected', false));
+      this.items.forEach(item => this.$set(item, 'selected', false));
+      this.itemsList.forEach(item => this.$set(item, 'selected', false));
+      // Vaciar el array manteniendo la referencia para reactividad con provide/inject
+      this.selectedItems.splice(0, this.selectedItems.length);
+      this.onSelect();
+      // Forzar actualización inmediata y en el siguiente tick para asegurar que todo se actualice
+      this.$forceUpdate();
+      this.$nextTick(() => {
+        this.$forceUpdate();
+      });
+    },
     onSelect() {
       this.$emit("select", this.item);
       this.$emit("selectItems", this.selectedItems);
@@ -20152,7 +20466,7 @@ var crudHelpers = {
   }
 };
 
-var css = "tr td[data-v-9374538f]:last-child,\ntr td[data-v-9374538f]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-9374538f] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-9374538f] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-9374538f] .crud-title[data-v-9374538f] {\n    margin: 0; }\n  .crud-header[data-v-9374538f] .crud-search[data-v-9374538f] {\n    max-width: 15rem; }\n    .crud-header[data-v-9374538f] .crud-search[data-v-9374538f] .btn[data-v-9374538f] {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 0.375rem;\n      border-bottom-right-radius: 0.375rem; }\n      .crud-header[data-v-9374538f] .crud-search[data-v-9374538f] .btn[data-v-9374538f].open[data-v-9374538f] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-9374538f] .table-options[data-v-9374538f] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-9374538f] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-9374538f] {\n    table-layout: auto; }\n    .table[data-v-9374538f] tbody[data-v-9374538f] td[data-v-9374538f] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-9374538f] tbody[data-v-9374538f] td[data-v-9374538f]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-9374538f] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-9374538f] {\n  background: #f4f5f7;\n  border-radius: 8px;\n  width: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }\n\n.kanban-column-header[data-v-9374538f] {\n  font-weight: bold;\n  padding: 0.5rem;\n  background: #dfe1e6;\n  border-radius: 8px 8px 0 0;\n  text-align: center; }\n\n.kanban-column-body[data-v-9374538f] {\n  padding: 0.5rem;\n  min-height: 100px;\n  background: #ffffff;\n  border-radius: 0 0 8px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; }\n\n.kanban-card[data-v-9374538f] {\n  background: #ffffff;\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: grab; }\n";
+var css = "tr td[data-v-482920a4]:last-child,\ntr td[data-v-482920a4]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\ntbody tr.selected[data-v-482920a4] {\n  background-color: #e3f2fd !important; }\n  tbody tr.selected[data-v-482920a4] td[data-v-482920a4] {\n    background-color: transparent !important; }\n  tbody tr.selected[data-v-482920a4][data-v-482920a4]:hover {\n    background-color: #bbdefb !important; }\n    tbody tr.selected[data-v-482920a4][data-v-482920a4]:hover td[data-v-482920a4] {\n      background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-482920a4]:nth-of-type(odd) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-482920a4]:nth-of-type(odd) td[data-v-482920a4] {\n    background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-482920a4]:nth-of-type(even) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-482920a4]:nth-of-type(even) td[data-v-482920a4] {\n    background-color: transparent !important; }\n\n.crud-pagination[data-v-482920a4] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-482920a4] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-482920a4] .crud-title[data-v-482920a4] {\n    margin: 0; }\n  .crud-header[data-v-482920a4] .crud-search[data-v-482920a4] {\n    max-width: 15rem; }\n    .crud-header[data-v-482920a4] .crud-search[data-v-482920a4] .btn[data-v-482920a4] {\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      border-top-right-radius: 0.375rem;\n      border-bottom-right-radius: 0.375rem; }\n      .crud-header[data-v-482920a4] .crud-search[data-v-482920a4] .btn[data-v-482920a4].open[data-v-482920a4] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-482920a4] .table-options[data-v-482920a4] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-482920a4] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-482920a4] {\n    table-layout: auto; }\n    .table[data-v-482920a4] tbody[data-v-482920a4] td[data-v-482920a4] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-482920a4] tbody[data-v-482920a4] td[data-v-482920a4]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-482920a4] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-482920a4] {\n  background: #f4f5f7;\n  border-radius: 8px;\n  width: 300px;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }\n\n.kanban-column-header[data-v-482920a4] {\n  font-weight: bold;\n  padding: 0.5rem;\n  background: #dfe1e6;\n  border-radius: 8px 8px 0 0;\n  text-align: center; }\n\n.kanban-column-body[data-v-482920a4] {\n  padding: 0.5rem;\n  min-height: 100px;\n  background: #ffffff;\n  border-radius: 0 0 8px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem; }\n\n.kanban-card[data-v-482920a4] {\n  background: #ffffff;\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: grab; }\n";
 n(css, {});
 
 const _sfc_main = {
@@ -20241,6 +20555,7 @@ const _sfc_main = {
       bulkDelete: this.bulkDelete,
       showImport: this.showImport,
       showExport: this.showExport,
+      fileImport: this.fileImport,
       markDirty: this.markDirty,
       // Data from mixins
       crudUuid: this.crudUuid,
@@ -20278,6 +20593,7 @@ const _sfc_main = {
       internalFilter: this.internalFilter,
       internalFilterByProp: this.internalFilterByProp,
       columnOptions: this.columnOptions,
+      isAllSelected: this.isAllSelected,
       // Methods from mixins
       handleResize: this.handleResize,
       rearrangeArray: this.rearrangeArray,
@@ -20303,6 +20619,7 @@ const _sfc_main = {
       importItems: this.importItems,
       refresh: this.refresh,
       onPaginationChange: this.onPaginationChange,
+      onPerPageChange: this.onPerPageChange,
       infiniteHandler: this.infiniteHandler,
       setupFilters: this.setupFilters,
       toggleSortFilter: this.toggleSortFilter,
@@ -20323,6 +20640,7 @@ const _sfc_main = {
       unSelectItem: this.unSelectItem,
       selectItem: this.selectItem,
       getSelectedItems: this.getSelectedItems,
+      clearSelection: this.clearSelection,
       onSelect: this.onSelect,
       showItem: this.showItem,
       createItem: this.createItem,
@@ -20649,10 +20967,19 @@ var _sfc_render = function render() {
       "show": _vm.loading,
       "rounded": "sm"
     }
-  }), _c('CrudPagination'), _c('CrudModals')], 1);
+  }), _c('CrudPagination'), _c('CrudModals', {
+    scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+      return {
+        key: name,
+        fn: function (slotProps) {
+          return [_vm._t(name, null, null, slotProps)];
+        }
+      };
+    })], null, true)
+  })], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "9374538f", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "482920a4", null, null);
 var component = __component__.exports;
 
 // Import vue component