vue-laravel-crud 2.0.7 → 2.0.8

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

@@ -14815,7 +14815,7 @@ var _sfc_render$3 = function render() {
 };
 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";
+var CrudCustom = __component__$3.exports;var css$2 = "\n.export-format-options[data-v-a032ebce] {\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-a032ebce] {\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-a032ebce]: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-a032ebce] .custom-control-input:checked ~ .custom-control-label {\r\n  color: #007bff;\r\n  font-weight: 600;\n}\n.export-format-radio[data-v-a032ebce] .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-a032ebce] .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-a032ebce] .custom-control-label::before {\r\n  margin-right: 0.5rem;\n}\n.export-format-radio[data-v-a032ebce] svg {\r\n  font-size: 1.5rem;\r\n  color: #495057;\n}\n.export-format-radio[data-v-a032ebce] .custom-control-input:checked ~ .custom-control-label svg {\r\n  color: #007bff;\n}\r\n";
 n(css$2, {});var _sfc_main$2 = {
   name: 'CrudModals',
   inject: ['modelName', 'title', 'loading', 'validate', 'item', 'getItem', 'messageSave', 'showImport', 'showExport', 'fileImport', 'selectedItems', 'exportFormat', 'saveItem', 'importItems', 'exportItems'],
@@ -14828,6 +14828,10 @@ n(css$2, {});var _sfc_main$2 = {
       }
       // Si no, usar el item inyectado directamente
       return this.item;
+    },
+    // Computed property para manejar loading como objeto reactivo o booleano
+    loadingValue: function loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
     }
   },
   watch: {
@@ -14854,7 +14858,7 @@ var _sfc_render$2 = function render() {
     }
   }, [_c('b-overlay', {
     attrs: {
-      "show": _vm.loading,
+      "show": _vm.loadingValue,
       "rounded": "sm"
     }
   }, [_vm.validate ? [_c('form', {
@@ -14888,9 +14892,9 @@ var _sfc_render$2 = function render() {
       "block": "",
       "type": "submit",
       "variant": "success",
-      "disabled": _vm.loading
+      "disabled": _vm.loadingValue
     }
-  }, [_vm.loading ? _c('b-spinner', {
+  }, [_vm.loadingValue ? _c('b-spinner', {
     attrs: {
       "small": ""
     }
@@ -14922,14 +14926,14 @@ var _sfc_render$2 = function render() {
       "block": "",
       "type": "submit",
       "variant": "success",
-      "disabled": _vm.loading
+      "disabled": _vm.loadingValue
     },
     on: {
       "click": function click($event) {
         return _vm.saveItem();
       }
     }
-  }, [_vm.loading ? _c('b-spinner', {
+  }, [_vm.loadingValue ? _c('b-spinner', {
     attrs: {
       "small": ""
     }
@@ -14969,7 +14973,7 @@ var _sfc_render$2 = function render() {
   }, [_vm.item ? _vm._t("import", function () {
     return [_c('b-overlay', {
       attrs: {
-        "show": _vm.loading,
+        "show": _vm.loadingValue,
         "rounded": "sm"
       }
     }, [_c('b-form-file', {
@@ -14991,14 +14995,14 @@ var _sfc_render$2 = function render() {
     }, [_c('b-button', {
       attrs: {
         "variant": "info",
-        "disabled": _vm.loading
+        "disabled": _vm.loadingValue
       },
       on: {
         "click": function click($event) {
           return _vm.importItems();
         }
       }
-    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loading ? "Cargando..." : "Importar") + " ")], 1)], 1)], 1)];
+    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loadingValue ? "Cargando..." : "Importar") + " ")], 1)], 1)], 1)];
   }, {
     "item": _vm.item
   }) : _vm._e()], 2) : _vm._e(), _vm.showExport ? _c('b-modal', {
@@ -15010,7 +15014,7 @@ var _sfc_render$2 = function render() {
   }, [_vm.item ? _vm._t("export", function () {
     return [_c('b-overlay', {
       attrs: {
-        "show": _vm.loading,
+        "show": _vm.loadingValue,
         "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('b-form-group', {
@@ -15053,20 +15057,20 @@ var _sfc_render$2 = function render() {
     }, [_c('b-button', {
       attrs: {
         "variant": "info",
-        "disabled": _vm.loading
+        "disabled": _vm.loadingValue
       },
       on: {
         "click": function click($event) {
           return _vm.exportItems();
         }
       }
-    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loading ? "Cargando..." : "Exportar") + " ")], 1)], 1)], 1)];
+    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loadingValue ? "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, "051e3fd7", null, null);
+var __component__$2 = /*#__PURE__*/normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, "a032ebce", null, null);
 var CrudModals = __component__$2.exports;var vueInfiniteLoading = {exports: {}};/*!
  * vue-infinite-loading v2.4.5
  * (c) 2016-2020 PeachScript
@@ -21996,6 +22000,9 @@ axios.default = axios;var crudApi = {
     },
     createItem: function createItem() {
       var _this6 = this;
+      // Asegurar que loading esté en false al abrir el modal
+      this.loading = false;
+
       // Hacer copia profunda del objeto para asegurar reactividad
       var itemCopy = JSON.parse(JSON.stringify(this.itemDefault));
       if (this.useVuexORM && !this.vuexLocalforage) {
@@ -22034,6 +22041,8 @@ axios.default = axios;var crudApi = {
     updateItem: function updateItem(id) {
       var _this7 = this;
       var itemIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      // Asegurar que loading esté en false al abrir el modal
+      this.loading = false;
       var item;
       if (itemIndex == null) {
         item = this.items.find(function (it) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "2.0.7",
+    "version": "2.0.8",
     "type": "module",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",

package/src/components/CrudModals.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- Modal de formulario -->
     <b-modal :id="'modal-form-item-' + modelName" hide-footer size="xl" :title="title" no-close-on-backdrop>
-      <b-overlay :show="loading" rounded="sm">
+      <b-overlay :show="loadingValue" rounded="sm">
         <template v-if="validate">
           <form @submit="saveItem">
             <template v-if="reactiveItem">
@@ -12,8 +12,8 @@
                 </b-form-group>
               </slot>
             </template>
-            <b-button block type="submit" variant="success" :disabled="loading">
-              <b-spinner small v-if="loading"></b-spinner>{{ messageSave }}
+            <b-button block type="submit" variant="success" :disabled="loadingValue">
+              <b-spinner small v-if="loadingValue"></b-spinner>{{ messageSave }}
             </b-button>
           </form>
         </template>
@@ -25,8 +25,8 @@
               </b-form-group>
             </slot>
           </template>
-          <b-button block type="submit" variant="success" :disabled="loading" @click="saveItem()">
-            <b-spinner small v-if="loading"></b-spinner>{{ messageSave }}
+          <b-button block type="submit" variant="success" :disabled="loadingValue" @click="saveItem()">
+            <b-spinner small v-if="loadingValue"></b-spinner>{{ messageSave }}
           </b-button>
         </template>
       </b-overlay>
@@ -51,13 +51,13 @@
     <!-- Modal de importación -->
     <b-modal ref="modal-import" title="Importar" hide-footer v-if="showImport">
       <slot name="import" v-bind:item="item" v-if="item">
-        <b-overlay :show="loading" rounded="sm">
+        <b-overlay :show="loadingValue" rounded="sm">
           <b-form-file v-model="fileImport" :state="Boolean(fileImport)" browse-text="Explorar"
             placeholder="Importar..." drop-placeholder="Arrastrar Archivo aquí..."></b-form-file>
           <div class="text-center mt-3">
-            <b-button variant="info" v-on:click="importItems()" :disabled="loading">
+            <b-button variant="info" v-on:click="importItems()" :disabled="loadingValue">
               <b-icon-cloud-upload></b-icon-cloud-upload>
-              {{ loading ? "Cargando..." : "Importar" }}
+              {{ loadingValue ? "Cargando..." : "Importar" }}
             </b-button>
           </div>
         </b-overlay>
@@ -67,7 +67,7 @@
     <!-- Modal de exportación -->
     <b-modal ref="modal-export" title="Exportar" hide-footer v-if="showExport">
       <slot name="export" v-bind:item="item" v-if="item">
-        <b-overlay :show="loading" rounded="sm">
+        <b-overlay :show="loadingValue" rounded="sm">
 
           <p v-if="selectedItems.length">Se exportará {{ selectedItems.length }} elementos.</p>
           <p v-else>Se exportará la consulta actual.</p>
@@ -94,9 +94,9 @@
           </b-form-group>
 
           <div class="text-center mt-3">
-            <b-button variant="info" v-on:click="exportItems()" :disabled="loading">
+            <b-button variant="info" v-on:click="exportItems()" :disabled="loadingValue">
               <b-icon-cloud-upload></b-icon-cloud-upload>
-              {{ loading ? "Cargando..." : "Exportar" }}
+              {{ loadingValue ? "Cargando..." : "Exportar" }}
             </b-button>
           </div>
         </b-overlay>
@@ -134,6 +134,10 @@ export default {
       }
       // Si no, usar el item inyectado directamente
       return this.item;
+    },
+    // Computed property para manejar loading como objeto reactivo o booleano
+    loadingValue() {
+      return this.loading && this.loading.value !== undefined ? this.loading.value : this.loading;
     }
   },
   watch: {