sfp_vue_franchisor_ginastica_cerebro/src/components/shared/ChangeImageDialog.vue

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card
      class="q-dialog-plugin overflow-hidden"
      style="min-width: 400px"
    >
      <DefaultDialogHeader title="Trocar Imagem" @close="onDialogCancel" />

      <q-card-section class="row q-col-gutter-md q-pt-none">
        <div class="col-12 text-caption text-grey-6">
          Personalizar
        </div>

        <DefaultMediaPicker
          v-model="selectedFile"
          v-model:preview-url="previewUrl"
          accept="image/*"
          class="col-12"
          dense
          label=""
          placeholder="Buscar no Desktop"
          preview-height="200"
          show-preview
          :label-outside="false"
        />
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" class="q-pa-md q-gutter-sm">
        <q-btn
          color="negative"
          label="Cancelar"
          no-caps
          outline
          @click="onDialogCancel"
        />

        <q-btn
          color="primary"
          label="Salvar"
          no-caps
          unelevated
          :disable="!selectedFile"
          @click="onSave"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { useDialogPluginComponent } from "quasar";

import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultMediaPicker from "src/components/defaults/DefaultMediaPicker.vue";

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

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

const previewUrl = ref(null);
const selectedFile = ref(null);

const onSave = () => {
  onDialogOK({
    file: selectedFile.value,
    previewUrl: previewUrl.value,
  });
};
</script>