<template>
  <qf-popper class="qf-dropdown" ref="popper" placement="bottom-end" :trigger="trigger" :popperClass="'qf-dropdown-popper'"
             :visibleArrow="false">
    <ul>
      <slot></slot>
    </ul>
    <qf-button slot="reference" :disabled="disabled" :icon="icon" :trigger="triggerIcon">
      {{text}}
      <slot name="text"></slot>
    </qf-button>
  </qf-popper>
</template>

<script>
import QfButton from '../../button';
import QfPopper from '../../popper';

export default {
  name: 'QfDropdown',
  components: {
    QfButton,
    QfPopper
  },
  props: {
    text: String,
    disabled: Boolean,
    icon: String,
    triggerIcon: String,
    trigger: {
      type: String,
      default: 'hover'
    }
  },
  provide() {
    return {
      'dropdown': this
    };
  },
  data() {
    return {
    };
  },
  methods: {
    hideMenu() {
      this.$refs.popper.doClose();
    }
  }
};
</script>
