chore(demo-app): 📝 Ajoute un exemple d'utilisation de DsfrModal

Author: laruiss

package.json

@@ -18,7 +18,7 @@
     "build": "run-p build:css build:js",
     "build:css": "node build-css.mjs",
     "build:js": "cross-env NODE_ENV=production rollup --config rollup.config.js",
-    "serve": "vite preview",
+    "demo-app": "vite",
     "test": "jest",
     "format": "npm run lint -- --fix",
     "lint": "eslint ./src/**/*.{vue,js,jsx,ts,tsx}",

src/App.vue

@@ -1,22 +1,74 @@
+<script setup>
+import { ref } from 'vue'
+
+const isModalOpen = ref(false)
+const displayAlert = ref(false)
+const close = () => {
+  displayAlert.value = false
+  setTimeout(
+    () => { isModalOpen.value = false },
+    1000,
+  )
+}
+
+const actions = [
+  {
+    label: 'Valider',
+    onClick: () => {
+      displayAlert.value = true
+      setTimeout(
+        close,
+        2000,
+      )
+    },
+  },
+  {
+    label: 'Annuler',
+    secondary: true,
+    onClick: () => { isModalOpen.value = false },
+  },
+]
+
+</script>
+
 <template>
   <div>
-    App
+    <h1>App</h1>
+    <DsfrButton
+      class="m1"
+      @click="isModalOpen = true"
+    >
+      Open modal
+    </DsfrButton>
+    <teleport to="body">
+      <DsfrModal
+        v-if="isModalOpen"
+        :opened="isModalOpen"
+        :actions="actions"
+        @close="isModalOpen = false"
+      >
+        <DsfrAlert
+          :closed="!displayAlert"
+          type="success"
+          sm
+          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>Échappe</kbd>
+      </DsfrModal>
+    </teleport>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'App',
-}
-</script>
-
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
+
+.m1 {
+  margin: 0.5rem;
+}
 </style>

src/main.js

@@ -4,12 +4,16 @@ import {
   RiCheckboxCircleLine,
 } from 'oh-vue-icons/icons'
 
+import './main.css'
+import './assets/fonts-dsfr.css'
+import VueDsfr from './index.js'
+
 import App from './App.vue'
 
 OhVueIcon.add(
   RiCheckboxCircleLine,
 )
 
 createApp(App)
-  .component('v-icon', OhVueIcon)
+  .use(VueDsfr)
   .mount('#app')