Organizers Page

frontend/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -122,9 +122,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Fuse from "fuse.js";
-
 import { useContextPresets } from "~/composables/use-context-presents";
 import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
 import { Organizer, type RecipeOrganizer } from "~/lib/api/types/non-generated";
@@ -138,26 +137,17 @@ interface GenericItem {
   onHand: boolean;
 }
 
-export default defineNuxtComponent({
-  components: {
-    RecipeOrganizerDialog,
-  },
-  props: {
-    items: {
-      type: Array as () => GenericItem[],
-      required: true,
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-    itemType: {
-      type: String as () => RecipeOrganizer,
-      required: true,
-    },
-  },
-  emits: ["update", "delete"],
-  setup(props, { emit }) {
+const props = defineProps<{
+  items: GenericItem[];
+  icon: string;
+  itemType: RecipeOrganizer;
+}>();
+
+const emit = defineEmits<{
+  update: [item: GenericItem];
+  delete: [id: string];
+}>();
+
 const state = reactive({
   // Search Options
   options: {
@@ -271,23 +261,4 @@ export default defineNuxtComponent({
 function isTitle(str: number | string) {
   return typeof str === "string" && str.length === 1;
 }
-
-    return {
-      groupSlug,
-      isTitle,
-      dialogs,
-      confirmDelete,
-      openUpdateDialog,
-      updateOne,
-      updateTarget,
-      deleteOne,
-      deleteTarget,
-      Organizer,
-      presets,
-      itemsSorted,
-      searchString,
-      translationKey,
-    };
-  },
-});
 </script>