import type { InputMask, MaskedDateOptions } from 'imask' import { MaskedRange } from 'imask' export type VCreditCardColor = | 'grey' | 'green' | 'lime' | 'orange' | 'purple' | 'red' | 'yellow' | 'lightblue' | 'cyan' export function useCreditcardMask() { const creditcardIcon = ref('') const creditcardLogo = ref('') const creditcardColor = ref('grey') const creditcardMaskDate = { mask: Date, // enable date mask pattern: 'MM{/}`YY', min: new Date(2021, 0, 1), max: new Date(2099, 0, 1), blocks: { YY: { mask: MaskedRange, from: 21, to: 99, maxLength: 2, }, MM: { mask: MaskedRange, from: 1, to: 12, maxLength: 2, }, }, // define date -> value convertion format: (date) => { if (!date) { return '' } const month = date.getMonth() + 1 const year = date.getFullYear() return [month < 10 ? `0${month}` : month, year.toString().substr(2, 2)].join('/') }, // define value -> date convertion parse: (value) => { const monthYear = value.split('/') if (monthYear.length === 2) { return new Date(parseInt(monthYear[1]) + 2000, parseInt(monthYear[0]) - 1, 1) } return new Date() }, } satisfies MaskedDateOptions const creditcardMaskCVC = { mask: '000', } const creditcardMaskNumber = { mask: [ { mask: '0000 000000 00000', regex: '^3[47]\\d{0,13}', card: { id: 'amex', name: 'American Express', color: 'green', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', regex: '^(?:6011|65\\d{0,2}|64[4-9]\\d?)\\d{0,12}', card: { id: 'discover', name: 'Discover', color: 'purple', icon: ``, logo: ``, }, }, { mask: '0000 000000 0000', regex: '^3(?:0([0-5]|9)|[689]\\d?)\\d{0,11}', card: { id: 'diners', name: 'Diners', color: 'orange', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', regex: '^(5[1-5]\\d{0,2}|22[2-9]\\d{0,1}|2[3-7]\\d{0,2})\\d{0,12}', card: { id: 'mastercard', name: 'Mastercard', color: 'lightblue', icon: ``, logo: ``, }, }, { mask: '0000 000000 00000', regex: '^(?:2131|1800)\\d{0,11}', card: { id: 'jcb15', name: 'JCB 15', color: 'red', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', regex: '^(?:35\\d{0,2})\\d{0,12}', card: { id: 'jcb', name: 'JCB', color: 'red', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', regex: '^(?:5[0678]\\d{0,2}|6304|67\\d{0,2})\\d{0,12}', card: { id: 'maestro', name: 'Maestro', color: 'yellow', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', regex: '^4\\d{0,15}', card: { id: 'visa', name: 'Visa', color: 'lime', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', regex: '^62\\d{0,14}', card: { id: 'unionpay', name: 'American', color: 'green', icon: ``, logo: ``, }, }, { mask: '0000 0000 0000 0000', card: { id: 'unknown', name: '', color: 'grey', icon: ``, logo: ``, }, }, ], dispatch: function (appended: string, dynamicMasked: any) { const number = (dynamicMasked.value + appended).replace(/\D/g, '') for (let i = 0; i < dynamicMasked.compiledMasks.length; i++) { const re = new RegExp(dynamicMasked.compiledMasks[i].regex) if (number.match(re) != null) { return dynamicMasked.compiledMasks[i] } } }, } const creditcardMaskNumberOnAccept = (inputMask: InputMask) => { const currentMask: any = (inputMask.masked as any).currentMask if (currentMask && 'card' in currentMask) { creditcardIcon.value = currentMask.card.icon creditcardLogo.value = currentMask.card.logo creditcardColor.value = currentMask.card.color } } return { creditcardIcon, creditcardLogo, creditcardColor, creditcardMaskDate, creditcardMaskCVC, creditcardMaskNumber, creditcardMaskNumberOnAccept, } }