hrms-edm/Services/client/src/components/DialogDelete.vue

<script setup lang="ts">
defineEmits(['confirm', 'cancel', 'update:open'])

const props = withDefaults(
  defineProps<{
    open: boolean
  }>(),
  {
    open: false,
  },
)
</script>

<template>
  <q-dialog
    persistent
    transition-show="scale"
    transition-hide="scale"
    :model-value="props.open"
    @update:model-value="(v) => $emit('update:open', v)"
  >
    <q-card style="width: 400px">
      <q-card-section>
        <div class="flex items-center">
          <div class="q-pa-sm">
            <div style="border-radius: 50%" class="bg-secondary q-pa-sm">
              <q-icon
                name="mdi-trash-can-outline"
                color="negative"
                size="2.5rem"
              />
            </div>
          </div>
          <div>
            <h6 class="q-my-none">ยืนยันการลบข้อมูล</h6>
            <p class="q-my-none">ต้องการยืนยันการลบข้อมูลนี้หรือไม่</p>
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white text-primary">
        <q-space />
        <q-btn
          label="ยกเลิก"
          flat
          v-close-popup
          @click="() => $emit('update:open', !open)"
          id="dialogDeleteClose"
        />

        <q-btn
          color="negative"
          v-close-popup
          label="ลบ"
          @click="() => $emit('confirm')"
          id="dialogDeleteConfirm"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>