import { extend, mergeData } from '../../vue';
import { NAME_BUTTON_GROUP } from '../../constants/components';
import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
import { sortKeys, pick } from '../../utils/object';
import { makePropsConfigurable, makeProp } from '../../utils/props';
import { props as props$1 } from '../button/button';

// --- Props ---

const props = makePropsConfigurable(sortKeys({
  ...pick(props$1, ['size']),
  ariaRole: makeProp(PROP_TYPE_STRING, 'group'),
  size: makeProp(PROP_TYPE_STRING),
  tag: makeProp(PROP_TYPE_STRING, 'div'),
  vertical: makeProp(PROP_TYPE_BOOLEAN, false)
}), NAME_BUTTON_GROUP);

// --- Main component ---

// @vue/component
const BButtonGroup = /*#__PURE__*/extend({
  name: NAME_BUTTON_GROUP,
  functional: true,
  props,
  render(h, _ref) {
    let {
      props,
      data,
      children
    } = _ref;
    return h(props.tag, mergeData(data, {
      class: {
        'btn-group': !props.vertical,
        'btn-group-vertical': props.vertical,
        [`btn-group-${props.size}`]: props.size
      },
      attrs: {
        role: props.ariaRole
      }
    }), children);
  }
});

export { BButtonGroup, props };
