feat: implemented bang preview

src/components/CustomSearch.vue

@@ -1,9 +1,4 @@
 <template>
-    <div style="background-color: wheat;">
-        {{ searchInput }}
-
-    </div>
-
     <div class="search">
         <div class="search__form" role="form" method="post" autocomplete="off">
             <input v-model="searchInput" @keyup.arrow-down="nextSearchEngine" @keyup.arrow-up="previousSearchEngine"

src/stores/search.js

@@ -48,6 +48,11 @@ const searchEngines = {
   }
 }
 
+const bangToEngine = Object.keys(searchEngines).reduce((acc, engine) => {
+  acc[searchEngines[engine].bang] = engine
+  return acc
+}, {})
+
 export const useSearchStore = defineStore({
   id: 'search',
   state: () => ({
@@ -56,11 +61,23 @@ export const useSearchStore = defineStore({
   }),
   getters: {
     currentEngine: (state) => {
+      if (bangToEngine[state.searchBang]) {
+        return bangToEngine[state.searchBang]
+      }
+
       return state.searchEnginePriorities[0]
     },
     currentEngineData: (state) => {
       return searchEngines[state.currentEngine]
     },
+    searchBang: (state) => {
+      // if the search input starts with an exclamation mark
+      // we assume it's a bang and we want to change the search engine, so we return the contents behind the exclamation mark till the first space
+      if (state.searchInput.startsWith('!')) {
+        return state.searchInput.slice(1).split(' ')[0]
+      }
+      return ''
+    },
     searchQuery: (state) => {
       return state.searchInput.trim()
     },
@@ -69,7 +86,20 @@ export const useSearchStore = defineStore({
     },
 
     searchEngineData: (state) => {
-      return state.searchEnginePriorities.map((engine) => {
+      let priorities
+
+      if (bangToEngine[state.searchBang]) {
+        priorities = [
+          bangToEngine[state.searchBang],
+          ...state.searchEnginePriorities.filter(
+            (engine) => engine !== bangToEngine[state.searchBang]
+          )
+        ]
+      } else {
+        priorities = state.searchEnginePriorities
+      }
+
+      return priorities.map((engine) => {
         return [engine, searchEngines[engine]]
       })
     }