From 958efaefc3ed79b4f9165503cabcfd1e3f457184 Mon Sep 17 00:00:00 2001 From: Simon Malesys Date: Tue, 12 Feb 2019 02:08:19 +0100 Subject: [PATCH] I18n: French translation (#12153) * Docs: add french translation (fr-FR) in "components.json". * Docs: add french translation (fr-FR) in "page.json" * Docs: add french translation (fr-FR) in "route.json" * Docs: add french translation (fr-FR) in "title.json" * Docs: remove a comma in "title.json" * Docs: translate alert.md into french (fr-FR) * Docs: remove a comma in "component.json" * Docs: translate badge.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * * a77b5518 Docs: translate breadcrumb.md into french (fr-FR) * Docs: translate button.md into french (fr-FR) * Docs: translate card.md into french (fr-FR) * Docs: translate carousel.md into french (fr-FR) * Docs: translate cascader.md into french (fr-FR) * Docs: translate checkbox.md into french (fr-FR) * Docs: translate collapse.md into french (fr-FR) * Docs: translate color-picker.md into french (fr-FR) * Docs: translate color.md into french (fr-FR) * Docs: translate container.md into french (fr-FR) * Docs: translate custom-theme.md into french (fr-FR) * Docs: translate date-picker.md into french (fr-FR) * Docs: translate datetime-picker.md into french (fr-FR) * Docs: translate dialog.md into french (fr-FR) * Docs: translate form.md into french (fr-FR) * Docs: translate i18n.md into french (fr-FR) * Docs: translate icon.md into french (fr-FR) * Docs: translate input-number.md into french (fr-FR) * Docs: translate input.md into french (fr-FR) * Docs: translate installation.md into french (fr-FR) * Docs: translate dropdown.md into french (fr-FR) * Docs: translate layout.md into french (fr-FR) * Docs: translate loading.md into french (fr-FR) * Docs: translate menu.md into french (fr-FR) * Docs: translate message-box.md into french (fr-FR) * Docs: translate message.md into french (fr-FR) * Docs: translate notification.md into french (fr-FR) * Docs: translate pagination.md into french (fr-FR) * Docs: translate popover.md into french (fr-FR) * Docs: translate progress.md into french (fr-FR) * Docs: translate quickstart.md into french (fr-FR) * Docs: translate radio.md into french (fr-FR) * Docs: translate rate.md into french (fr-FR) * Docs: translate select.md into french (fr-FR) * Docs: translate slider.md into french (fr-FR) * Docs: translate steps.md into french (fr-FR) * Docs: translate switch.md into french (fr-FR) * Docs: translate table.md into french (fr-FR) * Docs: translate tabs.md into french (fr-FR) * Docs: translate tag.md into french (fr-FR) * Docs: translate time-picker.md into french (fr-FR) * Docs: translate tooltip.md into french (fr-FR) * Docs: translate transfer.md into french (fr-FR) * Docs: translate transition.md into french (fr-FR) * Docs: translate tree.md into french (fr-FR) * Docs: translate typography.md into french (fr-FR) * Docs: translate upload.md into french (fr-FR) * Docs: update the configuration for the french translation * Docs: update the french documentation from 2.4.4 to 2.4.11 * Changelog: translate to line 408 into french (fr-FR) * Changelog: finish the translation into french (fr-FR) * Changelog: update from 2.4.11 to 2.5.4 * Doc: update french translation from 2.4.11 to 2.5.4 * Changelog: fix a display bug with the subtitles * Examples: add french language (fr-FR) in search.vue component * Doc: change some french titles * Doc: add the french locale to app.vue --- .gitignore | 1 + CHANGELOG.fr-FR.md | 873 ++++++++++ examples/app.vue | 4 + examples/components/header.vue | 3 +- examples/components/search.vue | 25 +- examples/docs/fr-FR/alert.md | 228 +++ examples/docs/fr-FR/badge.md | 146 ++ examples/docs/fr-FR/breadcrumb.md | 44 + examples/docs/fr-FR/button.md | 189 ++ examples/docs/fr-FR/card.md | 219 +++ examples/docs/fr-FR/carousel.md | 241 +++ examples/docs/fr-FR/cascader.md | 1701 ++++++++++++++++++ examples/docs/fr-FR/checkbox.md | 329 ++++ examples/docs/fr-FR/collapse.md | 156 ++ examples/docs/fr-FR/color-picker.md | 182 ++ examples/docs/fr-FR/color.md | 130 ++ examples/docs/fr-FR/container.md | 299 ++++ examples/docs/fr-FR/custom-theme.md | 123 ++ examples/docs/fr-FR/date-picker.md | 533 ++++++ examples/docs/fr-FR/datetime-picker.md | 329 ++++ examples/docs/fr-FR/dialog.md | 318 ++++ examples/docs/fr-FR/dropdown.md | 358 ++++ examples/docs/fr-FR/form.md | 893 ++++++++++ examples/docs/fr-FR/i18n.md | 226 +++ examples/docs/fr-FR/icon.md | 102 ++ examples/docs/fr-FR/input-number.md | 210 +++ examples/docs/fr-FR/input.md | 745 ++++++++ examples/docs/fr-FR/installation.md | 32 + examples/docs/fr-FR/layout.md | 388 +++++ examples/docs/fr-FR/loading.md | 269 +++ examples/docs/fr-FR/menu.md | 358 ++++ examples/docs/fr-FR/message-box.md | 475 ++++++ examples/docs/fr-FR/message.md | 306 ++++ examples/docs/fr-FR/notification.md | 428 +++++ examples/docs/fr-FR/pagination.md | 258 +++ examples/docs/fr-FR/popover.md | 268 +++ examples/docs/fr-FR/progress.md | 67 + examples/docs/fr-FR/quickstart.md | 269 +++ examples/docs/fr-FR/radio.md | 233 +++ examples/docs/fr-FR/rate.md | 180 ++ examples/docs/fr-FR/select.md | 733 ++++++++ examples/docs/fr-FR/slider.md | 254 +++ examples/docs/fr-FR/steps.md | 178 ++ examples/docs/fr-FR/switch.md | 169 ++ examples/docs/fr-FR/table.md | 2176 ++++++++++++++++++++++++ examples/docs/fr-FR/tabs.md | 400 +++++ examples/docs/fr-FR/tag.md | 217 +++ examples/docs/fr-FR/time-picker.md | 227 +++ examples/docs/fr-FR/tooltip.md | 243 +++ examples/docs/fr-FR/transfer.md | 333 ++++ examples/docs/fr-FR/transition.md | 180 ++ examples/docs/fr-FR/tree.md | 1254 ++++++++++++++ examples/docs/fr-FR/typography.md | 150 ++ examples/docs/fr-FR/upload.md | 437 +++++ examples/i18n/component.json | 31 + examples/i18n/page.json | 93 + examples/i18n/route.json | 3 + examples/i18n/title.json | 6 + examples/nav.config.json | 250 +++ examples/route.config.js | 12 + 60 files changed, 19473 insertions(+), 11 deletions(-) create mode 100644 CHANGELOG.fr-FR.md create mode 100644 examples/docs/fr-FR/alert.md create mode 100644 examples/docs/fr-FR/badge.md create mode 100644 examples/docs/fr-FR/breadcrumb.md create mode 100644 examples/docs/fr-FR/button.md create mode 100644 examples/docs/fr-FR/card.md create mode 100644 examples/docs/fr-FR/carousel.md create mode 100644 examples/docs/fr-FR/cascader.md create mode 100644 examples/docs/fr-FR/checkbox.md create mode 100644 examples/docs/fr-FR/collapse.md create mode 100644 examples/docs/fr-FR/color-picker.md create mode 100644 examples/docs/fr-FR/color.md create mode 100644 examples/docs/fr-FR/container.md create mode 100644 examples/docs/fr-FR/custom-theme.md create mode 100644 examples/docs/fr-FR/date-picker.md create mode 100644 examples/docs/fr-FR/datetime-picker.md create mode 100644 examples/docs/fr-FR/dialog.md create mode 100644 examples/docs/fr-FR/dropdown.md create mode 100644 examples/docs/fr-FR/form.md create mode 100644 examples/docs/fr-FR/i18n.md create mode 100644 examples/docs/fr-FR/icon.md create mode 100644 examples/docs/fr-FR/input-number.md create mode 100644 examples/docs/fr-FR/input.md create mode 100644 examples/docs/fr-FR/installation.md create mode 100644 examples/docs/fr-FR/layout.md create mode 100644 examples/docs/fr-FR/loading.md create mode 100644 examples/docs/fr-FR/menu.md create mode 100644 examples/docs/fr-FR/message-box.md create mode 100644 examples/docs/fr-FR/message.md create mode 100644 examples/docs/fr-FR/notification.md create mode 100644 examples/docs/fr-FR/pagination.md create mode 100644 examples/docs/fr-FR/popover.md create mode 100644 examples/docs/fr-FR/progress.md create mode 100644 examples/docs/fr-FR/quickstart.md create mode 100644 examples/docs/fr-FR/radio.md create mode 100644 examples/docs/fr-FR/rate.md create mode 100644 examples/docs/fr-FR/select.md create mode 100644 examples/docs/fr-FR/slider.md create mode 100644 examples/docs/fr-FR/steps.md create mode 100644 examples/docs/fr-FR/switch.md create mode 100644 examples/docs/fr-FR/table.md create mode 100644 examples/docs/fr-FR/tabs.md create mode 100644 examples/docs/fr-FR/tag.md create mode 100644 examples/docs/fr-FR/time-picker.md create mode 100644 examples/docs/fr-FR/tooltip.md create mode 100644 examples/docs/fr-FR/transfer.md create mode 100644 examples/docs/fr-FR/transition.md create mode 100644 examples/docs/fr-FR/tree.md create mode 100644 examples/docs/fr-FR/typography.md create mode 100644 examples/docs/fr-FR/upload.md diff --git a/.gitignore b/.gitignore index 29a918ed..a9b3749c 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ examples/element-ui examples/pages/en-US examples/pages/zh-CN examples/pages/es +examples/pages/fr-FR fe.element/element-ui .npmrc coverage diff --git a/CHANGELOG.fr-FR.md b/CHANGELOG.fr-FR.md new file mode 100644 index 00000000..0636e719 --- /dev/null +++ b/CHANGELOG.fr-FR.md @@ -0,0 +1,873 @@ +## Changelog + +### 2.5.4 + +*2019-02-01* + +#### Corrections de bugs + +- Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282) + +### 2.5.3 + +*2019-01-31* + +#### Optimisation + +- Optimisation du code de Message (par @vok123 dans #14029) +- Suppression des gh-pages (par @ziyoung dans #14266) +- Ajout du lien IssueHunt (par @island205 dans #14261) + +#### Corrections de bugs + +- Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242) +- Correction du style du TabBar actif (par @iamkun dans #14240) +- Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253) + +### 2.5.2 + +*2019-01-27* + +#### Optimisation +- Docs: + - Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231) + +#### Corrections de bugs +- Build: + - Suppression des commentaires non supprimés dans le module umd `lib/index.js` (par @island205 dans #14233) + - Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232) + - Correction des problèmes de build 2.5.1 (par @iamkun dans #14228) + +### 2.5.1 + +*2019-01-26* + +#### Optimisation +- DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211) +- Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217) + +#### Corrections de bugs +- Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220) +- Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222) + +### 2.5.0 + +*2019-01-25* + +#### Nouvelles fonctionnalités +- DatePicker + - Ajout de l'attribut `validate-event` (par @ziyoung dans #13531) +- DateTimePicker + - `pickerOptions` supporte l'option `selectableRange` (par @eeeeeeeeeeeason) +- Tag + - Ajout de l'événement `click` (par @licdream dans #14106) +- I18n + - Support de la langue kirghize (par @zzjframework dans #14174) + +#### Optimisation +- Mise à niveau vers webpack@4 (par @jikkai dans #14173) +- Input + - Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471) +- Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773) + +#### Corrections de bugs +- Autocomplete + - Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung) + - Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang) +- Carrousel + - Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman) +- Cascader + - Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun) + - Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet) + - Correction de l'icône couvrant le texte (#13596) (par @ziyoung) +- Checkbox + - Refonte du style (par @PanJiaChen) +- DatePicker + - Ajout d'un `key` de v-for manquant dans TimeSpinner (#13547) (par @Ende93) + - Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91) +- Input + - Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205) +- Pagination + - La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman) +- Popover + - Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko) + - Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite) +- Radio + - Refonte du style (par @ohhhoney1) +- Table + - Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1) + - Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy) + - Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa) + - Correction du problème d'affichage `show-summary` lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao) +- Tabs + - Correction d'un bug de défilement automatique (#13696) (par @iamkun) + - Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun) + - Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun) +- Tree + - Correction de la propriété `showCheckbox` sur `Tree` qui ne pouvait pas affecter leurs `tree-node` enfants(par @KidneyFlower) + - Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung) +- Upload + - Ajout de le propriété `url` au fichier uploadé lorsque `list-type` est modifié (#13771) (par @elfman) +- Slider + - Correction de l'indentation du code source (#13955) (par @wacky6) +- I18n + - Ajout des traductions manquantes en catalan (par @jaumesala) + - Ajout de la traduction russe manquante (#13658) (par @justlp) + - Correction des traductions en finnois (#14137) (par @jenkrisu) +- Doc + - Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310) +- Autres + - Suppression d'un script inutile (par @ziyoung) + - Correction des ancres (#13753) (par @iamkun) + - Correction de l'incohérence des majuscules dans la documentation (par @wonderjar) + - Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun) + - Ajout des logs yarn au .gitignore (#13922) (par @mimimi) + - Suppression du sponsor duotai (#14156) (par @island205) + - Mise à jour du QR code dans le readme (#13960) (par @iamkun) + - Mise à jour du lien CDN, correction d'une typo (par @ziyoung) + +### 2.4.11 + +*2018-11-21* + +- Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478 +- Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712) + +### 2.4.10 + +*2018-11-16* + +- Correction des clics multiples sur Select pour afficher la liste déroulante, #13268 +- L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208 +- Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen) +- Ajout de l'attribut `loop` dans le composant Carrousel, #13217 +- Lorsque les données de Table changent, la ligne en surbrillance reste, #13200 +- Le slot du header de Table peut recevoir des paramètres, #13263 +- La méthode `clearFilter` de Table peut recevoir des arguments, #13176 +- La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun) +- Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278 +- ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299 +- InputNumber: ajout de la méthode `select`, #13286 (par @st-sloth) +- AutoComplete: ajout de l'événement `clear`, #12171(par arthurdenner) #13326 +- Vous pouvez fermer Menu en cliquant à l'extérieur, #13296 +- La méthode `validateField` du formulaire peut recevoir des arguments, #13319 +- Cascader: ajout de l'événement `visible-change`, #13415 +- DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm) +- Tree: ajout des propriétés `iconClass` et `currentNodeKey`, #13337 #13197 (par @isnifer) +- Progress: ajout du texte de statut #13198 (par @ali-master) +- Correction de `defaultCheckedKeys` de Tree, #13349 (par @dive2Pro) + +### 2.4.9 + +*2018-10-26* + +- Le paramètre `clearValidate` de Form supporte les strings #12990 (par @codinglobster) +- Ajout de l'attribut `type` pour Badge, #12991 +- Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel) +- Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU) +- Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat) +- Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh) +- Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070 +- La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat) +- Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039 +- Correction d'un problème d'affichage du label TabNav, #13178 +- Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl) +- Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman) +- Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987 +- Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052 + +### 2.4.8 + +- Ne pas afficher le contour lorsque le Switch est focus, #12771 +- Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox) +- Ajout d'un événement d'ouverture pour Dialog, #12828 +- Correction de l'ordre d'affichage incorrect de TabNav, #12846 +- Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948 +- Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854 +- Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf). +- Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898 +- Correction d'un problème avec l'attribut `render-header` de l'en-tête de table qui ne fonctionnait pas, #12914 + +### 2.4.7 + +*2018-09-14* + +- Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348 +- Correction des erreurs lancées par DatePicker en mode multiple, #12347 +- Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali) +- Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer) +- Correction du champ non-subrillant dans Cascader, #12341 +- Correction d'un mauvais ordre de Tabpane, #12346 +- Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy) +- Correction du style de SubMenu, #2457 +- Correction de la surbrillance après la sélection de SubMenu, #12479 +- Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang) +- Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525 +- Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530 +- Correction des filtres de table non-affichés, #12539 +- Correction de l'arbre incapable de supprimer des nœuds, #12684 +- Correction de la hauteur de Select Input changeant en mode simple, #12719 +- Correction d'un style du label de FormItem sous forme imbriquée, #12748 +- Ajout de l'attribut `autocomplete` pour Input, `auto-complete` devenant obsolète, #12514 (par @axetroy) +- Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf) + +### 2.4.6 + +*2018-08-09* + +- Correction de Table n'affichant pas l'icône de filtre lorsque `filters` est un tableau vide, #12165 +- Correction de Menu ne sauvegardant pas l'état actif lorsque `collapse` change, #12178 (par @elfman) +- Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248 +- Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262 +- Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est `undefined`, #12322 +- Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181 +- Correction du mot-clé de la requête Select disparaissant en mode multi, #12304 +- Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203 +- Correction de l'affichage incorrect de Main sur IE, #12237 +- Correction de Input déclenchant deux validations de formulaire, #12260 +- Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256 +- Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279 +- Correction du Popover non-visible quand InputNumber a le focus, #12284 +- Ajout de l'attribut `popper-append-to-body` pour Autocomplete, #12241 +- Ajout du support du modificateur `sync` pour l'attribut `page-size` de Pagination, #12281 + +### 2.4.5 + +*2018-07-26* + +- Correction du réglage de Table `class-name` qui ne fonctionne pas pour les colonnes `expand`, #12006 +- Ajout de la méthode `toggleAllSelection` pour Table, #12047 +- Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108 +- Correction de `line-height` de l'option impossible à régler, #12120 +- Correction de TimeSelect avec la valeur par défaut `null` ne pouvant être assigné après avoir exécuté `resetField`, #12010 +- Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008 +- Correction d'un nœud parent vérifié en mode lazy, #12106 +- Ajout du paramètre `includeHalfChecked` pour getCheckedNodes de Tree, #12014 + +### 2.4.4 + +*2018-07-13* + +- Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837 +- Correction d'une mauvaise position du slot `suffix` de Input lorsque le slot `suffixe` est avec le slot `append`, #11951 +- Correction de Input affichant toujours l'icône clear même en lecture seule, #11967 +- Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847 +- Correction des `default-checked-keys` qui ne fonctionnait pas, #11971 +- Correction de `empty-text` non visible lorsque le noeud de Tree est filtré, #11971 +- Correction de la position du `empty-text` surdimensionné dans Table, #11965 +- Correction de la surbrillance de la ligne de Table lorsque `current-row-key` est assignée à `null`, #11866 +- Correction de l'affichage de la liste déroulante des filtres lorsque `filters` est un tableau vide, #11864 +- Correction du label de Radio qui n'arrête pas la propagation des événements, #11912 + +### 2.4.3 + +*2018-07-03* + +- Correction de `allow-drop` qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797 +- Maintenant vous pouvez passer un paramètre à la méthode `clearValidate` du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821 +- Ajout de l'attribut `distinguishCancelAndClose` pour MessageBox, #11831 + +### 2.4.2 + +*2018-06-26* + +- Maintenant `class-name` et `label-class-name` de Table sont réactifs, #11626 +- Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque `highlight-current-row` était `false`, #11646 +- Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton `round` ou `circle`, #11605 +- Correction du style du Select de Pagination, #11622 +- Correction de la méthode `open` du menu quand `collapse` est dynamiquement changé, #11646 +- Ajout des paramètres `activeName` et `oldActiveName` au hook before-leave de Tabs, #11713 +- Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588 +- Correction de Cascader ne se fermant pas quand l'option est cliquée quand `change-on-select` est `true`, #11623 +- La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672 + +### 2.4.1 + +*2018-06-08* + +- Suppression du duplicata de la déclaration de type pour Autocomplete, #11388 +- Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427 +- Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est `null`, #11460 +- Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462 +- Ajout de l'attribut `iconClass` pour MessageBox, #11499 +- Ajout de l'attribut `stretch` pour Tabs, #11476 +- Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est `lazy`, #11461 +- Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464 +- Correction de l'état de la mise au point lorsque `before-leave` renvoie une promesse résolue, #11386 +- Correction de la désactivation du Popover qui créait encore des poppers, #11426 +- Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf) +- Ajout de l'événement `closed` pour Dialog, #11490 + +### 2.4.0 Fullerene + +*2018-05-28* + +#### Nouvelles fonctionnalités +- Général + - L'outil de développement et le bundler sont basculés vers le webpack natif, #11216 + - Vous pouvez maintenant définir globalement l'index z initial des popups, #11257 +- Autocomplete + - Ajout de l'attribut `hide-loading`, #11260 +- Button + - Vous pouvez maintenant utiliser l'attribut `size` sur les boutons circulaires pour contrôler leur taille, #11275 +- InputNumber + - Ajout de l'attribut `precision`, #11281 +- Tabs + - Ajout de l'attribut `before-leave`, #11259 + - Ajout de l'attribut `lazy`, #11167（by @Kingwl） +- Table + - Ajout de la méthode `sort` pour trier manuellement la table, #11311 + +#### Corrections de bugs +- Input + - Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter) +- Popover + - Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265 +- Breadcrumb + - Correction de l'attribut `to` ne supportant pas la mise à jour dynamique, #11286 +- Upload + - Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode `beforeUpload`, #11297 (par @qusiba) +- Infobulle + - Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335 +- Autocomplete + - Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323 +- ColorPicker + - Correction d'un événement `active-change` se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304 +- Table + - Correction d'une erreur de style du panneau de filtre surdimensionné, #11314 + - Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348 +- Checkbox + - Correction d'une checkbox unique ne supportant pas la validation, #11271 +- Radio + - Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303 +- MessageBox + - Correction de la classe `el-popup-parent-hidden` qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371 + +### 2.3.9 + +*2018-05-18* + +- Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut `prop` d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137 +- L'attribut `lockScroll` des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114 +- Correction de l'icône de Progression qui ne s'affichait pas quand son `status` était une exception, #11172 +- Correction de l'attribut `désactivé` qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185 +- Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186 +- `setCurrentKey` de Tree accepte maintenant `null` comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205 + +### 2.3.8 + +*2018-05-11* + +- Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand `type` est dates, #10973 +- Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912 +- Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement `change`, #11017 +- Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058 +- Ajout du slot nommé `préfixe` pour Select, #11063 +- Ajout de la méthode `clearValidate` pour FormItem, #11076 +- Ajout de l'attribut `checkOnClickNode` pour Tree, #1111111 + +### 2.3.7 + +*2018-04-29* + +- Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834 +- Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est `null`, #10912 +- Correction d'un déclencheur incorrect de l'événement `active-change` après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell) +- Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945 + +### 2.3.6 + +*2018-04-21* + +- Correction d'un comportement incorrect du callback `allow-drop` de Tree lorsque le paramètre `type` est utilisé, #10821 +- Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822 +- Correction d'un Select simple déclenchant incorrectement un événement `blur` après avoir cliqué sur une option, #10822 + +### 2.3.5 + +*2018-04-20* + +- Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque `type` est la semaine, #10712 +- Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714 +- Ajout de l'attribut `automatic-dropdown` pour Select, #10042 (par @Seebiscuit) +- Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou) +- L'attribut `type` de DatePicker peut être `dates`, où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256) +- Ajout des événements `prev-click` et `next-click` pour Pagination, #10755 +- Ajout de l'attribut `pager-count` pour Pagination, #10493 (par @chongjohn716) +- Ajout de `type` comme 3ème paramètre de l'attribut `allow-drop` de Tree, #10792 +- Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779 + +### 2.3.4 + +*2018-04-12* + +- Suppression du double de l'attribut `showTimeout` dans la déclaration TypeScript de SubMenu, #10566 (par @kimond) +- Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577 +- Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement `current-current-change`, #10628 +- Correction de Textarea affichant `undefined` dans le SSR lorsque sa valeur n'est pas définie, #10630 +- Correction de la désactivation du style TabItem lorsque `type` est border-card, #10640 +- Ajout de `$index` comme quatrième paramètre du `formatter` de la Table, #10645 +- Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666 + +### 2.3.3 + +*2018-04-04* + +- Ajout de l'attribut `shadow` pour Card, #10418 (par @YunYouJun) +- Correction de Badge masqué lorsque `value` est `0`, #10470 +- Correction de quelques bugs de Tree, #10474 #10494 +- Ajout de `placement` pour Autocomplete, #10475 +- L'attribut `default-time` fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk) +- Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503 +- Ajout de l'attribut `popper-append-to-body` pour SubMenu, #10515 +- Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551 +- Correction de l'événement `change` d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553 + +### 2.3.2 + +*2018-03-29* + +- Correction d'une régression d'Autocomplete, #10442 + +### 2.3.1 + +*2018-03-29* + +- Correction d'une régression de `type` d'Inputqui n'était pas transmis à l'élément natif, #10415 +- Ajout de la méthode `blur` pour Select, #10416 + +#### 2.3.0 Diamant + +*2018-03-28* + +#### Nouvelles fonctionnalités +- Table + - Maintenant le `formatter` de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman) + - Ajout de l'attribut `select-on-indeterminate`, #9924 (par @syn-zeta) +- Menu + - Ajout de l'attribut `collapse-transition`, #8809 (par @limichange) +- Input + - Ajout de la méthode `select`, #10229 + - Ajout de la méthode `blur`, #10356 +- ColorPicker + - Ajout de l'attribut `predefine`, #10170 (par @elfman) +- Tree + - Ajout des attributs `draggable`, `allow-drop` et `allow-drag`, et `node-drag-start`, `node-drag-enter`, `node-drag-leave`, `node-drag-leave`, `node-drag-over`, `node-drag-end` et `node-drop`, #9251 #10372 (par @elfman) +- Form + - La méthode `validate` a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279 + - Ajout de l'événement `validate`, #10351 +- Progress + - Ajout de l'attribut `color`, #10352 (par @YunYouJun) +- Button + - Ajout de l'attribut `circle`, #10359 (par @YunYouJun) + +#### Corrections de bugs +- Form + - Correction du label de FormItem non aligné avec l'Input mixte, #10189 +- Menu + - Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot `title` de l'élément MenuItem est défini, #10193 (par @PanJiaChen). +- Pagination + - Correction d'un événement `current-current-change` qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247 +- DatePicker + - Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut `format`, #10174（by @remizovvv） +- Upload + - Correction de l'attribut `accept` qui ne fonctionnait pas quand `drag` est vrai, #10278 + +### 2.2.2 + +*2018-03-14* + +- Ajout de l'événement `clear` pour Input, #9988 (par @blackmiaool) +- Maintenant la saisie manuelle de ColorPicker supporte les modes `hsl`, `hsv` et `rgb`, #9991 +- Correction de DatePicker ne déclenchant pas l'événement `change` lorsque sa valeur initiale est effacée, #9986 +- Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003 +- Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si `max-height` est réglé, #10034 +- Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme) +- Ajout de l'attribut `désactivé` pour Pagination, #10006 +- Ajout des événements `after-enter` et `after-leave` pour Popover, #10047 +- Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté `resetFields` du formulaire, #10105 +- Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130 +- Correction de MessageBox héritant de l'attribut `title` de son instance précédente lorsqu'il était appelé sans `title`, #10126 (par @Pochodaydaydayup) +- Ajout de l'attribut `input-size` pour Slider, #10154 +- Ajout des événements `left-check-change` et `right-check-change` pour Transfer, #10156 + +### 2.2.1 + +*2018-03-02* + +- Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812 +- Correction de Table avec un attribut `height` qui ne rendait pas dans SSR, #9876 +- Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848 +- Correction d'un événement `change` qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913 +- Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks) +- Ajout de l'attribut `tooltip-class` pour Slider, #9957 +- Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit) +- Ajout de l'attribut `target-order` pour Transfer, #9960 + +### 2.2.0 Graphite + +*2018-02-12* + +#### Nouvelles fonctionnalités +- Menu + - Ajout des attributs `popper-class` et `disabled` pour le sous-menu, #9604 #9771 + - Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741 +- Tree + - Ajout de l'évènement `node-contextmenu`, #9678 + - Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686 + - Ajout des méthodes `getNode`, `remove`, `remove`, `append`, `insertBefore`, `insertAfter`, `getCheckedKeys`, `getHalfCheckedNodes`, `getHalfCheckedNodes`, `getHalfCheckedKeys` et de l'événement `check`, #9718 #9730 +- Transfer + - Ajout de la méthode `clearQuery`, #9753 +- Select + - Ajout de l'attribut `popper-append-to-body`, #9782 + +#### Corrections de bugs +- Table + - Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement `row-click`, #9654 + - Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668 + - Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667 +- Container + - Les composants fixes de Container ne s'étirent pas dans IE11, #9655 +- Loading + - Correction du chargement n'apparaissant pas lorsque la valeur de `v-loading` est changée en true dans le hook `mounted`, #9722 +- Switch + - Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760 + +### 2.1.0 Charcoal + +*2018-01-31* + +#### Nouvelles fonctionnalités +- Cascader + - Ajout des événements `focus` et `blur`, #9184 (par @viewweiwu) +- Table + - La méthode `filter-method` a maintenant un troisième paramètre `column`, #9196 (par @liyanlong) +- DatePicker + - Ajout des attributs `prefix-icon` et `clear-icon`, #9237 (par @AdamSGit) + - Ajout de l'attribut `default-time`, #9094 (par @nighca) + - Le format `value-format` supporte maintenant `timestamp`, #9319 (par @wacky6) +- InputNumber + - Maintenant la valeur liée peut être `undefined`, #9361 +- Select + - Ajouté l'attribut `auto-complete`, #9388 +- Form + - Ajout de l'attribut `désactivé`, #9529 + - Ajout de l'attribut `validateOnRuleChange`, #8141 +- Notification + - Ajout de la méthode `closeAll`, #9514 + +#### Corrections de bugs +- InputNumber + - Correstion du reset lors de la saisie du point des nombres décimaux, #9116 +- Dropdown + - Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei) +- Table + - Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac） + - Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326 + - Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327 + - Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462 + - Correction de rendus multiples inutiles dans certaines conditions, #9426 + - Correction d'une erreur de calcul de la largeur de colonne lors de la modification de `width` de TableColumn, #9426 +- Loading + - Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313 +- DatePicker + - Correction de la méthode `focus` qui ne fonctionnait pas en mode "range", #9437 + - Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6) + - Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6) +- Steps + - Correction d'une erreur de style dans IE 11, #9454 + +#### Changements +- Menu + - Le menu contextuel en mode `collapse` s'ajoute maintenant directement à `body`, de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263 +- Table + - Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement `row-click`, #9467 +- Loading + - Le `z-index` du masque de chargement non plein écran est changé à 2000. Le `z-index` du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522 +- Dropdown + - Les attributs `show-timeout` et `hide-timeout` ne fonctionnent maintenant que lorsque le déclencheur est `hover`, #9573 + +### 2.0.11 + +*2018-01-08* + +- Correction d'un problème de couleur de bordure de Select dans les slots `prepend` ou `append` de Input, #9089 +- Correction du paramètre `remove-tag` de l'événement Select, #909090 +- Ajout des attributs `show-timeout` et `hide-timeout` pour le sous-menu, #8934 (par @HugoLew) +- Correction d'un style Tooltip manquant de `show-overflow-tooltip` lors de l'importation de Table sur demande, #9130 +- Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de `clearSort` sur cette colonne, #9100 (par @zEmily) +- Le fichier de configuration i18n pour le tchèque est renommé de `cz` en `cs-CZ`, #9164 + +### 2.0.10 + +*2017-12-29* + +- Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026 +- Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028 +- Maintenant, DatePicker n'émet que l'événement `change` quand la valeur est vraiment changée, #9029 (par @remizovvvv) +- Ajout de l'attribut `tabindex` pour Input, #9041 (par @dicklwm) + +### 2.0.9🎄 + +*2017-12-24* + +- Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh) +- Correction de la valeur initiale de `error` qui ne fonctionnait pas pour FormItem, #8840 +- La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut `element-loading-custom-class`, #8826 (par @earlymeme) +- Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921 +- Ajout de l'attribut `renderAfterExpand` pour Tree, #8972 + +### 2.0.8 + +*2017-12-12* + +- Ajout de la documentation en espagnol +- Correction du `show-timeout` de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten) +- Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776 +- Correction d'un événement de blur de DatePicker avec intervalle, #8784 +- L'attribut `format` de TimePicker supporte maintenant AM/PM, #8620 (par @firesh) + +### 2.0.7 + +*2017-11-29* + +- Correction du style du bouton de type texte désactivé, #8570 + +### 2.0.6 + +*2017-11-29* + +- Correction d'un bug de style des icônes de tri de la table, #8405 +- Correction du mécanisme de déclenchement de Popover lorsque son `trigger` est manuel, #8467 +- Ajout des attributs `prefix-icon` et `suffix-icon` pour Autocomplete, #8446 (par @liyanlong) +- Ajout de l'attribut `separator` pour Cascader, #8501 +- Ajout de l'attribut `clearable` pour Input, #8509 (par @lbogdan) +- Ajout de l'attribut `background` pour Pagination, #8553 + +### 2.0.5 + +*2017-11-17* + +- Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283 +- Correction d'une fuite de mémoire de la directive `clickoutside`, #8168 #8225 (par @badpunman @STLighter) +- Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy) +- Ajout de l'attribut `collapse-tags` pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190 +- Correction d'une consommation CPU élevée causée par la table cachée, #8351 +- Maintenant vous pouvez utiliser la méthode `doLayout` de la Table pour mettre à jour sa disposition, #8351 + +### 2.0.4 + +*2017-11-10* + +- Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree. +- Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042 +- Correction de la suppression incorrecte de `updateKeyChildren` dans Tree, #8100 +- Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100 +- Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang) + +### 2.0.3 + +*2017-11-03* + +- Correction des attributs `éditable` et `readonly` pour DatePicker avec intervalle, #7922 +- Correction d'une erreur de style des Tabs imbriqués, #7941 +- Correction d'une erreur de style de la dernière étape des Steps verticales, #7980 +- Correction de la synchronisation du déclenchement de l'événement `current-current-change` pour Pagination, #7995 +- Correction d'une infobulle non enregistrée dans Menu, #7995 + +### 2.0.2 + +*2017-10-31* + +- Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817 +- La méthode `validate` de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice) +- Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838 +- Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son `list-type` est picture-card, #7857 +- Ajout de l'attribut `sort-by` pour TableColumn, #7828 (par @wangfengming) +- Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485) +- Correction d'une erreur de style d'icône des Steps verticales, #7891 +- La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891 + +### 2.0.1 + +*2017-10-28* + +- Correction d'une erreur de style de RadioButton et CheckboxButton, #7793 +- Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811 +- Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811 + +### 2.0.0 Carbon + +*2017-10-27* + +#### Nouvelles fonctionnalités +- Général + - Un nouveau thème : `theme-chalk`. + - L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload + - Ajout du typage TypeScript + - Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées + - Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions + - Ajout des composants de mise en page : Container, Header, Aside, Main, Footer + - Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété `size` pour configurer les tailles par défaut pour tous les composants. +- Button + - Ajout de l'attribut `round`. Il est utilisé pour les boutons à coins ronds #6643 +- TimeSelect + - Vous pouvez maintenant naviguer en appuyant sur les touches `Up` et `Down`, et en appuyant sur `Enter` vous sélectionnez l'heure #6023. +- TimePicker + - Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur `Entrée` vous sélectionnez l'heure #6050. + - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169 + - Ajout de l'attribut `farrow-control` pour faire tourner le temps avec les flèches #7438 +- Tree + - Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257 + - Ajout de l'attribut `check-descendants`. Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode `lazy` #6235 +- Tag + - Ajouté l'attribut `size` #7203 +- Datepicker + - Maintenant `timeFormat` peut formater le TimePicker quand le type est réglé sur `datetimerange` #6052 + - Ajout de `start-placeholder` et de `end-placeholder`. Ce sont des placeholders pour les deux champs en mode intervalle #7169 + - Ajout de l'attribut `value-format` pour personnaliser le format de la valeur liée, #7367 + - Ajout de l'attribut `unlink-panels` pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates +- MessageBox + - Ajout de l'attribut `closeOnHashChange` #6043 + - Ajout de l'attribut `center` pour que le contenu puisse être centré #7029 + - Ajout de l'attribut `roundButton` pour afficher les boutons ronds #7029 + - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML\* #6043 + - Ajout de l'attribut `inputType` pour assigner le type de l'input intérieur, #7651 +- Dialog + - Ajout des attributs `width`、`fullscreen`、`append-to-body`. La boîte de dialogue peut maintenant être imbriquée + - Ajout de l'attribut `center` pour que le contenu puisse être centré #7042 + - Ajout de `focus-after-closed`、`focus-after-open` pour améliorer l'accessibilité #6511 +- ColorPicker + - Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167 + - Ajout des attributs `size` et `disabled` #7026 + - Ajout de l'attribut `popper-class` #7351 +- Message + - Maintenant la couleur des icônes peut être modifiée par CSS #6207 + - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML\* #6207 + - Ajout de l'attribut `center` pour que le contenu puisse être centré #6875 +- Notification + - Ajout de l'attribut `position` pour configurer où Notification apparaît #6231 + - Ajout de l'attribut `dangerouslyUseHTMLString`. Lorsqu'il est réglé sur `true`, `message` sera interprété comme une chaîne HTML\* #6231 + - Ajout de l'attribut `showClose` pour cacher le bouton de fermeture #6402 +- Rate + - Ajout de l'attribut `show-score` pour déterminer si le score actuel est affiché #6295 +- Tabs + - Ajout de l'attribut `tab-position` #6096 +- Radio + - Ajout des attributs `border` et `size` #6690 +- Checkbox + - Ajout des attributs `border` et `size` #6690 +- Alert + - Ajout de l'attribut `center` pour que le contenu puisse être centré #6876 +- Menu + - Ajout des attributs `background-color`, `text-color` et `active-text-color` #7064 + - Ajout des méthodes `open` et `close` pour ouvrir et fermer les sous-menus par programmation, #7412 +- Form + - Ajout de l'attribut `inline-message` pour déterminer si le message de validation est affiché en ligne #7032 + - Ajout de l'attribut `status-icon` pour afficher une icône de feedback après validation #7032 + - Form et FormItem ont maintenant un attribut `size`. Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428 + - La méthode `validate` retournera maintenant une promesse si le rappel est omis, #7405 + - Ajout de la méthode `clearValidate` pour la validation des résultats pour tous les éléments de formulaire, #7623 +- Input + - Ajout des attributs `suffixe` et `préfixe` des slots nommés, `suffixIcon` et `prefixIcon` pour ajouter du contenu dans la zone de saisie #7032 +- Breadcrumb + - Ajout de l'attribut `separator-class` pour supporter les icônes comme séparateurs d'éléments #7203 +- Steps + - Ajout de l'attribut `simple` pour activer les étapes de style simple #7274 +- Pagination + - Ajout des attributs `prev-text` et `next-text` pour personnaliser les textes des pages précédente et suivante #7005 +- Loading + - Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés `spinner` et `background` #7390 +- Autocomplete + - Ajout de l'attribut `debounce`, #7413 +- Upload + - Ajout des attributs `limit` et `on-exceed` pour limiter le nombre de fichiers, #7405 +- DateTimePicker + - Ajout de l'attribut `time-arrow-control` pour activer `arrow-control` du TimePicker imbriqué, #743838 +- Layout + - Ajout d'un nouveau point d'arrêt `xl` pour les fenêtres plus larges que 1920px +- Table + - Ajout de l'attribut `span-method` pour la fusion de cellules + - Ajout de la méthode `clearSort` pour effacer le tri par programmation + - Ajout de la méthode `clearFilter` pour effacer le filtre par programmation + - Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe `.expanded` sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style + - Ajout de l'attribut `size` + - Ajout de la méthode `toggleRowExpansionRowExpansion` pour ouvrir ou réduire les lignes extensibles par programmation + - Ajout de l'attribut `cell-class-name` pour assigner un nom de classe aux cellules + - Ajout de l'attribut `cell-style` pour le style des cellules + - Ajout de l'attribut `header-row-class-name` pour assigner un nom de classe aux lignes d'en-tête + - Ajout de l'attribut `header-row-style` pour le style d'en-tête + - Ajout de l'attribut `header-cell-class-name` pour assigner un nom de classe aux cellules d'en-tête + - Ajout de l'attribut `header-cell-style` pour le style des cellules d'en-tête + - L'attribut `prop` de la tableColumn accepte maintenant les notations `object[key]` + - Ajout de l'attribut `index` pour TableColumn pour personnaliser les index de lignes +- Select + - Ajout de l'attribut `reserve-keyword` pour réserver le mot-clé de la recherche courante après avoir sélectionné une option. + +#### Corrections de bugs +- DatePicker + - Correction de `v-model` retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038 + - Correction de la première entrée effacée dans le type `daterange` #6021 +- DateTimePicker + - Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090 + - Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076 +- TimePicker + - Correction de `v-model` qui ne se mettait pas à jour correctement lors du blur #6023 +- Dialog + - Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088 +- Select + - Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151 +- Table + - Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis `display : none` + - Correction de l'extension de la largeur de la table lorsque l'élément parent a `display : flex` + - Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement `append` disparaissaient lorsque les données étaient récupérées dynamiquement + - Correction de l'attribut `expand-row-keys` qui ne fonctionnait pas avec la valeur initiale + - Correction d'une défaillance du filtre lors de la mise à jour de `data` + - Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés + - Correction d'un bug dynamique de `max-height` + - Correction de quelques erreurs de calcul de style + +#### Breaking changes +- Général + - Suppression de `theme-default`. + - Compatible avec Vue 2.5.2+ et IE 10+ + - L'événement `change` des composants de formulaire et l'événement `current-current-change` de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur + - L'attribut `size` de Button et les composants de formulaire acceptent maintenant `medium`, `small` et `mini` + - Pour faciliter l'utilisation d'icônes tierces, les attributs `icon` du bouton et des étapes, `prefix-icon` et `suffix-icon` d'Input nécessitent maintenant un nom de classe complet +- Dialog + - Suppression de l'attribut `taille`. Maintenant la taille de Dialog peut être configurée par `width` et `fullscreen` + - Maintenant la visibilité de Dialog ne peut plus être contrôlée par `v-model` +- Rate + - Le `text-template` est renommé `score-template` +- Dropdown + - `menu-align` est renommé en `placement`. Maintenant il supporte plus de positions +- Transfert + - le `footer-format` est renommé en `format` +- Switch + - Les attributs commençant par `on-**` seront analysés pour les événements dans JSX, ce qui rend tous les attributs `on-*` de Switch incapable de fonctionner en JSX. Ainsi, les attributs `on-**` sont renommés en `active-*`, et par conséquent les attributs `off-*` sont renommés en `inactive-*`. Cette modification affecte les attributs suivants: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value` + - Les attributs `active-text` et `inactive-text` n'ont plus de valeurs par défaut +- Tag + - L'attribut `type` accepte maintenant `success`, `info`, ` warning` et `danger` +- Menu + - Suppression de l'attribut `theme`. La couleur du menu peut être configurée en utilisant `background-color`, `text-color` et `active-text-color` +- Input + - Suppression de l'attribut `icon`. L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut `suffix-icon` ou du slot `suffix-icon` + - Suppression de l'attribut `on-icon-click` et de l'événement `click`. Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés + - L'événement `change` se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement `input` +- Autocomplete + - Suppression de l'attribut `custom-item`. Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant `scoped slot`. + - Suppression de l'attribut `props`. Vous pouvez maintenant utiliser l'attribut `value-key` pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage. +- Steps + - Suppression de l'attribut `center` + - Maintenant le Steps va remplir son conteneur parent par défaut +- DatePicker + - Le paramètre de l'événement `change` de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par `value-format` +- Table + - Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de `inline-template` + - `sort-method` s'aligne maintenant avec `Array.sort`. Il devrait retourner un nombre au lieu d'un booléen + - L'emplacement `append` est déplacé à l'extérieur de l'élément `tbody` pour éviter les rendus multiples + - L'événement `expand` est renommé en `expand-change` + - Les paramètres de la méthode `row-class-name` et `row-style` sont maintenant un objet + +## +* Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à[des attaques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Donc quand `dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du `message' est fiable, et **ne jamais** assigner `message` au contenu fourni par l'utilisateur.. diff --git a/examples/app.vue b/examples/app.vue index 0b32ccb5..d1d70a34 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -13,6 +13,7 @@ import zhLocale from 'main/locale/lang/zh-CN'; import enLocale from 'main/locale/lang/en'; import esLocale from 'main/locale/lang/es'; + import frLocale from 'main/locale/lang/fr'; const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN'; const localize = lang => { @@ -23,6 +24,9 @@ case 'es': use(esLocale); break; + case 'fr-FR': + use(frLocale); + break; default: use(enLocale); } diff --git a/examples/components/header.vue b/examples/components/header.vue index f796bd03..56768a5d 100644 --- a/examples/components/header.vue +++ b/examples/components/header.vue @@ -381,7 +381,8 @@ langs: { 'zh-CN': '中文', 'en-US': 'English', - 'es': 'Español' + 'es': 'Español', + 'fr-FR': 'Français' } }; }, diff --git a/examples/components/search.vue b/examples/components/search.vue index 0060b0cc..ab2ce875 100644 --- a/examples/components/search.vue +++ b/examples/components/search.vue @@ -37,7 +37,7 @@ + +## Alerte + +Affiche des messages importants. + +### Usage + +Les Alertes sont des composants non-superposés qui ne disparaissent pas automatiquement. + +:::demo Les Alertes peuvent être de 4 types différents, définit par `type`, le type par défaut étant `info`. + +```html + +``` +::: + +### Bouton personnalisable + +Personnalisez le bouton de fermeture avec du texte ou des symboles. + +:::demo Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut `closable` détermine si le composant peut être fermé ou non. Il accepte un `boolean`, la valeur par défaut étant `true`. Vous pouvez configurer l'attribut `close-text`pour remplacer la croix du bouton de fermeture. Assurez-vous que `close-text` soit une chaîne de caractères. L'évènement `close` se déclenche quand le composant est fermé. + +```html + + + +``` +::: + +### Avec icône + +Afficher une icône améliore la lisibilité. + +:::demo Ajouter l'attribut `show-icon` affiche une icône correspondant au type de l'alerte. + +```html + +``` +::: + +## Texte centré + +Utilisez l'attribut `center` pour centrer le texte. + +:::demo + +```html + +``` +::: + +### Description + +Contient un message avec plus d'informations. + +:::demo A coté de l'attribut `title`, vous pouvez ajouter `description` pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques. + +```html + +``` +::: + +### Icône et description + +:::demo Pour finir, voici un exemple utilisant à la fois l'icône et la description. + +```html + +``` +::: + +### Attributs +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| title | Titre. | string | — | — | +| type | Type du composant. | string | success/warning/info/error | info | +| description | Texte de description. Peut aussi être passé via le slot par défaut | string | — | — | +| closable | Si peut être fermé ou non. | boolean | — | true | +| center | Si le texte doit être centré ou non. | boolean | — | false | +| close-text | Texte personnalisé pour le bouton de fermeture. | string | — | — | +| show-icon | Si une icône s'affiche ou non. | boolean | — | false | + +### Slot + +| Nom | Description | +|------|--------| +| title | Le contenu du titre. | + +### Évènements +| Nom | Description | Paramètres | +|---------- |-------- |---------- | +| close | Se déclenche lorsque l'alerte est fermée. | — | diff --git a/examples/docs/fr-FR/badge.md b/examples/docs/fr-FR/badge.md new file mode 100644 index 00000000..8fd221bb --- /dev/null +++ b/examples/docs/fr-FR/badge.md @@ -0,0 +1,146 @@ +## Badge + +Un nombre ou un status affiché par-dessus un bouton ou un icône. + +### Usage + +Affiche le nombre de nouveaux messages. + +:::demo La quantité est définit par `value` qui accepte un `Number` ou un `String`. + +```html + + Commentaires + + + Réponses + + + Commentaires + + + Réponses + + + + + Cliquez + + + + Commentaires + + + + Réponses + + + + + + +``` +::: + +### Valeur maximale + +Vous pouvez configurer la valeur maximale. + +:::demo La valeur maximale est définit par `max` qui accepte un `Number`. Ceci ne marche qui si `value` est également un `Number`. + +```html + + Commentaires + + + Réponses + + + +``` +::: + +### Configuration + +Affiche du texte autre que des nombres. + +:::demo Quand `value` est un `String`, il affiche un texte personnalisé. + +```html + + Commentaires + + + Réponses + + + +``` +::: + +### Point rouge + +Utilisez un point rouge pour signaler du contenu devant être remarqué. + +:::demo Utilisez l'attribut `is-dot` qui est un `Boolean`. + +```html +Requète + + + + + +``` +::: + + + +### Attributs + +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | Valeur affichée. | string, number | — | — | +| max | Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si `value` est un `Number`. | number | — | — | +| is-dot | Affiche un point rouge. | boolean | — | false | +| hidden | Cache le badge. | boolean | — | false | +| type | Type du bouton. | string | primary / success / warning / danger / info | — | diff --git a/examples/docs/fr-FR/breadcrumb.md b/examples/docs/fr-FR/breadcrumb.md new file mode 100644 index 00000000..bc69155c --- /dev/null +++ b/examples/docs/fr-FR/breadcrumb.md @@ -0,0 +1,44 @@ +## Breadcrumb + +Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement. + +### Usage + + +:::demo Dans `el-breadcrumb`, chaque `el-breadcrumb-item` est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type `String` appelé `separator`qui détermine le séparateur. Sa valeur par défaut est '/'. + +```html + + Accueil + Gestion promotions + Liste promotions + Détail promotion + +``` +::: + +### Icône de séparation + +:::demo Configurez `separator-class` pour utiliser `iconfont` en tant que séparateur. Cela remplacera `separator`. + +```html + + Accueil + Gestion promotions + Liste promotions + Détail promotion + +``` +::: + +### Attributs de Breadcrumb +| Attributs | Description | Type | Valeurs acceptées | Défaut| +|---------- |-------------- |---------- |-------------------------------- |-------- | +| separator | Caractère de séparation | string | — | / | +| separator-class | Classe de l'icône de séparation | string | — | - | + +### Attributs de Breadcrumb Item +| Attributs | Description | Type | Valeurs acceptées | Défaut| +|---------- |-------------- |---------- |-------------------------------- |-------- | +| to | Route cible du lien, identique au `to` de `vue-router`. | string/object | — | — | +| replace | Si `true`, la navigation ne laissera pas d'enregistrement dans l'historique. | boolean | — | false | diff --git a/examples/docs/fr-FR/button.md b/examples/docs/fr-FR/button.md new file mode 100644 index 00000000..7423da75 --- /dev/null +++ b/examples/docs/fr-FR/button.md @@ -0,0 +1,189 @@ + + +## Bouton + +Bouton communément utilisé. + +### Usage + +:::demo Utilisez `type`, `plain`, `round` et `circle` pour définir le style du bouton. + +```html + + Default + Primary + Success + Info + Warning + Danger + + + + Plain + Primary + Success + Info + Warning + Danger + + + + Round + Primary + Success + Info + Warning + Danger + + + + + + + + + + +``` +::: + +### Bouton désactivé + +L'attribut `disabled` détermine si le bouton est désactivé. + +:::demo Utilisez l'attribut `disabled` pour déterminer si un bouton est désactivé ou non. Il accepte un `Boolean`. + +```html + + Défaut + Principal + Succès + Info + Attention + Danger + + + + Plein + Principal + Succès + Info + Attention + Danger + +``` +::: + +### Bouton texte + +Bouton sans bordure ni fond. + +:::demo +```html +Bouton texte +Bouton texte +``` +::: + +### Icône + +Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser en plus du texte. + +:::demo Utilisez l'attribut `icon` pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise ``. Des icônes personnalisées peuvent également être utilisées. + +```html + + + +Recherche +Upload +``` +::: + +### Groupes de boutons + +Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires. + +:::demo Utilisez la balise `` pour grouper vos boutons. + +```html + + Page précédente + Page suivante + + + + + + +``` +::: + +### Bouton en chargement + +Cliquez sur le bouton pour charger des données et il affichera un état de chargement. + +:::demo Configurez l'attribut `loading` à `true` pour afficher un état de chargement. + +```html +Chargement +``` +::: + +### Tailles + +En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios. + +:::demo Utilisez l'attribut `size` pour choisir d'autres tailles parmi `medium`, `small` ou `mini`. + +```html + + Défaut + Medium + Small + Mini + + + Défaut + Medium + Small + Mini + +``` +::: + +### Attributs +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------- |---------- |------------- |-------- | +| size | Taille du bouton. | string | medium / small / mini | — | +| type | Type du bouton. | string | primary / success / warning / danger / info / text | — | +| plain | Détermine si le bouton est plein. | boolean | — | false | +| round | Détermine si le bouton est arrondi. | boolean | — | false | +| circle | Détermine si le bouton est un cercle. | boolean | — | false | +| loading | Détermine si l'état de chargement est affiché. | boolean | — | false | +| disabled | Désactive le bouton | boolean | — | false | +| icon | Classe de l'icône. | string | — | — | +| autofocus | Identique à l'attribut natif `autofocus` | boolean | — | false | +| native-type | Identique à l'attribut natif `type` | string | button / submit / reset | button | diff --git a/examples/docs/fr-FR/card.md b/examples/docs/fr-FR/card.md new file mode 100644 index 00000000..2a03a198 --- /dev/null +++ b/examples/docs/fr-FR/card.md @@ -0,0 +1,219 @@ + + + + +## Card + +Conteneur intégrant des informations. + +### Usage + +Les composants Card incluent un titre, un contenu et des opérations. + +:::demo Card est composé d'un `header` et d'un `body`. `header` est optionnel et son contenu nécessite l'utilisation d'un slot. +```html + +
+ Card name + Operating button +
+
+ {{'List item ' + o }} +
+ + + +``` +::: + +### Card simple + +Le header peut être omis. + +:::demo +```html + +
+ {{'List item ' + o }} +
+ + + +``` +::: + +### Images + +Affichez un contenu plus riche grâce à la configuration. + +:::demo L'attribut `body-style` définit le style CSS du `body`. Cet exemple utilise aussi `el-col` pour la mise en page. +```html + + + + +
+ Yummy hamburger +
+ + Operating button +
+
+ + + + + + + +``` +::: + +### Ombres + +Vous pouvez définir quand l'ombre des Cards doivent apparaître. + +:::demo L'attribut `shadow` détermine quand l'ombre doit apparaître. Les valeurs possibles sont `always`, `hover` ou `never`. +```html + + + + Always + + + + + Hover + + + + + Never + + + +``` +::: + +### Attributs +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------- |---------- |------------- |-------- | +| header | Titre de la Card. Accepte aussi un template DOM passé via `slot#header`. | string| — | — | +| body-style | Style CSS du body. | object| — | { padding: '20px' } | +| shadow | Quand l'ombre doit apparaître | string | always / hover / never | always | diff --git a/examples/docs/fr-FR/carousel.md b/examples/docs/fr-FR/carousel.md new file mode 100644 index 00000000..7045808b --- /dev/null +++ b/examples/docs/fr-FR/carousel.md @@ -0,0 +1,241 @@ + + + +## Carousel + +Affiche en boucle une série d'images ou de textes dans un espace limité. + +### Usage + +:::demo Utilisez `el-carousel` avec `el-carousel-item`, et vous obtiendrez un carousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise `el-carousel-item`. Par défaut le carousel défile quand la souris passe sur un indicateur. Réglez `trigger` sur `click` et le carousel défilera uniquement quand vous cliquerez sur l'indicateur. +```html + + + +``` +::: + +### Indicateurs + +Les indicateurs peuvent être affichés en dehors du carousel. + +:::demo L'attribut `indicator-position` détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carousel, régler `indicator-position` sur `outside` les affichera à l'extèrieur; régler `indicator-position` sur `none` les cachera totalement. +```html + + + +``` +::: + +### Flèches + +Vous pouvez définir quand les flèches doivent apparaître. + +:::demo L'attribut `arrow` détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carousel. Réglez `arrow` sur `always` ou `never` affiche ou cache les fléches de manière permanente. +```html + + + +``` +::: + +### Mode carte + +Quand la page est suffisement large mais avec une hauteur limitée, vous pouvez activer le mode carte. + +:::demo Réglez `type` sur `card` pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carousel. +```html + + + +``` +::: + +### Attributs du Carousel +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| height | Hauteur du carousel. | string | — | — | +| initial-index | Index de la slide initiale (commence à 0). | number | — | 0 | +| trigger | Comment les indicateurs sont déclenchés | string | hover/click | hover | +| autoplay | Si le carousel défile automatiquement | boolean | — | true | +| interval | Intervalle pour le défilement automatique, en millisecondes. | number | — | 3000 | +| indicator-position | Position des indicateurs. | string | outside/none | — | +| arrow | Détermine quand les flèches sont affichés. | string | always/hover/never | hover | +| type | Type du carousel. | string | card | — | +| loop | Affiche les éléments en boucle. | boolean | - | true | + +### Évènements du Carousel +| Nom | Description | Paramètres | +|---------|---------|---------| +| change | Se déclenche quand la slide active défile. | Index de la nouvelle slide, index de l'ancienne slide | + +### Méthodes du Carousel +| Mathode | Description | Paramètres | +|---------- |-------------- | -- | +| setActiveItem | Défile manuellement vers une slide. | index de la slide d'arrivée, à partir de 0; ou bien le `name` du `el-carousel-item` correspondant| +| prev | Défile vers la slide précédente. | — | +| next | Défile vers la slide suivante. | — | + +### Attributs du Carousel-Item +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| name | Nom de l'item, peut être utilisé dans `setActiveItem`. | string | — | — | +| label | Texte affiché au niveau de l'indicateur correspondant.| string | — | — | diff --git a/examples/docs/fr-FR/cascader.md b/examples/docs/fr-FR/cascader.md new file mode 100644 index 00000000..73a01c7b --- /dev/null +++ b/examples/docs/fr-FR/cascader.md @@ -0,0 +1,1701 @@ + + + + +## Cascader + +Si les options ont une structure hiérarchique claire, un Cascader peut être utilisé pour les afficher et les selectionner. + +### Usage + +Il y a deux manières de dérouler la liste des options. + +:::demo Assigner un tableau à l'attribut `options` génère un Cascader. L'attribut `expand-trigger` détermine comment les options suivantes sont affichées. Cet exemple utilises aussi l'évènement `change`, qui a pour paramètre la valeur du Cascader, c'est à dire un tableau constitué de chaque niveau jusqu'à la valeur selectionnée, comme un chemin. +```html +
+ Les options se déroulent après un clic (défaut) + + +
+
+ Les options se déroulent au passage de la souris + + +
+ + +``` +::: + +### Options désactivées + +Désactivez une option en configurant `disabled` dans l'objet option. + +:::demo Dans cet exemple, le premier item dans le tableau `options` est configuré avec `disabled: true`, il est donc désactivé. Par défaut, Cascader recherche le champ `disabled` dans chaque option; si vous utilisez un autre nom de champ pour indiquer que l'option est désactivée, vous pouvez l'assigner dans l'attribut `props` (voir la table de l'API ci-dessous). Les champs `value`, `label` et `children` peuvent être personnalisés de la même manière. +```html + + +``` +::: + +### Afficher uniquement le dernier niveau + +Le champ peut n'afficher que le dernier niveau au lieu de tous. + +:::demo L'attribut `show-all-levels` détermine si tous les niveaux sont affichés. Si il est à `false`, seul le dernier niveau est affiché. +```html + + +``` +::: + +### Valeur par défaut + +:::demo La valeur par défaut peut être définit grâce à un tableau. +```html + + +``` +::: + +### Changement après sélection + +Les options parentes peuvent aussi être sélectionnées. + +:::demo Par défaut seules les options de dernier niveau peuvent être sélectionnées. En réglant `change-on-select` à `true`, les options parentes peuvent aussi être sélectionnées. +```html + + +``` +::: + +### Charger les options dynamiquement + +Il est possible de charger dynamiquement les options quand on clique ou passe la souris sur leurs parent. + +:::demo Dans cet exemple, les optionsn'ont pas de données de villes au moment de l'initialisation. Grâce à l'évènement `active-item-change` vous pouvez charger les villes de manière dynamique. De plus, cet exemple montre comment `props` peut être utilisé. +```html + + + +``` +::: + +### Filtres + +Recherchez une option particulière en entrant des mots-clé. + +:::demo Ajouter `filterable` à `el-cascader` active le filtrage. +```html +
+ Only options of the last level can be selected + +
+
+ Options of all levels can be selected + +
+ + +``` +::: + +### Attributs +| Attribut | Description | Type | Options | Défaut| +|---------- |-------------------- |---------|------------- |-------- | +| value / v-model | La valeur liée. | boolean / string / number | — | — | +| options | Données des options. | array | — | — | +| props | Options de configuration, voir la table suivante. | object | — | — | +| value | Valeur sélectionnée. | array | — | — | +| separator | Séparateur des options. | string | — | / | +| popper-class | Classe personnalisée pour le menu déroulant du Cascader | string | — | — | +| placeholder | Placeholder du champ. | string | — | Select | +| disabled | Désactive le Cascader. | boolean | — | false | +| clearable | Détermine si la valeur peut être effacée. | boolean | — | false | +| expand-trigger | Mode de déclenchement du menu suivant. | string | click / hover | click | +| show-all-levels | Détermine si tout les niveaux doivent être affichés dans le champ. | boolean | — | true | +| filterable | Active la recherche par mots-clé. | boolean | — | — | +| debounce | Délai d'attente après avoir entré un mot-clé, en millisecondes. | number | — | 300 | +| change-on-select | Détermine si il est possible de sélectionner une option de n'importe quel niveau. | boolean | — | false | +| size | taille du champ | string | medium / small / mini | — | +| before-filter | Fonction de hook qui s'active avant le filtrage, le paramètre étant la valeur entrée. Si `false` est retourné ou bien une `Promise` est retournée puis rejetée, le filtrage sera annulé. | function(value) | — | — | + +### props +| Attribut | Description | Type | Valeurs acceptées | Défaut | +| --------- | ----------------- | ------ | ------ | ------ | +| label | Détermine quelle clé d'option est utilisé comme label. | string | — | — | +| value | Détermine quelle clé d'option est utilisé comme valeur. | string | — | — | +| children | Détermine quelle clé d'option est utilisé en tant que sous-options. | string | — | — | +| disabled | Détermine quelle clé d'option est utilisé pour indiquer si l'option est désactivée. | string | — | — | + +### Évènements +| Nom | Description | Paramètres | +|---------- |-------- |---------- | +| change | Se déclecnhe lorsque la valeur change. | La valeur | +| active-item-change | Se déclenche quand le parent de l'option active change, ne marche que si `change-on-select` est `false` | Un tableau des options actives | +| blur | Se déclenche quand le Cascader perds le focus. | (event: Event) | +| focus | Se déclenche quand le Cascader a le focus. | (event: Event) | +| visible-change | Se déclenche quand le menu apparaît ou disparaît. | `true` quand il apparaît, `false` sinon. | diff --git a/examples/docs/fr-FR/checkbox.md b/examples/docs/fr-FR/checkbox.md new file mode 100644 index 00000000..eebc13f5 --- /dev/null +++ b/examples/docs/fr-FR/checkbox.md @@ -0,0 +1,329 @@ + + +## Checkbox + +Un groupe d'options à choix multiples. + +### Usage + +Checkbox peut être utilisé seul pour switcher entre deux états. + +:::demo Définissez `v-model` (variable liée) dans `el-checkbox`. La valeur par défaut est un `Boolean` pour une seule `checkbox` et devient `true` quand elle est sélectionnée. Le contenu à l'intérieur de la balise `el-checkbox` deviendra le label du bouton de la checkbox. + +```html + + +``` +::: + +### Désactivation + +La checkbox peut être désactivée. + +:::demo Ajouter l'attribut `disabled`. + +```html + + +``` +::: + +### Checkbox groupées + +Utile pour grouper des checkbox, indiquant si une option est selectionnée en vérifiant la case en question. + +:::demo L'élément `checkbox-group` peut gérer plusieurs checkbox d'un groupe en utilisant `v-model`, qui sera un `Array`. Dans l'élément `el-checkbox`, `label` est la valeur de la checkbox. Si il n'y a aucun contenu dans la balise, `label` sera également la description de la checkbox. `label` correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa. + +```html + + + +``` +::: + +### Indéterminée + +La propriété `indeterminate` permet de réaliser un effet "Selectionner tout". + +:::demo + +```html + + +``` +::: + +### Minimum / Maximum d'éléments sélectionnés + +Les propriétés `min` et `max` permettent de limiter la quantité d'éléments sélectionnés. + +:::demo + +```html + + +``` +::: + +### Style bouton + +Des checkbox avec une apparence de bouton. + +:::demo Il vous suffit de changer `el-checkbox` en `el-checkbox-button`. Il existe aussi un attribut `size`. +```html + + +``` +::: + +### Bordures + +:::demo L'attribut `border` ajoute une bordure aux checkbox. +```html + + + +``` +::: + +### Attributs Checkbox +| Attribut | Description | Type | Options | Défaut| +|---------- |-------- |---------- |------------- |-------- | +| value / v-model | La valeur liée. | string / number / boolean | — | — | +| label | Valeur de la checkbox quand utilisée dans un `checkbox-group`. | string / number / boolean | — | — | +| true-label | Valeur de la checkbox si cochée. | string / number | — | — | +| false-label | Valeur de la checkbox si non-cochée. | string / number | — | — | +| disabled | Désactive la checkbox. | boolean | — | false | +| border | Ajoute une bordure à la checkbox. | boolean | — | false | +| size | taille de la checkbox, ne marche que si `border` est 'true' | string | medium / small / mini | — | +| name | Attribut 'name' natif. | string | — | — | +| checked | Si la checkbox est cochée. | boolean | — | false | +| indeterminate | Identique à `indeterminate` dans les checkbox natives. | boolean | — | false | + +### Évènements Checkbox +| Nom | Description | Paramètres | +|---------- |-------- |---------- | +| change | Se déclenche quand la valeur change. | La nouvelle valeur | + +### Attributs Checkbox-group +| Attribut | Description | Type | Options | Défaut| +|---------- |-------- |---------- |------------- |-------- | +| value / v-model | La valeur liée. | array | — | — | +|size | Taille des checkbox-boutons ou des checkbox avec bordure. | string | medium / small / mini | — | +| disabled | Si les checkbox imbriquées sont désactivées. | boolean | — | false | +| min | Nombre minimum de checkbox cochées. | number | — | — | +| max | Nombre maximum de checkbox cochées. | number | — | — | +|text-color | Couleur de police quand le bouton est actif. | string | — | #ffffff | +|fill | Couleur de la bordure et du fond quand le bouton est actif. | string | — | #409EFF | + +### Évènements Checkbox-group +| Nom | Description | Paramètres | +|---------- |-------- |---------- | +| change | Se déclenche quand la valeur change. | La nouvelle valeur | + +### Attributs Checkbox-button +| Attribut | Description | Type | Options | Défaut| +|---------- |-------- |---------- |------------- |-------- | +| label | Valeur de la checkbox quand utilisée dans un `checkbox-group` | string / number / boolean | — | — | +| true-label | Valeur de la checkbox si cochée. | string / number | — | — | +| false-label | Valeur de la checkbox si non-cochée. | string / number | — | — | +| disabled | Si la checkbox est désactivée. | boolean | — | false | +| name | Attribut 'name' natif. | string | — | — | +| checked | SI la checkbox est cochée. | boolean | — | false | diff --git a/examples/docs/fr-FR/collapse.md b/examples/docs/fr-FR/collapse.md new file mode 100644 index 00000000..8292df4a --- /dev/null +++ b/examples/docs/fr-FR/collapse.md @@ -0,0 +1,156 @@ + + + + +## Collapse + +Utilisez Collapse pour stocker du contenu. + +### Usage + +Vous pouvez agrandir plusieurs panneaux. + +:::demo +```html + + +
Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;
+
Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.
+ + +
Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.
+
Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.
+ + +
Simplifier le processus: garde chaque operation simple et intuitive.;
+
Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;
+
Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.
+ + +
Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;
+
Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.
+ + + +``` +::: + +### Accordéon + +En mode accordéon, un seul panneau peut être ouvert à la fois. + +:::demo Utilisez l'attribut `accordion` pour activer le mode accordéon. +```html + + +
Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;
+
Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.
+ + +
Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.
+
Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.
+ + +
Simplifier le processus: garde chaque operation simple et intuitive.;
+
Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;
+
Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.
+ + +
Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;
+
Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.
+ + + +``` +::: + +### Titre personnalisé + +En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titres de panneau, ce qui rends possible l'ajout de contenu personnalisé, comme des icônes par exemple. + +:::demo +```html + + + +
Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;
+
Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.
+ + +
Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.
+
Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.
+ + +
Simplifier le processus: garde chaque operation simple et intuitive.;
+
Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;
+
Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.
+ + +
Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;
+
Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.
+ + +``` +::: + +### Attributs de Collapse +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| value / v-model | Le panneau actuellement activé. | string (en mode accordéon) / array (en mode normal) | — | — | +| accordion | Active le mode accordéon. | boolean | — | false | + +### Évènements de Collapse +| Nom | Description | Paramètres | +|---------|---------|---------| +| change | Se déclenche quand un panneau est activé / désactivé. | (activeNames: array (en mode normal) / string (en mode accordéon)) | + +### Attributs de Collapse-Item +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| name | Identifiant unique du panneau. | string/number | — | — | +| title | Titre du panneau. | string | — | — | diff --git a/examples/docs/fr-FR/color-picker.md b/examples/docs/fr-FR/color-picker.md new file mode 100644 index 00000000..a44b1924 --- /dev/null +++ b/examples/docs/fr-FR/color-picker.md @@ -0,0 +1,182 @@ + + + + +## ColorPicker + +ColorPicker est un sélecteur de couleur qui supporte plusieurs formats. + +### Usage + +:::demo ColorPicker nécessite une variable de type string liée à v-model. +```html +
+ Avec valeur par défaut + +
+
+ Sans valeur par défaut + +
+ + +``` +::: + +### Canal Alpha + +:::demo ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut `show-alpha`. +```html + + + +``` +::: + +### Couleurs prédéfinies + +:::demo ColorPicker supporte les couleurs prédéfinies. +```html + + + + +``` +::: + +### Tailles + +:::demo +```html + + + + + + +``` +::: + +### Attributs +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------- |---------- |------------- |-------- | +| value / v-model | La valeur liée. | string | — | — | +| disabled | Désactive le ColorPicker. | boolean | — | false | +| size | Taille du ColorPicker. | string | — | medium / small / mini | +| show-alpha | Affiche la sélection du canal alpha. | boolean | — | false | +| color-format | Format de couleur du v-model. | string | hsl / hsv / hex / rgb | hex (quand show-alpha est false)/ rgb (quand show-alpha est true) | +| popper-class | Classe du menu déroulant du ColorPicker. | string | — | — | +| predefine | Couleurs prédéfinies. | array | — | — | + +### Évènements +| Nom | Description | Paramètres | +|---------|--------|---------| +| change | Se déclenche quand la valeur change. | La valeur de la couleur | +| active-change | Se déclenche quand la couleur active change. | La valeur de la couleur active | diff --git a/examples/docs/fr-FR/color.md b/examples/docs/fr-FR/color.md new file mode 100644 index 00000000..4a27b1f1 --- /dev/null +++ b/examples/docs/fr-FR/color.md @@ -0,0 +1,130 @@ + + +## Couleur +Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits. + +### Couleur principale + +La couleur principale d'Element est un bleu clair et agréable. + + + +
Bleu
#409EFF
+ + + +### Couleurs secondaires + +En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple un couleur de danger pour indiquer une opération dangereuse. + + + +
Succès
#67C23A
+ + +
Avertissement
#E6A23C
+ + +
Danger
#F56C6C
+ + +
Information
#909399
+ + + +### Couleurs neutres + +Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique. + + + +
+
Texte principal
#303133
+
Texte normal
#606266
+
Texte secondaire
#909399
+
Texte de placeholder
#C0C4CC
+
+ + +
+
Bordure de base
#DCDFE6
+
Bordure claire
#E4E7ED
+
Bordure très claire
#EBEEF5
+
Bordure extra claire
#F2F6FC
+
+ + diff --git a/examples/docs/fr-FR/container.md b/examples/docs/fr-FR/container.md new file mode 100644 index 00000000..1c44d979 --- /dev/null +++ b/examples/docs/fr-FR/container.md @@ -0,0 +1,299 @@ + + + + +## Container +Les composants Container servent à structurer la page: + +``: Conteneur de wrapping. QUand iil est placé à l'intérieur de `` ou ``, tout les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement. + +``: Conteneur pour headers. + +``: Conteneur pour section latérale (en général un menu). + +``: Conteneur pour le contenu principal. + +``: Conteneur pour footers. + +:::tip +Ces composants utlisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de `` doivent être un des quatres éléments précédents, leur élément père devant obligatoirement être ``. +::: + +### Mises en page habituelles + +:::demo +```html + + Header + Main + + + + Header + Main + Footer + + + + Aside + Main + + + + Header + + Aside + Main + + + + + Header + + Aside + + Main + Footer + + + + + + Aside + + Header + Main + + + + + Aside + + Header + Main + Footer + + + + +``` +::: + +### Exemple + +:::demo +```html + + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + + + + + View + Add + Delete + + + Tom + + + + + + + + + + + + + + + + + + +``` +::: + +### Attributs de Container +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| direction | Direction d'affichage pour les éléments enfants. | string | horizontal / vertical | vertical quand dans `el-header` ou `el-footer`; horizontal sinon | + +### Attributs de Header +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| height | Hauteur du header. | string | — | 60px | + +### Attributs de Aside +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| width | Largeur de la section. | string | — | 300px | + +### Attributs de Footer +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| height | Hauteur du footer. | string | — | 60px | diff --git a/examples/docs/fr-FR/custom-theme.md b/examples/docs/fr-FR/custom-theme.md new file mode 100644 index 00000000..68d73cdf --- /dev/null +++ b/examples/docs/fr-FR/custom-theme.md @@ -0,0 +1,123 @@ +## Thème +Element utlise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons trois méthodes pour changer les variables de style. + +### Changer la couleur du thème +Si vous avez juste besoin de changer la couleur du thème, le [générateur de thème en ligne](https://elementui.github.io/theme-chalk-preview/#/en-US) est recommandé. La couleur du thème d'Element est un bleau clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets. + +Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour un importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section). + +### Mettre à jour les variables SCSS de votre projet +`theme-chalk` est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. `element-variables.scss`: + +```html +/* couleur du thème */ +$--color-primary: teal; + +/* chemin vers le fichier de police, requis */ +$--font-path: '~element-ui/lib/theme-chalk/fonts'; + +@import "~element-ui/packages/theme-chalk/src/index"; +``` + +Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element: +```JS +import Vue from 'vue' +import Element from 'element-ui' +import './element-variables.scss' + +Vue.use(Element) +``` + +:::tip +Il est obligatoire de remplacer le chemin du fichier de police. +::: + +### Outil de thème CLI +Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande: + +#### Installation +Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm. +```shell +npm i element-theme -g +``` + +Installer ensuite le thème chalk depuis npm ou GitHub. +```shell +# Via npm +npm i element-theme-chalk -D + +# Via GitHub +npm i https://github.com/ElementUI/theme-chalk -D +``` + +#### Initialisation d'un fichier de variable +Après l'installation des paquets ci-dessus, une commande appellée `et` devient disponible dans le CLI (si les paquets sont installés localement, utilisez `node_modules/.bin/et` à la place). Utilisez `-i` pour intialiser le fichier de variables, `element-variables.scss` par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie. + +```shell +et -i [nom du fichier] + +> ✔ Generator variables file +``` + +Dans `element-variables.scss` vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet: + +```css +$--color-primary: #409EFF !default; +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ + +$--color-success: #67c23a !default; +$--color-warning: #e6a23c !default; +$--color-danger: #f56c6c !default; +$--color-info: #909399 !default; + +... +``` + +#### Modifier les variables +Éditer `element-variables.scss`, e.g. en changeant la couleur du thème pour du rouge: +```CSS +$--color-primary: red; +``` + +#### Générer le thème +Après avoir sauvegarder le fichier de variables, utilisez `et` pour générer le thème. Vous pouvez activer le mode `watch` en ajoutant le paramètre `-w`. Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre `-c` avec le nom du fichier: +```shell +et + +> ✔ build theme font +> ✔ build element theme +``` + +#### Importer le thème +Par défaut le thème généré est placé dans `./theme`. Vous pouvez spécifier le dossier de sortie grâce à `-o`. Importer votre propre thème se fait de la même manière qu'importer le thème par défaut: + +```javascript +import '../theme/index.css' +import ElementUI from 'element-ui' +import Vue from 'vue' + +Vue.use(ElementUI) +``` + +#### Importer le thème d'un composant sur demande +Si vous utilisez `babel-plugin-component` pour les imports sur demande, modifiez `.babelrc` et spécifiez `styleLibraryName` avec le chemin où votre thème est localisé relativement à `.babelrc`. N'oubliez pas que `~` est requis: +```json +{ + "plugins": [["component", [ + { + "libraryName": "element-ui", + "styleLibraryName": "~theme" + } + ]]] +} +``` + +Si vous n'êtes pas familier avec `babel-plugin-component`, référez-vous à la page Guide. Pour plus d'informations, jetez un oeil au [dépôt du projet](https://github.com/ElementUI/element-theme) de `element-theme`. diff --git a/examples/docs/fr-FR/date-picker.md b/examples/docs/fr-FR/date-picker.md new file mode 100644 index 00000000..1eb89e3d --- /dev/null +++ b/examples/docs/fr-FR/date-picker.md @@ -0,0 +1,533 @@ + + + + +## DatePicker + +Utilisez le DatePicker pour les champs de dates. + +### Entrez la date + +L'unité de base du DatePicker est le jour. + +:::demo L'unité est déterminée par l'attribut `type`. Vous pouvez ajouter des options de raccourcis en créant un objet `picker-options` avec la propriété `shortcuts`. L'état désactivé est controllé par `disabledDate` qui prend une function. + +```html + + + +``` +::: + +### Autres unités + +Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs. + +:::demo + +```html +
+
+ Semaine + + +
+
+ Mois + + +
+
+
+
+ Année + + +
+
+ Dates + + +
+
+ + +``` + +::: + +### Plage de dates + +Vous pouvez sélectionner une plage de dates. + +:::demo Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut `unlink-panels`. + +```html + + + +``` + +::: + +### Valeur par défaut + +Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez `default-value` pour montrer une autre date. Sa valeur doit être parsable par `new Date()`. + +Si le type est `daterange`, `default-value` configure la panneau de gauche. + +:::demo +```html + + + +``` +::: + +### Formats de date + +Utilisez `format` pour contrôler l'affichage de la date dans le champ. Utilisez `value-format` pour contrôler le format de la variable stockée. + +Par défaut, le composant accepte et émet un objet `Date`. Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple: + +:::warning +Attention à la capitalisation ! +::: + +| Format | Signification | Note | Exemple | +|------|------|------|------|------| +| `yyyy` | Année | | 2017 | +| `M` | Mois | pas de 0 au début | 1 | +| `MM` | Mois | | 01 | +| `MMM` | Mois | | Jan | +| `MMMM` | Mois | | Janvier | +| `W` | Semaine | uniquement pour les `format` des types 'semaine' ; pas de 0 au début | 1 | +| `WW` | Semaine | uniquement pour les `format` des types 'semaine' | 01 | +| `d` | Jour | pas de 0 au début | 2 | +| `dd` | Jour | | 02 | +| `H` | Heure | Horloge 24 heures; pas de 0 au début | 3 | +| `HH` | Heure | Horloge 24 heures | 03 | +| `h` | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a`; pas de 0 au début | 3 | +| `hh` | Heure | Horloge 12 heures ; doit être utilisé avec `A` ou `a` | 03 | +| `m` | Minute | pas de 0 au début | 4 | +| `mm` | Minute | | 04 | +| `s` | Seconde | pas de 0 au début | 5 | +| `ss` | Seconde | | 05 | +| `A` | AM/PM | uniquement pour `format`, majuscules | AM | +| `a` | am/pm | uniquement pour `format`, minuscules | am | +| `timestamp` | timestamp JS | uniquement pour `value-format`; la variable stockée sera un `number` | 1483326245000 | + +:::demo +```html + + + +``` +::: + +### Horaire par défaut pour les dates de fin et de début + +Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates. + +:::demo Par défaut, l'horaire pour les dates de début et de fin est `00:00:00`. Configurez `default-time` pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format `12:00:00`. Le premier est pour la date de début, le deuxième pour la date de fin. +```html + + + +``` +::: + +### Attributs +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| value / v-model | La valeur liée. | date(DatePicker) / array(DateRangePicker) | — | — | +| readonly | Si le DatePicker est en lecture seule. | boolean | — | false | +| disabled | Si le DatePicker est désactivé. | boolean | — | false | +| size | Taille du champs. | string | large/small/mini | — | +| editable | Si le champ est éditable. | boolean | — | true | +| clearable | Si la croix de reset doit apparaître. | boolean | — | true | +| placeholder | Le placeholder en mode normal. | string | — | — | +| start-placeholder | Le placeholder pour la date de début en mode plage de dates. | string | — | — | +| end-placeholder | Le placeholder pour la date de fin en mode plage de dates. | string | — | — | +| type | Type du picker. | string | year/month/date/dates/datetime/ week/datetimerange/daterange | date | +| format | Format d'affichage dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date). | yyyy-MM-dd | +| align | Alignement. | left/center/right | left | +| popper-class | Nom de classe pour le menu déroulant du DatePicker. | string | — | — | +| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} | +| range-separator | Séparateur de plage de dates. | string | — | '-' | +| default-value | Date par défaut du calendrier, optionnelle. | Date | anything accepted by `new Date()` | — | +| default-time | Horaire par défaut quand on sélectionne une plage dates, optionnel. | string[] | Tableau de taille 2, chaque valeur est au format `12:00:00`. La première pour la date de début, la deuxième pour la date de fin. | — | +| value-format | Format de la variable stockée, optionnel. Si non spécifié, la valeur dsera un objet Date. | string | Voir [formats de date](#/en-US/component/date-picker#formats-de-date) | — | +| name | Identique au `name` de l'input natif | string | — | — | +| unlink-panels | Rend indépendants les deux panneaux de plage de dates. | boolean | — | false | +| prefix-icon | Icône de préfixe. | string | — | el-icon-date | +| clear-icon | Icône de reset. | string | — | el-icon-circle-close | +| validate-event | Si la validation doit être déclenchée. | boolean | - | true | + +### Options du Picker +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| shortcuts | UN tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — | +| disabledDate | Une function qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — | +| firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 | +| onPick | Callbacl se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - | + +### Raccourcis +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| text | Titre du raccourci. | string | — | — | +| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — | + +### Évènements +| Nom | Description | Paramètres | +|---------|--------|---------| +| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value | +| blur | Se déclenche quand le champ perds le focus. | component instance | +| focus | Se déclenche quand le champ a le focus. | component instance | + +### Méthodes +| Méthode | Description | Paramètres | +|------|--------|-------| +| focus | Focus sur le champ. | — | + +### Slots +| Nom | Description | +|---------|-------------| +| range-separator | Séparateur d'intervalle personnalisé. | diff --git a/examples/docs/fr-FR/datetime-picker.md b/examples/docs/fr-FR/datetime-picker.md new file mode 100644 index 00000000..f4fa74d1 --- /dev/null +++ b/examples/docs/fr-FR/datetime-picker.md @@ -0,0 +1,329 @@ + + + + +## DateTimePicker + +Selectionnez une date et un heure dans un seul picker. + +:::tip +DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur `pickerOptions` et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker. +::: + +### Date et horaire + +:::demo Vous pouvez sélectionner une date et un horaire en un seul picker en réglant `type` sur `datetime`. La manière d'utiliser des raccourcis est la même que pour DatePicker. + +```html + + + +``` +::: + +### Plage de dates et d'horaires + +:::demo Vous pouvez sélectionner des plages en configurant `type` sur `datetimerange`. + +```html + + + +``` +::: + +### Horaire par défaut pour les plages de dates + +:::demo Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type `datetimerange`, `00:00:00` sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut `default-time`. Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin. +```html + + + +``` +::: + +### Attributs +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| value / v-model | La valeur liée. | date(DateTimePicker) / array(DateTimeRangePicker) | — | — | +| readonly | Si le DatePicker est en lecture seule. | boolean | — | false | +| disabled | Si le DatePicker est désactivé. | boolean | — | false | +| editable | Si le champ est éditable. | boolean | — | true | +| clearable | Si la croix de reset doit apparaître. | boolean | — | true | +|size | Taille du champ. | string | large/small/mini | — | +| placeholder | Le placeholder en mode normal. | string | — | — | +| start-placeholder | Le placeholder de la date de début en mode plage de dates. | string | — | — | +| end-placeholder | Le placeholder de la date de fin en mode plage de dates. | string | — | — | +| time-arrow-control | Si l'horaire peut être sélectionné en utilisant les flèches de direction. | boolean | — | false | +| type | Type du picker. | string | year/month/date/datetime/ week/datetimerange/daterange | date | +| format | Format d'affichage de la date dans le champ. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | yyyy-MM-dd HH:mm:ss | +| align | Alignements. | left/center/right | left | +| popper-class | Nom de classe pour le menu déroulant du DateTimePicker. | string | — | — | +| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} | +| range-separator | Séparateur de plage. | string | - | '-' | +| default-value | Date par défaut du calendrier, optionnelle. | Date | N'importe quelle valeur acceptée par `new Date()` | — | +| default-time | L'horaire par défaut après avoir choisi une date. | normal: string / plage de dates: string[] | normal: un string tel que `12:00:00`, range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non-spécifié, `00:00:00` est utilisé. | — | +| value-format | Format de la variable stockée, optionnel. Si non-spécifié, La valeur sera un objet Date. | string | Voir [formats de date](#/fr-FR/component/date-picker#formats-de-date) | — | +| name | Identique au `name` de l'input natif | string | — | — | +| unlink-panels | Rend indépendants les deux panneaux de plage de dates | boolean | — | false | +| prefix-icon | Icône de préfixe. | string | — | el-icon-date | +| clear-icon | Icône de reset | string | — | el-icon-circle-close | + +### Options du Picker +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — | +| disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — | +| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 | + +### Raccourcis +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| text | Titre du raccourci. | string | — | — | +| onClick | Callback se déclenchant quand le raccourci est cliqué, avec `vm` en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement `pick`. Exemple: `vm.$emit('pick', new Date())`| function | — | — | + +### Évènements +| Nom | Description | Paramètres | +|---------|--------|---------| +| change | Se déclenche quand l'utilisateur confirme la valeur | component's binding value | +| blur | Se déclenche quand le champ perds le focus. | component instance | +| focus | Se déclenche quand le champ a le focus. | component instance | + +### Méthodes +| Méthode | Description | Paramètres | +|------|--------|-------| +| focus | Focus sur le champ. | — | diff --git a/examples/docs/fr-FR/dialog.md b/examples/docs/fr-FR/dialog.md new file mode 100644 index 00000000..265de75a --- /dev/null +++ b/examples/docs/fr-FR/dialog.md @@ -0,0 +1,318 @@ + + + + +## Dialog + +Informe les utilisateurs tout en préservant l'état de la page. + +### Usage + +Le Dialog ouvre un modal personnalisable. + +:::demo Configurez l'attribut `visible` avec un `Boolean`, un modal apparaîtra quand la valeur sera à `true`. Le Dialog possède deux parties: `body` et `footer`, ce-dernier nécessitant un `slot` appelé `footer`. L'attribut optionnel `title` (vide par défaut) définit le titre. Cet exemple montre également comment `before-close` peut être utilisé. + +```html +Cliquez pour ouvrir le modal + + + Ceci est un message + + Annuler + Confirmer + + + + +``` +::: + +:::tip +`before-close` ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. Si il y a des boutons dans le `footer`, vous pouvez configurer `before-close` grâce à leur évènement click. +::: + +### Personalisation + +Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris. + +:::demo + +```html + +Ouvir un modal avec tableau + + + + + + + + + + +Ouvrir un modal avec formulaire + + + + + + + + + + + + + + + Annuler + Confirmer + + + + +``` +::: + +### Dialog imbriqué + +Si un Dialog est imbriqué dans un autre Dialog, `append-to-body` est requis. + +:::demo Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. SI vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut `append-to-body` du Dialog imbriqué à `true` et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct. +```html + + + +``` +::: + +### Centrer le contenu + +Le contenu du modal peut être centré. + +:::demo Régler `center` à `true` centrera horizontalement le header et le footer. `center` n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS. + +```html +Cliquez pour ouvrir le modal + + + Le contenu du modal n'est pas centré par défaut. + + Annuler + Confirmer + + + + +``` +::: + +:::tip +Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via `ref`, vous pouvez le faire avec la callback de l'évènement `open`. +::: + +:::tip +Si la variable liée à `visible` est gérée dans Vuex, le modificateur `.sync` ne peut pas fonctionner. Dans ce cas retirez-le, écouter les évènements `open` et `close`, et commité les mutations Vuex pour mettre à jour la valeur de cette variable. +::: + +### Attributs + +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|---------- |-------------- |---------- |-------------------------------- |-------- | +| visible | Visibilité du Dialog, supporte le modificateur .sync. | boolean | — | false | +| title | Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante). | string | — | — | +| width | Largeur du Dialog. | string | — | 50% | +| fullscreen | Si le Dialog doit être en plein écran. | boolean | — | false | +| top | Valeur du `margin-top` du CSS du Dialog. | string | — | 15vh | +| modal | Si un masque est affiché. | boolean | — | true | +| modal-append-to-body | Si il faut ajouter le modal au body. Si `false`, le modal sera ajouter à l'élément parent du Dialog. | boolean | — | true | +| append-to-body | Si il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à `true`. | boolean | — | false | +| lock-scroll | Si le défilement du body est désactivé. | boolean | — | true | +| custom-class | Nom de classe pour le Dialog | string | — | — | +| close-on-click-modal | Si le Dialog peut être fermé en cliquant sur le masque. | boolean | — | true | +| close-on-press-escape | Si le Dialog peut être fermé en appuyant sur Echap. | boolean | — | true | +| show-close | Si le bouton de fermeture doit apparaître. | boolean | — | true | +| before-close | Callback avant la fermeture du Dialog. | function(done)，done est utilisé pour fermer le Dialog. | — | — | +| center | Si le header et le footer doivent être centrés. | boolean | — | false | + +### Slot + +| Nom | Description | +|------|--------| +| — | Contenu du Dialog. | +| title | Contenu du titre. | +| footer | Contenu du footer. | + +### Évènements + +| Nom | Description | Paramètres | +|---------- |-------- |---------- | +| open | Se déclenche quand le Dialog s'ouvre. | — | +| opened | Se déclenche quand l'animation d'ouverture est terminée. | — | +| close | Se déclenche quand le Dialog se ferme. | — | +| closed | Se déclenche quand l'animation de fermeture du Dialog est terminée. | — | diff --git a/examples/docs/fr-FR/dropdown.md b/examples/docs/fr-FR/dropdown.md new file mode 100644 index 00000000..10858209 --- /dev/null +++ b/examples/docs/fr-FR/dropdown.md @@ -0,0 +1,358 @@ + + + + +## Dropdown +Menu déroulant pour afficher des listes de liens et d'actions possibles. + +### Usage +Passez sur le menu avec la souris pour dérouler son contenu. + +:::demo L'élément déclencheur est généré par le `slot` par défaut, et le menu déroulant est généré par le `slot` appelé `dropdown`. Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer. + +```html + + + Menu déroulant + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + +``` + +::: + +### Élément déclencheur + +Utilisez le bouton pour ouvrir le menu déroulant. + +:::demo Utilisez `split-button` pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite. +```html + + + Liste déroulante + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + Liste déroulante + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Déclencheur + +Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément. + +:::demo Utilisez l'attribut `trigger`. Par défaut, il est à `hover`. + +```html + + + En passant la souris + + + Liste déroulante + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + En cliquant + + + Liste déroulante + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Fermer le menu + +Utilisez l'attribut `hide-on-click` pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste. + +:::demo Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant `hide-on-click` à `false`. +```html + + + Liste déroulante + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + +``` +::: + +### Évènement command + +Cliquer sur un élément du dropdown déclenche un évènement "command". +Le paramètre de cet évènement peut être assigné à chaque élément de la liste. + +:::demo +```html + + + Liste déroulante + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Tailles + +En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes. + +:::demo Utilisez `size` pour déterminer une autre taille parmi `medium`, `small` ou `mini`. + +```html + + Défaut + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Medium + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Small + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Mini + + Action 1 + Action 2 + Action 3 + Action 4 + + +``` +::: + + +### Attributs du Dropdown + +| Attribut | Description | Type | Valeurs acceptées | Défaut | +|------------- |---------------- |---------------- |---------------------- |-------- | +| type | Type du bouton, se référer au composant `Button`. Ne marche que si `split-button` est `true`. | string | — | — | +| size | Taille du menu, marche aussi avec `split button`. | string | medium / small / mini | — | +| split-button | Si le bouton est séparé en deux. | boolean | — | false | +| placement | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | +| trigger | Comment déclencher l'ouverture du menu. | string | hover/click | hover | +| hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément. | boolean | — | true | +| show-timeout | Délai avant d'afficher le menu (ne marche que si `trigger` est `hover`) | number | — | 250 | +| hide-timeout | Délai avant de cacher le menu (ne marche que si `trigger` est `hover`) | number | — | 150 | + +### Dropdown Slots + +| Nom | Description | +|------|--------| +| — | Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. `,