Merge pull request #1031 from dnum-mi/develop

Develop

Author: laruiss

.github/workflows/run-tests.yml

@@ -34,19 +34,17 @@ jobs:
         run: pnpm check-exports-ci
       - name: Test
         run: pnpm test
-      - name: Install Playwright with dependencies
-        run: pnpx playwright install --with-deps
-      - name: Install Playwright
-        run: pnpx playwright install
+      # - name: Install Playwright with dependencies
+      #   run: pnpx playwright install --with-deps firefox
 
       - name: Build Storybook
         run: pnpm build-storybook --quiet
-      - name: Serve Storybook and run tests
-        env:
-          TEST_STORYBOOK_URL: http://localhost:6006
-        run: |
-          pnpx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "pnpx http-server storybook-static --port 6006 --silent" \
-            "pnpx wait-on tcp:6006 && pnpm test-storybook"
+      # - name: Serve Storybook and run tests
+      #   env:
+      #     TEST_STORYBOOK_URL: http://localhost:6006
+      #   run: |
+      #     pnpx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+      #       "pnpx http-server storybook-static --port 6006 --silent" \
+      #       "pnpx wait-on tcp:6006 && pnpm test-storybook"
       - name: Build
         run: pnpm build

.vitepress/config.ts

@@ -357,6 +357,12 @@ const composants = [
   {
     text: 'DsfrTag',
     link: '/composants/DsfrTag.md',
+    items: [
+      {
+        text: 'DsfrTags',
+        link: '/composants/DsfrTags.md',
+      },
+    ],
   },
   {
     text: 'DsfrTile',

demo-app/main.css

@@ -0,0 +1,11 @@
+.flex {
+  display: flex;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
+  align-items: center;
+}

demo-app/main.js

@@ -12,6 +12,8 @@ import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
 
 import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
 
+import './main.css'
+
 createApp(App)
   .use(router)
   .use(VueDsfr)

demo-app/views/AppHome.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import pDebounce from 'p-debounce'
 import { ref, watch } from 'vue'
 
@@ -71,6 +71,27 @@ const onClick = () => {
 }
 
 const activeAccordion = ref(-1)
+
+const selection = ref([])
+const headers = [
+  {
+    key: 'id',
+    label: 'ID',
+  },
+  {
+    key: 'name',
+    label: 'Name',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+  },
+]
+const rows = [
+  [1, 'John Doe', '[email protected]'],
+  [2, 'Jane Doe', '[email protected]'],
+  [3, 'James Bond', '[email protected]'],
+]
 </script>
 
 <template>
@@ -126,16 +147,48 @@ const activeAccordion = ref(-1)
       </DsfrAccordion>
     </DsfrAccordionsGroup>
   </div>
+  <div>
+    <DsfrDataTable
+      v-model:selection="selection"
+      title="Titre du tableau (caption)"
+      :headers-row="headers"
+      :rows="rows"
+      selectable-rows
+      sortable-rows
+      :row-key="0"
+    >
+      <template #cell="{ colKey, cell }">
+        <template v-if="colKey === 'email'">
+          <DsfrTooltip
+            content="Envoyer un courriel"
+            on-hover
+          >
+            <a :href="`mailto:${cell as string}`">{{ cell }}</a>
+          </DsfrTooltip>
+        </template>
+        <template v-else>
+          <div class="flex items-center">
+            {{ cell }}
+            <DsfrTooltip
+              :content="`(${colKey})`"
+              href="#"
+            />
+          </div>
+        </template>
+      </template>
+    </DsfrDataTable>
+  </div>
 
-  <div class="flex justify-between w-full relative">
+  <div class="flex justify-between items-center gap-2 w-full relative">
     <DsfrTooltip
       on-hover
       content="Texte de l’info-bulle qui apparaît au survol"
     >
       Au survol
     </DsfrTooltip>
 
-    Et au clic avec une icône seulement :
+    <span>Et au clic avec une icône seulement :</span>
+
     <DsfrTooltip
       content="Texte de l’info-bulle qui apparaît au clic"
     />
@@ -148,7 +201,7 @@ const activeAccordion = ref(-1)
   <AsyncButton
     :is-loading="isLoading"
     :disabled="disabled"
-    @click="onClick($event)"
+    @click="onClick()"
   >
     Cliquer pour voir un chargement
   </AsyncButton>

demo-app/views/AppTags.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import DsfrTag from '../../src/components/DsfrTag/DsfrTag.vue'
 import DsfrTags from '../../src/components/DsfrTag/DsfrTags.vue'
+import type { DsfrTagProps } from '../../src/components/DsfrTag/DsfrTags.types'
 
 const tags = [
   {
@@ -12,19 +15,64 @@ const tags = [
     label: 'Elément 2 de la liste de tags',
   },
 ]
+
+const tagSet: (DsfrTagProps)[] = [
+  {
+    icon: 'fr-icon-ancient-pavilion-fill',
+    label: 'Les tags individuels',
+    selectable: true,
+    selected: true,
+    value: 'individualTags',
+  },
+  {
+    icon: 'ri-notification-3-line',
+    label: 'Les ensembles de tags',
+    selectable: true,
+    value: 'tagSets',
+  },
+]
+
+const loneTag = ref(false)
+
+const filters = ref(['individualTags', 'tagSets'])
 </script>
 
 <template>
-  <div>
+  <div class="fr-mt-2w">
+    <DsfrTags
+      v-model="filters"
+      :tags="tagSet"
+    />
+  </div>
+  <div
+    v-show="filters.includes('individualTags')"
+  >
     <DsfrTag label="Bonjour VueDsfr !" />
   </div>
-  <div class="fr-mt-2w">
+  <div
+    v-show="filters.includes('individualTags')"
+    class="fr-mt-2w"
+  >
     <DsfrTag
       label="Vue Power"
       icon="ri-notification-3-line"
     />
   </div>
-  <div class="fr-mt-2w">
+  <div
+    v-show="filters.includes('individualTags')"
+    class="fr-mt-2w"
+  >
+    <DsfrTag
+      label="Tag tout cliquable seul !"
+      selectable
+      :selected="loneTag"
+      @select="loneTag = !loneTag"
+    />
+  </div>
+  <div
+    v-show="filters.includes('tagSets')"
+    class="fr-mt-2w"
+  >
     <DsfrTags :tags="tags" />
   </div>
 </template>

docs/gabarit-doc-composant.md

@@ -1,6 +1,6 @@
 # Tuile - `DsfrTile`
 
-## 🌟 Introduction
+## 🌟Introduction
 
 La tuile est un raccourci ou point d’entrée qui redirige les utilisateurs vers des pages de contenu. Elle fait généralement partie d'une collection ou liste de tuiles similaires. La tuile n’est jamais présentée de manière isolée.
 
@@ -10,7 +10,7 @@ Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour affich
 
 <VIcon name="vi-file-type-storybook" /> La story sur la tuile sur le storybook de [VueDsfr](https://storybook.vue-ds.fr/?path=/docs/composants-dsfrtile--docs)
 
-## 📐 Structure
+## 📐Structure
 
 - `<DsfrTile>` : Le composant principal.
   - Affiche un titre, une description, des détails et un pictogramme (image ou SVG).
@@ -39,15 +39,15 @@ Le composant `DsfrTile` est une tuile flexible et stylisée, idéale pour affich
 | `noBackground` | `boolean`               | Si vrai, n'affiche pas de fond dans la tuile.                                                       | `false`                                                |
 | `grey`         | `boolean`               | Si vrai, affiche un fond gris pour la tuile.                                                        | `false`                                                |
 
-## 📡 Événements
+## 📡Événements
 
 Ce composant ne déclenche pas d'événements spécifiques.
 
-## 🧩 Slots
+## 🧩Slots
 
 - `header` : Slot pour insérer du contenu personnalisé dans l'en-tête de la tuile.
 
-## 📝 Exemples
+## 📝Exemples
 
 Section vide comme demandé.
 

docs/guide/guide-developpeur.md

@@ -95,7 +95,7 @@ Vous devriez voir 20.x.x
 - Faire des demandes dans [discussions](https://github.com/dnum-mi/vue-dsfr/discussions)
 - Rejoindre le [server Discord](https://discord.gg/jbBJ9769ZZ)
 
-### À propos des pull-requests
+### Àpropos des pull-requests
 
 Les commits doivent suivre la spécification des **[Commits Conventionnels](https://www.conventionalcommits.org/fr/v1.0.0/)** afin que
 l’outil de release automatique détecte les nouvelles fonctionnalités et les corrections d’anomalies.