[ui-dsfr] ajoute des classes utilitaires pour flex

Author: ppinette

vertigo-ui-dsfr/src/components/DsfrButtonIcon/DsfrButtonIcon.vue

@@ -125,11 +125,11 @@ const onMouseLeave = () => {
   <button
       :id="`button-${id}`"
       ref="source"
-      class="fr-btn fr-btn--tooltip"
+      class="fr-btn fr-btn--sm"
       :class="{
         'fr-btn--tertiary': !noOutline,
         'fr-btn--tertiary-no-outline': noOutline,
-        icon: true
+        [icon]: true
       }"
       :aria-labelledby="id"
       @mouseenter="onMouseEnter()"

vertigo-ui-dsfr/src/utils.css

@@ -1,11 +1,144 @@
+/* size */
+
+.h-full {
+    height: 100%;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.position-relative {
+    position: relative;
+}
+
+/* whitespace */
+
+.whitespace-normal {
+    white-space: normal;
+}
+
+.whitespace-pre {
+    white-space: pre;
+}
+
+/* flex utils */
+
 .flex {
     display: flex;
 }
 
+.flex-nowrap {
+    flex-wrap: nowrap;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+.grow-0 {
+    flex-grow: 0;
+}
+
+.shrink {
+    flex-shrink: 1;
+}
+
+.shrink-0 {
+    flex-shrink: 0;
+}
+
+.gap {
+    gap: .75rem
+}
+
+.gap-x {
+    column-gap: .75rem;
+}
+
+.gap-y {
+    row-gap: .75rem;
+}
+
+.gap--sm {
+    gap: .5rem
+}
+
+.gap-x--sm {
+    column-gap: .5rem;
+}
+
+.gap-y--sm {
+    row-gap: .5rem;
+}
+
+.items-start {
+    align-items: flex-start;
+}
+
+.items-end {
+    align-items: flex-end;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.items-baseline {
+    align-items: baseline;
+}
+
+.items-stretch {
+    align-items: stretch;
+}
+
+.justify-normal {
+    justify-content: normal;
+}
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
 .justify-between {
     justify-content: space-between;
 }
 
-.w-full {
-    width: 100%;
+.justify-around {
+    justify-content: space-around;
+}
+
+.justify-evenly {
+    justify-content: space-evenly;
+}
+
+.justify-stretch {
+    justify-content: stretch;
+}
+
+.self-auto {
+    align-self: auto;
+}
+.self-start {
+    align-self: flex-start;
+}
+.self-end {
+    align-self: flex-end;
+}
+.self-center {
+    align-self: center;
+}
+.self-stretch {
+    align-self: stretch;
 }
+.self-baseline {
+    align-self: baseline;
+}

vertigo-ui/src/main/resources/io/vertigo/ui/components/dsfr/table/dsfr-table.html

@@ -45,7 +45,9 @@
             <vu:content></vu:content>
             <vu:dsfr-column name="action" label="Actions" sortable="false" align="right"
                             th:if="${actions_slot != null}">
-                <vu:content-slot name="actions_slot" th:with="label=null, title=null, vTitle=null"/>
+                <div class="flex gap--sm">
+                    <vu:content-slot name="actions_slot" th:with="label=null, title=null, vTitle=null"/>
+                </div>
             </vu:dsfr-column>
         </template>
     </dsfr-custom-data-table>

vertigo-ui/src/main/resources/io/vertigo/ui/static/3rdParty/dsfr/dsfr.es.js

@@ -163,6 +163,12 @@
             <vu:dsfr-button-icon icon="ri-information-2-line"
                                  label="'`Ouvrir la modale de la ligne n°${idx}`'"
             />
+            <vu:dsfr-button-icon icon="fr-icon-delete-bin-line"
+                                 label="'`Ouvrir la modale de la ligne n°${idx}`'"
+            />
+            <vu:dsfr-button-icon icon="fr-icon-eye-line"
+                                 label="'`Ouvrir la modale de la ligne n°${idx}`'"
+            />
         </vu:slot>
         <vu:slot name="header_slot">
             <vu:dsfr-column-header field="movId">