<template>
  <div class="rel visible-inline-block">
    <div class="dropdown__control" @click="active = !active">
      <slot>
        <base-button
          apperance="outline"
          size="small"
          square
        >
          <i class="fas fa-ellipsis-v"></i>
        </base-button>
      </slot>
    </div>

    <div v-if="active" class="overlay" @click="active = false"></div>

    <div
      v-if="active"
      class="abs vertical-padding-small background-white shadow-medium rounded-small"
      style="max-width:10.5rem; top:0; right:0; z-index:110;"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        :class="['visible-block hover:background-light', {'bottom-border-gray': item.bottomLine}, {'top-border-gray': item.topLine,}]"
      >
        <a
          v-if="item.href"
          :href="item.href"
          class="visible-block horizontal-padding-medium cursor-pointer text-ellipsis text-small text-dark"
          style="height:2.25rem; line-height:2.25rem;">
          {{item.title}}
        </a>
        <span
          v-else
          @click="onClick(item.click)"
          class="visible-block horizontal-padding-medium cursor-pointer text-ellipsis text-small text-dark"
          style="height:2.25rem; line-height:2.25rem;">
          {{item.title}}
        </span>
      </div>
    </div>
  </div>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css"></style>

<script src="./scripts.js"></script>