Merge pull request #847 from dnum-mi/develop

Develop

Author: laruiss

demo-app/App.vue

@@ -10,6 +10,7 @@ import DsfrHeader, { type DsfrHeaderProps } from '../src/components/DsfrHeader/D
 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'
+import DsfrFooter from '../src/components/DsfrFooter/DsfrFooter.vue'
 
 const toaster = useToaster()
 
@@ -298,6 +299,10 @@ const currentRoute = computed(() => route.name)
       :licence-link-props="licenceLinkProps"
       :after-mandatory-links="afterMandatoryLinks"
       :before-mandatory-links="beforeMandatoryLinks"
+      operator-img-src="https://loremflickr.com/300/200/cat"
+      operator-img-alt="L'opérateur petit chat"
+      operator-to="/"
+      :operator-img-style="{ 'margin-left': '0.5px', padding: '1rem', 'max-width': '15rem' }"
     />
   </div>
 

demo-app/views/SimpleModal.vue

@@ -1,8 +1,14 @@
-<script setup>
-import { ref } from 'vue'
+<script setup lang="ts">
+import { ref, reactive, onMounted, watchEffect } from 'vue'
 import DsfrModal from '@/components/DsfrModal/DsfrModal.vue'
+import type { Preferences, UseSchemeResult } from '@/composables/index'
+import { useScheme } from '@/composables/index'
+import lightThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/environment/sun.svg'
+import darkThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/environment/moon.svg'
+import systemThemeSvg from '@gouvfr/dsfr/dist/artwork/pictograms/system/system.svg'
 
 const isModalOpen = ref(false)
+const isThemeModalOpen = ref(false)
 const displayAlert = ref(false)
 const close = () => {
   displayAlert.value = false
@@ -29,6 +35,41 @@ const actions = [
     onClick: () => { isModalOpen.value = false },
   },
 ]
+
+const preferences: Preferences = reactive({
+  theme: 'light',
+  scheme: 'light',
+})
+
+onMounted(() => {
+  const { theme, scheme, setScheme } = useScheme() as UseSchemeResult
+  preferences.scheme = scheme.value
+
+  watchEffect(() => {
+    preferences.theme = theme.value
+  })
+
+  watchEffect(() => setScheme(preferences.scheme))
+})
+
+const options = [
+  {
+    label: 'Thème clair',
+    value: 'light',
+    svgPath: lightThemeSvg,
+  },
+  {
+    label: 'Thème sombre',
+    value: 'dark',
+    svgPath: darkThemeSvg,
+  },
+  {
+    label: 'Thème système',
+    value: 'system',
+    hint: 'Utilise les paramètres système',
+    svgPath: systemThemeSvg,
+  },
+]
 </script>
 
 <template>
@@ -37,10 +78,45 @@ const actions = [
       class="my-1"
       @click="isModalOpen = true"
     >
-      Open modal
+      Ouvrir modal
     </DsfrButton>
   </div>
 
+  <DsfrButton
+    ref="modalOrigin"
+    label="Changer le thème"
+    @click="isThemeModalOpen = true"
+  />
+  <DsfrModal
+    :opened="isThemeModalOpen"
+    title="Changer le thème"
+    :origin="$refs.modalOrigin"
+    @close="isThemeModalOpen = false"
+  >
+    <DsfrRadioButtonSet
+      v-model="preferences.scheme"
+      :options="options"
+      name="theme-selector"
+      legend="Choisissez un thème pour personnaliser l’apparence du site."
+    />
+  </DsfrModal>
+
+  <DsfrModal
+    v-if="isThemeModalOpen"
+    title="Exemple de modale"
+    :opened="isModalOpen"
+    :actions="actions"
+    @close="isModalOpen = false"
+  >
+    <DsfrAlert
+      :closed="!displayAlert"
+      type="success"
+      small
+      description="Opération terminée avec succès"
+    />
+    Ceci est une modale. Elle peut se fermer sans aucun changement au clic sur le bouton "Fermer" ou bien simplement avec la touche <kbd>Échap</kbd>
+  </DsfrModal>
+
   <DsfrModal
     title="Exemple de modale"
     :opened="isModalOpen"

package.json

@@ -21,9 +21,9 @@
       "import": "./dist/vue-dsfr.css"
     }
   },
-  "main": "./dist/vue-dsfr.js",
+  "main": "./dist/vue-dsfr.umd.cjs",
   "module": "./dist/vue-dsfr.js",
-  "types": "./types/index.d.ts",
+  "types": "./types",
   "files": [
     "LICENSE",
     "README.md",
@@ -128,6 +128,7 @@
     "eslint-plugin-vue": "^9.26.0",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
+    "lightningcss": "^1.25.1",
     "lint-staged": "^15.2.2",
     "npm-run-all": "^4.1.5",
     "p-debounce": "^4.0.0",