Refactor Contact component by modularizing form and preview.

Split Contact functionality into ContactForm and ContactList components for improved modularity and readability. Replaced inline implementations with reusable components while maintaining reactive data binding through `v-model`. Added support for uppercase name preview via model modifiers.

Author: khannedy

src/components/Contact.vue

@@ -1,5 +1,7 @@
 <script setup>
 import {reactive} from "vue";
+import ContactForm from "./ContactForm.vue";
+import ContactList from "./ContactList.vue";
 
 const contact = reactive({
   name: "",
@@ -12,52 +14,13 @@ const contact = reactive({
 </script>
 
 <template>
-  <h1>Contact Us</h1>
-  <form>
-    <div>
-      <label for="name">Name
-        <input type="text" id="name" v-model="contact.name">
-      </label>
-    </div>
-    <div>
-      <label for="email">Email
-        <input type="email" id="email" v-model="contact.email">
-      </label>
-    </div>
-    <div>
-      <label for="age">Age
-        <input type="number" id="age" v-model.number="contact.age">
-      </label>
-    </div>
-    <div>
-      <label for="type">Type
-        <select id="type" name="type" v-model="contact.type">
-          <option value="Regular">Regular</option>
-          <option value="VIP">VIP</option>
-        </select>
-      </label>
-    </div>
-    <div>
-      <label for="complain">Complain
-        <input type="checkbox" id="complain" v-model="contact.complain">
-      </label>
-    </div>
-    <div>
-      <label for="message">Message
-        <textarea id="message" name="message" v-model="contact.message"></textarea>
-      </label>
-    </div>
-  </form>
-
-  <h1>Preview</h1>
-  <div>
-    <p>Name : {{contact.name}}</p>
-    <p>Email : {{contact.email}}</p>
-    <p>Age : {{contact.age}}</p>
-    <p>Type : {{contact.type}}</p>
-    <p>Complain : {{contact.complain}}</p>
-    <p>Message : {{contact.message}}</p>
-  </div>
+  <ContactForm v-model="contact"/>
+  <ContactList v-model:name.uppercase="contact.name"
+               v-model:email="contact.email"
+               v-model:age="contact.age"
+               v-model:type="contact.type"
+               v-model:complain="contact.complain"
+               v-model:message="contact.message"/>
 </template>
 
 <style scoped>

src/components/ContactForm.vue

@@ -0,0 +1,53 @@
+<script setup>
+const model = defineModel({
+  type: Object,
+  required: true,
+  get: (value) => {
+    value.email = value.email.toUpperCase();
+    return value;
+  }
+});
+</script>
+
+<template>
+  <h1>Contact Us</h1>
+  <form>
+    <div>
+      <label for="name">Name
+        <input type="text" id="name" v-model="model.name">
+      </label>
+    </div>
+    <div>
+      <label for="email">Email
+        <input type="email" id="email" v-model="model.email">
+      </label>
+    </div>
+    <div>
+      <label for="age">Age
+        <input type="number" id="age" v-model.number="model.age">
+      </label>
+    </div>
+    <div>
+      <label for="type">Type
+        <select id="type" name="type" v-model="model.type">
+          <option value="Regular">Regular</option>
+          <option value="VIP">VIP</option>
+        </select>
+      </label>
+    </div>
+    <div>
+      <label for="complain">Complain
+        <input type="checkbox" id="complain" v-model="model.complain">
+      </label>
+    </div>
+    <div>
+      <label for="message">Message
+        <textarea id="message" name="message" v-model="model.message"></textarea>
+      </label>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>

src/components/ContactList.vue

@@ -0,0 +1,43 @@
+<script setup>
+const [name, nameModifiers] = defineModel("name", {
+  type: String,
+  get: (value) => {
+    if(nameModifiers.uppercase){
+      return value.toUpperCase();
+    }else {
+      return value;
+    }
+  }
+})
+const email = defineModel("email", {
+  type: String
+})
+const age = defineModel("age", {
+  type: Number
+})
+const type = defineModel("type", {
+  type: String
+})
+const complain = defineModel("complain", {
+  type: Boolean
+})
+const message = defineModel("message", {
+  type: String
+})
+</script>
+
+<template>
+  <h1>Preview</h1>
+  <div>
+    <p>Name : {{name}}</p>
+    <p>Email : {{email}}</p>
+    <p>Age : {{age}}</p>
+    <p>Type : {{type}}</p>
+    <p>Complain : {{complain}}</p>
+    <p>Message : {{message}}</p>
+  </div>
+</template>
+
+<style scoped>
+
+</style>