Updated sample ui for otp
Cagatay Civici
parent
87984b3e7b
commit
6302f400d0
|
|
@ -1,12 +1,17 @@
|
|||
<template>
|
||||
<div :class="cx('root')" v-bind="ptmi('root')">
|
||||
<template v-for="i in length" :key="i">
|
||||
<slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)">
|
||||
<slot :events="getTemplateEvents(i - 1)" :attrs="getTemplateAttrs(i - 1)" :index="i">
|
||||
<OtpInputText
|
||||
:value="tokens[i - 1]"
|
||||
:type="inputType"
|
||||
:class="cx('input')"
|
||||
:inputmode="inputMode"
|
||||
:variant="variant"
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
:invalid="invalid"
|
||||
:tabindex="tabindex"
|
||||
@input="onInput($event, i - 1)"
|
||||
@focus="onFocus($event)"
|
||||
@blur="onBlur($event)"
|
||||
|
|
@ -86,21 +91,31 @@ export default {
|
|||
});
|
||||
},
|
||||
moveToPrev(event) {
|
||||
var prevElement = event.target.previousElementSibling;
|
||||
var prevInput = this.findPrevInput(event.target);
|
||||
|
||||
if (prevElement) {
|
||||
prevElement.focus();
|
||||
prevElement.select();
|
||||
if (prevInput) {
|
||||
prevInput.focus();
|
||||
prevInput.select();
|
||||
}
|
||||
},
|
||||
moveToNext(event) {
|
||||
var nextElement = event.target.nextElementSibling;
|
||||
var nextInput = this.findNextInput(event.target);
|
||||
|
||||
if (nextElement) {
|
||||
nextElement.focus();
|
||||
nextElement.select();
|
||||
if (nextInput) {
|
||||
nextInput.focus();
|
||||
nextInput.select();
|
||||
}
|
||||
},
|
||||
findNextInput(element) {
|
||||
var nextElement = element.nextElementSibling;
|
||||
|
||||
return nextElement.nodeName === 'INPUT' ? nextElement : this.findNextInput(nextElement);
|
||||
},
|
||||
findPrevInput(element) {
|
||||
var prevElement = element.previousElementSibling;
|
||||
|
||||
return prevElement.nodeName === 'INPUT' ? prevElement : this.findPrevInput(prevElement);
|
||||
},
|
||||
onFocus(event) {
|
||||
event.target.select();
|
||||
this.$emit('focus', event);
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@
|
|||
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
|
||||
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
|
||||
<InputOtp v-model="value" :length="6" style="gap: 0">
|
||||
<template #default="{ attrs, events }">
|
||||
<template #default="{ attrs, events, index }">
|
||||
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
|
||||
<div v-if="index === 3" class="px-3">
|
||||
<i class="pi pi-minus" />
|
||||
</div>
|
||||
</template>
|
||||
</InputOtp>
|
||||
<div class="flex justify-content-between mt-5 align-self-stretch">
|
||||
|
|
@ -31,8 +34,11 @@ export default {
|
|||
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
|
||||
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
|
||||
<InputOtp v-model="value" :length="6" style="gap: 0">
|
||||
<template #default="{ attrs, events }">
|
||||
<template #default="{ attrs, events, index }">
|
||||
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
|
||||
<div v-if="index === 3" class="px-3">
|
||||
<i class="pi pi-minus" />
|
||||
</div>
|
||||
</template>
|
||||
</InputOtp>
|
||||
<div class="flex justify-content-between mt-5 align-self-stretch">
|
||||
|
|
@ -43,17 +49,22 @@ export default {
|
|||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
|
||||
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
|
||||
<InputOtp v-model="value" :length="6" style="gap: 0">
|
||||
<template #default="{ attrs, events }">
|
||||
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
|
||||
</template>
|
||||
</InputOtp>
|
||||
<div class="flex justify-content-between mt-5 align-self-stretch">
|
||||
<Button label="Resend Code" link class="p-0"></Button>
|
||||
<Button label="Submit Code"></Button>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
|
||||
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
|
||||
<InputOtp v-model="value" :length="6" style="gap: 0">
|
||||
<template #default="{ attrs, events, index }">
|
||||
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
|
||||
<div v-if="index === 3" class="px-3">
|
||||
<i class="pi pi-minus" />
|
||||
</div>
|
||||
</template>
|
||||
</InputOtp>
|
||||
<div class="flex justify-content-between mt-5 align-self-stretch">
|
||||
<Button label="Resend Code" link class="p-0"></Button>
|
||||
<Button label="Submit Code"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -90,32 +101,40 @@ export default {
|
|||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:first-child {
|
||||
.custom-otp-input:first-child,
|
||||
.custom-otp-input:nth-child(5) {
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.custom-otp-input:nth-child(3),
|
||||
.custom-otp-input:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
border-color: var(--surface-400);
|
||||
}
|
||||
<\/style>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
|
||||
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
|
||||
<InputOtp v-model="value" :length="6" style="gap: 0">
|
||||
<template #default="{ attrs, events }">
|
||||
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
|
||||
</template>
|
||||
</InputOtp>
|
||||
<div class="flex justify-content-between mt-5 align-self-stretch">
|
||||
<Button label="Resend Code" link class="p-0"></Button>
|
||||
<Button label="Submit Code"></Button>
|
||||
<div class="card flex justify-content-center">
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="font-bold text-xl mb-2">Authenticate Your Account</div>
|
||||
<p class="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
|
||||
<InputOtp v-model="value" :length="6" style="gap: 0">
|
||||
<template #default="{ attrs, events, index }">
|
||||
<input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
|
||||
<div v-if="index === 3" class="px-3">
|
||||
<i class="pi pi-minus" />
|
||||
</div>
|
||||
</template>
|
||||
</InputOtp>
|
||||
<div class="flex justify-content-between mt-5 align-self-stretch">
|
||||
<Button label="Resend Code" link class="p-0"></Button>
|
||||
<Button label="Submit Code"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -148,16 +167,19 @@ const value = ref(null);
|
|||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:first-child {
|
||||
.custom-otp-input:first-child,
|
||||
.custom-otp-input:nth-child(5) {
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.custom-otp-input:nth-child(3),
|
||||
.custom-otp-input:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
border-color: var(--surface-400);
|
||||
}
|
||||
<\/style>
|
||||
`
|
||||
|
|
@ -189,15 +211,18 @@ const value = ref(null);
|
|||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:first-child {
|
||||
.custom-otp-input:first-child,
|
||||
.custom-otp-input:nth-child(5) {
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.custom-otp-input:nth-child(3),
|
||||
.custom-otp-input:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
border-color: var(--surface-400);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue