<template>
  <ul
    v-clickOutside:[triggerElm]="innerHide"
    :class="[size && `ps-dropdown-menu--${size}`]"
    class="ps-dropdown-menu"
    @mouseenter.stop="show"
    @mouseleave.stop="hide"
  >
    <slot></slot>
  </ul>
</template>
<script lang='ts'>
import { defineComponent, getCurrentInstance, onMounted } from 'vue'
import { ClickOutside } from '@present-ui/directives'
import { useDropdown, initDropdownDomEvent } from './useDropdown'

export default defineComponent({
  name: 'PsDropdownMenu',
  directives: {
    ClickOutside,
  },
  setup() {
    const { _psDropdownSize, psDropdown } = useDropdown()
    const size = _psDropdownSize.value

    function show() {
      if (['click', 'contextmenu'].includes(psDropdown.trigger.value)) return
      psDropdown.show?.()
    }
    function hide() {
      if (['click', 'contextmenu'].includes(psDropdown.trigger.value)) return
      _hide()
    }
    function _hide() {
      psDropdown.hide?.()
    }

    onMounted(() => {
      const dropdownMenu = getCurrentInstance()
      initDropdownDomEvent(dropdownMenu, psDropdown.triggerElm.value, psDropdown.instance)
    })

    return {
      size,
      show,
      hide,
      innerHide: _hide,
      triggerElm: psDropdown.triggerElm,
    }
  },
})
</script>

