feat: switching to composition API standard

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -1,25 +1,40 @@
 <template>
-    <div :class="['cell', { expanded }]" @click="toggleExpand">
+    <div :class="['cell', { expanded }]"
+    @click="toggleExpand"
+    :style="{ justifyContent: expanded ? 'flex-start' : 'center' }"> <!-- Looking for finding a way 
+                                                          to make this style in the toggleExpand event -->
+
       <h3>{{ title }}</h3>
-      <p>{{ description }}</p>
+      <p>{{ currentDescription }}</p>
     </div>
   </template>
   
   <script>
+  import { ref } from "vue";
+  
   export default {
     props: {
       title: String,
       description: String
     },
-    data() {
-      return {
-        expanded: false
+
+    setup(props) {
+      const expanded = ref(false);
+      const currentDescription = ref(props.description);
+  
+      const toggleExpand = () => {
+        currentDescription.value = expanded.value
+          ? "3 problèmes essentiels à résoudre pour le client"
+          : "FAKE DATA";
+        
+          expanded.value = !expanded.value;
+      };
+  
+      return {
+        expanded,
+        currentDescription,
+        toggleExpand
       };
-    },
-    methods: {
-      toggleExpand() {
-        this.expanded = !this.expanded;
-      }
     }
   };
   </script>
@@ -29,14 +44,21 @@
   
 	.cell {
 		display: flex;
-		flex-direction: column; /* Pour empiler le titre et la description */
-		align-items: center; /* Centre horizontalement */
-		justify-content: center; /* Centre verticalement */
-		text-align: center; /* Centre le texte */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
 		transition: all 0.3s ease;
 		cursor: pointer;
 	}
 
+  .cell_Expanded {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
 
 	.expanded {
     position: fixed;