From eb4c1dbc221ed72eb6b13dbff77fd79aaaa5fae5 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Thu, 16 Sep 2021 15:38:02 +0200
Subject: [PATCH] Refactoring search input
---
.../AppGlobalSearchInput.vue} | 52 +++++++++++--------
components/app/TInputIcon.vue | 9 +++-
components/search/SearchContainer.vue | 2 +-
pages/index.vue | 7 ++-
pages/recherche.vue | 9 ++++
5 files changed, 52 insertions(+), 27 deletions(-)
rename components/{home/HomeSearch.vue => app/AppGlobalSearchInput.vue} (86%)
diff --git a/components/home/HomeSearch.vue b/components/app/AppGlobalSearchInput.vue
similarity index 86%
rename from components/home/HomeSearch.vue
rename to components/app/AppGlobalSearchInput.vue
index ca412e76..9495136b 100644
--- a/components/home/HomeSearch.vue
+++ b/components/app/AppGlobalSearchInput.vue
@@ -1,31 +1,37 @@
<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) {
diff --git a/components/app/TInputIcon.vue b/components/app/TInputIcon.vue
index 0620b3ff..293665ab 100644
--- a/components/app/TInputIcon.vue
+++ b/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>
diff --git a/components/search/SearchContainer.vue b/components/search/SearchContainer.vue
index 59d3a605..10d57244 100644
--- a/components/search/SearchContainer.vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 89b74bdf..88a37167 100644
--- a/pages/index.vue
+++ b/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"
diff --git a/pages/recherche.vue b/pages/recherche.vue
index 564b1c1e..201de525 100644
--- a/pages/recherche.vue
+++ b/pages/recherche.vue
@@ -1,5 +1,6 @@
<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 })
--
GitLab