Implemented: centralised searchbar component through DXP

src/views/catalog.vue

@@ -13,7 +13,11 @@
       <div class="header">
         <div class="filters ion-padding-top">
           <ion-toolbar>
-            <ion-searchbar :placeholder="$t('Search products')" v-model="queryString" @keyup.enter="queryString = $event.target.value; getCatalogProducts()" />
+            <Searchbar
+              :placeholder="$t('Search products')"
+              @updateQueryString="queryString = $event"
+              @onSearch="getCatalogProducts()"
+            />
             <ion-item lines="none">
               <ion-chip :outline="prodCatalogCategoryTypeId !== filter.value" v-for="filter in filters" :key="filter.value" @click="applyFilter(filter.value)">
                 <!-- Used v-show as v-if caused the ion-chip click animation to render weirdly -->
@@ -101,7 +105,6 @@ import {
   IonLabel,
   IonMenuButton,
   IonPage,
-  IonSearchbar,
   IonThumbnail,
   IonTitle,
   IonToolbar,
@@ -132,10 +135,9 @@ export default defineComponent({
     IonLabel,
     IonMenuButton,
     IonPage,
-    IonSearchbar,
     IonThumbnail,
     IonTitle,
-    IonToolbar,
+    IonToolbar
   },
   data() {
     return {

src/views/orders.vue

@@ -21,7 +21,12 @@
     <ion-content>
       <div class="header">
         <div class="search">
-          <ion-searchbar @ionFocus="selectSearchBarText($event)" @ionClear="query.queryString = ''; updateQuery()" :value="query.queryString" v-on:keyup.enter="query.queryString = $event.target.value; updateQuery()"> </ion-searchbar>
+          <Searchbar
+            @updateQueryString="query.queryString = $event"
+            @onSearch="updateQuery()"
+            @onFocus="selectSearchBarText($event)"
+            @onClear="query.queryString = ''; updateQuery()"
+          />
         </div> 
 
         <div class="filters">
@@ -191,7 +196,6 @@ import {
   IonPage,
   IonSelect,
   IonSelectOption,
-  IonSearchbar,
   IonThumbnail,
   IonTitle,
   IonToggle,
@@ -248,7 +252,6 @@ export default defineComponent({
     IonPage,
     IonSelect,
     IonSelectOption,
-    IonSearchbar,
     IonThumbnail,
     IonTitle,
     IonToggle,

src/views/products.vue

@@ -15,7 +15,12 @@
     </ion-header>
 
     <ion-content>
-      <ion-searchbar @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search products')" v-model="queryString" v-on:keyup.enter="getProducts()"></ion-searchbar>
+      <Searchbar
+        :placeholder="$t('Search products')"
+        @updateQueryString="queryString = $event"
+        @onSearch="getProducts()"
+        @onFocus="selectSearchBarText($event)"
+      />
 
       <!-- Empty state -->
       <div class="empty-state" v-if="products.length === 0">
@@ -62,7 +67,6 @@ import {
   IonPage,
   IonThumbnail,
   IonTitle,
-  IonSearchbar,
   IonToolbar,
   modalController,
 } from "@ionic/vue";
@@ -91,7 +95,6 @@ export default defineComponent({
     IonPage,
     IonThumbnail,
     IonTitle,
-    IonSearchbar,
     IonToolbar,
     ShopifyImg
   },

src/views/warehouse-modal.vue

@@ -9,7 +9,12 @@
       <ion-title>{{ $t("Release preorder to a warehouse") }}</ion-title>
     </ion-toolbar>
     <ion-toolbar>
-      <ion-searchbar  @ionFocus="selectSearchBarText($event)" :placeholder="$t('Search warehouses')"  v-model="queryString" v-on:keyup.enter="findFacility()"></ion-searchbar>
+      <Searchbar
+        :placeholder="$t('Search warehouses')"
+        @updateQueryString="queryString = $event"
+        @onSearch="findFacility()"
+        @onFocus="selectSearchBarText($event)"
+      />
     </ion-toolbar>
   </ion-header>
 
@@ -53,7 +58,6 @@ import {
   IonRadioGroup,
   IonRadio,
   IonList,
-  IonSearchbar,
   IonTitle,
   IonToolbar,
   modalController,
@@ -231,7 +235,6 @@ export default defineComponent({
     IonList,
     IonRadioGroup,
     IonRadio,
-    IonSearchbar,
     IonTitle,
     IonToolbar 
     },

vue.config.js

@@ -1,12 +1,21 @@
+const path = require('path')
 require("@hotwax/app-version-info")
 module.exports = {
-    pluginOptions: {
-      i18n: {
-        locale: 'en',
-        fallbackLocale: 'en',
-        localeDir: 'locales',
-        enableInSFC: true
+  pluginOptions: {
+    i18n: {
+      locale: 'en',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
+  },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        vue: path.resolve('./node_modules/vue')
       }
-    },
-    runtimeCompiler: true
-  }
+    }
+  },
+  runtimeCompiler: true,
+  transpileDependencies: ['@hotwax/dxp-components']
+}