PopoverAbstraction.vue

<template>
  <c-popover
    align="left"
    class="actions-popover"
    :selector="scrollSelector"
    :target="target"
    @handler="$emit('close')"
  >
    <c-card class="actions" no-border>
      <slot>
        <div
          v-for="(item, index) in items"
          :class="['action', item.highlight && `-highlight-${item.highlight}`]"
          :key="index"
          @click="item.action"
        >
          <c-icon
            v-if="item.icon"
            class="icon"
            size="15"
            :icon="item.icon"
          />

          <span class="text">{{ item.label }}</span>
        </div>
      </slot>
    </c-card>
  </c-popover>
</template>

<script>
export default {
  props: {
    target: {
      type: Object,
      required: true
    },
    scrollSelector: {
      type: String,
      default: '#app-content'
    },
    items: Array
  }
}
</script>

<style lang="scss">
@import '~@styles/reference';

.actions-popover {

  & > .actions {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    min-width: 200px;

    background-color: transparent;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.75) 100%);

    & > .action {
      display: flex;
      flex-basis: 50%;
      align-items: center;

      padding: 10px 20px 10px;
      border-bottom: $base-border;
      color: map-get($text-color, base-80);

      &:hover { background-color: map-get($text-color, base-02); }

      &.-highlight-red { color: $negative-color; }
      &.-highlight-red > .icon { fill: $negative-color; }

      & > .text { padding-left: 10px; font-size: 14px; }
      & > .icon { fill: map-get($text-color, base-80); }
    }
  }
}
</style>