feat: search results pagination

closes #61

src/.vuepress/api/api.js

@@ -14,15 +14,15 @@ class ApiService {
     );
   }
 
-  async search(value) {
+  async search(value, from, size) {
     return this.request('/search', 'POST', {
       query: {
         simple_query_string: {
           query: value
         }
       },
-      from: 0,
-      size: 10
+      from,
+      size
     })
   }
 

src/.vuepress/components/SearchPage.vue

 <template>
   <div>
-    <SearchInput @search="onSearch" />
+    <SearchInput @search="onSearchInput" />
 
-    <SearchResultList v-if="items.length > 0" :items="items"/>
+    <SearchResultList
+      v-if="items.length > 0"
+      :items="items"
+      @page-change="onPageChange"
+    />
     <SearchResultEmpty v-else />
   </div>
 </template>
@@ -19,12 +23,22 @@ export default {
   },
   data() {
     return {
-      items: []
+      query: '',
+      items: [],
+      size: 10
     }
   },
   methods: {
-    async onSearch(value) {
-      const searchResponse = await apiService.search(value);
+    onSearchInput(query) {
+      this.query = query;
+      this.search(this.query, 0, this.size)
+    },
+    onPageChange(page) {
+      const from = this.size * (page - 1);
+      this.search(this.query, from, this.size);
+    },
+    async search(value, from, size) {
+      const searchResponse = await apiService.search(value, from, size);
 
       if (searchResponse) {
         const items = searchResponse.hits?.hits;

src/.vuepress/components/SearchResultList.vue

@@ -66,6 +66,11 @@ export default {
       }
       return this.viewerBaseUrl + '/' + language + '/#/?itemurl=' + item.item
     },
+  },
+  watch: {
+    page: function() {
+      this.$emit('page-change', this.page);
+    }
   }
 }
 </script>