feat: element type (#85)

packages/components/aspect-ratio/src/aspect-ratio.ts

@@ -16,7 +16,7 @@ const AspectRatio = defineComponent({
  inheritAttrs: false,
  setup(props, { attrs, slots, expose }) {
  // TODO: as any how to fix?
- const { ratio = 1 / 1, style, ...aspectRatioProps } = attrs as any
+ const { ratio = 1 / 1, style, ...aspectRatioProps } = attrs as AspectRatioProps
  const innerRef = ref<ComponentPublicInstance>()
 
  expose({
@@ -39,7 +39,7 @@ const AspectRatio = defineComponent({
  ...aspectRatioProps,
  ref: innerRef,
  style: {
- ...style,
+ ...(style as any),
  position: 'absolute',
  top: 0,
  right: 0,
@@ -60,5 +60,7 @@ const AspectRatio = defineComponent({
 
 const OkuAspectRatio = AspectRatio as typeof AspectRatio & (new () => { $props: AspectRatioProps })
 
+type OkuAspectRatioElement = Omit<InstanceType<typeof AspectRatio>, keyof ComponentPublicInstance>
+
 export { OkuAspectRatio }
-export type { AspectRatioProps }
+export type { AspectRatioProps, OkuAspectRatioElement }

packages/components/aspect-ratio/src/index.ts

@@ -1,4 +1,7 @@
 export {
  OkuAspectRatio,
 } from './aspect-ratio'
-export type { AspectRatioProps } from './aspect-ratio'
+export type {
+ AspectRatioProps,
+ OkuAspectRatioElement,
+} from './aspect-ratio'

packages/components/avatar/src/avatar.ts

@@ -164,7 +164,7 @@ const AvatarFallback = defineComponent({
  name: FALLBACK_NAME,
  inheritAttrs: false,
  setup(props, { attrs, expose, slots }) {
- const { __scopeAvatar, delayms, ...fallbackProps } = attrs as any
+ const { __scopeAvatar, delayms, ...fallbackProps } = attrs as ScopedProps<AvatarFallbackProps>
  const provide = useAvatarInject(FALLBACK_NAME, __scopeAvatar)
  const canRender = ref(delayms === undefined)
  const innerRef = ref<ComponentPublicInstance>()
@@ -213,6 +213,10 @@ const OkuAvatar = Avatar as typeof Avatar & (new () => { $props: ScopedProps<Ava
 const OkuAvatarImage = AvatarImage as typeof AvatarImage & (new () => { $props: ScopedProps<AvatarImageProps> })
 const OkuAvatarFallback = AvatarFallback as typeof AvatarFallback & (new () => { $props: ScopedProps<AvatarFallbackProps> })
 
+type OkuAvatarElement = Omit<InstanceType<typeof Avatar>, keyof ComponentPublicInstance>
+type OkuAvatarImageElement = Omit<InstanceType<typeof AvatarImage>, keyof ComponentPublicInstance>
+type OkuAvatarFallbackElement = Omit<InstanceType<typeof AvatarFallback>, keyof ComponentPublicInstance>
+
 export {
  OkuAvatar,
  OkuAvatarImage,
@@ -224,4 +228,7 @@ export type {
  AvatarProps,
  AvatarImageProps,
  AvatarFallbackProps,
+ OkuAvatarElement,
+ OkuAvatarImageElement,
+ OkuAvatarFallbackElement,
 }

packages/components/avatar/src/index.ts

@@ -4,4 +4,11 @@ export {
  OkuAvatarImage,
  createAvatarScope,
 } from './avatar'
-export type { AvatarFallbackProps, AvatarProps, AvatarImageProps } from './avatar'
+export type {
+ AvatarFallbackProps,
+ AvatarProps,
+ AvatarImageProps,
+ OkuAvatarElement,
+ OkuAvatarFallbackElement,
+ OkuAvatarImageElement,
+} from './avatar'

packages/components/label/src/index.ts

@@ -1,4 +1,4 @@
 export {
  OkuLabel,
 } from './label'
-export type { LabelProps } from './label'
+export type { LabelProps, OkuLabelElement } from './label'

packages/components/label/src/label.ts

@@ -1,3 +1,4 @@
+import type { ComponentPublicInstance } from 'vue'
 import { computed, defineComponent, h, ref } from 'vue'
 import type { ComponentPropsWithoutRef, ElementRef } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
@@ -13,7 +14,7 @@ const label = defineComponent({
  name: NAME,
  inheritAttrs: false,
  setup(props, { attrs, slots, expose }) {
- const innerRef = ref()
+ const innerRef = ref<ComponentPublicInstance>()
  const { ...restAttrs } = attrs as LabelProps
 
  expose({
@@ -39,6 +40,7 @@ const label = defineComponent({
 })
 
 const OkuLabel = label as typeof label & (new () => { $props: LabelProps })
+type OkuLabelElement = Omit<InstanceType<typeof label>, keyof ComponentPublicInstance>
 
 export { OkuLabel }
-export type { LabelProps }
+export type { LabelProps, OkuLabelElement }

packages/components/separator/src/index.ts

@@ -1,4 +1,4 @@
 export {
  OkuSeparator,
 } from './separator'
-export type { SeparatorProps } from './separator'
+export type { SeparatorProps, OkuSeparatorElement } from './separator'

packages/components/separator/src/separator.ts

@@ -63,5 +63,7 @@ const Separator = defineComponent<SeparatorProps>({
 
 const OkuSeparator = Separator as typeof Separator & (new () => { $props: SeparatorProps })
 
+type OkuSeparatorElement = Omit<InstanceType<typeof OkuSeparator>, keyof ComponentPublicInstance>
+
 export { OkuSeparator }
-export type { SeparatorProps }
+export type { SeparatorProps, OkuSeparatorElement }

playground/vue3/src/pages/label.vue

@@ -1,10 +1,10 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import type { ComponentPublicInstance } from 'vue'
 import { onMounted, ref } from 'vue'
+import type { OkuLabelElement } from '@oku-ui/label'
 import { OkuLabel } from '@oku-ui/label'
 
-const labelRef = ref<Omit<InstanceType<typeof OkuLabel>, keyof ComponentPublicInstance>>()
+const labelRef = ref<OkuLabelElement>()
 onMounted(() => {
  console.log(labelRef.value?.innerRef)
 })