mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
docs(input): add mask example
This commit is contained in:
@@ -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>
|
||||
@@ -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.
|
||||
|
||||
@@ -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
8
pnpm-lock.yaml
generated
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user