<template>
  <label>
    <input type="checkbox" class="check" v-model="checked" @change="onChange"/>
    <div></div>
    <slot></slot>
  </label>
</template>

<script>
  export default {
    name: "checkbox",
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        checked: this.value
      }
    },
    methods: {
      onChange() {
        this.$emit('input', this.checked);
      }
    },
    watch: {
      value() {
        this.checked = this.value;
      }
    }
  }
</script>
<style>
  input[type=checkbox].check, input[type=radio].check {
    display: none;
  }

  input[type=checkbox].check + div, input[type=radio].check + div {
    display: inline-block;
    vertical-align: text-bottom;
    height: 16px;
    width: 16px;
    background: #FFF;
    border: solid 1px #ddd;
    border-radius: 100%;
    position: relative;
  }

  input[type=checkbox].check:checked + div, input[type=radio].check:checked + div {
    background: #F19800 url("images/ico_check.png") no-repeat center;
    background-size: 14px;
    border-color: #F19800;
  }
</style>
