<template>
  <span :class="classes" @click="handleClick" :name="name">
    <checkbox-icon :value="currentValue" :indeterminate="indeterminate" :disabled="disabled"></checkbox-icon>
    <span class="uif-checkbox-label" v-if="label">{{label}}</span>
    <slot></slot>
  </span>
</template>

<script>
import CheckboxIcon from './checkbox-icon'
import mixin from './mixin'
export default {
  name: 'u-checkbox',
  mixins: [mixin],
  components: {
    CheckboxIcon
  },
  props: {
    indeterminate: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      is: 'checkbox'
    }
  },
  methods: {
    handleClick () {
      this.onChange(!this.currentValue)
    }
  }
}
</script>
