Les entrées FormKit sont livrées avec beaucoup de balisage. Cela est utile pour garantir que les entrées sont écrites de manière accessible. Cependant, il est parfois judicieux de modifier la structure existante d'une entrée FormKit. En utilisant le CLI FormKit, nous pouvons exporter les entrées open source de FormKit et modifier leur structure originale - ou même leur fonctionnalité.
Dans ce guide, nous allons exporter l'entrée de texte et la restructurer pour mieux supporter un design d'étiquette flottante.
FormKit est livré avec son propre CLI pour faciliter l'exportation des entrées. À la base de votre projet, exécutez :
npx formkit export
L'exécution de cette commande vous invite à sélectionner l'une des entrées open source de FormKit à exporter :
? Quelle entrée voulez-vous exporter ? ›
❯ bouton
soumettre
case à cocher
fichier
formulaire
groupe
caché
liste
radio
↓ sélectionner
Nous allons sélectionner l'entrée de texte et permettre au CLI de créer un nouveau répertoire /inputs dans /src :
✔ Quelle entrée voulez-vous exporter ? › texte
✔ Quelle langue doit être utilisée ? › JavaScript
? Où l'entrée doit-elle être exportée (par rapport au répertoire actuel) ? ›
./src/inputs
En regardant notre entrée exportée, text.js, nous pouvons voir les sections sous-jacentes qui composent l'entrée FormKit. Ces sections sont fournies sous forme de petites fonctions composables. Chaque section représente un seul FormKitSchemaNode et les arguments passés à cette section sont ses enfants :
// text.js
import {
outer,
inner,
wrapper,
label,
help,
messages,
message,
icon,
prefix,
suffix,
textInput,
} from '@formkit/inputs'
/**
* Définition de l'entrée pour un texte.
* @public
*/
export const text = {
/**
* Le schéma réel de l'entrée, ou une fonction qui renvoie le schéma.
*/
schema: outer(
wrapper(
label('$label'),
inner(
icon('prefix', 'label'),
prefix(),
textInput(),
suffix(),
icon('suffix')
)
),
help('$help'),
messages(message('$message.value'))
),
/**
* Le type de nœud, peut être une liste, un groupe ou une entrée.
*/
type: 'input',
/**
* Un tableau de props supplémentaires à accepter pour cette entrée.
*/
props: [],
/**
* Fonctionnalités supplémentaires qui devraient être ajoutées à votre entrée
*/
features: [],
}
Dans cet exemple, nous n'allons pas écraser l'entrée de texte par défaut de FormKit,
mais plutôt, créer une entrée de texte personnalisée qui va utiliser des étiquettes flottantes.
Allons de l'avant et renommons le fichier texte que nous venons d'exporter en
floatingLabelTextInput.js :
src/
|inputs/
| |- t̶e̶x̶t̶ floatingLabelTextInput.js
Dans floatingLabelTextInput.js, changeons le nom de la
variable exportée en floatingLabelTextInput à partir de text.
...
export const t̶e̶x̶t̶ floatingLabelTextInput = {
...
}
Pour enregistrer globalement notre nouvelle entrée, nous devons ajouter notre floatingLabelTextInput à la configuration globale. Nous pouvons le faire où que nous enregistrions le plugin FormKit :
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import '@formkit/themes/genesis'
import { floatingLabelTextInput } from '../src/inputs/floatingLabelTextInput'
const config = defaultConfig({
inputs: {
floatingLabelTextInput,
},
})
createApp(App).use(plugin, config).mount('#app')
Nous allons maintenant modifier le schéma de floatingLabelTextInput pour mieux supporter les étiquettes flottantes, qui sont généralement mises en œuvre en utilisant le sélecteur de frères CSS : ~. Pour utiliser un sélecteur CSS comme :focus ~ label, notre balise <label> doit être placée après notre balise <input>. Avec notre schéma déjà exporté, ce changement est facile à faire :
export const floatingLabelTextInput = {
schema: outer(
wrapper(
/*
* Suppression de l'étiquette
*/
l̶a̶b̶e̶l̶(̶'̶$̶l̶a̶b̶e̶l̶'̶)̶, // ❌ supprimé d'ici
inner(
icon('prefix', 'label'),
prefix(),
textInput(),
label('$label'), // 👈 et maintenant placé ici
suffix(),
icon('suffix')
)
),
help('$help'),
messages(message('$message.value'))
),
...
}
Le package @formkit/inputs exporte un certain nombre de fonctions d'aide qui peuvent être facilement appliquées aux fonctions de schéma composable. Les aides disponibles sont :
import { $attrs, $if, $for, $extend, $root } from '@formkit/inputs'
L'importation de la fonction $attrs du package d'entrée de FormKit nous permet d'étendre le schéma de n'importe quelle section avec des attributs supplémentaires. Dans cet exemple, nous l'utilisons pour modifier la section d'étiquette et changer sa classe de formkit-label à formkit-label-floating. De plus, nous ajouterons un attribut data-has-value :
import {
outer,
inner,
wrapper,
label,
help,
messages,
message,
icon,
prefix,
suffix,
textInput,
/*
* Importation de $attrs
*/
$attrs,
} from '@formkit/inputs'
export const floatingLabelTextInput = {
schema: outer(
wrapper(
inner(
icon('prefix', 'label'),
prefix(),
textInput(),
/*
* Utilisation de la fonction $attrs pour passer l'objet attrs à la section d'étiquette avec une nouvelle
définition de classe.
*/
$attrs(
{
class: '$classes.labelFloating',
'data-has-value': '$_value !== "" && $_value !== undefined',
for: '$id',
},
label('$label')
),
suffix(),
icon('suffix')
)
),
help('$help'),
messages(message('$message.value'))
),
type: 'input',
props: [],
features: [],
}
Après avoir ajouté un style approprié, nous pouvons voir que notre nouvelle entrée personnalisée a son <label> déplacé dans la structure HTML et utilise des étiquettes flottantes :
Dans ce guide, nous avons exporté l'entrée text intégrée en utilisant l'outil CLI de FormKit et utilisé le fichier exporté comme point de départ pour une nouvelle variation d'étiquette flottante. Cependant, la fonction d'exportation permet aux développeurs de faire bien plus que cela ! Que ce soit pour remplacer les entrées existantes de FormKit, ou ajouter de nouvelles entrées personnalisées avec des sections modifiées, ajoutées, supprimées ou déplacées — nous avons hâte de voir toutes les façons dont vous utilisez cette fonctionnalité !