<template>
  <div :class="`option-group ${classes}`" v-bind="$attrs['div-attrs']" v-on="$listeners">
    <pre v-text="$attrs"/>
  </div>
</template>

<script>
  export default {
    name: 'Optiongroup',
    props: {
      value: {
        required: true,
      },
      options: {
        type: Array,
        validator(opts) {
          return opts.every(opt => 'value' in opt && 'label' in opt);
        },
      },

      name: String,

      type: {
        default: 'radio',
        validator: v => ['radio', 'checkbox', 'toggle'].includes(v),
      },

      color: String,
      keepColor: Boolean,
      dense: Boolean,

      size: String,

      leftLabel: Boolean,
      inline: Boolean,
      disable: Boolean,

    },

    computed: {
      model() {
        return Array.isArray(this.value)
          ? this.value.slice()
          : this.value;
      },

      classes() {
        return 'q-option-group q-gutter-x-sm' +
          (this.inline === true ? ' q-option-group--inline' : '');
      },

      attrs() {
        let attrs;
        if (this.type === 'radio') {
          attrs = {
            role: 'radiogroup',
          };

          if (this.disable === true) {
            attrs['aria-disabled'] = 'true';
          }

        }
        return attrs;
      },
    },
    methods: {
      __update (value) {
        this.$emit('input', value);
      }
    },

    created () {
      const isArray = Array.isArray(this.value);

      if (this.type === 'radio') {
        if (isArray) {
          console.error('q-option-group: model should not be array');
        }
      }
      else if (isArray === false) {
        console.error('q-option-group: model should be array in your case');
      }
    },
  };
</script>


<!--import Vue from 'vue'-->

<!--import QRadio from '../radio/QRadio.js'-->
<!--import QCheckbox from '../checkbox/QCheckbox.js'-->
<!--import QToggle from '../toggle/QToggle.js'-->

<!--import DarkMixin from '../../mixins/DarkMixin.js'-->
<!--import ListenersMixin from '../../mixins/listeners.js'-->

<!--import cache from '../../utils/cache.js'-->

<!--const components = {-->
<!--radio: QRadio,-->
<!--checkbox: QCheckbox,-->
<!--toggle: QToggle-->
<!--}-->

<!--const typeValues = Object.keys(components)-->

<!--export default Vue.extend({-->
<!--name: 'QOptionGroup',-->

<!--mixins: [ DarkMixin, ListenersMixin ],-->

<!--props: {-->
<!--value: {-->
<!--required: true-->
<!--},-->
<!--options: {-->
<!--type: Array,-->
<!--validator (opts) {-->
<!--return opts.every(opt => 'value' in opt && 'label' in opt)-->
<!--}-->
<!--},-->

<!--name: String,-->

<!--type: {-->
<!--default: 'radio',-->
<!--validator: v => typeValues.includes(v)-->
<!--},-->

<!--color: String,-->
<!--keepColor: Boolean,-->
<!--dense: Boolean,-->

<!--size: String,-->

<!--leftLabel: Boolean,-->
<!--inline: Boolean,-->
<!--disable: Boolean-->
<!--},-->

<!--computed: {-->
<!--component () {-->
<!--return components[this.type]-->
<!--},-->

<!--model () {-->
<!--return Array.isArray(this.value)-->
<!--? this.value.slice()-->
<!--: this.value-->
<!--},-->

<!--classes () {-->
<!--return 'q-option-group q-gutter-x-sm' +-->
<!--(this.inline === true ? ' q-option-group&#45;&#45;inline' : '')-->
<!--},-->

<!--attrs () {-->
<!--if (this.type === 'radio') {-->
<!--const attrs = {-->
<!--role: 'radiogroup'-->
<!--}-->

<!--if (this.disable === true) {-->
<!--attrs['aria-disabled'] = 'true'-->
<!--}-->

<!--return attrs-->
<!--}-->
<!--}-->
<!--},-->

<!--methods: {-->
<!--__update (value) {-->
<!--this.$emit('input', value)-->
<!--}-->
<!--},-->

<!--created () {-->
<!--const isArray = Array.isArray(this.value)-->

<!--if (this.type === 'radio') {-->
<!--if (isArray) {-->
<!--console.error('q-option-group: model should not be array')-->
<!--}-->
<!--}-->
<!--else if (isArray === false) {-->
<!--console.error('q-option-group: model should be array in your case')-->
<!--}-->
<!--},-->

<!--render (h) {-->
<!--return h('div', {-->
<!--class: this.classes,-->
<!--attrs: this.attrs,-->
<!--on: { ...this.qListeners }-->
<!--}, this.options.map(opt => h('div', [-->
<!--h(this.component, {-->
<!--props: {-->
<!--value: this.value,-->
<!--val: opt.value,-->
<!--name: opt.name === void 0 ? this.name : opt.name,-->
<!--disable: this.disable || opt.disable,-->
<!--label: opt.label,-->
<!--leftLabel: opt.leftLabel === void 0 ? this.leftLabel : opt.leftLabel,-->
<!--color: opt.color === void 0 ? this.color : opt.color,-->
<!--checkedIcon: opt.checkedIcon,-->
<!--uncheckedIcon: opt.uncheckedIcon,-->
<!--dark: opt.dark || this.isDark,-->
<!--size: opt.size === void 0 ? this.size : opt.size,-->
<!--dense: this.dense,-->
<!--keepColor: opt.keepColor === void 0 ? this.keepColor : opt.keepColor-->
<!--},-->
<!--on: cache(this, 'inp', {-->
<!--input: this.__update-->
<!--})-->
<!--})-->
<!--])))-->
<!--}-->
<!--})-->
