Vue mixin to get the credit card mask for Vuetify using Cleave.js

creditCard.js

const CreditCardDetector = require('cleave.js/src/shortcuts/CreditCardDetector');

export default {
  data () {
    return {
      delimiter: ' - ',
      prevCCNumHead: false,
      prevMask: false
    }
  },

  methods: {
    getCardType (ccNum) {
      let ccInfo = CreditCardDetector.getInfo(ccNum, false)

      return ccInfo.type
    },
    getCCMask (ccNum) {
      ccNum = !ccNum ? '' : ccNum
      let ccNumHead = ccNum.substring(0,4)
      if (this.prevCCNumHead === ccNumHead) {
        return this.prevMask
      } else {
        this.prevCCNumHead = ccNumHead
      }

      let ccInfo = CreditCardDetector.getInfo(ccNum, false)

      return this.convertBlocksToMask(ccInfo.blocks)
    },
    convertBlocksToMask (blocks) {
      let mask = ''
      let delimiter = false
      for (let block of blocks) {
        if (delimiter === false) {
          delimiter = this.delimiter
        } else {
          mask += this.delimiter
        }
        for (var i = 0; i < block; i++) {
          mask += '#'
        }
      }
      this.prevMask = mask
      return mask
    }
  }
}