vue-laravel-crud 1.4.16 → 1.4.18

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

@@ -17305,7 +17305,7 @@ var moment$1 = {
 	})));
 } (moment$1));
 
-var moment = momentExports;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-09914f57]:last-child,\ntr td[data-v-09914f57]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-09914f57] {\n  display: flex;\n  justify-content: center; }\n\n.crud-header[data-v-09914f57] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-09914f57] .crud-title[data-v-09914f57] {\n    margin: 0; }\n  .crud-header[data-v-09914f57] .crud-search[data-v-09914f57] {\n    max-width: 15rem; }\n    .crud-header[data-v-09914f57] .crud-search[data-v-09914f57] .btn[data-v-09914f57] {\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-09914f57] .crud-search[data-v-09914f57] .btn[data-v-09914f57].open[data-v-09914f57] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-09914f57] .table-options[data-v-09914f57] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-09914f57] {\n  position: relative;\n  top: -15px; }\n\n@media (min-width: 992px) {\n  .table[data-v-09914f57] {\n    table-layout: auto; }\n    .table[data-v-09914f57] tbody[data-v-09914f57] td[data-v-09914f57] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-09914f57] tbody[data-v-09914f57] td[data-v-09914f57]::-webkit-scrollbar {\n      display: none; } }\n";
+var moment = momentExports;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-98011f56]:last-child,\ntr td[data-v-98011f56]:first-child {\n  width: 1%;\n  white-space: nowrap; }\n\n.crud-pagination[data-v-98011f56] {\n  display: flex;\n  justify-content: center; }\n\n.crud-header[data-v-98011f56] {\n  display: flex;\n  justify-content: space-between;\n  max-height: 3rem; }\n  .crud-header[data-v-98011f56] .crud-title[data-v-98011f56] {\n    margin: 0; }\n  .crud-header[data-v-98011f56] .crud-search[data-v-98011f56] {\n    max-width: 15rem; }\n    .crud-header[data-v-98011f56] .crud-search[data-v-98011f56] .btn[data-v-98011f56] {\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-98011f56] .crud-search[data-v-98011f56] .btn[data-v-98011f56].open[data-v-98011f56] {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0; }\n  .crud-header[data-v-98011f56] .table-options[data-v-98011f56] {\n    margin-bottom: 1rem;\n    display: flex;\n    align-items: center;\n    justify-content: flex-end; }\n\n.custom-control[data-v-98011f56] {\n  position: relative;\n  top: -15px; }\n\n@media (min-width: 992px) {\n  .table[data-v-98011f56] {\n    table-layout: auto; }\n    .table[data-v-98011f56] tbody[data-v-98011f56] td[data-v-98011f56] {\n      overflow: scroll;\n      -ms-overflow-style: none;\n      /* IE and Edge */\n      scrollbar-width: none;\n      /* Firefox */ }\n    .table[data-v-98011f56] tbody[data-v-98011f56] td[data-v-98011f56]::-webkit-scrollbar {\n      display: none; } }\n";
 n(css, {});function normalizeComponent (
     scriptExports,
     render,
@@ -18025,6 +18025,7 @@ n(css, {});function normalizeComponent (
       axios.delete(this.apiUrl + "/" + this.modelName + "/" + id).then(function (response) {
         _this11.items.splice(index, 1);
         _this11.toastSuccess("Elemento eliminado.");
+        _this11.$emit("itemDeleted", {});
         _this11.loading = false;
       }).catch(function (error) {
         _this11.toastError(error);
@@ -18209,6 +18210,12 @@ n(css, {});function normalizeComponent (
                   _this15.loading = false;
                   if (_this15.refreshAfterSave) _this15.refresh();
                   _this15.toastSuccess("Elemento Modificado");
+                  _this15.$emit("itemSaved", {
+                    item: _this15.item
+                  });
+                  _this15.$emit("itemUpdated", {
+                    item: _this15.item
+                  });
                 }).catch(function (error) {
                   _this15.toastError(error);
                   _this15.loading = false;
@@ -18240,6 +18247,12 @@ n(css, {});function normalizeComponent (
                     _this15.item = itemSv;
                     if (_this15.refreshAfterSave) _this15.refresh();
                     _this15.toastSuccess("Elemento Creado");
+                    _this15.$emit("itemSaved", {
+                      item: _this15.item
+                    });
+                    _this15.$emit("itemCreated", {
+                      item: _this15.item
+                    });
                   }).catch(function (error) {
                     _this15.toastError(error);
                     _this15.loading = false;
@@ -18261,6 +18274,12 @@ n(css, {});function normalizeComponent (
                     _this15.item = itemSv;
                     if (_this15.refreshAfterSave) _this15.refresh();
                     _this15.toastSuccess("Elemento Creado");
+                    _this15.$emit("itemSaved", {
+                      item: _this15.item
+                    });
+                    _this15.$emit("itemCreated", {
+                      item: _this15.item
+                    });
                   }).catch(function (error) {
                     _this15.toastError(error);
                     _this15.loading = false;
@@ -18660,7 +18679,9 @@ var _sfc_render = function render() {
           "scope": "col"
         }
       }, [_vm.enableFilters && _vm.filtersVisible && _vm.isColumnHasFilter(column) && _vm.internalFilterByProp(column.prop) ? _vm._t('filter-' + column.prop, function () {
-        return [column.type == 'boolean' ? _c('select', {
+        return [_c('div', {
+          staticClass: "form-group"
+        }, [column.type == 'boolean' ? _c('select', {
           directives: [{
             name: "model",
             rawName: "v-model",
@@ -18709,7 +18730,7 @@ var _sfc_render = function render() {
             callback: function callback($$v) {
               _vm.$set(_vm.internalFilterByProp(column.prop + '_from'), "value", $$v);
             },
-            expression: "\n                        internalFilterByProp(column.prop + '_from').value\n                      "
+            expression: "\n                          internalFilterByProp(column.prop + '_from').value\n                        "
           }
         })], 1), _c('div', {
           staticClass: "col-6"
@@ -18725,7 +18746,7 @@ var _sfc_render = function render() {
             callback: function callback($$v) {
               _vm.$set(_vm.internalFilterByProp(column.prop + '_to'), "value", $$v);
             },
-            expression: "\n                        internalFilterByProp(column.prop + '_to').value\n                      "
+            expression: "\n                          internalFilterByProp(column.prop + '_to').value\n                        "
           }
         })], 1)]) : column.type == 'state' ? _c('select', {
           directives: [{
@@ -18823,7 +18844,7 @@ var _sfc_render = function render() {
               _vm.$set(_vm.internalFilterByProp(column.prop), "value", $event.target.value);
             }
           }
-        })];
+        })], 1)];
       }, {
         "column": column,
         "filter": _vm.filter,
@@ -19112,7 +19133,7 @@ var _sfc_render = function render() {
     on: {
       "submit": _vm.saveItem
     }
-  }, [_vm._t("form", function () {
+  }, [_vm.item ? _vm._t("form", function () {
     return [_c('b-form-group', {
       attrs: {
         "label": "Nombre:",
@@ -19134,7 +19155,7 @@ var _sfc_render = function render() {
     })], 1)];
   }, {
     "item": _vm.item
-  }), _c('b-button', {
+  }) : _vm._e(), _c('b-button', {
     attrs: {
       "block": "",
       "type": "submit",
@@ -19145,29 +19166,30 @@ var _sfc_render = function render() {
     attrs: {
       "small": ""
     }
-  }) : _vm._e(), _vm._v(_vm._s(_vm.messageSave) + " ")], 1)], 2)] : _vm._e(), !_vm.validate ? [_vm._t("form", function () {
-    return [_c('b-form-group', {
-      attrs: {
-        "label": "Nombre:",
-        "description": "Nombre "
-      }
-    }, [_c('b-form-input', {
-      attrs: {
-        "type": "text",
-        "required": "",
-        "placeholder": "Nombre"
-      },
-      model: {
-        value: _vm.item.title,
-        callback: function callback($$v) {
-          _vm.$set(_vm.item, "title", $$v);
+  }) : _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) {
+      return _c('b-form-group', {
+        key: key,
+        attrs: {
+          "label": key
+        }
+      }, [_c('b-form-input', {
+        attrs: {
+          "type": "text",
+          "required": ""
         },
-        expression: "item.title"
-      }
-    })], 1)];
+        model: {
+          value: _vm.item[key],
+          callback: function callback($$v) {
+            _vm.$set(_vm.item, key, $$v);
+          },
+          expression: "item[key]"
+        }
+      })], 1);
+    });
   }, {
     "item": _vm.item
-  }), _c('b-button', {
+  }) : _vm._e(), _c('b-button', {
     attrs: {
       "block": "",
       "type": "submit",
@@ -19191,16 +19213,27 @@ var _sfc_render = function render() {
       "title": _vm.title,
       "no-close-on-backdrop": ""
     }
-  }, [_vm._t("show", function () {
-    return [_c('p', {
-      staticClass: "my-4"
-    }, [_vm._v("Show")])];
+  }, [_vm.item ? _vm._t("show", function () {
+    return [_c('b-list-group', _vm._l(_vm.item, function (value, key) {
+      return _c('b-list-group-item', {
+        key: key
+      }, [_c('b-row', [_c('b-col', {
+        staticClass: "font-weight-bold",
+        attrs: {
+          "cols": "4"
+        }
+      }, [_vm._v(_vm._s(key))]), _c('b-col', {
+        attrs: {
+          "cols": "8"
+        }
+      }, [_vm._v(_vm._s(JSON.stringify(value)))])], 1)], 1);
+    }), 1)];
   }, {
     "item": _vm.item
-  })], 2)], 1);
+  }) : _vm._e()], 2)], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "09914f57", null, null);
+var __component__ = /*#__PURE__*/normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "98011f56", 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.4.16",
+    "version": "1.4.18",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",

package/src/vue-laravel-crud.vue

@@ -32,6 +32,7 @@ export default /*#__PURE__*/ {
       filterSidebarOpen: false,
       internalFilters: [],
       forceRecomputeCounter: 0,
+
       displayModes: {
         MODE_TABLE: 1,
         MODE_CARDS: 2,
@@ -636,6 +637,7 @@ export default /*#__PURE__*/ {
         .then((response) => {
           this.items.splice(index, 1);
           this.toastSuccess("Elemento eliminado.");
+          this.$emit("itemDeleted", {});
           this.loading = false;
         })
         .catch((error) => {
@@ -783,6 +785,8 @@ export default /*#__PURE__*/ {
             this.loading = false;
             if (this.refreshAfterSave) this.refresh();
             this.toastSuccess("Elemento Modificado");
+            this.$emit("itemSaved", {item: this.item});
+            this.$emit("itemUpdated", {item: this.item});
           })
           .catch((error) => {
             this.toastError(error);
@@ -822,6 +826,8 @@ export default /*#__PURE__*/ {
               this.item = itemSv;
               if (this.refreshAfterSave) this.refresh();
               this.toastSuccess("Elemento Creado");
+              this.$emit("itemSaved", {item: this.item});
+              this.$emit("itemCreated", {item: this.item});
             })
             .catch((error) => {
               this.toastError(error);
@@ -847,6 +853,8 @@ export default /*#__PURE__*/ {
               this.item = itemSv;
               if (this.refreshAfterSave) this.refresh();
               this.toastSuccess("Elemento Creado");
+              this.$emit("itemSaved", {item: this.item});
+              this.$emit("itemCreated", {item: this.item});
             })
             .catch((error) => {
               this.toastError(error);
@@ -1073,58 +1081,62 @@ export default /*#__PURE__*/ {
                       isColumnHasFilter(column) &&
                       internalFilterByProp(column.prop)
                     ">
-                    <select v-if="column.type == 'boolean'" class="form-control"
-                      v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
-                      <option value="">{{ column.label }}</option>
-                      <option value="1">Sí</option>
-                      <option value="0">No</option>
-                    </select>
 
-                    <div class="row" v-else-if="column.type == 'date'">
-                      <div class="col-6">
-                        <b-form-datepicker v-model="
-                          internalFilterByProp(column.prop + '_from').value
-                        " today-button reset-button close-button locale="es"></b-form-datepicker>
-                      </div>
-                      <div class="col-6">
-                        <b-form-datepicker v-model="
-                          internalFilterByProp(column.prop + '_to').value
-                        " today-button reset-button close-button locale="es"></b-form-datepicker>
+                    <div class="form-group">
+                      <select v-if="column.type == 'boolean'" class="form-control"
+                        v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
+                        <option value="">{{ column.label }}</option>
+                        <option value="1">Sí</option>
+                        <option value="0">No</option>
+                      </select>
+
+                      <div class="row" v-else-if="column.type == 'date'">
+                        <div class="col-6">
+                          <b-form-datepicker v-model="
+                            internalFilterByProp(column.prop + '_from').value
+                          " today-button reset-button close-button locale="es"></b-form-datepicker>
+                        </div>
+                        <div class="col-6">
+                          <b-form-datepicker v-model="
+                            internalFilterByProp(column.prop + '_to').value
+                          " today-button reset-button close-button locale="es"></b-form-datepicker>
+                        </div>
                       </div>
-                    </div>
 
-                    <select v-else-if="column.type == 'state'" class="form-control"
-                      v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
-                      <option value="">{{ column.label }}</option>
-                      <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
-                        {{
-                          option.text
-                          ? option.text
-                          : option.label
-                            ? option.label
-                            : ""
-                        }}
-                      </option>
-                    </select>
+                      <select v-else-if="column.type == 'state'" class="form-control"
+                        v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
+                        <option value="">{{ column.label }}</option>
+                        <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
+                          {{
+                            option.text
+                            ? option.text
+                            : option.label
+                              ? option.label
+                              : ""
+                          }}
+                        </option>
+                      </select>
 
-                    <select v-else-if="column.type == 'array'" class="form-control"
-                      v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
-                      <option value="">{{ column.label }}</option>
-                      <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
-                        {{
-                          option.text
-                          ? option.text
-                          : option.label
-                            ? option.label
-                            : ""
-                        }}
-                      </option>
-                    </select>
+                      <select v-else-if="column.type == 'array'" class="form-control"
+                        v-model="internalFilterByProp(column.prop).value" @change="onChangeFilter($event)">
+                        <option value="">{{ column.label }}</option>
+                        <option :value="option.id" v-for="(option, indexo) in column.options" :key="indexo">
+                          {{
+                            option.text
+                            ? option.text
+                            : option.label
+                              ? option.label
+                              : ""
+                          }}
+                        </option>
+                      </select>
+
+                      <b-form-checkbox v-else-if="column.type == 'checkbox'" name="select-all" @change="toggleAll()">
+                      </b-form-checkbox>
+                      <input v-else class="form-control" v-model="internalFilterByProp(column.prop).value"
+                        :placeholder="column.label" @change="onChangeFilter($event)" />
 
-                    <b-form-checkbox v-else-if="column.type == 'checkbox'" name="select-all" @change="toggleAll()">
-                    </b-form-checkbox>
-                    <input v-else class="form-control" v-model="internalFilterByProp(column.prop).value"
-                      :placeholder="column.label" @change="onChangeFilter($event)" />
+                    </div>
                   </slot>
 
                   <span v-else>{{ column.label }}</span>
@@ -1315,7 +1327,7 @@ export default /*#__PURE__*/ {
       <b-overlay :show="loading" rounded="sm">
         <template v-if="validate">
           <form @submit="saveItem">
-            <slot name="form" v-bind:item="item">
+            <slot name="form" v-bind:item="item" v-if="item">
               <b-form-group label="Nombre:" description="Nombre ">
                 <b-form-input v-model="item.title" type="text" required placeholder="Nombre"></b-form-input>
               </b-form-group>
@@ -1326,9 +1338,9 @@ export default /*#__PURE__*/ {
           </form>
         </template>
         <template v-if="!validate">
-          <slot name="form" v-bind:item="item">
-            <b-form-group label="Nombre:" description="Nombre ">
-              <b-form-input v-model="item.title" type="text" required placeholder="Nombre"></b-form-input>
+          <slot name="form" v-bind:item="item" v-if="item">
+            <b-form-group :label="key" v-for="(value, key) in  item" :key="key">
+              <b-form-input v-model="item[key]" type="text" required></b-form-input>
             </b-form-group>
           </slot>
           <b-button block type="submit" variant="success" :disabled="loading" @click="saveItem()">
@@ -1338,8 +1350,15 @@ export default /*#__PURE__*/ {
       </b-overlay>
     </b-modal>
     <b-modal :id="'modal-show-item-' + modelName" hide-footer size="xl" :title="title" no-close-on-backdrop>
-      <slot name="show" v-bind:item="item">
-        <p class="my-4">Show</p>
+      <slot name="show" v-bind:item="item" v-if="item">
+        <b-list-group>
+          <b-list-group-item v-for="(value, key) in  item" :key="key">
+            <b-row>
+              <b-col cols="4" class="font-weight-bold">{{ key }}</b-col>
+              <b-col cols="8">{{ JSON.stringify(value) }}</b-col>
+            </b-row>
+          </b-list-group-item>
+        </b-list-group>
       </slot>
     </b-modal>
   </div>