Implemented: searchbar component for centralised usage (hotwax#135)

src/components/Searchbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <ion-searchbar 
+    :placeholder='props.placeholder'
+    :showClearButton="props.showClearButton ? props.showClearButton : 'focus'"
+    @keyup.enter="search($event.target.value)"
+    @ionClear="emit('on-clear')"
+    @ionFocus="emit('on-focus', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { IonSearchbar } from '@ionic/vue';
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps(['placeholder', 'showClearButton'])
+// ionClear event is used in the Job Manager app on the Pipeline page hence the on-clear emit
+const emit = defineEmits(['update-query-string', 'on-search', 'on-clear', 'on-focus'])
+
+function search(queryString: string) {
+  emit('update-query-string', queryString)
+  emit('on-search')
+}
+</script>

src/components/index.ts

@@ -14,7 +14,8 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
-export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'
+export { default as ProductIdentifier } from "./ProductIdentifier.vue";
 export { default as ShopifyImg } from './ShopifyImg.vue';
+export { default as Searchbar } from './Searchbar.vue';

src/index.ts

@@ -3,7 +3,13 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, ShopifyImg } from "./components";
+import {
+  LanguageSwitcher,
+  OmsInstanceNavigator,
+  ProductIdentifier,
+  Searchbar,
+  ShopifyImg,
+} from "./components";
 import Login from "./components/Login";
 import { goToOms } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -45,6 +51,7 @@ export let dxpComponents = {
     app.component('Login', Login)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
     app.component('ProductIdentifier', ProductIdentifier)
+    app.component('Searchbar', Searchbar)
     app.component('ShopifyImg', ShopifyImg)
 
     loginContext.login = options.login
@@ -83,6 +90,7 @@ export {
   productIdentificationContext,
   ShopifyImg,
   shopifyImgContext,
+  Searchbar,
   translate,
   useAuthStore,
   useProductIdentificationStore,