feat: Add tab change event to tab container + binding for active tab (#1149)

* feat: Add wf-tab-change event to tab container

* Update src/ui/src/components/core/layout/CoreTabs.vue

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>

* add: Make active tab bindable in CoreTabs

* fix: infinite loops with two-way tab binding

* fix: tab activation logic in CoreTabs component

* fix: improve tab activation fallback logic in CoreTabs component

---------

Co-authored-by: Alexandre Rousseau <alexandre@rsseau.fr>

Author: sheikhuzairhussain

src/ui/src/components/core/layout/CoreTab.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-show="isVisible" class="CoreTab">
+	<div v-show="isVisible" ref="rootEl" class="CoreTab">
 		<button
 			v-if="isTabBit"
 			class="bit"
@@ -146,9 +146,8 @@ const getMatchingTabInstancePath = () => {
 
 const activateTab = () => {
 	const tabContainerData = getTabContainerData();
-	tabContainerData.value = {
-		activeTab: getMatchingTabInstancePath(),
-	};
+	tabContainerData.value.activeTab = getMatchingTabInstancePath();
+	tabContainerData.value.activeTabName = fields.name.value;
 };
 
 const checkIfTabIsParent = (childId: Component["id"]): boolean => {
@@ -180,12 +179,13 @@ const isTabActive = computed(() => {
 });
 
 onBeforeMount(() => {
-	if (isTabBit.value) return;
+	if (!isTabBit.value) return;
 	const tabContainerData = getTabContainerData();
-	const activeTab = tabContainerData.value?.activeTab;
-	if (activeTab) return;
-	if (!isComponentVisible(componentId, instancePath)) return;
-	tabContainerData.value = { activeTab: instancePath };
+	tabContainerData.value.tabs.push({
+		name: fields.name.value,
+		instancePath: getMatchingTabInstancePath(),
+		componentId: componentId,
+	});
 });
 </script>
 

src/ui/src/components/core/layout/CoreTabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="CoreTabs">
+	<div ref="rootInstance" class="CoreTabs">
 		<nav
 			class="tabSelector horizontal"
 			data-writer-cage
@@ -26,6 +26,14 @@ import {
 	buttonShadow,
 	cssClasses,
 } from "@/renderer/sharedStyleFields";
+import { useFormValueBroker } from "@/renderer/useFormValueBroker";
+
+const tabChangeHandlerStub = `
+def tab_change_handler(state, payload):
+
+	# The payload contains the name of the newly activated tab
+
+	state["active_tab"] = payload`;
 
 const description =
 	"A container component for organising and displaying Tab components in a tabbed interface.";
@@ -36,6 +44,14 @@ export default {
 		description,
 		category: "Layout",
 		allowedChildrenTypes: ["tab", "repeater"],
+		events: {
+			"wf-tab-change": {
+				desc: "Sent when the active tab changes.",
+				stub: tabChangeHandlerStub.trim(),
+				eventPayloadExample: "Tab Name",
+				bindable: true,
+			},
+		},
 		fields: {
 			accentColor,
 			primaryTextColor,
@@ -52,11 +68,76 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { inject } from "vue";
+import { ComponentPublicInstance, inject, onMounted, ref, watch } from "vue";
+import { useEvaluator } from "@/renderer/useEvaluator";
 import injectionKeys from "@/injectionKeys";
-
+const rootInstance = ref<ComponentPublicInstance | null>(null);
+const wf = inject(injectionKeys.core);
+const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
-instanceData.at(-1).value = { activeTab: undefined };
+const containerState = instanceData.at(-1);
+const { isComponentVisible } = useEvaluator(wf);
+
+const { formValue, handleInput } = useFormValueBroker(
+	wf,
+	instancePath,
+	rootInstance,
+);
+
+containerState.value = {
+	activeTab: undefined,
+	activeTabName: formValue.value,
+	tabs: [],
+};
+
+watch(
+	() => containerState.value?.activeTabName,
+	(activeTabName) => {
+		if (!rootInstance.value) return;
+		if (activeTabName === formValue.value) return;
+		handleInput(activeTabName, "wf-tab-change");
+	},
+);
+
+watch(formValue, (newTabName) => {
+	if (newTabName === containerState.value.activeTabName) return;
+	if (!containerState.value.tabs?.length) return;
+
+	const visibleTabs = containerState.value.tabs.filter((t) =>
+		isComponentVisible(t.componentId, t.instancePath),
+	);
+	if (!visibleTabs.length) return;
+
+	let tabToActivate = visibleTabs.find((t) => t.name === newTabName);
+
+	if (!tabToActivate) {
+		const currentActiveInState = visibleTabs.find(
+			(t) => t.name === containerState.value.activeTabName,
+		);
+		tabToActivate = currentActiveInState ?? visibleTabs[0];
+	}
+
+	containerState.value.activeTab = tabToActivate.instancePath;
+	containerState.value.activeTabName = tabToActivate.name;
+});
+
+onMounted(() => {
+	if (containerState.value.activeTab) return;
+	if (!containerState.value.tabs) return;
+
+	const visibleTabs = containerState.value.tabs.filter((t) =>
+		isComponentVisible(t.componentId, t.instancePath),
+	);
+	if (visibleTabs.length === 0) return;
+
+	const initialActiveTabName = containerState.value.activeTabName;
+	const tabToActivate =
+		visibleTabs.find((t) => t.name === initialActiveTabName) ??
+		visibleTabs[0];
+
+	containerState.value.activeTab = tabToActivate.instancePath;
+	containerState.value.activeTabName = tabToActivate.name;
+});
 </script>
 
 <style scoped>