<template>
  <q-chip
    v-on="$listeners"
    v-bind="$attrs"
    :color="color || 'blue-grey-2'"
    class="ui-chip"
    :class="{ 'ui-chip_has-value': !!value || !!icon }"
  >
    <div
      v-if="value || !!icon"
      @click="valueClick"
      class="ui-chip__value "
      :class="{
        'text-dark bg-warning': accent,
        'text-white bg-blue-grey-3': !accent,
        'cursor-pointer': valueClickable,
      }"
    >
      <slot name="value">
        <span v-if="value">{{ value }}</span>
      </slot>
      <q-icon v-if="!value" :name="icon" size="16px" />
    </div>
    <slot />
  </q-chip>
</template>

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

@Component({ inheritAttrs: false, components: { QChip, QIcon } })
export default class UiChip extends Vue {
  @Prop(String) value?: string
  @Prop(String) icon?: string
  @Prop(Boolean) accent?: boolean
  @Prop(String) color?: string
  @Prop(Boolean) valueClickable?: boolean

  @Emit()
  valueClick() {
    return true
  }
}
</script>
