Implemented clear funcionality

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -1,26 +1,31 @@
 <script setup lang="ts">
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import { ref } from 'vue';
 
-const value = ref('')
+const data = ref('')
 
 const props = defineProps(
     {
         prettyName: {type: String, required: true},
-        xmlData: {type: String},
+        data: {type: String},
     }
 )
 const emit = defineEmits(['update'])
 
 function sendValue() {
-    emit('update', value.value)
+    emit('update', data.value)
 }
 
-function setToDefaultValue(data: string) {
-    value.value = data;
+function updateData(newData: string) {
+    data.value = newData;
     sendValue();
 }
 
+function clear() {
+    updateData('');
+}
+
 </script>
 
 <template>
@@ -28,9 +33,11 @@ function setToDefaultValue(data: string) {
         <div class="flex place-content-between w-full pr-2 items-center m-2">
             <span class="dark:text-white">{{ prettyName }}</span>
             <div class="flex space-x-2">
-                <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setToDefaultValue(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <XMLButtonFormatterComponent v-if="props.prettyName == 'XML'" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+                <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <textarea id="xmlField" v-model="value" @input="sendValue()" class="text-field"></textarea>
+        <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field"></textarea>
     </div>
 </template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -107,6 +107,10 @@ function updateOutputField(data: any) {
     result.value = data.result;
 }
 
+function clear() {
+    result.value = "";
+}
+
 </script>
 
 <template>
@@ -120,7 +124,7 @@ function updateOutputField(data: any) {
                 <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
                 </select>
-                <button class="tool-button">Clear</button>    
+                <button class="tool-button" @click="clear">Clear</button>    
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>

Frontend/src/views/XPathView.vue

@@ -12,8 +12,8 @@ const query = ref('');
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
         <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
-            <xmlInputFieldComponent prettyName="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-            <xmlInputFieldComponent prettyName="XPath" @update="(data) => {query = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent prettyName="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
         <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>