rule book dup/delete

2026-06-09 23:44:16 +02:00
parent 5ac369a643
commit 9cd0d5fb5e
8 changed files with 205 additions and 8 deletions
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {storeToRefs} from "pinia";
+import {Modal} from "@/components";
+import {useConfirmStore} from "./useConfirm";
+
+const confirmStore = useConfirmStore();
+const {open, options} = storeToRefs(confirmStore);
+const {accept, cancel} = confirmStore;
+
+const modalOpen = computed({
+  get: () => open.value,
+  set: value => {
+    if (!value) {
+      cancel();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal v-model:open="modalOpen">
+    <div class="bg-slate-800 rounded pb-4 w-96">
+      <span class="m-2">{{ options.title ?? "Confirm" }}</span>
+      <hr />
+      <div class="m-4">{{ options.message }}</div>
+      <div class="flex justify-end">
+        <button class="me-2" @click="cancel">{{ options.cancelLabel ?? "Cancel" }}</button>
+        <button class="confirm me-4" :class="options.danger ? 'danger' : ''" @click="accept">{{ options.confirmLabel ?? "Confirm" }}</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+@reference "@/style.css";
+
+button.confirm {
+  @apply border-emerald-500 bg-emerald-500 hover:bg-emerald-600;
+
+  &.danger {
+    @apply border-amber-900 bg-amber-900 hover:bg-amber-800;
+  }
+}
+</style>