maestro-server/bootue

View on GitHub
src/forms/checkbox/script.js

Summary

Maintainability
A
25 mins
Test Coverage
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) {
      let value = val ? this.trueValue : this.falseValue
      this.$emit('checked', val)
      this.$emit('input', value);
      this.updateParent()
    },
    parentValue () {
      this.updateFromParent();
    },
    value (val) {
      let 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) {
        let index = this.$parent.val.indexOf(this.trueValue)
        this.checked = ~index
      }
    },
    // called when our checked state changes
    updateParent () {
      if (this.inGroup) {
        let 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
    }
  }
}