Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 🐛 réduit les mismatch, notamment des id #1019

Merged
merged 1 commit into from
Jan 14, 2025
Merged

fix: 🐛 réduit les mismatch, notamment des id #1019

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/DsfrAccordion/DsfrAccordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Autres props :

| Nom | Type | Défaut | Obligatoire |
| ----------------------- | ----------------------------------------- | ---------------- | -------------|
| `title` | *`string`* | `getRandomId('accordion')` | ✅ |
| `title` | *`string`* | `useRandomId('accordion')` | ✅ |
| `titleTag` | [*`TitleTag`*](/docs/types.md#title-tag) | `'h3'` | |
| `id` | *`string`* | *random string* | |

Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrAccordion/DsfrAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { inject, onMounted, ref, toRef, watch } from 'vue'

import { useCollapsable } from '../../composables'
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import { registerAccordionKey } from './injection-key'
import type { DsfrAccordionProps } from './DsfrAccordion.types'
Expand All @@ -12,7 +12,7 @@ export type { DsfrAccordionProps }
const props = withDefaults(
defineProps<DsfrAccordionProps>(),
{
id: () => getRandomId('accordion'),
id: () => useRandomId('accordion'),
title: 'Sans intitulé',
titleTag: 'h3',
},
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrAlert/DsfrAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { computed } from 'vue'

import type { DsfrAlertProps } from './DsfrAlert.types.js'

import { getRandomId } from '@/utils/random-utils'
import { useRandomId } from '@/utils/random-utils'

export type { DsfrAlertProps, DsfrAlertType } from './DsfrAlert.types.js'

const props = withDefaults(defineProps<DsfrAlertProps>(), {
id: () => getRandomId('basic', 'alert'),
id: () => useRandomId('basic', 'alert'),
title: '',
titleTag: 'h3',
type: 'info',
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrBreadcrumb/DsfrBreadcrumb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Dans l’ordre, il se compose des éléments suivants :

| Nom | Type | Défaut | Description |
|---------------------|--------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| breadcrumbId | String | () => getRandomId('breadcrumb') | Identifiant unique pour le composant breadcrumb, généré automatiquement pour assurer l'accessibilité. |
| breadcrumbId | String | () => useRandomId('breadcrumb') | Identifiant unique pour le composant breadcrumb, généré automatiquement pour assurer l'accessibilité. |
| links | Array | () => [{ text: '' }] | Un tableau d'objets représentant les liens dans le fil d'Ariane. Chaque objet peut avoir une propriété 'text' et, optionnellement, 'to' pour les routes. |
| navigationLabel | String | `'vous êtes ici :'` | Label affiché sur la balise `nav` du fil d’Ariane. |
| showBreadcrumbLabel | String | `'Voir le fil d’Ariane'` | Label du bouton d'affichage du fil d’Ariane. |
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
import { ref, watch } from 'vue'

import { useCollapsable } from '../../composables'
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrBreadcrumbProps } from './DsfrBreadcrumb.types'

export type { DsfrBreadcrumbProps }

withDefaults(defineProps<DsfrBreadcrumbProps>(), {
breadcrumbId: () => getRandomId('breadcrumb'),
breadcrumbId: () => useRandomId('breadcrumb'),
links: () => [{ text: '' }],
navigationLabel: 'vous êtes ici :',
showBreadcrumbLabel: 'Voir le fil d’Ariane',
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrCheckbox/DsfrCheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue'

import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrCheckboxProps } from './DsfrCheckbox.types'

Expand All @@ -12,7 +12,7 @@ defineOptions({
})

const props = withDefaults(defineProps<DsfrCheckboxProps>(), {
id: () => getRandomId('basic', 'checkbox'),
id: () => useRandomId('basic', 'checkbox'),
hint: '',
errorMessage: '',
validMessage: '',
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrCheckbox/DsfrCheckboxSet.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { computed } from 'vue'

import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import DsfrCheckbox from './DsfrCheckbox.vue'
import type { DsfrCheckboxSetProps } from './DsfrCheckbox.types'
Expand All @@ -11,7 +11,7 @@ export type { DsfrCheckboxSetProps }

<script lang="ts" setup>
const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
titleId: () => getRandomId('checkbox', 'set'),
titleId: () => useRandomId('checkbox', 'set'),
errorMessage: '',
validMessage: '',
legend: '',
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrDataTable/DsfrDataTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { computed } from 'vue'
import DsfrPagination from '../DsfrPagination/DsfrPagination.vue'
import VIcon from '../VIcon/VIcon.vue'

import { getRandomId } from '@/utils/random-utils'
import { useRandomId } from '@/utils/random-utils'

export type Page = { href?: string, label: string, title: string }

Expand Down Expand Up @@ -39,7 +39,7 @@ export type DsfrDataTableProps = {
}

const props = withDefaults(defineProps<DsfrDataTableProps>(), {
id: () => getRandomId('table'),
id: () => useRandomId('table'),
topActionsRow: () => [],
bottomActionsRow: () => [],
currentPage: 0,
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrFileUpload/DsfrFileUpload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Bienvenue dans la documentation du composant `DsfrFileUpload`. Ce composant est

| Nom | Type | Défaut | Obligatoire | Description |
|----------------|-------------|-------------------------|---------------|----------------------------------------------------------------|
| `id` | `Function` | `() => getRandomId(...)`| | Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré. |
| `id` | `Function` | `() => useRandomId(...)`| | Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré. |
| `label` | `string` | `'Ajouter un fichier'` | | Libellé pour le bouton de téléchargement de fichier. |
| `accept` | `string \| string[]` | `undefined` | | Types de fichiers acceptés, spécifiés sous forme de chaîne de caractères (comme l’attribut `accept` de HTML) ou d'un tableau de chaînes de caractères (qui sera transformé en chaîne). |
| `hint` | `string` | `''` | | Texte d'indice pour guider l'utilisateur. |
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrFileUpload/DsfrFileUpload.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue'

import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrFileUploadProps } from './DsfrFileUpload.types'

Expand All @@ -12,7 +12,7 @@ defineOptions({
})

const props = withDefaults(defineProps<DsfrFileUploadProps>(), {
id: () => getRandomId('file-upload'),
id: () => useRandomId('file-upload'),
label: 'Ajouter un fichier',
accept: undefined,
hint: '',
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrHeader/DsfrHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ provide(registerNavigationLinkKey, () => {
class="fr-header__search fr-modal"
>
<DsfrSearchBar
:searchbar-id="searchbarId"
:id="searchbarId"
:label="searchLabel"
:model-value="modelValue"
:placeholder="placeholder"
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrInput/DsfrInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Le composant `DsfrInput`, outil essentiel dans l'arsenal de tout développeur Vu

| Nom | Type | Défaut | Obligatoire | Description |
|-----------------|---------------|-------------------------|---------------|-------------------------------------------------------------------------------------------------------------|
| `id` | `Function` | `() => getRandomId(...)`| | Identifiant unique pour l'input. Si non spécifié, un ID aléatoire est généré. |
| `id` | `Function` | `() => useRandomId(...)`| | Identifiant unique pour l'input. Si non spécifié, un ID aléatoire est généré. |
| `descriptionId` | `string` | `undefined` | | ID pour la description associée à l'input. Utile pour l'accessibilité. |
| `hint` | `string` | `''` | | Texte d'indice pour guider l'utilisateur. |
| `label` | `string` | `''` | | Le libellé de l'input. |
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrInput/DsfrInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { computed, ref, useAttrs } from 'vue'
import type { Ref } from 'vue'

import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrInputProps } from './DsfrInput.types'

Expand All @@ -13,7 +13,7 @@ defineOptions({
})

const props = withDefaults(defineProps<DsfrInputProps>(), {
id: () => getRandomId('basic', 'input'),
id: () => useRandomId('basic', 'input'),
descriptionId: undefined,
hint: '',
label: '',
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrInput/DsfrInputGroup.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Ce composant est très utile si vous souhaitez afficher un message d’erreur ou

| Nom | Type | Défaut | Obligatoire | Description |
|-----------------|-------------|-------------------------|---------------|---------------------------------------------------------------|
| `descriptionId` | `Function` | `() => getRandomId(...)`| | ID unique pour la description du groupe, généré automatiquement si non spécifié. |
| `descriptionId` | `Function` | `() => useRandomId(...)`| | ID unique pour la description du groupe, généré automatiquement si non spécifié. |
| `hint` | `string` | `''` | | Texte d'indice pour guider l'utilisateur dans le groupe de champs. |
| `label` | `string` | `''` | | Le libellé associé au groupe de champs. |
| `labelClass` | `string` | `''` | | Classe CSS personnalisée pour le style du libellé. |
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrInput/DsfrInputGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import DsfrInput from './DsfrInput.vue'
import type { DsfrInputGroupProps } from './DsfrInput.types'
Expand All @@ -11,7 +11,7 @@ defineOptions({
})

withDefaults(defineProps<DsfrInputGroupProps>(), {
descriptionId: () => getRandomId('input', 'group'),
descriptionId: () => useRandomId('input', 'group'),
hint: '',
label: '',
labelClass: '',
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrLanguageSelector/DsfrLanguageSelector.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Ce composant est utilisé en interne dans [DsfrHeader](/composants/DsfrHeader) (

| Propriété | Type | Description | Valeur par défaut |
|--------------------|-------------------------------|---------------------------------------------------------------|---------------------------|
| `id` | `string` | Identifiant unique pour les éléments de contrôle d'accessibilité. | `getRandomId('language-selector')` |
| `id` | `string` | Identifiant unique pour les éléments de contrôle d'accessibilité. | `useRandomId('language-selector')` |
| `languages` | [`DsfrLanguageSelectorElement[]`](/types#dsfrlanguageselector) | Liste des langues disponibles. Chaque langue est représentée par un objet contenant un `codeIso` et un `label`. | `[]` |
| `currentLanguage` | `string` | Code ISO de la langue actuellement sélectionnée. | `'fr'` |

Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
import { computed, ref, watch } from 'vue'

import { useCollapsable } from '../../composables'
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps } from './DsfrLanguageSelector.types'

export type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps }

const props = withDefaults(defineProps<DsfrLanguageSelectorProps>(), {
id: () => getRandomId('language-selector'),
id: () => useRandomId('language-selector'),
languages: () => [],
currentLanguage: 'fr',
})
Expand Down
2 changes: 1 addition & 1 deletion src/components/DsfrModal/DsfrModal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Elle se compose des éléments suivants :
| Propriété | Type | Description | Valeur par défaut | Obligatoire |
|----------------------|--------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|--------------|
| `title` | `string` | Titre de la modale. | | ✅ |
| `modalId` | `string` | Identifiant unique pour la modale. | `getRandomId('modal', 'dialog')` | |
| `modalId` | `string` | Identifiant unique pour la modale. | `useRandomId('modal', 'dialog')` | |
| `opened` | `boolean` | Indique si la modale est ouverte. | `false` | |
| `actions` | `DsfrButtonProps[]` | Liste des boutons d'action pour le pied de page de la modale. | `[]` | |
| `isAlert` | `boolean` | Spécifie si la modale est une alerte (rôle `"alertdialog"` si `true`) ou non (le rôle sera alors `"dialog"`). | `false` | |
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrModal/DsfrModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import VIcon from '../VIcon/VIcon.vue'

import type { DsfrModalProps } from './DsfrModal.types'

import { getRandomId } from '@/utils/random-utils'
import { useRandomId } from '@/utils/random-utils'

export type { DsfrModalProps }

const props = withDefaults(defineProps<DsfrModalProps>(), {
modalId: () => getRandomId('modal', 'dialog'),
modalId: () => useRandomId('modal', 'dialog'),
actions: () => [],
origin: () => ({ focus () {} }),
icon: undefined,
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrMultiselect/DsfrMultiselect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import DsfrInput from '../DsfrInput/DsfrInput.vue'

import type { DsfrMultiSelectProps, DsfrMultiSelectSlots } from './DsfrMultiselect.types'

import { getRandomId } from '@/utils/random-utils'
import { useRandomId } from '@/utils/random-utils'

const props = withDefaults(
defineProps<DsfrMultiSelectProps<T>>(),
Expand All @@ -18,7 +18,7 @@ const props = withDefaults(
labelClass: '',
hint: '',
legend: '',
id: () => getRandomId('multiselect'),
id: () => useRandomId('multiselect'),
buttonLabel: '',
selectAll: false,
errorMessage: '',
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrNavigation/DsfrNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'

import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import DsfrNavigationItem from './DsfrNavigationItem.vue'
import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
Expand All @@ -18,7 +18,7 @@ import type {
export type { DsfrNavigationMenuLinks, DsfrNavigationProps }

const props = withDefaults(defineProps<DsfrNavigationProps>(), {
id: () => getRandomId('nav'),
id: () => useRandomId('nav'),
label: 'Menu principal',
navItems: () => [],
})
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrNavigation/DsfrNavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script lang="ts" setup>
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrNavigationItemProps } from './DsfrNavigation.types'

export type { DsfrNavigationItemProps }

withDefaults(defineProps<DsfrNavigationItemProps>(), {
id: () => getRandomId('nav', 'item'),
id: () => useRandomId('nav', 'item'),
})
</script>

Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
import { computed, onMounted, watch } from 'vue'

import { useCollapsable } from '../../composables'
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import DsfrNavigationMegaMenuCategory from './DsfrNavigationMegaMenuCategory.vue'
import type { DsfrNavigationMegaMenuProps } from './DsfrNavigation.types'

export type { DsfrNavigationMegaMenuProps }

const props = withDefaults(defineProps<DsfrNavigationMegaMenuProps>(), {
id: () => getRandomId('mega-menu'),
id: () => useRandomId('mega-menu'),
description: '',
link: () => ({ to: '#', text: 'Voir toute la rubrique' }),
menus: () => [],
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrNavigation/DsfrNavigationMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { computed, onMounted, watch } from 'vue'

import { useCollapsable } from '../../composables'
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import DsfrNavigationMenuItem from './DsfrNavigationMenuItem.vue'
import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
Expand All @@ -11,7 +11,7 @@ import type { DsfrNavigationMenuProps } from './DsfrNavigation.types'
export type { DsfrNavigationMenuProps }

const props = withDefaults(defineProps<DsfrNavigationMenuProps>(), {
id: () => getRandomId('menu'),
id: () => useRandomId('menu'),
links: () => [],
expandedId: '',
})
Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrNavigation/DsfrNavigationMenuItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<script lang="ts" setup>
import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'

import type { DsfrNavigationMenuItemProps } from './DsfrNavigation.types'

export type { DsfrNavigationMenuItemProps }

withDefaults(defineProps<DsfrNavigationMenuItemProps>(), {
id: () => getRandomId('menu', 'item'),
id: () => useRandomId('menu', 'item'),
})
</script>

Expand Down
4 changes: 2 additions & 2 deletions src/components/DsfrNavigation/DsfrNavigationMenuLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed, hasInjectionContext, inject } from 'vue'

import { getRandomId } from '../../utils/random-utils'
import { useRandomId } from '../../utils/random-utils'
import { registerNavigationLinkKey } from '../DsfrHeader/injection-key'
import VIcon from '../VIcon/VIcon.vue'

Expand All @@ -10,7 +10,7 @@ import type { DsfrNavigationMenuLinkProps } from './DsfrNavigation.types'
export type { DsfrNavigationMenuLinkProps }

const props = withDefaults(defineProps<DsfrNavigationMenuLinkProps>(), {
id: () => getRandomId('menu-link'),
id: () => useRandomId('menu-link'),
icon: undefined,
onClick: () => undefined,
text: '',
Expand Down
Loading
Loading