Add template sample to inputotp

components/lib/inputotp/InputOtp.vue

@@ -1,20 +1,21 @@
 <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)">
                 <OtpInputText
-            v-for="i in length"
+                    :value="tokens[i - 1]"
-            :key="i"
-            v-model="tokens[i - 1]"
                     :type="inputType"
                     :class="cx('input')"
-            maxlength="1"
                     :inputmode="inputMode"
-            @input="onInput"
+                    @input="onInput($event, i - 1)"
-            @focus="onFocus"
+                    @focus="onFocus($event)"
-            @blur="onBlur"
+                    @blur="onBlur($event)"
-            @paste="onPaste"
+                    @paste="onPaste($event)"
-            @keydown="onKeyDown($event, i - 1)"
+                    @keydown="onKeyDown($event)"
                     :pt="ptm('input')"
                 />
+            </slot>
+        </template>
     </div>
 </template>
 
@@ -41,6 +42,20 @@ export default {
         }
     },
     methods: {
+        getTemplateAttrs(index) {
+            return {
+                value: this.tokens[index]
+            };
+        },
+        getTemplateEvents(index) {
+            return {
+                input: (event) => this.onInput(event, index),
+                keydown: (event) => this.onKeyDown(event),
+                focus: (event) => this.onFocus(event),
+                blur: (event) => this.onBlur(event),
+                paste: (event) => this.onPaste(event)
+            };
+        },
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
 
@@ -51,9 +66,15 @@ export default {
                 }
             });
         },
-        onInput(event) {
+        onInput(event, index) {
-            this.moveToNext(event);
+            this.tokens[index] = event.target.value;
             this.updateModel(event);
+
+            if (event.inputType === 'deleteContentBackward') {
+                this.moveToPrev(event);
+            } else if (event.inputType === 'insertText' || event.inputType === 'deleteContentForward') {
+                this.moveToNext(event);
+            }
         },
         updateModel(event) {
             const newValue = this.tokens.join('');
@@ -87,7 +108,7 @@ export default {
         onBlur(event) {
             this.$emit('blur', event);
         },
-        onKeyDown(event, index) {
+        onKeyDown(event) {
             const keyCode = event.keyCode;
 
             switch (keyCode) {
@@ -109,14 +130,6 @@ export default {
 
                     break;
 
-                case 8:
-                    event.preventDefault();
-                    this.tokens[index] = '';
-                    this.moveToPrev(event);
-                    this.updateModel(event);
-
-                    break;
-
                 default:
                     if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
                         event.preventDefault();

doc/inputotp/TemplateDoc.vue

@@ -0,0 +1,124 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value">
+    <template #default="{ attrs, events }">
+        <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+    </template>
+</InputOtp>
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 40px;
+    font-size: 36px;
+    border: 0 none;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    background: transparent;
+    border-bottom: 2px solid var(--surface-500);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--primary-color);
+}
+<\/style>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value">
+            <template #default="{ attrs, events }">
+                <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
+            </template>
+        </InputOtp>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+
+<style scoped>
+.custom-otp-input {
+    width: 40px;
+    font-size: 36px;
+    border: 0 none;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    background: transparent;
+    border-bottom: 2px solid var(--surface-500);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--primary-color);
+}
+<\/style>
+`
+            }
+        };
+    }
+};
+</script>
+
+<style scoped>
+.custom-otp-input {
+    width: 40px;
+    font-size: 36px;
+    border: 0 none;
+    appearance: none;
+    text-align: center;
+    transition: all 0.2s;
+    background: transparent;
+    border-bottom: 2px solid var(--surface-500);
+}
+
+.custom-otp-input:focus {
+    outline: 0 none;
+    border-bottom-color: var(--primary-color);
+}
+</style>

pages/inputotp/index.vue

@@ -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 TemplateDoc from '@/doc/inputotp/TemplateDoc.vue';
 import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
 import PTComponent from '@/doc/inputotp/pt/index.vue';
 import ThemingDoc from '@/doc/inputotp/theming/index.vue';
@@ -35,6 +36,11 @@ export default {
                     label: 'Integer Only',
                     component: IntegerOnlyDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',