Frontend/src/App.vue

@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex bg-gradient-to-br from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
     <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
       <RouterView></RouterView>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -30,16 +30,16 @@ onMounted( () => {
             </a>
             <div class="flex flex-col font-medium items-center">
                 <sidebar-menu-element-component category-name="XML">
-                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                     <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
-                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
                     <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
+                    <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
+                    <SidebarToolLinkComponent path-to="/xml/xslt" element-content="XSLT" />
                 </sidebar-menu-element-component>
 
                 <sidebar-menu-element-component category-name="Formatter">
-                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                     <SidebarToolLinkComponent path-to="/format/HTML" element-content="HTML Formatter" />
                     <SidebarToolLinkComponent path-to="/format/JSON" element-content="JSON Formatter" />
+                    <SidebarToolLinkComponent path-to="/format/XML" element-content="XML Formatter" />
                 </sidebar-menu-element-component>
 
 

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -24,14 +24,14 @@ function sendTransform() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-full items-center gap-4">
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
         <div class="flex flex-col w-full h-1/2">
             <xmlInputFieldToolbarComponent prettyName="XML"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
         <div class="flex flex-col w-full h-1/2">
             <xmlInputFieldToolbarComponent :prettyName="$props.prettyName"></xmlInputFieldToolbarComponent>
-            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
         </div>
     </div>
 </template>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
-import { resourceUsage } from 'process';
 import { ref } from 'vue';
 
 
@@ -15,17 +14,16 @@ const props = defineProps(
 const result = ref('');
 
 function parseResult(data: any) {
-    console.log(data.result);
     result.value = data.result;
 }
 
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-full items-center">
+    <div class="flex flex-col w-full lg:w-1/2 h-full items-center">
-        <xmlOutputFieldToolbarComponent class="grow-0" :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
+        <xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
-        <div class="w-full h-full p-2 border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
+        <div class="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
-            <pre><code>{{ result }}</code></pre>
+            <pre class="break-words"><code>{{ result }}</code></pre>
         </div>
         
     </div>

Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue

@@ -11,6 +11,7 @@ const props = defineProps(
 )
 
 const engine = ref('');
+const version = ref('');
 
 const isSaxonHidden = ref(false);
 const isXalanHidden = ref(false);
@@ -43,7 +44,7 @@ function prepareRequestBody():string {
         "data": props.xml,
         "process": props.query,
         "processor": engine.value,
-        "version": "3.0"
+        "version": version.value
     });
     return requestBody;
 }
@@ -92,6 +93,12 @@ function showOnlyAvailableEngines() {
                 <option value="xalan" :class="(isXalanHidden) ? 'hidden' : ''">Xalan</option>
                 <option value="libxml" :class="(isLibXMLHidden) ? 'hidden' : ''">libXML</option>
             </select>
+            <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 value="1.0">1.0</option>
+                <option value="2.0">2.0</option>
+                <option value="3.0">3.0</option>
+                <option value="3.1">3.1</option>
+            </select>
             <button class="tool-button">Clear</button>    
             <button class="tool-button" @click="process">Process</button>
         </div>

Frontend/src/router/index.ts

@@ -4,6 +4,9 @@ const landingPage = import("@views/LandingView.vue")
 const restMock = import("@views/RestMockView.vue")
 
 const xsltTool = import("@views/XSLTView.vue")
+const xsdTool = import("@views/XSDView.vue")
+const xpathTool = import("@views/XPathView.vue")
+const xqueryTool = import("@views/XQueryView.vue")
 
 const routes = [
   {
@@ -11,16 +14,26 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/xml/xpath',
+    name: 'xpath',
+    component: () => xpathTool
+  },
+  {
+    path: '/xml/xquery',
+    name: 'xquery',
+    component: () => xqueryTool
+  },
+  {
+    path: '/xml/xsd',
+    name: 'xsd',
+    component: () => xsdTool
+  },
   {
     path: '/xml/xslt',
     name: 'xslt',
     component: () => xsltTool
   },
-  {
-    path: '/xml/xpath',
-    name: 'xpath',
-    component: () => restMock
-  },
 ]
 
 

Frontend/src/views/XPathView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XPath" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>

Frontend/src/views/XQueryView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XQuery" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>

Frontend/src/views/XSDView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <xmlInputFieldComponent prettyName="XSD" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
+
+        <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
+    </div>
+</template>

Frontend/src/views/XSLTView.vue

@@ -13,6 +13,6 @@ const query = ref('');
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
         <xmlInputFieldComponent prettyName="XSLT" @update:xml="(data) => {xml = data}" @update:transform="(data) => {query = data}"></xmlInputFieldComponent>    
 
-        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query"></xmlOutputFieldComponent>
+        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
 </template>