Base ⚡️ FormKit

0.17.3 (Beta 17)

💪 Nouvelles fonctionnalités

Ajoute la langue 🇲🇳 mongole (mn) - #747
Ajoute la langue 🇮🇸 islandaise (is) #748
Ajoute les nouvelles extensions node.next(), node.previous() et node.goTo() pour les entrées multi-step via le plugin MultiStep. Cela permet un contrôle externe plus facile de la navigation des entrées multi-step. #685
Ajoute la nouvelle extension node.restoreCache() pour le plugin localStorage permettant de restaurer les valeurs de formulaire en cache en cas d'échec de la soumission. #727

🐛 Corrections de bugs :

Corrige les problèmes d'hydratation SSR pour l'entrée multi-step. #720
Corrige un problème où l'événement blur pouvait provoquer des erreurs de console lors du changement de route. #735
Corrige un problème où les entrées Pro se bloquaient lorsqu'elles étaient utilisées avec le plugin Floating Labels. #742
MultiStep beforeStepChange fonctionne maintenant avec les appels de fonction async. #743
Corrige un problème où les entrées file ne permettaient pas de télécharger à nouveau le même fichier après avoir appelé reset. #762
Prévient le conflit de nommage des keyframes CSS Genesis en ajoutant le préfixe fk-.

0.17.2 (Beta 17)

🐛 Corrections de bugs :

Corrige un problème qui faisait que les v-model’s profondément imbriqués ne se mettaient pas à jour lorsqu'une mutation provenait de la profondeur (#722)
Corrige un problème qui faisait que les entrées personnalisées qui remplaçaient la famille d'entrées text réutilisaient le premier schéma(#719)
Exporte le type FormKitValidationMessage pour aider à taper les fonctions de message de validation (#695)

💪 Nouvelles fonctionnalités

Le plugin localStorage prend désormais en charge de nouvelles options : key, control, debounce, beforeSave et beforeLoad.
Le plugin localStorage peut désormais être appliqué à n'importe quelle entrée de type interne group. par exemple (form, group, multi-step, etc).

0.17.1 (Beta 17)

🐛 Corrections de bugs

Corrigé un bug qui provoquait une erreur lorsqu'une liste dynamique était initialisée avec des valeurs scalaires initiales identiques (#715)
Corrigé un bug qui faisait que la propriété value d'un slot n'était pas mise à jour dans certains cas limites (#717).

0.17.0 (Beta 17)

12 mai 2023

💪 Nouvelles fonctionnalités

Nouveau plugin FormKit Zod — Validez vos formulaires FormKit à l'aide du schéma Zod.
Nouvelle propriété dynamic de la liste vous permet de créer facilement vos propres répéteurs.
Nouveau plugin Save to localStorage pour sauvegarder la progression de l'utilisateur dans les formulaires et protéger contre la perte de données en cas d'événement inattendu.
Ajoute de nouvelles règles de validation : require_one (merci @devoidofgenius), contains_alpha, contains_alphanumeric, contains_alpha_space, contains_symbol, contains_uppercase, contains_lowercase, contains_numeric, symbol, uppercase, et lowercase (merci @riderx).
Nouveau plugin Auto-height textarea pour créer des entrées textarea avec une hauteur redimensionnable dynamiquement.
Pro: Nouvelle entrée Slider.
Ajoute un nouvel événement commitRaw qui se déclenche même s'il n'y a pas de changement dans la valeur de l'entrée.
FormKitSchema peut maintenant utiliser un seul nœud racine (au lieu d'un fragment)
Toutes les entrées FormKit utilisent maintenant un nœud racine au lieu d'un fragment, ce qui signifie que les directives Vue standard comme v-show fonctionnent maintenant et qu'il n'est généralement plus nécessaire d'ajouter une key aux entrées dynamiques (#528).
Le plugin AutoAnimate prend désormais en charge l'animation de l'entrée répéteur et d'autres entrées Pro.
Les valeurs passées dans la fonction node.reset() deviennent la nouvelle valeur par défaut pour l'entrée (#621).
Ajoute le chinois traditionnel 🇨🇳 (zh-TW)
Ajoute le letton 🇱🇻 (lv)
Ajoute le tétum 🇹🇱 (tet)
Ajoute la nouvelle capacité d'étendre un nœud central avec node.extend().

⚡️ Performance

Amélioration significative de la performance de montage des entrées dans un grand formulaire (5-10x plus rapide).
Amélioration de la performance d'hydratation d'un formulaire en diffusant des valeurs scalaires avant l'entrée.
Réduction du bruit sur l'événement @input et suppression du rebond maintenant inutile sur l'événement de changement.

🐛 Corrections de bugs

Le @formkit/observer observera désormais les changements de node._value dans les cas où vous souhaitez opérer sur la valeur d'entrée non rebondie.
L'icône range dans @formkit/icons a été mise à jour pour ne montrer qu'une seule poignée de contrôle puisque les entrées de plage HTML ne supportent pas plusieurs valeurs. L'ancienne icône à plusieurs poignées a été réaffectée pour la nouvelle entrée slider de FormKit Pro.
Pro: Corrige un bug qui empêchait les entrées repeater imbriquées de s'hydrater correctement (#458).
Pro: Corrige un bug qui provoquait une erreur lorsque les entrées repeater imbriquées étaient supprimées (#457).
Corrige un bug qui provoquait le déclenchement de l'événement de flou plusieurs fois lors de la liaison manuelle à l'événement @blur sur une entrée personnalisée (#413).
Corrige un bug qui faisait que v-model ne déclenchait des événements d'entrée que sur chaque autre entrée (#463)
Corrige un bug qui faisait que le schéma itérait sur la valeur d'un tableau si le tableau avait une longueur de 1 et que la seule valeur dans le tableau était un nombre (#635)
Corrige un problème qui faisait que node.walk() se terminait prématurément lors de l'utilisation de stopOnFalse.
Corrige une fuite de mémoire dans la navigation SPA et les environnements SSR (#475)

La Beta 16 est la première version de FormKit qui n'a pas d'identifiant de pré-lancement. La Beta 16 et toutes les versions bêta restantes seront publiées sous la version sémantique 0.x.x. La première version stable sera 1.0.0 et est prévue pour plus tard cette année. Ce changement de versionnement devrait aider à la résolution des dépendances du gestionnaire de paquets alors que nous terminons nos cycles de sortie en bêta.

💪 Nouvelles fonctionnalités

Pro: Nouvelle entrée Transfer List ! Une excellente option pour aider vos utilisateurs à sélectionner des informations à partir d'un grand ensemble de données.
Pro: Le plugin floating labels supporte maintenant les entrées FormKit Pro.
Pro: L'entrée mask input supporte maintenant plusieurs couleurs en fournissant une option overlay.
Ajoute une nouvelle propriété dirty-behavior qui permet aux utilisateurs d'opter pour un comportement compare qui compare la valeur actuelle de l'entrée à la valeur originale de l'entrée. Si l'entrée est ramenée à son état original, le drapeau context.state.dirty reviendra à faux.
Ajoute des traductions i18n pour certaines nouvelles règles d'interface utilisateur et de validation.

🐛 Corrections de bugs

La prop options (utilisée dans select, radio, checkboxes et certains inputs pro) peut maintenant différencier les valeurs null et undefined.
Corrige des problèmes avec le module @formkit/nuxt et la coloration syntaxique.
Corrige un bug qui faisait que l'état dirty d'une entrée non liée était incorrectement défini sur true lorsqu'un objet (comme un groupe) était mis à jour (#520).
Le plugin floating labels cache maintenant les placeholders jusqu'à ce qu'ils soient focalisés (#574).
Corrige un bug qui faisait que les formulaires ne recevaient pas l'état submitted comme les enfants du formulaire lors d'une soumission de formulaire infructueuse (#503).
L'entrée multi-step préserve maintenant l'ordre des étapes lors du rendu conditionnel des étapes (#613).
Corrige un bug de style tailwind pour les checkboxes et les radios (#584).

1.0.0-beta.15

6 février 2023

Cette version ajoute de nouveaux plugins de première partie au package @formkit/addons, expédie des corrections de bugs et des mises à jour de style pour les utilisateurs de CSS et Tailwind CSS.

💪 Nouvelles fonctionnalités

Créez facilement des formulaires en plusieurs étapes ou incluez des sections en plusieurs étapes dans vos formulaires avec le nouveau plugin multi-step dans @formkit/addons. Livré avec un style CSS autonome que vous pouvez importer et qui fonctionne bien avec notre thème genesis. Consultez la documentation complète ici.
Activez les labels flottants pour tous les inputs de la famille text (text, email, url, etc) et textarea avec le nouveau plugin de labels flottants dans @formkit/addons. Consultez la documentation complète ici.
Ajoute de nouvelles chaînes Next et Previous à l'objet de localisation de l'interface utilisateur pour une utilisation dans les plugins et les inputs personnalisés.

🐛 Corrections de bugs

Corrige le chemin d'exportation manquant du thème genesis de Tailwind CSS dans @formkit/themes.
Ajoute un style :focus-visible aux boutons pour montrer l'état de focus lors de l'utilisation de la navigation au clavier.
Ajoute des styles loading manquants pour les boutons submit dans le thème Genesis de Tailwind CSS.

📘 Articles

Nouvel Article : Créer un formulaire en plusieurs étapes dans Vue en 5 minutes

Rétablit @formkit/themes/tailwindcss pour n'inclure qu'un export default du plugin FormKitVariants.
Déplace le thème Genesis de Tailwind fourni vers un nouveau chemin d'exportation de @formkit/themes/dist/tailwindcss/genesis.
Change l'opérateur de suppression de classe de ! à $remove: afin de ne pas entrer en conflit avec l'opérateur ! intégré de Tailwind qui ajoute !important à une règle de style.
Corrige un problème où les icônes par défaut ne se chargeaient pas lors de l'utilisation du thème Genesis FormKit Tailwind fourni.

Ajoute un nouveau composant <FormKitMessages> qui permet de déplacer les messages de validation et d'erreur d'un formulaire et la capacité pour les entrées group et list d'afficher leurs propres messages d'erreur et de validation.
Lors de la suppression de classes sur une section d'une entrée FormKit, vous pouvez utiliser l'opérateur de préfixe ! pour supprimer sélectivement une classe existante sans avoir besoin d'utiliser la syntaxe d'objet longue forme. par exemple outer-class="my-class !formkit-outer" ajoute my-class et supprime la classe formkit-outer par défaut.
Ajoute Catalan (merci @petergithubmgw).
Les entrées checkbox et radio ont maintenant un attribut data-checked autour de leur enveloppe respective, ce qui facilite l'ajout de styles personnalisés pour les états cochés et non cochés.
Améliore les messages de validation dans une poignée de langues (en, pt, zh).
Pro: Nouvelle entrée Mask Pro.
Pro: Ajoute la prop empty-message permet d'afficher un message dans listbox lorsqu'aucune option n'est passée (dropdown, autocomplete, et taglist). #502
Pro: Ajoute l'attribut checked à formkit-option (dropdown, autocomplete, taglist). #350
Pro: Ajoute la prop max pour taglist et autocomplete avec des entrées multiple. #501
Pro: Ajoute la prop closeOnSelect qui maintient la listbox déployée au fur et à mesure que les sélections sont effectuées (autocomplete multiple et taglist).
Pro: Ajoute la prop forceExpanded qui force la listbox à rester ouverte à des fins de développement (dropdown, autocomplete, et taglist).
Pro: Toutes les entrées Pro peuvent maintenant être désactivées via l'attribut disabled.

🐛 Corrections de bugs

Corrigé un bug où la règle date_after affichait un message de validation incorrect à cause des fuseaux horaires. #488
Corrigé un bug où les ids générés automatiquement n'avaient pas une valeur sûre pour l'attribut à cause des caractères spéciaux. #517
Les valeurs v-model peuvent maintenant être initialisées comme undefined. #235
Corrigé un bug qui faisait que les props validation-rules en ligne se récursaient de manière inattendue. #514
Corrigé un bug qui faisait que l'étiquette des cases à cocher avec plusieurs options n'était pas remplacée par sections-schema. #541
Corrigé un bug qui faisait que les étiquettes ne changeaient pas dynamiquement dans les messages de validation déjà rendus. #297
Corrigé un bug qui faisait que la prop disabled avait besoin de null au lieu de false pour rendre l'attribut data-disabled sur l'enveloppe extérieure. #511
Corrigé un bug qui empêchait les slots d'être conditionnels (c'est-à-dire en utilisant v-if sur le bloc <template v-slot>). #489
Corrigé les problèmes de compatibilité avec Nuxt et Nuxt playground.
Corrigé un bug qui faisait que les sections utilisant ne respectaient pas correctement la prop sections-schema.
Corrigé un problème avec les variantes d'icônes de préfixe et de suffixe de Tailwind. #530
Pro: Corrigé un bug taglist où des options en double étaient chargées depuis l'API. #497
Pro: Corrigé un bug où le taglist rendait des props en double lorsque la prop multiple était réglée sur false. #494
Pro: Corrigé un bug où les options autocomplete se dupliquaient lorsqu'elles étaient utilisées rapidement, de manière répétée, ou avec du contenu collé. #431
Pro: Corrigé un problème où la valeur par défaut pour autocomplete et taglist ne pouvait pas être supprimée lorsque la valeur fournie était un objet littéral. #505
Pro: Corrigé un problème où la listbox était toujours visible lorsqu'aucune option n'était passée. #504

📙 Documentation & Playground

Nouveau Référence API — Les utilisateurs de TypeScript se réjouissent ! La référence API expose des fonctionnalités précédemment non documentées.
Nouvelle implémentation Tailwind de notre thème Genesis.
Lors de la sélection de Tailwind CSS dans le FormKit Playground, le nouveau Thème Genesis FormKit Tailwind est automatiquement chargé pour vous si votre Playground n'a pas déjà un fichier formkit.config.js.

Pro : Nouveau Taglist Pro Input maintenant disponible !
Ajoute la commande npx formkit create-app pour initialiser facilement de nouveaux projets FormKit.
Améliore les messages de validation de la règle length dans toutes les langues.
Ajoute la langue grecque 🇬🇷 (uk) #460.
Ajoute la langue norvégienne Bokmål 🇳🇴 (nb) #418.
Ajoute la langue slovaque 🇸🇰 (sk) #401.
Pro : Tous les Pro Inputs peuvent maintenant être désactivés.
Pro : Améliorations du thème Genesis Pro.
Pro : Les autocomplétions avec plusieurs options sélectionnées peuvent maintenant être réorganisées par glisser-déposer.
Pro : Ajout d'attributs manquants au schéma de message.

🐛 Corrections de bugs

Correction d'un bug où le slot de label ne fonctionnait pas sans la prop label #456.
Correction d'un bug où vous ne pouviez pas changer dynamiquement les règles de validation disponibles #449.
Correction d'un bug où le changement de clés ne réinitialisait pas la valeur d'une entrée lorsqu'elle se trouvait dans un groupe. #446.
Correction d'un bug où les méthodes de l'objet Date étaient inaccessibles à partir du schéma #406.
Correction d'un problème de cheminement qui rendait difficile l'accès aux fichiers par des tiers #404.
Correction d'un bug qui empêchait l'argument stopIfFalse sur la fonction walkTree.
Correction d'un bug où une entrée de sélection initialisée avec une valeur null n'a pas une bonne valeur #415.
Pro : Correction d'un bug où l'événement count:blocking n'était pas correctement émis dans les Repeaters.
Pro : Mise à jour des index de Repeater pour être des nombres au lieu de chaînes. #422.
Pro : Correction d'un bug d'autocomplétion où la page suivante d'options écrasait la page actuelle. #447.
Pro : Correction d'un bug où les entrées Pro ne montraient pas les messages de validation au flou #403.

Pose les bases pour FormKit Pro Inputs !

🐛 Corrections de bugs

Correction d'un bug où l'emplacement "aide" apparaissait deux fois pour les éléments checkbox et radio #353.
Correction d'un bug qui faisait échouer le plugin FormKit AutoAnimate avec Nuxt #361.
Correction d'un bug de schéma où une référence en notation point à une sous-propriété inexistante provoquait l'affichage de [Object object] après l'existence de la référence #368.
FormKit fonctionne maintenant avec Nuxt 3.0.0-rc.8 et 3.0.0-rc.9 #371 et #383.
Correction d'un bug où les utilisateurs ne pouvaient pas utiliser les hooks via le plugin pour mettre à jour les valeurs v-modelées #391.
Correction d'un bug où les utilisateurs ne pouvaient pas importer @formkit/themes/tailwindcss avec TypeScript #376.
Correction d'un bug qui faisait que les icônes par défaut ne se chargeaient jamais lorsqu'elles étaient incluses directement dans la configuration.
Correction d'un bug où une validation de case à cocher avec "obligatoire" ne fonctionnait que la première fois #169.

Les définitions d'entrée ont maintenant une propriété family optionnelle, qui ajoute un attribut data-family, et définit la valeur sur node.props.family. Ceci est utile pour appliquer des plugins et des styles à des "familles" entières d'entrées comme la famille de textes d'entrées, qui s'appliquerait à text, email, password, number, etc.
Les définitions d'entrée incluent maintenant une propriété forceTypeProp optionnelle qui assure que le node.props.type est initialisé comme une valeur donnée même si l'entrée est enregistrée sous un nom différent. Par exemple, myModifiedCheckbox pourrait toujours avoir node.props.type rapport "checkbox".
Ajoute l'attribut data-multiple aux cases à cocher et aux radios lorsqu'ils ont plusieurs options.
Ajoute un nouvel événement @submit-invalid aux entrées type="form". L'événement est déclenché lorsqu'un utilisateur tente de soumettre un formulaire mais qu'il a des entrées invalides.
Ajoute une nouvelle fonction d'aide getValidationMessages à @formkit/validation qui extrait une Map des nœuds et de leurs messages de validation.
Ajoute une nouvelle section decorator-icon aux cases à cocher et aux radios, facilitant l'utilisation de SVG personnalisés dans vos cases à cocher et radios.
Ajoute de nouvelles icônes "check" et "circle" au pack d'icônes intégré.
Ajoute la langue 🇦🇿 azerbaïdjanaise (az).
Ajoute la langue 🇺🇦 ukrainienne (uk).

🐛 Corrections de bugs

Correction d'une régression où une seule case à cocher n'affichait plus le texte d'aide (#310).
Correction d'un bug qui faisait échouer le plugin AutoAnimate sur Nuxt SSR (#330).
Correction d'un bug qui faisait passer tous les context.state.dirty des entrées à vrai lorsqu'un formulaire v-modelé était modifié (#311).
Correction d'un bug qui provoquait une condition de course entre l'événement @change d'une liste de sélection et la propagation de la valeur v-model (#335).
Correction d'un bug qui faisait retourner des objets au lieu de tableaux par les props/attrs conditionnels qui renvoyaient des tableaux (#317).
Correction d'un bug qui faisait passer les entrées de fichiers vides à indéfini au lieu d'un tableau vide lorsque node.reset() est appelé (#319).
Correction d'un bug qui faisait que la prop désactivée désactivait incorrectement les cases à cocher et les entrées radio lorsqu'elle était définie sur une valeur fausse (non nulle) (#307).

La section removeFiles de l'entrée de fichier a été renommée en fileRemove.
La section fileRemove (précédemment removeFiles) utilisée pour rendre une balise <a>, cela a été changé en un button.
Les composables de @formkit/inputs ont été remplacés par des "sections". Cela ne devrait affecter que les utilisateurs qui créaient leurs propres entrées à partir de composables préexistants.

🎉 Nouvelles fonctionnalités

Icônes ! FormKit est maintenant livré avec un support de première classe pour les icônes, y compris un pack d'icônes sous licence MIT de première partie avec une livraison CDN automatique. En savoir plus à ce sujet sur la nouvelle page de documentation des icônes.
AutoAnimate ! FormKit inclut maintenant un plugin AutoAnimate, apportant le support AutoAnimate à FormKit avec une seule ligne de code.
Exportations ! Vous pouvez maintenant exporter n'importe laquelle des entrées existantes et les restructurer à volonté en utilisant le nouvel outil de ligne de commande @formkit/cli. Modifiez les entrées existantes en ajoutant, supprimant, mettant à jour ou réorganisant les sections - ou ajoutez vos propres variations d'entrées exportées et modifiées à votre bibliothèque d'entrées.
Toutes les entrées ont été refactorisées pour utiliser une API de composition de schéma beaucoup améliorée qui permet une composition et une modification faciles des entrées basées sur le schéma.
Ajoute une nouvelle propriété meta à la spécification du schéma (#248).
Les thèmes CSS de FormKit peuvent être installés via CDN en utilisant la nouvelle option theme dans defaultConfig()
Ajoute de nouveaux hooks submit et setErrors.
Ajoute la langue 🇧🇬 Bulgare.
Ajoute la langue 🇭🇺 Hongroise.
Ajoute la langue 🇰🇿 Kazakh.
Ajoute la langue 🇷🇸 Serbe.
Ajoute la langue 🇹🇯 Tadjik.

🐛 Corrections de bugs

Correction d'un bug qui empêchait la propriété key de fonctionner lors de l'utilisation du raccourci $formkit dans le schéma (#232).
Correction d'un bug qui n'appelait pas les gestionnaires d'événements sur @blur (#239).
Correction d'un bug qui provoquait 1 trop d'itérations for sur les anciens navigateurs Safari (#299).
Ajout de clés automatiques aux entrées FormKit qui a corrigé une série de bugs de réactivité lorsque des clés explicites n'étaient pas utilisées avec des entrées conditionnelles.
La propriété input-errors réinitialisera désormais toutes les erreurs qu'elle a précédemment définies lorsqu'elle est définie sur un objet vide {} (#277).
Ajoute le support des diacritiques tchèques/slovaques dans les règles alpha et alpha_spaces (#281).

📙 Documentation

Nouvelle page de documentation pour FormKit Icons 🎉.
Nouveau guide pour exporter et restructurer les icônes!
Nouvelle documentation utilisant le plugin AutoAnimate.
Les diagrammes d'entrée incluent de nouvelles sections d'icônes.

Les plugins tailwindcss, unocss, et windicss doivent maintenant être importés à partir de leur propre sous-chemin du paquet @formkit/themes. Par exemple :

import formKitTailwindPlugin from '@formkit/themes/tailwindcss'

🐛 Corrections de bugs

Supprime les importations incorrectes de windicss, tailwindcss et unocss.

L'événement update:model-value ne sera désormais émis que lors de l'utilisation de la directive v-model.
L'événement input est maintenant différé pour réduire la quantité de bruit émis. Vous pouvez utiliser le nouveau input-raw pour écouter chaque événement d'entrée.
Les erreurs définies via setErrors sont maintenant automatiquement effacées lors de l'entrée par défaut. Pour revenir au comportement précédent, définissez preserveErrors: true dans votre objet de configuration global.
Le paquet @formkit/tailwindcss est maintenant obsolète — le plugin formKitTailwind et la fonction generateClasses ont été déplacés vers le paquet @formkit/themes.

🎉 Nouvelles fonctionnalités

Les entrées checkbox, radio, et select (entrées qui utilisent :options) peuvent maintenant utiliser n'importe quel type de données comme leur valeur comme des nombres, des objets, ou même null (#85).
Ajoute de nouvelles utilitaires node.clearErrors et clearErrors pour aider à effacer les erreurs de backend d'une entrée ou d'un formulaire.
Maintenant, les entrées effacent automatiquement toutes les erreurs définies avec node.setErrors() lors de l'entrée de l'utilisateur. Vous pouvez remplacer ce comportement par défaut (pour conserver l'erreur sur l'entrée) avec preserve-errors="true".
Ajoute une nouvelle fonction node.addProps pour ajouter de nouvelles propriétés dans les plugins personnalisés.
Ajoute un nouveau crochet message pour modifier les messages lorsqu'ils sont définis.
Ajoute un nouvel événement de base reset — émis après la réinitialisation d'un formulaire.
Ajoute une nouvelle propriété index qui permet d'injecter des entrées à un index donné sur un type list parent.
L'événement input du composant <FormKit> est maintenant différé, ce qui signifie qu'il émet beaucoup moins de bruit.
Exporte toutes les fonctions de fonctionnalités d'entrée import { features } from '@formkit/inputs'.
Ajoute un nouvel événement input-raw au composant <FormKit> qui est émis pour chaque événement d'entrée unique dans une entrée, une liste, un groupe, ou un formulaire (très bruyant).
Le nœud de base est maintenant le deuxième argument des événements input, input-raw, submit et submit-raw.
Ajoute un nouvel événement de nœud de base dom-input-event qui a l'objet Event HTML natif comme charge utile.
@formkit/themes inclut maintenant des exportations nommées pour les fonctions de plugin pour Tailwind CSS (formKitTailwind), Windi CSS (formKitWindi), et Uno CSS (formKitUno). En ajoutant le plugin correct à votre fichier de configuration de framework CSS, vous aurez accès à une variété de variantes formkit telles que formkit-invalid: et formkit-disabled:.
@formkit/themes inclut maintenant la fonction d'aide generateClasses qui vous permet de fournir facilement différentes listes de classes à ${sectionKey}s en fonction du type d'entrée.
Ajoute la langue 🇸🇪 suédoise.
Ajoute la langue 🇸🇮 slovène.
Ajoute la langue 🇷🇴 roumaine.
Ajoute la langue 🇯🇵 japonaise.
Ajoute la langue 🇹🇭 thaïlandaise.
Améliore la langue 🇵🇱 polonaise.

🐛 Corrections de bugs

🔥 Améliore considérablement les performances et la fiabilité de v-model pour les structures profondément imbriquées comme les formulaires avec listes et groupes.
Corrige un problème qui faisait que les valeurs null provoquaient des erreurs (#151)
Corrigé un bug qui faisait que validation-visibility ne changeait pas lorsqu'il était mis à jour de manière réactive (#159)
Corrige un bug qui faisait que le mot-clé preserve bloquait certaines soumissions de formulaires (#145)
Corrige la dactylographie TypeScript pour la configuration @formkit/tailwind (#143)
Corrige un bug qui faisait que les cases à cocher uniques avec un objet comme on-value ne recevaient pas leur valeur initiale lors de l'utilisation de la propriété :value.
Corrige un bug qui faisait que les règles de validation n'étaient pas mises à jour lorsque la propriété label changeait (#170)
Corrige un bug qui provoquait une sélection par défaut incorrecte sur les listes de sélection avec un attribut multiple="false" explicite et un espace réservé (#148).
Corrige un bug qui faisait que la propriété classes ne réagissait pas à la réactivité de Vue lors de l'utilisation de refs imbriquées (#155).
Corrige un bug qui empêchait les boutons de soumission d'être désactivés lorsqu'ils étaient appliqués en utilisant l'attribut disabled sur le formulaire sans spécifier disabled="true" (#215)
Corrige un bug du compilateur de schéma qui faisait que l'espace blanc d'une chaîne entre guillemets dans une parenthèse était incorrectement supprimé (#150).

Ajoute une nouvelle règle de validation alpha_spaces (#83)
Ajoute 🇨🇿 Tchèque (merci @dfridrich)
Ajoute Frison (merci @arjendejong12)

📙 Documentation

Nouvelle documentation de configuration qui explique la relation entre les options de noeud, la configuration et les props.

🐛 Corrections de bugs

Corrige un bug qui faisait que les entrées radio perdaient leur réactivité lorsqu'elles étaient définies via node.input() (#139)
Améliore l'annotation TypeScript pour l'événement @submit (#130)
Corrigé un problème qui faisait que les sélections ne s'affichaient pas si elles étaient définies sur un tableau vide (#129)
Corrigé une erreur qui provoquait des erreurs de rendu côté serveur sur Nuxt 3 lors de l'exécution d'un projet construit (#113)
Corrigé un bug qui faisait que la portée des variables de schéma était perdue lors de la référence des données d'itération à l'intérieur de l'emplacement d'un composant (#91)

L'attribut data-loading a été déplacé du bouton de soumission d'un formulaire à la balise <form> elle-même.

🎉 Nouvelles fonctionnalités

Ajoute le nouveau plugin @formkit/tailwindcss pour créer facilement des thèmes Tailwind pour vos formulaires FormKit. Consultez le guide Créer un thème CSS Tailwind pour plus de détails.
Ajoute une nouvelle fonction reset programmatique. Cela peut être fait sur n'importe quelle entrée, groupe, formulaire, ou liste et cela restaurera la valeur à son état initial. Il réinitialise également l'objet context.state (comme blurred et dirty).
Améliore l'accessibilité en ajoutant aria-describedby et aria-live à tous les types d'entrée fournis. aria-describedby cible désormais le texte d'aide, les messages de validation, et les messages d'erreur (étiquetage fourni par les balises <label> qui utilisent l'attribut for).
Les groupes, les listes et les formulaires peuvent maintenant appliquer des valeurs undefined à leurs enfants. En d'autres termes, si un formulaire est v-modelé et que sa valeur est définie sur un objet vide {}, il effacera tout le formulaire.
Ajoute une nouvelle propriété context.state.settled qui signale lorsque le cycle de rebond interne de l'entrée est terminé et qu'une valeur a fini d'être engagée dans le formulaire.
Ajoute l'attribut data-submitted aux entrées qui ont été soumises.
Ajoute une nouvelle clé de section fileName (merci @santi).
Ajoute une nouvelle propriété parent qui accepte un nœud central pour des cas d'utilisation avancés où les entrées sont découplées de leur formulaire ou où une structure de données est souhaitée.
Ajoute 🇱🇾 Arabe (merci @Ahmedelforjani)
Ajoute 🇩🇰 Danois (merci @bjerggaard)
Ajoute 🇮🇩 Indonésien (merci @rama-adi)
Ajoute 🇮🇹 Italien (merci @punga78, @Archetipo95)
Ajoute 🇵🇱 Polonais (merci @xxSkyy)
Ajoute 🇰🇷 Coréen (merci @bwp618)
Ajoute 🇻🇳 Vietnamien (merci @oanhnn)
Amélioré 🇫🇷 Français (merci @pop123123123)

🐛 Corrections de bugs

Corrige un bug qui pouvait faire clignoter les erreurs de validation pendant 20ms avant de se résoudre lors de l'utilisation de l'autocomplétion du navigateur (#99).
Corrige un bug qui faisait que les propriétés de classe (comme input-class) à l'intérieur des schémas ne respectaient pas correctement la commande $reset car elle était traitée comme une variable (#61).
Corrige un bug qui ne permettait pas de modifier les classes via les propriétés de classe de clé de section lorsque la clé de section a plusieurs mots, comme file-list-class ou file-item-class (#120).

Le thème genesis doit maintenant être importé de import '@formkit/themes/genesis.

🎉 Nouvelles fonctionnalités

Ajoute la soumission de formulaire programmatique :
- Peut être soumis par le nœud node.submit() (y compris tout nœud enfant du formulaire).
- Peut être soumis via la fonction this.$formkit.submit('form-id') (pour l'api de composition, c'est submitForm('form-id')).
Amélioration de setErrors DX :
- Peut maintenant être appelé directement sur un nœud node.setErrors(nodeErrors, childErrors).
- setErrors supporte maintenant la chaîne pure node.setErrors('Mon erreur')
Le gestionnaire de soumission reçoit maintenant le nœud du formulaire pour faciliter la définition des erreurs.
Le nœud central d'un composant <FormKit> est maintenant disponible via la référence de modèle.
Ajoute l'attribut data-invalid à la section outer lorsqu'une entrée a des messages de validation échoués qui sont actuellement affichés (exemple de terrain de jeu).
Ajoute l'attribut data-errors à la section outer lorsque l'entrée a des erreurs explicitement placées (via prop ou setErrors).
Ajoute l'attribut data-complete à la section outer lorsqu'une entrée (exemple de terrain de jeu) :
- Soit :
  - L'entrée a des règles de validation.
  - Toutes les règles de validation sont respectées.
  - Il n'y a pas d'erreurs sur l'entrée.
- Ou :
  - L'entrée n'a pas de règles de validation.
  - L'entrée n'a pas d'erreurs.
  - L'entrée est sale et a une valeur.
Nouvelles propriétés context.state :
- state.rules - vrai lorsque l'entrée a des règles de validation.
- state.errors - vrai lorsque l'entrée a des erreurs explicites placées sur elle.
- state.complete - même logique que data-complete.
- state.validationVisible - vrai lorsque la condition validation-visibility est remplie (elle montre des erreurs de validation s'il y en a).
Refactorise le module Nuxt 3 pour un temps de construction plus rapide et une meilleure résolution de fichiers.
Ajoute le support de la langue persane 🇮🇷 (merci @shahabbasian)
Ajoute le support de la langue portugaise 🇧🇷 (merci @r-martins)
Ajoute le support de la langue turque 🇹🇷 (merci @ragokan)
Ajoute le support de la langue finnoise 🇫🇮 (merci @mihqusta)
Ajoute le support de la langue espagnole 🇦🇷 (merci @inibg)

📙 Documentation

Ajout de la documentation node.setErrors.
Ajout de la documentation de soumission de formulaire programmatique.
Amélioration de la documentation context.state avec de nouvelles propriétés et de meilleures descriptions.

🐛 Corrections de bugs

Corrige un problème qui provoquait des exceptions lors du processus de construction lors du rendu côté serveur et de la génération côté serveur sur Nuxt et vite-ssg/vitesse (#81).
Corrige un bug qui empêchait les entrées file de déclencher des événements onChange personnalisés (#90).
Corrige un bug qui empêchait les formulaires de sortir leur id vers le DOM.
Corrige un problème de style dans le thème Genesis qui faisait que les éléments de la liste de sélection étaient gris avant qu'une option ne soit sélectionnée lors de l'utilisation d'un espace réservé (#59)
Corrige un bug qui faisait que la propriété :value sur les formulaires était modifiée lors de l'entrée (#72).
Corrige une incohérence entre les événements prop:{propName} émis par les propriétés par défaut et les propriétés définies par l'entrée personnalisée (#73)

1.0.0-beta.3

22 février 2022

beta.3 allait être une si grande version que nous avons décidé de la sauter et de passer directement à beta.4 👀 ! Juste pour rire. Nous avons eu des problèmes avec npm et avons dû augmenter 🤦.

Le nouveau package @formkit/nuxt est un module Nuxt 3 complet qui rend l'utilisation de FormKit avec Nuxt 3 aussi simple que possible !
defaultConfig inclut maintenant un nouveau package @formkit/dev qui décode les codes d'erreur de FormKit en messages de console utiles (aucune action requise) (#56).
FormKit est officiellement open-source sous la licence MIT !
La clé preserve s'applique maintenant à tous les descendants (#53).
Exporte toutes les fonctions de formatage de texte dans le package @formkit/i18n (#54).
Ajoute le support de la langue néerlandaise 🇳🇱 (merci @arjendejong12).
Ajoute le support de la langue croate 🇭🇷 (merci @antemarkic).
Améliore le support de la langue allemande 🇩🇪 (merci @tosling).

📙 Documentation

Nouvelle documentation d'installation. Vous n'avez plus besoin d'un jeton d'authentification pour installer à partir de l'organisation @formkit !
Documentation d'installation de Nuxt
Documentation d'internationalisation améliorée pour les remplacements de messages sélectifs.

🐛 Corrections de bugs

Corrige un bug qui faisait que les cases à cocher multi-sélection n'affichaient pas la valeur actuelle lorsqu'elle était définie à partir du nœud parent et lors de l'utilisation de la propriété options qui est stockée dans une variable externe (#55)
Corrigé un bug qui faisait que le placeholder sur les entrées de sélection était supprimé si quelque chose provoquait le re-rendu de l'entrée (#52).
Corrigé la couleur du placeholder de sélection (#51)

Les formulaires sont automatiquement désactivés lorsqu'un gestionnaire de soumission asynchrone est en attente (#44).
Ajout d'une nouvelle prop submit-behavior pour se désinscrire des nouveaux formulaires automatiquement désactivés.
Exporte le plugin de liaisons Vue à FormKit en tant que bindings dans le package @formkit/vue.
Le type button et submit sont automatiquement ignorés.
Introduit une nouvelle clé messages dans le defaultConfig pour permettre des substitutions partielles aux locales. Cela permet des substitutions de messages sélectives pour les locales déjà enregistrées (#42).
Le compilateur de schéma prend désormais en charge "undefined" comme une sortie valide (en d'autres termes $: undefined donnerait la valeur undefined au lieu de la chaîne "undefined").
Ajoute la locale 🇮🇱 Hébreu (merci @Hepi420)
Ajoute la locale 🇨🇳 Chinoise (merci @myleslee)

🐛 Corrections de bugs

Correction d'un problème qui faisait que les cases à cocher avec options ne s'hydrataient pas correctement lorsqu'elles étaient repeuplées à partir d'un group, list, ou form (#45).
Correction d'un problème qui faisait que les cases à cocher avec options ne s'affichaient pas correctement lorsqu'il manquait la prop label (#41).
Amélioration significative du support TypeScript pour les props “synthétiques” (#43).

Modifie la prop validation-behavior sur le composant <FormKit> en validation-visibility.
Modifie la prop schema sur le composant <FormKit> en sections-schema.

🎉 Nouvelles fonctionnalités

Ajoute le type d'entrée natif file avec support pour certaines fonctionnalités à valeur ajoutée :
- Repeuplement uniquement à l'affichage.
- Glisser-déposer.
- Effacement de l'entrée.
Ajoute la fonction d'aide createInput pour faciliter l'écriture des entrées personnalisées.
La nouvelle prop incomplete-message permet une personnalisation en ligne (ou la désactivation) du message affiché par un formulaire lorsqu'il tente de soumettre et que toutes ses entrées ne sont pas valides.
Met à jour le defaultConfig pour accepter les entrées personnalisées.
Ajoute une clé de section de préfixe qui permet d'injecter du contenu immédiatement avant un élément d'entrée.
Ajoute une clé de section de suffixe qui permet d'injecter du contenu immédiatement après un élément d'entrée.
🇷🇺 Locale russe (merci @andreimakushkin!)
Refactorise le thème Genesis pour utiliser une structure de variable CSS beaucoup plus robuste.
Ajoute une nouvelle fonctionnalité aux schémas qui permet aux utilisateurs de préfixer les propriétés props et attrs avec __raw__ pour passer la valeur brute au lieu de son résultat analysé (#36).

📙 Documentation

Nouveau guide créer une entrée personnalisée.
Nouvelle page de documentation avancée sur l'entrée personnalisée.
Les "clés de composition" seront désormais appelées "clés de section".
Ajoute une documentation sur plugin.library — le mécanisme que les plugins utilisent pour définir de nouveaux types d'entrée.
L'éditeur de code interactif pour les exemples prend désormais en charge plusieurs fichiers.
Dans le FormKit Playground, vous pouvez ajouter de nouveaux fichiers et les importer les uns dans les autres. Le FormKit Playground prend en charge les fichiers .vue, .js, formkit.config.js et tailwind.config.js.
Le FormKit Playground est désormais situé à https://formkit.com/playground et les anciens terrains de jeu https://formkit.com/playground/vue sont obsolètes.

🐛 Corrections de bugs

Corrige un bug qui empêchait l'affichage du message incomplet sur les formulaires (#29).
Corrige les typages TypeScript pour les événements @submit et @submit-raw.
Corrige l'ordre des nombres dans les messages de validation length et between pour toujours placer le nombre inférieur en premier (#35).
Corrige un problème (#32) avec les listes de sélection où la propriété :options n'acceptait pas les valeurs numériques.

Nouvelle règle de validation "hints" — des modificateurs qui changent le comportement d'une règle de validation. Les hints pris en charge vous permettent de :
- Exécuter une règle lorsque le champ est vide.
- Forcer une règle à s'exécuter même lorsque les règles précédentes échouent.
- Délayer une règle de validation.
- Rendre une règle de validation facultative.
Lorsqu'une entrée est à l'intérieur d'un formulaire et démontée (comme un v-if), elle supprime maintenant sa valeur des données du formulaire et désenregistre son nœud central.
La nouvelle propriété preserve permet aux entrées de ne pas supprimer leurs données des groupes, listes et formulaires lorsqu'elles sont supprimées.

🐛 Corrections de bugs

Correction d'un problème qui faisait que les options de radio et de case à cocher de valeur numérique s'affichaient de manière incorrecte.
Correction d'un bug qui faisait que le placeholder ne s'affichait pas lorsque la propriété venait après la propriété options.
Correction d'un bug qui faisait que la valeur de délai n'était pas respectée lorsqu'elle était définie à l'aide de la configuration de l'ancêtre.

La gestion des erreurs de formulaire est là. Vous pouvez désormais définir des erreurs d'entrée sur un formulaire entier, un groupe ou une liste avec la propriété input-errors ou les méthodes $formkit.setErrors(). En savoir plus à ce sujet sur les docs du formulaire.
Nouveau $formkit.setLocale() change réactivement la langue de tous les messages affichés.
Ajoute les locales 🇫🇷 Français et 🇩🇪 Allemand (merci @HoreKk et @digitalkaoz)
Ajoute un nouvel objet proxy rootConfig qui est utilisé pour stocker la configuration de base globale et les valeurs de propriété (refonte significative du système de configuration).
Ajout du suivi des dépendances ledger aux instances de FormKitObservedNode.
Le bouton de soumission sur les formulaires utilise désormais la locale pour l'étiquette "Submit" par défaut.
Nouvel événement de nœud enfant émis lorsqu'un parent a un enfant ajouté à lui.
La règle length peut désormais prendre des arguments max/min dans n'importe quel ordre length:15,5 ou length:5,15 évaluent la même chose.
Ajoute une nouvelle fonction getNode pour accéder directement à un nœud FormKit en utilisant l'API de composition.
Améliore l'emplacement d'importation du css @formkit/theme.

🐛 Corrections de bugs

Correction d'un bug qui provoquait parfois une exception chez les enfants des entrées list lors de l'affichage des erreurs de validation.
Amélioration de plusieurs messages d'erreur de validation.
Correction d'un problème avec les entrées de sélection qui empêchait les appels bruts node.input() de déclencher la réactivité dans Vue.

Un nouveau raccourci de schéma $formkit pour utiliser les entrées FormKit dans un schéma (Issue #15).
Nouvelle propriété disabled sur les entrées de formulaire, de liste et de groupe qui désactive automatiquement toutes les entrées enfants (Issue #16).
Nouvelle propriété submitAttrs sur les formulaires qui vous permet de passer des attributs au bouton de soumission du formulaire.
Ajout d'une nouvelle propriété universelle ignore qui empêche les données d'une entrée d'être utilisées dans un formulaire.

🐛 Corrections de bugs

Correction d'un problème qui empêchait les schémas de rendre des expressions lorsqu'ils étaient utilisés à l'intérieur de la propriété children d'un composant FormKit. (Issue #21).
Ajout d'une vérification au cas où une fonction rootClasses renvoie incorrectement undefined (Issue #17).
Correction d'un bug qui faisait qu'un bouton de soumission de formulaire polluait l'objet de données du formulaire avec une propriété submit_x (Issue #22).
Correction d'un bug qui faisait échouer les nœuds de schéma $cmp à se remonter si l'objet racine du schéma était réinitialisé, provoquant une re-analyse complète (Issue #14).

Docs

Premiers pas

Essentiels

Entrées

Plugins

Guides

Référence de l'API

Outils

À propos

Sponsors

Premiers pas

Essentiels

Entrées

Plugins

Guides

Docs

Outils

À propos

Inscrivez-vous pour les dernières nouvelles