upgrade to version 2

Author: sohepalslamat

README.md

@@ -32,57 +32,61 @@ Example:
 ```html
 <div class="form">
     <label for="search">Search</label>
-    <input id="search" v-model="search" type="text" />
+    <input id="search" v-model="queries.search" type="text" />
     <label for="user_id">User Id</label>
-    <input id="user_id" v-model="user_id" type="number" />
+    <input id="user_id" v-model="queries.user_id" type="number" />
 
     <div class="pagination">
-      <a @click="page > 1 ? page-- : page=1">&laquo;</a>
-      <a v-for="i in 6" :key="i" @click="page=i" :class="{active: page == i }">{{i}}</a>
-      <a @click="page < 6 ? page++ : page=6">&raquo;</a>
+      <a @click="queries.page > 1 ? queries.page-- : queries.page=1">&laquo;</a>
+      <a v-for="i in 6" :key="i" @click="queries.page=i" :class="{active: queries.page == i }">{{i}}</a>
+      <a @click="queries.page < 6 ? queries.page++ : queries.page=6">&raquo;</a>
     </div>
     <div>
       <h5>Queries As Object: {{$route.query}}</h5>
       <h5>Queries As Url: {{queriesAsUrl}}</h5>
     </div>
   </div>
 ```
+##### With Vue2 option api:
 ```js
 import { SfpService } from "vue-sfp-services";
 
-const queries = {
-      page: 1,
-      search: '',
-      user_id: 1,
-      // .. any data you want 
-    }
 export default {
   data(){
     return {
-      ...new SfpService(this.$router, this.$route, queries).queries
+      queries:{
+        page: 1,
+        search: "",
+        user_id: 1,
+        // .. any data you want 
+      }
     }
-  }
+  },
+  created(){
+    new SfpService(this.$router, this.$route, this.queries)
+  },
 }
 ```
-##### With composition api:
+##### With composition api Vue3:
 ```js
+import { reactive } from "vue"
 import { useRouter, useRoute } from 'vue-router'
 //...
 //..
 setup() {
     const router = useRouter()
     const route = useRoute()
-    const queries = {
+    const queries = reactive({
       page: 1,
       search: '',
       user_id: 1,
       // .. any data you want 
-    }
+    })
 
-    const sfp = new SfpService(router, route, queries)
+    new SfpService(router, route, queries)
 
     return {
-      ...sfp.queries
+      queries
     };
   },
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-sfp-services",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Package allows us to use pagination, search and filter easily made with VueJS",
   "author": {
     "name": "Sohaib Alslamat",

src/components/HelloSfp.vue

@@ -20,16 +20,16 @@
     </header>
     <div class="form">
       <label for="search">Search</label>
-      <input id="search" v-model="search" type="text" />
+      <input id="search" v-model="queries.search" type="text" />
       <label for="user_id">User Id</label>
-      <input id="user_id" v-model="user_id" type="number" />
+      <input id="user_id" v-model="queries.user_id" type="number" />
 
       <div class="pagination">
-        <a @click="page > 1 ? page-- : (page = 1)">&laquo;</a>
-        <a v-for="i in 6" :key="i" @click="page = i" :class="{ active: page == i }">{{
+        <a @click="queries.page > 1 ? queries.page-- : (queries.page = 1)">&laquo;</a>
+        <a v-for="i in 6" :key="i" @click="queries.page = i" :class="{ active: queries.page == i }">{{
           i
         }}</a>
-        <a @click="page < 6 ? page++ : (page = 6)">&raquo;</a>
+        <a @click="queries.page < 6 ? queries.page++ : (queries.page = 6)">&raquo;</a>
       </div>
       <div>
         <h5>Queries As Object: {{ JSON.stringify($route.query) }}</h5>
@@ -40,19 +40,22 @@
 </template>
 <script>
 import { defineComponent } from "vue";
-// import { SfpService } from "../lib/main";
-import { SfpService } from "../../dist/vue-sfp-services.es";
-const queries = {
-  page: 1,
-  search: "",
-  user_id: 1,
-};
+import { SfpService } from "../lib/main";
+// import { SfpService } from "../../dist/vue-sfp-services.es";
+
 export default defineComponent({
   data() {
     return {
-      ...new SfpService(this.$router, this.$route, queries).queries,
+      queries:{
+        page: 1,
+        search: "",
+        user_id: 1,
+      }
     };
   },
+  created(){
+    new SfpService(this.$router, this.$route, this.queries)
+  },
   computed: {
     queriesAsUrl() {
       const paramObj = this.$route.query;
@@ -62,17 +65,6 @@ export default defineComponent({
       return qs;
     },
   },
-  setup() {
-    // const queries = {
-    //   page: 1,
-    //   search: '',
-    //   user_id: 1
-    // }
-    // const sfp = new SfpService(router, route, queries)
-    // return {
-    //   ...sfp.queries
-    // };
-  },
 });
 </script>
 <style>

src/lib/sfp-service.ts

@@ -1,46 +1,43 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ref, watch } from "vue"
+import { computed, watch } from "vue"
 
 export default class SfpService {
     private _router: any
-    private _queries: {[key:string]:any}
+    private routeQueries: {[key:string]:any}
 
     constructor(router: any, route: any, queries: {[key:string]:any}) {
         this._router = router
-       
-        const self:{[key:string]:any} = this
-        
-        const initQueries = () => {
-            const returnQueries: {[key:string]:any} = {}
-            for (const [key,query] of Object.entries(queries)) {
-                self[key] = ref(route.query[key] ? route.query[key] : query)
-                watch(self[key], () =>{
-                    this._setQuery(this._queries)
-                })
-                returnQueries[key] = self[key]
-            }
-            return returnQueries
-        }
+        this.routeQueries = computed(()=>{
+            return route.query
+        })
 
-        this._queries = initQueries()
-        
-    }
-    /// return queries as data
-    get queries(): any {
-        return this._queries
-    }
+        this._getQueryFromUrl(queries,this.routeQueries.value)
 
+        watch(this.routeQueries,(val)=>{
+            this._getQueryFromUrl(queries,val)
+        })
+        watch(queries, (val)=>{
+            this._setQuery(val)
+        })
+    }
+    
     /// set queries in route in url
     private _setQuery(queries: {[key:string]:any}) {
         this._router.replace({ path: '', query: { ...this._fixQueriesToSet(queries) } })
     }
 
+    /// get queries from url
+    private _getQueryFromUrl(queries: {[key:string]:any}, routeQueries: {[key:string]:any}) {
+        for (const [key,query] of Object.entries(queries)) {
+            queries[key] = routeQueries[key] ? routeQueries[key] : query
+        }
+    }
+
     /// fix queries before send
-    private _fixQueriesToSet(queries: {[key:string]:any}): {[key:string]:any} {
+    private _fixQueriesToSet(queries: {[key:string]:any}) {
         const x:{[key:string]:any} = {...queries}
         Object.keys(x).forEach(function(key) {
-            x[key].value ? x[key] = x[key].value : delete x[key]
+            if(!x[key]) delete x[key]
           })
 
         return x