<template>
  <q-dialog :model-value="modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <DialogHeader :tittle="props.title" :close="close" />
      <q-separator />
      <q-card-section
        :class="props.fix ? 'q-pa-md scroll' : 'q-pa-md'"
        :style="props.fix ? 'height: 50vh' : ''"
      >
        <slot name="body" />
      </q-card-section>
      <q-separator />
      <q-card-actions class="text-primary">
        <slot name="footer" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script setup lang="ts">
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";

const props = defineProps({
  title: {
    required: true,
    type: String,
    default: "",
  },
  modal: {
    required: true,
    type: Boolean,
    default: false,
  },
  fix: {
    required: true,
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["update:modal"]);

const close = async () => {
  emit("update:modal", false);
};
</script>
