docs(VOtpInput): finish documentation examples, api, and clean-up

packages/api-generator/src/locale/en/VOtpInput.json

@@ -1,14 +1,18 @@
 {
   "props": {
-    "dark": "Applies the dark theme variant to the component. This will default the components color to _white_ unless you've configured your [application theme](/customization/theme) to **dark** or if you are using the **color** prop on the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).",
+    "autofocus": "Automatically focuses the first input on page load",
+    "divider": "Specifies the dividing character between items.",
+    "focusAll": "Puts all inputs into a focus state when any are focused",
     "length": "The OTP field's length.",
-    "plain": "Outlined style applied by default to the input, set to `true` to apply plain style.",
+    "placeholder": "Sets the input’s placeholder text.",
     "type": "Supported types: `text`, `password`, `number`."
   },
   "events": {
-    "change": "Emitted when the input is changed by user interaction.",
-    "finish": "Emitted when the input is filled completely and cursor is blurred.",
-    "focus": "Emitted when component is focused.",
-    "keydown": "Emitted when **any** key is pressed."
+    "finish": "Emitted when the input is filled completely and cursor is blurred."
+  },
+  "exposed": {
+    "blur": "Forces the input to lose focus.",
+    "focus": "Focuses the first field in the input",
+    "reset": "Reset's the input model to an empty array"
   }
 }

packages/docs/src/examples/v-otp-input/misc-card.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-card
+    class="py-8 px-6 text-center mx-auto ma-4"
+    elevation="12"
+    max-width="400"
+    width="100%"
+  >
+    <h3 class="text-h6 mb-4">Verify Your Account</h3>
+
+    <div class="text-body-2">
+      We sent a verification code to [email protected] <br>
+
+      Please check your email and paste the code below.
+    </div>
+
+    <v-sheet color="surface">
+      <v-otp-input
+        v-model="otp"
+        type="password"
+        variant="solo"
+      ></v-otp-input>
+    </v-sheet>
+
+    <v-btn
+      class="my-4"
+      color="purple"
+      height="40"
+      text="Verify"
+      variant="flat"
+      width="70%"
+    ></v-btn>
+
+    <div class="text-caption">
+      Didn't receive the code? <a href="#" @click.prevent="otp = ''">Resend</a>
+    </div>
+  </v-card>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const otp = shallowRef('')
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      otp: '',
+    }),
+  }
+</script>

packages/docs/src/examples/v-otp-input/misc-divider.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-sheet
+    class="py-8 px-6 mx-auto ma-4 text-center"
+    elevation="4"
+    rounded="lg"
+    max-width="500"
+    width="100%"
+  >
+    <h3 class="text-h5">Verification Code</h3>
+
+    <div class="text-subtitle-2 font-weight-light mb-3">Please enter the verification code sent to your mobile</div>
+
+    <v-otp-input
+      class="mb-8"
+      divider="•"
+      length="4"
+      variant="outlined"
+    ></v-otp-input>
+
+    <div class="text-caption">
+      <v-btn
+        color="primary"
+        size="x-small"
+        text="Send New Code"
+        variant="text"
+        @click="otp = ''"
+      ></v-btn>
+    </div>
+  </v-sheet>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const otp = shallowRef('')
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      otp: '',
+    }),
+  }
+</script>

packages/docs/src/examples/v-otp-input/misc-mobile.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-sheet
+    border
+    class="pt-8 pb-12 px-6 ma-4 mx-auto"
+    max-width="350"
+    width="100%"
+  >
+    <h3 class="text-h6 mb-1">Mobile phone verification</h3>
+
+    <div class="text-body-2 font-weight-light">
+      Enter the code we just sent to your mobile phone <span class="font-weight-black text-primary">+1 408 555 1212</span>
+    </div>
+
+    <v-otp-input
+      v-model="otp"
+      class="mt-3 ms-n2"
+      placeholder="0"
+      length="4"
+      variant="underlined"
+    ></v-otp-input>
+
+    <v-divider class="mt-3 mb-6"></v-divider>
+
+    <div class="mb-3 text-body-2">
+      Need another <strong>code</strong>?
+    </div>
+
+    <v-btn
+      color="primary"
+      size="small"
+      text="Re-send Email"
+      variant="tonal"
+      @click="otp = ''"
+    ></v-btn>
+  </v-sheet>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const otp = shallowRef('')
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      otp: '',
+    }),
+  }
+</script>

packages/docs/src/examples/v-otp-input/misc-verify.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-card
+    class="py-12 px-8 text-center mx-auto ma-4"
+    max-width="420"
+    width="100%"
+  >
+    <h3 class="text-h6 mb-2">
+      Please enter the one time password to verify your account
+    </h3>
+
+    <div>A code has been sent to *****2489</div>
+
+    <v-otp-input
+      v-model="otp"
+      :disabled="validating"
+      variant="plain"
+      color="primary"
+    ></v-otp-input>
+
+    <v-btn
+      :loading="validating"
+      border
+      class="mt-6 text-none bg-surface-variant"
+      rounded
+      variant="plain"
+      text="Validate"
+      height="40"
+      width="135"
+      @click="onClick"
+    ></v-btn>
+  </v-card>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const otp = shallowRef('2401')
+  const validating = shallowRef(false)
+
+  function onClick () {
+    validating.value = true
+
+    setTimeout(() => {
+      validating.value = false
+    }, 2000)
+  }
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      otp: '',
+      validating: false,
+    }),
+
+    methods: {
+      onClick () {
+        this.validating = true
+
+        setTimeout(() => {
+          this.validating = false
+        }, 2000)
+      },
+    },
+  }
+</script>

packages/docs/src/examples/v-otp-input/prop-error.vue

@@ -0,0 +1,6 @@
+<template>
+  <v-otp-input
+    model-value="221"
+    error
+  ></v-otp-input>
+</template>

packages/docs/src/examples/v-otp-input/prop-focus-all.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-otp-input
+    focused
+    model-value="425"
+    focus-all
+  ></v-otp-input>
+</template>

packages/docs/src/examples/v-otp-input/prop-length.vue

@@ -0,0 +1,6 @@
+<template>
+  <v-otp-input
+    model-value="3214214"
+    length="7"
+  ></v-otp-input>
+</template>