<template>
  <q-dialog v-bind="$attrs" v-on="$listeners">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none q-mb-lg">
        <div class="text-h6">{{ title }}</div>
      </q-card-section>
      <q-card-section class="q-pa-none">
        <slot />
      </q-card-section>
      <q-card-section
        v-if="$slots.actions"
        class="no-wrap flex q-pa-none ui-gap-x-sm q-mt-lg"
      >
        <slot name="actions" />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QCard, QCardActions, QCardSection, QDialog } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QDialog, QCard, QCardSection, QCardActions },
})
export default class UiDialog extends Vue {
  @Prop(String) title?: string
}
</script>
