<template>
  <div class="check" :class="{ checked: value, disabled: disabled }" @keydown="handleKeyDown" @click="handleClick" tabindex="0">
    <div class="control">
      <div class="inner"></div>
    </div>
    <div class="label">{{ title }}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    value: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    handleClick()
    {
      if (this.disabled)
        return;

      this.value = !this.value;
      this.$emit('input', this.value);
    },

    handleKeyDown(event)
    {
      if (event.keyCode == 32)
      {
        this.handleClick();
        event.preventDefault();
      }
    }
  }
}
</script>