chore: update Vue components and references

packages/vue/src/arrow/Arrow.vue

@@ -16,7 +16,11 @@ const props = withDefaults(
   },
 )
 
-const { componentRef } = useComponentRef<HTMLDivElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLDivElement | null>()
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/aspect-ratio/AspectRatio.vue

@@ -20,7 +20,11 @@ const props = withDefaults(defineProps<AspectRatioProps>(), {
   ratio: 1 / 1,
 })
 
-const { componentRef } = useComponentRef<HTMLDivElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLDivElement | null>()
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/avatar/Avatar.vue

@@ -40,13 +40,18 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 
 const imageLoadingStatus = ref<ImageLoadingStatus>('idle')
 
-const { componentRef } = useComponentRef<HTMLLabelElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLLabelElement | null>()
 
 useProvider({
   scope: props.scopeOkuAvatar,
   imageLoadingStatus,
   onImageLoadingStatusChange: (status: ImageLoadingStatus) => imageLoadingStatus.value = status,
 })
+
+defineExpose({
+  $el: currentElement,
+})
+
 </script>
 
 <template>

packages/vue/src/avatar/AvatarFallback.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<AvatarFallbackProps>(), {
   is: 'span',
 })
 
-const { componentRef } = useComponentRef<HTMLLabelElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLLabelElement | null>()
 
 let timerId: number
 
@@ -36,6 +36,10 @@ function setupTimer() {
 onMounted(() => setupTimer())
 
 onBeforeUnmount(() => window.clearTimeout(timerId))
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/avatar/AvatarImage.vue

@@ -15,7 +15,7 @@ export type AvatarImageEmits = {
 </script>
 
 <script setup lang="ts">
-import { defineEmits, defineOptions, defineProps, watchEffect, withDefaults } from 'vue'
+import { defineOptions, watchEffect, withDefaults } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 import { useAvatarInject } from './Avatar.vue'
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<AvatarImageProps>(), {
 
 const emits = defineEmits<AvatarImageEmits>()
 
-const { componentRef } = useComponentRef<HTMLLabelElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLLabelElement | null>()
 
 const inject = useAvatarInject('OkuAvatar', props.scopeOkuAvatar)
 
@@ -45,6 +45,10 @@ watchEffect(() => {
   if (imageLoadingStatus.value !== 'idle')
     handleLoadingStatusChange(imageLoadingStatus.value)
 })
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/checkbox/BubbleInput.vue

@@ -10,7 +10,7 @@ export interface BubbleInputProps {
 </script>
 
 <script setup lang="ts">
-import { computed, defineOptions, defineProps, toRefs, watchEffect, withDefaults } from 'vue'
+import { computed, defineOptions, toRefs, watchEffect, withDefaults } from 'vue'
 import { useComponentRef, usePrevious, useSize } from '@oku-ui/use-composable'
 
 import { isIndeterminate } from './utils'
@@ -44,6 +44,9 @@ watchEffect(() => {
   }
 })
 
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/checkbox/Checkbox.vue

@@ -40,7 +40,7 @@ export const { useInject, useProvider }
 
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { computed, defineOptions, defineProps, onMounted, ref, toRef, watchEffect, withDefaults } from 'vue'
+import { computed, defineOptions, onMounted, ref, toRef, watchEffect, withDefaults } from 'vue'
 import { useComponentRef, useControllable, useVModel } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 import { composeEventHandlers } from '@oku-ui/utils'
@@ -106,6 +106,9 @@ useProvider({
   disabled: toRef(props, 'disabled'),
 })
 
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/checkbox/CheckboxIndicator.vue

@@ -12,7 +12,7 @@ export interface CheckboxIndicatorProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { defineOptions, defineProps, withDefaults } from 'vue'
+import { defineOptions, withDefaults } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { getState, isIndeterminate } from './utils'
 import { OkuPresence } from '@oku-ui/presence'
@@ -28,10 +28,13 @@ const props = withDefaults(defineProps<CheckboxIndicatorProps>(), {
   forceMount: undefined,
 })
 
-const { componentRef } = useComponentRef<HTMLInputElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLInputElement | null>()
 
 const inject = useInject('OkuCheckbox', props.scopeOkuCheckbox)
 
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/dismissable-layer/DismissableLayer.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineExpose, defineOptions, nextTick, reactive, useAttrs, watchEffect } from 'vue'
+import { computed, defineOptions, nextTick, reactive, useAttrs, watchEffect } from 'vue'
 import type { DismissableLayerBranchElement, DismissableLayerElement, FocusBlurCaptureEvent, FocusCaptureEvent, FocusOutsideEvent, PointerdownCaptureEvent, PointerdownOutsideEvent } from './props'
 
 export const context = reactive({

packages/vue/src/dismissable-layer/DismissableLayerBranch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
-import { defineExpose, defineOptions, defineProps, onMounted, onUnmounted } from 'vue'
+import { defineOptions, onMounted, onUnmounted } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import type { DismissableLayerBranchElement } from './props'
 import { context } from './DismissableLayer.vue'

packages/vue/src/dismissable-layer/stories/DummyPopover.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, withDefaults } from 'vue'
+import { defineProps, ref, withDefaults } from 'vue'
 import { OkuPopper, OkuPopperAnchor, OkuPopperArrow, OkuPopperContent } from '@oku-ui/popper'
 import { OkuFocusGuards } from '@oku-ui/focus-guards'
 import { OkuPortal } from '@oku-ui/portal'

packages/vue/src/focus-scope/FocusScope.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { Primitive } from '@oku-ui/primitive'
 import type { PrimitiveProps } from '@oku-ui/primitive'
-import { defineExpose, defineOptions, nextTick, reactive, ref, watchEffect } from 'vue'
+import { defineOptions, nextTick, reactive, ref, watchEffect } from 'vue'
 
 import { useComponentRef } from '@oku-ui/use-composable'
 

packages/vue/src/label/Label.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineExpose, mergeProps, useAttrs } from 'vue'
+import { mergeProps, useAttrs } from 'vue'
 import { useComponentRef, useListeners } from '@oku-ui/use-composable'
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'

packages/vue/src/popper/PopperAnchor.vue

@@ -8,7 +8,7 @@ interface PopperAnchorProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { defineExpose, defineOptions, watchEffect, withDefaults } from 'vue'
+import { defineOptions, watchEffect, withDefaults } from 'vue'
 import { usePopperInject } from './Popper.vue'
 import { Primitive } from '@oku-ui/primitive'
 import { useComponentRef } from '@oku-ui/use-composable'

packages/vue/src/popper/PopperArrow.vue

@@ -15,7 +15,7 @@ export const OPPOSITE_SIDE: Record<Side, Side> = {
 </script>
 
 <script setup lang="ts">
-import { computed, defineExpose, defineOptions, defineProps } from 'vue'
+import { computed, defineOptions } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { OkuArrow } from '@oku-ui/arrow'
 
@@ -30,14 +30,15 @@ const props = defineProps<PopperArrowProps>()
 
 const { componentRef, currentElement } = useComponentRef()
 
-defineExpose({
-  $el: currentElement,
-})
-
 const contentInject = usePopperContentInject('OkuPopperContent', props.scopeOkuPopper)
 const baseSide = computed(() => {
   return contentInject?.placedSide.value ? OPPOSITE_SIDE[contentInject.placedSide.value] : ''
 })
+
+defineExpose({
+  $el: currentElement,
+})
+
 </script>
 
 <template>

packages/vue/src/popper/PopperContent.vue

@@ -77,7 +77,7 @@ export const { useInject: usePopperContentInject, useProvider: usePopperContentP
 
 <script lang="ts" setup>
 import type { Ref } from 'vue'
-import { computed, defineEmits, defineExpose, defineOptions, defineProps, ref, watch, watchEffect, withDefaults } from 'vue'
+import { computed, defineOptions, ref, watch, watchEffect, withDefaults } from 'vue'
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import { useComponentRef, useSize } from '@oku-ui/use-composable'

packages/vue/src/portal/Portal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineExpose, defineOptions, mergeProps, useAttrs } from 'vue'
+import { defineOptions, mergeProps, useAttrs } from 'vue'
 import { Primitive } from '@oku-ui/primitive'
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import { useComponentRef } from '@oku-ui/use-composable'
@@ -20,12 +20,13 @@ const props = withDefaults(defineProps<PortalProps>(), {
   container: globalThis?.document?.body ?? null,
 })
 
+const attrs = useAttrs()
+
 const { componentRef, currentElement } = useComponentRef<HTMLDivElement | null>()
 
 defineExpose({
   $el: currentElement,
 })
-const attrs = useAttrs()
 </script>
 
 <template>

packages/vue/src/presence/Presence.vue

@@ -39,6 +39,10 @@ function Comp() {
     })
     : null
 }
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/toggle/Toggle.vue

@@ -23,6 +23,7 @@ export type ToggleEmits = {
   pressedChange: [pressed: boolean]
   click: [event: MouseEvent]
 }
+
 </script>
 
 <script setup lang="ts">
@@ -43,7 +44,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
 
 const emits = defineEmits<ToggleEmits>()
 
-const { componentRef } = useComponentRef<HTMLButtonElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLButtonElement | null>()
 
 const modelValue = useVModel(props, 'pressed', emits)
 
@@ -56,6 +57,10 @@ const [pressed, setPressed] = useControllable({
   },
   initialValue: false,
 })
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>

packages/vue/src/visually-hidden/VisuallyHidden.vue

@@ -17,7 +17,12 @@ const props = withDefaults(defineProps<VisuallyHiddenProps>(), {
   is: 'span',
 })
 
-const { componentRef } = useComponentRef<HTMLSpanElement | null>()
+const { componentRef, currentElement } = useComponentRef<HTMLSpanElement | null>()
+
+defineExpose({
+  $el: currentElement,
+})
+
 </script>
 
 <template>