<template>
  <div class="demo-popup-content-direction">
    <div class="demo-popup-content-direction__row" v-for="(row, index) in rows" :key="index">
      <hive-popup
        trigger-type="hover"
        :key="direction"
        :direction="direction"
        v-for="direction in row"
      >
        <div class="demo-popup-content">
          <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
          </ul>
        </div>
        <template v-slot:trigger>
          <hive-button>{{ direction }}</hive-button>
        </template>
      </hive-popup>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        rows: [
          ['top left', 'top center', 'top right'],
          ['left top', 'left center', 'left bottom'],
          ['right top', 'right center', 'right bottom'],
          ['bottom left', 'bottom center', 'bottom right'],
        ],
      };
    },
  };
</script>
