<template>
  <q-item
    v-on="$listeners"
    v-bind="$attrs"
    :clickable="!disable"
    active-class="text-dark bg-background"
    :class="{ 'text-blue-grey': disable }"
  >
    <q-item-section v-if="!!icon" side>
      <q-icon :name="icon" size="18px" color="blue-grey" />
    </q-item-section>
    <q-item-section>
      <q-item-label>
        <slot></slot>
      </q-item-label>
    </q-item-section>
    <slot name="after" />
    <q-tooltip
      v-if="!!$slots.tooltip"
      anchor="center right"
      self="center left"
      :offset="[10, 10]"
      content-class="bg-dark text-white"
    >
      <slot name="tooltip" />
    </q-tooltip>
  </q-item>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { QIcon, QItem, QItemLabel, QItemSection, QTooltip } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QItem, QItemSection, QItemLabel, QIcon, QTooltip },
})
export default class UiMenuItem extends Vue {
  @Prop(String) icon?: string
  @Prop(Boolean) disable?: boolean
}
</script>
