<template>
  <q-dialog v-model="visible__" no-backdrop-dismiss :maximized="maximized" :full-width="fullWidth">
    <q-card class="q-pa-sm q-ma-xl relative-position" style="overflow-y: visible; min-width: 300px; max-height: 80vh;">
      <q-card-section class="q-pt-none" :class="{[`text-${titleColor}`]: !!titleColor}">
        <div class="row justify-between items-center no-wrap">
          <slot name="header">
            <div class="text-h6 text-bold">
              {{ title }}
            </div>
          </slot>
          <w-btn
            v-if="!hideCloseButton"
            v-close-popup
            :title="closeButtonLabel"
            :aria-label="closeButtonLabel"
            dense
            round
            flat
            color="grey-10"
            icon="fal fa-times"
          />
        </div>
      </q-card-section>
      <q-card-section>
        <slot />
      </q-card-section>
      <q-card-actions v-if="$slots.actions" align="right">
        <slot name="actions" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: "WDialog",
  props: {
    title: {
      type: String,
      default: () => null,
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    maximized: {
      type: Boolean,
      default: false,
    },
    hideCloseButton: {
      type: Boolean,
      default: false,
    },
    closeButtonLabel: {
      type: String,
      default: "Close dialog popup",
    },
    fullWidth: {
      type: Boolean,
      default: false,
    },
    titleColor: {
      type: String,
      default: null,
    },
  },
  emits: ["update:modelValue"],
  computed: {
    visible__: {
      get() {
        return this.modelValue || false;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>
