sfp_front_vue_serprati_associado_app/src/components/RefuseExamDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="refuse-card">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6 text-violet-normal">{{ $t("agendamento.recusar_guia") }}</div>
        <q-space />
        <q-btn icon="mdi-close" flat round dense @click="onDialogCancel" />
      </q-card-section>

      <q-separator class="q-mt-sm" />

      <q-card-section class="q-pt-md">
        <div class="text-body2 text-grey-8 q-mb-md">
          {{ $t("agendamento.recusar_guia_aviso") }}
        </div>

        <DefaultInput
          v-model="reason"
          :label="$t('agendamento.motivo_recusa')"
          type="textarea"
          autogrow
          counter
          maxlength="500"
          class="input-violet"
        />
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" class="q-pa-sm">
        <q-btn flat color="grey-7" :label="$t('common.actions.cancel')" @click="onDialogCancel" />
        <q-btn
          unelevated
          color="negative"
          :label="$t('agendamento.recusar')"
          @click="onDialogOK({ reason })"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";
import DefaultInput from "src/components/defaults/DefaultInput.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();

const reason = ref("");
</script>

<style scoped lang="scss">
.refuse-card {
  width: 90vw;
  max-width: 520px;
  min-width: 300px;
}
</style>