chore(avatar): refactor avatar component and update imports

packages/vue/src/avatar/Avatar.vue

@@ -1,24 +1,10 @@
 <script lang="ts">
-import { createProvideScope } from '@oku-ui/provide'
 import type { PrimitiveProps } from '@oku-ui/primitive'
-import type { Ref } from 'vue'
 
 export interface ScopeAvatar {
   scopeOkuAvatar?: any
 }
 
-export type AvatarProvide = {
-  _names: 'OkuAvatar'
-  imageLoadingStatus: Ref<ImageLoadingStatus>
-  onImageLoadingStatusChange(status: ImageLoadingStatus): void
-}
-
-export const { composeProviderScopes, createProvide }
-    = createProvideScope<AvatarProvide['_names']>('OkuAvatar')
-
-export const { useProvider, useInject: useAvatarInject }
-    = createProvide<Omit<AvatarProvide, '_names'>>('OkuAvatar')
-
 export interface AvatarProps extends PrimitiveProps {
   scopeOkuAvatar?: any
 }
@@ -29,6 +15,7 @@ import { defineOptions, ref } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 import type { ImageLoadingStatus } from './types'
+import { useAvatarProvider } from './utils'
 
 defineOptions({
   name: 'OkuAvatar',
@@ -42,7 +29,7 @@ const imageLoadingStatus = ref<ImageLoadingStatus>('idle')
 
 const { componentRef, currentElement } = useComponentRef<HTMLLabelElement | null>()
 
-useProvider({
+useAvatarProvider({
   scope: props.scopeOkuAvatar,
   imageLoadingStatus,
   onImageLoadingStatusChange: (status: ImageLoadingStatus) => imageLoadingStatus.value = status,

packages/vue/src/avatar/AvatarFallback.vue

@@ -11,7 +11,7 @@ export interface AvatarFallbackProps extends PrimitiveProps {
 import { defineOptions, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
-import { useAvatarInject } from './Avatar.vue'
+import { useAvatarInject } from './utils'
 
 defineOptions({
   name: 'OkuAvatarFallback',

packages/vue/src/avatar/AvatarImage.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import type { ImageLoadingStatus } from './types'
-import { useImageLoadingStatus } from './utils'
+import { useAvatarInject, useImageLoadingStatus } from './utils'
 
 export interface AvatarImageProps extends PrimitiveProps {
   scopeOkuAvatar?: any
@@ -18,7 +18,6 @@ export type AvatarImageEmits = {
 import { defineOptions, watchEffect, withDefaults } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
-import { useAvatarInject } from './Avatar.vue'
 
 defineOptions({
   name: 'OkuAvatarImage',

packages/vue/src/avatar/index.ts

@@ -1,5 +1,19 @@
-export { default as OkuAvatar } from './Avatar.vue'
-export { default as OkuAvatarImage } from './AvatarImage.vue'
-export { default as OkuAvatarFallback } from './AvatarFallback.vue'
+export {
+  default as OkuAvatar,
+  type AvatarProps,
+} from './Avatar.vue'
+export {
+  default as OkuAvatarImage,
+  type AvatarImageProps,
+  type AvatarImageEmits,
+} from './AvatarImage.vue'
+export {
+  default as OkuAvatarFallback,
+  type AvatarFallbackProps,
+} from './AvatarFallback.vue'
 
 export type * from './types'
+
+export {
+  createAvatarScope,
+} from './utils'

packages/vue/src/avatar/utils.ts

@@ -1,7 +1,20 @@
 import { onBeforeUnmount, ref, watchEffect } from 'vue'
 import { isClient } from '@oku-ui/use-composable'
+import { createScope } from '@oku-ui/provide'
+import type { Ref } from 'vue'
 import type { ImageLoadingStatus } from './types'
 
+export const [createAvatarProvide, createAvatarScope]
+  = createScope<'OkuAvatar'>('OkuAvatar')
+
+export type AvatarProvide = {
+  imageLoadingStatus: Ref<ImageLoadingStatus>
+  onImageLoadingStatusChange(status: ImageLoadingStatus): void
+}
+
+export const [useAvatarProvider, useAvatarInject]
+  = createAvatarProvide<AvatarProvide>('OkuAvatar')
+
 export function useImageLoadingStatus(src?: string) {
   const loadingStatus = ref<ImageLoadingStatus>('idle')