vue-laravel-crud 1.4.7 → 1.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vue-laravel-crud",
-    "version": "1.4.7",
+    "version": "1.4.9",
     "description": "",
     "homepage": "https://github.com/clonixdev/vue-laravel-crud",
     "main": "dist/vue-laravel-crud.ssr.js",
@@ -44,11 +44,14 @@
         "rollup-plugin-polyfill-node": "^0.12.0",
         "rollup-plugin-styles": "^4.0.0",
         "rollup-plugin-terser": "^7.0.2",
-        "vue": "^2.7.0",
-        "vue-template-compiler": "^2.7.0"
+        "vue": "^2.7.14",
+        "vue-template-compiler": "^2.7.14",
+        "vuex": "^3.6.2",
+        "@vuex-orm/core": "^0.36.4",
+        "@vuex-orm/plugin-axios": "^0.9.4"
     },
     "peerDependencies": {
-        "vue": "^2.7.0"
+        "vue": "^2.7.14"
     },
     "engines": {
         "node": ">=14"

package/src/vue-laravel-crud.vue

@@ -2,7 +2,7 @@
 import draggable from "vuedraggable";
 import axios from "axios";
 import moment from "moment";
-//import { Model, Collection } from 'vue-mc';
+import { Model } from '@vuex-orm/core';
 
 export default /*#__PURE__*/ {
   name: "VueLaravelCrud",
@@ -38,8 +38,8 @@ export default /*#__PURE__*/ {
         MODE_CARDS: 2,
         MODE_CUSTOM: 3,
       },
-      useMc: false,
-      collection
+      useVuexORM: false,
+
     };
   },
   watch: {
@@ -56,9 +56,14 @@ export default /*#__PURE__*/ {
   },
   props: {
     modelName: String,
-    model: Object,
-    title: String,
 
+    title: String,
+    model: {
+      type: Object | Model,
+      default() {
+        return { id: 0 };
+      },
+    },
     models: {
       type: Array,
       default() {
@@ -262,13 +267,12 @@ export default /*#__PURE__*/ {
 
   mounted() {
 
-    /*if (this.model instanceof Model) {
-      this.useMc = true;
-      this.collection = new Collection();
-    } else {*/
+    if (this.model instanceof Model) {
+      this.useVuexORM = true;
+    } else {
       this.item = this.model;
       this.itemDefault = JSON.parse(JSON.stringify(this.item));
-    //}
+    }
 
     this.internalFilters = [];
     this.setupFilters();
@@ -320,7 +324,12 @@ export default /*#__PURE__*/ {
     },*/
 
     finalFilters() {
-      return this.filters.concat(this.filter).concat(this.internalFilter);
+
+      return [
+        ...this.filters,
+        ...this.filter,
+        ...this.internalFilter
+      ];
     },
 
     internalFilter() {
@@ -524,25 +533,20 @@ export default /*#__PURE__*/ {
       }, 1);
     },
 
-    /*fetchItemsMc(page = 1) {
+    fetchItemsVuex(page = 1) {
       this.loading = true;
       this.$emit("beforeFetch", {});
-      this.collection.page(page).fetch().then((response) => {
-        console.debug("fetch page ", page, response, this.collection);
-        this.loading = false;
-        this.$emit("afterFetch", {});
-      }).catch((error) => {
-        this.toastError(error);
-        this.loading = false;
-      });
-    },*/
+      console.debug("fetch page vuex ", page, response, this.collection);
+      this.collection = this.model.api().query().offset(page).limit(this.pagination.perPage).get();
+      this.loading = false;
+    },
     fetchItems(page = 1) {
       if (!this.ajax) {
         return;
       }
       this.$emit("beforeFetch", {});
-      if (this.useMc) {
-       // return this.fetchItemsMc(page);
+      if (this.useVuexORM) {
+        return this.fetchItemsVuex(page);
       }
       this.loading = true;
       axios