Reimplemented XML Tools and added styling (#227)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #227
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>

Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+
+import sampleXML from "@/assets/sampleXml.xml?raw"
+import sampleXSLT from "@/assets/sampleXslt.xml?raw"
+import sampleXSD from "@/assets/sampleXsd.xml?raw"
+import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
+
+
+const props = defineProps(
+    {
+        prettyName: {type: String, required: true}
+    }
+)
+
+const emit = defineEmits(['update:defaultData'])
+
+function setDefault() {
+    const emitName = "update:defaultData";
+    switch (props.prettyName.toLowerCase()) {
+        case "xpath":
+            emit(emitName, "string(/l:library/l:libraryName)")
+            break;
+        case "xsd":
+            emit(emitName, sampleXSD)
+            break;
+        case "xslt":
+            emit(emitName, sampleXSLT)
+            break;
+        case "xquery":
+            emit(emitName, sampleXQuery)
+            break;
+        
+        default:
+            emit(emitName, sampleXML)
+            break;
+    }
+
+}
+
+</script>
+
+<template>
+    <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">
+            <button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
+        </div>
+        
+    </div>
+</template>