1.1.0 - Added on Tab Change Event

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#033335",
+    "titleBar.activeBackground": "#04484A",
+    "titleBar.activeForeground": "#ECFDFE"
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bb-component-SuperTabs",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Tabs component for Budibase with Super Powers",
   "author": "Michael Poirazi",
   "license": "MIT",

schema.json

@@ -77,6 +77,22 @@
         "label": "Emphasized Color",
         "key": "emphasizedColor",
         "dependsOn": "emphasized"
+      },
+      {
+        "section": true,
+        "name": "On Tab Change",
+        "settings": [
+          {
+            "type": "event",
+            "key": "onTabChange",
+            "context": [
+              {
+                "label": "Active Tab Name",
+                "key": "tabName"
+              }
+            ]
+          }
+        ]
       }
     ]
   }

src/Component.svelte

@@ -11,6 +11,7 @@
   export let compact = false
   export let emphasized = false
   export let emphasizedColor = "var(--primaryColor)"
+  export let onTabChange
 
   const { styleable, builderStore, screenStore, componentStore } = getContext("sdk")
   const component = getContext("component")
@@ -25,6 +26,7 @@
   // Set Store initial State
   let selectedTab = {
     id : undefined,
+    name : "",
     boundingBox: null,
   }
   const tabStore = writable(selectedTab)
@@ -84,13 +86,17 @@
       }
     }
   }
+
+  function handleTabChange ( e ) {
+    let context = { "tabName": e.detail.tabName }
+    onTabChange?.( context )
+    console.log("Tab Changed to :", e.detail.tabName )
+  }
   
   onMount ( () => {
     hideNonSelected(); 
     calculateIndicator();
   })
-
-  $: console.log ($tabStore?.id)
 </script>
 
 <div use:styleable={$component.styles}>
@@ -111,7 +117,10 @@
         class="spectrum-Tabs spectrum-Tabs--size{size}"
       >
           {#each _tabs as _tab}
-            <Tab title = {_tab._instanceName} id = {_tab._id} {emphasized}/>
+            <Tab 
+              on:tabSelect={handleTabChange}
+              title = {_tab._instanceName} 
+              id = {_tab._id} {emphasized}/>
           {/each}
 
          <div 

src/lib/Tab.svelte

@@ -1,5 +1,7 @@
 <script>
-    import { getContext } from "svelte"
+    import { getContext , createEventDispatcher } from "svelte"
+    const dispatch = createEventDispatcher();
+
     const tabStore = getContext ("tabStore")
     export let id
     export let title
@@ -14,6 +16,7 @@
     function handleClick () {
         $tabStore.id = id
         $tabStore.boundingBox = container?.getBoundingClientRect();
+        dispatch("tabSelect", {"tabID": id, "tabName": title } )
     }
     function init() {
         if (isSelected)