sfp_vue_franchisor_ginastica_cerebro/src/components/geral/DefaultDialogHeader.vue

<template>
  <q-bar
    class="q-py-md"
    v-bind="$attrs"
    style="min-height: 45px; max-height: 45px"
  >
    <q-icon v-if="props.icon" :name="props.icon" />
    <div>{{ props.title() }}</div>

    <q-space />

    <q-btn
      v-if="props.maximizable"
      dense
      flat
      :icon="!maximizedToggle ? 'mdi-arrow-expand' : 'mdi-arrow-collapse'"
      @click="onMaximazedClick"
    />

    <q-btn dense flat icon="mdi-close" @click="emit('close')" />
  </q-bar>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";

const emit = defineEmits(["maximized", "close"]);

const props = defineProps({
  title: {
    type: Function,
    default: () => useI18n().t("general.title"),
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
  maximizable: {
    type: Boolean,
    default: false,
  },
  icon: {
    type: String,
    default: "",
  },
});

const maximizedToggle = ref(false);

const onMaximazedClick = () => {
  maximizedToggle.value = !maximizedToggle.value;

  emit("maximized", maximizedToggle.value);
};

onMounted(() => {
  if (props.fullscreen) {
    maximizedToggle.value = true;
  }
});
</script>