vue-laravel-crud 2.0.5 → 2.0.7

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

@@ -93,9 +93,115 @@ function normalizeComponent (
   }
 }
 
+// Componente funcional para renderizar filtros custom con callback
+const RenderCustomFilter = {
+  functional: true,
+  props: {
+    renderFunction: {
+      type: Function,
+      required: true
+    },
+    customFilter: {
+      type: Object,
+      required: true
+    },
+    filter: {
+      type: Array,
+      default: () => []
+    },
+    internalFilterByProp: {
+      type: Function,
+      required: true
+    },
+    getFilterForColumn: {
+      type: Function,
+      required: true
+    },
+    onChangeFilter: {
+      type: Function,
+      required: true
+    }
+  },
+  render(h, context) {
+    const {
+      renderFunction,
+      customFilter,
+      filter,
+      internalFilterByProp,
+      getFilterForColumn,
+      onChangeFilter
+    } = context.props;
+    return renderFunction(h, {
+      column: customFilter,
+      filter: filter,
+      internalFilterByProp: internalFilterByProp,
+      getFilterForColumn: getFilterForColumn,
+      onChangeFilter: onChangeFilter
+    });
+  }
+};
 const _sfc_main$f = {
   name: 'CrudFilters',
-  inject: ['columns', 'isColumnHasFilter', 'filter', 'internalFilterByProp', 'optionsLoaded', 'onChangeFilter', 'resetFilters']
+  components: {
+    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(column) {
+      let 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(column) {
+      const 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(column) {
+      const 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,
@@ -105,15 +211,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: {
@@ -124,7 +230,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);
           }]
@@ -155,11 +261,11 @@ var _sfc_render$f = function render() {
           "locale": "es"
         },
         model: {
-          value: _vm.internalFilterByProp(column.prop + '_from').value,
+          value: _vm.getFilterForDateFrom(column).value,
           callback: function ($$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"
@@ -171,20 +277,90 @@ var _sfc_render$f = function render() {
           "locale": "es"
         },
         model: {
-          value: _vm.internalFilterByProp(column.prop + '_to').value,
+          value: _vm.getFilterForDateTo(column).value,
           callback: function ($$v) {
-            _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", $$v);
+            _vm.$set(_vm.getFilterForDateTo(column), "value", $$v);
           },
-          expression: "internalFilterByProp(column.prop + '_to').value\n                "
+          expression: "getFilterForDateTo(column).value\n                "
         }
-      })], 1)])]) : column.type == 'state' ? _c('div', {
+      })], 1)])]) : column.type == 'number' || column.type == 'money' ? _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))]), _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 ($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function ($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateFrom(column), "value", _vm._n($event.target.value));
+          },
+          "blur": function ($event) {
+            return _vm.$forceUpdate();
+          }
+        }
+      })]), _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 ($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function ($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateTo(column), "value", _vm._n($event.target.value));
+          },
+          "blur": function ($event) {
+            return _vm.$forceUpdate();
+          }
+        }
+      })])])]) : column.type == 'state' ? _c('div', {
+        staticClass: "form-group"
+      }, [_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: {
@@ -195,7 +371,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);
           }]
@@ -206,19 +382,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: {
@@ -229,7 +405,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);
           }]
@@ -238,32 +414,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);
           }]
@@ -272,8 +448,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 ($$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 ($$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 ($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function ($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateFrom(customFilter), "value", _vm._n($event.target.value));
+          },
+          "blur": function ($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 ($event) {
+            return _vm.onChangeFilter($event);
+          },
+          "input": function ($event) {
+            if ($event.target.composing) return;
+            _vm.$set(_vm.getFilterForDateTo(customFilter), "value", _vm._n($event.target.value));
+          },
+          "blur": function ($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', {
@@ -298,19 +727,29 @@ 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";
-n(css$8, {});
+var css$9 = "\n.crud-header[data-v-4fb65bb3] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem;\n}\n.crud-title[data-v-4fb65bb3] {\n  margin: 0;\n}\n.crud-search[data-v-4fb65bb3] {\n  max-width: 15rem;\n}\n.crud-search .btn[data-v-4fb65bb3] {\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}\n.crud-search .btn.open[data-v-4fb65bb3] {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.table-options[data-v-4fb65bb3] {\n  margin-bottom: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n";
+n(css$9, {});
 
 const _sfc_main$e = {
   name: 'CrudHeader',
   components: {
     CrudFilters
   },
-  inject: ['showHeader', 'showTitle', 'title', 'filterSidebarOpen', 'showImport', 'showExport', 'showPrincipalSortBtn', 'principalSort', 'bulkDelete', 'showCreateBtn', 'enableFilters', 'displayModeToggler', 'displayMode', 'displayModes', 'showSearch', 'displaySearch', 'search', 'searchPlaceholder', 'loading', 'messageImport', 'messageExport', 'messageNew', 'createItem', 'toggleDisplayMode', 'togglePrincipalSort', 'confirmBulkDelete', 'toggleFilters', 'refresh'],
+  inject: ['showHeader', 'showTitle', 'title', 'filterSidebarOpen', 'showImport', 'showExport', 'showPrincipalSortBtn', 'principalSort', 'bulkDelete', 'showCreateBtn', 'enableFilters', 'displayModeToggler', 'displayMode', 'displayModes', 'showSearch', 'displaySearch', 'search', 'searchPlaceholder', 'loading', 'messageImport', 'messageExport', 'messageNew', 'createItem', 'toggleDisplayMode', 'togglePrincipalSort', 'confirmBulkDelete', 'toggleFilters', 'refresh', 'showImportModal', 'showExportModal'],
   computed: {
     sidebarVisible() {
       // Acceder directamente al componente padre para obtener reactividad
       return this.$parent ? this.$parent.filterSidebarOpen : this.filterSidebarOpen;
+    },
+    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: {
@@ -420,7 +859,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: {
@@ -459,7 +898,7 @@ var _sfc_render$e = function render() {
   })], 2)], 1)], 1) : _vm._e();
 };
 var _sfc_staticRenderFns$e = [];
-var __component__$e = /*#__PURE__*/normalizeComponent(_sfc_main$e, _sfc_render$e, _sfc_staticRenderFns$e, false, null, "ed8e5777", null, null);
+var __component__$e = /*#__PURE__*/normalizeComponent(_sfc_main$e, _sfc_render$e, _sfc_staticRenderFns$e, false, null, "4fb65bb3", 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 : {};
@@ -721,7 +1160,7 @@ function toggleClass(el, name, state) {
   }
 }
 
-function css$7(el, prop, val) {
+function css$8(el, prop, val) {
   var style = el && el.style;
 
   if (style) {
@@ -750,7 +1189,7 @@ function matrix(el, selfOnly) {
     appliedTransforms = el;
   } else {
     do {
-      var transform = css$7(el, 'transform');
+      var transform = css$8(el, 'transform');
 
       if (transform && transform !== 'none') {
         appliedTransforms = transform + ' ' + appliedTransforms;
@@ -832,11 +1271,11 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS
 
     if (!IE11OrLess) {
       do {
-        if (container && container.getBoundingClientRect && (css$7(container, 'transform') !== 'none' || relativeToNonStaticParent && css$7(container, 'position') !== 'static')) {
+        if (container && container.getBoundingClientRect && (css$8(container, 'transform') !== 'none' || relativeToNonStaticParent && css$8(container, 'position') !== 'static')) {
           var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container
 
-          top -= containerRect.top + parseInt(css$7(container, 'border-top-width'));
-          left -= containerRect.left + parseInt(css$7(container, 'border-left-width'));
+          top -= containerRect.top + parseInt(css$8(container, 'border-top-width'));
+          left -= containerRect.left + parseInt(css$8(container, 'border-left-width'));
           bottom = top + elRect.height;
           right = left + elRect.width;
           break;
@@ -943,7 +1382,7 @@ function getChild(el, childNum, options) {
 function lastChild(el, selector) {
   var last = el.lastElementChild;
 
-  while (last && (last === Sortable.ghost || css$7(last, 'display') === 'none' || selector && !matches(last, selector))) {
+  while (last && (last === Sortable.ghost || css$8(last, 'display') === 'none' || selector && !matches(last, selector))) {
     last = last.previousElementSibling;
   }
 
@@ -1029,7 +1468,7 @@ function getParentAutoScrollElement(el, includeSelf) {
   do {
     // we don't need to get elem css if it isn't even overflowing in the first place (performance)
     if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {
-      var elemCSS = css$7(elem);
+      var elemCSS = css$8(elem);
 
       if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) {
         if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement();
@@ -1105,19 +1544,19 @@ function clone(el) {
 }
 
 function setRect(el, rect) {
-  css$7(el, 'position', 'absolute');
-  css$7(el, 'top', rect.top);
-  css$7(el, 'left', rect.left);
-  css$7(el, 'width', rect.width);
-  css$7(el, 'height', rect.height);
+  css$8(el, 'position', 'absolute');
+  css$8(el, 'top', rect.top);
+  css$8(el, 'left', rect.left);
+  css$8(el, 'width', rect.width);
+  css$8(el, 'height', rect.height);
 }
 
 function unsetRect(el) {
-  css$7(el, 'position', '');
-  css$7(el, 'top', '');
-  css$7(el, 'left', '');
-  css$7(el, 'width', '');
-  css$7(el, 'height', '');
+  css$8(el, 'position', '');
+  css$8(el, 'top', '');
+  css$8(el, 'left', '');
+  css$8(el, 'width', '');
+  css$8(el, 'height', '');
 }
 
 var expando = 'Sortable' + new Date().getTime();
@@ -1131,7 +1570,7 @@ function AnimationStateManager() {
       if (!this.options.animation) return;
       var children = [].slice.call(this.el.children);
       children.forEach(function (child) {
-        if (css$7(child, 'display') === 'none' || child === Sortable.ghost) return;
+        if (css$8(child, 'display') === 'none' || child === Sortable.ghost) return;
         animationStates.push({
           target: child,
           rect: getRect(child)
@@ -1238,8 +1677,8 @@ function AnimationStateManager() {
     },
     animate: function animate(target, currentRect, toRect, duration) {
       if (duration) {
-        css$7(target, 'transition', '');
-        css$7(target, 'transform', '');
+        css$8(target, 'transition', '');
+        css$8(target, 'transform', '');
         var elMatrix = matrix(this.el),
             scaleX = elMatrix && elMatrix.a,
             scaleY = elMatrix && elMatrix.d,
@@ -1247,15 +1686,15 @@ function AnimationStateManager() {
             translateY = (currentRect.top - toRect.top) / (scaleY || 1);
         target.animatingX = !!translateX;
         target.animatingY = !!translateY;
-        css$7(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
+        css$8(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
         repaint(target); // repaint
 
-        css$7(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
-        css$7(target, 'transform', 'translate3d(0,0,0)');
+        css$8(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
+        css$8(target, 'transform', 'translate3d(0,0,0)');
         typeof target.animated === 'number' && clearTimeout(target.animated);
         target.animated = setTimeout(function () {
-          css$7(target, 'transition', '');
-          css$7(target, 'transform', '');
+          css$8(target, 'transition', '');
+          css$8(target, 'transform', '');
           target.animated = false;
           target.animatingX = false;
           target.animatingY = false;
@@ -1524,12 +1963,12 @@ supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in
   return el.style.pointerEvents === 'auto';
 }(),
     _detectDirection = function _detectDirection(el, options) {
-  var elCSS = css$7(el),
+  var elCSS = css$8(el),
       elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth),
       child1 = getChild(el, 0, options),
       child2 = getChild(el, 1, options),
-      firstChildCSS = child1 && css$7(child1),
-      secondChildCSS = child2 && css$7(child2),
+      firstChildCSS = child1 && css$8(child1),
+      secondChildCSS = child2 && css$8(child2),
       firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width,
       secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;
 
@@ -1618,12 +2057,12 @@ _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {
 },
     _hideGhostForTarget = function _hideGhostForTarget() {
   if (!supportCssPointerEvents && ghostEl) {
-    css$7(ghostEl, 'display', 'none');
+    css$8(ghostEl, 'display', 'none');
   }
 },
     _unhideGhostForTarget = function _unhideGhostForTarget() {
   if (!supportCssPointerEvents && ghostEl) {
-    css$7(ghostEl, 'display', '');
+    css$8(ghostEl, 'display', '');
   }
 }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position
 
@@ -2158,10 +2597,10 @@ Sortable.prototype =
         }
 
         var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")");
-        css$7(ghostEl, 'webkitTransform', cssMatrix);
-        css$7(ghostEl, 'mozTransform', cssMatrix);
-        css$7(ghostEl, 'msTransform', cssMatrix);
-        css$7(ghostEl, 'transform', cssMatrix);
+        css$8(ghostEl, 'webkitTransform', cssMatrix);
+        css$8(ghostEl, 'mozTransform', cssMatrix);
+        css$8(ghostEl, 'msTransform', cssMatrix);
+        css$8(ghostEl, 'transform', cssMatrix);
         lastDx = dx;
         lastDy = dy;
         touchEvt = touch;
@@ -2182,7 +2621,7 @@ Sortable.prototype =
         // Get relatively positioned parent
         ghostRelativeParent = container;
 
-        while (css$7(ghostRelativeParent, 'position') === 'static' && css$7(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {
+        while (css$8(ghostRelativeParent, 'position') === 'static' && css$8(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {
           ghostRelativeParent = ghostRelativeParent.parentNode;
         }
 
@@ -2201,22 +2640,22 @@ Sortable.prototype =
       toggleClass(ghostEl, options.ghostClass, false);
       toggleClass(ghostEl, options.fallbackClass, true);
       toggleClass(ghostEl, options.dragClass, true);
-      css$7(ghostEl, 'transition', '');
-      css$7(ghostEl, 'transform', '');
-      css$7(ghostEl, 'box-sizing', 'border-box');
-      css$7(ghostEl, 'margin', 0);
-      css$7(ghostEl, 'top', rect.top);
-      css$7(ghostEl, 'left', rect.left);
-      css$7(ghostEl, 'width', rect.width);
-      css$7(ghostEl, 'height', rect.height);
-      css$7(ghostEl, 'opacity', '0.8');
-      css$7(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');
-      css$7(ghostEl, 'zIndex', '100000');
-      css$7(ghostEl, 'pointerEvents', 'none');
+      css$8(ghostEl, 'transition', '');
+      css$8(ghostEl, 'transform', '');
+      css$8(ghostEl, 'box-sizing', 'border-box');
+      css$8(ghostEl, 'margin', 0);
+      css$8(ghostEl, 'top', rect.top);
+      css$8(ghostEl, 'left', rect.left);
+      css$8(ghostEl, 'width', rect.width);
+      css$8(ghostEl, 'height', rect.height);
+      css$8(ghostEl, 'opacity', '0.8');
+      css$8(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');
+      css$8(ghostEl, 'zIndex', '100000');
+      css$8(ghostEl, 'pointerEvents', 'none');
       Sortable.ghost = ghostEl;
       container.appendChild(ghostEl); // Set transform-origin
 
-      css$7(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');
+      css$8(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');
     }
   },
   _onDragStart: function _onDragStart(
@@ -2285,7 +2724,7 @@ Sortable.prototype =
 
       on(document, 'drop', _this); // #1276 fix:
 
-      css$7(dragEl, 'transform', 'translateZ(0)');
+      css$8(dragEl, 'transform', 'translateZ(0)');
     }
 
     awaitingDragStarted = true;
@@ -2294,7 +2733,7 @@ Sortable.prototype =
     moved = true;
 
     if (Safari) {
-      css$7(document.body, 'user-select', 'none');
+      css$8(document.body, 'user-select', 'none');
     }
   },
   // Returns true - if no further action is needed (either inserted or another condition)
@@ -2514,7 +2953,7 @@ Sortable.prototype =
           do {
             dragIndex -= direction;
             sibling = parentEl.children[dragIndex];
-          } while (sibling && (css$7(sibling, 'display') === 'none' || sibling === ghostEl));
+          } while (sibling && (css$8(sibling, 'display') === 'none' || sibling === ghostEl));
         } // If dragEl is already beside target: Do not insert
 
 
@@ -2629,10 +3068,10 @@ Sortable.prototype =
     this._offUpEvents();
 
     if (Safari) {
-      css$7(document.body, 'user-select', '');
+      css$8(document.body, 'user-select', '');
     }
 
-    css$7(dragEl, 'transform', '');
+    css$8(dragEl, 'transform', '');
 
     if (evt) {
       if (moved) {
@@ -2907,7 +3346,7 @@ Sortable.prototype =
     if (!cloneHidden) {
       pluginEvent('hideClone', this);
       if (Sortable.eventCanceled) return;
-      css$7(cloneEl, 'display', 'none');
+      css$8(cloneEl, 'display', 'none');
 
       if (this.options.removeCloneOnHide && cloneEl.parentNode) {
         cloneEl.parentNode.removeChild(cloneEl);
@@ -2939,7 +3378,7 @@ Sortable.prototype =
         this.animate(dragEl, cloneEl);
       }
 
-      css$7(cloneEl, 'display', '');
+      css$8(cloneEl, 'display', '');
       cloneHidden = false;
     }
   }
@@ -3114,7 +3553,7 @@ if (documentExists) {
 Sortable.utils = {
   on: on,
   off: off,
-  css: css$7,
+  css: css$8,
   find: find,
   is: function is(el, selector) {
     return !!closest(el, selector, el, false);
@@ -3341,7 +3780,7 @@ var autoScroll = throttle(function (evt, options, rootEl, isFallback) {
         canScrollY = void 0,
         scrollWidth = el.scrollWidth,
         scrollHeight = el.scrollHeight,
-        elCSS = css$7(el),
+        elCSS = css$8(el),
         scrollPosX = el.scrollLeft,
         scrollPosY = el.scrollTop;
 
@@ -3677,7 +4116,7 @@ function MultiDragPlugin() {
       if (!this.isMultiDrag) return;
       insertMultiDragClones(false, rootEl);
       multiDragClones.forEach(function (clone) {
-        css$7(clone, 'display', '');
+        css$8(clone, 'display', '');
       });
       cloneNowShown();
       clonesHidden = false;
@@ -3691,7 +4130,7 @@ function MultiDragPlugin() {
           cancel = _ref5.cancel;
       if (!this.isMultiDrag) return;
       multiDragClones.forEach(function (clone) {
-        css$7(clone, 'display', 'none');
+        css$8(clone, 'display', 'none');
 
         if (_this.options.removeCloneOnHide && clone.parentNode) {
           clone.parentNode.removeChild(clone);
@@ -3735,7 +4174,7 @@ function MultiDragPlugin() {
         if (this.options.animation) {
           multiDragElements.forEach(function (multiDragElement) {
             if (multiDragElement === dragEl$1) return;
-            css$7(multiDragElement, 'position', 'absolute');
+            css$8(multiDragElement, 'position', 'absolute');
           });
           var dragRect = getRect(dragEl$1, false, true, true);
           multiDragElements.forEach(function (multiDragElement) {
@@ -6630,8 +7069,8 @@ vuedraggable_umd.exports;
 var vuedraggable_umdExports = vuedraggable_umd.exports;
 var draggable = /*@__PURE__*/getDefaultExportFromCjs(vuedraggable_umdExports);
 
-var css$6 = "\r\n/* Fijar ancho de la columna de acciones en el header */\n.actions-header[data-v-37559362] {\r\n  width: 1%;\r\n  white-space: nowrap;\n}\r\n";
-n(css$6, {});
+var css$7 = "\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$7, {});
 
 const _sfc_main$d = {
   name: 'TableHeader',
@@ -6689,7 +7128,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', {
@@ -6761,7 +7200,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 ($event) {
+              return _vm.onChangeFilter($event);
+            },
+            "input": function ($event) {
+              if ($event.target.composing) return;
+              _vm.$set(_vm.internalFilterByProp(column.prop + '_from'), "value", _vm._n($event.target.value));
+            },
+            "blur": function ($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 ($event) {
+              return _vm.onChangeFilter($event);
+            },
+            "input": function ($event) {
+              if ($event.target.composing) return;
+              _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", _vm._n($event.target.value));
+            },
+            "blur": function ($event) {
+              return _vm.$forceUpdate();
+            }
+          }
+        })])]) : column.type == 'state' && column.options && Array.isArray(column.options) ? _c('select', {
           directives: [{
             name: "model",
             rawName: "v-model",
@@ -6793,10 +7300,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",
@@ -6828,9 +7335,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",
@@ -6891,19 +7398,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 ($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) {
@@ -12599,8 +13113,8 @@ moment$1.exports;
 var momentExports = moment$1.exports;
 var moment = /*@__PURE__*/getDefaultExportFromCjs(momentExports);
 
-var css$5 = "\r\n/* Fijar ancho de la columna de acciones */\n.actions-cell[data-v-3309b7c7] {\r\n  width: 1%;\r\n  white-space: nowrap;\n}\n.actions-button-group[data-v-3309b7c7] {\r\n  display: inline-flex;\r\n  flex-wrap: nowrap;\n}\n.actions-dropdown[data-v-3309b7c7] {\r\n  display: inline-block;\n}\r\n\r\n/* Asegurar que los botones no se expandan */\n.actions-button-group .btn[data-v-3309b7c7] {\r\n  flex-shrink: 0;\n}\r\n";
-n(css$5, {});
+var css$6 = "\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$6, {});
 
 const _sfc_main$c = {
   name: 'TableCell',
@@ -12610,11 +13124,54 @@ const _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() {
     return {
       moment: moment
     };
+  },
+  computed: {
+    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)) {
+        const itemVal = this.itemValue(this.column, this.item);
+        const options = this.column.options;
+        const result = this.getStateOptions(itemVal, options);
+        return result;
+      }
+      return [];
+    }
+  },
+  methods: {
+    formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      const thousandsSep = column.thousandsSeparator || '.';
+      const decimalSep = column.decimalSeparator || ',';
+      const decimals = column.decimals !== undefined ? column.decimals : numValue % 1 === 0 ? 0 : 2;
+
+      // Formatear número con separadores
+      const parts = numValue.toFixed(decimals).split('.');
+      const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      const decimalPart = parts[1] || '';
+      if (decimals > 0 && decimalPart) {
+        return `${integerPart}${decimalSep}${decimalPart}`;
+      }
+      return integerPart;
+    },
+    formatMoney(value, column) {
+      const formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      const symbol = column.symbol || '$';
+      return `${symbol}${formatted}`;
+    }
   }
 };
 var _sfc_render$c = function render() {
@@ -12662,7 +13219,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,
@@ -12681,27 +13246,35 @@ var _sfc_render$c = function render() {
       },
       proxy: true
     }], null, false, 4241371057)
-  }, [_vm._t("rowAction", function () {
-    return [_c('b-dropdown-item', {
-      on: {
-        "click": function ($event) {
-          return _vm.showItem(_vm.item.id, _vm.index);
+  }, [_vm._t("rowActions", function () {
+    return [_vm._t("rowAction", function () {
+      return [_c('b-dropdown-item', {
+        on: {
+          "click": function ($event) {
+            return _vm.showItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-eye'), _vm._v(" Ver ")], 1), _c('b-dropdown-item', {
-      on: {
-        "click": function ($event) {
-          return _vm.updateItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-eye'), _vm._v(" Ver ")], 1), _c('b-dropdown-item', {
+        on: {
+          "click": function ($event) {
+            return _vm.updateItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-pencil'), _vm._v(" Editar ")], 1), _c('b-dropdown-item', {
-      staticClass: "text-danger",
-      on: {
-        "click": function ($event) {
-          return _vm.removeItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-pencil'), _vm._v(" Editar ")], 1), _c('b-dropdown-item', {
+        staticClass: "text-danger",
+        on: {
+          "click": function ($event) {
+            return _vm.removeItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-trash'), _vm._v(" Eliminar ")], 1)];
+      }, [_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,
@@ -12710,35 +13283,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 ($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 ($event) {
+            return _vm.showItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-eye')], 1), _c('b-button', {
-      attrs: {
-        "variant": "secondary"
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.updateItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-eye')], 1), _c('b-button', {
+        attrs: {
+          "variant": "secondary"
+        },
+        on: {
+          "click": function ($event) {
+            return _vm.updateItem(_vm.item.id, _vm.index);
+          }
         }
-      }
-    }, [_c('b-icon-pencil')], 1), _c('b-button', {
-      attrs: {
-        "variant": "danger"
-      },
-      on: {
-        "click": function ($event) {
-          return _vm.removeItem(_vm.item.id, _vm.index);
+      }, [_c('b-icon-pencil')], 1), _c('b-button', {
+        attrs: {
+          "variant": "danger"
+        },
+        on: {
+          "click": function ($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,
@@ -12748,7 +13329,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;
 
 const _sfc_main$b = {
@@ -12791,7 +13372,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 (slotProps) {
+              return [_vm._t(name, null, null, slotProps)];
+            }
+          };
+        })], null, true)
       });
     });
   }, {
@@ -12809,19 +13398,46 @@ const _sfc_main$a = {
     TableHeader,
     TableRow
   },
-  inject: ['displayMode', 'displayModes', 'tableContainerClass', 'tableClass', 'items', 'draggableGroup', 'orderable', 'draggableOptions', 'itemsList', 'grouped', 'loading', 'infiniteScroll', 'messageEmptyResults', 'onSort', 'onDraggableAdded', 'onDraggableChange'],
+  inject: ['displayMode', 'displayModes', 'tableContainerClass', 'tableClass', 'items', 'draggableGroup', 'orderable', 'draggableOptions', 'itemsList', 'grouped', 'loading', 'firstLoad', 'infiniteScroll', 'messageEmptyResults', 'messageLoading', 'onSort', 'onDraggableAdded', 'onDraggableChange'],
   data() {
     return {
       drag: false
     };
+  },
+  computed: {
+    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;
+    },
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
+    },
+    firstLoadValue() {
+      return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
+    }
   }
 };
 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', {
+  }, [_vm.loadingValue || !_vm.firstLoadValue ? _c('div', {
+    staticClass: "text-center p-5"
+  }, [_c('b-spinner', {
+    attrs: {
+      "variant": "primary",
+      "label": "Cargando..."
+    }
+  }), _c('p', {
+    staticClass: "mt-2"
+  }, [_vm._v(_vm._s(_vm.messageLoading))])], 1) : [_c('table', {
     class: ['table table-hover table-striped w-100', _vm.tableClass]
   }, [_c('TableHeader'), _c('draggable', {
     attrs: {
@@ -12855,11 +13471,19 @@ 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 (slotProps) {
+            return [_vm._t(name, null, null, slotProps)];
+          }
+        };
+      })], null, true)
     });
-  }), 1)], 1), !_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
+  }), 1)], 1), _vm.firstLoadValue && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
-  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]) : _vm._e();
+  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]], 2) : _vm._e();
 };
 var _sfc_staticRenderFns$a = [];
 var __component__$a = /*#__PURE__*/normalizeComponent(_sfc_main$a, _sfc_render$a, _sfc_staticRenderFns$a, false, null, null, null, null);
@@ -13116,10 +13740,49 @@ const _sfc_main$9 = {
     cardHideFooter: Boolean,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,
     removeItem: Function
+  },
+  methods: {
+    getStateOptionsForColumn(column, item) {
+      if (column.type === 'state' && column.options) {
+        return this.getStateOptions(this.itemValue(column, item), column.options);
+      }
+      return [];
+    },
+    formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      const thousandsSep = column.thousandsSeparator || '.';
+      const decimalSep = column.decimalSeparator || ',';
+      const decimals = column.decimals !== undefined ? column.decimals : numValue % 1 === 0 ? 0 : 2;
+
+      // Formatear número con separadores
+      const parts = numValue.toFixed(decimals).split('.');
+      const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      const decimalPart = parts[1] || '';
+      if (decimals > 0 && decimalPart) {
+        return `${integerPart}${decimalSep}${decimalPart}`;
+      }
+      return integerPart;
+    },
+    formatMoney(value, column) {
+      const formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      const symbol = column.symbol || '$';
+      return `${symbol}${formatted}`;
+    }
   }
 };
 var _sfc_render$9 = function render() {
@@ -13138,35 +13801,43 @@ var _sfc_render$9 = function render() {
     scopedSlots: _vm._u([{
       key: "footer",
       fn: function () {
-        return [_c('b-button-group', [_vm._t("rowAction", function () {
-          return [_c('b-button', {
-            attrs: {
-              "variant": "primary"
-            },
-            on: {
-              "click": function ($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 ($event) {
+                  return _vm.showItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-eye')], 1), _c('b-button', {
-            attrs: {
-              "variant": "secondary"
-            },
-            on: {
-              "click": function ($event) {
-                return _vm.updateItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-eye')], 1), _c('b-button', {
+              attrs: {
+                "variant": "secondary"
+              },
+              on: {
+                "click": function ($event) {
+                  return _vm.updateItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-pencil')], 1), _c('b-button', {
-            attrs: {
-              "variant": "danger"
-            },
-            on: {
-              "click": function ($event) {
-                return _vm.removeItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-pencil')], 1), _c('b-button', {
+              attrs: {
+                "variant": "danger"
+              },
+              on: {
+                "click": function ($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,
@@ -13190,7 +13861,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,
@@ -13214,17 +13893,44 @@ const _sfc_main$8 = {
     draggable,
     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', 'firstLoad', 'infiniteScroll', 'messageEmptyResults', 'messageLoading', 'onSort', 'onDraggableAdded', 'onDraggableChange'],
   data() {
     return {
       drag: false
     };
+  },
+  computed: {
+    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;
+    },
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
+    },
+    firstLoadValue() {
+      return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
+    }
   }
 };
 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', [_vm.loadingValue || !_vm.firstLoadValue ? _c('div', {
+    staticClass: "text-center p-5"
+  }, [_c('b-spinner', {
+    attrs: {
+      "variant": "primary",
+      "label": "Cargando..."
+    }
+  }), _c('p', {
+    staticClass: "mt-2"
+  }, [_vm._v(_vm._s(_vm.messageLoading))])], 1) : [_c('draggable', {
     attrs: {
       "group": _vm.draggableGroup,
       "draggable": _vm.orderable ? '.item' : '.none',
@@ -13283,25 +13989,35 @@ 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 (slotProps) {
+              return [_vm._t(name, null, null, slotProps)];
+            }
+          };
+        })], null, true)
       })];
     }, {
       "item": item
     })], 2);
-  }), 0)], 1), !_vm.loading && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
+  }), 0)], 1), _vm.firstLoadValue && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
-  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()], 1) : _vm._e();
+  }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e()]], 2) : _vm._e();
 };
 var _sfc_staticRenderFns$8 = [];
 var __component__$8 = /*#__PURE__*/normalizeComponent(_sfc_main$8, _sfc_render$8, _sfc_staticRenderFns$8, false, null, null, null, null);
 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";
-n(css$4, {});
+var css$5 = "\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$5, {});
 
 const _sfc_main$7 = {
   name: 'KanbanCard',
@@ -13313,10 +14029,49 @@ const _sfc_main$7 = {
     cardHideFooter: Boolean,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,
     removeItem: Function
+  },
+  methods: {
+    getStateOptionsForColumn(column, item) {
+      if (column.type === 'state' && column.options) {
+        return this.getStateOptions(this.itemValue(column, item), column.options);
+      }
+      return [];
+    },
+    formatNumber(value, column) {
+      if (value === null || value === undefined || value === '') {
+        return '';
+      }
+      const numValue = parseFloat(value);
+      if (isNaN(numValue)) {
+        return value;
+      }
+      const thousandsSep = column.thousandsSeparator || '.';
+      const decimalSep = column.decimalSeparator || ',';
+      const decimals = column.decimals !== undefined ? column.decimals : numValue % 1 === 0 ? 0 : 2;
+
+      // Formatear número con separadores
+      const parts = numValue.toFixed(decimals).split('.');
+      const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSep);
+      const decimalPart = parts[1] || '';
+      if (decimals > 0 && decimalPart) {
+        return `${integerPart}${decimalSep}${decimalPart}`;
+      }
+      return integerPart;
+    },
+    formatMoney(value, column) {
+      const formatted = this.formatNumber(value, column);
+      if (formatted === '') {
+        return '';
+      }
+      const symbol = column.symbol || '$';
+      return `${symbol}${formatted}`;
+    }
   }
 };
 var _sfc_render$7 = function render() {
@@ -13339,35 +14094,43 @@ var _sfc_render$7 = function render() {
           attrs: {
             "size": "sm"
           }
-        }, [_vm._t("rowAction", function () {
-          return [_c('b-button', {
-            attrs: {
-              "variant": "primary"
-            },
-            on: {
-              "click": function ($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 ($event) {
+                  return _vm.showItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-eye')], 1), _c('b-button', {
-            attrs: {
-              "variant": "secondary"
-            },
-            on: {
-              "click": function ($event) {
-                return _vm.updateItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-eye')], 1), _c('b-button', {
+              attrs: {
+                "variant": "secondary"
+              },
+              on: {
+                "click": function ($event) {
+                  return _vm.updateItem(_vm.item.id, _vm.index);
+                }
               }
-            }
-          }, [_c('b-icon-pencil')], 1), _c('b-button', {
-            attrs: {
-              "variant": "danger"
-            },
-            on: {
-              "click": function ($event) {
-                return _vm.removeItem(_vm.item.id, _vm.index);
+            }, [_c('b-icon-pencil')], 1), _c('b-button', {
+              attrs: {
+                "variant": "danger"
+              },
+              on: {
+                "click": function ($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,
@@ -13395,7 +14158,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,
@@ -13408,11 +14179,11 @@ 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 __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-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";
-n(css$3, {});
+var css$4 = "\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$4, {});
 
 const _sfc_main$6 = {
   name: 'KanbanColumn',
@@ -13427,6 +14198,8 @@ const _sfc_main$6 = {
     columns: Array,
     itemValue: Function,
     getStateValue: Function,
+    getStateOptions: Function,
+    getStateBadgeVariant: Function,
     getArrayValue: Function,
     showItem: Function,
     updateItem: Function,
@@ -13495,11 +14268,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 (slotProps) {
+              return [_vm._t(name, null, null, slotProps)];
+            }
+          };
+        })], null, true)
       })];
     }, {
       "item": item
@@ -13507,18 +14290,18 @@ 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 __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-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";
-n(css$2, {});
+var css$3 = "\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$3, {});
 
 const _sfc_main$5 = {
   name: 'KanbanBoard',
   components: {
     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,
@@ -13537,6 +14320,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,
@@ -13546,12 +14331,20 @@ 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 (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;
 
 const _sfc_main$4 = {
@@ -13559,12 +14352,33 @@ const _sfc_main$4 = {
   components: {
     KanbanBoard
   },
-  inject: ['displayMode', 'displayModes']
+  inject: ['displayMode', 'displayModes'],
+  computed: {
+    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 (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);
@@ -13572,14 +14386,41 @@ var CrudKanban = __component__$4.exports;
 
 const _sfc_main$3 = {
   name: 'CrudCustom',
-  inject: ['displayMode', 'displayModes', 'listContainerClass', 'listItemClass', 'loading', 'items', 'infiniteScroll', 'messageEmptyResults', 'itemsList']
+  inject: ['displayMode', 'displayModes', 'listContainerClass', 'listItemClass', 'loading', 'firstLoad', 'items', 'infiniteScroll', 'messageEmptyResults', 'messageLoading', 'itemsList'],
+  computed: {
+    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;
+    },
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
+    },
+    firstLoadValue() {
+      return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
+    }
+  }
 };
 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', {
+  }, [_vm.loadingValue || !_vm.firstLoadValue ? _c('div', {
+    staticClass: "text-center p-5"
+  }, [_c('b-spinner', {
+    attrs: {
+      "variant": "primary",
+      "label": "Cargando..."
+    }
+  }), _c('p', {
+    staticClass: "mt-2"
+  }, [_vm._v(_vm._s(_vm.messageLoading))])], 1) : [_vm.firstLoadValue && _vm.itemsList && _vm.itemsList.length == 0 && !_vm.infiniteScroll ? _c('p', {
     staticClass: "p-3"
   }, [_vm._v(" " + _vm._s(_vm.messageEmptyResults) + " ")]) : _vm._e(), _vm._l(_vm.itemsList, function (item, index) {
     return _c('div', {
@@ -13588,15 +14429,39 @@ var _sfc_render$3 = function render() {
     }, [_vm._t("card", null, {
       "item": item
     })], 2);
-  })], 2)]) : _vm._e();
+  })]], 2)]) : _vm._e();
 };
 var _sfc_staticRenderFns$3 = [];
 var __component__$3 = /*#__PURE__*/normalizeComponent(_sfc_main$3, _sfc_render$3, _sfc_staticRenderFns$3, false, null, null, null, null);
 var CrudCustom = __component__$3.exports;
 
+var css$2 = "\n.export-format-options[data-v-051e3fd7] {\r\n  display: flex;\r\n  gap: 1rem;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\n}\n.export-format-radio[data-v-051e3fd7] {\r\n  flex: 1;\r\n  min-width: 150px;\r\n  padding: 1rem;\r\n  border: 2px solid #dee2e6;\r\n  border-radius: 0.5rem;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background-color: #fff;\n}\n.export-format-radio[data-v-051e3fd7]:hover {\r\n  border-color: #007bff;\r\n  background-color: #f8f9fa;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);\n}\n.export-format-radio[data-v-051e3fd7] .custom-control-input:checked ~ .custom-control-label {\r\n  color: #007bff;\r\n  font-weight: 600;\n}\n.export-format-radio[data-v-051e3fd7] .custom-control-input:checked ~ .custom-control-label::before {\r\n  border-color: #007bff;\r\n  background-color: #007bff;\n}\n.export-format-radio[data-v-051e3fd7] .custom-control-label {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  cursor: pointer;\r\n  font-size: 1rem;\n}\n.export-format-radio[data-v-051e3fd7] .custom-control-label::before {\r\n  margin-right: 0.5rem;\n}\n.export-format-radio[data-v-051e3fd7] svg {\r\n  font-size: 1.5rem;\r\n  color: #495057;\n}\n.export-format-radio[data-v-051e3fd7] .custom-control-input:checked ~ .custom-control-label svg {\r\n  color: #007bff;\n}\r\n";
+n(css$2, {});
+
 const _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() {
+      // 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() {
+        this.$forceUpdate();
+      },
+      deep: true,
+      immediate: true
+    }
+  }
 };
 var _sfc_render$2 = function render() {
   var _vm = this,
@@ -13618,7 +14483,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:",
@@ -13631,16 +14496,16 @@ var _sfc_render$2 = function render() {
         "placeholder": "Nombre"
       },
       model: {
-        value: _vm.item.title,
+        value: _vm.reactiveItem.title,
         callback: function ($$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",
@@ -13651,8 +14516,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: {
@@ -13664,17 +14529,17 @@ var _sfc_render$2 = function render() {
           "required": ""
         },
         model: {
-          value: _vm.item[key],
+          value: _vm.reactiveItem[key],
           callback: function ($$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",
@@ -13698,8 +14563,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', {
@@ -13716,8 +14581,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",
@@ -13770,34 +14635,42 @@ var _sfc_render$2 = function render() {
         "show": _vm.loading,
         "rounded": "sm"
       }
-    }, [_vm.selectedItems.length ? _c('p', [_vm._v("Se exportará " + _vm._s(_vm.selectedItems.length) + " elementos.")]) : _c('p', [_vm._v("Se exportará la consulta actual.")]), _c('select', {
-      directives: [{
-        name: "model",
-        rawName: "v-model",
-        value: _vm.exportFormat,
-        expression: "exportFormat"
-      }],
-      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.exportFormat = $event.target.multiple ? $$selectedVal : $$selectedVal[0];
-        }
+    }, [_vm.selectedItems.length ? _c('p', [_vm._v("Se exportará " + _vm._s(_vm.selectedItems.length) + " elementos.")]) : _c('p', [_vm._v("Se exportará la consulta actual.")]), _c('b-form-group', {
+      staticClass: "mt-3",
+      attrs: {
+        "label": "Seleccione el formato de exportación:"
       }
-    }, [_c('option', {
+    }, [_c('div', {
+      staticClass: "export-format-options"
+    }, [_c('b-form-radio', {
+      staticClass: "export-format-radio",
       attrs: {
         "value": "JSON"
+      },
+      model: {
+        value: _vm.exportFormat,
+        callback: function ($$v) {
+          _vm.exportFormat = $$v;
+        },
+        expression: "exportFormat"
       }
-    }, [_vm._v("JSON")]), _c('option', {
+    }, [_c('b-icon-file-text', {
+      staticClass: "mr-2"
+    }), _vm._v(" JSON ")], 1), _c('b-form-radio', {
+      staticClass: "export-format-radio",
       attrs: {
         "value": "XLSX"
+      },
+      model: {
+        value: _vm.exportFormat,
+        callback: function ($$v) {
+          _vm.exportFormat = $$v;
+        },
+        expression: "exportFormat"
       }
-    }, [_vm._v("XLSX")])]), _c('div', {
+    }, [_c('b-icon-table', {
+      staticClass: "mr-2"
+    }), _vm._v(" XLSX ")], 1)], 1)]), _c('div', {
       staticClass: "text-center mt-3"
     }, [_c('b-button', {
       attrs: {
@@ -13809,13 +14682,13 @@ var _sfc_render$2 = function render() {
           return _vm.exportItems();
         }
       }
-    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loading ? "Cargando..." : "Exportar") + " ")], 1)], 1)])];
+    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loading ? "Cargando..." : "Exportar") + " ")], 1)], 1)], 1)];
   }, {
     "item": _vm.item
   }) : _vm._e()], 2) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /*#__PURE__*/normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
+var __component__$2 = /*#__PURE__*/normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, "051e3fd7", null, null);
 var CrudModals = __component__$2.exports;
 
 var vueInfiniteLoading = {exports: {}};
@@ -13834,7 +14707,7 @@ vueInfiniteLoading.exports;
 var vueInfiniteLoadingExports = vueInfiniteLoading.exports;
 var InfiniteLoading = /*@__PURE__*/getDefaultExportFromCjs(vueInfiniteLoadingExports);
 
-var css$1 = "\n.paginator-container[data-v-11671e09] {\r\n  display: grid;\r\n  grid-template-columns: 1fr auto 1fr;\r\n  align-items: center;\r\n  width: 100%;\r\n  margin-top: 1rem;\r\n  gap: 1rem;\n}\n.paginator-data[data-v-11671e09] {\r\n  display: flex;\r\n  flex-wrap: nowrap;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  font-size: 0.875rem;\r\n  grid-column: 1;\n}\n.paginator-badge[data-v-11671e09] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  padding: 0.375rem 0.625rem;\r\n  background-color: #f8f9fa;\r\n  border: 1px solid #dee2e6;\r\n  border-radius: 0.375rem;\r\n  color: #495057;\r\n  transition: all 0.2s ease;\n}\n.paginator-badge[data-v-11671e09]:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\n.paginator-label[data-v-11671e09] {\r\n  font-weight: 500;\r\n  color: #6c757d;\n}\n.paginator-value[data-v-11671e09] {\r\n  font-weight: 600;\r\n  color: #212529;\n}\n.paginator-dropdown[data-v-11671e09] {\r\n  font-size: 0.875rem;\n}\n.paginator-dropdown[data-v-11671e09] .btn {\r\n  padding: 0.375rem 0.625rem;\r\n  font-size: 0.875rem;\r\n  background-color: #f8f9fa;\r\n  border: 1px solid #dee2e6;\r\n  color: #495057;\n}\n.paginator-dropdown[data-v-11671e09] .btn:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\n.crud-paginator[data-v-11671e09] {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  grid-column: 2;\n}\n.paginator-badge-dropdown[data-v-11671e09] {\r\n  z-index: 1;\r\n  position: relative;\n}\n.paginator-badge-dropdown[data-v-11671e09] .btn {\r\n  padding: 0.375rem 0.625rem;\r\n  font-size: 0.875rem;\r\n  background-color: #f8f9fa;\r\n  border: 1px solid #dee2e6;\r\n  color: #495057;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\n}\n.paginator-badge-dropdown[data-v-11671e09] .btn:hover {\r\n  background-color: #e9ecef;\r\n  border-color: #ced4da;\n}\r\n";
+var css$1 = "\n.paginator-container[data-v-73e31fd7] {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  width: 100%;\n  margin-top: 1rem;\n  gap: 1rem;\n}\n.paginator-data[data-v-73e31fd7] {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  grid-column: 1;\n}\n.paginator-badge[data-v-73e31fd7] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.375rem 0.625rem;\n  background-color: #f8f9fa;\n  border: 1px solid #dee2e6;\n  border-radius: 0.375rem;\n  color: #495057;\n  transition: all 0.2s ease;\n}\n.paginator-badge[data-v-73e31fd7]:hover {\n  background-color: #e9ecef;\n  border-color: #ced4da;\n}\n.paginator-label[data-v-73e31fd7] {\n  font-weight: 500;\n  color: #6c757d;\n}\n.paginator-value[data-v-73e31fd7] {\n  font-weight: 600;\n  color: #212529;\n}\n.paginator-dropdown[data-v-73e31fd7] {\n  font-size: 0.875rem;\n}\n.paginator-dropdown[data-v-73e31fd7] .btn {\n  padding: 0.375rem 0.625rem;\n  font-size: 0.875rem;\n  background-color: #f8f9fa;\n  border: 1px solid #dee2e6;\n  color: #495057;\n}\n.paginator-dropdown[data-v-73e31fd7] .btn:hover {\n  background-color: #e9ecef;\n  border-color: #ced4da;\n}\n.crud-paginator[data-v-73e31fd7] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-column: 2;\n}\n.paginator-badge-dropdown[data-v-73e31fd7] {\n  z-index: 1;\n  position: relative;\n}\n.paginator-badge-dropdown[data-v-73e31fd7] .btn {\n  padding: 0.375rem 0.625rem;\n  font-size: 0.875rem;\n  background-color: #f8f9fa;\n  border: 1px solid #dee2e6;\n  color: #495057;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.paginator-badge-dropdown[data-v-73e31fd7] .btn:hover {\n  background-color: #e9ecef;\n  border-color: #ced4da;\n}\n";
 n(css$1, {});
 
 const _sfc_main$1 = {
@@ -13842,7 +14715,7 @@ const _sfc_main$1 = {
   components: {
     InfiniteLoading
   },
-  inject: ['infiniteScroll', 'infiniteScrollKey', 'messageLoading', 'messageNoMore', 'messageEmptyResults', 'loading', 'items', 'pagination', 'selectedItems', 'showPaginator', 'infiniteHandler', 'onPaginationChange', 'onPerPageChange', 'clearSelection'],
+  inject: ['infiniteScroll', 'infiniteScrollKey', 'messageLoading', 'messageNoMore', 'messageEmptyResults', 'loading', 'firstLoad', 'items', 'pagination', 'selectedItems', 'showPaginator', 'infiniteHandler', 'onPaginationChange', 'onPerPageChange', 'clearSelection'],
   data() {
     return {
       perPageOptions: [10, 20, 50, 100]
@@ -13852,6 +14725,12 @@ const _sfc_main$1 = {
     selectedItemsCount() {
       // Computed para forzar reactividad del contador
       return this.selectedItems ? this.selectedItems.length : 0;
+    },
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
+    },
+    firstLoadValue() {
+      return this.firstLoad && this.firstLoad.value !== undefined ? this.firstLoad.value : this.firstLoad;
     }
   }
 };
@@ -13879,14 +14758,14 @@ var _sfc_render$1 = function render() {
       "slot": "no-more"
     },
     slot: "no-more"
-  }, [!_vm.loading ? _c('div', {
+  }, [!_vm.loadingValue ? _c('div', {
     staticClass: "text-center"
   }, [_vm._v(_vm._s(_vm.messageNoMore))]) : _vm._e()]), _c('div', {
     attrs: {
       "slot": "no-results"
     },
     slot: "no-results"
-  }, [!_vm.loading ? _c('div', {
+  }, [!_vm.loadingValue && _vm.firstLoadValue ? _c('div', {
     staticClass: "text-center"
   }, [_vm._v(_vm._s(_vm.items.length == 0 ? _vm.messageEmptyResults : _vm.messageNoMore))]) : _vm._e()])]) : _vm._e(), !_vm.infiniteScroll ? _c('div', {
     staticClass: "paginator-container"
@@ -13952,7 +14831,7 @@ var _sfc_render$1 = function render() {
   }) : _vm._e()], 1)]) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /*#__PURE__*/normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, "11671e09", null, null);
+var __component__$1 = /*#__PURE__*/normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, "73e31fd7", null, null);
 var CrudPagination = __component__$1.exports;
 
 var crudData = {
@@ -13982,6 +14861,20 @@ var crudData = {
       filterSidebarOpen: false,
       internalFilters: [],
       forceRecomputeCounter: 0,
+      _displayMode: 1,
+      // Propiedad local para displayMode (se inicializará desde la prop en created())
+      displayModeReactive: Vue.observable({
+        value: 1
+      }),
+      // Objeto reactivo para provide/inject
+      loadingReactive: Vue.observable({
+        value: false
+      }),
+      // Objeto reactivo para loading
+      firstLoadReactive: Vue.observable({
+        value: false
+      }),
+      // Objeto reactivo para firstLoad
       displayModes: {
         MODE_TABLE: 1,
         MODE_CARDS: 2,
@@ -14012,7 +14905,7 @@ var crudData = {
       if (this.groupedSplit) {
         return true;
       }
-      return this.displayMode == this.displayModes.MODE_KANBAN;
+      return this._displayMode == this.displayModes.MODE_KANBAN;
     },
     itemsList() {
       const items = this.ajax ? this.items : this.items.slice(this.paginationIndexStart, this.paginationIndexEnd);
@@ -14054,7 +14947,15 @@ var crudData = {
       this.internalFilters.forEach(f => {
         if (f.value) {
           let colname = f.column.replace("_sort", "").replace("_from", "").replace("_to", "");
-          filter.push([colname, f.op, f.value]);
+          let 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;
@@ -14094,7 +14995,23 @@ var crudData = {
         this.fetchItems();
       }
     },
-    displayMode() {
+    // Watcher para la prop displayMode (sincroniza cuando cambia desde el componente padre)
+    displayMode(newVal) {
+      // Usar $props para acceder a la prop y evitar conflictos con data properties
+      const 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(newVal) {
+      // 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(() => {
         this.forceRecomputeCounter++;
@@ -14152,7 +15069,29 @@ var crudData = {
         });
       },
       deep: true
+    },
+    loading: {
+      handler(newVal) {
+        this.loadingReactive.value = newVal;
+      },
+      immediate: true
+    },
+    firstLoad: {
+      handler(newVal) {
+        this.firstLoadReactive.value = newVal;
+      },
+      immediate: true
+    }
+  },
+  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;
     }
+    // Inicializar valores reactivos
+    this.loadingReactive.value = this.loading;
+    this.firstLoadReactive.value = this.firstLoad;
   },
   mounted() {
     const now = Math.floor(Date.now() / 1000);
@@ -19501,7 +20440,7 @@ var crudApi = {
           dataKey: 'data',
           params: {
             page: page,
-            limit: this.pagination.perPage,
+            limit: this.pagination.per_page,
             filters: JSON.stringify(this.finalFilters)
           }
         });
@@ -19535,7 +20474,7 @@ 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(response => {
@@ -19855,10 +20794,10 @@ var crudApi = {
           ids: ids
         }
       }).then(response => {
-        this.items = this.items.filter(it => !ids.includes(it.id));
         this.toastSuccess("Elemento/s eliminado.");
         this.$emit("itemDeleted", {});
-        this.loading = false;
+        this.clearSelection();
+        this.refresh();
       }).catch(error => {
         this.toastError(error);
         this.loading = false;
@@ -19868,8 +20807,10 @@ var crudApi = {
       let ids = this.selectedItems.map(it => it.id);
       this.items = this.items.filter(it => !ids.includes(it.id));
       this.item = null;
+      this.pagination.total = this.items.length;
       this.toastSuccess("Elemento Eliminado");
       this.$emit("itemDeleted", {});
+      this.clearSelection();
       this.loading = false;
     },
     async deleteItemBulkVuex() {
@@ -19891,7 +20832,15 @@ var crudApi = {
           return;
         }
       }
+
+      // Actualizar items desde el store Vuex
+      let itemsResult = this.model.query().withAll().get();
+      if (itemsResult) {
+        this.items = itemsResult;
+      }
       this.toastSuccess("Elemento eliminados.");
+      this.clearSelection();
+      this.loading = false;
     },
     saveSort() {
       if (this.orderable) {
@@ -20025,15 +20974,15 @@ var crudFilters = {
     setupFilters() {
       this.columns.forEach(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 {
@@ -20052,6 +21001,46 @@ var crudFilters = {
           });
         }
       });
+
+      // Procesar filtros custom
+      if (this.customFilters && Array.isArray(this.customFilters)) {
+        this.customFilters.forEach(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(column) {
       let value = this.internalFilterByProp(column.prop + "_sort").value;
@@ -20070,6 +21059,11 @@ var crudFilters = {
     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(refresh = true) {
       this.internalFilters = [];
@@ -20084,6 +21078,9 @@ var crudFilters = {
     isColumnHasFilter(column) {
       return column && !column.hideFilter && column.type != "actions";
     },
+    isCustomFilterEnabled(customFilter) {
+      return customFilter && customFilter.prop && !customFilter.hideFilter && customFilter.type != "actions";
+    },
     setFilter(column, value) {
       let filter = this.filter.find(f => f.column == column);
       filter.value = value;
@@ -20110,6 +21107,33 @@ var crudFilters = {
 
 var crudValidation = {
   methods: {
+    normalizeOptions(options) {
+      if (!Array.isArray(options)) {
+        return options;
+      }
+      return options.map(option => {
+        const normalized = {
+          ...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;
+      });
+    },
     async loadOptions() {
       for (let i = 0; i < this.columns.length; i++) {
         const column = this.columns[i];
@@ -20122,6 +21146,15 @@ var crudValidation = {
           });
           console.debug("Options promise", this.columns);
         }
+
+        // Normalizar opciones para columnas tipo state y array
+        if ((column.type === 'state' || column.type === 'array') && Array.isArray(column.options)) {
+          const normalizedOptions = this.normalizeOptions(column.options);
+          this.$set(this.columns, i, {
+            ...column,
+            options: normalizedOptions
+          });
+        }
       }
       this.optionsLoaded = true;
     },
@@ -20143,22 +21176,70 @@ var crudValidation = {
       });
       return values.join(",");
     },
-    getStateValue(value, options) {
-      if (!options) {
-        console.debug("State Column Not hast options returning value", value, options);
-        return value;
+    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)
+      const normalizedOptions = this.normalizeOptions(options);
+
+      // Si el valor es null o undefined, no hay coincidencias
+      if (value === null || value === undefined) {
+        return [];
       }
-      let ops = options.filter(option => {
+
+      // Normalizar el valor para comparación (convertir a string)
+      const normalizedValue = String(value).trim();
+      return normalizedOptions.filter(option => {
+        // Después de normalizar, las opciones siempre tienen id, value y text
+        // Comparar tanto con id como con value para asegurar compatibilidad
+        const optionId = option.id !== undefined && option.id !== null ? String(option.id).trim() : null;
+        const 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(val => {
+            if (val === null || val === undefined) return false;
+            const 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(option => {
-        return option.text ? option.text : option.label ? option.label : "";
-      });
-      return ops.join(", ");
+    },
+    getStateValue(value, options) {
+      if (!options) {
+        console.debug("State Column Not hast options returning value", value, options);
+        return value;
+      }
+      const ops = this.getStateOptions(value, options);
+      return ops.map(option => {
+        // Usar text directamente (ya normalizado)
+        return option.text !== undefined ? option.text : "";
+      }).join(", ");
+    },
+    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
+      const 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';
     }
   }
 };
@@ -20294,37 +21375,134 @@ var crudHelpers = {
       this.$emit("selectItems", this.selectedItems);
     },
     showItem(id, itemIndex = null) {
+      let item;
       if (itemIndex == null) {
-        let item = this.items.find(it => it.id == id);
-        this.item = item;
+        item = this.items.find(it => it.id == id);
       } 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
+      const itemCopy = JSON.parse(JSON.stringify(item));
+      if (this.useVuexORM && !this.vuexLocalforage) {
+        const modelInstance = new this.model(itemCopy);
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(modelInstance).forEach(key => {
+          this.$set(this.item, key, modelInstance[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(key => {
+          if (!(key in modelInstance)) {
+            this.$delete(this.item, key);
+          }
+        });
+      } else {
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(itemCopy).forEach(key => {
+          this.$set(this.item, key, itemCopy[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(key => {
+          if (!(key in itemCopy)) {
+            this.$delete(this.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(() => {
+        this.$forceUpdate();
+        this.$bvModal.show("modal-show-item-" + this.modelName);
+      });
     },
     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)));
-        }
+      // Hacer copia profunda del objeto para asegurar reactividad
+      const itemCopy = JSON.parse(JSON.stringify(this.itemDefault));
+      if (this.useVuexORM && !this.vuexLocalforage) {
+        const modelInstance = new this.model(itemCopy);
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(modelInstance).forEach(key => {
+          this.$set(this.item, key, modelInstance[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(key => {
+          if (!(key in modelInstance)) {
+            this.$delete(this.item, key);
+          }
+        });
       } else {
-        this.item = JSON.parse(JSON.stringify(this.itemDefault));
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(itemCopy).forEach(key => {
+          this.$set(this.item, key, itemCopy[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(key => {
+          if (!(key in itemCopy)) {
+            this.$delete(this.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(() => {
+        this.$forceUpdate();
+        this.$bvModal.show("modal-form-item-" + this.modelName);
+      });
     },
     updateItem(id, itemIndex = null) {
+      let item;
       if (itemIndex == null) {
-        let item = this.items.find(it => it.id == id);
-        this.item = item;
+        item = this.items.find(it => it.id == id);
       } 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
+      const itemCopy = JSON.parse(JSON.stringify(item));
+      if (this.useVuexORM && !this.vuexLocalforage) {
+        const modelInstance = new this.model(itemCopy);
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(modelInstance).forEach(key => {
+          this.$set(this.item, key, modelInstance[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(key => {
+          if (!(key in modelInstance)) {
+            this.$delete(this.item, key);
+          }
+        });
+      } else {
+        // Usar $set para cada propiedad para asegurar reactividad
+        Object.keys(itemCopy).forEach(key => {
+          this.$set(this.item, key, itemCopy[key]);
+        });
+        // Eliminar propiedades que ya no existen
+        Object.keys(this.item).forEach(key => {
+          if (!(key in itemCopy)) {
+            this.$delete(this.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(() => {
+        this.$forceUpdate();
+        this.$bvModal.show("modal-form-item-" + this.modelName);
+      });
     },
     removeItem(id, index) {
       this.$bvModal.msgBoxConfirm(this.messageRemoveConfirm, {
@@ -20361,13 +21539,32 @@ var crudHelpers = {
       });
     },
     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() {
-      this.$refs["modal-export"].show();
+      // Asegurar que loading esté en false al abrir el modal
+      this.loading = false;
+      if (this.$refs.crudModals && this.$refs.crudModals.$refs["modal-export"]) {
+        this.$refs.crudModals.$refs["modal-export"].show();
+      }
     },
     showImportModal() {
-      this.$refs["modal-import"].show();
+      // Asegurar que loading esté en false al abrir el modal
+      this.loading = false;
+      if (this.$refs.crudModals && this.$refs.crudModals.$refs["modal-import"]) {
+        this.$refs.crudModals.$refs["modal-import"].show();
+      }
     },
     onDraggableAdded(event) {
       this.$emit("draggableAdded", event);
@@ -20466,7 +21663,7 @@ var crudHelpers = {
   }
 };
 
-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-3751aeba]:last-child,\ntr td[data-v-3751aeba]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\ntbody tr.selected[data-v-3751aeba] {\n  background-color: #e3f2fd !important; }\n  tbody tr.selected[data-v-3751aeba] td[data-v-3751aeba] {\n    background-color: transparent !important; }\n  tbody tr.selected[data-v-3751aeba][data-v-3751aeba]:hover {\n    background-color: #bbdefb !important; }\n    tbody tr.selected[data-v-3751aeba][data-v-3751aeba]:hover td[data-v-3751aeba] {\n      background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-3751aeba]:nth-of-type(odd) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-3751aeba]:nth-of-type(odd) td[data-v-3751aeba] {\n    background-color: transparent !important; }\n\n.table-striped tbody tr.selected[data-v-3751aeba]:nth-of-type(even) {\n  background-color: #e3f2fd !important; }\n  .table-striped tbody tr.selected[data-v-3751aeba]:nth-of-type(even) td[data-v-3751aeba] {\n    background-color: transparent !important; }\n\n.crud-pagination[data-v-3751aeba] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-3751aeba] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-3751aeba] .crud-title[data-v-3751aeba] {\n    margin: 0; }\n  .crud-header[data-v-3751aeba] .crud-search[data-v-3751aeba] {\n    max-width: 15rem; }\n    .crud-header[data-v-3751aeba] .crud-search[data-v-3751aeba] .btn[data-v-3751aeba] {\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-3751aeba] .crud-search[data-v-3751aeba] .btn[data-v-3751aeba].open[data-v-3751aeba] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-3751aeba] .table-options[data-v-3751aeba] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-3751aeba] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-3751aeba] {\n    table-layout: auto; }\n    .table[data-v-3751aeba] tbody[data-v-3751aeba] td[data-v-3751aeba] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-3751aeba] tbody[data-v-3751aeba] td[data-v-3751aeba]::-webkit-scrollbar {\n      display: none; } }\n\n.kanban-board[data-v-3751aeba] {\n  display: flex;\n  gap: 1rem;\n  overflow-x: auto;\n  padding: 1rem; }\n\n.kanban-column[data-v-3751aeba] {\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-3751aeba] {\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-3751aeba] {\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-3751aeba] {\n  background: #ffffff;\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n  cursor: grab; }\n";
 n(css, {});
 
 const _sfc_main = {
@@ -20494,6 +21691,7 @@ const _sfc_main = {
       vuexLocalforage: this.vuexLocalforage,
       columns: this.columns,
       filter: this.filter,
+      customFilters: this.customFilters,
       enableFilters: this.enableFilters,
       infiniteScroll: this.infiniteScroll,
       sortable: this.sortable,
@@ -20514,7 +21712,7 @@ const _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,
@@ -20560,8 +21758,10 @@ const _sfc_main = {
       // Data from mixins
       crudUuid: this.crudUuid,
       moment: this.moment,
-      loading: this.loading,
-      firstLoad: this.firstLoad,
+      loading: this.loadingReactive,
+      firstLoad: this.firstLoadReactive,
+      // Proporcionar item como función getter para reactividad
+      getItem: () => this.item,
       item: this.item,
       items: this.items,
       selectedItems: this.selectedItems,
@@ -20626,12 +21826,15 @@ const _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,
@@ -20703,6 +21906,10 @@ const _sfc_main = {
       type: Array,
       default: () => []
     },
+    customFilters: {
+      type: Array,
+      default: () => []
+    },
     enableFilters: {
       type: Boolean,
       default: false
@@ -20962,12 +22169,40 @@ 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 (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 (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 (slotProps) {
+          return [_vm._t(name, null, null, slotProps)];
+        }
+      };
+    })], null, true)
+  }), _c('CrudCustom'), _c('b-overlay', {
     attrs: {
       "show": _vm.loading,
       "rounded": "sm"
     }
   }), _c('CrudPagination'), _c('CrudModals', {
+    ref: "crudModals",
     scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (slot, name) {
       return {
         key: name,
@@ -20979,7 +22214,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, "3751aeba", null, null);
 var component = __component__.exports;
 
 // Import vue component