<template>
  <div 
    class="ui-menu-item" 
    :class="{ active }" 
    ref="self" 
    @mouseenter="emit('enter')" 
    @mouseleave="emit('leave')"
    @click="emit('click')">
    <UIIcon :type="icon" size="18px" />
    <span>{{ text }}</span>
    <slot />
  </div>
</template>

<script setup>
import UIIcon from '../icon'
import { defineProps, defineExpose, defineEmits, ref } from 'vue'

const self = ref(null)
const props = defineProps({
  icon: {
    type: String,
    require: true
  },
  text: {
    type: String,
    require: true
  },
  active: {
    type: Boolean
  }
})
const emit = defineEmits(['leave', 'enter', 'click'])

defineExpose({ dom: self })
</script>

<script> export default { name: 'ui-menu-item' } </script>