Merge pull request #1030 from dnum-mi/tech/use-dsfr-1.13

tech/use dsfr 1.13

Author: laruiss

.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

@@ -167,26 +167,28 @@ const rows = [
           </DsfrTooltip>
         </template>
         <template v-else>
-          <DsfrTooltip
-            :content="`(${colKey})`"
-            on-hover
-          >
+          <div class="flex items-center">
             {{ cell }}
-          </DsfrTooltip>
+            <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"
     />

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>

package.json

@@ -85,7 +85,7 @@
     "vue-router": "^4.5.0"
   },
   "dependencies": {
-    "@gouvfr/dsfr": "~1.12.1",
+    "@gouvfr/dsfr": "~1.13.0",
     "focus-trap": "^7.6.4",
     "focus-trap-vue": "^4.0.3",
     "vue": "^3.5.13",
@@ -179,6 +179,6 @@
     ]
   },
   "volta": {
-    "node": "20.11.0"
+    "node": "22.13.1"
   }
 }