Refactoring search input

components/home/HomeSearch.vue → components/app/AppGlobalSearchInput.vue

 <template>
-  <section class="bg-gray-100 dark:bg-gray-800">
-    <div class="container py-12 relative prose">
-      <div class="flex justify-evenly">
-        <TInputIcon
-          ref="search"
-          v-model="query"
-          type="search"
-          :placeholder="placeholder"
-          class="w-full"
-          input-class="text-2xl rounded-full"
-          icon="search"
-          icon-class="text-2xl text-blue-100 dark:text-gray-600"
-          @keyup.enter="search()"
-        />
+  <div class="flex justify-evenly">
+    <TInputIcon
+      ref="search"
+      v-model="query"
+      type="search"
+      :placeholder="placeholder"
+      class="w-full"
+      :input-class="inputClass"
+      icon="search"
+      :icon-class="iconClass"
+      @keyup.enter="search()"
+    />
 
-        <t-button
-          class="ml-6 rounded-full text-xl"
-          :text="$t('search')"
-          @click="search()"
-        />
-      </div>
-    </div>
-  </section>
+    <t-button :class="buttonClass" :text="$t('search')" @click="search()" />
+  </div>
 </template>
 
 <script>
 export default {
+  props: {
+    inputClass: {
+      type: String,
+      default: 'text-2xl rounded-full',
+    },
+    iconClass: {
+      type: String,
+      default: 'text-2xl text-blue-100 dark:text-gray-600',
+    },
+    buttonClass: {
+      type: String,
+      default: 'text-xl ml-6 rounded-full',
+    },
+  },
   data() {
     return {
       query: null,
@@ -58,7 +64,7 @@ export default {
       if (this.query) {
         this.$router.push(`/recherche?q=${this.query}`)
       } else {
-        this.$refs.search.$children[0].$el.focus()
+        this.$refs.search.focus()
       }
     },
     typewrite(curString, curStrPos) {

components/app/TInputIcon.vue

@@ -34,13 +34,18 @@ export default {
       type: String,
       default: null,
     },
-    focus: {
+    hasFocus: {
       type: Boolean,
       default: false,
     },
   },
   mounted() {
-    if (this.focus) this.$refs.inputIcon.$el.focus()
+    if (this.focus) this.focus()
+  },
+  methods: {
+    focus() {
+      this.$refs.inputIcon.$el.focus()
+    },
   },
 }
 </script>

components/search/SearchContainer.vue

@@ -15,7 +15,7 @@
             icon="search"
             icon-class="text-2xl text-blue-100 dark:text-gray-600"
             class="flex-1"
-            focus
+            has-focus
           />
           <slot name="search" />
         </div>

pages/index.vue

@@ -2,7 +2,12 @@
   <div>
     <HomeHero :document="hero" />
     <HomeCTA :document="cta" />
-    <HomeSearch />
+
+    <section class="bg-gray-100 dark:bg-gray-800">
+      <div class="container py-12 relative prose">
+        <AppGlobalSearchInput />
+      </div>
+    </section>
 
     <nuxt-content
       class="container my-12 prose dark:prose-dark"

pages/recherche.vue

 <template>
   <SearchContainer
+    ref="searchContainer"
     :title="$t('recherche.title')"
     :results="[]"
     :search-placeholder="$t('recherche.searchPlaceholder')"
@@ -91,6 +92,14 @@ export default {
       ressourcesResults: [],
     }
   },
+  created() {
+    this.$nuxt.$on('global-search', (query) => {
+      this.$refs.searchContainer.query = query
+    })
+  },
+  beforeDestroy() {
+    this.$nuxt.$off('global-search')
+  },
   methods: {
     async searchFunction(query) {
       let results = await this.$content({ deep: true })