<template>
  <q-badge
    v-on="$listeners"
    v-bind="$attrs"
    :label="label"
    class="ui-badge"
    :color="_color"
    :text-color="_textColor"
  >
    <slot />
  </q-badge>
</template>

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

@Component({ inheritAttrs: false, components: { QBadge } })
export default class UiBadge extends Vue {
  @Prop(String) label?: string
  @Prop(Boolean) accent?: boolean
  @Prop(Boolean) inverse?: boolean
  @Prop(String) color?: string
  @Prop(String) textColor?: string

  get _color(): string {
    return this.color
      ? this.color
      : this.inverse
      ? 'blue-grey-3'
      : this.accent
      ? 'warning'
      : 'blue-grey-2'
  }

  get _textColor(): string {
    return this.textColor ? this.textColor : this.inverse ? 'white' : 'dark'
  }
}
</script>
