<template>
  <div class="demo-popup-content">
    <hive-popup trigger-type="click" direction="bottom left" :show="show" triggerType="manual" @change="onChange">
      <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 @click="toggle">popup</hive-button>
      </template>
    </hive-popup>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
      };
    },
    methods: {
      toggle() {
        this.show = !this.show;
      },
      onChange(val) {
        this.show = val;
      },
    },
  };
</script>
