vue-laravel-crud 1.7.7 → 1.7.9

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

@@ -12532,7 +12532,7 @@ Plugin.install = function (Vue, options) {
 
 if (typeof window !== 'undefined' && window.Vue) {
   window.Vue.use(Plugin);
-}var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}var css = "tr td[data-v-e031b2ee]:last-child,\ntr td[data-v-e031b2ee]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-e031b2ee] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-e031b2ee] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-e031b2ee] .crud-title[data-v-e031b2ee] {\n    margin: 0; }\n  .crud-header[data-v-e031b2ee] .crud-search[data-v-e031b2ee] {\n    max-width: 15rem; }\n    .crud-header[data-v-e031b2ee] .crud-search[data-v-e031b2ee] .btn[data-v-e031b2ee] {\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-e031b2ee] .crud-search[data-v-e031b2ee] .btn[data-v-e031b2ee].open[data-v-e031b2ee] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-e031b2ee] .table-options[data-v-e031b2ee] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-e031b2ee] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-e031b2ee] {\n    table-layout: auto; }\n    .table[data-v-e031b2ee] tbody[data-v-e031b2ee] td[data-v-e031b2ee] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-e031b2ee] tbody[data-v-e031b2ee] td[data-v-e031b2ee]::-webkit-scrollbar {\n      display: none; } }\n";
+}var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}var css = "tr td[data-v-e5a86231]:last-child,\ntr td[data-v-e5a86231]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-e5a86231] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  justify-content: center;\n  margin-top: 1rem; }\n\n.crud-header[data-v-e5a86231] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-e5a86231] .crud-title[data-v-e5a86231] {\n    margin: 0; }\n  .crud-header[data-v-e5a86231] .crud-search[data-v-e5a86231] {\n    max-width: 15rem; }\n    .crud-header[data-v-e5a86231] .crud-search[data-v-e5a86231] .btn[data-v-e5a86231] {\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-e5a86231] .crud-search[data-v-e5a86231] .btn[data-v-e5a86231].open[data-v-e5a86231] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-e5a86231] .table-options[data-v-e5a86231] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-e5a86231] {\n  position: relative; }\n\n@media (min-width: 992px) {\n  .table[data-v-e5a86231] {\n    table-layout: auto; }\n    .table[data-v-e5a86231] tbody[data-v-e5a86231] td[data-v-e5a86231] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-e5a86231] tbody[data-v-e5a86231] td[data-v-e5a86231]::-webkit-scrollbar {\n      display: none; } }\n";
 n(css, {});function normalizeComponent (
     scriptExports,
     render,
@@ -12633,6 +12633,7 @@ n(css, {});function normalizeComponent (
   },
   data: function data() {
     return {
+      crudUuid: crudUuid,
       moment: moment,
       loading: false,
       firstLoad: false,
@@ -12666,7 +12667,8 @@ n(css, {});function normalizeComponent (
       isMobile: false,
       refreshing: false,
       fetchError: false,
-      principalSort: false
+      principalSort: false,
+      exportFormat: 'JSON'
     };
   },
   watch: {
@@ -12981,6 +12983,7 @@ n(css, {});function normalizeComponent (
     }
   },
   mounted: function mounted() {
+    this.crudUuid = ''.now;
     this.isMobile = window.matchMedia("(max-width: 1024px)").matches;
 
     // Agregar un oyente de eventos para actualizar isMobile cuando cambia el tamaño de la pantalla
@@ -13787,6 +13790,9 @@ n(css, {});function normalizeComponent (
         });
       }
     },
+    showExportModal: function showExportModal() {
+      this.$refs["modal-export"].show();
+    },
     exportItems: function exportItems() {
       var _this22 = this;
       if (this.useVuexORM) {
@@ -13811,7 +13817,7 @@ n(css, {});function normalizeComponent (
           exportItems: exportItems
         };
       }
-      params.format = 'JSON';
+      params.format = this.exportFormat;
       this.loading = true;
       axios.get(this.apiUrl + "/" + this.modelName + "/export", {
         params: params,
@@ -13824,6 +13830,9 @@ n(css, {});function normalizeComponent (
         _this22.loading = false;
       });
     },
+    showImportModal: function showImportModal() {
+      this.$refs["modal-import"].show();
+    },
     importItems: function importItems() {
       var _this23 = this;
       var formData = new FormData();
@@ -14512,15 +14521,13 @@ var _sfc_render = function render() {
     return [_vm._t("tableActionsPrepend", null, {
       "loading": _vm.loading
     }), _vm.showImport ? _c('b-button', {
-      directives: [{
-        name: "b-modal",
-        rawName: "v-b-modal.modal-import",
-        modifiers: {
-          "modal-import": true
-        }
-      }],
       attrs: {
         "variant": "info"
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.showImportModal();
+        }
       }
     }, [_c('b-icon-cloud-upload'), _vm._v(_vm._s(_vm.messageImport) + " ")], 1) : _vm._e(), _vm.showExport ? _c('b-button', {
       attrs: {
@@ -14528,7 +14535,7 @@ var _sfc_render = function render() {
       },
       on: {
         "click": function click($event) {
-          return _vm.exportItems();
+          return _vm.showExportModal();
         }
       }
     }, [_c('b-icon-cloud-download'), _vm._v(_vm._s(_vm.messageExport) + " ")], 1) : _vm._e(), _vm.showPrincipalSortBtn ? _c('b-button', {
@@ -15281,7 +15288,6 @@ var _sfc_render = function render() {
   }) : _vm._e()], 2), _vm.showImport ? _c('b-modal', {
     ref: "modal-import",
     attrs: {
-      "id": "modal-import",
       "title": "Importar",
       "hide-footer": ""
     }
@@ -15320,10 +15326,64 @@ var _sfc_render = function render() {
     }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loading ? "Cargando..." : "Importar") + " ")], 1)], 1)], 1)];
   }, {
     "item": _vm.item
+  }) : _vm._e()], 2) : _vm._e(), _vm.showExport ? _c('b-modal', {
+    ref: "modal-export",
+    attrs: {
+      "title": "Exportar",
+      "hide-footer": ""
+    }
+  }, [_vm.item ? _vm._t("export", function () {
+    return [_c('b-overlay', {
+      attrs: {
+        "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 change($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];
+        }
+      }
+    }, [_c('option', {
+      attrs: {
+        "value": "JSON"
+      }
+    }, [_vm._v("JSON")]), _c('option', {
+      attrs: {
+        "value": "XLSX"
+      }
+    }, [_vm._v("XLSX")])]), _c('div', {
+      staticClass: "text-center mt-3"
+    }, [_c('b-button', {
+      attrs: {
+        "variant": "info",
+        "disabled": _vm.loading
+      },
+      on: {
+        "click": function click($event) {
+          return _vm.exportItems();
+        }
+      }
+    }, [_c('b-icon-cloud-upload'), _vm._v(" " + _vm._s(_vm.loading ? "Cargando..." : "Exportar") + " ")], 1)], 1)])];
+  }, {
+    "item": _vm.item
   }) : _vm._e()], 2) : _vm._e()], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "e031b2ee", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "e5a86231", null, null);
 var component$1 = __component__.exports;// Import vue component
 
 // Default export is installable instance of component.

package/package.json

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

package/src/vue-laravel-crud.vue

@@ -15,6 +15,8 @@ export default /*#__PURE__*/ {
   },
   data() {
     return {
+
+      crudUuid,
       moment: moment,
       loading: false,
       firstLoad: false,
@@ -51,7 +53,7 @@ export default /*#__PURE__*/ {
       refreshing: false,
       fetchError: false,
       principalSort: false,
-
+      exportFormat: 'JSON',
     };
   },
   watch: {
@@ -378,7 +380,8 @@ export default /*#__PURE__*/ {
   },
 
   mounted() {
-
+    const now = Math.floor(Date.now() / 1000);
+    this.crudUuid = ''.now;
     this.isMobile = window.matchMedia("(max-width: 1024px)").matches;
 
     // Agregar un oyente de eventos para actualizar isMobile cuando cambia el tamaño de la pantalla
@@ -1155,6 +1158,12 @@ export default /*#__PURE__*/ {
           });
       }
     },
+
+    showExportModal(){
+      this.$refs["modal-export"].show();
+    },
+
+
     exportItems() {
       if (this.useVuexORM) {
         return;
@@ -1166,17 +1175,13 @@ export default /*#__PURE__*/ {
 
       let exportItems = true;
       let params;
-
       let ids = this.selectedItems.map(it => it.id);
-
       if (ids.length) {
         params = { ids: ids, exportItems: exportItems, };
       } else {
         params = { filters: JSON.stringify(this.finalFilters), exportItems: exportItems, };
       }
-
-      params.format = 'JSON';
-
+      params.format = this.exportFormat;
       this.loading = true;
       axios
         .get(this.apiUrl + "/" + this.modelName + "/export", { params: params, responseType: "blob", })
@@ -1190,6 +1195,10 @@ export default /*#__PURE__*/ {
         });
     },
 
+
+    showImportModal(){
+      this.$refs["modal-import"].show();
+    },
     importItems() {
       let formData = new FormData();
       formData.append("file", this.fileImport);
@@ -1695,10 +1704,10 @@ export default /*#__PURE__*/ {
             v-bind:loading="loading">
             <slot name="tableActionsPrepend" v-bind:loading="loading"> </slot>
 
-            <b-button variant="info" v-b-modal.modal-import v-if="showImport">
+            <b-button variant="info" @click="showImportModal()" v-if="showImport">
               <b-icon-cloud-upload></b-icon-cloud-upload>{{ messageImport }}
             </b-button>
-            <b-button variant="info" @click="exportItems()" v-if="showExport">
+            <b-button variant="info" @click="showExportModal()" v-if="showExport">
               <b-icon-cloud-download></b-icon-cloud-download>{{ messageExport }}
             </b-button>
             <b-button variant="info" v-if="showPrincipalSortBtn" @click="togglePrincipalSort()" :disabled="loading">
@@ -2066,7 +2075,7 @@ export default /*#__PURE__*/ {
     </b-modal>
 
 
-    <b-modal ref="modal-import" id="modal-import" title="Importar" hide-footer v-if="showImport">
+    <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-form-file v-model="fileImport" :state="Boolean(fileImport)" browse-text="Explorar"
@@ -2081,6 +2090,27 @@ export default /*#__PURE__*/ {
       </slot>
     </b-modal>
 
+    <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">
+
+          <p v-if="selectedItems.length">Se exportará {{ selectedItems.length }} elementos.</p>
+          <p v-else>Se exportará la consulta actual.</p>
+
+          <select class="form-control" v-model="exportFormat">
+            <option value="JSON">JSON</option>
+            <option value="XLSX">XLSX</option>
+          </select>
+
+          <div class="text-center mt-3">
+            <b-button variant="info" v-on:click="exportItems()" :disabled="loading">
+              <b-icon-cloud-upload></b-icon-cloud-upload>
+              {{ loading ? "Cargando..." : "Exportar" }}
+            </b-button>
+          </div>
+        </b-overlay>
+      </slot>
+    </b-modal>
   </div>
 </template>