Tous les types de la bibliothèque VueDsfr

Types en commun

common-types.ts

export type TitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

Types des props des composants

DsfrAccordion

DsfrAccordion.types.ts

import type { TitleTag } from '@/common-types'

export type DsfrAccordionProps = {
  id?: string
  selected?: boolean
  title?: string
  titleTag?: TitleTag
}

DsfrAlert

DsfrAlert.types.ts

import type { TitleTag } from '@/common-types'

export type DsfrAlertType = 'error' | 'success' | 'warning' | 'info'

export type DsfrAlertProps = {
  alert?: boolean
  closed?: boolean
  closeable?: boolean
  id?: string
  title?: string
  description?: string
  small?: boolean
  titleTag?: TitleTag
  type?: DsfrAlertType
  closeButtonLabel?: string
}

DsfrBackToTop

DsfrBackToTop.types.ts

export type DsfrBackToTopProps = {
  label?: string
  position?: 'right' | 'left'
}

DsfrBadge

DsfrBadge.types.ts

export type DsfrBadgeProps = {
  label: string
  type?: 'success' | 'error' | 'new' | 'info' | 'warning' | undefined
  noIcon?: boolean
  small?: boolean
  ellipsis?: boolean
}

DsfrBreadcrumb

DsfrBreadcrumb.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrBreadcrumbProps = {
  breadcrumbId?: string
  links?: {
    to?: RouteLocationRaw
    text: string
  }[]
  navigationLabel?: string
  showBreadcrumbLabel?: string
}

DsfrButton et DsfrButtonGroup

DsfrButton.types.ts

import type { ButtonHTMLAttributes } from 'vue'

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

export type DsfrButtonProps = {
  disabled?: boolean
  label?: string
  secondary?: boolean
  tertiary?: boolean
  iconRight?: boolean
  iconOnly?: boolean
  noOutline?: boolean
  size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined
  icon?: string | InstanceType<typeof VIcon>['$props']
  onClick?: ($event: MouseEvent) => void
}

export type DsfrButtonGroupProps = {
  buttons?: (DsfrButtonProps & ButtonHTMLAttributes)[]
  reverse?: boolean
  equisized?: boolean
  iconRight?: boolean
  align?: 'right' | 'center' | '' | undefined
  inlineLayoutWhen?: 'always' | 'never' | 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | true | undefined
  size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | undefined
}

DsfrCallout

DsfrCallout.types.ts

import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
import type { VIconProps } from '../VIcon/VIcon.vue'

export type DsfrCalloutProps = {
  title?: string
  content: string
  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  button?: DsfrButtonProps
  icon?: string | VIconProps
}

DsfrCard

DsfrCard.types.ts

import type { RouteLocationRaw } from 'vue-router'

import type { DsfrBadgeProps } from '../DsfrBadge/DsfrBadge.types'
import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'
import type VIcon from '../VIcon/VIcon.vue'

export type DsfrCardDetailProps = {
  icon?: string | InstanceType<typeof VIcon>['$props']
}

export type DsfrCardProps = {
  imgSrc?: string
  link?: string | RouteLocationRaw
  title: string
  description: string
  size?: 'md' | 'medium' | 'large' | 'lg' | 'sm' | 'small' | undefined
  detail?: string
  detailIcon?: DsfrCardDetailProps['icon']
  endDetail?: string
  endDetailIcon?: DsfrCardDetailProps['icon']
  altImg?: string
  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  badges?: DsfrBadgeProps[]
  buttons?: DsfrButtonProps[]
  imgRatio?: 'md' | 'medium' | 'lg' | 'large' | 'sm' | 'small'
  linksGroup?: {
    label: string
    to?: RouteLocationRaw
    /** @deprecated utiliser href à la place, link sera supprimé dans une version future */
    link?: string
    href?: string
  }[]
  noArrow?: boolean
  horizontal?: boolean
  download?: boolean
  enlarge?: boolean
}

DsfrCheckbox et DsfrCheckboxSet

DsfrCheckbox.types.ts

import type { InputHTMLAttributes } from 'vue'

export type DsfrCheckboxProps = {
  id?: string
  name: string
  required?: boolean
  value: unknown
  checked?: boolean
  modelValue: Array<unknown>
  small?: boolean
  inline?: boolean
  label?: string
  errorMessage?: string
  validMessage?: string
  hint?: string
}

export type DsfrCheckboxSetProps = {
  titleId?: string
  disabled?: boolean
  inline?: boolean
  required?: boolean
  small?: boolean
  errorMessage?: string
  validMessage?: string
  legend?: string
  options?: (DsfrCheckboxProps & InputHTMLAttributes)[]
  modelValue?: Array<unknown>
  ariaInvalid?: boolean
}

DsfrConsent

DsfrConsent.types.ts

export type DsfrConsentProps = { url?: string }

DsfrErrorPage

DsfrErrorPage.types.ts

import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.vue'

export type DsfrErrorPageProps = {
  title?: string
  subtitle?: string
  description?: string
  help?: string
  buttons?: DsfrButtonProps[]
}

DsfrFieldset

DsfrFieldset.types.ts

export type DsfrFieldsetProps = {
  legend?: string
  legendClass?: string
  legendId?: string
  hint?: string
  hintClass?: string
}

DsfrFileDownload

DsfrFileDownload.types.ts

export type DsfrFileDownloadProps = {
  title?: string
  format?: string
  size?: string
  href?: string
  download?: string
}

export type DsfrFileDownloadListProps = {
  files: DsfrFileDownloadProps[]
  title: string
}

DsfrFileUpload

DsfrFileUpload.types.ts

export type DsfrFileUploadProps = {
  id?: string
  label?: string
  accept?: string | string[]
  hint?: string
  error?: string
  validMessage?: string
  disabled?: boolean
  modelValue?: string
}

DsfrFollow et DsfrSocialNetwork et DsfrNewsLetter

DsfrFollow.types.ts

export type DsfrSocialNetworkName = 'facebook' | 'twitter-x' | 'instagram' | 'linkedin' | 'youtube'
export type DsfrSocialNetwork = {
  type: DsfrSocialNetworkName
  name: string
  href: string
}

export type DsfrSocialNetworksProps = {
  networks: DsfrSocialNetwork[]
  titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
}

export type DsfrNewsLetterProps = {
  title?: string
  description?: string
  email?: string
  error?: string
  labelEmail?: string
  placeholder?: string
  hintText?: string
  inputTitle?: string
  buttonText?: string
  buttonTitle?: string
  buttonAction?: ($event: MouseEvent) => void
  onlyCallout?: boolean
}

export type DsfrFollowProps = {
  newsletterData: DsfrNewsLetterProps
  networks: DsfrSocialNetwork[]
}

DsfrFooter et DsfrFooterPartners et DsfrFooterLinkList

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
}

DsfrFranceConnect

DsfrFranceConnect.types.ts

export type DsfrFranceConnectProps = {
  secure?: boolean
  url?: string
}

DsfrHeader et DsfrHeaderMenuLink

DsfrHeader.types.ts

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

import type { DsfrLanguageSelectorProps } from '../DsfrLanguageSelector/DsfrLanguageSelector.types'
import type VIcon from '../VIcon/VIcon.vue'

export type DsfrHeaderMenuLinkProps = {
  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
  /**
   * @deprecated Use the prop `to` instead
   */
  href?: string
  /**
   * @deprecated Use the prop `to` instead
   */
  path?: string
}

export type DsfrHeaderProps = {
  searchbarId?: string
  serviceTitle?: string
  serviceDescription?: string
  homeTo?: string
  logoText?: string | string[]
  modelValue?: string
  operatorImgAlt?: string
  operatorImgSrc?: string
  operatorImgStyle?: StyleValue
  placeholder?: string
  quickLinks?: (DsfrHeaderMenuLinkProps & HTMLAttributes)[]
  languageSelector?: DsfrLanguageSelectorProps
  searchLabel?: string
  quickLinksAriaLabel?: string
  showSearch?: boolean
  showSearchLabel?: string
  showBeta?: boolean
  menuLabel?: string
  menuModalLabel?: string
  closeMenuModalLabel?: string
  homeLabel?: string
}

DsfrHighlight

DsfrHighlight.types.ts

export type DsfrHighlightProps = {
  text?: string
  small?: boolean
  large?: boolean
  color?: string // TODO: faire une liste des couleurs permises
}

DsfrInput et DsfrInputGroup

DsfrInput.types.ts

export type DsfrInputProps = {
  id?: string
  descriptionId?: string
  hint?: string
  isInvalid?: boolean
  isValid?: boolean
  isTextarea?: boolean
  isWithWrapper?: boolean
  labelVisible?: boolean
  label?: string
  labelClass?: string
  modelValue?: string | number | null
  wrapperClass?: string
}

export type DsfrInputGroupProps = {
  descriptionId?: string
  hint?: string
  labelVisible?: boolean
  label?: string
  labelClass?: string
  modelValue?: string | number | null
  placeholder?: string
  errorMessage?: string | string[]
  validMessage?: string | string[]
  wrapperClass?: string
}

DsfrLanguageSelector

DsfrLanguageSelector.types.ts

export type DsfrLanguageSelectorElement = {
  codeIso: string
  label: string
}

export type DsfrLanguageSelectorProps = {
  id?: string
  languages: DsfrLanguageSelectorElement[]
  currentLanguage?: string
}

DsfrModal

DsfrModal.types.ts

import type { DsfrButtonProps } from '../DsfrButton/DsfrButton.types'

export type DsfrModalProps = {
  modalId?: string
  opened?: boolean
  actions?: DsfrButtonProps[]
  isAlert?: boolean
  origin?: { focus: () => void }
  title: string
  icon?: string
  size?: 'sm' | 'md' | 'lg' | 'xl'
  closeButtonLabel?: string
  closeButtonTitle?: string
}

DsfrButton.types.ts

import type { ButtonHTMLAttributes } from 'vue'

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

export type DsfrButtonProps = {
  disabled?: boolean
  label?: string
  secondary?: boolean
  tertiary?: boolean
  iconRight?: boolean
  iconOnly?: boolean
  noOutline?: boolean
  size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | undefined
  icon?: string | InstanceType<typeof VIcon>['$props']
  onClick?: ($event: MouseEvent) => void
}

export type DsfrButtonGroupProps = {
  buttons?: (DsfrButtonProps & ButtonHTMLAttributes)[]
  reverse?: boolean
  equisized?: boolean
  iconRight?: boolean
  align?: 'right' | 'center' | '' | undefined
  inlineLayoutWhen?: 'always' | 'never' | 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | '' | true | undefined
  size?: 'sm' | 'small' | 'lg' | 'large' | 'md' | 'medium' | undefined
}

DsfrNavigation et tous les enfants

DsfrNavigation.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrNavigationMenuLinkProps = {
  id?: string
  to?: string | RouteLocationRaw
  text?: string
  icon?: string
  onClick?: ($event: MouseEvent) => void
}

export type DsfrNavigationMenuItemProps = {
  id?: string
  active?: boolean
}

export type DsfrNavigationMenuProps = {
  id?: string
  title: string
  links?: DsfrNavigationMenuLinkProps[]
  expandedId?: string
  active?: boolean
}

export type DsfrNavigationItemProps = {
  id?: string
  active?: boolean
}

export type DsfrNavigationMegaMenuCategoryProps = {
  title: string
  active?: boolean
  links: DsfrNavigationMenuLinkProps[]
}

export type DsfrNavigationMegaMenuProps = {
  id?: string
  title: string
  description?: string
  link?: { to: RouteLocationRaw, text: string }
  menus?: DsfrNavigationMegaMenuCategoryProps[]
  expandedId?: string
  active?: boolean
}

export type DsfrNavigationMenuLinks = (DsfrNavigationMenuLinkProps | DsfrNavigationMegaMenuProps | DsfrNavigationMenuProps)[]

export type DsfrNavigationProps = {
  id?: string
  label?: string
  navItems: (
    DsfrNavigationMenuLinkProps
    | DsfrNavigationMenuProps
    | DsfrNavigationMegaMenuProps
  )[]
}

DsfrNotice

DsfrNotice.types.ts

export type DsfrNoticeProps = {
  title?: string
  desc?: string
  closeable?: boolean
  type?: 'info' | 'warning' | 'alert' | 'weather-orange' | 'weather-red' | 'weather-purple' | 'witness' | 'kidnapping' | 'attack' | 'cyberattack'
}

DsfrPagination

DsfrPagination.types.ts

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

export type DsfrPaginationProps = {
  pages: Page[]
  currentPage?: number
  firstPageTitle?: string
  lastPageTitle?: string
  nextPageTitle?: string
  prevPageTitle?: string
  truncLimit?: number
}

DsfrQuote

DsfrQuote.types.ts

export type DsfrQuoteProps = {
  quote?: string
  author?: string
  details: { label: string, url: string }[]
  source: string
  sourceUrl: string
  quoteImage: string
}

DsfrRadioButton et DsfrRadioButtonGroup

DsfrRadioButton.types.ts

export type DsfrRadioButtonProps = {
  id?: string
  name?: string
  modelValue: string | number | boolean | undefined
  disabled?: boolean
  small?: boolean
  inline?: boolean
  value: string | number | boolean
  label?: string
  hint?: string
  img?: string
  imgTitle?: string
  svgPath?: string
  svgAttrs?: Record<string, unknown>
}

export type DsfrRadioButtonOptions = (Omit<DsfrRadioButtonProps, 'modelValue'>)[]

export type DsfrRadioButtonSetProps = {
  titleId?: string
  disabled?: boolean
  required?: boolean
  small?: boolean
  inline?: boolean
  name?: string
  errorMessage?: string
  validMessage?: string
  legend?: string
  hint?: string
  modelValue?: string | number | boolean | undefined
  options?: Omit<DsfrRadioButtonProps, 'modelValue'>[]
  ariaInvalid?: boolean | 'grammar' | 'spelling'
}

DsfrRange

DsfrRange.types.ts

export type DsfrRangeProps = {
  id?: string
  min?: number
  max?: number
  modelValue?: number
  lowerValue?: number
  label: string
  hint?: string
  message?: string
  prefix?: string
  suffix?: string
  small?: boolean
  hideIndicators?: boolean
  step?: number
  disabled?: boolean
}

DsfrSearchBar

DsfrSearchBar.types.ts

export type DsfrSearchBarProps = {
  id?: string
  label?: string
  labelVisible?: boolean
  large?: boolean
  buttonText?: string
  modelValue?: string
  placeholder?: string
  disabled?: boolean
}

DsfrSegmented et DsfrSegmentedSet

DsfrSegmented.types.ts

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

export type DsfrSegmentedProps = {
  id?: string
  name?: string
  modelValue?: string | number
  value: string | number
  label: string
  disabled?: boolean
  icon?: string | InstanceType<typeof VIcon>['$props']
}

export type DsfrSegmentedSetProps = {
  titleId?: string
  disabled?: boolean
  small?: boolean
  inline?: boolean
  name?: string
  hint?: string
  legend?: string
  modelValue: string | number
  options?: DsfrSegmentedProps[]
}

DsfrSelect

DsfrSelect.types.ts

export type DsfrSelectOption = string | number | null | undefined
export type DsfrSelectProps = {
  required?: boolean
  disabled?: boolean
  selectId?: string
  name?: string
  description?: string
  modelValue?: DsfrSelectOption
  label?: string
  options?: (DsfrSelectOption | { value: DsfrSelectOption, text: string, disabled?: boolean })[]
  successMessage?: string
  errorMessage?: string
  defaultUnselectedText?: string
}

DsfrShare

DsfrShare.types.ts

export type DsfrShareProps = {
  title?: string
  copyLabel?: string
  mail?: { label: string, to: string }
  networks?: { name: string, label: string, url: string }[]
}

DsfrSideMenu et tous ses enfants

DsfrSideMenu.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrSideMenuListItemProps = { active?: boolean }

export type DsfrSideMenuProps = {
  buttonLabel?: string
  id?: string
  sideMenuListId?: string
  collapseValue?: string
  menuItems?: DsfrSideMenuListItemProps[]
  headingTitle?: string
}

export type DsfrSideMenuButtonProps = {
  active?: boolean
  expanded?: boolean
  controlId: string
}

export type DsfrSideMenuListProps = {
  id: string
  collapsable?: boolean
  expanded?: boolean
  menuItems?: (
    DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>
    & { menuItems?: (DsfrSideMenuListItemProps & Partial<DsfrSideMenuListProps & { to?: RouteLocationRaw, text?: string }>)[] }
  )[]
}

DsfrSkipLinks

DsfrSkipLinks.types.ts

export type DsfrSkipLinksProps = {
  links: { id: string, text: string }[]
}

DsfrStepper

DsfrStepper.types.ts

export type DsfrStepperProps = {
  steps: string[]
  currentStep: number
}

DsfrTable et tous ses enfants

DsfrTable.types.ts

import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'vue'

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

export type DsfrTableRowProps = {
  rowData?: (string | Record<string, any>)[]
  rowAttrs?: HTMLAttributes
}

export type DsfrTableHeaderProps = {
  header?: string
  headerAttrs?: ThHTMLAttributes & { onClick?: (e: MouseEvent) => void }
  icon?: string | InstanceType<typeof VIcon>['$props']
}

export type DsfrTableHeadersProps = (string | (DsfrTableHeaderProps & { text?: string }))[]

export type DsfrTableCellProps = {
  field: string | Record<string, unknown>
  cellAttrs?: TdHTMLAttributes
  component?: string
  text?: string
  title?: string
  class?: string
  onClick?: Promise<void>
}

export type DsfrTableProps = {
  title: string
  headers?: DsfrTableHeadersProps
  rows?: (DsfrTableRowProps | (DsfrTableCellProps | { component: string, [k: string]: unknown } | string)[])[]

  rowKey?: ((row: (string | Record<string, any>)[] | undefined) => string | number | symbol | undefined) | string
  noCaption?: boolean
  pagination?: boolean
  currentPage?: number
  resultsDisplayed?: number
}

DsfrTabs et tous ses enfants

DsfrTabs.types.ts

export type DsfrTabItemProps = {
  panelId: string
  tabId: string
  icon?: string
}

export type DsfrTabContentProps = {
  panelId: string
  tabId: string
}

export type DsfrTabsProps = {
  modelValue: number
  tabListName: string
  tabTitles: (Partial<DsfrTabItemProps> & { title: string })[]
  tabContents?: string[]
}

DsfrTags et DsfrTag

DsfrTags.types.ts

export type DsfrTagProps = {
  label?: string
  link?: string
  tagName?: string
  icon?: string
  disabled?: boolean
  small?: boolean
  iconOnly?: boolean
}

export type DsfrTagsProps = {
  tags: DsfrTagProps[]
}

DsfrTiles et DsfrTile

DsfrTiles.types.ts

import type { RouteLocationRaw } from 'vue-router'

export type DsfrTileProps = {
  title?: string
  imgSrc?: string
  svgPath?: string
  svgAttrs?: Record<string, unknown>
  description?: string
  details?: string
  disabled?: boolean
  horizontal?: boolean
  vertical?: 'md' | 'lg'
  to?: RouteLocationRaw
  titleTag?: string
  download?: boolean
  small?: boolean
  icon?: boolean
  noBorder?: boolean
  shadow?: boolean
  noBackground?: boolean
  grey?: boolean
  enlarge?: boolean
}

export type DsfrTilesProps = {
  tiles?: (DsfrTileProps & { containerClass?: string })[]
  horizontal?: boolean
}

DsfrToggleSwitch

DsfrToggleSwitch.types.ts

export type DsfrToggleSwitchProps = {
  modelValue?: boolean
  inputId?: string
  hint?: string
  label?: string
  disabled?: boolean
  labelLeft?: boolean
  borderBottom?: boolean
  activeText?: string
  inactiveText?: string
  noText?: boolean
}

DsfrTooltip

DsfrTooltip.types.ts

export type DsfrTooltipProps = {
  content: string
  onHover?: boolean
  id?: string
}

DsfrTranscription

DsfrTranscription.types.ts

export type DsfrTranscriptionProps = {
  id?: string
  title?: string
  content?: string
}