fix: TabsContent appearance on SSR (#491)

* fix: tabs appearance

* fix: not mounting correctly

---------

Co-authored-by: zernonia <zernonia@gmail.com>

packages/radix-vue/src/Presence/Presence.ts

@@ -1,11 +1,15 @@
 import {
-  type VNode,
   defineComponent,
   getCurrentInstance,
   h,
   ref,
   toRefs,
 } from 'vue'
+import type {
+  Ref,
+  SlotsType,
+  VNode,
+} from 'vue'
 import { usePresence } from './usePresence'
 import { renderSlotFragments } from '@/shared'
 import { unrefElement } from '@vueuse/core'
@@ -37,15 +41,18 @@ export default defineComponent({
       type: Boolean,
     },
   },
-  setup(props, { attrs, slots, expose }) {
+  slots: {} as SlotsType<{
+    default: (opts: { present: Ref<boolean> }) => any
+  }>,
+  setup(props, { slots, expose }) {
     const { present, forceMount } = toRefs(props)
 
     const node = ref<HTMLElement>()
     // Mount composables once to prevent duplicated eventListener
     const { isPresent } = usePresence(present, node)
     expose({ present: isPresent })
 
-    let children = slots.default?.()
+    let children = slots.default({ present: isPresent })
     children = renderSlotFragments(children || [])
     const instance = getCurrentInstance()
 
@@ -72,7 +79,7 @@ export default defineComponent({
 
     return () => {
       if (forceMount.value || present.value || isPresent.value) {
-        return h(slots.default?.()[0] as VNode, {
+        return h(slots.default({ present: isPresent })[0] as VNode, {
           ref: (v) => {
             const el = unrefElement(v as HTMLElement)
             if (typeof el?.hasAttribute === 'undefined')

packages/radix-vue/src/Tabs/TabsContent.vue

@@ -28,14 +28,14 @@ const isSelected = computed(() => props.value === rootContext.modelValue.value)
 const isMountAnimationPreventedRef = ref(isSelected.value)
 
 onMounted(() => {
-  requestAnimationFrame(() => isMountAnimationPreventedRef.value = false)
+  requestAnimationFrame(() => {
+    isMountAnimationPreventedRef.value = false
+  })
 })
-
-const presenceRef = ref<InstanceType<typeof Presence>>()
 </script>
 
 <template>
-  <Presence ref="presenceRef" :present="forceMount || isSelected">
+  <Presence v-slot="{ present }" :present="isSelected" force-mount>
     <Primitive
       :id="contentId"
       :as-child="asChild"
@@ -44,13 +44,13 @@ const presenceRef = ref<InstanceType<typeof Presence>>()
       :data-state="isSelected ? 'active' : 'inactive'"
       :data-orientation="rootContext.orientation.value"
       :aria-labelledby="triggerId"
-      :hidden="!presenceRef?.present"
+      :hidden="!present.value"
       tabindex="0"
       :style="{
         animationDuration: isMountAnimationPreventedRef ? '0s' : undefined,
       }"
     >
-      <slot />
+      <slot v-if="forceMount || isSelected" />
     </Primitive>
   </Presence>
 </template>