<template>
  <div class="bg-background">
    <q-separator v-if="separatorTop" />
    <div class="q-pa-sm">
      <div class="flex q-gutter-x-sm">
        <slot></slot>
        <q-space />
        <slot name="after"></slot>
      </div>
    </div>
    <q-separator v-if="separatorBottom" />
  </div>
</template>

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

@Component({ inheritAttrs: false, components: { QSeparator, QSpace } })
export default class UiBar extends Vue {
  @Prop({ type: Boolean, default: () => false }) separatorTop!: boolean
  @Prop({ type: Boolean, default: () => true }) separatorBottom!: boolean
}
</script>
