Added Archiving

components/ButtonWithConfirm.vue

@@ -0,0 +1,62 @@
+<script setup>
+const emit = defineEmits(['confirmed'])
+
+const props = defineProps({
+  color: {
+    type: String,
+    required:false
+  },
+  variant: {
+    type: String,
+    required:false
+  }
+
+})
+
+const {color,variant} = props
+
+const showModal = ref(false)
+
+const emitConfirm = () => {
+  emit('confirmed')
+}
+</script>
+
+<template>
+  <UButton
+    :color="color"
+    :variant="variant"
+    @click="showModal = true"
+  >
+    <slot name="button"></slot>
+  </UButton>
+  <UModal v-model="showModal">
+    <UCard>
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+      <slot/>
+      <template #footer>
+        <div class="text-right">
+          <UButton
+              color="rose"
+              variant="outline"
+              @click="showModal = false"
+          >
+            Abbrechen
+          </UButton>
+          <UButton
+              @click="emitConfirm"
+              class="ml-2"
+          >
+            Bestätigen
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>