Add sample ui for otp
Cagatay Civici
parent
d518142ab6
commit
87984b3e7b
|
|
@ -124,6 +124,19 @@ export default {
|
|||
|
||||
break;
|
||||
|
||||
case 8:
|
||||
if (event.target.value.length === 0) {
|
||||
this.moveToPrev(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 40:
|
||||
event.preventDefault();
|
||||
|
||||
break;
|
||||
|
||||
case 39:
|
||||
this.moveToNext(event);
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A sample UI implementation with templating and additional elements.</p>
|
||||
</DocSectionText>
|
||||
<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 }">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
code: {
|
||||
basic: `
|
||||
<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>
|
||||
</div>
|
||||
`,
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.custom-otp-input {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--surface-400);
|
||||
background: transparent;
|
||||
outline-offset: -2px;
|
||||
outline-color: transparent;
|
||||
border-right: 0 none;
|
||||
transition: outline-color 0.3s;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.custom-otp-input:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
<\/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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
|
||||
<style scoped>
|
||||
.custom-otp-input {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--surface-400);
|
||||
background: transparent;
|
||||
outline-offset: -2px;
|
||||
outline-color: transparent;
|
||||
border-right: 0 none;
|
||||
transition: outline-color 0.3s;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.custom-otp-input:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
<\/style>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-otp-input {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 24px;
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--surface-400);
|
||||
background: transparent;
|
||||
outline-offset: -2px;
|
||||
outline-color: transparent;
|
||||
border-right: 0 none;
|
||||
transition: outline-color 0.3s;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:focus {
|
||||
outline: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.custom-otp-input:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.custom-otp-input:last-child {
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
|
|||
import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
|
||||
import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
|
||||
import SampleDoc from '@/doc/inputotp/SampleDoc.vue';
|
||||
import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
|
||||
import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
|
||||
import PTComponent from '@/doc/inputotp/pt/index.vue';
|
||||
|
|
@ -41,6 +42,11 @@ export default {
|
|||
label: 'Template',
|
||||
component: TemplateDoc
|
||||
},
|
||||
{
|
||||
id: 'sample',
|
||||
label: 'Sample',
|
||||
component: SampleDoc
|
||||
},
|
||||
{
|
||||
id: 'accessibility',
|
||||
label: 'Accessibility',
|
||||
|
|
|
|||
Loading…
Reference in New Issue