<template>
  <q-card
    flat
    bordered
    class="q-pa-md"
    :class="{ 'ui-option-group_has-error': this.hasError }"
  >
    <div v-if="!!label" class="q-mb-sm text-bold">{{ label }}</div>
    <slot name="before" />
    <q-option-group v-on="$listeners" v-bind="$attrs" />
    <slot name="after" />
  </q-card>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import BaseFormField from './BaseFormField'
import { QCard, QOptionGroup } from 'quasar'

@Component({ inheritAttrs: false, components: { QCard, QOptionGroup } })
export default class UiOptionGroup extends BaseFormField {
  @Prop(String) label?: string
}
</script>
