clean

src/components/GridSearchBar.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useDisplay } from 'vuetify';
 import { MthSearchBar, type SearchType } from "@metabohub/mth-search-bar";
 import "@metabohub/mth-search-bar/dist/style.css";
@@ -37,17 +37,26 @@ const emits = defineEmits(["submit"]);
 // DATA
 const { smAndDown } = useDisplay();
 const searchVSelectVModel = ref<string>("All");
+const searchValue = ref<string>("");
+const searchType = ref<SearchType>("EXACT");
 
 // COMPUTED
 const searchVSelectItems = computed(() => {
   return ["All", ...props.searchableHeadersTitles];
 });
 
+// WATCHERS
+watch(searchVSelectVModel, (newValue) => {
+  emits("submit", { searchValue: searchValue.value, searchType: searchType.value, searchField: newValue });
+});
+
 // METHODS
 const emitEvent = (
   searchObj: { searchInput: string; searchType: SearchType },
   field: string
 ) => {
     emits("submit", { searchValue: searchObj.searchInput, searchType: searchObj.searchType, searchField: field });
+    searchValue.value = searchObj.searchInput;
+    searchType.value = searchObj.searchType;
 };
 </script>

src/components/MthGrid.vue

@@ -179,14 +179,12 @@ const isHoverColumnKey = ref<string | undefined>();
 const slots = useSlots();
 const displayActions = ref<boolean>("actions" in slots);
 
-const searchVSelectVModel = ref<string>("All");
 const searchValue = ref<string>("");
 const searchField = reactive<string[]>([]);
 const searchType = ref<SearchType>("EXACT");
 
 const itemsSelected = ref<(string | number)[]>();
 
-// the headers displayed in the table
 const trueHeaders = ref<MthGridHeader[]>([]);
 const headersVSelectModel = ref<MthGridHeader[]>([]);
 
@@ -228,8 +226,8 @@ const trueItems = computed((): MthGridItem[] => {
 });
 
 // HOOKS -------------------------------------------------------
-// init the headers to display with all the headers
 onMounted(() => {
+  // init the headers with the props
   trueHeaders.value = [...props.headers];
   if (displayActions.value) {
     trueHeaders.value.push({
@@ -278,9 +276,6 @@ watch(itemsSelected, (newValue) => {
     return newValue!.includes(item[props.itemSelectKey]);
   }));
 });
-watch(searchVSelectVModel, (newValue) => {
-  updateSearchFields(newValue);
-});
 
 // METHODS -------------------------------------------------------
 const getSortBadge = (sortBy: { key: string, order: string }[], key: string) => {