vue-laravel-crud 1.8.0 → 1.8.2

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

@@ -12724,7 +12724,7 @@ var _sfc_render$1 = function render() {
 };
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /*#__PURE__*/normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
-var ItemCard = __component__$1.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 = "tr td[data-v-ce8ebda1]:last-child,\ntr td[data-v-ce8ebda1]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-ce8ebda1] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-ce8ebda1] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-ce8ebda1] .crud-title[data-v-ce8ebda1] {\n    margin: 0; }\n  .crud-header[data-v-ce8ebda1] .crud-search[data-v-ce8ebda1] {\n    max-width: 15rem; }\n    .crud-header[data-v-ce8ebda1] .crud-search[data-v-ce8ebda1] .btn[data-v-ce8ebda1] {\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-ce8ebda1] .crud-search[data-v-ce8ebda1] .btn[data-v-ce8ebda1].open[data-v-ce8ebda1] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-ce8ebda1] .table-options[data-v-ce8ebda1] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-ce8ebda1] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-ce8ebda1] {\n    table-layout: auto; }\n    .table[data-v-ce8ebda1] tbody[data-v-ce8ebda1] td[data-v-ce8ebda1] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-ce8ebda1] tbody[data-v-ce8ebda1] td[data-v-ce8ebda1]::-webkit-scrollbar {\n      display: none; } }\n";
+var ItemCard = __component__$1.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 = "tr td[data-v-5b1677f8]:last-child,\ntr td[data-v-5b1677f8]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-5b1677f8] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-5b1677f8] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-5b1677f8] .crud-title[data-v-5b1677f8] {\n    margin: 0; }\n  .crud-header[data-v-5b1677f8] .crud-search[data-v-5b1677f8] {\n    max-width: 15rem; }\n    .crud-header[data-v-5b1677f8] .crud-search[data-v-5b1677f8] .btn[data-v-5b1677f8] {\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-5b1677f8] .crud-search[data-v-5b1677f8] .btn[data-v-5b1677f8].open[data-v-5b1677f8] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-5b1677f8] .table-options[data-v-5b1677f8] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-5b1677f8] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-5b1677f8] {\n    table-layout: auto; }\n    .table[data-v-5b1677f8] tbody[data-v-5b1677f8] td[data-v-5b1677f8] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-5b1677f8] tbody[data-v-5b1677f8] td[data-v-5b1677f8]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-5b1677f8] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-5b1677f8] {\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-5b1677f8] {\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-5b1677f8] {\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-5b1677f8] {\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: {
@@ -13181,7 +13181,7 @@ n(css, {});var _sfc_main = {
       return this.paginationIndexStart + this.pagination.per_page;
     },
     finalFilters: function finalFilters() {
-      return [].concat(_toConsumableArray$1(this.filters), _toConsumableArray$1(this.filter), _toConsumableArray$1(this.internalFilter), _toConsumableArray$1(this.sortFilter));
+      return [].concat(_toConsumableArray$1(this.filters), _toConsumableArray$1(this.filter), _toConsumableArray$1(this.internalFilter), _toConsumableArray$1(this.sortFilter), _toConsumableArray$1(this.groupFilter));
     },
     sortFilter: function sortFilter() {
       if (this.showPrincipalSortBtn) {
@@ -13194,6 +13194,13 @@ n(css, {});var _sfc_main = {
         return [];
       }
     },
+    groupFilter: function groupFilter() {
+      if (this.grouped && this.groupedAttribute) {
+        return [['', 'GROUPBY', this.groupedAttribute]];
+      } else {
+        return [];
+      }
+    },
     internalFilter: function internalFilter() {
       var filter = [];
       this.forceRecomputeCounter;
@@ -13600,7 +13607,8 @@ n(css, {});var _sfc_main = {
         _this12.makePagination(response.data);
         var items = response.data.data;
         if (_this12.grouped) {
-          _this12.groupItems(items, concat);
+          _this12.items = items;
+          // this.groupItems(items, concat);
         } else {
           if (concat) {
             _this12.items = _this12.items.concat(items);
@@ -14719,7 +14727,7 @@ var _sfc_render = function render() {
           return _vm.toggleDisplayMode();
         }
       }
-    }, [_vm.displayMode == _vm.displayModes.MODE_TABLE ? _c('b-icon-card-list') : _vm._e(), _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('b-icon-table') : _vm._e()], 1) : _vm._e(), _vm.showSearch ? _c('div', {
+    }, [_vm.displayMode == _vm.displayModes.MODE_TABLE ? _c('b-icon-card-list') : _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('b-icon-table') : _vm._e()], 1) : _vm._e(), _vm.showSearch ? _c('div', {
       staticClass: "crud-search m-0"
     }, [_c('b-input-group', [_c('b-input-group-prepend', [_c('b-button', {
       class: {
@@ -15101,7 +15109,7 @@ var _sfc_render = function render() {
     })], 2);
   }), 0)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
-  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]) : _vm._e(), _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('div', [_c('draggable', {
+  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]) : _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('div', [_c('draggable', {
     attrs: {
       "group": _vm.draggableGroup,
       "draggable": _vm.orderable ? '.item' : '.none',
@@ -15174,33 +15182,55 @@ var _sfc_render = function render() {
     })], 2);
   }), 0)], 1), !_vm.loading && _vm.items && _vm.items.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
-  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()], 1) : _vm._e(), _vm.displayMode == _vm.displayModes.MODE_KANBAN ? _c('div', _vm._l(_vm.itemsList, function (item, index) {
+  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()], 1) : _vm.displayMode == _vm.displayModes.MODE_KANBAN ? _c('div', [_vm._v(" " + _vm._s(JSON.stringify(_vm.items)) + " "), _vm._l(_vm.items, function (column, colIndex) {
     return _c('div', {
-      key: index,
-      staticClass: "item"
-    }, [_vm._t("card", function () {
-      return _vm._l(_vm.itemsList, function (item, index) {
-        return _c('ItemCard', {
-          key: index,
-          attrs: {
-            "item": item,
-            "columns": _vm.columns,
-            "index": index,
-            "cardClass": _vm.cardClass,
-            "cardHideFooter": _vm.cardHideFooter,
-            "itemValue": _vm.itemValue,
-            "getStateValue": _vm.getStateValue,
-            "getArrayValue": _vm.getArrayValue,
-            "showItem": _vm.showItem,
-            "updateItem": _vm.updateItem,
-            "removeItem": _vm.removeItem
-          }
+      key: colIndex,
+      staticClass: "kanban-column"
+    }, [_c('div', {
+      staticClass: "kanban-column-header"
+    }, [_vm._v(" " + _vm._s(colIndex) + " ")]), _vm._v(" " + _vm._s(JSON.stringify(column)) + " "), _c('draggable', {
+      staticClass: "kanban-column-body",
+      attrs: {
+        "group": "kanban"
+      },
+      on: {
+        "end": _vm.onDragEnd
+      },
+      model: {
+        value: column.items,
+        callback: function callback($$v) {
+          _vm.$set(column, "items", $$v);
+        },
+        expression: "column.items"
+      }
+    }, _vm._l(_vm.itemsList, function (item, index) {
+      return _c('div', {
+        key: index,
+        staticClass: "item"
+      }, [_vm._t("card", function () {
+        return _vm._l(_vm.itemsList, function (item, index) {
+          return _c('ItemCard', {
+            key: index,
+            attrs: {
+              "item": item,
+              "columns": _vm.columns,
+              "index": index,
+              "cardClass": _vm.cardClass,
+              "cardHideFooter": _vm.cardHideFooter,
+              "itemValue": _vm.itemValue,
+              "getStateValue": _vm.getStateValue,
+              "getArrayValue": _vm.getArrayValue,
+              "showItem": _vm.showItem,
+              "updateItem": _vm.updateItem,
+              "removeItem": _vm.removeItem
+            }
+          });
         });
-      });
-    }, {
-      "item": item
-    })], 2);
-  }), 0) : _vm._e(), _vm.displayMode == _vm.displayModes.MODE_CUSTOM ? _c('div', [_c('div', {
+      }, {
+        "item": item
+      })], 2);
+    }), 0)], 1);
+  })], 2) : _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', {
     staticClass: "p-3"
@@ -15481,7 +15511,7 @@ var _sfc_render = function render() {
   }) : _vm._e()], 2) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "ce8ebda1", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "5b1677f8", null, null);
 var component$1 = __component__.exports;// Import vue component
 
 // Default export is installable instance of component.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "1.8.0",
+    "version": "1.8.2",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",

package/src/vue-laravel-crud.vue

@@ -18,7 +18,7 @@ export default /*#__PURE__*/ {
   data() {
     return {
 
-      crudUuid:"",
+      crudUuid: "",
       moment: moment,
       loading: false,
       firstLoad: false,
@@ -387,7 +387,7 @@ export default /*#__PURE__*/ {
 
   mounted() {
     const now = Math.floor(Date.now() / 1000);
-    this.crudUuid = ''+now;
+    this.crudUuid = '' + now;
     this.isMobile = window.matchMedia("(max-width: 1024px)").matches;
 
     // Agregar un oyente de eventos para actualizar isMobile cuando cambia el tamaño de la pantalla
@@ -411,12 +411,12 @@ export default /*#__PURE__*/ {
         if (fieldName === primaryKey) {
           continue; // Salta este campo
         }
-        
-        console.debug("debug field",field);
+
+        console.debug("debug field", field);
 
         if (field.type === 'relation') {
           // Si es una relación, inicializa como un objeto vacío.
-          console.debug("Relation",field);
+          console.debug("Relation", field);
 
           if (this.vuexInitRelations == true || (Array.isArray(this.vuexInitRelations) && this.vuexInitRelations.includes(fieldName))) {
             itemDefault[fieldName] = {};
@@ -425,35 +425,35 @@ export default /*#__PURE__*/ {
         } else {
 
 
-            console.debug("Field",field);
+          console.debug("Field", field);
 
 
-            // Si no tiene un valor por defecto definido, inicializa según su tipo
-            /*switch (field.constructor.name) {
-              case 'StringField':
-                itemDefault[fieldName] = '';
-                break;
-              case 'NumberField':
-                itemDefault[fieldName] = 0;
-                break;
-              // Agrega más casos según los tipos de campos que uses en tu modelo
-              default:
+          // Si no tiene un valor por defecto definido, inicializa según su tipo
+          /*switch (field.constructor.name) {
+            case 'StringField':
+              itemDefault[fieldName] = '';
+              break;
+            case 'NumberField':
+              itemDefault[fieldName] = 0;
+              break;
+            // Agrega más casos según los tipos de campos que uses en tu modelo
+            default:
 
-                console.debug("Undefined constructor ",fieldName,field.constructor.name);
-                // Tipo de campo no reconocido, puedes manejarlo de acuerdo a tus necesidades
-                itemDefault[fieldName] = null;
-            }*/
+              console.debug("Undefined constructor ",fieldName,field.constructor.name);
+              // Tipo de campo no reconocido, puedes manejarlo de acuerdo a tus necesidades
+              itemDefault[fieldName] = null;
+          }*/
 
 
-            if (typeof field.value === 'function') {
-              itemDefault[fieldName] = field.value();
-            }else if(field.value){
-              itemDefault[fieldName] = field.value;
-            }else{
-              itemDefault[fieldName] = null;
-            }
+          if (typeof field.value === 'function') {
+            itemDefault[fieldName] = field.value();
+          } else if (field.value) {
+            itemDefault[fieldName] = field.value;
+          } else {
+            itemDefault[fieldName] = null;
+          }
+
 
-        
         }
       }
 
@@ -506,7 +506,8 @@ export default /*#__PURE__*/ {
         ...this.filters,
         ...this.filter,
         ...this.internalFilter,
-        ...this.sortFilter
+        ...this.sortFilter,
+        ...this.groupFilter
       ];
     },
     sortFilter() {
@@ -521,6 +522,15 @@ export default /*#__PURE__*/ {
       }
 
     },
+
+    groupFilter() {
+      if (this.grouped && this.groupedAttribute) {
+        return [['', 'GROUPBY', this.groupedAttribute]];
+      } else {
+        return [];
+      }
+    },
+
     internalFilter() {
       let filter = [];
       this.forceRecomputeCounter;
@@ -761,23 +771,23 @@ export default /*#__PURE__*/ {
     },
 
     updateData(data, allowCreate = true) {
-        // Convertir this.items a un mapa para acceso rápido por id
-        const itemsMap = new Map(this.items.map(item => [item.id, item]));
-
-        // Recorrer cada elemento de data
-        data.forEach(newItem => {
-            if (itemsMap.has(newItem.id)) {
-                // Actualizar el item existente
-                const existingItem = itemsMap.get(newItem.id);
-                Object.assign(existingItem, newItem);
-            } else if (allowCreate) {
-                // Agregar el nuevo item si allowCreate es true
-                this.items.push(newItem);
-            }
-        });
+      // Convertir this.items a un mapa para acceso rápido por id
+      const itemsMap = new Map(this.items.map(item => [item.id, item]));
+
+      // Recorrer cada elemento de data
+      data.forEach(newItem => {
+        if (itemsMap.has(newItem.id)) {
+          // Actualizar el item existente
+          const existingItem = itemsMap.get(newItem.id);
+          Object.assign(existingItem, newItem);
+        } else if (allowCreate) {
+          // Agregar el nuevo item si allowCreate es true
+          this.items.push(newItem);
+        }
+      });
 
-        // Convertir el mapa de vuelta a un array, si es necesario
-        this.items = Array.from(itemsMap.values());
+      // Convertir el mapa de vuelta a un array, si es necesario
+      this.items = Array.from(itemsMap.values());
     },
     showItem(id, itemIndex = null) {
       if (itemIndex == null) {
@@ -818,7 +828,7 @@ export default /*#__PURE__*/ {
 
     refresh() {
       this.$emit("refresh", {});
-     
+
       if (this.infiniteScroll) {
         this.pagination.current_page = 1;
         this.infiniteScrollKey++;
@@ -882,7 +892,7 @@ export default /*#__PURE__*/ {
       this.loading = false;
       this.firstLoad = true;
     },
-    fetchItemsLocal(){
+    fetchItemsLocal() {
       if (this.grouped) {
         this.groupItems(this.models);
       } else {
@@ -894,8 +904,8 @@ export default /*#__PURE__*/ {
 
     },
     fetchItems(page = 1, concat = false) {
-   
-      
+
+
       this.$emit("beforeFetch", {});
       if (this.useVuexORM) {
         return this.fetchItemsVuex(page, concat);
@@ -903,7 +913,7 @@ export default /*#__PURE__*/ {
 
 
       if (!this.ajax) {
-        return this.fetchItemsLocal(page,concat);
+        return this.fetchItemsLocal(page, concat);
       }
 
       this.loading = true;
@@ -919,7 +929,8 @@ export default /*#__PURE__*/ {
           this.makePagination(response.data);
           let items = response.data.data;
           if (this.grouped) {
-            this.groupItems(items, concat);
+            this.items = items;
+           // this.groupItems(items, concat);
           } else {
             if (concat) {
               this.items = this.items.concat(items);
@@ -1058,8 +1069,8 @@ export default /*#__PURE__*/ {
         await this.model.$delete(ids);
 
       } else {
-        let result = await this.model.api().delete(this.apiUrl + "/" + this.modelName+'/bulk-destroy' , {
-          params: { ids: ids},
+        let result = await this.model.api().delete(this.apiUrl + "/" + this.modelName + '/bulk-destroy', {
+          params: { ids: ids },
           delete: ids
         });
 
@@ -1072,7 +1083,7 @@ export default /*#__PURE__*/ {
           return;
         }
       }
-      
+
       this.toastSuccess("Elemento eliminados.");
     },
     deleteItem(id, index) {
@@ -1132,7 +1143,7 @@ export default /*#__PURE__*/ {
         await this.model.$delete(id);
 
       } else {
-        let result = await this.model.api().delete(this.apiUrl + "/" + this.modelName+'/' + id, {
+        let result = await this.model.api().delete(this.apiUrl + "/" + this.modelName + '/' + id, {
           delete: 1
         });
 
@@ -1179,7 +1190,7 @@ export default /*#__PURE__*/ {
       }
     },
 
-    showExportModal(){
+    showExportModal() {
       this.$refs["modal-export"].show();
     },
 
@@ -1216,7 +1227,7 @@ export default /*#__PURE__*/ {
     },
 
 
-    showImportModal(){
+    showImportModal() {
       this.$refs["modal-import"].show();
     },
     importItems() {
@@ -1295,19 +1306,19 @@ export default /*#__PURE__*/ {
 
       if (this.vuexLocalforage) {
 
-        if(this.markDirty){
+        if (this.markDirty) {
           this.item.dirty = true;
         }
 
         if (this.item.id) {
-         
-          result = await this.model.$create({ data:this.item});
-          console.debug("save item 4", this.item,result);
+
+          result = await this.model.$create({ data: this.item });
+          console.debug("save item 4", this.item, result);
           create = false;
         } else {
 
-          result = await this.model.$create({ data:this.item});
-          console.debug("save item 5", this.item,result);
+          result = await this.model.$create({ data: this.item });
+          console.debug("save item 5", this.item, result);
           create = true;
         }
 
@@ -1316,7 +1327,7 @@ export default /*#__PURE__*/ {
         let jsondata = this.item.$toJson();
         console.debug("save item 2", this.item, jsondata);
         if (this.item.id) {
-          result = await this.model.api().put(this.apiUrl + "/" + this.modelName+'/' + this.item.id, jsondata);
+          result = await this.model.api().put(this.apiUrl + "/" + this.modelName + '/' + this.item.id, jsondata);
           create = false;
         } else {
           result = await this.model.api().post(this.apiUrl + "/" + this.modelName, jsondata);
@@ -1751,7 +1762,7 @@ export default /*#__PURE__*/ {
             <b-button variant="info" @click="refresh()"><b-icon-arrow-clockwise></b-icon-arrow-clockwise></b-button>
             <b-button variant="info" @click="toggleDisplayMode()" :disabled="loading" v-if="displayModeToggler">
               <b-icon-card-list v-if="displayMode == displayModes.MODE_TABLE"></b-icon-card-list>
-              <b-icon-table v-if="displayMode == displayModes.MODE_CARDS"></b-icon-table>
+              <b-icon-table v-else-if="displayMode == displayModes.MODE_CARDS"></b-icon-table>
             </b-button>
 
             <div class="crud-search m-0" v-if="showSearch">
@@ -1878,7 +1889,6 @@ export default /*#__PURE__*/ {
               <span>{{ item.crudgrouplabel }}</span>
             </th>
 
-
             <slot name="row" v-bind:item="item" v-else>
               <td v-for="(column, indexc) in columns" :key="indexc" :scope="column.prop == 'id' ? 'row' : ''">
                 <slot :name="'cell-' + column.prop" v-bind:item="item" v-bind:index="index" v-bind:itemindex="index"
@@ -1952,7 +1962,7 @@ export default /*#__PURE__*/ {
       </p>
     </div>
 
-    <div v-if="displayMode == displayModes.MODE_CARDS">
+    <div v-else-if="displayMode == displayModes.MODE_CARDS">
       <draggable v-model="items" :group="draggableGroup" :draggable="orderable ? '.item' : '.none'" @start="drag = true"
         @end="drag = false" @sort="onSort()" @add="onDraggableAdded($event)" @change="onDraggableChange($event)"
         :options="draggableOptions">
@@ -1960,23 +1970,12 @@ export default /*#__PURE__*/ {
           :cols="{ default: 12 / colLg, 1400: 12 / colXl, 1200: 12 / colLg, 1000: 12 / colMd, 700: 12 / colSm, 400: 12 / colXs }"
           :gutter="{ default: '15px', 700: '15px' }">
           <div v-for="(item, index) in itemsList" v-bind:key="index" class="item">
-                <slot name="card" v-bind:item="item">
-                  <ItemCard
-                    v-for="(item, index) in itemsList"
-                    :key="index"
-                    :item="item"
-                    :columns="columns"
-                    :index="index"
-                    :cardClass="cardClass"
-                    :cardHideFooter="cardHideFooter"
-                    :itemValue="itemValue"
-                    :getStateValue="getStateValue"
-                    :getArrayValue="getArrayValue"
-                    :showItem="showItem"
-                    :updateItem="updateItem"
-                    :removeItem="removeItem"
-                  />
-              </slot>
+            <slot name="card" v-bind:item="item">
+              <ItemCard v-for="(item, index) in itemsList" :key="index" :item="item" :columns="columns" :index="index"
+                :cardClass="cardClass" :cardHideFooter="cardHideFooter" :itemValue="itemValue"
+                :getStateValue="getStateValue" :getArrayValue="getArrayValue" :showItem="showItem"
+                :updateItem="updateItem" :removeItem="removeItem" />
+            </slot>
           </div>
         </masonry>
       </draggable>
@@ -1987,29 +1986,35 @@ export default /*#__PURE__*/ {
 
     </div>
 
-    <div v-if="displayMode == displayModes.MODE_KANBAN">
-      <div v-for="(item, index) in itemsList" v-bind:key="index" class="item">
-          <slot name="card" v-bind:item="item">
-              <ItemCard
-                v-for="(item, index) in itemsList"
-                :key="index"
-                :item="item"
-                :columns="columns"
-                :index="index"
-                :cardClass="cardClass"
-                :cardHideFooter="cardHideFooter"
-                :itemValue="itemValue"
-                :getStateValue="getStateValue"
-                :getArrayValue="getArrayValue"
-                :showItem="showItem"
-                :updateItem="updateItem"
-                :removeItem="removeItem"
-              />
-          </slot>
+    <div v-else-if="displayMode == displayModes.MODE_KANBAN">
+      {{ JSON.stringify(items) }}
+
+      <div v-for="(column, colIndex) in items" :key="colIndex" class="kanban-column">
+        <div class="kanban-column-header">
+          {{ colIndex }}
+        </div>
+
+        {{ JSON.stringify(column) }}
+
+
+        <draggable v-model="column.items" group="kanban" class="kanban-column-body" @end="onDragEnd">
+
+          <div v-for="(item, index) in itemsList" v-bind:key="index" class="item">
+            <slot name="card" v-bind:item="item">
+              <ItemCard v-for="(item, index) in itemsList" :key="index" :item="item" :columns="columns" :index="index"
+                :cardClass="cardClass" :cardHideFooter="cardHideFooter" :itemValue="itemValue"
+                :getStateValue="getStateValue" :getArrayValue="getArrayValue" :showItem="showItem"
+                :updateItem="updateItem" :removeItem="removeItem" />
+            </slot>
+          </div>
+
+        </draggable>
+
       </div>
+
     </div>
 
-    <div v-if="displayMode == displayModes.MODE_CUSTOM">
+    <div v-else-if="displayMode == displayModes.MODE_CUSTOM">
       <div :class="listContainerClass">
         <p v-if="!loading && items && items.length == 0 && !infiniteScroll" class="p-3">
           {{ messageEmptyResults }}
@@ -2193,4 +2198,47 @@ tr td:first-child {
     }
   }
 }
+
+
+.kanban-board {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  padding: 1rem;
+}
+
+.kanban-column {
+  background: #f4f5f7;
+  border-radius: 8px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.kanban-column-header {
+  font-weight: bold;
+  padding: 0.5rem;
+  background: #dfe1e6;
+  border-radius: 8px 8px 0 0;
+  text-align: center;
+}
+
+.kanban-column-body {
+  padding: 0.5rem;
+  min-height: 100px;
+  background: #ffffff;
+  border-radius: 0 0 8px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.kanban-card {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 1rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+}
 </style>