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

<script lang="ts" setup>
import { defineEmits, defineExpose, defineProps, ref } from 'vue'
import UIIcon from '@kankan/components/basic/icon'
import { menuItemProps } from './menu-item'

defineOptions({
    name: 'UIMenuItem',
})

const self = ref(null)
// const props =
defineProps(menuItemProps)
const emit = defineEmits(['leave', 'enter', 'click'])

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