Support to rename dynamic tab titles (enable via prop allowTabRename)

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Support to rename dynamic tab titles (enable via prop `allowTabRename`)
+
 ## [2.15.1] - 2024-05-22
 
 ### Changed

README.md

@@ -150,7 +150,6 @@ Visualizes fundamental server information of the back-end. Shows the URL, title,
 - `capabilities` (object, required): Capabilities response as defined by the openEO API (`GET /`).
 - `url` (string): URL to the API. If not set, the URL from the link with relation type `self` is shown. If neither is available, no URL is shown.
 
-
 ### `Collection`
 
 Visualizes a single collection following the STAC-based collection description.
@@ -764,6 +763,7 @@ Creates a tab interface.
 - `pills` (boolean, default `false`): Switch between [normal boxed tabs and tabs with pills styling](https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp).
 - `pillsMultiline` / `pills-multiline` (boolean, default `false`): If pills are active, the pills in the tabs header can be shown in multiple lines instead of squeezing all pills into a single line.
 - `position` (string, default `top`): Position of the tabs/pills, either `top` or `bottom`.
+- `allowTabRename` (boolean, default: `false`): Enables that dynamic tabs can be renamed by a user
 
 **Methods:**
 

components/Tabs.vue

@@ -4,7 +4,14 @@
 		<div class="tabsHeader" ref="tabsHeader">
 			<button v-for="tab in tabs" type="button" v-show="tab.enabled" :class="{tabItem: true, tabActive: tab.active, tabHasIcon: !!tab.icon, [tab.id]: true }" @click.left="selectTab(tab)" @click.middle="closeTab(tab)" :title="tab.name" :key="tab.id">
 				<i v-if="tab.icon" :class="['tabIcon', 'fas', tab.icon]"></i>
-				<span class="tabName"><slot name="tabName" :tab="tab">{{ tab.name }}</slot></span>
+				<span class="tabName" @dblclick="editTabName(tab)">
+					<template v-if="tabEditId == tab.id">
+						<input type="text" v-model="tabEditName" @blur="saveTabName" @keyup.enter="saveTabName" @keyup.esc="resetTabName" />
+					</template>
+					<template v-else>
+						<slot name="tabName" :tab="tab">{{ tab.name }}</slot>
+					</template>
+				</span>
 				<svg v-if="tab.closable" xmlns="http://www.w3.org/2000/svg" class="tabClose" title="Close" @click.prevent.stop="closeTab(tab)" viewBox="0 0 24 24">
 					<circle cx="12" cy="12" r="11" stroke="black" stroke-width="2" fill="none" />
 					<path stroke="black" stroke-width="2" fill="none" d="M7,7,17,17" />
@@ -46,6 +53,10 @@ export default {
 		position: {
 			type: String,
 			default: 'top'
+		},
+		allowTabRename: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -54,7 +65,9 @@ export default {
 			tabs: [],
 			activeTab: null,
 			dynamicTabs: [],
-			spaceLimited: false
+			spaceLimited: false,
+			tabEditName: '',
+			tabEditId: null
 		};
 	},
 	mounted() {
@@ -131,6 +144,26 @@ export default {
 				});
 			}
 		},
+		editTabName(tab) {
+			if (!this.allowTabRename || tab.id !== this.getActiveTabId()) {
+				return;
+			}
+			const tabData = this.dynamicTabs.find(t => t.id === tab.id);
+			if (tabData) {
+				this.tabEditName = tabData.name;
+				this.tabEditId = tab.id;
+			}
+		},
+		saveTabName() {
+			const tabData = this.dynamicTabs.find(t => t.id === this.tabEditId);
+			if (tabData) {
+				this.$set(tabData, 'name', this.tabEditName);
+				this.tabEditId = null;
+			}
+		},
+		resetTabName() {
+			this.tabEditId = null;
+		},
 		onDynamic(tab, evt) {
 			var index = this.tabs.findIndex(t => t.id === tab.id);
 			if (typeof tab[evt] === 'function' && index !== -1) {