Documentation du Widget Devise

Aperçu​

Le widget Devise fournit un champ de saisie spécialisé pour les valeurs monétaires avec formatage de devise intégré, support de locale et validation. Il formate automatiquement les nombres selon la devise et la locale sélectionnées, ce qui le rend idéal pour les applications financières, les plateformes e-commerce et toute interface nécessitant une saisie monétaire.

Fonctionnalités​

• Support de Plusieurs Devises : Prend en charge les principales devises internationales
• Formatage de Locale : Formatage automatique des nombres selon les paramètres de locale
• Contrôle de Précision : Décimales configurables (0-20)
• Valeurs Négatives : Support optionnel pour les montants négatifs
• Formatage en Temps Réel : Formate la saisie pendant que l'utilisateur tape
• Validation : Règles de validation intégrées avec messages personnalisés
• Design Responsive : S'adapte aux différentes tailles d'écran

Interface de Configuration​

Paramètres Globaux​

1. Nom : Entrez un libellé descriptif pour votre champ de devise
2. Variable/Modèle : Définissez le nom de la variable (ex : amount, price, total)
3. Valeur par Défaut : Définir une valeur de devise initiale (optionnel)

Configuration de la Devise​

1. Local : Sélectionnez la locale pour le formatage des nombres
   • Affecte les séparateurs décimaux, les séparateurs de milliers
   • Détermine le placement du symbole de devise
2. Devise : Choisissez le type de devise
   • Peut être défini sur "masqué" pour masquer le symbole de devise
   • Prend en charge la sélection dynamique de devise via des variables
3. Autoriser les Négatifs : Activer la saisie de valeurs négatives
   • Utile pour les remises, les remboursements ou les ajustements
4. Précision : Définir les décimales
   • Plage : 0-20
   • Valeurs courantes : 2 pour la plupart des devises, 0 pour les nombres entiers

Règles de Validation​

Le widget Devise prend en charge une validation complète :

Validation Intégrée​

• Champ Requis : Marquer le champ comme obligatoire
• Validation de Type : Assure uniquement une saisie numérique
• Validation de Plage : Définir les valeurs minimales et maximales

Règles de Validation Personnalisées​

Ajoutez des règles de validation personnalisées avec :

• Type de Règle : Sélectionner parmi les règles de validation disponibles
• Valeur : Définir le paramètre de validation
• Message : Message d'erreur personnalisé en cas d'échec de validation

Configuration de Style​

Options de Mise en Page​

• Largeur : Définir la largeur du champ (ex : "100%", "200px")
• Placeholder : Texte indicatif affiché lorsque le champ est vide
• Classe : Classes CSS pour un style personnalisé

Comportement Responsive​

• Mise en Page : Choisir entre affichage en bloc et en ligne
• Bordure : Activer/désactiver la visibilité de la bordure du champ

Fonctionnalités Avancées​

Paramètres de Devise Dynamiques​

La devise et la locale peuvent être définies dynamiquement à l'aide de variables :

// Devise dynamique à partir d'une variable
currency: "${variable_name}";

// Locale dynamique à partir d'une variable
currency_local: "${locale_variable}";

Gestion des Événements​

Déclenché lorsque la valeur de devise change :

• Accéder à la nouvelle valeur via le paramètre d'événement
• Utile pour les calculs, les validations ou les appels API
• Peut déclencher des actions et fonctions personnalisées

Écrans de Validation​

Configurez le comportement du widget sur différents écrans d'interface :

Paramètres par Écran​

• Disponible : Afficher/masquer le widget par écran
• Visible : Contrôler la visibilité avec des conditions
• Requis : Rendre le champ obligatoire par écran
• Désactivé : Désactiver la saisie par écran

Conditions Avancées​

Utilisez des expressions JavaScript pour un comportement dynamique :

Exemples d'Utilisation​

Saisie de Prix E-commerce Basique​

Calculatrice Financière​

Conseils d'Intégration​

Intégration de Formulaire​

• Fonctionne de manière transparente dans les conteneurs de formulaire
• Hérite du comportement de validation du formulaire
• Prend en charge la soumission et la réinitialisation du formulaire

Intégration API​

• Les valeurs sont stockées sous forme de nombres pour une transmission API facile
• Le formatage de l'affichage vs. la valeur stockée est géré automatiquement
• Compatible avec les APIs REST et GraphQL

Liaison de Données​

• Liaison de données bidirectionnelle avec les modèles de formulaire
• Mises à jour en temps réel des composants connectés
• Conversion de type et validation automatiques

Bonnes Pratiques​

Expérience Utilisateur​

1. Libellés Clairs : Utilisez des noms de champ descriptifs
2. Placeholders Utiles : Fournissez des exemples de formats
3. Retour Immédiat : Affichez le formatage pendant que l'utilisateur tape
4. Messages d'Erreur : Messages de validation clairs et exploitables

Performance​

1. Mises à Jour Efficaces : Utilisez les événements onChange avec parcimonie
2. Timing de Validation : Équilibrez la validation en temps réel vs. à la soumission
3. Chargement de Devise : Mettez en cache les données de devise lorsque c'est possible

Accessibilité​

1. Navigation au Clavier : Assurez une accessibilité complète au clavier
2. Lecteurs d'Écran : Fournissez des étiquettes ARIA appropriées
3. Contraste de Couleur : Maintenez un contraste de texte lisible
4. Gestion du Focus : Indicateurs de focus clairs

Dépannage​

Problèmes Courants​

La Devise ne se Formate pas

• Vérifiez que le paramètre de locale correspond au format attendu
• Vérifiez que le code de devise est pris en charge
• Assurez-vous que le paramètre de précision est approprié

La Validation ne Fonctionne pas

• Vérifiez la configuration des règles de validation
• Vérifiez les paramètres de champ requis par écran
• Vérifiez les expressions de validation personnalisées

La Valeur ne se Sauvegarde pas

• Confirmez que le nom de variable/modèle est unique
• Vérifiez la configuration de soumission du formulaire
• Vérifiez que la liaison de données est correctement configurée

Compatibilité des Navigateurs​

• Navigateurs modernes avec support JavaScript ES6+
• Compatibilité Vue.js 2.x requise
• Le formatage de devise utilise l'API Intl.NumberFormat

Support​

Pour une assistance supplémentaire avec la configuration du widget Devise :

1. Vérifiez les messages d'erreur de validation pour des conseils spécifiques
2. Consultez la console du navigateur pour les erreurs JavaScript
3. Testez avec différentes combinaisons devise/locale
4. Vérifiez l'intégration avec votre configuration de formulaire spécifique