add: new price card design

Bigger header, icons for deletion and edit, form validation

app/components/Pp/DeleteDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <dialog
+    ref="dialog"
+    closedby="any"
+  >
+    <form method="dialog">
+      <header class="flex-row padding">
+        Wirklich löschen?
+        <PpButton class="round text">
+          <Icon name="uil:times" mode="svg" />
+        </PpButton>
+      </header>
+      <main>
+        <div class="padding flex-col">
+          <p>Bist du dir sicher, dass du diesen Eintrag löschen möchtest?</p>
+        </div>
+      </main>
+      <footer class="flex-row padding">
+          <PpButton class="text">
+            <span>Abbrechen</span>
+          </PpButton>
+        <PpButton class="danger raised" @click="$emit('delete')">
+          <span>Löschen</span>
+        </PpButton>
+      </footer>
+    </form>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  currentCardIndex : number
+}
+
+defineProps<Props>()
+defineEmits(['delete'])
+
+
+</script>