Recipe Search Dialog

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -52,10 +52,6 @@
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
-          <!-- <router-link
-            :to="advancedSearchUrl"
-            class="text-primary"
-          > {{ $t("search.advanced-search") }} </router-link> -->
         </v-card-actions>
 
         <RecipeCardMobile
@@ -76,7 +72,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { RecipeSummary } from "~/lib/api/types/recipe";
@@ -85,17 +81,15 @@ import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 import { usePublicExploreApi } from "~/composables/api/api-client";
 
 const SELECTED_EVENT = "selected";
-export default defineNuxtComponent({
-  components: {
-    RecipeCardMobile,
-  },
 
-  setup(_, context) {
+// Define emits
+const emit = defineEmits<{
+  selected: [recipe: RecipeSummary];
+}>();
+
 const $auth = useMealieAuth();
-    const state = reactive({
-      loading: false,
-      selectedIndex: -1,
-    });
+const loading = ref(false);
+const selectedIndex = ref(-1);
 
 // ===========================================================================
 // Dialog State Management
@@ -105,7 +99,7 @@ export default defineNuxtComponent({
 watch(dialog, (val) => {
   if (!val) {
     search.query.value = "";
-        state.selectedIndex = -1;
+    selectedIndex.value = -1;
     search.data.value = [];
   }
 });
@@ -116,17 +110,17 @@ export default defineNuxtComponent({
 function selectRecipe() {
   const recipeCards = document.getElementsByClassName("arrow-nav");
   if (recipeCards) {
-        if (state.selectedIndex < 0) {
-          state.selectedIndex = -1;
+    if (selectedIndex.value < 0) {
+      selectedIndex.value = -1;
       document.getElementById("arrow-search")?.focus();
       return;
     }
 
-        if (state.selectedIndex >= recipeCards.length) {
-          state.selectedIndex = recipeCards.length - 1;
+    if (selectedIndex.value >= recipeCards.length) {
+      selectedIndex.value = recipeCards.length - 1;
     }
 
-        (recipeCards[state.selectedIndex] as HTMLElement).focus();
+    (recipeCards[selectedIndex.value] as HTMLElement).focus();
   }
 }
 
@@ -137,11 +131,11 @@ export default defineNuxtComponent({
   }
   else if (e.key === "ArrowUp") {
     e.preventDefault();
-        state.selectedIndex--;
+    selectedIndex.value--;
   }
   else if (e.key === "ArrowDown") {
     e.preventDefault();
-        state.selectedIndex++;
+    selectedIndex.value++;
   }
   else {
     return;
@@ -158,9 +152,8 @@ export default defineNuxtComponent({
   }
 });
 
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 const route = useRoute();
-    const advancedSearchUrl = computed(() => `/g/${groupSlug.value}`);
+const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 watch(route, close);
 
 function open() {
@@ -177,22 +170,15 @@ export default defineNuxtComponent({
 const search = useRecipeSearch(api);
 
 // Select Handler
-
 function handleSelect(recipe: RecipeSummary) {
   close();
-      context.emit(SELECTED_EVENT, recipe);
+  emit(SELECTED_EVENT, recipe);
 }
 
-    return {
-      ...toRefs(state),
-      advancedSearchUrl,
-      dialog,
+// Expose functions to parent components
+defineExpose({
   open,
   close,
-      handleSelect,
-      search,
-    };
-  },
 });
 </script>