Merge pull request #336 from dnum-mi/fix/bug-with-nuxt-link

laruiss · web-flow · commit 89989baa0133 · 2022-04-20T15:42:27.000+02:00
fix: 🐛 Utilise toujours router-link pour les liens internes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@laruiss/vue-dsfr",
-  "version": "1.0.0-beta.35",
+  "version": "1.0.0-beta.53",
   "files": [
     "dist",
     "types",
diff --git a/rollup.config.js b/rollup.config.js
@@ -30,12 +30,6 @@ const postcssPlugins = [
 const baseOutput = {
   globals: {
     vue: 'vue',
-    'oh-vue-icons': 'VIcon',
-    'oh-vue-icons/icons': 'oh-vue-icons/icons',
-    'oh-vue-icons/icons/ri/index.js': 'oh-vue-icons/icons/ri/index.js',
-    'vue-router': 'vue-router',
-    'focus-trap': 'focus-trap',
-    'focus-trap-vue': 'focus-trap-vue',
   },
 }
 
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue
@@ -27,12 +27,6 @@ export default defineComponent({
       hideButton: false,
     }
   },
-
-  computed: {
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
-  },
 })
 </script>
 
@@ -64,7 +58,7 @@ export default defineComponent({
           :data-testid="`lis`"
         >
           <component
-            :is="linkComponent"
+            :is="'router-link'"
             v-if="link.to"
             class="fr-breadcrumb__link"
             :to="link.to"
diff --git a/src/components/DsfrCard/DsfrCard.vue b/src/components/DsfrCard/DsfrCard.vue
@@ -33,12 +33,6 @@ export default defineComponent({
     horizontal: Boolean,
   },
 
-  computed: {
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
-  },
-
   methods: {
     goToTargetLink () {
       this.$refs.title.querySelector('.fr-card__link').click()
@@ -59,15 +53,14 @@ export default defineComponent({
         ref="title"
         class="fr-card__title"
       >
-        <component
-          :is="linkComponent"
+        <router-link
           :to="link"
           class="fr-card__link"
           data-testid="card-link"
           @click="$event.stopPropagation()"
         >
           {{ title }}
-        </component>
+        </router-link>
       </h4>
       <p class="fr-card__desc">
         {{ description }}
diff --git a/src/components/DsfrConsent/DsfrConsent.vue b/src/components/DsfrConsent/DsfrConsent.vue
@@ -17,11 +17,8 @@ export default defineComponent({
     isExternalLink () {
       return typeof this.url === 'string' && this.url.startsWith('http')
     },
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
     is () {
-      return this.url ? (this.isExternalLink ? 'a' : this.linkComponent) : 'a'
+      return this.url ? (this.isExternalLink ? 'a' : 'router-link') : 'a'
     },
     linkProps () {
       return { [this.isExternalLink ? 'href' : 'to']: this.url }
diff --git a/src/components/DsfrFooter/DsfrFooter.vue b/src/components/DsfrFooter/DsfrFooter.vue
@@ -110,9 +110,6 @@ export default defineComponent({
         ...this.afterMandatoryLinks,
       ]
     },
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
     isWithSlotLinkLists () {
       return this.$slots['footer-link-lists']?.().length
     },
@@ -143,15 +140,14 @@ export default defineComponent({
     <div class="fr-container">
       <div class="fr-footer__body">
         <div class="fr-footer__brand fr-enlarge-link">
-          <component
-            :is="linkComponent"
+          <router-link
             :to="homeLink"
             title="Retour à l’accueil"
           >
             <DsfrLogo
               :logo-text="logoText"
             />
-          </component>
+          </router-link>
         </div>
         <div class="fr-footer__content">
           <p
@@ -189,14 +185,13 @@ export default defineComponent({
             :key="index"
             class="fr-footer__bottom-item"
           >
-            <component
-              :is="linkComponent"
+            <router-link
               class="fr-footer__bottom-link"
               :to="link.to"
               :data-testid="link.to"
             >
               {{ link.label }}
-            </component>
+            </router-link>
           </li>
         </ul>
         <div class="fr-footer__bottom-copy">
diff --git a/src/components/DsfrFooter/DsfrFooterLinkList.vue b/src/components/DsfrFooter/DsfrFooterLinkList.vue
@@ -14,12 +14,6 @@ export default defineComponent({
       default: () => [],
     },
   },
-
-  computed: {
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
-  },
 })
 </script>
 
@@ -38,14 +32,13 @@ export default defineComponent({
           class="fr-footer__top-link"
           :to="link.to"
         >{{ link.label }}</a>
-        <component
-          :is="linkComponent"
+        <router-link
           v-else
           class="fr-footer__top-link"
           :to="link.to"
         >
           {{ link.label }}
-        </component>
+        </router-link>
       </li>
     </ul>
   </div>
diff --git a/src/components/DsfrHeader/DsfrHeader.stories.js b/src/components/DsfrHeader/DsfrHeader.stories.js
@@ -46,7 +46,7 @@ export default {
       control: 'object',
       description: `Tableau des liens d’accès rapide, chaque objet contiendra les props suivantes :
 - \`label\`: Texte du lien (\`'Notifications'\`, par ex.)
-- \`to\`: Chemin ou objet à passer à \`to\` de \`router-link\` ou \`nuxt-link\` (\`'/notification'\` ou \`{ name: 'Notifications' }\` par ex.)
+- \`to\`: Chemin ou objet à passer à \`to\` de \`router-link\` (\`'/notification'\` ou \`{ name: 'Notifications' }\` par ex.)
 - \`href\`: URL à passer à \`href\` de la balise \`<a>\` (\`'https://systeme-de-design.gouv.fr\` par ex.) **pour un lien externe uniquement**.
 - \`icon\` Nom de l’icône [Remix Icon](https://remixicon.com/) (ou toute autre icône de [oh-vue-icons](https://oh-vue-icons.netlify.app/)) à afficher (\`'ri-phone-line'\` par ex.)
 - \`iconRight\` Permet de mettre l’icône à droite (si la valeur est \`true\` ou <em>truthy</em> et que \`icon\` est renseigné )
diff --git a/src/components/DsfrHeader/DsfrHeader.vue b/src/components/DsfrHeader/DsfrHeader.vue
@@ -60,9 +60,6 @@ export default defineComponent({
   },
 
   computed: {
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
     isWithSlotOperator () {
       return this.$slots.operator?.().length
     },
@@ -146,16 +143,15 @@ export default defineComponent({
               v-if="serviceTitle"
               class="fr-header__service"
             >
-              <component
-                :is="linkComponent"
+              <router-link
                 :to="homeTo"
                 :title="`Accueil - ${serviceTitle}`"
                 v-bind="$attrs"
               >
                 <p class="fr-header__service-title">
                   {{ serviceTitle }}
                 </p>
-              </component>
+              </router-link>
               <p
                 v-if="serviceDescription"
                 class="fr-header__service-tagline"
diff --git a/src/components/DsfrHeader/DsfrHeaderMenuLink.vue b/src/components/DsfrHeader/DsfrHeaderMenuLink.vue
@@ -43,7 +43,7 @@ export default defineComponent({
       if (this.button) {
         return 'button'
       }
-      return this.isExternalLink ? 'a' : ('$nuxt' in this ? 'nuxt-link' : 'router-link')
+      return this.isExternalLink ? 'a' : 'router-link'
     },
     isPathString () {
       return typeof this.path === 'string'
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuLink.vue b/src/components/DsfrNavigation/DsfrNavigationMenuLink.vue
@@ -26,9 +26,6 @@ export default defineComponent({
     isExternal () {
       return typeof this.to === 'string' && this.to.startsWith('http')
     },
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
   },
 })
 </script>
@@ -43,14 +40,13 @@ export default defineComponent({
   >
     {{ text }}
   </a>
-  <component
-    :is="linkComponent"
+  <router-link
     v-else
     class="fr-nav__link"
     data-testid="nav-router-link"
     :to="to"
     @click="$emit('toggle-id', id)"
   >
     {{ text }}
-  </component>
+  </router-link>
 </template>
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuLink.stories.js b/src/components/DsfrSideMenu/DsfrSideMenuLink.stories.js
@@ -13,7 +13,7 @@ export default {
     },
     to: {
       control: 'text',
-      description: 'URL complète pour un lien externe, ou chaîne de caractère ou objet à donner à `to` de `router-link` (ou `nuxt-link`) pour un lien interne',
+      description: 'URL complète pour un lien externe, ou chaîne de caractère ou objet à donner à `to` de `router-link` pour un lien interne',
     },
     active: {
       control: 'boolean',
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuLink.vue b/src/components/DsfrSideMenu/DsfrSideMenuLink.vue
@@ -17,7 +17,7 @@ export default defineComponent({
       return typeof this.to === 'string' && this.to.startsWith('http')
     },
     is () {
-      return this.isExternalLink ? 'a' : ('$nuxt' in this ? 'nuxt-link' : 'router-link')
+      return this.isExternalLink ? 'a' : 'router-link'
     },
     linkProps () {
       return { [this.isExternalLink ? 'href' : 'to']: this.to }
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuList.stories.js b/src/components/DsfrSideMenu/DsfrSideMenuList.stories.js
@@ -45,7 +45,7 @@ export default {
       control: 'object',
       description: `Tableau d'objets, chacun contenant 4 propriétés:
   - \`id\`: identifiant unique d'item de menu
-  - \`to\`: URL complète pour un lien externe, ou chaîne de caractère ou objet à donner à \`to\` de \`router-link\` (ou nuxt-link) pour un lien interne
+  - \`to\`: URL complète pour un lien externe, ou chaîne de caractère ou objet à donner à \`to\` de \`router-link\` pour un lien interne
   - \`text\`: texte du menu
   - \`active\`: indique que l’item de menu correspond à la page courante
       `,
diff --git a/src/components/DsfrSideMenu/DsfrSideMenuList.vue b/src/components/DsfrSideMenu/DsfrSideMenuList.vue
@@ -32,7 +32,7 @@ export default defineComponent({
       return typeof to === 'string' && to.startsWith('http')
     },
     is (to) {
-      return this.isExternalLink(to) ? 'a' : ('$nuxt' in this ? 'nuxt-link' : 'router-link')
+      return this.isExternalLink(to) ? 'a' : 'router-link'
     },
     linkProps (to) {
       return { [this.isExternalLink(to) ? 'href' : 'to']: to }
diff --git a/src/components/DsfrTag/DsfrTag.vue b/src/components/DsfrTag/DsfrTag.vue
@@ -34,15 +34,12 @@ export default defineComponent({
   computed: {
     is () {
       return this.link
-        ? (this.isExternalLink ? 'a' : this.linkComponent)
+        ? (this.isExternalLink ? 'a' : 'router-link')
         : ((this.disabled && this.tagName === 'p') ? 'button' : this.tagName)
     },
     isExternalLink () {
       return typeof this.link === 'string' && this.link.startsWith('http')
     },
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
     linkProps () {
       return { [this.isExternalLink ? 'href' : 'to']: this.link }
     },
diff --git a/src/components/DsfrTile/DsfrTile.vue b/src/components/DsfrTile/DsfrTile.vue
@@ -29,9 +29,6 @@ export default defineComponent({
     isExternalLink () {
       return typeof this.to === 'string' && this.to.startsWith('http')
     },
-    linkComponent () {
-      return '$nuxt' in this ? 'nuxt-link' : 'router-link'
-    },
   },
 })
 </script>
@@ -48,14 +45,13 @@ export default defineComponent({
           class="fr-tile__link"
           :href="to"
         >{{ title }}</a>
-        <component
-          :is="linkComponent"
+        <router-link
           v-if="!isExternalLink"
           class="fr-tile__link so-test"
           :to="to"
         >
           {{ title }}
-        </component>
+        </router-link>
       </h4>
       <p
         v-if="description"
diff --git a/types/components/DsfrCard/DsfrCard.vue.d.ts b/types/components/DsfrCard/DsfrCard.vue.d.ts
@@ -25,9 +25,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     noArrow: BooleanConstructor;
     horizontal: BooleanConstructor;
-}, unknown, unknown, {
-    linkComponent(): 'nuxt-link' | 'router-link';
-}, {
+}, unknown, unknown, {}, {
     goToTargetLink(): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     imgSrc: {
diff --git a/types/components/DsfrConsent/DsfrConsent.vue.d.ts b/types/components/DsfrConsent/DsfrConsent.vue.d.ts
@@ -7,7 +7,6 @@ declare const _default: import('vue').DefineComponent<{
     };
 }, unknown, unknown, {
     isExternalLink(): any;
-    linkComponent(): 'nuxt-link' | 'router-link';
     is(): any;
     linkProps(): LinkProps;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ('accept-all' | 'refuse-all' | 'customize')[], 'accept-all' | 'refuse-all' | 'customize', import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
diff --git a/types/components/DsfrFooter/DsfrFooter.vue.d.ts b/types/components/DsfrFooter/DsfrFooter.vue.d.ts
@@ -65,7 +65,6 @@ declare const _default: import('vue').DefineComponent<{
     mandatoryLinks: FooterLink[];
 }, {
     allLinks(): any[];
-    linkComponent(): 'nuxt-link' | 'router-link';
     isWithSlotLinkLists(): any;
     isWithSlotOperator(): any;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
diff --git a/types/components/DsfrFooter/DsfrFooterLinkList.vue.d.ts b/types/components/DsfrFooter/DsfrFooterLinkList.vue.d.ts
@@ -12,9 +12,7 @@ declare const _default: import('vue').DefineComponent<{
         type: ArrayConstructor;
         default: () => FooterLink[];
     };
-}, unknown, unknown, {
-    linkComponent(): 'nuxt-link' | 'router-link';
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     categoryName: {
         type: StringConstructor;
         default: string;
diff --git a/types/components/DsfrHeader/DsfrHeader.vue.d.ts b/types/components/DsfrHeader/DsfrHeader.vue.d.ts
@@ -44,7 +44,6 @@ declare const _default: import('vue').DefineComponent<{
     searchModalOpened: boolean;
     modalOpened: boolean;
 }, {
-    linkComponent(): 'nuxt-link' | 'router-link';
     isWithSlotOperator(): boolean;
 }, {
     hideModal(): void;
diff --git a/types/components/DsfrHeader/DsfrHeaderMenuLink.vue.d.ts b/types/components/DsfrHeader/DsfrHeaderMenuLink.vue.d.ts
@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import('vue').DefineComponent<{
     path: {
         type: (ObjectConstructor | StringConstructor)[];
         default: any;
@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
 }, unknown, unknown, {
-    is(): "a" | "button" | "nuxt-link" | "router-link";
+    is(): 'a' | 'button' | 'router-link';
     isPathString(): boolean;
     isExternalLink(): any;
     actualHref(): any;
@@ -39,7 +39,7 @@ declare const _default: import("vue").DefineComponent<{
         href: any;
         to?: undefined;
     };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
     path: {
         type: (ObjectConstructor | StringConstructor)[];
         default: any;
@@ -77,5 +77,5 @@ declare const _default: import("vue").DefineComponent<{
     to: string | Record<string, any>;
     iconRight: boolean;
     iconOnly: boolean;
-}>;
-export default _default;
+}>
+export default _default
diff --git a/types/components/DsfrNavigation/DsfrNavigationMenuLink.vue.d.ts b/types/components/DsfrNavigation/DsfrNavigationMenuLink.vue.d.ts
diff --git a/types/components/DsfrSideMenu/DsfrSideMenuLink.vue.d.ts b/types/components/DsfrSideMenu/DsfrSideMenuLink.vue.d.ts
diff --git a/types/components/DsfrSideMenu/DsfrSideMenuList.vue.d.ts b/types/components/DsfrSideMenu/DsfrSideMenuList.vue.d.ts
diff --git a/types/components/DsfrTag/DsfrTag.vue.d.ts b/types/components/DsfrTag/DsfrTag.vue.d.ts
diff --git a/types/components/DsfrTile/DsfrTile.vue.d.ts b/types/components/DsfrTile/DsfrTile.vue.d.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@laruiss/vue-dsfr",`
`3`		`- "version": "1.0.0-beta.35",`
	`3`	`+ "version": "1.0.0-beta.53",`
`4`	`4`	`"files": [`
`5`	`5`	`"dist",`
`6`	`6`	`"types",`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ export default defineComponent({`
`43`	`43`	`if (this.button) {`
`44`	`44`	`return 'button'`
`45`	`45`	`}`
`46`		`- return this.isExternalLink ? 'a' : ('$nuxt' in this ? 'nuxt-link' : 'router-link')`
	`46`	`+ return this.isExternalLink ? 'a' : 'router-link'`
`47`	`47`	`},`
`48`	`48`	`isPathString () {`
`49`	`49`	`return typeof this.path === 'string'`