import { defineComponent , h , onBeforeUpdate , ref } from "vue" ; import type { Component , VNode } from "vue" ; export default defineComponent ( { name : "CodeGroup" , setup ( _ , { slots } ) { const activeIndex = ref ( - 1 ) ; const tabRefs = ref < HTMLButtonElement [ ] > ( [ ] ) ; onBeforeUpdate ( ( ) => { tabRefs . value = [ ] ; } ) ; const activateNext = ( i = activeIndex . value ) : void => { if ( i < tabRefs . value . length - 1 ) { activeIndex . value = i + 1 ; } else { activeIndex . value = 0 ; } tabRefs . value [ activeIndex . value ] . focus ( ) ; } ; const activatePrev = ( i = activeIndex . value ) : void => { if ( i > 0 ) { activeIndex . value = i - 1 ; } else { activeIndex . value = tabRefs . value . length - 1 ; } tabRefs . value [ activeIndex . value ] . focus ( ) ; } ; const keyboardHandler = ( event , i ) : void => { if ( event . key === " " || event . key === "Enter" ) { event . preventDefault ( ) ; activeIndex . value = i ; } else if ( event . key === "ArrowRight" ) { event . preventDefault ( ) ; activateNext ( i ) ; } else if ( event . key === "ArrowLeft" ) { event . preventDefault ( ) ; activatePrev ( i ) ; } } ; return ( ) => { const items = ( slots . default ?. ( ) || [ ] ) . filter ( ( vnode ) => ( vnode . type as Component ) . name === "CodeGroupItem" ) . map ( ( vnode ) => { if ( vnode . props === null ) { vnode . props = { } ; } return vnode as VNode & { props : Exclude < VNode [ "props" ] , null > ; } ; } ) ; if ( items . length === 0 ) { return null ; } if ( activeIndex . value < 0 || activeIndex . value > items . length - 1 ) { activeIndex . value = items . findIndex ( ( vnode ) => vnode . props . active === "" || vnode . props . active === true ) ; if ( activeIndex . value === - 1 ) { activeIndex . value = 0 ; } } else { items . forEach ( ( vnode , i ) => { vnode . props . active = i === activeIndex . value ; } ) ; } return h ( "div" , { class : "code-group" } , [ h ( "div" , { class : "code-group__nav" } , h ( "ul" , { class : "code-group__ul" } , items . map ( ( vnode , i ) => { const isActive = i === activeIndex . value ; return h ( "li" , { class : "code-group__li" } , h ( "button" , { ref : ( element ) => { if ( element ) { tabRefs . value [ i ] = element as HTMLButtonElement ; } } , class : { "code-group__nav-tab" : true , "code-group__nav-tab-active" : isActive } , ariaPressed : isActive , ariaExpanded : isActive , onClick : ( ) => ( activeIndex . value = i ) , onKeydown : ( e ) => keyboardHandler ( e , i ) } , vnode . props . title ) ) ; } ) ) ) , items ] ) ; } ; } } ) ;