fix: tab animation when link

Author: m0ksem

packages/ui/src/components/va-tabs/VaTabs.demo.vue

@@ -348,13 +348,13 @@
         <template #tabs>
           <va-tab
             name="Link 1"
-            to="/demo/components/va-breadcrumbs/VaBreadcrumbs.demo.vue"
+            to="/1"
           >
             Link 1
           </va-tab>
           <va-tab
             name="Link 2"
-            to="/demo/components/va-tabs/VaTabs.demo.vue"
+            to="/2"
           >
             Active link
           </va-tab>

packages/ui/src/components/va-tabs/components/VaTab/VaTab.vue

@@ -6,25 +6,19 @@
     role="tab"
     :aria-selected="isActive"
     :aria-disabled="$props.disabled || parentDisabled"
-    :href="hrefComputed"
-    :target="target"
-    :to="to"
-    :replace="replace"
-    :exact="exact"
-    :active-class="activeClass"
-    :exact-active-class="exactActiveClass"
     :class="classComputed"
     :style="computedStyle"
     @mouseenter="updateHoverState(true)"
     @mouseleave="updateHoverState(false)"
+    @focus="onFocus"
+    @click="onTabClick"
+    @keydown.enter="onTabKeydown"
+    :tabindex="tabIndexComputed"
+    v-on="keyboardFocusListeners"
+    v-bind="linkAttributesComputed"
   >
     <div
       class="va-tab__content"
-      :tabindex="tabIndexComputed"
-      @focus="onFocus"
-      @click="onTabClick"
-      @keydown.enter="onTabKeydown"
-      v-on="keyboardFocusListeners"
     >
       <slot>
         <va-icon
@@ -43,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
 
 import {
   useComponentPresetProp,
@@ -85,7 +79,7 @@ const leftSidePosition = ref(0)
 
 const { keyboardFocusListeners, hasKeyboardFocus } = useKeyboardOnlyFocus()
 
-const { tagComputed, hrefComputed, isActiveRouterLink } = useRouterLink(props)
+const { tagComputed, isActiveRouterLink, linkAttributesComputed } = useRouterLink(props)
 const classComputed = computed(() => ({ 'va-tab--disabled': props.disabled }))
 const {
   parentDisabled,
@@ -122,12 +116,14 @@ const updateSidePositions = () => {
   leftSidePosition.value = componentOffsetLeft
 }
 
-const onTabClick = () => {
+const onTabClick = async () => {
+  await nextTick()
   selectTab(tabComponent)
   emit('click')
 }
 
-const onTabKeydown = () => {
+const onTabKeydown = async () => {
+  await nextTick()
   selectTab(tabComponent)
   emit('keydown-enter')
 }
@@ -180,6 +176,8 @@ onBeforeUnmount(() => {
   vertical-align: var(--va-tab-vertical-align);
   color: var(--va-tab-color);
 
+  @include keyboard-focus-outline($radius: 2px, $offset: -2px);
+
   &__content {
     align-items: var(--va-tab-content-align-items);
     color: var(--va-tab-content-color);
@@ -194,8 +192,6 @@ onBeforeUnmount(() => {
     white-space: var(--va-tab-content-white-space);
     padding: var(--va-tab-content-padding);
     cursor: var(--va-tab-content-cursor);
-
-    @include keyboard-focus-outline($radius: 2px, $offset: -2px);
   }
 
   &__icon {

packages/ui/src/composables/useRouterLink.ts

@@ -33,7 +33,8 @@ export const useRouterLink = (props: ExtractPropTypes<typeof useRouterLinkProps>
 
     if (globalConfig.routerComponent && props.to) { return globalConfig.routerComponent }
 
-    if (props.to) { return 'router-link' }
+    if (props.to && vueRouter.value !== undefined) { return 'router-link' }
+    if (props.to && vueRouter.value === undefined) { return 'a' }
 
     return props.tag || 'div'
   })
@@ -73,10 +74,15 @@ export const useRouterLink = (props: ExtractPropTypes<typeof useRouterLinkProps>
   })
 
   const hrefComputed = computed(() => {
+    if (props.href) { return props.href }
+
+    if (vueRoute.value === undefined && props.to) {
+      return props.to
+    }
+
     // to resolve href on server for SEO optimization
     // https://github.com/nuxt/nuxt.js/issues/8204
-    // @ts-ignore
-    return props.href || (props.to ? vueRouter.value?.resolve(props.to, vueRoute.value).href : undefined)
+    return props.to ? vueRouter.value?.resolve(props.to, vueRoute.value).href : undefined
   })
 
   return {