139 lines
3.8 KiB
Vue
139 lines
3.8 KiB
Vue
<!-- Ported from legacy henza_pwa/src/components/input/otpInput.vue -->
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import SingleOtpInput from './SingleOtpInput.vue'
|
|
|
|
const BACKSPACE = 8
|
|
const LEFT_ARROW = 37
|
|
const RIGHT_ARROW = 39
|
|
const DELETE = 46
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
defaultFocus?: boolean
|
|
numInputs?: number
|
|
separator?: string
|
|
inputClasses?: string
|
|
inputType?: string
|
|
shouldAutoFocus?: boolean
|
|
placeholder?: string
|
|
disabled?: boolean
|
|
}>(),
|
|
{ numInputs: 4, shouldAutoFocus: false, disabled: false },
|
|
)
|
|
const emit = defineEmits<{
|
|
(e: 'on-change', value: string | number): void
|
|
(e: 'on-complete', value: string): void
|
|
}>()
|
|
|
|
const activeInput = ref(0)
|
|
const otp = ref<string[]>([])
|
|
const oldOtp = ref<string[]>([])
|
|
|
|
const handleOnFocus = (index: number) => {
|
|
if (props.defaultFocus && index < props.numInputs && !otp.value[index]) {
|
|
activeInput.value = otp.value.length
|
|
} else activeInput.value = index
|
|
}
|
|
const handleOnBlur = () => {
|
|
activeInput.value = -1
|
|
}
|
|
|
|
const checkFilledAllInputs = () => {
|
|
if (otp.value.join('').length === props.numInputs) {
|
|
return emit('on-complete', otp.value.join(''))
|
|
}
|
|
return 'Wait until the user enters the required number of characters'
|
|
}
|
|
|
|
const focusInput = (input: number) => {
|
|
activeInput.value = Math.max(Math.min(props.numInputs - 1, input), 0)
|
|
}
|
|
const focusNextInput = () => focusInput(activeInput.value + 1)
|
|
const focusPrevInput = () => focusInput(activeInput.value - 1)
|
|
|
|
const changeCodeAtFocus = (value: number | string) => {
|
|
oldOtp.value = Object.assign([], otp.value)
|
|
|
|
if (typeof value === 'string' && value === '') otp.value.splice(activeInput.value, 1)
|
|
else otp.value[activeInput.value] = value as string
|
|
|
|
if (oldOtp.value.join('') !== otp.value.join('')) {
|
|
emit('on-change', otp.value.join(''))
|
|
checkFilledAllInputs()
|
|
}
|
|
}
|
|
|
|
const handleOnPaste = (event: Event) => {
|
|
event.preventDefault()
|
|
const clipboardEvent = event as ClipboardEvent
|
|
const pastedData = (clipboardEvent.clipboardData?.getData('text/plain') ?? '').slice(0, props.numInputs - activeInput.value).split('')
|
|
if (props.inputType === 'number' && !pastedData.join('').match(/^\d+$/)) {
|
|
return 'Invalid pasted data'
|
|
}
|
|
const currentCharsInOtp = otp.value.slice(0, activeInput.value)
|
|
const combinedWithPastedData = currentCharsInOtp.concat(pastedData)
|
|
|
|
combinedWithPastedData.slice(0, props.numInputs).forEach((value, i) => {
|
|
otp.value[i] = value
|
|
})
|
|
|
|
focusInput(combinedWithPastedData.slice(0, props.numInputs).length)
|
|
return checkFilledAllInputs()
|
|
}
|
|
|
|
const handleOnChange = (value: number | string) => {
|
|
changeCodeAtFocus(value)
|
|
focusNextInput()
|
|
}
|
|
|
|
const handleOnKeyDown = (event: KeyboardEvent) => {
|
|
switch (event.keyCode) {
|
|
case BACKSPACE:
|
|
event.preventDefault()
|
|
changeCodeAtFocus('')
|
|
focusPrevInput()
|
|
break
|
|
case DELETE:
|
|
event.preventDefault()
|
|
changeCodeAtFocus('')
|
|
break
|
|
case LEFT_ARROW:
|
|
event.preventDefault()
|
|
focusPrevInput()
|
|
break
|
|
case RIGHT_ARROW:
|
|
event.preventDefault()
|
|
focusNextInput()
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex ltr justify-around w-full">
|
|
<SingleOtpInput
|
|
v-for="(item, i) in numInputs"
|
|
:key="i"
|
|
:focus="activeInput === i"
|
|
:value="otp[i]"
|
|
:separator="separator"
|
|
:input-type="inputType"
|
|
:input-classes="inputClasses"
|
|
:is-last-child="i === numInputs - 1"
|
|
:should-auto-focus="shouldAutoFocus"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
@on-change="handleOnChange"
|
|
@on-keydown="handleOnKeyDown"
|
|
@on-paste="handleOnPaste"
|
|
@on-focus="handleOnFocus(i)"
|
|
@on-blur="handleOnBlur"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|