sfp_front_vue_diarista_prestador/src/components/payments/AntecipacaoConfirmDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="confirm-card bg-surface" :flat="false">
      <div class="row justify-end q-pt-sm q-pr-sm">
        <q-btn flat round dense icon="close" color="grey-6" size="sm" @click="onDialogCancel" />
      </div>

      <q-card-section class="column items-center q-pt-xs q-pb-sm q-px-lg">
        <div class="text-body1 text-weight-bold text-text text-center">
          {{ $t('provider.payments.anticipation_confirm_title') }}
        </div>
      </q-card-section>

      <q-card-section class="row q-gutter-x-sm q-pt-xs q-pb-lg q-px-lg">
        <q-btn
          unelevated
          rounded
          no-caps
          color="grey-5"
          text-color="white"
          class="col"
          :label="$t('provider.payments.anticipation_confirm_cancel')"
          @click="onDialogCancel"
        />
        <q-btn
          unelevated
          rounded
          no-caps
          color="primary"
          class="col"
          :label="$t('provider.payments.anticipation_confirm_ok')"
          @click="onDialogOK()"
        />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar';

defineEmits([...useDialogPluginComponent.emits]);
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
</script>

<style scoped>
.confirm-card {
  width: 300px;
  max-width: 96vw;
  border-radius: 20px !important;
}
</style>