sfp_front_vue_diarista_cliente/src/components/defaults/DefaultDialogHeader.vue

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

    <q-space />

    <q-btn
      v-if="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 { title, fullscreen, maximizable, icon } = defineProps({
  title: {
    type: Function,
    default: () => useI18n().t("common.terms.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 (fullscreen) {
    maximizedToggle.value = true;
  }
});
</script>