Implemented tab count limit

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>