<template>
  <!-- open-on-hover  -->
  <v-menu
    open-on-hover
    :close-delay="1" 
    :open-delay="0" 
    v-bind="$attrs" 
    location="bottom" 
    max-height="400"
    :close-on-content-click="closeOnContentClick"
  >
    <template v-slot:activator="{ isActive, props }">
      <div v-bind="props" class="d-flex cursor-pointer menuText">
        <div>{{ defineProps.btnTitle }}</div>
        <div class="ml-2" :class="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"></div>
      </div>
    </template>
    <slot></slot>
  </v-menu>
</template>
<script setup>
// import { ref } from 'vue'
defineOptions({name: 'conditionFilter-index-page'})
const defineProps = defineProps({
  btnTitle: {
    type: String,
    default: 'Text'
  },
  closeOnContentClick: {
    type: Boolean,
    default: false
  }
})
</script>
<style lang="scss" scoped>
.menuText {
  div {
    height: 50px;
    line-height: 50px;
  }
}
</style>
