Retrait de l'attribut role="alert"
Mise à jour des icones (deux des nouvelles n'existent pas sur Remix Icons)

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/736362500/Alertes+-+Alerts

https://github.com/GouvernementFR/dsfr/releases

La possibilité de cliquer sur une ligne (pour accéder au détail de l'élément sélectionné par exemple) ne semble pas être implémentée.

ETU je souhaite pouvoir ajouter une icône dans un bouton facilement.

Tech : utiliser la props icon pour ajouter une icône à gauche et les props icon et iconRight pour la mettre à droite, comme dans DsfrHeaderMenuLinks

Dans un projet déjà existant en vue3 + vue-router4 où j'ai fait:
1. npm install @laruiss/vue-dsfr@beta
2. Rajouté

import VueDsfr from '@laruiss/vue-dsfr'            // Import (par défaut) de la bibliothèque
import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import des polices
import '@laruiss/vue-dsfr/dist/vue-dsfr.css'       // Import des styles globaux

et rajouté app.use(VueDsfr)

j'ai une erreur en ouvrant mon site:

./node_modules/@laruiss/vue-dsfr/dist/vue-dsfr.esm.js 954:31
Module parse failed: Unexpected token (954:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

ETU je souhaite pouvoir créer des boutons avec des liens externes.

Tech : Balise a native si le lien est externe au site
Composant router-link de vue-router si le lien est interne

Peut-on prévoir la possibilité de laisser l'input en disabled à l'aide d'une props supplémentaire ?

Ajout des attributs role=”link” et aria-disabled=”true” sur les liens désactivés

Ajout d'un message d’explication avant les boutons désactivés dans le DOM

Attribut title des liens externes plus court “intitulé lien - ouvre une nouvelle fenêtre”

Ajout d’un exemple de svg non porteur de sensOnglets - tabs

Ajout d’un js pour scroll vers le bouton sélectionné

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/771555355/Partage+-+Share

https://github.com/GouvernementFR/dsfr/releases

Implémenter le composant décrit ici

Est-ce possible d'intégrer le vue-dsfr dans un nouveau projet Nuxt?

Ajout d’attributs “title” sur les boutons “tout accepter”, “tout refuser”, “personnaliser”
Attributs aria sur le fieldset des services du formulaire de consentement, plutot que sur la légende :
Retrait de l’attribut aria-describedby de la balise legend

Ajout d'id aux balises legend

Ajout de l’attribut aria-labelledby sur les balises fieldset ayant pour valeurs les id du tag legend et et de la description.

Ajout d’un attribut aria-describedby sur les boutons ‘voir plus de détail’ affichant les sous-finalité.

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/609189956/Gestionnaire+de+consentement+-+Consent+banner

https://github.com/GouvernementFR/dsfr/releases

Le bouton "Montrer le fil d'Arianne" n'apparait que sur les écrans moins larges que 48em. Or, le fil d'Arianne n'apparaît pas par défaut, il nécessite de passer par le bouton. Le composant ne s'affiche donc pas (sur grand écran)

Proposition : Lier l'affichage du fil d'Arianne à une propriété différente du bouton d'affichage. Et pouvoir la définir depuis le composant parent

<template>
    :class="{ 'fr-collapse--expanded': displayBreadcrumb}"
</template>

<script>
displayBreadcrumb: {
      type: Boolean,
      default: () => true,
    },
</script>

Actuellement pas de possibilité de modifier le placeholder de la barre de recherche dans le header.
Ajout du props placeholder dans le DsfrHeader

Nous proposons de faire une PR afin de pouvoir rentre un champ checkbox ou radioButton obligatoire (ajout de l'étoile "*" après le libellé du champ)

ETD je souhaite pouvoir utiliser un composant correspondant au composant Alert du DSFR

Rajouter :
export { default as DsfrFileUpload } from './DsfrFileUpload/DsfrFileUpload.vue' au fichier /components/index.js

ETU je souhaite pouvoir utiliser les classes utilitaires du DSFR

• Créer un composable useScheme
• Documenter ce composable
• Créer un exemple sur StackBlitz

Le props showSearch dans Header même à false l'icone recherche apparaît lorsqu'on met l'affiche en mobile ou tablette

Bonjour,

Nous aurions besoin de l'attribut required sur la balise ìnput ajoutée dans le composant DsfrInput.
Il est probable que certains des autres attributs standards finissent par nous intéresser.

En ajoutant v-bind="$attrs" sur l'élément input de DsfrInput, on pourrait récupérer les attributs passés au parent ?

ETU je peux mettre des composants dans DsfrHighlight

voir la doc du DSFR

En ajoutant simplement : <component :is="isComponent" v-if="isComponent" v-bind="field" >{{field.text}}</component>, cela permettrait d'utiliser des composants html dans les cellules.

Exemple :

{
    component: "a",
    href: `#/detail/${id}`,
    "aria-label": "Vers le détail",
    target: "_self",
    text: 'Vers détail',
}

Sur un projet quasi-vide généré avec npm init vue-dsfr et Nuxt -source complète du projet-, le serveur de production en SRR (lancé avec npm run start) me donne l'erreur suivante :

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /telescoop/moine/frontend/.output/server/node_modules/@laruiss/vue-dsfr/dist/vue-dsfr.umd.js:2:126
    at Object.<anonymous> (/telescoop/moine/frontend/.output/server/node_modules/@laruiss/vue-dsfr/dist/vue-dsfr.umd.js:5:3)

Comme la documentation de Nuxt le suggère

If you get an Cannot use import statement outside a module error, you may need to add your package to the build > transpile option in nuxt.config.js for webpack loader to make your plugin available.

cette erreur est réparée en ajoutant '@laruiss/vue-dsfr', dans le build.transpile de nuxt.config.js. Cela mériterait peut-être de figurer de base dans le nuxt.config.js généré par npm init vue-dsfr ?

D'abord, merci pour cette superbe librairie, qui va nous faire gagner un temps fou 🔥.
Est-il possible de configurer une auto-complétion pour VSCode ou autre Webstorm? J'ai l'impression que ces IDEs vont chercher dans le sous-dossier types, qui ne contient pas grand chose et en tout cas pas la définition des composants.

Ce que j'ai essayé :

• si j'importe à la main un composant, par exemple import {DsfrButton} from '@laruiss/vue-dsfr/dist/vue-dsfr.esm', l'auto-complétion fonctionnera sur ce composant, là où il est importé, dans Webstorm (pas sur VScode)
• si j'importe dans le plugin import {DsfrAccordion, DsfrAccordionsGroup, ...} from '@laruiss/vue-dsfr/dist/vue-dsfr.esm', seuls les composants explicitement définis avec defineComponent sont reconnus et utilisables partout (sans ré-importer), dans Webstorm (pas sur VScode)

Savez-vous comment je pourrais configurer une auto-complétion globale ?

Ajout de l'attribut autocomplete='email' pour gérer l’auto-complétion

Message d’erreur plus précis, avec un exemple d’adresse électronique différent de celui présent dans le placeholder.

Attribut title des liens externes plus court “intitulé lien - ouvre une nouvelle fenêtre”

Mise à jour de l’icône d’erreur.

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/779747332/Lettre+d+information+et+r+seaux+sociaux+-+Newsletter+Follow+us

https://github.com/GouvernementFR/dsfr/releases

L'évènement toggle-id n'est pas transmis au parent

Bonjour,

Il semblerait qu'il y ait une typo dans la classe data-rf-theme (=> data-fr-theme)

Par ailleurs, d'après la dernière version du DSFR, il faut désormais utiliser l'attribut data-fr-scheme

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/579928166/Param+tres+d+affichage+-+Display

Dans le DsfrInput, la fontSize est à 0.8em tandis que sur leDsfrSelect elle est à 1rem. De plus, il manque un margin-top de 0.5rem, ce qui brise l'alignement des champs (voir image).

Il semble que ce style a été ajouté en surcharge dans le composant, y-a-t-il une raison particulière à cela ?

.fr-label {
  font-size: 0.8rem;
  display: block;
  color: var(--g800);

.fr-input {
  margin: 0;
  border: 0;
}

🚨 The automated release from the beta branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Pour mise en cohérence avec le DsfrSelect

Dans une page ayant du contenu, le composant ne s'affiche pas du tout :

Sans doute à cause de cette propriété css : overflow: hidden; dans la classe .fr-tabs

Depuis l’intégration du JS du DSFR dans la bibliothèque, comme celui-ci accède à window, cela génère une erreur dans Nuxt

Nous proposons de retirer la propriété css 'max-width: 10rem;' des classes fr-breadcrumb__link et fr-breadcrumb__item car cela tronque les libellés.
(Cf https://vue-dsfr.netlify.app/?path=/docs/composants-fil-d-ariane-dsfrbreadcrumb--fil-d-ariane)

Bonjour,

En utilisant une configuration de projet vue3 par défaut (babel / eslint) et avec:

• npm en version 8.1.0
• node en version 16.13.0
• nodejs en version 12.22.5 (v stable sur machine débian)

Après avoir installé votre plugin et en tentant de lancer le projet en local j'obtiens systématiquement une erreur:

...
Module parse failed: Unexpected token (1406:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|       validator: (networks) =>
|         networks.every(
>           (network) => network?.name && network.href && allowedNetworks.includes(network.name),
...

L'optional chaining ne semble pas supporté (malgré le fait que vue3 est censé le faire).
Essayer d'installer un plugin "@babel/plugin-proposal-optional-chaining" n'y change rien.

Avez vous déjà eu des échos de problèmes similaires ? Quelle config utilisez vous exactement ?

ETU je souhaite avoir toutes les icônes recommandées par le DSFR déjà chargées lorsque j'utilise la bibliothèque en tant que plugin Vue 3

Voici le lien officiel vers la liste des icônes recommandées : https://gouvfr.atlassian.net/wiki/spaces/DB/pages/222331396/Ic+nes+-+Icons

Actuellement, lorsque les liens sont internes, c'est le composant router-link qui est utilisé, il faudrait que ce soit nuxt-link si le composant est utilisé dans nuxt..

Peut-on faire évoluer le composant de sorte à ce que le champ de saisie du DsfrInput puisse être un textarea ?
A l'aide par exemple d'une prop :textarea="true".

Bonjour,

Dans les dossiers : vue-dsfr/src/assets/fonts/Marianne/ et vue-dsfr/src/assets/fonts/Spectral/
Clonage partiel du repo cause des fichiers :Zone.Identifier
Il semblerait que des fichiers de fonts soient hébergés sur un oneDrive privé. Est-ce encore pertinent ? Il semblerait que les fonts aient bien été importées dans les assets. Ces références pourraient-elles être supprimées ?

Nous ne pouvons pas cloner correctement le repo tant qu'ils sont présents

ETU je souhaite que VIcon soit directement utilisable si on utilise la bibliothèque VueDsfr en tant que plugin

Le composant DsfrNavigation n'est pas exporté, il n'est pas disponible

Mise à jour des icônes d’erreur et de succès.

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217088099/Champs+de+saisie+-+Input

https://github.com/GouvernementFR/dsfr/releases

Ajout d’attributs role='img’ et aria-label sur les svg porteurs de sens.
Ajout d’un exemple de svg non porteur de sens

https://gouvfr.atlassian.net/wiki/spaces/DB/pages/223019554/Contenu+m+dias+-+Responsive+medias

https://github.com/GouvernementFR/dsfr/releases