<template>
  <router-link :to="to" v-slot="{ href, navigate, isActive }">
    <component :is="tag" :href="href" class="uif-menu-item" :target="target"
               :class="{'uif-menu-item-active': isActive, 'uif-menu-item-disabled': disabled}"
               @click="handleClick($event, navigate)">
      <slot></slot>
    </component>
  </router-link>
</template>

<script>
import { oneOf } from '@uif/core/lib/utils/assist'

export default {
  name: 'u-menu-item',
  props: {
    tag: {
      type: String,
      default: 'a'
    },
    to: {
      default: '#'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    target: {
      type: String,
      validator (value) {
        return oneOf(value, ['_blank', '_self', '_parent', '_top'])
      },
      default: '_self'
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleClick (event, navigate) {
      if (!this.disabled) {
        navigate(event)
      }
    }
  }
}
</script>
