refactor: move logic of valid query check to parent component

src/.vuepress/components/SearchPage.vue

@@ -22,8 +22,9 @@
 
     <SearchResultList
       v-else
-      
+
       :items="items"
+      :message="message"
       :query="query"
     />
 
@@ -55,6 +56,7 @@ export default {
     return {
       items: [],
       loading: false,
+      message: '',
       page: 1,
       query: null,
       size: 20,
@@ -74,20 +76,23 @@ export default {
       this.loading = true;
 
       const from = this.size * (this.page - 1);
-      this.search(this.query, from, this.size);
+      this.search(this.query.trim(), from, this.size);
     }
   },
   computed: {
+    invalid() {
+      return this.query.match(/^\s*$/);
+    },
     pagesAmount() {
       return this.total > 0 ? Math.ceil(this.total / this.size) : 1;
-    }
+    },
   },
   methods: {
     onSearchInput(query) {
       this.query = query;
       this.page = 1;
 
-      this.search(this.query, 0, this.size)
+      this.search(this.query.trim(), 0, this.size)
     },
     async search(value, from, size) {
       try {
@@ -103,9 +108,13 @@ export default {
           this.total = searchResponse.hits?.total?.value || 0;
           this.items = items.map(x => ({ ...x, searchTerm: value }));
         }
+
+        if (!this.invalid) this.message = `No search results found for <code>${this.query}</code>.`;
       } catch(error) {
           this.items = [];
           this.total = 0;
+
+          this.message = 'Please enter a valid search term.';
       } finally {
         this.loading = false;
       }

src/.vuepress/components/SearchResultEmpty.vue

@@ -7,8 +7,7 @@
       elevation="2"
       >
       <!-- TODO: provide translation -->
-      <span v-if="invalid">Please enter a valid search term.</span>
-      <span v-else>No search results found for <code>{{ query }}</code></span>
+      <span v-html="message"></span>
     </v-alert>
   </div>
 </template>
@@ -16,14 +15,9 @@
 <script>
 export default {
   props: {
-    query: {
+    message: {
       type: String,
-      default: () => null,
-    },
-  },
-  computed: {
-    invalid() {
-      return this.query.match(/^\s*$/);
+      default: () => '',
     },
   },
 };

src/.vuepress/components/SearchResultList.vue

@@ -26,7 +26,7 @@
       </v-list-item>
     </v-list>
 
-    <SearchResultEmpty :query="query" v-else-if="query !== null" />
+    <SearchResultEmpty :message="message" :query="query" v-else-if="query !== null" />
   </div>
 </template>
 
@@ -50,6 +50,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    message: {
+      type: String,
+      default: () => '',
+    },
     query: {
       type: String,
       default: () => null,