feat(VOtpInput): add a bool property masked to show the text or not

[ankusharoraa]

resolves #18964

Description

As mentioned in the issue, I have added a masked attribute that can be used with text and number type to mask the input.

Markup:

<template>
  <v-app>
    <v-container>
      <!-- -->
      <v-otp-input v-model="otp" type="text" masked />
      {{ otp }}
    </v-container>
  </v-app>
</template>

<script>
  import { ref } from 'vue';

  import { VOtpInput } from '../src/components/VOtpInput/index.ts'
  export default {
    name: 'Playground',
    components: {
      VOtpInput,
    },
    setup () {
      const otp = ref('')
      return {
        otp,
        //
      }
    },
  }
</script>

[ankusharoraa]

@johnleider Can you please review this PR

[johnleider]

Usually this is done by the user via the type prop, switching between password/text|number. This does make it easier but for such a simple component, I'm not sure it's worth inflating it's API.

[ankusharoraa]

Usually this is done by the user via the type prop, switching between password/text|number. This does make it easier but for such a simple component, I'm not sure it's worth inflating it's API.

Thanks for the feedback! As mentioned in the issue, I’ve added a masked attribute that works with both text and number types to mask the input. My intention was to provide flexibility while keeping the API simple, but I understand your concern about potentially overcomplicating it.

Can you let me know if you’re suggesting a different approach for handling this, or if you'd prefer a simpler method to manage input types and masking? I’m open to suggestions!

[johnleider]

Maybe instead of a prop we can provide an example in the docs that shows how the user can do it? With masking coming back to the framework soon, I don't want to introduce any potentially confusing API .