maestro-server/client-app

export default {
  props: {
    button: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    falseValue: { default: false },
    name: { type: String, default: null },
    readonly: { type: Boolean, default: false },
    trueValue: { default: true },
    type: { type: String, default: "primary" },
    value: { default: false }
  },
  data () {
    return {
      checked: (this.value === this.trueValue)
    }
  },
  computed: {
    inGroup () { return this.$parent && this.$parent.btnGroup && !this.$parent._radioGroup },
    isButton () { return this.button || (this.$parent && this.$parent.btnGroup && this.$parent.buttons) },
    isFalse () { return this.value === this.falseValue },
    isTrue () { return this.value === this.trueValue },
    parentValue () { return this.$parent.val },
    typeColor () { return (this.type || (this.$parent && this.$parent.type)) || 'default' }
  },
  watch: {
    checked (val) {
      const value = val ? this.trueValue : this.falseValue
      this.$emit('checked', val)
      this.$emit('input', value);
      this.updateParent()
    },
    parentValue () {
      this.updateFromParent();
    },
    value (val) {
      const checked = val === this.trueValue
      if (this.checked !== checked) {
        this.checked = checked
      }
    }
  },
  created () {
    if (this.inGroup) {
      const parent = this.$parent
      parent._checkboxGroup = true
      if (!(parent.val instanceof Array)) { parent.val = [] }
    }
  },
  mounted () {
    this.updateFromParent();
  },
  methods: {
    // called @ mounted(), or whenever $parent.val changes
    // sync our state with the $parent.val
    updateFromParent () {
      if (this.inGroup) {
        const index = this.$parent.val.indexOf(this.trueValue)
        this.checked = ~index
      }
    },
    // called when our checked state changes
    updateParent () {
      if (this.inGroup) {
        const index = this.$parent.val.indexOf(this.trueValue)
        if (this.checked && !~index) this.$parent.val.push(this.trueValue)
        if (!this.checked && ~index) this.$parent.val.splice(index, 1)
      }
    },
    toggle () {
      if (this.disabled || this.readonly) { return }
      this.checked = !this.checked
    }
  }
}