refactor: move search form to separate component

packages/theme/components/AppHeader.vue

@@ -19,7 +19,6 @@
           />
         </nuxt-link>
       </template>
-
       <template
         v-if="$device.isDesktop"
         #navigation
@@ -106,81 +105,34 @@
         </div>
       </template>
       <template #search>
-        <SfSearchBar
-          ref="searchBarRef"
-          v-click-outside="closeSearch"
-          :placeholder="$t('Search for items')"
-          aria-label="Search"
-          class="sf-header__search"
-          :value="term"
-          @input="handleSearch"
-          @keydown.enter="handleSearch($event)"
-          @keydown.tab="hideSearch"
-          @focus="isSearchOpen = true"
-          @keydown.esc="closeSearch"
-        >
-          <template #icon>
-            <SfButton
-              v-if="!!term"
-              class="sf-search-bar__button sf-button--pure"
-              aria-label="Close search"
-              @click="closeSearch"
-            >
-              <span class="sf-search-bar__icon">
-                <SfIcon
-                  color="var(--c-text)"
-                  size="18px"
-                  icon="cross"
-                />
-              </span>
-            </SfButton>
-            <SfButton
-              v-else
-              class="sf-search-bar__button sf-button--pure"
-              aria-label="Open search"
-              @click="isSearchOpen ? isSearchOpen = false : isSearchOpen = true"
-              @focus="showSearch"
-              @keydown.tab="hideSearch"
-            >
-              <span class="sf-search-bar__icon">
-                <SfIcon
-                  color="var(--c-text)"
-                  size="20px"
-                  icon="search"
-                />
-              </span>
-            </SfButton>
-          </template>
-        </SfSearchBar>
+        <SearchBar
+          @SearchBar:toggle="isSearchOpen = $event"
+          @SearchBar:result="result = $event"
+        />
       </template>
     </SfHeader>
     <SearchResults
       v-if="isSearchOpen"
       :visible="isSearchOpen"
       :result="result"
-      @close="closeSearch"
-      @removeSearchResults="removeSearchResults"
     />
     <SfOverlay :visible="isSearchOpen" />
   </div>
 </template>
 
 <script>
 import {
+  SfOverlay,
   SfHeader,
   SfIcon,
   SfButton,
   SfBadge,
-  SfSearchBar,
-  SfOverlay,
 } from '@storefront-ui/vue';
 
 import {
   categoryGetters,
   useCart,
   useCategory,
-  useCategorySearch,
-  useFacet,
   useUser, useWishlist,
 } from '@vue-storefront/magento';
 import {
@@ -191,8 +143,6 @@ import {
   useContext,
   useFetch,
 } from '@nuxtjs/composition-api';
-import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
-import debounce from 'lodash.debounce';
 import HeaderNavigationItem from '~/components/Navigation/HeaderNavigationItem.vue';
 import {
   useUiHelpers,
@@ -205,40 +155,30 @@ export default defineComponent({
   components: {
     HeaderNavigationItem,
     SfHeader,
+    SfOverlay,
     CurrencySelector,
     StoreSwitcher,
     SfIcon,
     SfButton,
     SfBadge,
-    SfSearchBar,
-    SearchResults: () => import(/* webpackPrefetch: true */ '~/components/SearchResults.vue'),
-    SfOverlay,
+    SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
+    SearchResults: () => import(/* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'),
   },
-  directives: { clickOutside },
   setup() {
     const router = useRouter();
     const { app } = useContext();
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
-    const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
+    const { setTermForUrl, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated } = useUser();
     const { totalQuantity: cartTotalItems, loadTotalQty: loadCartTotalQty } = useCart();
     const { itemsCount: wishlistItemsQty, loadItemsCount: loadWishlistItemsCount } = useWishlist('GlobalWishlist');
-    const {
-      result: searchResult,
-      search: productsSearch,
-    } = useFacet('AppHeader:Products');
-    const {
-      result: categories,
-      search: categoriesSearch,
-    } = useCategorySearch('AppHeader:Categories');
+
     const {
       categories: categoryList,
       search: categoriesListSearch,
     } = useCategory('AppHeader:CategoryList');
 
-    const term = ref(getFacetsFromURL().term);
     const isSearchOpen = ref(false);
-    const searchBarRef = ref(null);
     const result = ref(null);
 
     const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
@@ -255,45 +195,6 @@ export default defineComponent({
       }
     };
 
-    const showSearch = () => {
-      if (!isSearchOpen.value) {
-        isSearchOpen.value = true;
-      }
-    };
-
-    const hideSearch = () => {
-      if (isSearchOpen.value) {
-        isSearchOpen.value = false;
-      }
-    };
-
-    const closeSearch = () => {
-      hideSearch();
-      term.value = '';
-    };
-
-    const handleSearch = debounce(async (paramValue) => {
-      term.value = !paramValue.target ? paramValue : paramValue.target.value;
-
-      await Promise.all([
-        productsSearch({
-          itemsPerPage: 12,
-          term: term.value,
-        }),
-        categoriesSearch({ filters: { name: { match: `${term.value}` } } }),
-      ]);
-
-      result.value = {
-        products: searchResult.value?.data?.items,
-        categories: categories.value
-          .map((element) => categoryGetters.getCategoryTree(element)),
-      };
-    }, 1000);
-
-    const removeSearchResults = () => {
-      result.value = null;
-    };
-
     useFetch(async () => {
       if (app.$device.isDesktop) {
         await Promise.all([loadCartTotalQty(), loadWishlistItemsCount(), categoriesListSearch({ pageSize: 20 })]);
@@ -304,19 +205,12 @@ export default defineComponent({
       accountIcon,
       cartTotalItems,
       categoryTree,
-      closeSearch,
-      showSearch,
-      hideSearch,
       getAgnosticCatLink,
       handleAccountClick,
-      handleSearch,
       isAuthenticated,
       isSearchOpen,
-      removeSearchResults,
       result,
-      searchBarRef,
       setTermForUrl,
-      term,
       toggleCartSidebar,
       toggleWishlistSidebar,
       wishlistHasProducts,

packages/theme/components/Header/SearchBar/SearchBar.vue

@@ -0,0 +1,165 @@
+<template>
+  <SfSearchBar
+    v-click-outside="closeSearch"
+    :placeholder="$t('Search for items')"
+    aria-label="Search"
+    class="sf-header__search"
+    :value="term"
+    @input="handleSearch"
+    @keydown.enter="handleSearch($event)"
+    @keydown.tab="hideSearch"
+    @focus="showSearch"
+    @click="showSearch"
+    @keydown.esc="closeSearch"
+  >
+    <template #icon>
+      <SfButton
+        v-if="!!term"
+        class="sf-search-bar__button sf-button--pure"
+        aria-label="Close search"
+        @click="closeSearch"
+      >
+        <span class="sf-search-bar__icon">
+          <SfIcon
+            color="var(--c-text)"
+            size="18px"
+            icon="cross"
+          />
+        </span>
+      </SfButton>
+      <SfButton
+        v-else
+        class="sf-search-bar__button sf-button--pure"
+        aria-label="Open search"
+        @click="toggleSearch"
+        @keydown.tab="hideSearch"
+      >
+        <span class="sf-search-bar__icon">
+          <SfIcon
+            color="var(--c-text)"
+            size="20px"
+            icon="search"
+          />
+        </span>
+      </SfButton>
+    </template>
+  </SfSearchBar>
+</template>
+
+<script>
+import {
+  SfIcon,
+  SfButton,
+  SfSearchBar,
+} from '@storefront-ui/vue';
+import { defineComponent, ref } from '@nuxtjs/composition-api';
+import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
+
+import debounce from 'lodash.debounce';
+import {
+  categoryGetters,
+  useCategorySearch,
+  useFacet,
+} from '@vue-storefront/magento';
+
+export default defineComponent({
+  name: 'SearchBar',
+  components: {
+    SfSearchBar,
+    SfButton,
+    SfIcon,
+  },
+  directives: { clickOutside },
+  props: {
+    itemsPerPage: {
+      type: Number,
+      default: 12,
+    },
+    minTermLen: {
+      type: Number,
+      default: 3,
+    },
+  },
+  setup({ itemsPerPage, minTermLen }, { emit }) {
+    const term = ref('');
+    const isSearchOpen = ref(false);
+    const result = ref(null);
+
+    const {
+      result: searchResult,
+      search: productsSearch,
+    } = useFacet('AppHeader:Products');
+
+    const {
+      result: categories,
+      search: categoriesSearch,
+    } = useCategorySearch('AppHeader:Categories');
+
+    const showSearch = () => {
+      if (!isSearchOpen.value) {
+        isSearchOpen.value = true;
+        emit('SearchBar:toggle', true);
+        if (document) {
+          document.body.classList.add('no-scroll');
+        }
+      }
+    };
+
+    const hideSearch = () => {
+      if (isSearchOpen.value) {
+        isSearchOpen.value = false;
+        emit('SearchBar:toggle', false);
+        emit('SearchBar:result', {});
+        if (document) {
+          document.body.classList.remove('no-scroll');
+        }
+      }
+    };
+
+    const toggleSearch = () => {
+      if (isSearchOpen.value) {
+        hideSearch();
+      } else {
+        showSearch();
+      }
+    };
+
+    const closeSearch = () => {
+      hideSearch();
+      term.value = '';
+    };
+
+    const handleSearch = debounce(async (paramValue) => {
+      term.value = !paramValue.target ? paramValue : paramValue.target.value;
+      if (term.value.length < minTermLen) return;
+
+      await Promise.all([
+        productsSearch({
+          itemsPerPage,
+          term: term.value,
+        }),
+        categoriesSearch({ filters: { name: { match: `${term.value}` } } }),
+      ]);
+
+      result.value = {
+        products: searchResult.value?.data?.items,
+        categories: (categories?.value ?? [])
+          .map((element) => categoryGetters.getCategoryTree(element)),
+      };
+
+      emit('SearchBar:result', result.value);
+    }, 1000);
+
+    return {
+      closeSearch,
+      showSearch,
+      hideSearch,
+      toggleSearch,
+      handleSearch,
+      isSearchOpen,
+      term,
+    };
+  },
+});
+
+</script>