Implemented tab count limit

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)
 }

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>
         

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>