Component checkbox

mcheckbox.vue

<template>
  <label :name="name">
    <section ref="box" class="container" role="label">
      <input
        ref="check"
        class="checkbox"
        :name="mValue"
        type="checkbox"
        :checked="true"
        @change="({ target }) => changeState(target)"
      />
      <span ref="checkmark" class="checkmark"></span>
    </section>
    <span class="text">{{ mLabel }}</span>
  </label>
</template>

<script>
export default {
  name: 'Checkbok',
  props: {
    selectAll: {
      type: Boolean,
      default: () => false
    },
    name: {
      type: String,
      default: () => `not-${(Math.random() * 10).toFixed(3)}`
    },
    mLabel: {
      type: String,
      default: () => 'checkbox'
    },
    mValue: {
      type: [String, Number],
      default: () => `checkbox-${Date.now()}`
    },
    color: {
      type: String,
      default: () => '#2196f3'
    }
  },
  mounted() {
    // this.$computed('checkMyValue')
    this.$watch('selectAll', a => {
      this.$parent.$children.map(x => {
        if (x.$el.getAttribute('name') === this.name) {
          if (this._uid !== x._uid) {
            if (a && !x.$refs.check.checked) {
              x.$refs.check.click()
            }
            if (!a) {
              x.$listeners.input([])
              x.$refs.check.checked = false
            }
          }
        }
      })
    })
    this.$watch(
      '$attrs.value',
      checked => {
        // console.log(check)
        if (this.isArray()) {
          this.containsInState()
            ? this.stylesStateActivated()
            : this.stylesStateDesactivated()
        } else {
          checked ? this.stylesStateActivated() : this.stylesStateDesactivated()
        }
      },
      { immediate: true }
    )
  },
  methods: {
    stylesStateActivated() {
      this.$refs.check.checked = true
      this.$refs.box.style.borderColor = this.color
      this.$refs.checkmark.style.backgroundColor = this.color
    },
    stylesStateDesactivated() {
      this.$refs.check.checked = false
      this.$refs.box.style.borderColor = 'grey'
      this.$refs.checkmark.style.backgroundColor = '#fff'
    },
    containsInState() {
      return this.$attrs.value.includes(this.mValue)
    },
    isArray() {
      return Array.isArray(this.$attrs.value)
    },
    changeState({ checked }) {
      if (this.isArray()) {
        checked
          ? !this.containsInState() && this.$attrs.value.push(this.mValue)
          : this.containsInState() &&
            this.$emit(
              'input',
              this.$attrs.value.filter(el => el != this.mValue)
            )
      } else {
        this.$emit('input', checked)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.text {
  text-transform: capitalize;
  padding-left: 10px;
  text-align: left;
}
label {
  margin: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: max-content;
  max-height: 30px;
  position: relative;
  > .text {
    font-size: 12px;
  }
}
.container {
  display: block;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid grey;
  border-radius: 10%;
  > .checkbox {
    position: absolute;
    opacity: 0.4;
    height: 0;
    width: 0;
    &:not(:checked) ~ .checkmark::after {
      content: '';
      height: 5px;
      width: 10px;
      display: inline-block;
      left: 5px;

      border: solid white;
      transform: rotate(45deg);
      border-width: 0 3px 3px 0;
      animation: checkoff 0.2s ease-in forwards;
    }

    &:checked ~ .checkmark {
      transition: all 0.2s ease-in;
    }
    &:not(:checked) ~ .checkmark {
      transition: all 0.2s ease-in;
      background-color: white;
    }
    &:checked ~ .checkmark::after {
      content: '';
      transition: all 0.6s ease-in;
      opacity: 1;
      bottom: 5%;
      display: inline-block;
      position: relative;
      animation: check 0.2s 0.2s ease-in-out forwards;
      border: solid white;
      transform: rotate(45deg);
      border-width: 0 0px 0px 0;
    }
  }
  > .checkmark {
    position: absolute;
    height: 20px;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    top: 0;
    left: 0;
    background-color: #ddd;
  }
}
label:active > .container {
  // box-shadow: 0 0 4px 6px red;
  // Caso queira fazer animação
}
@keyframes check {
  from {
    height: 0;
    width: 0;
    left: 25%;
    position: relative;
  }
  45% {
    left: 25%;
    position: relative;
    border-width: 0 3px 3px 0;
  }
  50% {
    width: 5px;
    height: 0;
    border-width: 0 3px 3px 0;
  }
  to {
    height: 10px;
    width: 5px;
    left: 25%;
    position: relative;
    // margin: auto;
    border-width: 0 3px 3px 0;
  }
}
@keyframes checkoff {
  from {
    height: 10px;
    width: 5px;
  }
  50% {
    width: 5px;
    height: 0;
  }
  to {
    height: 0;
    width: 0;
  }
}
@keyframes translate {
  from {
    transform: translateX(20px);
  }
  to {
    transform: translate(0);
  }
}
</style>