vue-laravel-crud 2.0.4 → 2.0.6

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

@@ -538,9 +538,116 @@ function _nonIterableRest() {
     exports: scriptExports,
     options: options
   }
-}var _sfc_main$f = {
+}// Componente funcional para renderizar filtros custom con callback
+var RenderCustomFilter = {
+  functional: true,
+  props: {
+    renderFunction: {
+      type: Function,
+      required: true
+    },
+    customFilter: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    internalFilterByProp: {
+      type: Function,
+      required: true
+    },
+    getFilterForColumn: {
+      type: Function,
+      required: true
+    },
+    onChangeFilter: {
+      type: Function,
+      required: true
+    }
+  },
+  render: function render(h, context) {
+    var _context$props = context.props,
+      renderFunction = _context$props.renderFunction,
+      customFilter = _context$props.customFilter,
+      filter = _context$props.filter,
+      internalFilterByProp = _context$props.internalFilterByProp,
+      getFilterForColumn = _context$props.getFilterForColumn,
+      onChangeFilter = _context$props.onChangeFilter;
+    return renderFunction(h, {
+      column: customFilter,
+      filter: filter,
+      internalFilterByProp: internalFilterByProp,
+      getFilterForColumn: getFilterForColumn,
+      onChangeFilter: onChangeFilter
+    });
+  }
+};
+var _sfc_main$f = {
   name: 'CrudFilters',
-  inject: ['columns', 'isColumnHasFilter', 'filter', 'internalFilterByProp', 'optionsLoaded', 'onChangeFilter', 'resetFilters']
+  components: {
+    RenderCustomFilter: RenderCustomFilter
+  },
+  inject: ['columns', 'customFilters', 'isColumnHasFilter', 'isCustomFilterEnabled', 'filter', 'internalFilterByProp', 'optionsLoaded', 'onChangeFilter', 'resetFilters', 'setupFilters', 'internalFilters'],
+  methods: {
+    // Método helper para obtener el filtro de forma segura, creándolo si no existe
+    getFilterForColumn: function getFilterForColumn(column) {
+      var filter = this.internalFilterByProp(column.prop);
+
+      // Si el filtro no existe, intentar inicializar los filtros
+      if (!filter) {
+        // Verificar si hay filtros inicializados
+        if (this.internalFilters && this.internalFilters.length === 0) {
+          this.setupFilters();
+          // Intentar obtener el filtro nuevamente después de inicializar
+          filter = this.internalFilterByProp(column.prop);
+        }
+      }
+
+      // Si aún no existe, crear un objeto temporal para evitar errores
+      if (!filter) {
+        return {
+          value: null
+        };
+      }
+      return filter;
+    },
+    // Método helper específico para campos de fecha (from)
+    getFilterForDateFrom: function getFilterForDateFrom(column) {
+      var filter = this.internalFilterByProp(column.prop + '_from');
+      if (!filter) {
+        if (this.internalFilters && this.internalFilters.length === 0) {
+          this.setupFilters();
+          return this.internalFilterByProp(column.prop + '_from') || {
+            value: null
+          };
+        }
+        return {
+          value: null
+        };
+      }
+      return filter;
+    },
+    // Método helper específico para campos de fecha (to)
+    getFilterForDateTo: function getFilterForDateTo(column) {
+      var filter = this.internalFilterByProp(column.prop + '_to');
+      if (!filter) {
+        if (this.internalFilters && this.internalFilters.length === 0) {
+          this.setupFilters();
+          return this.internalFilterByProp(column.prop + '_to') || {
+            value: null
+          };
+        }
+        return {
+          value: null
+        };
+      }
+      return filter;
+    }
+  }
 };
 var _sfc_render$f = function render() {
   var _vm = this,
@@ -550,15 +657,15 @@ var _sfc_render$f = function render() {
   }, [_vm._l(_vm.columns, function (column, indexc) {
     return _c('div', {
       key: indexc
-    }, [_vm.isColumnHasFilter(column) ? _c('div', [_vm.internalFilterByProp(column.prop) ? _vm._t('sidebar-filter-' + column.prop, function () {
+    }, [_vm.isColumnHasFilter(column) ? _c('div', [_vm._t('sidebar-filter-' + column.prop, function () {
       return [column.type == 'boolean' ? _c('div', {
         staticClass: "form-group"
       }, [_c('label', [_vm._v(_vm._s(column.label))]), _c('select', {
         directives: [{
           name: "model",
           rawName: "v-model",
-          value: _vm.internalFilterByProp(column.prop).value,
-          expression: "internalFilterByProp(column.prop).value"
+          value: _vm.getFilterForColumn(column).value,
+          expression: "getFilterForColumn(column).value"
         }],
         staticClass: "form-control",
         on: {
@@ -569,7 +676,7 @@ var _sfc_render$f = function render() {
               var val = "_value" in o ? o._value : o.value;
               return val;
             });
-            _vm.$set(_vm.internalFilterByProp(column.prop), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
+            _vm.$set(_vm.getFilterForColumn(column), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
           }, function ($event) {
             return _vm.onChangeFilter($event);
           }]
@@ -600,11 +707,11 @@ var _sfc_render$f = function render() {
           "locale": "es"
         },
         model: {
-          value: _vm.internalFilterByProp(column.prop + '_from').value,
+          value: _vm.getFilterForDateFrom(column).value,
           callback: function callback($$v) {
-            _vm.$set(_vm.internalFilterByProp(column.prop + '_from'), "value", $$v);
+            _vm.$set(_vm.getFilterForDateFrom(column), "value", $$v);
           },
-          expression: "internalFilterByProp(column.prop + '_from').value\n                "
+          expression: "getFilterForDateFrom(column).value\n                "
         }
       })], 1), _c('div', {
         staticClass: "col-6"
@@ -616,20 +723,90 @@ var _sfc_render$f = function render() {
           "locale": "es"
         },
         model: {
-          value: _vm.internalFilterByProp(column.prop + '_to').value,
+          value: _vm.getFilterForDateTo(column).value,
           callback: function callback($$v) {
-            _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", $$v);
+            _vm.$set(_vm.getFilterForDateTo(column), "value", $$v);
+          },
+          expression: "getFilterForDateTo(column).value\n                "
+        }
+      })], 1)])]) : column.type == 'number' || column.type == 'money' ? _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(column.label))]), _c('div', {
+        staticClass: "row"
+      }, [_c('div', {
+        staticClass: "col-6"
+      }, [_c('input', {
+        directives: [{
+          name: "model",
+          rawName: "v-model.number",
+          value: _vm.getFilterForDateFrom(column).value,
+          expression: "getFilterForDateFrom(column).value",
+          modifiers: {
+            "number": true
+          }
+        }],
+        staticClass: "form-control",
+        attrs: {
+          "type": "number",
+          "step": column.type == 'money' ? '0.01' : '1',
+          "placeholder": "Desde"
+        },
+        domProps: {
+          "value": _vm.getFilterForDateFrom(column).value
+        },
+        on: {
+          "change": function change($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function input($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateFrom(column), "value", _vm._n($event.target.value));
           },
-          expression: "internalFilterByProp(column.prop + '_to').value\n                "
+          "blur": function blur($event) {
+            return _vm.$forceUpdate();
+          }
         }
-      })], 1)])]) : column.type == 'state' ? _c('div', {
+      })]), _c('div', {
+        staticClass: "col-6"
+      }, [_c('input', {
+        directives: [{
+          name: "model",
+          rawName: "v-model.number",
+          value: _vm.getFilterForDateTo(column).value,
+          expression: "getFilterForDateTo(column).value",
+          modifiers: {
+            "number": true
+          }
+        }],
+        staticClass: "form-control",
+        attrs: {
+          "type": "number",
+          "step": column.type == 'money' ? '0.01' : '1',
+          "placeholder": "Hasta"
+        },
+        domProps: {
+          "value": _vm.getFilterForDateTo(column).value
+        },
+        on: {
+          "change": function change($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function input($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateTo(column), "value", _vm._n($event.target.value));
+          },
+          "blur": function blur($event) {
+            return _vm.$forceUpdate();
+          }
+        }
+      })])])]) : column.type == 'state' ? _c('div', {
         staticClass: "form-group"
-      }, [_c('label', [_vm._v(_vm._s(column.label))]), _vm.optionsLoaded ? _c('select', {
+      }, [_c('label', [_vm._v(_vm._s(column.label))]), column.options && Array.isArray(column.options) ? _c('select', {
         directives: [{
           name: "model",
           rawName: "v-model",
-          value: _vm.internalFilterByProp(column.prop).value,
-          expression: "internalFilterByProp(column.prop).value"
+          value: _vm.getFilterForColumn(column).value,
+          expression: "getFilterForColumn(column).value"
         }],
         staticClass: "form-control",
         on: {
@@ -640,7 +817,7 @@ var _sfc_render$f = function render() {
               var val = "_value" in o ? o._value : o.value;
               return val;
             });
-            _vm.$set(_vm.internalFilterByProp(column.prop), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
+            _vm.$set(_vm.getFilterForColumn(column), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
           }, function ($event) {
             return _vm.onChangeFilter($event);
           }]
@@ -651,19 +828,19 @@ var _sfc_render$f = function render() {
         }
       }), _vm._l(column.options, function (option) {
         return _c('option', {
-          key: option.id ? option.id : option.value,
+          key: option.value || option.id,
           domProps: {
-            "value": option.id ? option.id : option.value
+            "value": option.value
           }
-        }, [_vm._v(" " + _vm._s(option.text ? option.text : option.label ? option.label : "") + " ")]);
+        }, [_vm._v(" " + _vm._s(option.text) + " ")]);
       })], 2) : _vm._e()]) : column.type == 'array' ? _c('div', {
         staticClass: "form-group"
-      }, [_c('label', [_vm._v(_vm._s(column.label))]), _vm.optionsLoaded ? _c('select', {
+      }, [_c('label', [_vm._v(_vm._s(column.label))]), column.options && Array.isArray(column.options) ? _c('select', {
         directives: [{
           name: "model",
           rawName: "v-model",
-          value: _vm.internalFilterByProp(column.prop).value,
-          expression: "internalFilterByProp(column.prop).value"
+          value: _vm.getFilterForColumn(column).value,
+          expression: "getFilterForColumn(column).value"
         }],
         staticClass: "form-control",
         on: {
@@ -674,7 +851,7 @@ var _sfc_render$f = function render() {
               var val = "_value" in o ? o._value : o.value;
               return val;
             });
-            _vm.$set(_vm.internalFilterByProp(column.prop), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
+            _vm.$set(_vm.getFilterForColumn(column), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
           }, function ($event) {
             return _vm.onChangeFilter($event);
           }]
@@ -683,32 +860,32 @@ var _sfc_render$f = function render() {
         attrs: {
           "value": ""
         }
-      }), column.options ? _vm._l(column.options, function (option) {
+      }), _vm._l(column.options, function (option) {
         return _c('option', {
-          key: option.id ? option.id : option.value,
+          key: option.value || option.id,
           domProps: {
-            "value": option.id ? option.id : option.value
+            "value": option.value
           }
-        }, [_vm._v(" " + _vm._s(option.text ? option.text : option.label ? option.label : "") + " ")]);
-      }) : _vm._e()], 2) : _vm._e()]) : _c('div', {
+        }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+      })], 2) : _vm._e()]) : _c('div', {
         staticClass: "form-group"
       }, [_c('label', [_vm._v(_vm._s(column.label))]), _c('input', {
         directives: [{
           name: "model",
           rawName: "v-model.lazy",
-          value: _vm.internalFilterByProp(column.prop).value,
-          expression: "internalFilterByProp(column.prop).value",
+          value: _vm.getFilterForColumn(column).value,
+          expression: "getFilterForColumn(column).value",
           modifiers: {
             "lazy": true
           }
         }],
         staticClass: "form-control",
         domProps: {
-          "value": _vm.internalFilterByProp(column.prop).value
+          "value": _vm.getFilterForColumn(column).value
         },
         on: {
           "change": [function ($event) {
-            _vm.$set(_vm.internalFilterByProp(column.prop), "value", $event.target.value);
+            _vm.$set(_vm.getFilterForColumn(column), "value", $event.target.value);
           }, function ($event) {
             return _vm.onChangeFilter($event);
           }]
@@ -717,8 +894,261 @@ var _sfc_render$f = function render() {
     }, {
       "column": column,
       "filter": _vm.filter,
-      "internalFilterByProp": _vm.internalFilterByProp
-    }) : _vm._e()], 2) : _vm._e()]);
+      "internalFilterByProp": _vm.internalFilterByProp,
+      "getFilterForColumn": _vm.getFilterForColumn
+    })], 2) : _vm._e()]);
+  }), _vm._l(_vm.customFilters, function (customFilter, indexcf) {
+    return _c('div', {
+      key: 'custom-' + indexcf
+    }, [_vm.isCustomFilterEnabled(customFilter) ? _c('div', [_vm._t('sidebar-filter-custom-' + customFilter.prop, function () {
+      return [typeof customFilter.type === 'function' ? _c('RenderCustomFilter', {
+        attrs: {
+          "render-function": customFilter.type,
+          "custom-filter": customFilter,
+          "filter": _vm.filter,
+          "internal-filter-by-prop": _vm.internalFilterByProp,
+          "get-filter-for-column": _vm.getFilterForColumn,
+          "on-change-filter": _vm.onChangeFilter
+        }
+      }) : [customFilter.type == 'boolean' ? _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(customFilter.label))]), _c('select', {
+        directives: [{
+          name: "model",
+          rawName: "v-model",
+          value: _vm.getFilterForColumn(customFilter).value,
+          expression: "getFilterForColumn(customFilter).value"
+        }],
+        staticClass: "form-control",
+        on: {
+          "change": [function ($event) {
+            var $$selectedVal = Array.prototype.filter.call($event.target.options, function (o) {
+              return o.selected;
+            }).map(function (o) {
+              var val = "_value" in o ? o._value : o.value;
+              return val;
+            });
+            _vm.$set(_vm.getFilterForColumn(customFilter), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
+          }, function ($event) {
+            return _vm.onChangeFilter($event);
+          }]
+        }
+      }, [_c('option', {
+        attrs: {
+          "value": ""
+        }
+      }), _c('option', {
+        attrs: {
+          "value": "1"
+        }
+      }, [_vm._v("Sí")]), _c('option', {
+        attrs: {
+          "value": "0"
+        }
+      }, [_vm._v("No")])])]) : customFilter.type == 'date' ? _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(customFilter.label))]), _c('div', {
+        staticClass: "row"
+      }, [_c('div', {
+        staticClass: "col-6"
+      }, [_c('b-form-datepicker', {
+        attrs: {
+          "today-button": "",
+          "reset-button": "",
+          "close-button": "",
+          "locale": "es"
+        },
+        model: {
+          value: _vm.getFilterForDateFrom(customFilter).value,
+          callback: function callback($$v) {
+            _vm.$set(_vm.getFilterForDateFrom(customFilter), "value", $$v);
+          },
+          expression: "getFilterForDateFrom(customFilter).value\n                  "
+        }
+      })], 1), _c('div', {
+        staticClass: "col-6"
+      }, [_c('b-form-datepicker', {
+        attrs: {
+          "today-button": "",
+          "reset-button": "",
+          "close-button": "",
+          "locale": "es"
+        },
+        model: {
+          value: _vm.getFilterForDateTo(customFilter).value,
+          callback: function callback($$v) {
+            _vm.$set(_vm.getFilterForDateTo(customFilter), "value", $$v);
+          },
+          expression: "getFilterForDateTo(customFilter).value\n                  "
+        }
+      })], 1)])]) : customFilter.type == 'number' || customFilter.type == 'money' ? _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(customFilter.label))]), _c('div', {
+        staticClass: "row"
+      }, [_c('div', {
+        staticClass: "col-6"
+      }, [_c('input', {
+        directives: [{
+          name: "model",
+          rawName: "v-model.number",
+          value: _vm.getFilterForDateFrom(customFilter).value,
+          expression: "getFilterForDateFrom(customFilter).value",
+          modifiers: {
+            "number": true
+          }
+        }],
+        staticClass: "form-control",
+        attrs: {
+          "type": "number",
+          "step": customFilter.type == 'money' ? '0.01' : '1',
+          "placeholder": "Desde"
+        },
+        domProps: {
+          "value": _vm.getFilterForDateFrom(customFilter).value
+        },
+        on: {
+          "change": function change($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function input($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateFrom(customFilter), "value", _vm._n($event.target.value));
+          },
+          "blur": function blur($event) {
+            return _vm.$forceUpdate();
+          }
+        }
+      })]), _c('div', {
+        staticClass: "col-6"
+      }, [_c('input', {
+        directives: [{
+          name: "model",
+          rawName: "v-model.number",
+          value: _vm.getFilterForDateTo(customFilter).value,
+          expression: "getFilterForDateTo(customFilter).value",
+          modifiers: {
+            "number": true
+          }
+        }],
+        staticClass: "form-control",
+        attrs: {
+          "type": "number",
+          "step": customFilter.type == 'money' ? '0.01' : '1',
+          "placeholder": "Hasta"
+        },
+        domProps: {
+          "value": _vm.getFilterForDateTo(customFilter).value
+        },
+        on: {
+          "change": function change($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function input($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateTo(customFilter), "value", _vm._n($event.target.value));
+          },
+          "blur": function blur($event) {
+            return _vm.$forceUpdate();
+          }
+        }
+      })])])]) : customFilter.type == 'state' ? _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(customFilter.label))]), customFilter.options && Array.isArray(customFilter.options) ? _c('select', {
+        directives: [{
+          name: "model",
+          rawName: "v-model",
+          value: _vm.getFilterForColumn(customFilter).value,
+          expression: "getFilterForColumn(customFilter).value"
+        }],
+        staticClass: "form-control",
+        on: {
+          "change": [function ($event) {
+            var $$selectedVal = Array.prototype.filter.call($event.target.options, function (o) {
+              return o.selected;
+            }).map(function (o) {
+              var val = "_value" in o ? o._value : o.value;
+              return val;
+            });
+            _vm.$set(_vm.getFilterForColumn(customFilter), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
+          }, function ($event) {
+            return _vm.onChangeFilter($event);
+          }]
+        }
+      }, [_c('option', {
+        attrs: {
+          "value": ""
+        }
+      }), _vm._l(customFilter.options, function (option) {
+        return _c('option', {
+          key: option.value || option.id,
+          domProps: {
+            "value": option.value
+          }
+        }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+      })], 2) : _vm._e()]) : customFilter.type == 'array' ? _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(customFilter.label))]), customFilter.options && Array.isArray(customFilter.options) ? _c('select', {
+        directives: [{
+          name: "model",
+          rawName: "v-model",
+          value: _vm.getFilterForColumn(customFilter).value,
+          expression: "getFilterForColumn(customFilter).value"
+        }],
+        staticClass: "form-control",
+        on: {
+          "change": [function ($event) {
+            var $$selectedVal = Array.prototype.filter.call($event.target.options, function (o) {
+              return o.selected;
+            }).map(function (o) {
+              var val = "_value" in o ? o._value : o.value;
+              return val;
+            });
+            _vm.$set(_vm.getFilterForColumn(customFilter), "value", $event.target.multiple ? $$selectedVal : $$selectedVal[0]);
+          }, function ($event) {
+            return _vm.onChangeFilter($event);
+          }]
+        }
+      }, [_c('option', {
+        attrs: {
+          "value": ""
+        }
+      }), _vm._l(customFilter.options, function (option) {
+        return _c('option', {
+          key: option.value || option.id,
+          domProps: {
+            "value": option.value
+          }
+        }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+      })], 2) : _vm._e()]) : _c('div', {
+        staticClass: "form-group"
+      }, [_c('label', [_vm._v(_vm._s(customFilter.label))]), _c('input', {
+        directives: [{
+          name: "model",
+          rawName: "v-model.lazy",
+          value: _vm.getFilterForColumn(customFilter).value,
+          expression: "getFilterForColumn(customFilter).value",
+          modifiers: {
+            "lazy": true
+          }
+        }],
+        staticClass: "form-control",
+        domProps: {
+          "value": _vm.getFilterForColumn(customFilter).value
+        },
+        on: {
+          "change": [function ($event) {
+            _vm.$set(_vm.getFilterForColumn(customFilter), "value", $event.target.value);
+          }, function ($event) {
+            return _vm.onChangeFilter($event);
+          }]
+        }
+      })])]];
+    }, {
+      "column": customFilter,
+      "filter": _vm.filter,
+      "internalFilterByProp": _vm.internalFilterByProp,
+      "getFilterForColumn": _vm.getFilterForColumn
+    })], 2) : _vm._e()]);
   }), _c('div', {
     staticClass: "mt-3 d-flex justify-content-center"
   }, [_c('button', {
@@ -739,7 +1169,7 @@ 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$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";
+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$8 = "\n.crud-header[data-v-d09f8396] {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  max-height: 3rem;\n}\n.crud-title[data-v-d09f8396] {\r\n  margin: 0;\n}\n.crud-search[data-v-d09f8396] {\r\n  max-width: 15rem;\n}\n.crud-search .btn[data-v-d09f8396] {\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-d09f8396] {\r\n  border-top-right-radius: 0;\r\n  border-bottom-right-radius: 0;\n}\n.table-options[data-v-d09f8396] {\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, {});var _sfc_main$e = {
   name: 'CrudHeader',
   components: {
@@ -750,6 +1180,16 @@ n(css$8, {});var _sfc_main$e = {
     sidebarVisible: function sidebarVisible() {
       // Acceder directamente al componente padre para obtener reactividad
       return this.$parent ? this.$parent.filterSidebarOpen : this.filterSidebarOpen;
+    },
+    currentDisplayMode: function currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
     }
   },
   methods: {
@@ -859,7 +1299,7 @@ var _sfc_render$e = function render() {
           return _vm.toggleDisplayMode();
         }
       }
-    }, [_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', {
+    }, [_vm.currentDisplayMode == _vm.displayModes.MODE_TABLE ? _c('b-icon-card-list') : _vm.currentDisplayMode == _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: {
@@ -898,7 +1338,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, "ed8e5777", null, null);
+var __component__$e = /*#__PURE__*/normalizeComponent(_sfc_main$e, _sfc_render$e, _sfc_staticRenderFns$e, false, null, "d09f8396", 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) {
@@ -7049,7 +7489,7 @@ Sortable.mount(Remove, Revert);var sortable_esm=/*#__PURE__*/Object.freeze({__pr
 } (vuedraggable_umd, 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";
+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-3de96e53] {\r\n  width: 1%;\r\n  white-space: nowrap;\n}\n.sort-filter[data-v-3de96e53] {\r\n  cursor: pointer;\r\n  visibility: hidden;\r\n  display: inline-block;\n}\n.sort-filter-visible[data-v-3de96e53] {\r\n  visibility: visible;\n}\r\n";
 n(css$6, {});var _sfc_main$d = {
   name: 'TableHeader',
   inject: ['columns', 'enableFilters', 'filtersVisible', 'isColumnHasFilter', 'internalFilterByProp', 'onChangeFilter', 'toggleAll', 'toggleSortFilter', 'sortable', 'optionsLoaded', 'isAllSelected'],
@@ -7106,7 +7546,7 @@ var _sfc_render$d = function render() {
             _vm.hoveredColumn = null;
           }
         }
-      }, [_vm.enableFilters && _vm.filtersVisible && _vm.isColumnHasFilter(column) && _vm.internalFilterByProp(column.prop) ? _vm._t('filter-' + column.prop, function () {
+      }, [_vm.enableFilters && _vm.filtersVisible && _vm.isColumnHasFilter(column) && (_vm.internalFilterByProp(column.prop) || _vm.internalFilterByProp(column.prop + '_from')) ? _vm._t('filter-' + column.prop, function () {
         return [_c('div', {
           staticClass: "form-group"
         }, [column.type == 'boolean' ? _c('select', {
@@ -7178,7 +7618,75 @@ var _sfc_render$d = function render() {
             },
             expression: "internalFilterByProp(column.prop + '_to').value\n                  "
           }
-        })], 1)]) : column.type == 'state' && _vm.optionsLoaded ? _c('select', {
+        })], 1)]) : column.type == 'number' || column.type == 'money' || column.type == 'price' ? _c('div', {
+          staticClass: "row"
+        }, [_c('div', {
+          staticClass: "col-6"
+        }, [_c('input', {
+          directives: [{
+            name: "model",
+            rawName: "v-model.number",
+            value: _vm.internalFilterByProp(column.prop + '_from').value,
+            expression: "internalFilterByProp(column.prop + '_from').value",
+            modifiers: {
+              "number": true
+            }
+          }],
+          staticClass: "form-control form-control-md p-2",
+          attrs: {
+            "type": "number",
+            "step": column.type == 'money' || column.type == 'price' ? '0.01' : '1',
+            "placeholder": "Desde"
+          },
+          domProps: {
+            "value": _vm.internalFilterByProp(column.prop + '_from').value
+          },
+          on: {
+            "change": function change($event) {
+              return _vm.onChangeFilter($event);
+            },
+            "input": function input($event) {
+              if ($event.target.composing) return;
+              _vm.$set(_vm.internalFilterByProp(column.prop + '_from'), "value", _vm._n($event.target.value));
+            },
+            "blur": function blur($event) {
+              return _vm.$forceUpdate();
+            }
+          }
+        })]), _c('div', {
+          staticClass: "col-6"
+        }, [_c('input', {
+          directives: [{
+            name: "model",
+            rawName: "v-model.number",
+            value: _vm.internalFilterByProp(column.prop + '_to').value,
+            expression: "internalFilterByProp(column.prop + '_to').value",
+            modifiers: {
+              "number": true
+            }
+          }],
+          staticClass: "form-control form-control-md p-2",
+          attrs: {
+            "type": "number",
+            "step": column.type == 'money' || column.type == 'price' ? '0.01' : '1',
+            "placeholder": "Hasta"
+          },
+          domProps: {
+            "value": _vm.internalFilterByProp(column.prop + '_to').value
+          },
+          on: {
+            "change": function change($event) {
+              return _vm.onChangeFilter($event);
+            },
+            "input": function input($event) {
+              if ($event.target.composing) return;
+              _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", _vm._n($event.target.value));
+            },
+            "blur": function blur($event) {
+              return _vm.$forceUpdate();
+            }
+          }
+        })])]) : column.type == 'state' && column.options && Array.isArray(column.options) ? _c('select', {
           directives: [{
             name: "model",
             rawName: "v-model",
@@ -7210,10 +7718,10 @@ var _sfc_render$d = function render() {
           return _c('option', {
             key: indexo,
             domProps: {
-              "value": option.id
+              "value": option.value
             }
-          }, [_vm._v(" " + _vm._s(option.text ? option.text : option.label ? option.label : "") + " ")]);
-        })], 2) : column.type == 'array' && _vm.optionsLoaded ? _c('select', {
+          }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+        })], 2) : column.type == 'array' && column.options && Array.isArray(column.options) ? _c('select', {
           directives: [{
             name: "model",
             rawName: "v-model",
@@ -7245,9 +7753,9 @@ var _sfc_render$d = function render() {
           return _c('option', {
             key: indexo,
             domProps: {
-              "value": option.id
+              "value": option.value
             }
-          }, [_vm._v(" " + _vm._s(option.text ? option.text : option.label ? option.label : "") + " ")]);
+          }, [_vm._v(" " + _vm._s(option.text) + " ")]);
         })], 2) : column.type == 'checkbox' ? _c('b-form-checkbox', {
           attrs: {
             "name": "select-all",
@@ -7308,19 +7816,26 @@ var _sfc_render$d = function render() {
         on: {
           "change": _vm.toggleAll
         }
-      })], 1) : _c('span', [_vm._v(_vm._s(column.label))]), _vm.isSortableColumn(column) && _vm.shouldShowSortIcon(column) ? _c('span', {
-        staticClass: "sort-filter",
+      })], 1) : _c('span', [_vm._v(_vm._s(column.label))]), _vm.isSortableColumn(column) ? _c('span', {
+        staticClass: "sort-filter ml-1",
+        class: {
+          'sort-filter-visible': _vm.shouldShowSortIcon(column)
+        },
         on: {
           "click": function click($event) {
             return _vm.toggleSortFilter(column);
           }
         }
-      }, [_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);
+      }, [_vm.getSortIconDirection(column) === 'up' ? _c('b-icon-sort-up') : _vm.getSortIconDirection(column) === 'down' ? _c('b-icon-sort-down') : _c('b-icon-sort-up', {
+        staticStyle: {
+          "visibility": "hidden"
+        }
+      })], 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, "37559362", null, null);
+var __component__$d = /*#__PURE__*/normalizeComponent(_sfc_main$d, _sfc_render$d, _sfc_staticRenderFns$d, false, null, "3de96e53", null, null);
 var TableHeader = __component__$d.exports;function commonjsRequire(path) {
 	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }var moment$1 = {exports: {}};moment$1.exports;
@@ -13008,7 +13523,7 @@ var TableHeader = __component__$d.exports;function commonjsRequire(path) {
 } (moment$1, 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";
+var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);var css$5 = "\r\n/* Fijar ancho de la columna de acciones */\n.actions-cell[data-v-e38a3192] {\r\n  width: 1%;\r\n  white-space: nowrap;\n}\n.actions-button-group[data-v-e38a3192] {\r\n  display: inline-flex;\r\n  flex-wrap: nowrap;\n}\n.actions-dropdown[data-v-e38a3192] {\r\n  display: inline-block;\n}\r\n\r\n/* Asegurar que los botones no se expandan */\n.actions-button-group .btn[data-v-e38a3192] {\r\n  flex-shrink: 0;\n}\r\n";
 n(css$5, {});var _sfc_main$c = {
   name: 'TableCell',
   props: {
@@ -13017,11 +13532,54 @@ n(css$5, {});var _sfc_main$c = {
     index: Number,
     columnIndex: Number
   },
-  inject: ['itemValue', 'getStateValue', 'getArrayValue', 'onCheckSelect', 'showItem', 'updateItem', 'removeItem', 'optionsLoaded'],
+  inject: ['itemValue', 'getStateValue', 'getStateOptions', 'getStateBadgeVariant', 'getArrayValue', 'onCheckSelect', 'showItem', 'updateItem', 'removeItem', 'optionsLoaded'],
   data: function data() {
     return {
       moment: moment
     };
+  },
+  computed: {
+    stateOptions: function stateOptions() {
+      // Permitir usar opciones incluso si optionsLoaded es false, ya que getStateOptions normaliza internamente
+      if (this.column.type === 'state' && this.column.options && Array.isArray(this.column.options)) {
+        var itemVal = this.itemValue(this.column, this.item);
+        var options = this.column.options;
+        var result = this.getStateOptions(itemVal, options);
+        return result;
+      }
+      return [];
+    }
+  },
+  methods: {
+    formatNumber: function formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      var numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      var thousandsSep = column.thousandsSeparator || '.';
+      var decimalSep = column.decimalSeparator || ',';
+      var decimals = column.decimals !== undefined ? column.decimals : numValue % 1 === 0 ? 0 : 2;
+
+      // Formatear número con separadores
+      var parts = numValue.toFixed(decimals).split('.');
+      var integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      var decimalPart = parts[1] || '';
+      if (decimals > 0 && decimalPart) {
+        return "".concat(integerPart).concat(decimalSep).concat(decimalPart);
+      }
+      return integerPart;
+    },
+    formatMoney: function formatMoney(value, column) {
+      var formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      var symbol = column.symbol || '$';
+      return "".concat(symbol).concat(formatted);
+    }
   }
 };
 var _sfc_render$c = function render() {
@@ -13069,7 +13627,15 @@ var _sfc_render$c = function render() {
         },
         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)) + " ")])];
+    })], 1) : _vm.column.type == 'state' ? _c('span', [_vm.stateOptions.length > 0 ? _vm._l(_vm.stateOptions, function (option, optIndex) {
+      return _c('b-badge', {
+        key: optIndex,
+        staticClass: "mr-1",
+        attrs: {
+          "variant": _vm.getStateBadgeVariant(option)
+        }
+      }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+    }) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(_vm.column, _vm.item)) + " ")])], 2) : _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)) + " ")]) : _vm.column.type == 'money' || _vm.column.type == 'price' ? _c('span', [_vm._v(" " + _vm._s(_vm.formatMoney(_vm.itemValue(_vm.column, _vm.item), _vm.column)) + " ")]) : _vm.column.type == 'number' && (_vm.column.thousandsSeparator || _vm.column.decimalSeparator || _vm.column.decimals !== undefined) ? _c('span', [_vm._v(" " + _vm._s(_vm.formatNumber(_vm.itemValue(_vm.column, _vm.item), _vm.column)) + " ")]) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(_vm.column, _vm.item)) + " ")])];
   }, {
     "item": _vm.item,
     "index": _vm.index,
@@ -13088,27 +13654,35 @@ var _sfc_render$c = function render() {
       },
       proxy: true
     }], null, false, 4241371057)
-  }, [_vm._t("rowAction", function () {
-    return [_c('b-dropdown-item', {
-      on: {
-        "click": function click($event) {
-          return _vm.showItem(_vm.item.id, _vm.index);
+  }, [_vm._t("rowActions", function () {
+    return [_vm._t("rowAction", function () {
+      return [_c('b-dropdown-item', {
+        on: {
+          "click": function click($event) {
+            return _vm.showItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-eye'), _vm._v(" Ver ")], 1), _c('b-dropdown-item', {
-      on: {
-        "click": function click($event) {
-          return _vm.updateItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-eye'), _vm._v(" Ver ")], 1), _c('b-dropdown-item', {
+        on: {
+          "click": function click($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 click($event) {
-          return _vm.removeItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-pencil'), _vm._v(" Editar ")], 1), _c('b-dropdown-item', {
+        staticClass: "text-danger",
+        on: {
+          "click": function click($event) {
+            return _vm.removeItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-trash'), _vm._v(" Eliminar ")], 1)];
+      }, [_c('b-icon-trash'), _vm._v(" Eliminar ")], 1)];
+    }, {
+      "item": _vm.item,
+      "index": _vm.index,
+      "showItem": _vm.showItem,
+      "updateItem": _vm.updateItem,
+      "removeItem": _vm.removeItem
+    })];
   }, {
     "item": _vm.item,
     "index": _vm.index,
@@ -13117,35 +13691,43 @@ var _sfc_render$c = function render() {
     "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"
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.showItem(_vm.item.id, _vm.index);
+  }, [_vm._t("rowActions", function () {
+    return [_vm._t("rowAction", function () {
+      return [_c('b-button', {
+        attrs: {
+          "variant": "primary"
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.showItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-eye')], 1), _c('b-button', {
-      attrs: {
-        "variant": "secondary"
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.updateItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-eye')], 1), _c('b-button', {
+        attrs: {
+          "variant": "secondary"
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.updateItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-pencil')], 1), _c('b-button', {
-      attrs: {
-        "variant": "danger"
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.removeItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-pencil')], 1), _c('b-button', {
+        attrs: {
+          "variant": "danger"
+        },
+        on: {
+          "click": function click($event) {
+            return _vm.removeItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-trash')], 1)];
+      }, [_c('b-icon-trash')], 1)];
+    }, {
+      "item": _vm.item,
+      "index": _vm.index,
+      "showItem": _vm.showItem,
+      "updateItem": _vm.updateItem,
+      "removeItem": _vm.removeItem
+    })];
   }, {
     "item": _vm.item,
     "index": _vm.index,
@@ -13155,7 +13737,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, "3309b7c7", null, null);
+var __component__$c = /*#__PURE__*/normalizeComponent(_sfc_main$c, _sfc_render$c, _sfc_staticRenderFns$c, false, null, "e38a3192", null, null);
 var TableCell = __component__$c.exports;var _sfc_main$b = {
   name: 'TableRow',
   components: {
@@ -13196,7 +13778,15 @@ var _sfc_render$b = function render() {
           "item": _vm.item,
           "index": _vm.index,
           "columnIndex": indexc
-        }
+        },
+        scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+          return {
+            key: name,
+            fn: function fn(slotProps) {
+              return [_vm._t(name, null, null, slotProps)];
+            }
+          };
+        })], null, true)
       });
     });
   }, {
@@ -13217,12 +13807,24 @@ var TableRow = __component__$b.exports;var _sfc_main$a = {
     return {
       drag: false
     };
+  },
+  computed: {
+    currentDisplayMode: function currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
   }
 };
 var _sfc_render$a = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _vm.displayMode == _vm.displayModes.MODE_TABLE ? _c('div', {
+  return _vm.currentDisplayMode == _vm.displayModes.MODE_TABLE ? _c('div', {
     class: ['table-responsive', _vm.tableContainerClass]
   }, [_c('table', {
     class: ['table table-hover table-striped w-100', _vm.tableClass]
@@ -13258,7 +13860,15 @@ var _sfc_render$a = function render() {
         "item": item,
         "index": index,
         "grouped": _vm.grouped
-      }
+      },
+      scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+        return {
+          key: name,
+          fn: function fn(slotProps) {
+            return [_vm._t(name, null, null, slotProps)];
+          }
+        };
+      })], null, true)
     });
   }), 1)], 1), !_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
@@ -13515,10 +14125,49 @@ if (typeof window !== 'undefined' && window.Vue) {
     cardHideFooter: Boolean,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,
     removeItem: Function
+  },
+  methods: {
+    getStateOptionsForColumn: function getStateOptionsForColumn(column, item) {
+      if (column.type === 'state' && column.options) {
+        return this.getStateOptions(this.itemValue(column, item), column.options);
+      }
+      return [];
+    },
+    formatNumber: function formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      var numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      var thousandsSep = column.thousandsSeparator || '.';
+      var decimalSep = column.decimalSeparator || ',';
+      var decimals = column.decimals !== undefined ? column.decimals : numValue % 1 === 0 ? 0 : 2;
+
+      // Formatear número con separadores
+      var parts = numValue.toFixed(decimals).split('.');
+      var integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      var decimalPart = parts[1] || '';
+      if (decimals > 0 && decimalPart) {
+        return "".concat(integerPart).concat(decimalSep).concat(decimalPart);
+      }
+      return integerPart;
+    },
+    formatMoney: function formatMoney(value, column) {
+      var formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      var symbol = column.symbol || '$';
+      return "".concat(symbol).concat(formatted);
+    }
   }
 };
 var _sfc_render$9 = function render() {
@@ -13537,35 +14186,43 @@ var _sfc_render$9 = function render() {
     scopedSlots: _vm._u([{
       key: "footer",
       fn: function fn() {
-        return [_c('b-button-group', [_vm._t("rowAction", function () {
-          return [_c('b-button', {
-            attrs: {
-              "variant": "primary"
-            },
-            on: {
-              "click": function click($event) {
-                return _vm.showItem(_vm.item.id, _vm.index);
+        return [_c('b-button-group', [_vm._t("rowActions", function () {
+          return [_vm._t("rowAction", function () {
+            return [_c('b-button', {
+              attrs: {
+                "variant": "primary"
+              },
+              on: {
+                "click": function click($event) {
+                  return _vm.showItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-eye')], 1), _c('b-button', {
-            attrs: {
-              "variant": "secondary"
-            },
-            on: {
-              "click": function click($event) {
-                return _vm.updateItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-eye')], 1), _c('b-button', {
+              attrs: {
+                "variant": "secondary"
+              },
+              on: {
+                "click": function click($event) {
+                  return _vm.updateItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-pencil')], 1), _c('b-button', {
-            attrs: {
-              "variant": "danger"
-            },
-            on: {
-              "click": function click($event) {
-                return _vm.removeItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-pencil')], 1), _c('b-button', {
+              attrs: {
+                "variant": "danger"
+              },
+              on: {
+                "click": function click($event) {
+                  return _vm.removeItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-trash')], 1)];
+            }, [_c('b-icon-trash')], 1)];
+          }, {
+            "item": _vm.item,
+            "index": _vm.index,
+            "showItem": _vm.showItem,
+            "updateItem": _vm.updateItem,
+            "removeItem": _vm.removeItem
+          })];
         }, {
           "item": _vm.item,
           "index": _vm.index,
@@ -13589,7 +14246,15 @@ var _sfc_render$9 = function render() {
           attrs: {
             "variant": "danger"
           }
-        }, [_c('b-icon-x-circle')], 1)], 1) : column.type === 'date' ? _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")]) : column.type === 'state' ? _c('span', [_vm._v(" " + _vm._s(_vm.getStateValue(_vm.itemValue(column, _vm.item), column.options)) + " ")]) : column.type === 'array' ? _c('span', [_vm._v(" " + _vm._s(_vm.getArrayValue(_vm.itemValue(column, _vm.item), column.displayProp, column.options)) + " ")]) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")])];
+        }, [_c('b-icon-x-circle')], 1)], 1) : column.type === 'date' ? _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")]) : column.type === 'state' ? _c('span', [_vm.getStateOptionsForColumn(column, _vm.item).length > 0 ? _vm._l(_vm.getStateOptionsForColumn(column, _vm.item), function (option, optIndex) {
+          return _c('b-badge', {
+            key: optIndex,
+            staticClass: "mr-1",
+            attrs: {
+              "variant": _vm.getStateBadgeVariant(option)
+            }
+          }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+        }) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")])], 2) : column.type === 'array' ? _c('span', [_vm._v(" " + _vm._s(_vm.getArrayValue(_vm.itemValue(column, _vm.item), column.displayProp, column.options)) + " ")]) : column.type === 'money' || column.type === 'price' ? _c('span', [_vm._v(" " + _vm._s(_vm.formatMoney(_vm.itemValue(column, _vm.item), column)) + " ")]) : column.type === 'number' && (column.thousandsSeparator || column.decimalSeparator || column.decimals !== undefined) ? _c('span', [_vm._v(" " + _vm._s(_vm.formatNumber(_vm.itemValue(column, _vm.item), column)) + " ")]) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")])];
       }, {
         "item": _vm.item,
         "index": _vm.index,
@@ -13611,17 +14276,29 @@ var _sfc_main$8 = {
     draggable: draggable,
     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'],
+  inject: ['displayMode', 'displayModes', 'items', 'draggableGroup', 'orderable', 'draggableOptions', 'itemsList', 'colLg', 'colXl', 'colMd', 'colSm', 'colXs', 'columns', 'cardClass', 'cardHideFooter', 'itemValue', 'getStateValue', 'getStateOptions', 'getStateBadgeVariant', 'getArrayValue', 'showItem', 'updateItem', 'removeItem', 'loading', 'infiniteScroll', 'messageEmptyResults', 'onSort', 'onDraggableAdded', 'onDraggableChange'],
   data: function data() {
     return {
       drag: false
     };
+  },
+  computed: {
+    currentDisplayMode: function currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
   }
 };
 var _sfc_render$8 = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _vm.displayMode == _vm.displayModes.MODE_CARDS ? _c('div', [_c('draggable', {
+  return _vm.currentDisplayMode == _vm.displayModes.MODE_CARDS ? _c('div', [_c('draggable', {
     attrs: {
       "group": _vm.draggableGroup,
       "draggable": _vm.orderable ? '.item' : '.none',
@@ -13680,11 +14357,21 @@ var _sfc_render$8 = function render() {
           "cardHideFooter": _vm.cardHideFooter,
           "itemValue": _vm.itemValue,
           "getStateValue": _vm.getStateValue,
+          "getStateOptions": _vm.getStateOptions,
+          "getStateBadgeVariant": _vm.getStateBadgeVariant,
           "getArrayValue": _vm.getArrayValue,
           "showItem": _vm.showItem,
           "updateItem": _vm.updateItem,
           "removeItem": _vm.removeItem
-        }
+        },
+        scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+          return {
+            key: name,
+            fn: function fn(slotProps) {
+              return [_vm._t(name, null, null, slotProps)];
+            }
+          };
+        })], null, true)
       })];
     }, {
       "item": item
@@ -13695,7 +14382,7 @@ var _sfc_render$8 = function render() {
 };
 var _sfc_staticRenderFns$8 = [];
 var __component__$8 = /*#__PURE__*/normalizeComponent(_sfc_main$8, _sfc_render$8, _sfc_staticRenderFns$8, false, null, null, null, null);
-var CrudCards = __component__$8.exports;var css$4 = "\n.kanban-card[data-v-d130f95e] {\r\n  background: #ffffff;\r\n  border-radius: 4px;\r\n  padding: 0.5rem;\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\r\n  cursor: grab;\r\n  transition: box-shadow 0.2s ease;\n}\n.kanban-card[data-v-d130f95e]:hover {\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n.kanban-card[data-v-d130f95e]:active {\r\n  cursor: grabbing;\n}\n.card-crud[data-v-d130f95e] {\r\n  border: 1px solid #e1e5e9;\n}\n.card-crud .card-title[data-v-d130f95e] {\r\n  font-size: 0.9rem;\r\n  margin-bottom: 0.5rem;\n}\n.card-crud .card-text[data-v-d130f95e] {\r\n  font-size: 0.8rem;\r\n  margin-bottom: 0.25rem;\n}\r\n";
+var CrudCards = __component__$8.exports;var css$4 = "\n.kanban-card[data-v-ad923ee1] {\r\n  background: #ffffff;\r\n  border-radius: 4px;\r\n  padding: 0.5rem;\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\r\n  cursor: grab;\r\n  transition: box-shadow 0.2s ease;\n}\n.kanban-card[data-v-ad923ee1]:hover {\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);\n}\n.kanban-card[data-v-ad923ee1]:active {\r\n  cursor: grabbing;\n}\n.card-crud[data-v-ad923ee1] {\r\n  border: 1px solid #e1e5e9;\n}\n.card-crud .card-title[data-v-ad923ee1] {\r\n  font-size: 0.9rem;\r\n  margin-bottom: 0.5rem;\n}\n.card-crud .card-text[data-v-ad923ee1] {\r\n  font-size: 0.8rem;\r\n  margin-bottom: 0.25rem;\n}\r\n";
 n(css$4, {});var _sfc_main$7 = {
   name: 'KanbanCard',
   props: {
@@ -13706,10 +14393,49 @@ n(css$4, {});var _sfc_main$7 = {
     cardHideFooter: Boolean,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,
     removeItem: Function
+  },
+  methods: {
+    getStateOptionsForColumn: function getStateOptionsForColumn(column, item) {
+      if (column.type === 'state' && column.options) {
+        return this.getStateOptions(this.itemValue(column, item), column.options);
+      }
+      return [];
+    },
+    formatNumber: function formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      var numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      var thousandsSep = column.thousandsSeparator || '.';
+      var decimalSep = column.decimalSeparator || ',';
+      var decimals = column.decimals !== undefined ? column.decimals : numValue % 1 === 0 ? 0 : 2;
+
+      // Formatear número con separadores
+      var parts = numValue.toFixed(decimals).split('.');
+      var integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      var decimalPart = parts[1] || '';
+      if (decimals > 0 && decimalPart) {
+        return "".concat(integerPart).concat(decimalSep).concat(decimalPart);
+      }
+      return integerPart;
+    },
+    formatMoney: function formatMoney(value, column) {
+      var formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      var symbol = column.symbol || '$';
+      return "".concat(symbol).concat(formatted);
+    }
   }
 };
 var _sfc_render$7 = function render() {
@@ -13732,35 +14458,43 @@ var _sfc_render$7 = function render() {
           attrs: {
             "size": "sm"
           }
-        }, [_vm._t("rowAction", function () {
-          return [_c('b-button', {
-            attrs: {
-              "variant": "primary"
-            },
-            on: {
-              "click": function click($event) {
-                return _vm.showItem(_vm.item.id, _vm.index);
+        }, [_vm._t("rowActions", function () {
+          return [_vm._t("rowAction", function () {
+            return [_c('b-button', {
+              attrs: {
+                "variant": "primary"
+              },
+              on: {
+                "click": function click($event) {
+                  return _vm.showItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-eye')], 1), _c('b-button', {
-            attrs: {
-              "variant": "secondary"
-            },
-            on: {
-              "click": function click($event) {
-                return _vm.updateItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-eye')], 1), _c('b-button', {
+              attrs: {
+                "variant": "secondary"
+              },
+              on: {
+                "click": function click($event) {
+                  return _vm.updateItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-pencil')], 1), _c('b-button', {
-            attrs: {
-              "variant": "danger"
-            },
-            on: {
-              "click": function click($event) {
-                return _vm.removeItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-pencil')], 1), _c('b-button', {
+              attrs: {
+                "variant": "danger"
+              },
+              on: {
+                "click": function click($event) {
+                  return _vm.removeItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-trash')], 1)];
+            }, [_c('b-icon-trash')], 1)];
+          }, {
+            "item": _vm.item,
+            "index": _vm.index,
+            "showItem": _vm.showItem,
+            "updateItem": _vm.updateItem,
+            "removeItem": _vm.removeItem
+          })];
         }, {
           "item": _vm.item,
           "index": _vm.index,
@@ -13788,7 +14522,15 @@ var _sfc_render$7 = function render() {
           attrs: {
             "variant": "danger"
           }
-        }, [_c('b-icon-x-circle')], 1)], 1) : column.type === 'date' ? _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")]) : column.type === 'state' ? _c('span', [_vm._v(" " + _vm._s(_vm.getStateValue(_vm.itemValue(column, _vm.item), column.options)) + " ")]) : column.type === 'array' ? _c('span', [_vm._v(" " + _vm._s(_vm.getArrayValue(_vm.itemValue(column, _vm.item), column.displayProp, column.options)) + " ")]) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")])];
+        }, [_c('b-icon-x-circle')], 1)], 1) : column.type === 'date' ? _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")]) : column.type === 'state' ? _c('span', [_vm.getStateOptionsForColumn(column, _vm.item).length > 0 ? _vm._l(_vm.getStateOptionsForColumn(column, _vm.item), function (option, optIndex) {
+          return _c('b-badge', {
+            key: optIndex,
+            staticClass: "mr-1",
+            attrs: {
+              "variant": _vm.getStateBadgeVariant(option)
+            }
+          }, [_vm._v(" " + _vm._s(option.text) + " ")]);
+        }) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")])], 2) : column.type === 'array' ? _c('span', [_vm._v(" " + _vm._s(_vm.getArrayValue(_vm.itemValue(column, _vm.item), column.displayProp, column.options)) + " ")]) : column.type === 'money' || column.type === 'price' ? _c('span', [_vm._v(" " + _vm._s(_vm.formatMoney(_vm.itemValue(column, _vm.item), column)) + " ")]) : column.type === 'number' && (column.thousandsSeparator || column.decimalSeparator || column.decimals !== undefined) ? _c('span', [_vm._v(" " + _vm._s(_vm.formatNumber(_vm.itemValue(column, _vm.item), column)) + " ")]) : _c('span', [_vm._v(" " + _vm._s(_vm.itemValue(column, _vm.item)) + " ")])];
       }, {
         "item": _vm.item,
         "index": _vm.index,
@@ -13801,8 +14543,8 @@ var _sfc_render$7 = function render() {
   })], 2)], 1);
 };
 var _sfc_staticRenderFns$7 = [];
-var __component__$7 = /*#__PURE__*/normalizeComponent(_sfc_main$7, _sfc_render$7, _sfc_staticRenderFns$7, false, null, "d130f95e", null, null);
-var KanbanCard = __component__$7.exports;var css$3 = "\n.kanban-column[data-v-ceafabcb] {\r\n  background: #f4f5f7;\r\n  border-radius: 8px;\r\n  width: 300px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.kanban-column-header[data-v-ceafabcb] {\r\n  font-weight: bold;\r\n  padding: 0.5rem;\r\n  background: #dfe1e6;\r\n  border-radius: 8px 8px 0 0;\r\n  text-align: center;\n}\n.kanban-column-body[data-v-ceafabcb] {\r\n  padding: 0.5rem;\r\n  min-height: 100px;\r\n  background: #ffffff;\r\n  border-radius: 0 0 8px 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\n}\r\n";
+var __component__$7 = /*#__PURE__*/normalizeComponent(_sfc_main$7, _sfc_render$7, _sfc_staticRenderFns$7, false, null, "ad923ee1", null, null);
+var KanbanCard = __component__$7.exports;var css$3 = "\n.kanban-column[data-v-a56cf649] {\r\n  background: #f4f5f7;\r\n  border-radius: 8px;\r\n  width: 300px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.kanban-column-header[data-v-a56cf649] {\r\n  font-weight: bold;\r\n  padding: 0.5rem;\r\n  background: #dfe1e6;\r\n  border-radius: 8px 8px 0 0;\r\n  text-align: center;\n}\n.kanban-column-body[data-v-a56cf649] {\r\n  padding: 0.5rem;\r\n  min-height: 100px;\r\n  background: #ffffff;\r\n  border-radius: 0 0 8px 8px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\n}\r\n";
 n(css$3, {});var _sfc_main$6 = {
   name: 'KanbanColumn',
   components: {
@@ -13816,6 +14558,8 @@ n(css$3, {});var _sfc_main$6 = {
     columns: Array,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,
@@ -13884,11 +14628,21 @@ var _sfc_render$6 = function render() {
           "cardHideFooter": _vm.cardHideFooter,
           "itemValue": _vm.itemValue,
           "getStateValue": _vm.getStateValue,
+          "getStateOptions": _vm.getStateOptions,
+          "getStateBadgeVariant": _vm.getStateBadgeVariant,
           "getArrayValue": _vm.getArrayValue,
           "showItem": _vm.showItem,
           "updateItem": _vm.updateItem,
           "removeItem": _vm.removeItem
-        }
+        },
+        scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+          return {
+            key: name,
+            fn: function fn(slotProps) {
+              return [_vm._t(name, null, null, slotProps)];
+            }
+          };
+        })], null, true)
       })];
     }, {
       "item": item
@@ -13896,14 +14650,14 @@ var _sfc_render$6 = function render() {
   }), 0)], 1);
 };
 var _sfc_staticRenderFns$6 = [];
-var __component__$6 = /*#__PURE__*/normalizeComponent(_sfc_main$6, _sfc_render$6, _sfc_staticRenderFns$6, false, null, "ceafabcb", null, null);
-var KanbanColumn = __component__$6.exports;var css$2 = "\n.kanban-board[data-v-9f567a94] {\r\n  display: flex;\r\n  gap: 1rem;\r\n  overflow-x: auto;\r\n  padding: 1rem;\n}\n.kanban-column[data-v-9f567a94] {\r\n  background: #f4f5f7;\r\n  border-radius: 8px;\r\n  width: 300px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  min-width: 300px;\n}\r\n";
+var __component__$6 = /*#__PURE__*/normalizeComponent(_sfc_main$6, _sfc_render$6, _sfc_staticRenderFns$6, false, null, "a56cf649", null, null);
+var KanbanColumn = __component__$6.exports;var css$2 = "\n.kanban-board[data-v-516ff294] {\r\n  display: flex;\r\n  gap: 1rem;\r\n  overflow-x: auto;\r\n  padding: 1rem;\n}\n.kanban-column[data-v-516ff294] {\r\n  background: #f4f5f7;\r\n  border-radius: 8px;\r\n  width: 300px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n  min-width: 300px;\n}\r\n";
 n(css$2, {});var _sfc_main$5 = {
   name: 'KanbanBoard',
   components: {
     KanbanColumn: KanbanColumn
   },
-  inject: ['items', 'groupedAttribute', 'columns', 'itemValue', 'getStateValue', 'getArrayValue', 'showItem', 'updateItem', 'removeItem', 'cardClass', 'cardHideFooter', 'onDraggableChange']
+  inject: ['items', 'groupedAttribute', 'columns', 'itemValue', 'getStateValue', 'getStateOptions', 'getStateBadgeVariant', 'getArrayValue', 'showItem', 'updateItem', 'removeItem', 'cardClass', 'cardHideFooter', 'onDraggableChange']
 };
 var _sfc_render$5 = function render() {
   var _vm = this,
@@ -13922,6 +14676,8 @@ var _sfc_render$5 = function render() {
         "columns": _vm.columns,
         "itemValue": _vm.itemValue,
         "getStateValue": _vm.getStateValue,
+        "getStateOptions": _vm.getStateOptions,
+        "getStateBadgeVariant": _vm.getStateBadgeVariant,
         "getArrayValue": _vm.getArrayValue,
         "showItem": _vm.showItem,
         "updateItem": _vm.updateItem,
@@ -13931,34 +14687,75 @@ var _sfc_render$5 = function render() {
       },
       on: {
         "draggableChange": _vm.onDraggableChange
-      }
+      },
+      scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+        return {
+          key: name,
+          fn: function fn(slotProps) {
+            return [_vm._t(name, null, null, slotProps)];
+          }
+        };
+      })], null, true)
     })], 1);
   }), 0);
 };
 var _sfc_staticRenderFns$5 = [];
-var __component__$5 = /*#__PURE__*/normalizeComponent(_sfc_main$5, _sfc_render$5, _sfc_staticRenderFns$5, false, null, "9f567a94", null, null);
+var __component__$5 = /*#__PURE__*/normalizeComponent(_sfc_main$5, _sfc_render$5, _sfc_staticRenderFns$5, false, null, "516ff294", null, null);
 var KanbanBoard = __component__$5.exports;var _sfc_main$4 = {
   name: 'CrudKanban',
   components: {
     KanbanBoard: KanbanBoard
   },
-  inject: ['displayMode', 'displayModes']
+  inject: ['displayMode', 'displayModes'],
+  computed: {
+    currentDisplayMode: function currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
+  }
 };
 var _sfc_render$4 = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _vm.displayMode == _vm.displayModes.MODE_KANBAN ? _c('div', [_c('KanbanBoard')], 1) : _vm._e();
+  return _vm.currentDisplayMode == _vm.displayModes.MODE_KANBAN ? _c('div', [_c('KanbanBoard', {
+    scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+      return {
+        key: name,
+        fn: function fn(slotProps) {
+          return [_vm._t(name, null, null, slotProps)];
+        }
+      };
+    })], null, true)
+  })], 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);
 var CrudKanban = __component__$4.exports;var _sfc_main$3 = {
   name: 'CrudCustom',
-  inject: ['displayMode', 'displayModes', 'listContainerClass', 'listItemClass', 'loading', 'items', 'infiniteScroll', 'messageEmptyResults', 'itemsList']
+  inject: ['displayMode', 'displayModes', 'listContainerClass', 'listItemClass', 'loading', 'items', 'infiniteScroll', 'messageEmptyResults', 'itemsList'],
+  computed: {
+    currentDisplayMode: function currentDisplayMode() {
+      if (!this.displayMode) return 1;
+      if (this.displayMode.value !== undefined) {
+        return this.displayMode.value;
+      }
+      if (typeof this.displayMode === 'function') {
+        return this.displayMode();
+      }
+      return this.displayMode;
+    }
+  }
 };
 var _sfc_render$3 = function render() {
   var _vm = this,
     _c = _vm._self._c;
-  return _vm.displayMode == _vm.displayModes.MODE_CUSTOM ? _c('div', [_c('div', {
+  return _vm.currentDisplayMode == _vm.displayModes.MODE_CUSTOM ? _c('div', [_c('div', {
     class: _vm.listContainerClass
   }, [!_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
@@ -13975,7 +14772,28 @@ var _sfc_staticRenderFns$3 = [];
 var __component__$3 = /*#__PURE__*/normalizeComponent(_sfc_main$3, _sfc_render$3, _sfc_staticRenderFns$3, false, null, null, null, null);
 var CrudCustom = __component__$3.exports;var _sfc_main$2 = {
   name: 'CrudModals',
-  inject: ['modelName', 'title', 'loading', 'validate', 'item', 'messageSave', 'showImport', 'showExport', 'fileImport', 'selectedItems', 'exportFormat', 'saveItem', 'importItems', 'exportItems']
+  inject: ['modelName', 'title', 'loading', 'validate', 'item', 'getItem', 'messageSave', 'showImport', 'showExport', 'fileImport', 'selectedItems', 'exportFormat', 'saveItem', 'importItems', 'exportItems'],
+  computed: {
+    // Computed property para asegurar reactividad del item inyectado
+    reactiveItem: function reactiveItem() {
+      // Si hay una función getItem, usarla para obtener el item actual
+      if (this.getItem && typeof this.getItem === 'function') {
+        return this.getItem();
+      }
+      // Si no, usar el item inyectado directamente
+      return this.item;
+    }
+  },
+  watch: {
+    // Watch el item inyectado para forzar actualización
+    item: {
+      handler: function handler() {
+        this.$forceUpdate();
+      },
+      deep: true,
+      immediate: true
+    }
+  }
 };
 var _sfc_render$2 = function render() {
   var _vm = this,
@@ -13997,7 +14815,7 @@ var _sfc_render$2 = function render() {
     on: {
       "submit": _vm.saveItem
     }
-  }, [_vm.item ? _vm._t("form", function () {
+  }, [_vm.reactiveItem ? [_vm._t("form", function () {
     return [_c('b-form-group', {
       attrs: {
         "label": "Nombre:",
@@ -14010,16 +14828,16 @@ var _sfc_render$2 = function render() {
         "placeholder": "Nombre"
       },
       model: {
-        value: _vm.item.title,
+        value: _vm.reactiveItem.title,
         callback: function callback($$v) {
-          _vm.$set(_vm.item, "title", $$v);
+          _vm.$set(_vm.reactiveItem, "title", $$v);
         },
-        expression: "item.title"
+        expression: "reactiveItem.title"
       }
     })], 1)];
   }, {
-    "item": _vm.item
-  }) : _vm._e(), _c('b-button', {
+    "item": _vm.reactiveItem
+  })] : _vm._e(), _c('b-button', {
     attrs: {
       "block": "",
       "type": "submit",
@@ -14030,8 +14848,8 @@ var _sfc_render$2 = function render() {
     attrs: {
       "small": ""
     }
-  }) : _vm._e(), _vm._v(_vm._s(_vm.messageSave) + " ")], 1)], 2)] : _vm._e(), !_vm.validate ? [_vm.item ? _vm._t("form", function () {
-    return _vm._l(_vm.item, function (value, key) {
+  }) : _vm._e(), _vm._v(_vm._s(_vm.messageSave) + " ")], 1)], 2)] : _vm._e(), !_vm.validate ? [_vm.reactiveItem ? [_vm._t("form", function () {
+    return _vm._l(_vm.reactiveItem, function (value, key) {
       return _c('b-form-group', {
         key: key,
         attrs: {
@@ -14043,17 +14861,17 @@ var _sfc_render$2 = function render() {
           "required": ""
         },
         model: {
-          value: _vm.item[key],
+          value: _vm.reactiveItem[key],
           callback: function callback($$v) {
-            _vm.$set(_vm.item, key, $$v);
+            _vm.$set(_vm.reactiveItem, key, $$v);
           },
-          expression: "item[key]"
+          expression: "reactiveItem[key]"
         }
       })], 1);
     });
   }, {
-    "item": _vm.item
-  }) : _vm._e(), _c('b-button', {
+    "item": _vm.reactiveItem
+  })] : _vm._e(), _c('b-button', {
     attrs: {
       "block": "",
       "type": "submit",
@@ -14077,8 +14895,8 @@ var _sfc_render$2 = function render() {
       "title": _vm.title,
       "no-close-on-backdrop": ""
     }
-  }, [_vm.item ? _vm._t("show", function () {
-    return [_c('b-list-group', _vm._l(_vm.item, function (value, key) {
+  }, [_vm.reactiveItem ? [_vm._t("show", function () {
+    return [_c('b-list-group', _vm._l(_vm.reactiveItem, function (value, key) {
       return _c('b-list-group-item', {
         key: key
       }, [_c('b-row', {
@@ -14095,8 +14913,8 @@ var _sfc_render$2 = function render() {
       }, [_vm._v(_vm._s(JSON.stringify(value)))])], 1)], 1);
     }), 1)];
   }, {
-    "item": _vm.item
-  }) : _vm._e()], 2), _vm.showImport ? _c('b-modal', {
+    "item": _vm.reactiveItem
+  })] : _vm._e()], 2), _vm.showImport ? _c('b-modal', {
     ref: "modal-import",
     attrs: {
       "title": "Importar",
@@ -14351,6 +15169,12 @@ var CrudPagination = __component__$1.exports;var crudData = {
       filterSidebarOpen: false,
       internalFilters: [],
       forceRecomputeCounter: 0,
+      _displayMode: 1,
+      // Propiedad local para displayMode (se inicializará desde la prop en created())
+      displayModeReactive: Vue__default["default"].observable({
+        value: 1
+      }),
+      // Objeto reactivo para provide/inject
       displayModes: {
         MODE_TABLE: 1,
         MODE_CARDS: 2,
@@ -14381,7 +15205,7 @@ var CrudPagination = __component__$1.exports;var crudData = {
       if (this.groupedSplit) {
         return true;
       }
-      return this.displayMode == this.displayModes.MODE_KANBAN;
+      return this._displayMode == this.displayModes.MODE_KANBAN;
     },
     itemsList: function itemsList() {
       var items = this.ajax ? this.items : this.items.slice(this.paginationIndexStart, this.paginationIndexEnd);
@@ -14423,7 +15247,15 @@ var CrudPagination = __component__$1.exports;var crudData = {
       this.internalFilters.forEach(function (f) {
         if (f.value) {
           var colname = f.column.replace("_sort", "").replace("_from", "").replace("_to", "");
-          filter.push([colname, f.op, f.value]);
+          var op = f.op;
+
+          // Aplicar operadores automáticamente para filtros de rango
+          if (f.column.endsWith("_from")) {
+            op = ">=";
+          } else if (f.column.endsWith("_to")) {
+            op = "<=";
+          }
+          filter.push([colname, op, f.value]);
         }
       });
       return filter;
@@ -14466,8 +15298,24 @@ var CrudPagination = __component__$1.exports;var crudData = {
         this.fetchItems();
       }
     },
-    displayMode: function displayMode() {
+    // Watcher para la prop displayMode (sincroniza cuando cambia desde el componente padre)
+    displayMode: function displayMode(newVal) {
+      // Usar $props para acceder a la prop y evitar conflictos con data properties
+      var propValue = this.$props && this.$props.displayMode !== undefined ? this.$props.displayMode : newVal;
+      if (propValue !== undefined && this._displayMode !== propValue) {
+        this._displayMode = propValue;
+        if (this.displayModeReactive) {
+          this.displayModeReactive.value = propValue;
+        }
+      }
+    },
+    // Watcher para la propiedad local _displayMode (para forzar re-renderizado)
+    _displayMode: function _displayMode(newVal) {
       var _this2 = this;
+      // Actualizar el objeto reactivo si existe
+      if (this.displayModeReactive) {
+        this.displayModeReactive.value = newVal;
+      }
       // Forzar re-renderizado cuando cambia el modo de visualización
       this.$nextTick(function () {
         _this2.forceRecomputeCounter++;
@@ -14535,6 +15383,13 @@ var CrudPagination = __component__$1.exports;var crudData = {
       deep: true
     }
   },
+  created: function created() {
+    // Inicializar _displayMode desde la prop displayMode en created() para que esté disponible en provide()
+    if (this.$props && this.$props.displayMode !== undefined) {
+      this._displayMode = this.$props.displayMode;
+      this.displayModeReactive.value = this._displayMode;
+    }
+  },
   mounted: function mounted() {
     var now = Math.floor(Date.now() / 1000);
     this.crudUuid = '' + now;
@@ -19810,7 +20665,7 @@ axios.default = axios;var crudApi = {
                 dataKey: 'data',
                 params: {
                   page: page,
-                  limit: _this.pagination.perPage,
+                  limit: _this.pagination.per_page,
                   filters: JSON.stringify(_this.finalFilters)
                 }
               });
@@ -19855,7 +20710,7 @@ axios.default = axios;var crudApi = {
       return axios.get(this.apiUrl + "/" + this.modelName, {
         params: {
           page: page,
-          limit: this.limit,
+          limit: this.pagination.per_page,
           filters: JSON.stringify(this.finalFilters)
         }
       }).then(function (response) {
@@ -20541,15 +21396,15 @@ axios.default = axios;var crudApi = {
       var _this = this;
       this.columns.forEach(function (column) {
         if (_this.isColumnHasFilter(column)) {
-          if (column.type == "date") {
+          if (column.type == "date" || column.type == "number" || column.type == "money") {
             _this.internalFilters.push({
               column: column.prop + "_from",
-              op: column.filterOp ? column.filterOp : "=",
+              op: ">=",
               value: null
             });
             _this.internalFilters.push({
               column: column.prop + "_to",
-              op: column.filterOp ? column.filterOp : "=",
+              op: "<=",
               value: null
             });
           } else {
@@ -20568,6 +21423,46 @@ axios.default = axios;var crudApi = {
           });
         }
       });
+
+      // Procesar filtros custom
+      if (this.customFilters && Array.isArray(this.customFilters)) {
+        this.customFilters.forEach(function (customFilter) {
+          if (_this.isCustomFilterEnabled(customFilter)) {
+            // Si el tipo es función (callback), no procesamos automáticamente
+            // El callback se encargará del renderizado y gestión del filtro
+            if (typeof customFilter.type === 'string') {
+              if (customFilter.type == "date" || customFilter.type == "number" || customFilter.type == "money") {
+                _this.internalFilters.push({
+                  column: customFilter.prop + "_from",
+                  op: ">=",
+                  value: null
+                });
+                _this.internalFilters.push({
+                  column: customFilter.prop + "_to",
+                  op: "<=",
+                  value: null
+                });
+              } else {
+                _this.internalFilters.push({
+                  column: customFilter.prop,
+                  op: customFilter.filterOp ? customFilter.filterOp : "=",
+                  value: null
+                });
+              }
+            } else if (typeof customFilter.type === 'function') {
+              // Para callbacks, solo creamos el filtro interno si no existe
+              // El callback se encargará del renderizado
+              if (!_this.internalFilterByProp(customFilter.prop)) {
+                _this.internalFilters.push({
+                  column: customFilter.prop,
+                  op: customFilter.filterOp ? customFilter.filterOp : "=",
+                  value: null
+                });
+              }
+            }
+          }
+        });
+      }
     },
     toggleSortFilter: function toggleSortFilter(column) {
       var _this2 = this;
@@ -20587,6 +21482,11 @@ axios.default = axios;var crudApi = {
     toggleFilters: function toggleFilters() {
       this.filtersVisible = !this.filtersVisible;
       this.filterSidebarOpen = this.filtersVisible;
+
+      // Si se está abriendo el sidebar y los filtros no están inicializados, inicializarlos
+      if (this.filtersVisible && this.internalFilters.length === 0) {
+        this.setupFilters();
+      }
     },
     resetFilters: function resetFilters() {
       var _this3 = this;
@@ -20603,6 +21503,9 @@ axios.default = axios;var crudApi = {
     isColumnHasFilter: function isColumnHasFilter(column) {
       return column && !column.hideFilter && column.type != "actions";
     },
+    isCustomFilterEnabled: function isCustomFilterEnabled(customFilter) {
+      return customFilter && customFilter.prop && !customFilter.hideFilter && customFilter.type != "actions";
+    },
     setFilter: function setFilter(column, value) {
       var _this4 = this;
       var filter = this.filter.find(function (f) {
@@ -20632,17 +21535,42 @@ axios.default = axios;var crudApi = {
   }
 };var crudValidation = {
   methods: {
+    normalizeOptions: function normalizeOptions(options) {
+      if (!Array.isArray(options)) {
+        return options;
+      }
+      return options.map(function (option) {
+        var normalized = _objectSpread2({}, option);
+
+        // Asegurar que siempre tenga id, value y text
+        if (normalized.id === undefined && normalized.value !== undefined) {
+          normalized.id = normalized.value;
+        } else if (normalized.value === undefined && normalized.id !== undefined) {
+          normalized.value = normalized.id;
+        } else if (normalized.id === undefined && normalized.value === undefined) {
+          // Si no tiene ni id ni value, usar text o label como valor por defecto
+          normalized.id = normalized.text || normalized.label || "";
+          normalized.value = normalized.id;
+        }
+
+        // Asegurar que siempre tenga text
+        if (normalized.text === undefined) {
+          normalized.text = normalized.label !== undefined ? normalized.label : "";
+        }
+        return normalized;
+      });
+    },
     loadOptions: function loadOptions() {
       var _this = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var i, column, options;
+        var i, column, options, normalizedOptions;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               i = 0;
             case 1:
               if (!(i < _this.columns.length)) {
-                _context.next = 12;
+                _context.next = 13;
                 break;
               }
               column = _this.columns[i];
@@ -20659,12 +21587,20 @@ axios.default = axios;var crudApi = {
               }));
               console.debug("Options promise", _this.columns);
             case 9:
+              // Normalizar opciones para columnas tipo state y array
+              if ((column.type === 'state' || column.type === 'array') && Array.isArray(column.options)) {
+                normalizedOptions = _this.normalizeOptions(column.options);
+                _this.$set(_this.columns, i, _objectSpread2(_objectSpread2({}, column), {}, {
+                  options: normalizedOptions
+                }));
+              }
+            case 10:
               i++;
               _context.next = 1;
               break;
-            case 12:
-              _this.optionsLoaded = true;
             case 13:
+              _this.optionsLoaded = true;
+            case 14:
             case "end":
               return _context.stop();
           }
@@ -20693,22 +21629,70 @@ axios.default = axios;var crudApi = {
       });
       return values.join(",");
     },
-    getStateValue: function getStateValue(value, options) {
-      if (!options) {
-        console.debug("State Column Not hast options returning value", value, options);
-        return value;
+    getStateOptions: function getStateOptions(value, options) {
+      if (!options || !Array.isArray(options) || options.length === 0) {
+        return [];
+      }
+
+      // Asegurar que las opciones estén normalizadas (por si loadOptions no se ha ejecutado aún)
+      var normalizedOptions = this.normalizeOptions(options);
+
+      // Si el valor es null o undefined, no hay coincidencias
+      if (value === null || value === undefined) {
+        return [];
       }
-      var ops = options.filter(function (option) {
+
+      // Normalizar el valor para comparación (convertir a string)
+      var normalizedValue = String(value).trim();
+      return normalizedOptions.filter(function (option) {
+        // Después de normalizar, las opciones siempre tienen id, value y text
+        // Comparar tanto con id como con value para asegurar compatibilidad
+        var optionId = option.id !== undefined && option.id !== null ? String(option.id).trim() : null;
+        var optionValue = option.value !== undefined && option.value !== null ? String(option.value).trim() : null;
         if (Array.isArray(value)) {
-          return value.includes(option.id);
+          // Para arrays, verificar si alguno de los valores coincide
+          return value.some(function (val) {
+            if (val === null || val === undefined) return false;
+            var normalizedVal = String(val).trim();
+            return optionId && normalizedVal === optionId || optionValue && normalizedVal === optionValue;
+          });
         } else {
-          return option.id == value;
+          // Comparación estricta para valores únicos - comparar con ambos id y value
+          return optionId && optionId === normalizedValue || optionValue && optionValue === normalizedValue;
         }
       });
-      ops = ops.map(function (option) {
-        return option.text ? option.text : option.label ? option.label : "";
-      });
-      return ops.join(", ");
+    },
+    getStateValue: function getStateValue(value, options) {
+      if (!options) {
+        console.debug("State Column Not hast options returning value", value, options);
+        return value;
+      }
+      var ops = this.getStateOptions(value, options);
+      return ops.map(function (option) {
+        // Usar text directamente (ya normalizado)
+        return option.text !== undefined ? option.text : "";
+      }).join(", ");
+    },
+    getStateBadgeVariant: function getStateBadgeVariant(option) {
+      // Si la opción tiene una propiedad variant, usarla
+      if (option.variant) {
+        return option.variant;
+      }
+      // Si no, intentar inferir del id/value común
+      var idValue = String(option.id || option.value || '').toLowerCase();
+      if (idValue.includes('active') || idValue.includes('activo')) {
+        return 'success';
+      } else if (idValue.includes('inactive') || idValue.includes('inactivo')) {
+        return 'secondary';
+      } else if (idValue.includes('pending') || idValue.includes('pendiente')) {
+        return 'warning';
+      } else if (idValue.includes('done') || idValue.includes('completado')) {
+        return 'success';
+      } else if (idValue.includes('error') || idValue.includes('error')) {
+        return 'danger';
+      }
+      // Variante por defecto
+      return 'primary';
     }
   }
 };var crudHelpers = {
@@ -20870,46 +21854,146 @@ axios.default = axios;var crudApi = {
       this.$emit("selectItems", this.selectedItems);
     },
     showItem: function showItem(id) {
+      var _this5 = this;
       var itemIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var item;
       if (itemIndex == null) {
-        var item = this.items.find(function (it) {
+        item = this.items.find(function (it) {
           return it.id == id;
         });
-        this.item = item;
       } else {
-        this.item = this.items[itemIndex];
+        item = this.items[itemIndex];
+      }
+      if (!item) {
+        console.warn('Item not found for showItem');
+        return;
+      }
+
+      // Hacer copia profunda del objeto para asegurar reactividad
+      var itemCopy = JSON.parse(JSON.stringify(item));
+      if (this.useVuexORM && !this.vuexLocalforage) {
+        var modelInstance = new this.model(itemCopy);
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(modelInstance).forEach(function (key) {
+          _this5.$set(_this5.item, key, modelInstance[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(function (key) {
+          if (!(key in modelInstance)) {
+            _this5.$delete(_this5.item, key);
+          }
+        });
+      } else {
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(itemCopy).forEach(function (key) {
+          _this5.$set(_this5.item, key, itemCopy[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(function (key) {
+          if (!(key in itemCopy)) {
+            _this5.$delete(_this5.item, key);
+          }
+        });
       }
+
+      // Forzar actualización para asegurar que los cambios se reflejen
+      this.$forceUpdate();
       this.onSelect();
-      this.$bvModal.show("modal-show-item-" + this.modelName);
+      this.$nextTick(function () {
+        _this5.$forceUpdate();
+        _this5.$bvModal.show("modal-show-item-" + _this5.modelName);
+      });
     },
     createItem: function createItem() {
-      if (this.useVuexORM) {
-        if (this.vuexLocalforage) {
-          this.item = JSON.parse(JSON.stringify(this.itemDefault));
-        } else {
-          this.item = new this.model(JSON.parse(JSON.stringify(this.itemDefault)));
-        }
+      var _this6 = this;
+      // Hacer copia profunda del objeto para asegurar reactividad
+      var itemCopy = JSON.parse(JSON.stringify(this.itemDefault));
+      if (this.useVuexORM && !this.vuexLocalforage) {
+        var modelInstance = new this.model(itemCopy);
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(modelInstance).forEach(function (key) {
+          _this6.$set(_this6.item, key, modelInstance[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(function (key) {
+          if (!(key in modelInstance)) {
+            _this6.$delete(_this6.item, key);
+          }
+        });
       } else {
-        this.item = JSON.parse(JSON.stringify(this.itemDefault));
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(itemCopy).forEach(function (key) {
+          _this6.$set(_this6.item, key, itemCopy[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(function (key) {
+          if (!(key in itemCopy)) {
+            _this6.$delete(_this6.item, key);
+          }
+        });
       }
+
+      // Forzar actualización para asegurar que los cambios se reflejen
+      this.$forceUpdate();
       this.onSelect();
-      this.$bvModal.show("modal-form-item-" + this.modelName);
+      this.$nextTick(function () {
+        _this6.$forceUpdate();
+        _this6.$bvModal.show("modal-form-item-" + _this6.modelName);
+      });
     },
     updateItem: function updateItem(id) {
+      var _this7 = this;
       var itemIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var item;
       if (itemIndex == null) {
-        var item = this.items.find(function (it) {
+        item = this.items.find(function (it) {
           return it.id == id;
         });
-        this.item = item;
       } else {
-        this.item = this.items[itemIndex];
+        item = this.items[itemIndex];
+      }
+      if (!item) {
+        console.warn('Item not found for updateItem');
+        return;
+      }
+
+      // Hacer copia profunda del objeto para asegurar reactividad
+      var itemCopy = JSON.parse(JSON.stringify(item));
+      if (this.useVuexORM && !this.vuexLocalforage) {
+        var modelInstance = new this.model(itemCopy);
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(modelInstance).forEach(function (key) {
+          _this7.$set(_this7.item, key, modelInstance[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(function (key) {
+          if (!(key in modelInstance)) {
+            _this7.$delete(_this7.item, key);
+          }
+        });
+      } else {
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(itemCopy).forEach(function (key) {
+          _this7.$set(_this7.item, key, itemCopy[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(function (key) {
+          if (!(key in itemCopy)) {
+            _this7.$delete(_this7.item, key);
+          }
+        });
       }
+
+      // Forzar actualización para asegurar que los cambios se reflejen
+      this.$forceUpdate();
       this.onSelect();
-      this.$bvModal.show("modal-form-item-" + this.modelName);
+      this.$nextTick(function () {
+        _this7.$forceUpdate();
+        _this7.$bvModal.show("modal-form-item-" + _this7.modelName);
+      });
     },
     removeItem: function removeItem(id, index) {
-      var _this5 = this;
+      var _this8 = this;
       this.$bvModal.msgBoxConfirm(this.messageRemoveConfirm, {
         size: "sm",
         buttonSize: "sm",
@@ -20919,15 +22003,15 @@ axios.default = axios;var crudApi = {
         centered: true
       }).then(function (value) {
         if (value) {
-          _this5.deleteItem(id, index);
+          _this8.deleteItem(id, index);
         }
       }).catch(function (error) {
-        _this5.toastError(error);
-        _this5.loading = false;
+        _this8.toastError(error);
+        _this8.loading = false;
       });
     },
     confirmBulkDelete: function confirmBulkDelete() {
-      var _this6 = this;
+      var _this9 = this;
       this.$bvModal.msgBoxConfirm(this.messageRemoveBulkConfirm, {
         size: "sm",
         buttonSize: "sm",
@@ -20937,15 +22021,26 @@ axios.default = axios;var crudApi = {
         centered: true
       }).then(function (value) {
         if (value) {
-          _this6.deleteItemBulk();
+          _this9.deleteItemBulk();
         }
       }).catch(function (error) {
-        _this6.toastError(error);
-        _this6.loading = false;
+        _this9.toastError(error);
+        _this9.loading = false;
       });
     },
     toggleDisplayMode: function toggleDisplayMode() {
-      if (this.displayMode == this.displayModes.MODE_TABLE) this.displayMode = this.displayModes.MODE_CARDS;else if (this.displayMode == this.displayModes.MODE_CARDS) this.displayMode = this.displayModes.MODE_TABLE;
+      // Mutar la propiedad local _displayMode y el objeto reactivo
+      if (this._displayMode == this.displayModes.MODE_TABLE) {
+        this._displayMode = this.displayModes.MODE_CARDS;
+        if (this.displayModeReactive) {
+          this.displayModeReactive.value = this.displayModes.MODE_CARDS;
+        }
+      } else if (this._displayMode == this.displayModes.MODE_CARDS) {
+        this._displayMode = this.displayModes.MODE_TABLE;
+        if (this.displayModeReactive) {
+          this.displayModeReactive.value = this.displayModes.MODE_TABLE;
+        }
+      }
     },
     showExportModal: function showExportModal() {
       this.$refs["modal-export"].show();
@@ -21049,7 +22144,7 @@ axios.default = axios;var crudApi = {
       link.click();
     }
   }
-};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";
+};var css = "tr td[data-v-9327e2bb]:last-child,\ntr td[data-v-9327e2bb]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\ntbody tr.selected[data-v-9327e2bb] {\n  background-color: #e3f2fd !important; }\n  tbody tr.selected[data-v-9327e2bb] td[data-v-9327e2bb] {\n    background-color: transparent !important; }\n  tbody tr.selected[data-v-9327e2bb][data-v-9327e2bb]:hover {\n    background-color: #bbdefb !important; }\n    tbody tr.selected[data-v-9327e2bb][data-v-9327e2bb]:hover td[data-v-9327e2bb] {\n      background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-9327e2bb]:nth-of-type(odd) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-9327e2bb]:nth-of-type(odd) td[data-v-9327e2bb] {\n    background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-9327e2bb]:nth-of-type(even) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-9327e2bb]:nth-of-type(even) td[data-v-9327e2bb] {\n    background-color: transparent !important; }\n\n.crud-pagination[data-v-9327e2bb] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-9327e2bb] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-9327e2bb] .crud-title[data-v-9327e2bb] {\n    margin: 0; }\n  .crud-header[data-v-9327e2bb] .crud-search[data-v-9327e2bb] {\n    max-width: 15rem; }\n    .crud-header[data-v-9327e2bb] .crud-search[data-v-9327e2bb] .btn[data-v-9327e2bb] {\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-9327e2bb] .crud-search[data-v-9327e2bb] .btn[data-v-9327e2bb].open[data-v-9327e2bb] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-9327e2bb] .table-options[data-v-9327e2bb] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-9327e2bb] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-9327e2bb] {\n    table-layout: auto; }\n    .table[data-v-9327e2bb] tbody[data-v-9327e2bb] td[data-v-9327e2bb] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-9327e2bb] tbody[data-v-9327e2bb] td[data-v-9327e2bb]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-9327e2bb] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-9327e2bb] {\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-9327e2bb] {\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-9327e2bb] {\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-9327e2bb] {\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: {
@@ -21063,6 +22158,7 @@ n(css, {});var _sfc_main = {
   },
   mixins: [crudData, crudApi, crudFilters, crudValidation, crudHelpers],
   provide: function provide() {
+    var _this = this;
     return {
       // Props
       modelName: this.modelName,
@@ -21075,6 +22171,7 @@ n(css, {});var _sfc_main = {
       vuexLocalforage: this.vuexLocalforage,
       columns: this.columns,
       filter: this.filter,
+      customFilters: this.customFilters,
       enableFilters: this.enableFilters,
       infiniteScroll: this.infiniteScroll,
       sortable: this.sortable,
@@ -21095,7 +22192,7 @@ n(css, {});var _sfc_main = {
       showHeader: this.showHeader,
       showTitle: this.showTitle,
       limit: this.limit,
-      displayMode: this.displayMode,
+      displayMode: this.displayModeReactive,
       displayModeToggler: this.displayModeToggler,
       colXs: this.colXs,
       colSm: this.colSm,
@@ -21143,6 +22240,10 @@ n(css, {});var _sfc_main = {
       moment: this.moment,
       loading: this.loading,
       firstLoad: this.firstLoad,
+      // Proporcionar item como función getter para reactividad
+      getItem: function getItem() {
+        return _this.item;
+      },
       item: this.item,
       items: this.items,
       selectedItems: this.selectedItems,
@@ -21207,12 +22308,15 @@ n(css, {});var _sfc_main = {
       toggleFilters: this.toggleFilters,
       resetFilters: this.resetFilters,
       isColumnHasFilter: this.isColumnHasFilter,
+      isCustomFilterEnabled: this.isCustomFilterEnabled,
       setFilter: this.setFilter,
       onChangeFilter: this.onChangeFilter,
       togglePrincipalSort: this.togglePrincipalSort,
       loadOptions: this.loadOptions,
       getArrayValue: this.getArrayValue,
       getStateValue: this.getStateValue,
+      getStateOptions: this.getStateOptions,
+      getStateBadgeVariant: this.getStateBadgeVariant,
       onRowHover: this.onRowHover,
       onRowClick: this.onRowClick,
       onSort: this.onSort,
@@ -21288,6 +22392,12 @@ n(css, {});var _sfc_main = {
         return [];
       }
     },
+    customFilters: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
     enableFilters: {
       type: Boolean,
       default: false
@@ -21547,7 +22657,34 @@ var _sfc_render = function render() {
     _c = _vm._self._c;
   return _c('div', {
     staticClass: "crud"
-  }, [_c('CrudHeader'), _c('CrudTable'), _c('CrudCards'), _c('CrudKanban'), _c('CrudCustom'), _c('b-overlay', {
+  }, [_c('CrudHeader'), _c('CrudTable', {
+    scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+      return {
+        key: name,
+        fn: function fn(slotProps) {
+          return [_vm._t(name, null, null, slotProps)];
+        }
+      };
+    })], null, true)
+  }), _c('CrudCards', {
+    scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+      return {
+        key: name,
+        fn: function fn(slotProps) {
+          return [_vm._t(name, null, null, slotProps)];
+        }
+      };
+    })], null, true)
+  }), _c('CrudKanban', {
+    scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
+      return {
+        key: name,
+        fn: function fn(slotProps) {
+          return [_vm._t(name, null, null, slotProps)];
+        }
+      };
+    })], null, true)
+  }), _c('CrudCustom'), _c('b-overlay', {
     attrs: {
       "show": _vm.loading,
       "rounded": "sm"
@@ -21564,7 +22701,7 @@ var _sfc_render = function render() {
   })], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "482920a4", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "9327e2bb", null, null);
 var component$1 = __component__.exports;// Import vue component
 
 // Default export is installable instance of component.