<script>
  import Emitter from 'heiner-ui/src/mixins/emitter';

  export default {
    name: 'HnCheckboxGroup',

    componentName: 'HnCheckboxGroup',

    mixins: [Emitter],

    inject: {
      hnFormItem: {
        default: ''
      }
    },

    props: {
      value: {},
      disabled: Boolean,
      min: Number,
      max: Number,
      size: String,
      fill: String,
      textColor: String
    },

    computed: {
      _hnFormItemSize() {
        return (this.hnFormItem || {}).hnFormItemSize;
      },
      checkboxGroupSize() {
        return this.size || this._hnFormItemSize || (this.$HEINER || {}).size;
      }
    },

    watch: {
      value(value) {
        this.dispatch('HnFormItem', 'hn.form.change', [value]);
      }
    }
  };
</script>

<template>
  <div class="hn-checkbox-group" role="group" aria-label="checkbox-group">
    <slot></slot>
  </div>
</template>
