Merge pull request #775 from dnum-mi/develop

Develop

.vitepress/config.ts

@@ -8,6 +8,7 @@ import { hmrFix } from './plugins/hmrFix.js'
 const minimalToc = [
  {
  text: 'Guide',
+ link: '/guide/',
  items: []
  },
  {
@@ -117,6 +118,10 @@ const composants = [
  text: 'DsfrConsent',
  link: '/composants/DsfrConsent.md',
  },
+ {
+ text: 'DsfrErrorPage',
+ link: '/composants/DsfrErrorPage.md',
+ },
  {
  text: 'DsfrFieldset',
  link: '/composants/DsfrFieldset.md',
@@ -126,24 +131,44 @@ const composants = [
  link: '/composants/DsfrFileDownload.md',
  },
  {
- text: 'DsfrErrorPage',
- link: '/composants/DsfrErrorPage.md',
+ text: 'DsfrFileUpload',
+ link: '/composants/DsfrFileUpload.md',
  },
  {
- text: 'DsfrInput',
- link: '/composants/DsfrInput.md',
+ text: 'DsfrFooter',
+ link: '/composants/DsfrFooter.md',
  },
  {
- text: 'DsfrInputGroup',
- link: '/composants/DsfrInputGroup.md',
+ text: 'DsfrFooterLinkList',
+ link: '/composants/DsfrFooterLinkList.md',
  },
  {
- text: 'DsfrRange',
- link: '/composants/DsfrRange.md',
+ text: 'DsfrFooterLink',
+ link: '/composants/DsfrFooterLink.md',
  },
  {
- text: 'DsfrFileUpload',
- link: '/composants/DsfrFileUpload.md',
+ text: 'DsfrFooterPartners',
+ link: '/composants/DsfrFooterPartners.md',
+ },
+ {
+ text: 'DsfrHeader',
+ link: '/composants/DsfrHeader.md',
+ },
+ {
+ text: 'DsfrHeaderMenuLink',
+ link: '/composants/DsfrHeaderMenuLink.md',
+ },
+ {
+ text: 'DsfrHeaderMenuLinks',
+ link: '/composants/DsfrHeaderMenuLinks.md',
+ },
+ {
+ text: 'DsfrInput',
+ link: '/composants/DsfrInput.md',
+ },
+ {
+ text: 'DsfrInputGroup',
+ link: '/composants/DsfrInputGroup.md',
  },
  {
  text: 'DsfrNotice',
@@ -153,6 +178,10 @@ const composants = [
  text: 'DsfrRange',
  link: '/composants/DsfrRange.md',
  },
+ {
+ text: 'DsfrSearchBar',
+ link: '/composants/DsfrSearchBar.md',
+ },
  {
  text: 'DsfrSegmented',
  link: '/composants/DsfrSegmented.md',

.vitepress/theme/icons.ts

@@ -3,6 +3,7 @@ export {
  RiArrowDownLine,
  RiArrowDropDownLine,
  RiArrowDropUpLine,
+ RiAddCircleLine,
  RiCloseLine,
  RiMoonLine,
  RiRefreshLine,

demo-app/App.vue

@@ -7,7 +7,7 @@ import useToaster from './composables/use-toaster.js'
 
 import DsfrModal from '../src/components/DsfrModal/DsfrModal.vue'
 import DsfrHeader, { type DsfrHeaderProps } from '../src/components/DsfrHeader/DsfrHeader.vue'
-import DsfrNavigation, { DsfrNavigationProps } from '../src/components/DsfrNavigation/DsfrNavigation.vue'
+import DsfrNavigation, { type DsfrNavigationProps } from '../src/components/DsfrNavigation/DsfrNavigation.vue'
 import DsfrSkipLinks, { type DsfrSkipLinksProps } from '../src/components/DsfrSkipLinks/DsfrSkipLinks.vue'
 import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
 
@@ -49,6 +49,11 @@ const quickLinks: DsfrHeaderProps['quickLinks'] = [
  label: 'À propos',
  to: { name: 'AboutUs' },
  },
+ {
+ label: 'Code source',
+ href: 'https://github.com/dnum-mi/vue-dsfr/tree/main/demo-app',
+ icon: 'ri-github-fill',
+ },
  {
  label: 'DSFR',
  href: 'https://www.systeme-de-design.gouv.fr/',
@@ -194,6 +199,50 @@ const navItems: DsfrNavigationProps['navItems'] = [
  ],
  },
 ]
+
+const beforeMandatoryLinks = [{ label: 'Before', to: '/before' }]
+const afterMandatoryLinks = [
+ { label: 'After', to: '/after' },
+ {
+ label: 'Paramètres d’affichage',
+ button: true,
+ class: 'fr-icon-theme-fill fr-link--icon-left',
+ to: '/settings',
+ onclick: () => console.log('Settings'),
+ },
+]
+const a11yCompliance = 'partiellement conforme'
+const logoText = ['République', 'des châtons']
+const legalLink = '/mentions-legales'
+const personalDataLink = '/donnees-personnelles'
+const cookiesLink = '/cookies'
+const a11yComplianceLink = '/a11y-conformite'
+const descText = 'Description'
+const homeLink = '/'
+const licenceText = undefined
+const licenceTo = undefined
+const licenceName = undefined
+const licenceLinkProps = undefined
+const ecosystemLinks = [
+ {
+ label: 'legifrance.gouv.fr',
+ href: 'https://legifrance.gouv.fr',
+ },
+ {
+ label: 'gouvernement.fr',
+ href: 'https://gouvernement.fr',
+ },
+ {
+ label: 'service-public.fr',
+ href: 'https://service-public.fr',
+ },
+ {
+ label: 'data.gouv.fr',
+ href: 'https://data.gouv.fr',
+ },
+]
+
+const search = ref('')
 </script>
 
 <template>
@@ -202,6 +251,7 @@ const navItems: DsfrNavigationProps['navItems'] = [
  :links="links"
  />
  <DsfrHeader
+ v-model="search"
  :quick-links="quickLinks"
  show-search
  placeholder="Rechercher placeholder"
@@ -213,15 +263,34 @@ const navItems: DsfrNavigationProps['navItems'] = [
  </template>
  </DsfrHeader>
 
- <div class="fr-container">
+ <main class="fr-container">
  <h1>Demo VueDsfr</h1>
 
  <DsfrBreadcrumb
  :links="[{text: 'Accueil', to: '/'}, {text: 'Test fil d’Ariane'}]"
  />
 
  <router-view />
- </div>
+ </main>
+
+ <DsfrFooter
+ :a11y-compliance="a11yCompliance"
+ :logo-text="logoText"
+ :legal-link="legalLink"
+ :personal-data-link="personalDataLink"
+ :cookies-link="cookiesLink"
+ :a11y-compliance-link="a11yComplianceLink"
+ :desc-text="descText"
+ :home-link="homeLink"
+ :partners="partners"
+ :ecosystem-links="ecosystemLinks"
+ :licence-text="licenceText"
+ :licence-to="licenceTo"
+ :licence-name="licenceName"
+ :licence-link-props="licenceLinkProps"
+ :after-mandatory-links="afterMandatoryLinks"
+ :before-mandatory-links="beforeMandatoryLinks"
+ />
  </div>
 
  <DsfrModal

demo-app/components/AsyncButton.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import DsfrButton, { type DsfrButtonProps } from '../../src/components/DsfrButton/DsfrButton.vue'
+
+defineProps<DsfrButtonProps & { isLoading: boolean }>()
+</script>
+
+<template>
+ <DsfrButton v-bind="$props">
+ <slot />
+ </DsfrButton>
+ <Transition
+ name="x"
+ mode="out-in"
+ >
+ <DsfrButton
+ v-if="isLoading"
+ class="wrapper"
+ @click.prevent
+ >
+ <VIcon
+ name="ri-loader-4-line"
+ animation="spin"
+ />
+ </DsfrButton>
+ </Transition>
+</template>
+
+<style scoped>
+.x-enter-active, .x-leave-active {
+ transition: all 0.3s ease-in-out;
+ width: 3.25rem;
+ opacity: 0.8;
+ padding-inline: 0.5rem;
+ margin-inline: 0;
+}
+.x-enter-from, .x-leave-to {
+ width: 0;
+ opacity: 0;
+ padding-inline: 0;
+ margin-inline: 0;
+}
+
+.wrapper {
+ opacity: 0.8;
+}
+</style>

demo-app/views/AppHome.vue

@@ -4,6 +4,7 @@ import pDebounce from 'p-debounce'
 
 import FdrAutoComplete from '../components/FdrAutoComplete.vue'
 import useToaster from '../composables/use-toaster'
+import AsyncButton from '../components/AsyncButton.vue'
 
 defineProps({})
 
@@ -54,6 +55,18 @@ const getCityListWithZipCodeByQuery = async (query) =>
 const selectAddress = (address) => {
  console.log(address)
 }
+
+const isLoading = ref(false)
+const disabled = ref(false)
+
+const onClick = () => {
+ isLoading.value = true
+ disabled.value = true
+ setTimeout(() => {
+ disabled.value = false
+ isLoading.value = false
+ }, 2000)
+}
 </script>
 
 <template>
@@ -88,4 +101,11 @@ const selectAddress = (address) => {
  Cliquer pour voir une alerte
  </DsfrButton>
  </p>
+ <AsyncButton
+ :is-loading="isLoading"
+ :disabled="disabled"
+ @click="onClick($event)"
+ >
+ Cliquer pour voir un chargement
+ </AsyncButton>
 </template>

docs/composants.md

@@ -37,6 +37,16 @@ Le storybook est toujours disponible [ici](https://storybook.vue-ds.fr)
 
 - [DsfrTooltip](./composants/DsfrTooltip)
 
+## En-tête de page
+
+- [DsfrHeader](./composants/DsfrHeader)
+- [DsfrHeaderMenuLink](./composants/DsfrHeaderMenuLink)
+
+## Pied de page
+
+- [DsfrFooter](./composants/DsfrFooter)
+- [DsfrFooterLink](./composants/DsfrFooterLink)
+
 ## Fil d’ariane
 
 - [DsfrBreadcrumb](./composants/DsfrBreadcrumb)

docs/gabarit-doc-composant.md

@@ -0,0 +1,34 @@
+## 🌟 Introduction
+
+Ici la documentation de DSFR
+
+🏅 La documentation sur ... sur le [DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/<nom-dsfr>)
+
+<VIcon name="vi-file-type-storybook" /> La story sur ... sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfr<nom-composant>--docs)
+
+## 📐 Structure
+
+## 🛠️ Props
+
+## 📡 Événements
+
+## 🧩 Slots
+
+## 📝 Exemples
+
+## ⚙️ Code source du composant
+
+Dans le titre ## 📝 Exemples, je veux simplement ceci:
+
+::: code-group
+
+:::
+
+Et dans `## ⚙️ Code source du composant`, je veux ceci:
+
+::: code-group
+
+Dsfr.vue
+Dsfr.types.ts
+
+:::