feat(client): emit `vitepress:codeGroupTabActivate` custom event when a code group tab is activated

closes #5023

client.d.ts

@@ -3,3 +3,12 @@
 /// <reference types="vite/client" />
 
 export * from './dist/client/index.js'
+
+declare global {
+  interface WindowEventMap {
+    'vitepress:codeGroupTabActivate': Event & {
+      /** code block element that was activated */
+      detail: Element
+    }
+  }
+}

src/client/app/composables/codeGroups.ts

@@ -7,7 +7,7 @@ export function useCodeGroups() {
         Array.from(el.children).forEach((child) => {
           child.classList.remove('active')
         })
-        el.children[0].classList.add('active')
+        activate(el.children[0])
       })
     })
   }
@@ -36,7 +36,7 @@ export function useCodeGroups() {
         if (!next || current === next) return
 
         current.classList.remove('active')
-        next.classList.add('active')
+        activate(next)
 
         const label = group?.querySelector(`label[for="${el.id}"]`)
         label?.scrollIntoView({ block: 'nearest' })
@@ -44,3 +44,10 @@ export function useCodeGroups() {
     })
   }
 }
+
+function activate(el: Element): void {
+  el.classList.add('active')
+  window.dispatchEvent(
+    new CustomEvent('vitepress:codeGroupTabActivate', { detail: el })
+  )
+}

src/client/tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "../../dist/client",
     "declaration": true,
     "declarationDir": "../../dist/client-types",
-    "types": ["vite/client", "@types/node"],
+    "types": ["../../client.d.ts", "@types/node"],
     "paths": {
       "vitepress": ["index.ts"],
       "vitepress/theme": ["../../theme.d.ts"]