pkp/pkp-lib#4857 Add support for opening a tab with a global event

src/components/Tabs/Tabs.vue

@@ -128,6 +128,17 @@ export default {
 		 * Set the tab to view when loaded
 		 */
 		this.currentTab = this.defaultTab || this.tabs[0].id;
+
+		/**
+		 * Listen for global 'tab' events and open the correct tab when called
+		 */
+		pkp.eventBus.$on('open-tab', tabId => {
+			this.tabs.forEach(tab => {
+				if (tab.id === tabId) {
+					this.setCurrentTab(tabId);
+				}
+			});
+		});
 	},
 	watch: {
 		/**

src/docs/components/Tabs/readme.md

@@ -5,7 +5,7 @@ Use this component to display content in tabs.
 
 Pass a `label` to the `Tabs` component to improve the experience for assistive technology. For example, a group of settings tabs might be labeled like this:
 
-```
+```html
 <tabs label="Website Settings Sections">
 	<tab>...</tab>
 	<tab>...</tab>
@@ -14,6 +14,30 @@ Pass a `label` to the `Tabs` component to improve the experience for assistive t
 
 A `label` is not needed when the tabs immediately follow a heading which describes the tabs. Otherwise a `label` should be used.
 
+## Open tab programmatically
+
+Tabs listen for an `open-tab` event on the global event bus. To open a tab, fire this event and pass the tab `id`:
+
+```js
+pkp.eventBus.$emit('open-tab', 'publication')
+```
+
+This only works when the tab is visible. If the `publication` tab was nested inside of other tabs and was not visible, it would not be displayed. Consider the following code:
+
+```html
+<tabs>
+	<tab id="hello" label="Hello">...</tab>
+	<tab id="world" label"World">
+		<tabs>
+			<tab id="lorem" label="Lorem">...</tab>
+			<tab id="ipsum" label="Ipsum">...</tab>
+		</tabs>
+	</tab>
+</tabs>
+```
+
+If the `hello` tab is currently visible, firing `pkp.eventBus.$emit('open-tab', 'ipsum')` will not work, because its tab set is not currently visible.
+
 ## Icon-only Tab Buttons
 
 Avoid using icon-only tabs except in rare cases. A text label is almost always easier to understand.