From 1a8672734d8c2b86ee25229770177b7c306745dc Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 08:12:40 +0100
Subject: [PATCH 01/20] Added style classes for tabs

---
 Frontend/src/style.css | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index b405ade..c8fb746 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -13,7 +13,7 @@
 }
 
 .inactive-button {
-    @apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
+    @apply py-2 px-3 h-fit text-slate-400 border border-slate-400 rounded-full
 }
 
 .tool-button {
@@ -34,4 +34,12 @@
 
 .text-field-success {
     @apply shadow-[0px_0px_10px_0px_rgba(52,211,153,1)];
-}
\ No newline at end of file
+}
+
+.tab {
+    @apply py-2 px-3 h-fit dark:text-slate-400 rounded-t-2xl border-t border-l border-r border-slate-400
+}
+
+.tab-active {
+    @apply py-2 px-3 h-fit text-slate-400 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+}

From c2d9deb32250465b755b8221ec59d9c93d655858 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 08:13:23 +0100
Subject: [PATCH 02/20] Added temporary tab interface components

---
 Frontend/src/components/xml/TabComponent.vue  | 31 +++++++++++
 .../components/xml/TabbedInputComponent.vue   | 52 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 Frontend/src/components/xml/TabComponent.vue
 create mode 100644 Frontend/src/components/xml/TabbedInputComponent.vue

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
new file mode 100644
index 0000000..9a58000
--- /dev/null
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true
+    },
+    activeTabId: {
+        type: Number,
+        required: false
+    }
+})
+
+const emit = defineEmits(["activate", "remove"])
+
+function click() {
+    emit("activate", props.id);
+}
+
+function remove() {
+    emit("remove", props.id);
+}
+
+</script>
+
+<template>
+    <div :class="activeTabId == id ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
+        <button @click="click" class="hover:brightness-110"><slot /></button>
+        <button @click="remove" class="hover:brightness-110">x</button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/TabbedInputComponent.vue b/Frontend/src/components/xml/TabbedInputComponent.vue
new file mode 100644
index 0000000..1d7072e
--- /dev/null
+++ b/Frontend/src/components/xml/TabbedInputComponent.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import XmlInputFieldComponent from './XmlInputFieldComponent.vue';
+import TabComponent from './TabComponent.vue';
+import { ref } from 'vue'
+
+const data = ref(new Array<string>)
+
+const activeTabId = ref(0);
+
+const nextTabId = ref(2);
+
+const tabs = ref(new Array<string>);
+tabs.value.push("XML1");
+data.value.push("dupa")
+
+function changeActiveTab(newActiveTabId : number) {
+    activeTabId.value = newActiveTabId;
+}
+
+function removeTab(tabId : number) {
+    if (tabs.value.length <= 1)
+        return
+
+    tabs.value.splice(tabId, 1);
+    data.value.splice(tabId, 1);
+    if (tabId == activeTabId.value)
+        activeTabId.value = 0;
+}
+
+function addTab() {
+    tabs.value.push("XML" + (nextTabId.value++));
+    data.value.push("")
+}
+
+</script>
+
+<template>
+    <div class="flex flex-col justify-stretch items-stretch rounded-2xl mr-2">
+        <div class="flex flex-row justify-between ml-4">
+            <div class="flex flex-row h-1/12 grow-0 gap-2">
+                <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent>
+            </div>
+            <div>
+                <button @click="addTab" class="tool-button">New</button>
+            </div>
+        </div>
+        
+        <div class="flex-1 h-11/12 dark:bg-gray-700 p-2 rounded-xl border border-slate-400 overflow-auto">
+            <XmlInputFieldComponent class="h-full" stylized-name="XML" :data="data[activeTabId]"></XmlInputFieldComponent>
+        </div>
+    </div>
+</template>
\ No newline at end of file

From fc7ce1883e5b503bf8cad5403aaa64d562e36718 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 08:33:05 +0100
Subject: [PATCH 03/20] Created draft of tabbed interface

---
 Frontend/src/components/xml/TabComponent.vue  |  9 +-
 .../xml/XmlTabbedInputComponent.vue           | 84 +++++++++++++++++++
 Frontend/src/views/XSLTView.vue               |  3 +-
 3 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 Frontend/src/components/xml/XmlTabbedInputComponent.vue

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
index 9a58000..479bf5e 100644
--- a/Frontend/src/components/xml/TabComponent.vue
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -5,9 +5,10 @@ const props = defineProps({
         type: Number,
         required: true
     },
-    activeTabId: {
-        type: Number,
-        required: false
+    isActive: {
+        type: Boolean,
+        default: false,
+        required: true
     }
 })
 
@@ -24,7 +25,7 @@ function remove() {
 </script>
 
 <template>
-    <div :class="activeTabId == id ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
+    <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
         <button @click="click" class="hover:brightness-110"><slot /></button>
         <button @click="remove" class="hover:brightness-110">x</button>
     </div>
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
new file mode 100644
index 0000000..d44b3d2
--- /dev/null
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import TabComponent from './TabComponent.vue'
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
+import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
+import { ref } from 'vue'
+import CodeEditor from '../CodeEditorComponent.vue'
+
+const data = ref('')
+const inputFile = ref()
+
+const props = defineProps(
+    {
+        stylizedName: {type: String, required: true},
+        data: {type: String},
+    }
+)
+const emit = defineEmits(['update'])
+
+function sendValue() {
+    emit('update', data.value)
+}
+
+function sendNewValue(newValue : string) {
+    data.value = newValue
+    emit('update', data.value)
+}
+
+function updateData(newData: string) {
+    data.value = newData
+    inputFile.value.value = ''
+    sendValue()
+}
+
+function clear() {
+    updateData('')
+}
+
+function canBeFormatted() {
+    return props.stylizedName.toLowerCase() == 'xml' || 
+           props.stylizedName.toLowerCase() == 'xsd' || 
+           props.stylizedName.toLowerCase() == 'xslt'
+}
+
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            sendNewValue(result)
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
+</script>
+
+<template>
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
+        <div class="flex justify-between mb-2">
+            <div class="flex gap-2">
+                <TabComponent id="1" isActive>Karta 1</TabComponent>
+                <TabComponent id="2">Karta 2</TabComponent>
+                <TabComponent id="3">Karta 3</TabComponent>
+            </div>
+            <div class="flex gap-2">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+                </div>
+                <button class="tool-button">New</button>
+            </div>
+        </div>
+        
+        <div class="flex place-content-between w-full items-center">
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-auto">
+                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+                <button class="tool-button" @click="clear">Clear</button>
+            </div>
+        </div>
+        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 3ca7e0c..dad8c43 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue';
+import xmlTabbedInputComponent from '@/components/xml/XmlTabbedInputComponent.vue';
 import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
 import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
 import { ref } from 'vue';
@@ -18,7 +19,7 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>

From e79cb7d8732daf9ac1828c2bb550cf0c50bd5db3 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 13:20:01 +0100
Subject: [PATCH 04/20] Added basic functionality

---
 Frontend/src/components/xml/TabComponent.vue  | 14 ++--
 .../components/xml/TabbedInputComponent.vue   |  2 +-
 .../xml/XmlTabbedInputComponent.vue           | 61 ++++++++++++--
 .../src/components/xml/XmlToolComponent.vue   | 83 -------------------
 4 files changed, 64 insertions(+), 96 deletions(-)
 delete mode 100644 Frontend/src/components/xml/XmlToolComponent.vue

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
index 479bf5e..480d9b6 100644
--- a/Frontend/src/components/xml/TabComponent.vue
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -8,25 +8,25 @@ const props = defineProps({
     isActive: {
         type: Boolean,
         default: false,
-        required: true
+        required: false
     }
 })
 
-const emit = defineEmits(["activate", "remove"])
+const emit = defineEmits(["click:activate", "click:remove"])
 
-function click() {
-    emit("activate", props.id);
+function activate() {
+    emit("click:activate", props.id);
 }
 
 function remove() {
-    emit("remove", props.id);
+    emit("click:remove", props.id);
 }
 
 </script>
 
 <template>
     <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
-        <button @click="click" class="hover:brightness-110"><slot /></button>
-        <button @click="remove" class="hover:brightness-110">x</button>
+        <button @click="activate" class="hover:brightness-110"><slot /></button>
+        <button @click="remove" class="hover:brightness-110 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/TabbedInputComponent.vue b/Frontend/src/components/xml/TabbedInputComponent.vue
index 1d7072e..b42dc5b 100644
--- a/Frontend/src/components/xml/TabbedInputComponent.vue
+++ b/Frontend/src/components/xml/TabbedInputComponent.vue
@@ -38,7 +38,7 @@ function addTab() {
     <div class="flex flex-col justify-stretch items-stretch rounded-2xl mr-2">
         <div class="flex flex-row justify-between ml-4">
             <div class="flex flex-row h-1/12 grow-0 gap-2">
-                <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent>
+                <!-- <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent> -->
             </div>
             <div>
                 <button @click="addTab" class="tool-button">New</button>
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index d44b3d2..aabb036 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -5,6 +5,15 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
 import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
+const newTabId = ref(0);
+const activeTabId = ref(0)
+const tabs = ref(new Array<TabData>);
+tabs.value.push({
+    id: newTabId.value++,
+    name: "XML1",
+    data: "",
+})
+
 const data = ref('')
 const inputFile = ref()
 
@@ -16,6 +25,12 @@ const props = defineProps(
 )
 const emit = defineEmits(['update'])
 
+interface TabData {
+    id: number;
+    name: string;
+    data: string;
+}
+
 function sendValue() {
     emit('update', data.value)
 }
@@ -53,21 +68,57 @@ function readFile(file : any) {
     reader.readAsText(file.target.files[0])
 }
 
+function changeActiveTab(id : number) {
+    let index = findIndexWithID(activeTabId.value);
+    let newIndex = findIndexWithID(id);
+    
+    tabs.value.at(index)!.data = data.value;
+    activeTabId.value = id;
+    data.value = tabs.value.at(newIndex)!.data;
+}
+
+function addTab() {
+    tabs.value.push({
+        id: newTabId.value++,
+        name: "XML" + newTabId.value,
+        data: ""
+    })
+}
+
+function removeTab(id : number) {
+    if (tabs.value.length == 1)
+        return
+
+    let index = findIndexWithID(activeTabId.value);
+    tabs.value.splice(index, 1);
+    if (activeTabId.value == id) {
+        activeTabId.value = tabs.value.at(0)!.id;
+        data.value = tabs.value.at(0)!.data;
+    }
+    
+}
+
+function findIndexWithID(id : number) : number {
+    for (let i = 0; tabs.value.length; i++) 
+        if (tabs.value.at(i)!.id == id)
+            return i;
+    
+    return -1;
+}
+
 </script>
 
 <template>
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex justify-between mb-2">
-            <div class="flex gap-2">
-                <TabComponent id="1" isActive>Karta 1</TabComponent>
-                <TabComponent id="2">Karta 2</TabComponent>
-                <TabComponent id="3">Karta 3</TabComponent>
+            <div class="flex gap-2 overflow-x-auto">
+                <TabComponent @click:activate="changeActiveTab" @click:remove="removeTab" v-for="tab in tabs" :id="tab.id" :isActive="tab.id == activeTabId">{{ tab.name }}</TabComponent>
             </div>
             <div class="flex gap-2">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-                <button class="tool-button">New</button>
+                <button class="tool-button" @click="addTab">New</button>
             </div>
         </div>
         
diff --git a/Frontend/src/components/xml/XmlToolComponent.vue b/Frontend/src/components/xml/XmlToolComponent.vue
deleted file mode 100644
index e9bd4cf..0000000
--- a/Frontend/src/components/xml/XmlToolComponent.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-
-const xml = ref('');
-const transform = ref('');
-const transformPlaceholder = ref('');
-const engine = ref('');
-const result = ref('');
-
-const activeXmlTool = ref('');
-
-async function submit() {
-  const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-  const url = document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + activeXmlTool.value;
-
-  var version = "1.0";
-  if (engine.value == "saxon")
-    version = "3.0"
-
-  var requestBody = JSON.stringify({
-    "data": xml.value,
-    "process": transform.value,
-    "processor": engine.value,
-    "version": version
-  });
-
-  var request = new Request(url, {
-    body: requestBody,
-    method: "POST"
-  });
-
-
-  var responseBody = await fetch(request)
-    .then(response => response.json())
-    .then((body) => body);
-
-  result.value = responseBody.result;
-}
-
-watch(activeXmlTool, (tool) => {
-  if (tool == "xpath")
-    transformPlaceholder.value = "XPath";
-  if (tool == "xsd")
-    transformPlaceholder.value = "XSD";
-  if (tool == "xslt")
-    transformPlaceholder.value = "XSLT";
-  if (tool == "xquery")
-    transformPlaceholder.value = "XQuery";
-  
-    transform.value = "";
-})
-
-onMounted(() => {
-  activeXmlTool.value = "xpath";
-});
-</script>
-
-<template>
-  <label for="xpath">XPath</label>
-  <input v-model="activeXmlTool" type="radio" id="xpath" name="xmltool" value="xpath" />
-
-  <label for="xslt">XSLT</label>
-  <input v-model="activeXmlTool" type="radio" id="xslt" name="xmltool" value="xslt" />
-
-  <label for="xsd">XSD</label>
-  <input v-model="activeXmlTool" type="radio" id="xsd" name="xmltool" value="xsd" />
-  
-  <label for="xquery">XQuery</label>
-  <input v-model="activeXmlTool" type="radio" id="xquery" name="xmltool" value="xquery" />
-  <br /><br />
-  <select name="engine" v-model="engine">
-    <option value="saxon" selected>Saxon</option>
-    <option value="xalan">Xalan</option>
-    <option value="libxml">libXML</option>
-  </select>
-  <br />
-  <textarea v-model="xml" id="xml" placeholder="XML"></textarea>
-  <textarea v-model="transform" id="transform" :placeholder="transformPlaceholder"></textarea><br />
-  <button @click="submit">Submit</button><br />
-  <pre><code>{{ result }}</code></pre>
-</template>
-
-<style scoped></style>

From a5b59adacb73e922fb23e052b252c0bf118b03c1 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 13:57:42 +0100
Subject: [PATCH 05/20] Removed old tab component

---
 .../components/xml/TabbedInputComponent.vue   | 52 -------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 Frontend/src/components/xml/TabbedInputComponent.vue

diff --git a/Frontend/src/components/xml/TabbedInputComponent.vue b/Frontend/src/components/xml/TabbedInputComponent.vue
deleted file mode 100644
index b42dc5b..0000000
--- a/Frontend/src/components/xml/TabbedInputComponent.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import XmlInputFieldComponent from './XmlInputFieldComponent.vue';
-import TabComponent from './TabComponent.vue';
-import { ref } from 'vue'
-
-const data = ref(new Array<string>)
-
-const activeTabId = ref(0);
-
-const nextTabId = ref(2);
-
-const tabs = ref(new Array<string>);
-tabs.value.push("XML1");
-data.value.push("dupa")
-
-function changeActiveTab(newActiveTabId : number) {
-    activeTabId.value = newActiveTabId;
-}
-
-function removeTab(tabId : number) {
-    if (tabs.value.length <= 1)
-        return
-
-    tabs.value.splice(tabId, 1);
-    data.value.splice(tabId, 1);
-    if (tabId == activeTabId.value)
-        activeTabId.value = 0;
-}
-
-function addTab() {
-    tabs.value.push("XML" + (nextTabId.value++));
-    data.value.push("")
-}
-
-</script>
-
-<template>
-    <div class="flex flex-col justify-stretch items-stretch rounded-2xl mr-2">
-        <div class="flex flex-row justify-between ml-4">
-            <div class="flex flex-row h-1/12 grow-0 gap-2">
-                <!-- <TabComponent v-for="item in tabs" :id="tabs.indexOf(item)" @activate="changeActiveTab" @remove="removeTab" :active-tab-id="activeTabId">{{ item }}</TabComponent> -->
-            </div>
-            <div>
-                <button @click="addTab" class="tool-button">New</button>
-            </div>
-        </div>
-        
-        <div class="flex-1 h-11/12 dark:bg-gray-700 p-2 rounded-xl border border-slate-400 overflow-auto">
-            <XmlInputFieldComponent class="h-full" stylized-name="XML" :data="data[activeTabId]"></XmlInputFieldComponent>
-        </div>
-    </div>
-</template>
\ No newline at end of file

From 6831a510fb47866677742eecc545d1a8ab4d6b9a Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 13:58:14 +0100
Subject: [PATCH 06/20] Changed value is sent to backend

---
 Frontend/src/components/xml/TabComponent.vue  |  4 +-
 .../xml/XmlTabbedInputComponent.vue           | 39 +++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
index 480d9b6..cedc062 100644
--- a/Frontend/src/components/xml/TabComponent.vue
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -25,8 +25,8 @@ function remove() {
 </script>
 
 <template>
-    <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
-        <button @click="activate" class="hover:brightness-110"><slot /></button>
+    <div @click="activate" :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3 cursor-pointer">
+        <button class="hover:brightness-110"><slot /></button>
         <button @click="remove" class="hover:brightness-110 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index aabb036..5d64066 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -6,7 +6,9 @@ import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
 const newTabId = ref(0);
-const activeTabId = ref(0)
+const activeTabId = ref(0);
+const prevActiveTabId = ref(-1);
+
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
     id: newTabId.value++,
@@ -60,12 +62,18 @@ function readFile(file : any) {
     
     const reader = new FileReader()
     reader.onloadend = () => {
-        var result = reader.result?.toString()
-        if (typeof result == "string")
-            sendNewValue(result)
+        var result = reader.result!.toString();
+        console.log(result);
+        sendNewValue(result);
             
     }
-    reader.readAsText(file.target.files[0])
+    reader.readAsText(file.target.files[0]);
+    let activeIndex = findIndexWithID(activeTabId.value);
+    
+    let filePath = inputFile.value.value.split("\\");
+    let fileName = filePath.at(filePath.length - 1);
+    
+    tabs.value.at(activeIndex)!.name = fileName;
 }
 
 function changeActiveTab(id : number) {
@@ -73,8 +81,11 @@ function changeActiveTab(id : number) {
     let newIndex = findIndexWithID(id);
     
     tabs.value.at(index)!.data = data.value;
+    prevActiveTabId.value = activeTabId.value;
     activeTabId.value = id;
     data.value = tabs.value.at(newIndex)!.data;
+
+    sendValue();
 }
 
 function addTab() {
@@ -83,18 +94,24 @@ function addTab() {
         name: "XML" + newTabId.value,
         data: ""
     })
+
+    console.log(tabs.value);
 }
 
 function removeTab(id : number) {
     if (tabs.value.length == 1)
         return
 
-    let index = findIndexWithID(activeTabId.value);
-    tabs.value.splice(index, 1);
-    if (activeTabId.value == id) {
-        activeTabId.value = tabs.value.at(0)!.id;
-        data.value = tabs.value.at(0)!.data;
-    }
+    let indexToRemove = findIndexWithID(id);
+    let activeIndex = findIndexWithID(activeTabId.value);
+
+    if (indexToRemove == activeIndex && activeIndex == 0)
+        changeActiveTab(tabs.value.at(1)!.id)
+    else if (indexToRemove == activeIndex)
+        changeActiveTab(tabs.value.at(0)!.id)
+        
+    
+    tabs.value.splice(indexToRemove, 1);
     
 }
 

From 2e2f571c93c27f6de72cf97a295425c046810714 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 14:01:12 +0100
Subject: [PATCH 07/20] Added semicolons

---
 .../src/components/xml/XmlTabbedInputComponent.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index 5d64066..2a43218 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -34,22 +34,22 @@ interface TabData {
 }
 
 function sendValue() {
-    emit('update', data.value)
+    emit('update', data.value);
 }
 
 function sendNewValue(newValue : string) {
-    data.value = newValue
-    emit('update', data.value)
+    data.value = newValue;
+    emit('update', data.value);
 }
 
 function updateData(newData: string) {
-    data.value = newData
-    inputFile.value.value = ''
-    sendValue()
+    data.value = newData;
+    inputFile.value.value = '';
+    sendValue();
 }
 
 function clear() {
-    updateData('')
+    updateData('');
 }
 
 function canBeFormatted() {

From 02fbb78e51594906fc82b2f3a521634931544d67 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 14:38:16 +0100
Subject: [PATCH 08/20] Switch TS lib to ES2022

---
 Frontend/tsconfig.app.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/Frontend/tsconfig.app.json b/Frontend/tsconfig.app.json
index 3e5b621..f2d357e 100644
--- a/Frontend/tsconfig.app.json
+++ b/Frontend/tsconfig.app.json
@@ -3,6 +3,11 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
+    "lib": [
+      "DOM",
+      "ES2022",
+      "ESNext"
+    ],
     "composite": true,
     "baseUrl": ".",
     "paths": {

From d90fd9d38eab962b2b00783b2d65a4e81f3ec3b7 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 23 Nov 2023 14:48:53 +0100
Subject: [PATCH 09/20] Visual fixes

---
 Frontend/src/components/xml/TabComponent.vue            | 2 +-
 Frontend/src/components/xml/XmlInputFieldComponent.vue  | 2 +-
 Frontend/src/components/xml/XmlTabbedInputComponent.vue | 2 +-
 Frontend/src/style.css                                  | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
index cedc062..253f288 100644
--- a/Frontend/src/components/xml/TabComponent.vue
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -27,6 +27,6 @@ function remove() {
 <template>
     <div @click="activate" :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3 cursor-pointer">
         <button class="hover:brightness-110"><slot /></button>
-        <button @click="remove" class="hover:brightness-110 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
+        <button @click="remove" class="hover:brightness-110 hover:bg-blue-100 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 7414e11..42703b7 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -63,7 +63,7 @@ function readFile(file : any) {
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
                 
-                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index 2a43218..f01ee90 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -142,7 +142,7 @@ function findIndexWithID(id : number) : number {
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white mr-2">{{ stylizedName }}</span>
             <div class="flex space-x-2 pb-2 overflow-x-auto">
-                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index c8fb746..c85c2d2 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -37,9 +37,9 @@
 }
 
 .tab {
-    @apply py-2 px-3 h-fit dark:text-slate-400 rounded-t-2xl border-t border-l border-r border-slate-400
+    @apply py-2 px-3 h-fit dark:text-slate-400 rounded-t-2xl border-t border-l border-r border-slate-400 
 }
 
 .tab-active {
-    @apply py-2 px-3 h-fit text-slate-400 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }

From ca9b07fabcf3c04a23354b8daaf0587ddca6595c Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 24 Nov 2023 11:39:27 +0100
Subject: [PATCH 10/20] Expanded landing page description

---
 .../components/landing/LandingComponent.vue   | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/Frontend/src/components/landing/LandingComponent.vue b/Frontend/src/components/landing/LandingComponent.vue
index c8b12a8..22cfd17 100644
--- a/Frontend/src/components/landing/LandingComponent.vue
+++ b/Frontend/src/components/landing/LandingComponent.vue
@@ -5,14 +5,38 @@
 <template>
   <div class="dark:text-slate-100">
     <h1 class="text-3xl mb-4">Welcome to Release11 Tools</h1>
-    <h2 class="text-xl">Our toolset is split to three main categories:</h2>
-    <ol class="list-decimal ml-5">
+    <h2 class="text-xl">Our tool set is split to three main categories:</h2>
+    <ul class="list-decimal ml-5">
       <li><strong>XML</strong> - containing various tools that allow to validate and transform any XML</li>
       <li><strong>Formatter</strong> - containing tools for formatting text files in various formats</li>
       <li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
-    </ol>
+      <li><strong>Encoder</strong> - consist of encoders for Base64 and URL</li>
+    </ul>
+    <br/>
+
+    <h2 class="text-xl mt-2">XML - Tools:</h2>
+    <ul class="list-decimal ml-5">
+      <li><strong>XPath</strong> - This is tool that allows to parse XPath on selected XML</li>
+      <li><strong>XQuery</strong> - Allows to execute XQuery on provided XML file.</li>
+      <li><strong>XSD</strong> - Allows to validate XML against provided XSD schema.</li>
+      <li><strong>XSLT</strong> - Allows to transformate XML using XSLT transformate.</li>
+    </ul>
+    
+    <h2 class="text-xl mt-2">Formatter - Tools:</h2>
+    <p>These are tools that allow to format or minimize files in bespoken formats.</p>
+    
+    <h2 class="text-xl mt-2">REST - Tools:</h2>
+    <p>This is tools that allow to created mocked REST Service that can be used to test REST clients.</p>
+    
+    <h2 class="text-xl mt-2">Encoder - Tools:</h2>
+    <ul class="list-decimal ml-5">
+      <li><strong>Base64</strong> - This is tool allowing to encode text to base64 and decode base64 to text or image.</li>
+      <li><strong>URL</strong> - This tool allow to encode string in the way that is used by browser when you put it in address bar.</li>
+    </ul>
+    
   </div>
   
 </template>
 
 <style scoped></style>
+

From fd5996c57204b7cd635fda1bd5b916c251082925 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 29 Nov 2023 14:48:07 +0100
Subject: [PATCH 11/20] Added new endpoint handling

---
 Frontend/src/components/common/TabData.ts     |  5 ++
 .../xml/XmlOutputFieldComponent.vue           | 61 +++++++++++++++++--
 .../xml/XmlTabbedInputComponent.vue           | 17 +++---
 Frontend/src/views/XSLTView.vue               | 15 ++++-
 4 files changed, 79 insertions(+), 19 deletions(-)
 create mode 100644 Frontend/src/components/common/TabData.ts

diff --git a/Frontend/src/components/common/TabData.ts b/Frontend/src/components/common/TabData.ts
new file mode 100644
index 0000000..0e965b3
--- /dev/null
+++ b/Frontend/src/components/common/TabData.ts
@@ -0,0 +1,5 @@
+export interface TabData {
+    id: number;
+    name: string;
+    data: string;
+}
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 116cd87..c7c551c 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { type TabData } from '../common/TabData'
 import CodeEditor from '../CodeEditorComponent.vue';
+import { xml } from '@codemirror/lang-xml';
 
 
 const props = defineProps(
     {
         tool: {type: String, required: true},
-        xml: {type: String},
+        xml: {type: String, required: false},
+        multiXml: {type: Array<TabData>, required: false},
         query: {type: String}
     }
 )
@@ -90,27 +93,73 @@ function process() {
 
 function prepareRequest():Request {
     var request = new Request(prepareURL(), {
-        body: prepareRequestBody(),
+        body: selectRequestBodyType(),
         method: "POST"
     });
     return request
+    
 }
 
 function prepareURL(): string {
-   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
+    const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+   
+    var tool = props.tool;
+    if (props.multiXml && props.multiXml.length > 1)
+        tool = "multiple/xslt";
+
+    return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
 }
 
-function prepareRequestBody():string {
+function selectRequestBodyType() : string {
+    if (props.multiXml && props.multiXml.length > 1)
+        return prepareRequestBodyMultiXml();
+    else if (props.multiXml)
+        return prepareRequestBodySingleXml(props.multiXml.at(0)!.data);
+    else
+        return prepareRequestBodySingleXml(props.xml!);
+}
+
+function prepareRequestBodySingleXml(data: string):string {
     var requestBody = JSON.stringify({
-        "data": props.xml,
+        "data": data,
         "processorData": props.query,
         "processor": engine.value,
         "version": version.value
     });
+    console.log(requestBody);
     return requestBody;
 }
 
+function prepareRequestBodyMultiXml():string {
+    var xmlFilesArray = convertDataArray(props.multiXml!);
+
+    var requestBody = JSON.stringify({
+        "data": xmlFilesArray,
+        "processorData": props.query,
+        "processor": engine.value,
+        "version": version.value
+    });
+    console.log(requestBody);
+    return requestBody;
+}
+
+function convertDataArray(data: Array<TabData>) {
+    let result = new Array<Object>;
+    data.forEach(element => {
+        let fileName = element.name;
+        if (!fileName.endsWith(".xml")) {
+            fileName += ".xml";
+        }
+
+        result.push({
+            fileName: fileName,
+            fileData: element.data,
+        });
+    });
+
+    return result;
+}
+
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index f01ee90..daabb14 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -2,12 +2,12 @@
 import TabComponent from './TabComponent.vue'
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
+import { type TabData } from '../common/TabData'
 import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
 const newTabId = ref(0);
 const activeTabId = ref(0);
-const prevActiveTabId = ref(-1);
 
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
@@ -22,28 +22,26 @@ const inputFile = ref()
 const props = defineProps(
     {
         stylizedName: {type: String, required: true},
-        data: {type: String},
+        data: {type: Array<TabData>},
     }
 )
 const emit = defineEmits(['update'])
 
-interface TabData {
-    id: number;
-    name: string;
-    data: string;
-}
+
 
 function sendValue() {
-    emit('update', data.value);
+    emit('update', tabs.value);
 }
 
 function sendNewValue(newValue : string) {
     data.value = newValue;
-    emit('update', data.value);
+    tabs.value.at(findIndexWithID(activeTabId.value))!.data = newValue;
+    emit('update', tabs.value);
 }
 
 function updateData(newData: string) {
     data.value = newData;
+    tabs.value.at(findIndexWithID(activeTabId.value))!.data = newData;
     inputFile.value.value = '';
     sendValue();
 }
@@ -81,7 +79,6 @@ function changeActiveTab(id : number) {
     let newIndex = findIndexWithID(id);
     
     tabs.value.at(index)!.data = data.value;
-    prevActiveTabId.value = activeTabId.value;
     activeTabId.value = id;
     data.value = tabs.value.at(newIndex)!.data;
 
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index dad8c43..9cb5784 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -3,26 +3,35 @@ import xmlInputFieldComponent from '@/components/xml/XmlInputFieldComponent.vue'
 import xmlTabbedInputComponent from '@/components/xml/XmlTabbedInputComponent.vue';
 import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
 import TooltipComponent from '@/components/xml/tooltips/TooltipComponent.vue';
+
+import { type TabData } from '@/components/common/TabData';
 import { ref } from 'vue';
 
 
-const xml = ref('');
+const xml = ref(new Array<TabData>);
 const query = ref('');
 const version = ref('');
 
 function updateVersion(newVersion: string) {
     version.value = newVersion;
 }
+
+function updateXML(data: Array<TabData>) {
+    xml.value = data;
+    console.log("Update:" + data);
+    console.log(data);
+}
+
 </script>
 
 <template>
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="updateXML"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
-            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
+            <xmlOutputFieldComponent tool="xslt" :multi-xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
         </div>
         <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
     </div>

From 00e64ee83da38d7d137d921f65b2d46142adaaae Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 07:28:46 +0100
Subject: [PATCH 12/20] Removed duplicate function

---
 Frontend/src/components/xml/XmlInputFieldComponent.vue |  9 ++-------
 .../src/components/xml/XmlTabbedInputComponent.vue     | 10 ++--------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 42703b7..a613568 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -19,11 +19,6 @@ function sendValue() {
     emit('update', data.value)
 }
 
-function sendNewValue(newValue : string) {
-    data.value = newValue
-    emit('update', data.value)
-}
-
 function updateData(newData: string) {
     data.value = newData
     inputFile.value.value = ''
@@ -46,7 +41,7 @@ function readFile(file : any) {
     reader.onloadend = () => {
         var result = reader.result?.toString()
         if (typeof result == "string")
-            sendNewValue(result)
+            updateData(result)
             
     }
     reader.readAsText(file.target.files[0])
@@ -68,6 +63,6 @@ function readFile(file : any) {
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index daabb14..7da2527 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -33,12 +33,6 @@ function sendValue() {
     emit('update', tabs.value);
 }
 
-function sendNewValue(newValue : string) {
-    data.value = newValue;
-    tabs.value.at(findIndexWithID(activeTabId.value))!.data = newValue;
-    emit('update', tabs.value);
-}
-
 function updateData(newData: string) {
     data.value = newData;
     tabs.value.at(findIndexWithID(activeTabId.value))!.data = newData;
@@ -62,7 +56,7 @@ function readFile(file : any) {
     reader.onloadend = () => {
         var result = reader.result!.toString();
         console.log(result);
-        sendNewValue(result);
+        updateData(result);
             
     }
     reader.readAsText(file.target.files[0]);
@@ -144,6 +138,6 @@ function findIndexWithID(id : number) : number {
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
+        <CodeEditor @update:updated-code="updateData" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
     </div>
 </template>
\ No newline at end of file

From e0fe2482c6a60413c9a0d5b8a0b7dfb900a41a05 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 07:32:53 +0100
Subject: [PATCH 13/20] Extracted switching to existing tab

---
 .../src/components/xml/XmlTabbedInputComponent.vue   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index 7da2527..fcaea5a 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -94,16 +94,20 @@ function removeTab(id : number) {
         return
 
     let indexToRemove = findIndexWithID(id);
+    
+    switchToExistingTab(indexToRemove)
+    
+    tabs.value.splice(indexToRemove, 1);
+    
+}
+
+function switchToExistingTab(indexToRemove: number) {
     let activeIndex = findIndexWithID(activeTabId.value);
 
     if (indexToRemove == activeIndex && activeIndex == 0)
         changeActiveTab(tabs.value.at(1)!.id)
     else if (indexToRemove == activeIndex)
         changeActiveTab(tabs.value.at(0)!.id)
-        
-    
-    tabs.value.splice(indexToRemove, 1);
-    
 }
 
 function findIndexWithID(id : number) : number {

From 82c34204140a3baf737b91ec8b263f9b02624cf5 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:05:35 +0100
Subject: [PATCH 14/20] Bugfixes

---
 .../xml/XmlOutputFieldComponent.vue           | 48 +++++++++----------
 .../xml/XmlTabbedInputComponent.vue           | 23 +++++----
 Frontend/src/views/XSLTView.vue               | 10 +---
 3 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index c7c551c..2377347 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -2,14 +2,11 @@
 import { onMounted, ref } from 'vue';
 import { type TabData } from '../common/TabData'
 import CodeEditor from '../CodeEditorComponent.vue';
-import { xml } from '@codemirror/lang-xml';
-
 
 const props = defineProps(
     {
         tool: {type: String, required: true},
-        xml: {type: String, required: false},
-        multiXml: {type: Array<TabData>, required: false},
+        xml: {type: [String, Array<TabData>], required: true},
         query: {type: String}
     }
 )
@@ -18,10 +15,10 @@ const emit = defineEmits(["update"]);
 
 const result = ref('');
 
-var enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
+let enginesForCurrentTool = ref(["saxon", "xalan", "libxml"]);
 
 const allVersions = ["1.0", "2.0", "3.0", "3.1"];
-var versionsForCurrentEngine = ref([""]);
+let versionsForCurrentEngine = ref([""]);
 
 const engine = ref('');
 const version = ref('');
@@ -85,14 +82,20 @@ function selectDefaultVersion() {
 }
 
 function process() {
-    var request:Request = prepareRequest();
+    let request:Request = prepareRequest();
     fetchRequest(request).then((data) => {
         updateOutputField(data);
     })
 }
 
+function updateOutputField(data: any) {
+    result.value = data.result
+    errorOccurred.value = data.status != "OK"
+    successOccurred.value = data.status == "OK"
+}
+
 function prepareRequest():Request {
-    var request = new Request(prepareURL(), {
+    let request = new Request(prepareURL(), {
         body: selectRequestBodyType(),
         method: "POST"
     });
@@ -103,43 +106,44 @@ function prepareRequest():Request {
 function prepareURL(): string {
     const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
    
-    var tool = props.tool;
-    if (props.multiXml && props.multiXml.length > 1)
+    let tool = props.tool;
+    if (Array.isArray(props.xml) && props.xml.length > 1)
         tool = "multiple/xslt";
 
     return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + tool;
 }
 
 function selectRequestBodyType() : string {
-    if (props.multiXml && props.multiXml.length > 1)
+    if (Array.isArray(props.xml) && props.xml.length > 1)
         return prepareRequestBodyMultiXml();
-    else if (props.multiXml)
-        return prepareRequestBodySingleXml(props.multiXml.at(0)!.data);
+    else if (Array.isArray(props.xml))
+        return prepareRequestBodySingleXml(props.xml.at(0)!.data);
     else
         return prepareRequestBodySingleXml(props.xml!);
 }
 
 function prepareRequestBodySingleXml(data: string):string {
-    var requestBody = JSON.stringify({
+    let requestBody = JSON.stringify({
         "data": data,
         "processorData": props.query,
         "processor": engine.value,
         "version": version.value
     });
-    console.log(requestBody);
     return requestBody;
 }
 
 function prepareRequestBodyMultiXml():string {
-    var xmlFilesArray = convertDataArray(props.multiXml!);
+    if (!Array.isArray(props.xml))
+        return "";
 
-    var requestBody = JSON.stringify({
+    let xmlFilesArray = convertDataArray(props.xml);
+
+    let requestBody = JSON.stringify({
         "data": xmlFilesArray,
         "processorData": props.query,
         "processor": engine.value,
         "version": version.value
     });
-    console.log(requestBody);
     return requestBody;
 }
 
@@ -161,17 +165,13 @@ function convertDataArray(data: Array<TabData>) {
 }
 
 async function fetchRequest(request: Request):Promise<JSON> {
-    var responseBody = await fetch(request)
+    let responseBody = await fetch(request)
     .then(response => response.json())
     .then((body) => body)
     return responseBody
 }
 
-function updateOutputField(data: any) {
-    result.value = data.result
-    errorOccurred.value = data.status != "OK"
-    successOccurred.value = data.status == "OK"
-}
+
 
 function clear() {
     result.value = ""
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index fcaea5a..5a4975a 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -54,18 +54,19 @@ function readFile(file : any) {
     
     const reader = new FileReader()
     reader.onloadend = () => {
-        var result = reader.result!.toString();
-        console.log(result);
+        let result = reader.result!.toString();
+        
+        let activeIndex = findIndexWithID(activeTabId.value);
+        
+        let filePath = inputFile.value.value.split("\\");
+        let fileName = filePath.at(filePath.length - 1);
+        
+        tabs.value.at(activeIndex)!.name = fileName;
         updateData(result);
-            
+        
     }
     reader.readAsText(file.target.files[0]);
-    let activeIndex = findIndexWithID(activeTabId.value);
     
-    let filePath = inputFile.value.value.split("\\");
-    let fileName = filePath.at(filePath.length - 1);
-    
-    tabs.value.at(activeIndex)!.name = fileName;
 }
 
 function changeActiveTab(id : number) {
@@ -84,9 +85,7 @@ function addTab() {
         id: newTabId.value++,
         name: "XML" + newTabId.value,
         data: ""
-    })
-
-    console.log(tabs.value);
+    });
 }
 
 function removeTab(id : number) {
@@ -94,7 +93,7 @@ function removeTab(id : number) {
         return
 
     let indexToRemove = findIndexWithID(id);
-    
+
     switchToExistingTab(indexToRemove)
     
     tabs.value.splice(indexToRemove, 1);
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 9cb5784..5495944 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -16,22 +16,16 @@ function updateVersion(newVersion: string) {
     version.value = newVersion;
 }
 
-function updateXML(data: Array<TabData>) {
-    xml.value = data;
-    console.log("Update:" + data);
-    console.log(data);
-}
-
 </script>
 
 <template>
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="updateXML"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
-            <xmlOutputFieldComponent tool="xslt" :multi-xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
         </div>
         <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
     </div>

From 859809810d1435c465e910a1b1a28bf5acb86177 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:08:23 +0100
Subject: [PATCH 15/20] Fixed filename not showing in file selector in
 non-tabbed input

---
 Frontend/src/components/xml/XmlInputFieldComponent.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index a613568..3ac39e4 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -19,9 +19,10 @@ function sendValue() {
     emit('update', data.value)
 }
 
-function updateData(newData: string) {
+function updateData(newData: string, clearFileSelector: boolean = true) {
     data.value = newData
-    inputFile.value.value = ''
+    if (clearFileSelector)
+        inputFile.value.value = '';
     sendValue()
 }
 
@@ -39,9 +40,9 @@ function readFile(file : any) {
     
     const reader = new FileReader()
     reader.onloadend = () => {
-        var result = reader.result?.toString()
+        let result = reader.result?.toString()
         if (typeof result == "string")
-            updateData(result)
+            updateData(result, false);
             
     }
     reader.readAsText(file.target.files[0])

From 064cd9cc879f5927253bddd71bb204572e557523 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:13:45 +0100
Subject: [PATCH 16/20] Made isVersionSelectionAvailable more specific

---
 .../src/components/xml/XmlOutputFieldComponent.vue   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 2377347..ec56e37 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -7,7 +7,7 @@ const props = defineProps(
     {
         tool: {type: String, required: true},
         xml: {type: [String, Array<TabData>], required: true},
-        query: {type: String}
+        query: {type: String, required: true}
     }
 )
 
@@ -184,16 +184,16 @@ function emitVersionChange() {
 }
 
 function isVersionSelectionAvailable() {
-    return !(props.tool == "xsd");
+    return !(versionsForCurrentEngine.value.length == 1 && versionsForCurrentEngine.value.at(0) == "N/A");
 }
 
 function highlightField() {
-    if (errorOccurred.value) {
+    if (errorOccurred.value)
         return "text-field-error";
-    }
-    if (successOccurred.value) {
+
+    if (successOccurred.value)
         return "text-field-success";
-    }
+
     return "";
 }
 

From d72f91d8102a529c8aeb46307991b344b4b7a912 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:21:31 +0100
Subject: [PATCH 17/20] Implemented tab count limit

---
 .../components/xml/XmlInputFieldComponent.vue |  6 ++---
 .../xml/XmlTabbedInputComponent.vue           | 27 ++++++++++++-------
 Frontend/src/views/XSLTView.vue               |  2 +-
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 3ac39e4..8780c3d 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -4,9 +4,6 @@ import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatte
 import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
-const data = ref('')
-const inputFile = ref()
-
 const props = defineProps(
     {
         stylizedName: {type: String, required: true},
@@ -15,6 +12,9 @@ const props = defineProps(
 )
 const emit = defineEmits(['update'])
 
+const data = ref('')
+const inputFile = ref()
+
 function sendValue() {
     emit('update', data.value)
 }
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index 5a4975a..3584025 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -6,6 +6,15 @@ import { type TabData } from '../common/TabData'
 import { ref } from 'vue'
 import CodeEditor from '../CodeEditorComponent.vue'
 
+const props = defineProps(
+    {
+        stylizedName: {type: String, required: true},
+        data: {type: Array<TabData>},
+        tabCountLimit: {type: Number, required: false}
+    }
+)
+const emit = defineEmits(['update'])
+
 const newTabId = ref(0);
 const activeTabId = ref(0);
 
@@ -19,15 +28,6 @@ tabs.value.push({
 const data = ref('')
 const inputFile = ref()
 
-const props = defineProps(
-    {
-        stylizedName: {type: String, required: true},
-        data: {type: Array<TabData>},
-    }
-)
-const emit = defineEmits(['update'])
-
-
 
 function sendValue() {
     emit('update', tabs.value);
@@ -81,6 +81,9 @@ function changeActiveTab(id : number) {
 }
 
 function addTab() {
+    if (isTabCountLimitAchieved())
+        return
+
     tabs.value.push({
         id: newTabId.value++,
         name: "XML" + newTabId.value,
@@ -88,6 +91,10 @@ function addTab() {
     });
 }
 
+function isTabCountLimitAchieved() {
+    return props.tabCountLimit && tabs.value.length == props.tabCountLimit
+}
+
 function removeTab(id : number) {
     if (tabs.value.length == 1)
         return
@@ -129,7 +136,7 @@ function findIndexWithID(id : number) : number {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-                <button class="tool-button" @click="addTab">New</button>
+                <button :class="isTabCountLimitAchieved() ? 'inactive-button' : 'tool-button'" @click="addTab">New</button>
             </div>
         </div>
         
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 5495944..b00dc61 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -22,7 +22,7 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>

From a6fa615bc4b52eefde7b5cb0523c715c320f50fc Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:35:31 +0100
Subject: [PATCH 18/20] Fixed incorrect tab switching on closing

---
 Frontend/src/components/xml/TabComponent.vue            | 4 ++--
 Frontend/src/components/xml/XmlTabbedInputComponent.vue | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/xml/TabComponent.vue b/Frontend/src/components/xml/TabComponent.vue
index 253f288..74971d1 100644
--- a/Frontend/src/components/xml/TabComponent.vue
+++ b/Frontend/src/components/xml/TabComponent.vue
@@ -25,8 +25,8 @@ function remove() {
 </script>
 
 <template>
-    <div @click="activate" :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3 cursor-pointer">
-        <button class="hover:brightness-110"><slot /></button>
+    <div :class=" isActive ? 'tab-active' : 'tab'" class="flex flex-row gap-3">
+        <button @click="activate" class="hover:brightness-110"><slot /></button>
         <button @click="remove" class="hover:brightness-110 hover:bg-blue-100 hover:dark:bg-slate-400 hover:dark:text-black px-2 rounded-full">x</button>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index 3584025..eafab19 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -21,7 +21,7 @@ const activeTabId = ref(0);
 const tabs = ref(new Array<TabData>);
 tabs.value.push({
     id: newTabId.value++,
-    name: "XML1",
+    name: "xml1.xml",
     data: "",
 })
 
@@ -86,7 +86,7 @@ function addTab() {
 
     tabs.value.push({
         id: newTabId.value++,
-        name: "XML" + newTabId.value,
+        name: "xml" + newTabId.value + ".xml",
         data: ""
     });
 }
@@ -101,7 +101,7 @@ function removeTab(id : number) {
 
     let indexToRemove = findIndexWithID(id);
 
-    switchToExistingTab(indexToRemove)
+    switchToExistingTab(indexToRemove);
     
     tabs.value.splice(indexToRemove, 1);
     

From 5ac6fb65fb5de40318dba9828952a301048cfb41 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:40:24 +0100
Subject: [PATCH 19/20] Implemented v-model in XML tools

---
 Frontend/src/components/xml/XmlInputFieldComponent.vue  | 4 ++--
 Frontend/src/components/xml/XmlTabbedInputComponent.vue | 4 ++--
 Frontend/src/views/XPathView.vue                        | 4 ++--
 Frontend/src/views/XQueryView.vue                       | 4 ++--
 Frontend/src/views/XSDView.vue                          | 4 ++--
 Frontend/src/views/XSLTView.vue                         | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 8780c3d..b14767a 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -10,13 +10,13 @@ const props = defineProps(
         data: {type: String},
     }
 )
-const emit = defineEmits(['update'])
+const emit = defineEmits(['update:modelValue'])
 
 const data = ref('')
 const inputFile = ref()
 
 function sendValue() {
-    emit('update', data.value)
+    emit('update:modelValue', data.value)
 }
 
 function updateData(newData: string, clearFileSelector: boolean = true) {
diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index eafab19..ff0a2ba 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -13,7 +13,7 @@ const props = defineProps(
         tabCountLimit: {type: Number, required: false}
     }
 )
-const emit = defineEmits(['update'])
+const emit = defineEmits(['update:modelValue'])
 
 const newTabId = ref(0);
 const activeTabId = ref(0);
@@ -30,7 +30,7 @@ const inputFile = ref()
 
 
 function sendValue() {
-    emit('update', tabs.value);
+    emit('update:modelValue', tabs.value);
 }
 
 function updateData(newData: string) {
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index be12426..41c06df 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -19,8 +19,8 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide xl:pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-                <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+                <xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
+                <xmlInputFieldComponent stylized-name="XPath" v-model="query"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
         </div>
diff --git a/Frontend/src/views/XQueryView.vue b/Frontend/src/views/XQueryView.vue
index 244c5d4..051f3e1 100644
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -12,8 +12,8 @@ const query = ref('');
 <template>
     <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
         <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-            <xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XQuery" v-model="query"></xmlInputFieldComponent>
         </div>
         <xmlOutputFieldComponent tool="xquery" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
diff --git a/Frontend/src/views/XSDView.vue b/Frontend/src/views/XSDView.vue
index 04b0690..8f3d90a 100644
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -12,8 +12,8 @@ const query = ref('');
 <template>
     <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
         <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-            <xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XML" v-model="xml"></xmlInputFieldComponent>
+            <xmlInputFieldComponent stylized-name="XSD" v-model="query"></xmlInputFieldComponent>
         </div>
         <xmlOutputFieldComponent tool="xsd" :xml="xml" :query="query"></xmlOutputFieldComponent>
     </div>
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index b00dc61..164f36e 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -22,8 +22,8 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" :data="xml" @update="(data) => {xml = data}"></xmlTabbedInputComponent>
-                <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
+                <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>
         </div>

From e91ee99f9955c61bcc575f3d47798c27e6efa761 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 30 Nov 2023 08:50:31 +0100
Subject: [PATCH 20/20] Implemented tab count limit validation

---
 Frontend/src/components/xml/XmlTabbedInputComponent.vue | 2 +-
 Frontend/src/views/XSLTView.vue                         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/components/xml/XmlTabbedInputComponent.vue b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
index ff0a2ba..0cd8b85 100644
--- a/Frontend/src/components/xml/XmlTabbedInputComponent.vue
+++ b/Frontend/src/components/xml/XmlTabbedInputComponent.vue
@@ -10,7 +10,7 @@ const props = defineProps(
     {
         stylizedName: {type: String, required: true},
         data: {type: Array<TabData>},
-        tabCountLimit: {type: Number, required: false}
+        tabCountLimit: {type: Number, required: false, validator: (value) => typeof value == "number" && value > 0}
     }
 )
 const emit = defineEmits(['update:modelValue'])
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 164f36e..fc73b55 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -22,7 +22,7 @@ function updateVersion(newVersion: string) {
     <div id="layout" class="flex flex-row w-full h-full">
         <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
-                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="3" v-model="xml"></xmlTabbedInputComponent>
+                <xmlTabbedInputComponent stylized-name="XML" :tab-count-limit="1" v-model="xml"></xmlTabbedInputComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" v-model="query"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="updateVersion"></xmlOutputFieldComponent>