From f0fa683a377e85acaa2155378d34c0b59f4bf6dc Mon Sep 17 00:00:00 2001
From: Noah Lancien <noah.lancien@ldc.fr>
Date: Fri, 10 Apr 2026 17:16:17 +0200
Subject: [PATCH] feat: :sparkles: Added Vue3ColorPicker to others color fields

---
 .../ts/bo/components/QrCodeComponent.vue      | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/resources/ts/bo/components/QrCodeComponent.vue b/resources/ts/bo/components/QrCodeComponent.vue
index 58054ae..ddaeb5b 100644
--- a/resources/ts/bo/components/QrCodeComponent.vue
+++ b/resources/ts/bo/components/QrCodeComponent.vue
@@ -158,12 +158,18 @@
                   for="dotsOptions-color"
                   class="form-label"
                 >Couleur des points</label>
-                <input
-                  v-model="options.dotsOptions.color"
-                  placeholder="Add data"
-                  class="form-control"
-                  id="dotsOptions-color"
-                >
+                <div class="d-flex justify-content-center my-3">
+                  <Vue3ColorPicker
+                    v-model="options.dotsOptions.color"
+                    mode="solid"
+                    type="HEX"
+                    input-type="RGB"
+                    :show-input-menu="false"
+                    :show-picker-mode="false"
+                    :show-color-list="false"
+                    :show-alpha="false"
+                  />
+                </div>
 
                 <label
                   for="dotsOptions-type"
@@ -225,12 +231,18 @@
                   for="cornersSquareOptions-color"
                   class="form-label"
                 >Couleur des coins</label>
-                <input
-                  v-model="options.cornersSquareOptions.color"
-                  placeholder="Add data"
-                  class="form-control"
-                  id="cornersSquareOptions-color"
-                >
+                <div class="d-flex justify-content-center my-3">
+                  <Vue3ColorPicker
+                    v-model="options.cornersSquareOptions.color"
+                    mode="solid"
+                    type="HEX"
+                    input-type="RGB"
+                    :show-input-menu="false"
+                    :show-picker-mode="false"
+                    :show-color-list="false"
+                    :show-alpha="false"
+                  />
+                </div>
 
                 <label
                   for="cornersSquareOptions-type"
@@ -257,12 +269,18 @@
                   for="cornersDotOptions-color"
                   class="form-label"
                 >Couleur de l'intérieur des coins</label>
-                <input
-                  v-model="options.cornersDotOptions.color"
-                  placeholder="Add data"
-                  class="form-control"
-                  id="cornersDotOptions-color"
-                >
+                <div class="d-flex justify-content-center my-3">
+                  <Vue3ColorPicker
+                    v-model="options.cornersDotOptions.color"
+                    mode="solid"
+                    type="HEX"
+                    input-type="RGB"
+                    :show-input-menu="false"
+                    :show-picker-mode="false"
+                    :show-color-list="false"
+                    :show-alpha="false"
+                  />
+                </div>
 
                 <label
                   for="cornersDotOptions-type"