<template>
  <popup v-model:value="value" style="z-index: 999" content-animate="scale" @close="$emit('destroy-popup')">

    <div class="popup-select-container relative">

      <div @click="close" class="absolute popup-select-icon cursor-pointer animate-rotate-hover">
        <icon type="close" class="popup-select-icon-target"></icon>
      </div>

      <section>
        <v-button
          v-for="(item,index) in data"
          :key="'popup-select-'+index"
          class="popup-select-button"
          @press="triggerSelect(item)"
        >{{item.label}}</v-button>
      </section>

    </div>

  </popup>
</template>

<script>
import {
  Popup,
  vButton,
  icon
} from '$components';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "popup-select",
  components:{
    Popup,
    vButton,
    icon
  },
  mixins,
  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>