Add sample ui for otp
Cagatay Civici
parent
d518142ab6
commit
87984b3e7b
|
|
@ -124,6 +124,19 @@ export default {
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case 8:
|
||||||
|
if (event.target.value.length === 0) {
|
||||||
|
this.moveToPrev(event);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 40:
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
break;
|
||||||
|
|
||||||
case 39:
|
case 39:
|
||||||
this.moveToNext(event);
|
this.moveToNext(event);
|
||||||
event.preventDefault();
|
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 BasicDoc from '@/doc/inputotp/BasicDoc.vue';
|
||||||
import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
|
import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
|
||||||
import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
|
import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
|
||||||
|
import SampleDoc from '@/doc/inputotp/SampleDoc.vue';
|
||||||
import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
|
import TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
|
||||||
import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
|
import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
|
||||||
import PTComponent from '@/doc/inputotp/pt/index.vue';
|
import PTComponent from '@/doc/inputotp/pt/index.vue';
|
||||||
|
|
@ -41,6 +42,11 @@ export default {
|
||||||
label: 'Template',
|
label: 'Template',
|
||||||
component: TemplateDoc
|
component: TemplateDoc
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'sample',
|
||||||
|
label: 'Sample',
|
||||||
|
component: SampleDoc
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'accessibility',
|
id: 'accessibility',
|
||||||
label: 'Accessibility',
|
label: 'Accessibility',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue