DsfrFooterLinkList - Documentation Vue.js

🌟 Introduction

Le composant DsfrFooterLinkList est un élément de liste personnalisable pour les pieds de page. Il permet d'afficher une liste de liens catégorisés, adaptés à des besoins variés, notamment pour les sites web ayant besoin d'un pied de page structuré et accessible.

📐 Structure

Le composant se compose de deux parties principales :

1. Titre de la Catégorie : Affiché en haut de la liste des liens.
2. Liste des Liens : Une liste de liens (DsfrFooterLink) qui peuvent être internes (avec RouterLink) ou externes (avec une balise <a>).

🛠️ Props

Nom de Prop	Type	Par défaut	Description
categoryName	string	'Nom de la catégorie'	Le nom de la catégorie de liens affichée.
links	Array<DsfrFooterLinkProps>	[]	Un tableau d'objets représentant les liens à afficher. Chaque objet peut avoir les propriétés de DsfrFooterLinkProps.

📡 Événements

Pas d'événements émis directement par ce composant.

🧩 Slots

Aucun slot n'est disponible pour ce composant. Tout est basé sur les props fournies pour générer la vue.

📝 Exemples

Ce composant est utilisé en interne dans DsfrFooter, il n’y a pas de raison de l’utiliser en dehors.

⚙️ Code source du composant

DsfrFooterLinkList.vue

<script lang="ts" setup>
import type { DsfrFooterLinkListProps } from './DsfrFooter.types'

export type {
  DsfrFooterLinkListProps,
}

withDefaults(defineProps<DsfrFooterLinkListProps>(), {
  categoryName: 'Nom de la catégorie',
  links: () => [],
})
</script>

<template>
  <div>
    <h3 class="fr-footer__top-cat">
      {{ categoryName }}
    </h3>
    <ul class="fr-footer__top-list">
      <li
        v-for="(link, idx) in links"
        :key="idx"
      >
        <a
          v-if="typeof link.to === 'string' && link.to.startsWith('http')"
          class="fr-footer__top-link"
          target="_blank"
          rel="noopener noreferrer"
          :href="link.to"
        >{{ link.label }}</a>
        <RouterLink
          v-if="typeof link.to === 'object' || (typeof link.to === 'string' && !link.to.startsWith('http'))"
          class="fr-footer__top-link"
          :to="link.to"
        >
          {{ link.label }}
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

DsfrFooter.types.ts

import type { HTMLAttributes, StyleValue } from 'vue'
import type { RouteLocationRaw } from 'vue-router'

import type VIcon from '../VIcon/VIcon.vue'

export type DsfrFooterPartner = {
  href: string
  logo: string
  name: string
}

export type DsfrFooterPartnersProps = {
  mainPartner?: DsfrFooterPartner
  subPartners?: DsfrFooterPartner[]
  title?: string
}

export type DsfrFooterLinkProps = {
  button?: boolean
  icon?: string | InstanceType<typeof VIcon>['$props']
  iconAttrs?: InstanceType<typeof VIcon>['$props'] & HTMLAttributes
  iconRight?: boolean
  label?: string
  target?: string
  onClick?: ($event: MouseEvent) => void
  to?: RouteLocationRaw
  href?: string
  title?: string
}

export type DsfrFooterLinkListProps = {
  categoryName: string
  links: DsfrFooterLinkProps[]
}

export type DsfrFooterProps = {
  a11yCompliance?: string
  a11yComplianceLink?: RouteLocationRaw
  legalLink?: string
  homeLink?: RouteLocationRaw
  homeTitle?: string
  partners?: DsfrFooterPartnersProps
  personalDataLink?: string
  cookiesLink?: string
  logoText?: string | string[]
  descText?: string
  beforeMandatoryLinks?: DsfrFooterLinkProps[]
  afterMandatoryLinks?: DsfrFooterLinkProps[]
  mandatoryLinks?: { label: string, to: RouteLocationRaw | undefined, title?: string }[]
  ecosystemLinks?: { label: string, href: string, title: string, [key: string]: string }[]
  operatorLinkText?: string
  operatorTo?: RouteLocationRaw | undefined
  operatorImgStyle?: StyleValue
  operatorImgSrc?: string
  operatorImgAlt?: string
  licenceTo?: string
  licenceLinkProps?: ({ href: string } | { to: RouteLocationRaw | undefined }) & Record<string, string>
  licenceText?: string
  licenceName?: string
}