<template>
  <label
    ref="label"
    class="b-checkbox checkbox"
    :class="[size, { 'is-disabled': disabled }]"
    :disabled="disabled"
    @click="focus"
    @keydown.prevent.enter="$refs.label.click()"
  >
    <input
      ref="input"
      v-model="computedValue"
      :indeterminate.prop="indeterminate"
      type="checkbox"
      :disabled="disabled"
      :required="required"
      :name="name"
      :value="nativeValue"
      :true-value="trueValue"
      :false-value="falseValue"
      @click.stop
    >
    <span
      class="check"
      :class="type"
    />
    <span class="control-label"><slot /></span>
  </label>
</template>

<script>
import CheckRadioMixin from './CheckRadioMixin.js';

export default {
  name: 'BCheckbox',
  mixins: [CheckRadioMixin],
  props: {
    indeterminate: Boolean,
    trueValue: {
      type: [String, Number, Boolean, Function, Object, Array],
      default: true,
    },
    falseValue: {
      type: [String, Number, Boolean, Function, Object, Array],
      default: false,
    },
  },
};
</script>
