dialog delete

<template>
  <transition
    enter-from-class="opacity-0"
    leave-to-class="opacity-0 ease-in-out"
    enter-active-class="transition ease-in-out duration-300"
    leave-active-class="transition ease-in-out duration-300"
  >
    <div
      class="fixed w-screen h-screen inset-0 bg-gray-600 bg-opacity-50 top-0 left-0 z-20 flex justify-center items-center"
      role="dialog"
      v-if="modelValue"
      @click.self="$emit('update:modelValue', false)"
    >
      <Paper
        style="width: 330px; max-height: 80vh"
        class="rounded-lg flex flex-col p-6 relative"
      >
        <p class="text-xl text-center font-bold text-slate-700 mb-3">
          Are You sure?
        </p>
        <p class="text-center text-sm mb-6">
          Do you really want to delete this record? This process cannot be
          undone.
        </p>
        <div class="grid grid-cols-2 gap-2">
          <button
            class="py-3 w-full font-medium text-slate-900 border-solid border-2 border-gray-200 hover:bg-slate-500/20 active:bg-slate-500/50 rounded-lg outline-none"
            @click="$emit('update:modelValue', false)"
          >
            Cancel
          </button>

          <button
            class="py-3 w-full font-medium text-white border-solid border-2 border-red-500 bg-red-500 hover:bg-red-600 active:bg-red-700 rounded-lg outline-none"
            @click="deleteData"
          >
            Delete
          </button>
        </div>
        <div
          v-if="vm.loading"
          class="overlayed absolute w-full h-full bg-white top-0 left-0 rounded-lg flex justify-center items-center"
        >
          <mdicon name="circle-medium" class="animate-ping" />
          <p class="text-base text-center font-bold text-slate-700 ml-1">
            Loading...
          </p>
        </div>
      </Paper>
    </div>
  </transition>
</template>

<script setup>
import { reactive } from "vue";
import { mainStore } from "../../store/store";
const store = mainStore();
const props = defineProps({
  modelValue: Boolean,
  key: { type: String, default: "id" },
  pocket: null,
});
const emit = defineEmits(["modelValue", "refetch"]);
const vm = reactive({
  loading: false,
});

const deleteData = () => {
  vm.loading = true;
  store
    .postApi({
      path: props.pocket.path,
      body: {
        [props.pocket.key ?? "id"]: props.pocket[props.pocket.key ?? "id"],
      },
    })
    .then((res) => {
      store.toaster(res.message, "success");
      vm.loading = false;
      emit("update:modelValue", false);
      emit("refetch");
    })
    .catch((err) => {
      vm.loading = false;
      console.log(err);
    });
};
</script>

<style></style>