<template>
  <div v-on="$listeners" v-bind="$attrs" class="ui-card">
    <div
      class="text-h4 q-mb-lg"
      v-if="title || $slots.title || $scopedSlots.title"
    >
      <slot name="title">{{ title }}</slot>
    </div>
    <slot />
    <div v-if="$slots.footer" class="q-mt-md">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

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

@Component({ inheritAttrs: false })
export default class UiCard extends Vue {
  @Prop(String) title!: string
}
</script>
