<template>
  <div class="vf-context-menu" :style="{top: position.top + 'px', left: position.left + 'px'}">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'context-menu',

  props: {
    position: {
      type: Object,
      default() {
        return {
          top: 0,
          left: 0
        };
      }
    }
  },

  data() {
    return {
    };
  },

  ready() {
    this.$appendTo(document.body);
  },

  beforeDestroy() {
    this.$remove();
  }
};
</script>

<style lang="css">
  .vf-context-menu {
    position: fixed;
    padding: 8px 0;
    text-align: left;
    font-family: arial,sans-serif;
    color: #333;
    font-size: 13px;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 200px;
  }
  .vf-context-menu__item {
    padding-left: 20px;
    line-height: 1.8;
    background-color: #fff;
  }
  .vf-context-menu__item:hover {
    background-color: #D1DFE0;
  }
</style>
