<script>
export default {
  name: 'EbButtonList',
  functional: true,
  props: {
    position: {
      default: 'left',
      type: String,
      description: 'Position of Buttons',
      validator: val => ['left', 'right', 'center'].includes(val.toLowerCase())
    }
  },
  render(createElement, { props, data, slots, listeners }) {
    const { attrs, staticStyle, style } = data;

    return createElement(
      'div',
      {
        class: {
          'btn-list': true,
          'text-left': props.position === 'left',
          'text-right': props.position === 'right',
          'text-center': props.position === 'center'
        },
        attrs: attrs,
        style: { ...staticStyle, ...style },
        on: listeners
      },
      slots().default
    );
  }
};
</script>

<style scoped>
.btn-list > .btn:not(:last-child),
.btn-list > .dropdown:not(:last-child) {
  margin-right: 0.5rem;
}
.btn-list > .btn,
.btn-list > .dropdown {
  margin-bottom: 0.5rem;
}
</style> 