docs(input): add mask example

Author: benjamincanac

docs/app/components/content/examples/input/InputMaskExample.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { vMaska } from 'maska/vue'
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <UInput v-maska="'#### #### #### ####'" placeholder="4242 4242 4242 4242" icon="i-lucide-credit-card" />
+
+    <div class="flex items-center gap-2">
+      <UInput v-maska="'##/##'" placeholder="MM/YY" icon="i-lucide-calendar" />
+      <UInput v-maska="'###'" placeholder="CVC" />
+    </div>
+  </div>
+</template>

docs/content/3.components/input.md

@@ -278,6 +278,16 @@ name: 'input-kbd-example'
 This example uses the `defineShortcuts` composable to focus the Input when the :kbd{value="/"} key is pressed.
 ::
 
+### With mask
+
+There's no built-in support for masks, but you can use librairies like [maska](https://github.com/beholdr/maska) to mask the Input.
+
+::component-example
+---
+name: 'input-mask-example'
+---
+::
+
 ### With floating label
 
 You can use the `#default` slot to add a floating label to the Input.

docs/package.json

@@ -21,6 +21,7 @@
     "ai": "^4.3.16",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
+    "maska": "^3.1.1",
     "motion-v": "^1.1.1",
     "nuxt": "^3.17.5",
     "nuxt-component-meta": "^0.11.0",