♻️ form-builder: Remove deprecated VLayout usage in PeriodField

CHANGELOG.md

@@ -39,7 +39,8 @@
 ### FormBuilder
 
 - ♻️ **Refactoring**
-  - **FormField:** Suppression de l'utilisation du composant `VLayout` déprécié ([#1080](https://github.com/assurance-maladie-digital/design-system/pull/1080))
+  - **FormField:** Suppression de l'utilisation du composant `VLayout` déprécié ([#1080](https://github.com/assurance-maladie-digital/design-system/pull/1080)) ([011f6e9](https://github.com/assurance-maladie-digital/design-system/commit/011f6e9f2489c367748f47616abcb8dfaee76d18))
+  - **PeriodField:** Suppression de l'utilisation du composant `VLayout` déprécié ([#1081](https://github.com/assurance-maladie-digital/design-system/pull/1081))
 
 ### Interne
 

packages/form-builder/src/components/FormBuilder/tests/__snapshots__/FormBuilder.spec.ts.snap

@@ -131,9 +131,9 @@ exports[`FormBuilder renders correctly 1`] = `
         <!---->
       </h4>
       <!---->
-      <div class="layout mx-n3 wrap row">
+      <div class="d-flex flex-wrap mx-n3">
         <div class="v-menu">
-          <div class="v-input vd-date-picker-text-field theme--light v-text-field v-text-field--enclosed v-text-field--outlined vd-no-prepend-icon mx-3 vd-form-input no-flex">
+          <div class="v-input vd-date-picker-text-field theme--light v-text-field v-text-field--enclosed v-text-field--outlined vd-no-prepend-icon vd-form-input mx-3">
             <div class="v-input__prepend-outer"><button type="button" class="v-btn v-btn--icon v-btn--round theme--light v-size--default" aria-label="Ouvrir le calendrier" style="display: none;"><span class="v-btn__content"><span aria-hidden="true" class="v-icon notranslate theme--light" style="color: rgb(128, 128, 128); caret-color: #808080;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z"></path></svg></span></span></button></div>
             <div class="v-input__control">
               <div class="v-input__slot">
@@ -155,7 +155,7 @@ exports[`FormBuilder renders correctly 1`] = `
           <!---->
         </div>
         <div class="v-menu">
-          <div class="v-input vd-date-picker-text-field theme--light v-text-field v-text-field--enclosed v-text-field--outlined vd-no-prepend-icon mx-3 vd-form-input no-flex">
+          <div class="v-input vd-date-picker-text-field theme--light v-text-field v-text-field--enclosed v-text-field--outlined vd-no-prepend-icon vd-form-input mx-3">
             <div class="v-input__prepend-outer"><button type="button" class="v-btn v-btn--icon v-btn--round theme--light v-size--default" aria-label="Ouvrir le calendrier" style="display: none;"><span class="v-btn__content"><span aria-hidden="true" class="v-icon notranslate theme--light" style="color: rgb(128, 128, 128); caret-color: #808080;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" class="v-icon__svg"><path d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z"></path></svg></span></span></button></div>
             <div class="v-input__control">
               <div class="v-input__slot">

packages/form-builder/src/components/FormField/fields/PeriodField.vue

@@ -1,14 +1,10 @@
 <template>
-	<VLayout
-		wrap
-		row
-		class="mx-n3"
-	>
+	<div class="d-flex flex-wrap mx-n3">
 		<DatePicker
 			v-model="periodValue.from"
 			v-bind="fieldOptionsFrom"
 			:vuetify-options="fieldOptionsFrom"
-			text-field-class="mx-3 vd-form-input no-flex"
+			text-field-class="vd-form-input mx-3"
 			@change="dateUpdated"
 		/>
 
@@ -17,10 +13,10 @@
 			v-bind="fieldOptionsTo"
 			:vuetify-options="fieldOptionsTo"
 			:start-date="periodValue.from"
-			text-field-class="mx-3 vd-form-input no-flex"
+			text-field-class="vd-form-input mx-3"
 			@change="dateUpdated"
 		/>
-	</VLayout>
+	</div>
 </template>
 
 <script lang="ts">