vue-laravel-crud 2.0.0 → 2.0.1

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

@@ -1,4 +1,4 @@
-'use strict';function _iterableToArrayLimit(r, l) {
+'use strict';var Vue=require('vue');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var Vue__default=/*#__PURE__*/_interopDefaultLegacy(Vue);function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
     var e,
@@ -739,13 +739,26 @@ var _sfc_render$f = function render() {
 };
 var _sfc_staticRenderFns$f = [];
 var __component__$f = /*#__PURE__*/normalizeComponent(_sfc_main$f, _sfc_render$f, _sfc_staticRenderFns$f, false, null, null, null, null);
-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";
+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-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$6, {});var _sfc_main$e = {
   name: 'CrudHeader',
   components: {
     CrudFilters: 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: function sidebarVisible() {
+      // Acceder directamente al componente padre para obtener reactividad
+      return this.$parent ? this.$parent.filterSidebarOpen : this.filterSidebarOpen;
+    }
+  },
+  methods: {
+    closeSidebar: function closeSidebar() {
+      if (this.filterSidebarOpen) {
+        this.toggleFilters();
+      }
+    }
+  }
 };
 var _sfc_render$e = function render() {
   var _vm = this,
@@ -756,16 +769,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 callback($$v) {
-        _vm.filterSidebarOpen = $$v;
-      },
-      expression: "filterSidebarOpen"
+    on: {
+      "hidden": _vm.closeSidebar
     }
   }, [_c('CrudFilters')], 1), _c('div', {
     staticClass: "table-options"
@@ -888,7 +898,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 : {};
 
 function getDefaultExportFromCjs (x) {
@@ -7041,7 +7051,33 @@ Sortable.mount(Remove, Revert);var sortable_esm=/*#__PURE__*/Object.freeze({__pr
 var vuedraggable_umdExports = vuedraggable_umd.exports;
 var draggable = /*@__PURE__*/getDefaultExportFromCjs(vuedraggable_umdExports);var _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'],
+  data: function data() {
+    return {
+      hoveredColumn: null
+    };
+  },
+  methods: {
+    isSortableColumn: function isSortableColumn(column) {
+      return this.sortable && column.type != 'select' && column.type != 'checkbox' && this.internalFilterByProp(column.prop + '_sort');
+    },
+    shouldShowSortIcon: function shouldShowSortIcon(column) {
+      var sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      return this.hoveredColumn === column.prop || sortFilter.value;
+    },
+    getSortIconDirection: function getSortIconDirection(column) {
+      var sortFilter = this.internalFilterByProp(column.prop + '_sort');
+      var 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,
@@ -7057,6 +7093,14 @@ var _sfc_render$d = function render() {
         },
         attrs: {
           "scope": "col"
+        },
+        on: {
+          "mouseenter": function mouseenter($event) {
+            _vm.hoveredColumn = column.prop;
+          },
+          "mouseleave": function mouseleave($event) {
+            _vm.hoveredColumn = null;
+          }
         }
       }, [_vm.enableFilters && _vm.filtersVisible && _vm.isColumnHasFilter(column) && _vm.internalFilterByProp(column.prop) ? _vm._t('filter-' + column.prop, function () {
         return [_c('div', {
@@ -7255,14 +7299,14 @@ var _sfc_render$d = function render() {
             return _vm.toggleAll($event);
           }
         }
-      })], 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 click($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)]);
 };
@@ -13060,7 +13104,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 mouseover($event) {
         return _vm.onRowHover(_vm.item, _vm.index);
@@ -13114,6 +13160,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',
@@ -13135,13 +13182,6 @@ var _sfc_render$a = function render() {
       "change": function change($event) {
         return _vm.onDraggableChange($event);
       }
-    },
-    model: {
-      value: _vm.items,
-      callback: function callback($$v) {
-        _vm.items = $$v;
-      },
-      expression: "items"
     }
   }, _vm._l(_vm.itemsList, function (item, index) {
     return _c('TableRow', {
@@ -13152,7 +13192,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();
 };
@@ -13495,11 +13535,12 @@ var _sfc_render$9 = function render() {
 };
 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;var _sfc_main$8 = {
+var ItemCard = __component__$9.exports;// Registrar el componente masonry usando el Plugin
+Vue__default["default"].use(Plugin);
+var _sfc_main$8 = {
   name: 'CrudCards',
   components: {
     draggable: draggable,
-    VueMasonry: Plugin,
     ItemCard: 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'],
@@ -13512,7 +13553,7 @@ var ItemCard = __component__$9.exports;var _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',
@@ -13580,9 +13621,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);
@@ -13838,7 +13879,7 @@ var KanbanBoard = __component__$5.exports;var _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);
@@ -13849,9 +13890,9 @@ var CrudKanban = __component__$4.exports;var _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', {
@@ -13860,7 +13901,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);
@@ -14098,7 +14139,7 @@ vueInfiniteLoading.exports;
 } (vueInfiniteLoading, 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 InfiniteLoading = /*@__PURE__*/getDefaultExportFromCjs(vueInfiniteLoadingExports);var css$1 = "\n.paginator-container[data-v-2c61ceb1] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  margin-top: 1rem;\r\n  gap: 0.75rem;\n}\n.paginator-data[data-v-2c61ceb1] {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  font-size: 0.875rem;\n}\n.paginator-badge[data-v-2c61ceb1] {\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-2c61ceb1]:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\n.paginator-label[data-v-2c61ceb1] {\r\n  font-weight: 500;\r\n  color: #6c757d;\n}\n.paginator-value[data-v-2c61ceb1] {\r\n  font-weight: 600;\r\n  color: #212529;\n}\n.crud-paginator[data-v-2c61ceb1] {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\n}\r\n";
 n(css$1, {});var _sfc_main$1 = {
   name: 'CrudPagination',
   components: {
@@ -14140,8 +14181,34 @@ 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('span', {
+    staticClass: "paginator-badge"
+  }, [_c('span', {
+    staticClass: "paginator-label"
+  }, [_vm._v("xPág:")]), _c('span', {
+    staticClass: "paginator-value"
+  }, [_vm._v(_vm._s(_vm.pagination.per_page))])]), _c('span', {
+    staticClass: "paginator-badge"
+  }, [_c('span', {
+    staticClass: "paginator-label"
+  }, [_vm._v("Pág:")]), _c('span', {
+    staticClass: "paginator-value"
+  }, [_vm._v(_vm._s(_vm.pagination.current_page))])]), _vm.selectedItems.length > 0 ? _c('span', {
+    staticClass: "paginator-badge"
+  }, [_c('span', {
+    staticClass: "paginator-label"
+  }, [_vm._v("Seleccionados:")]), _c('span', {
+    staticClass: "paginator-value"
+  }, [_vm._v(_vm._s(_vm.selectedItems.length))])]) : _vm._e()]), _c('div', {
     staticClass: "crud-paginator"
   }, [_vm.showPaginator ? _c('b-pagination', {
     attrs: {
@@ -14160,10 +14227,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, "2c61ceb1", null, null);
 var CrudPagination = __component__$1.exports;var crudData = {
   data: function data() {
     return {
@@ -14203,7 +14270,8 @@ var CrudPagination = __component__$1.exports;var crudData = {
       refreshing: false,
       fetchError: false,
       principalSort: false,
-      exportFormat: 'JSON'
+      exportFormat: 'JSON',
+      fileImport: null
     };
   },
   computed: {
@@ -19623,17 +19691,33 @@ axios.default = axios;var crudApi = {
           filters: JSON.stringify(this.finalFilters)
         }
       }).then(function (response) {
+        console.debug("fetchItems - Response recibida:", response.data);
         _this2.makePagination(response.data);
+
+        // Validar que response.data.data existe y es un array
         var 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$1(items), items);
+          items = [];
+        }
+        console.debug("fetchItems - Items procesados:", items, "Cantidad:", items.length);
         if (_this2.grouped) {
           _this2.groupItems(items, concat, _this2.isSplitGroups);
         } else {
           if (concat) {
-            _this2.items = _this2.items.concat(items);
+            var _this2$items;
+            // Para concat, agregar items al array existente
+            (_this2$items = _this2.items).push.apply(_this2$items, _toConsumableArray$1(items));
           } else {
-            _this2.items = items;
+            var _this2$items2;
+            // Mutar el array existente en lugar de reemplazarlo para mantener reactividad con provide/inject
+            (_this2$items2 = _this2.items).splice.apply(_this2$items2, [0, _this2.items.length].concat(_toConsumableArray$1(items)));
           }
         }
+        console.debug("fetchItems - this.items después de asignar:", _this2.items, "Cantidad:", _this2.items ? _this2.items.length : 0);
         _this2.loading = false;
         _this2.firstLoad = true;
         _this2.$emit("afterFetch", {});
@@ -19662,8 +19746,9 @@ axios.default = axios;var crudApi = {
         return acc;
       }, {});
       if (splitGroups) {
+        var _this$items;
         // Dividimos los grupos en arrays separados
-        this.items = Object.entries(groupedMap).map(function (_ref) {
+        var groupedItems = Object.entries(groupedMap).map(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             groupKey = _ref2[0],
             groupItems = _ref2[1];
@@ -19673,6 +19758,8 @@ axios.default = axios;var crudApi = {
             items: groupItems
           };
         });
+        // Mutar el array existente para mantener reactividad
+        (_this$items = this.items).splice.apply(_this$items, [0, this.items.length].concat(_toConsumableArray$1(groupedItems)));
       } else {
         // Creamos la estructura agrupada en un solo array
         for (var _i = 0, _Object$entries = Object.entries(groupedMap); _i < _Object$entries.length; _i++) {
@@ -19688,9 +19775,12 @@ axios.default = axios;var crudApi = {
 
         // Decidimos si concatenar o reemplazar los items existentes
         if (concat) {
-          this.items = this.items.concat(itemsWithGroup);
+          var _this$items2;
+          (_this$items2 = this.items).push.apply(_this$items2, itemsWithGroup);
         } else {
-          this.items = itemsWithGroup;
+          var _this$items3;
+          // Mutar el array existente para mantener reactividad
+          (_this$items3 = this.items).splice.apply(_this$items3, [0, this.items.length].concat(itemsWithGroup));
         }
       }
     },
@@ -20307,6 +20397,7 @@ axios.default = axios;var crudApi = {
       });
     },
     toggleSortFilter: function toggleSortFilter(column) {
+      var _this2 = this;
       var value = this.internalFilterByProp(column.prop + "_sort").value;
       if (!value) {
         this.internalFilterByProp(column.prop + "_sort").value = "ASC";
@@ -20315,24 +20406,24 @@ axios.default = axios;var crudApi = {
       } else if (value == "DESC") {
         this.internalFilterByProp(column.prop + "_sort").value = null;
       }
+      this.forceRecomputeCounter++;
+      setTimeout(function () {
+        _this2.refresh();
+      }, 1);
     },
     toggleFilters: function 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: function resetFilters() {
-      var _this2 = this;
+      var _this3 = this;
       var refresh = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       this.internalFilters = [];
       this.setupFilters();
       this.forceRecomputeCounter++;
       if (refresh) {
         setTimeout(function () {
-          _this2.refresh();
+          _this3.refresh();
         }, 1);
       }
     },
@@ -20340,29 +20431,29 @@ axios.default = axios;var crudApi = {
       return column && !column.hideFilter && column.type != "actions";
     },
     setFilter: function setFilter(column, value) {
-      var _this3 = this;
+      var _this4 = this;
       var filter = this.filter.find(function (f) {
         return f.column == column;
       });
       filter.value = value;
       this.forceRecomputeCounter++;
       setTimeout(function () {
-        _this3.refresh();
+        _this4.refresh();
       }, 1);
     },
     onChangeFilter: function onChangeFilter(event) {
-      var _this4 = this;
+      var _this5 = this;
       this.forceRecomputeCounter++;
       console.debug("Filters debug ", this.finalFilters, this.internalFilter, this.internalFilters, this.filter, this.filters);
       setTimeout(function () {
-        _this4.refresh();
+        _this5.refresh();
       }, 1);
     },
     togglePrincipalSort: function togglePrincipalSort() {
-      var _this5 = this;
+      var _this6 = this;
       this.principalSort = !this.principalSort;
       setTimeout(function () {
-        _this5.refresh();
+        _this6.refresh();
       }, 1);
     }
   }
@@ -20711,7 +20802,7 @@ axios.default = axios;var crudApi = {
       link.click();
     }
   }
-};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-51b1f76a]:last-child,\ntr td[data-v-51b1f76a]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\ntbody tr.selected[data-v-51b1f76a] {\n  background-color: #e3f2fd !important; }\n  tbody tr.selected[data-v-51b1f76a] td[data-v-51b1f76a] {\n    background-color: transparent !important; }\n  tbody tr.selected[data-v-51b1f76a][data-v-51b1f76a]:hover {\n    background-color: #bbdefb !important; }\n    tbody tr.selected[data-v-51b1f76a][data-v-51b1f76a]:hover td[data-v-51b1f76a] {\n      background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-51b1f76a]:nth-of-type(odd) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-51b1f76a]:nth-of-type(odd) td[data-v-51b1f76a] {\n    background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-51b1f76a]:nth-of-type(even) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-51b1f76a]:nth-of-type(even) td[data-v-51b1f76a] {\n    background-color: transparent !important; }\n\n.crud-pagination[data-v-51b1f76a] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-51b1f76a] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-51b1f76a] .crud-title[data-v-51b1f76a] {\n    margin: 0; }\n  .crud-header[data-v-51b1f76a] .crud-search[data-v-51b1f76a] {\n    max-width: 15rem; }\n    .crud-header[data-v-51b1f76a] .crud-search[data-v-51b1f76a] .btn[data-v-51b1f76a] {\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-51b1f76a] .crud-search[data-v-51b1f76a] .btn[data-v-51b1f76a].open[data-v-51b1f76a] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-51b1f76a] .table-options[data-v-51b1f76a] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-51b1f76a] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-51b1f76a] {\n    table-layout: auto; }\n    .table[data-v-51b1f76a] tbody[data-v-51b1f76a] td[data-v-51b1f76a] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-51b1f76a] tbody[data-v-51b1f76a] td[data-v-51b1f76a]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-51b1f76a] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-51b1f76a] {\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-51b1f76a] {\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-51b1f76a] {\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-51b1f76a] {\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, {});var _sfc_main = {
   name: "VueLaravelCrud",
   components: {
@@ -20798,6 +20889,7 @@ n(css, {});var _sfc_main = {
       bulkDelete: this.bulkDelete,
       showImport: this.showImport,
       showExport: this.showExport,
+      fileImport: this.fileImport,
       markDirty: this.markDirty,
       // Data from mixins
       crudUuid: this.crudUuid,
@@ -21213,7 +21305,7 @@ var _sfc_render = function render() {
   }), _c('CrudPagination'), _c('CrudModals')], 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, "51b1f76a", null, null);
 var component$1 = __component__.exports;// Import vue component
 
 // Default export is installable instance of component.

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.0",
+    "version": "2.0.1",
+    "type": "module",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",
@@ -16,7 +17,7 @@
         "serve": "vue-cli-service serve dev/serve.js",
         "demo": "concurrently \"npm run demo:api\" \"npm run demo:app\"",
         "demo:api": "node dev/api/mockServer.js",
-        "demo:app": "vue-cli-service serve dev/demo/DemoApp.vue",
+        "demo:app": "vue-cli-service serve dev/demo/main.js",
         "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
         "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
         "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
@@ -24,6 +25,7 @@
     },
     "dependencies": {
         "axios": "^1.3.5",
+        "bootstrap": "^4.6.2",
         "bootstrap-vue": "^2.21.2",
         "moment": "^2.29.1",
         "sass-loader": "^14.1.1",

package/src/components/CrudCards.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-else-if="displayMode == displayModes.MODE_CARDS">
+  <div v-if="displayMode == displayModes.MODE_CARDS">
     <draggable 
       v-model="items" 
       :group="draggableGroup" 
@@ -35,22 +35,25 @@
       </masonry>
     </draggable>
 
-    <p v-if="!loading && items && items.length == 0 && !infiniteScroll" class="p-3">
+    <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
       {{ messageEmptyResults }}
     </p>
   </div>
 </template>
 
 <script>
+import Vue from 'vue';
 import draggable from "vuedraggable";
 import VueMasonry from 'vue-masonry-css';
 import ItemCard from '../ItemCard.vue';
 
+// Registrar el componente masonry usando el Plugin
+Vue.use(VueMasonry);
+
 export default {
   name: 'CrudCards',
   components: {
     draggable,
-    VueMasonry,
     ItemCard
   },
   inject: [

package/src/components/CrudCustom.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-else-if="displayMode == displayModes.MODE_CUSTOM">
+  <div v-if="displayMode == displayModes.MODE_CUSTOM">
     <div :class="listContainerClass">
-      <p v-if="!loading && items && items.length == 0 && !infiniteScroll" class="p-3">
+      <p v-if="!loading && itemsList && itemsList.length == 0 && !infiniteScroll" class="p-3">
         {{ messageEmptyResults }}
       </p>
       <div :class="listItemClass" v-for="(item, index) in itemsList" v-bind:key="index">

package/src/components/CrudHeader.vue

@@ -2,7 +2,7 @@
   <div class="crud-header" v-if="showHeader">
     <h4 class="crud-title" v-if="showTitle">{{ title }}</h4>
     
-    <b-sidebar v-model="filterSidebarOpen" title="Filtrar" right shadow>
+    <b-sidebar :visible="sidebarVisible" @hidden="closeSidebar" title="Filtrar" right shadow>
       <CrudFilters />
     </b-sidebar>
 
@@ -89,7 +89,20 @@ export default {
     '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();
+      }
+    }
+  }
 };
 </script>
 

package/src/components/CrudKanban.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-else-if="displayMode == displayModes.MODE_KANBAN">
+  <div v-if="displayMode == displayModes.MODE_KANBAN">
     <KanbanBoard />
   </div>
 </template>