<template>
  <div class="card" :style="{ left: popoverPosition.x + 'px', top: popoverPosition.y + 'px' }">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    posX: {
      type: Number,
      required: true
    },
    maxX: {
      type: Number,
      required: true
    },
    posY: {
      type: Number,
      required: true
    }
  },

  computed: {
    popoverPosition() {
      const pos = { x: this.posX + 40, y: this.posY - 120 }
      if (pos.y < 0) pos.y = 0
      if (pos.x > this.maxX) pos.x = this.maxX
      return pos
    }
  }
}
</script>

<style lang="sass" scoped>
$popover-width: 320px //280px

.card
  width: $popover-width
  position: absolute
  padding: 1rem
  z-index: 100
  border-radius: 5px
</style>
