From 6302f400d0a3ce033b167a87a232b511e7350a1c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 10:42:48 +0300
Subject: [PATCH] Updated sample ui for otp

---
 components/lib/inputotp/InputOtp.vue | 33 ++++++++----
 doc/inputotp/SampleDoc.vue           | 79 ++++++++++++++++++----------
 2 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index 6df198a45..bb6a7ed1a 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -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);
diff --git a/doc/inputotp/SampleDoc.vue b/doc/inputotp/SampleDoc.vue
index 6d8d0eba6..e021bf824 100644
--- a/doc/inputotp/SampleDoc.vue
+++ b/doc/inputotp/SampleDoc.vue
@@ -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>