docs(input): add mask example

This commit is contained in:
Benjamin Canac
2025-06-06 11:37:26 +02:00
parent 150b334b1d
commit 228d4c9835
4 changed files with 33 additions and 0 deletions

View File

@@ -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>

View File

@@ -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.

View File

@@ -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",

8
pnpm-lock.yaml generated
View File

@@ -278,6 +278,9 @@ importers:
joi:
specifier: ^17.13.3
version: 17.13.3
maska:
specifier: ^3.1.1
version: 3.1.1
motion-v:
specifier: ^1.1.1
version: 1.1.1(react@19.1.0)(vue@3.5.16(typescript@5.8.3))
@@ -5128,6 +5131,9 @@ packages:
marky@1.3.0:
resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}
maska@3.1.1:
resolution: {integrity: sha512-68ZJfZ6/YANwv7CufbQmcCNoHdJnIRxuQgZtSFZe5ltlmZ15ZdA01siUGLh9EfaUX65DN0l/A7g+o2xjTICeGQ==}
math-intrinsics@1.1.0:
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
engines: {node: '>= 0.4'}
@@ -12933,6 +12939,8 @@ snapshots:
marky@1.3.0: {}
maska@3.1.1: {}
math-intrinsics@1.1.0: {}
mdast-util-find-and-replace@3.0.2: