Merged to props and events

frontend/src/components/UI/ButtonRow.vue

@@ -3,10 +3,24 @@
     <template v-slot:extension>
       <v-col></v-col>
       <div v-if="open">
-        <v-btn class="mr-2" fab dark small color="error" @click="deleteRecipe">
+        <v-btn
+          class="mr-2"
+          fab
+          dark
+          small
+          color="error"
+          @click="deleteRecipeConfrim"
+        >
           <v-icon>mdi-delete</v-icon>
-          <Confirmation ref="confirm" />
         </v-btn>
+        <Confirmation
+          title="Delete Recpie"
+          message="Are you sure you want to delete this recipie?"
+          color="error"
+          icon="mdi-alert-circle"
+          ref="deleteRecipieConfirm"
+          v-on:confirm="deleteRecipe()"
+        />
 
         <v-btn class="mr-2" fab dark small color="success" @click="save">
           <v-icon>mdi-content-save</v-icon>
@@ -26,11 +40,12 @@
 export default {
   props: {
     open: {
-      default: true,
-    },
+      type: Boolean,
+      default: true
+    }
   },
   components: {
-    Confirmation: () => import("../UI/Confirmation"),
+    Confirmation: () => import("../UI/Confirmation")
   },
   methods: {
     editor() {
@@ -39,21 +54,16 @@ export default {
     save() {
       this.$emit("save");
     },
-    async deleteRecipe() {
-      if (
-        await this.$refs.confirm.open(
-          "Delete Recpie",
-          "Are you sure you want to delete this recipie?",
-          { color: "error", icon: "mdi-alert-circle" }
-        )
-      ) {
-        this.$emit("delete");
-      }
+    deleteRecipeConfrim() {
+      this.$refs.deleteRecipieConfirm.open();
+    },
+    deleteRecipe() {
+      this.$emit("delete");
     },
     json() {
       this.$emit("json");
-    },
-  },
+    }
+  }
 };
 </script>