<template>
  <transition name="n-drop-down">
    <div class="n-options-container" v-show="visible">
      <div v-if="hasArrow" data-popper-arrow></div>
      <n-builder v-if="builders.header" :name="builders.header"></n-builder>
      <slot></slot>
      <n-builder v-if="builders.footer" :name="builders.footer"></n-builder>
    </div>
  </transition>
</template>
<script>
import NBuilder from '@uif/next/lib/components/builder'
import {prop} from '@uif/next/lib/utils/tools'

export default {
  name: 'n-options-container',
  components: {
    NBuilder
  },
  props: {
    visible: prop.boolean(),
    // 箭头
    hasArrow: prop.boolean(),
    // 自定义渲染
    builders: prop.object(() => ({
      header: null,
      footer: null
    }))
  }
}
</script>
