<template>
  <div :class="{'show': isOpen}" v-on:click.stop="onClick">
    <button type="button" class="nav-link dropdown-toggle" :class="{disabled}" id="navbarDropdown" @click.prevent="toggleDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" :aria-expanded="isOpen">
      {{label}}
    </button>
    <div class="dropdown-menu" :class="{'show': isOpen}" aria-labelledby="navbarDropdown">
      <div v-on:click="toggleDropdown">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  button {
    background: none;
    border: 0;
    cursor: pointer;
  }
  .dropdown-menu {
    position: absolute;
  }
  .dropdown-menu /deep/ .nav-link{
    &.active, &:active {
      background: none;
    }
  }
</style>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true,
      docs: `De tekst van de link waarmee je de dropdown opent.`,
      demoValue: 'Dropdown'
    },
    disabled: {
      type: Boolean,
      required: false,
    }
  },
  created() {
    document.addEventListener('click', () => {
      // close dropdown when click outside element.
      if(this.isOpen) {
        this.toggleDropdown();
      }
    }, false);
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    onClick() {
      // purpose: clicking outside the dropdown should close the dropdown, but when clicking inside nothing should happen (stop propagation)
      return true;
    }
  }
}
</script>
