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>
        <span class="text-h6">
          <q-icon name="error" color="negative" size="2.5rem" />แจ้งเตือนการลบ
        </span>
      </q-card-section>

      <q-card-section class="q-pt-none">
        ถ้าดำเนินการต่อจะทำการลบ
      </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
          flat
          v-close-popup
          label="ลบ"
          class="text-red"
          @click="() => $emit('confirm')"
          id="dialogDeleteConfirm"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>