refactor: all component style and some minor fix bugs

packages/components/arrow/src/arrow.ts

@@ -1,10 +1,10 @@
 import type { PropType } from 'vue'
 import { cloneVNode, defineComponent, h, toRefs } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-export type ArrowIntrinsicElement = ElementType<'svg'>
+export type ArrowNaviteElement = OkuElement<'svg'>
 export type ArrowElement = Omit<SVGSVGElement, 'width' | 'height'> & {
   width: number
   height: number
@@ -77,5 +77,5 @@ const arrow = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuArrow = arrow as typeof arrow
 & (new () => {
-  $props: Partial<ArrowIntrinsicElement>
+  $props: ArrowNaviteElement
 })

packages/components/arrow/src/index.ts

@@ -6,5 +6,5 @@ export {
 export type {
   ArrowProps,
   ArrowElement,
-  ArrowIntrinsicElement,
+  ArrowNaviteElement,
 } from './arrow'

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

@@ -1,10 +1,10 @@
-import type { CSSProperties, PropType } from 'vue'
+import type { PropType } from 'vue'
 import { defineComponent, h, toRef } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-export type AspectRatioIntrinsicElement = ElementType<'div'>
+export type AspectRatioNaviteElement = OkuElement<'div'>
 export type AspectRatioElement = HTMLDivElement
 
 const NAME = 'OkuAspectRatio'
@@ -23,7 +23,7 @@ export const aspectRatioProps = {
   emits: {},
 }
 
-const AspectRatio = defineComponent({
+const aspectRatio = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: {
@@ -32,7 +32,6 @@ const AspectRatio = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const ratio = toRef(props, 'ratio')
-    const { style, ...aspectRatioAttrs } = attrs as AspectRatioIntrinsicElement
 
     const forwardedRef = useForwardRef()
     const originalReturn = () => h(
@@ -41,18 +40,18 @@ const AspectRatio = defineComponent({
           position: 'relative',
           width: '100%',
           paddingBottom: `${100 / ratio.value}%`,
-        } as CSSProperties,
+        },
         'data-oku-aspect-ratio-wrapper': '',
       },
       [
         h(
           Primitive.div,
           {
             asChild: props.asChild,
-            ...aspectRatioAttrs,
+            ...attrs,
             ref: forwardedRef,
             style: {
-              ...(style as any),
+              ...attrs.style as any,
               position: 'absolute',
               top: '0px',
               right: '0px',
@@ -72,7 +71,7 @@ const AspectRatio = defineComponent({
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAspectRatio = AspectRatio as typeof AspectRatio &
+export const OkuAspectRatio = aspectRatio as typeof aspectRatio &
 (new () => {
-  $props: Partial<AspectRatioElement>
+  $props: AspectRatioNaviteElement
 })

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

@@ -6,5 +6,5 @@ export {
 export type {
   AspectRatioProps,
   AspectRatioElement,
-  AspectRatioIntrinsicElement,
+  AspectRatioNaviteElement,
 } from './aspect-ratio'

packages/components/aspect-ratio/src/stories/AspectRatioDemo.vue

@@ -5,13 +5,13 @@ import { onMounted, ref } from 'vue'
 export interface IAspectRatioProps {
   template?: '#1' | '#2' | '#3' | '#4' | '#5'
   imageurl?: string
-  allShow?: boolean
+  allshow?: boolean
 }
 
 withDefaults(defineProps<IAspectRatioProps>(), {
   ratio: 16 / 9,
   template: '#1',
-  allShow: false,
+  allshow: false,
 })
 
 const root = ref()
@@ -22,12 +22,12 @@ onMounted(() => {
 
 <template>
   <div class="cursor-default inline-block gap-6">
-    <div v-if="template === '#1' || allShow" class="w-[300px] rounded-sm overflow-hidden">
+    <div v-if="template === '#1' || allshow" class="w-[300px] rounded-sm overflow-hidden">
       <OkuAspectRatio ref="root" class="bg-cyan-500 flex items-center justify-center text-white font-bold">
         <h1>Default ratio (1/1)</h1>
       </OkuAspectRatio>
     </div>
-    <div v-if="template === '#2' || allShow" class="flex gap-6">
+    <div v-if="template === '#2' || allshow" class="flex gap-6">
       <div class="w-[150px] rounded-sm overflow-hidden">
         <OkuAspectRatio :ratio="1 / 2">
           <img

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

@@ -32,7 +32,7 @@ export const Styled: Story = {
     ratio: 1,
     template: '#1',
     imageurl: 'https://images.unsplash.com/photo-1682923875240-3ef0a52a9e7e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80',
-    allShow: true,
+    allshow: true,
   },
   render: (args: any) => ({
     components: { OkuAspectRatioComponent },

packages/components/avatar/src/avatar.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { defineComponent, h, ref } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { createProvideScope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
@@ -18,7 +18,7 @@ type AvatarProvideValue = {
 
 export const [avatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvideValue>(AVATAR_NAME)
 
-export type AvatarIntrinsicElement = ElementType<'span'>
+export type AvatarNaviteElement = OkuElement<'span'>
 export type AvatarElement = HTMLSpanElement
 
 export interface AvatarProps extends PrimitiveProps {
@@ -68,5 +68,5 @@ const avatar = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuAvatar = avatar as typeof avatar &
 (new () => {
-  $props: Partial<AvatarElement>
+  $props: AvatarNaviteElement
 })

packages/components/avatar/src/avatarFallback.ts

@@ -1,15 +1,14 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { useAvatarInject } from './avatar'
-import type { ScopeAvatar } from './utils'
 import { scopeAvatarProps } from './utils'
 
 const FALLBACK_NAME = 'OkuAvatarFallback'
 
-export type AvatarFallbackIntrinsicElement = ElementType<'span'>
+export type AvatarFallbackNaviteElement = OkuElement<'span'>
 export type AvatarFalbackElement = HTMLSpanElement
 
 export interface AvatarFallbackProps extends PrimitiveProps {
@@ -86,5 +85,5 @@ const avatarFallback = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuAvatarFallback = avatarFallback as typeof avatarFallback &
 (new () => {
-  $props: ScopeAvatar<Partial<AvatarFalbackElement>>
+  $props: AvatarFallbackNaviteElement
 })

packages/components/avatar/src/avatarImage.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, toRef, watchEffect } from 'vue'
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { useCallbackRef, useForwardRef } from '@oku-ui/use-composable'
@@ -9,7 +9,7 @@ import { useAvatarInject } from './avatar'
 
 const IMAGE_NAME = 'OkuAvatarImage'
 
-export type AvatarImageIntrinsicElement = ElementType<'img'>
+export type AvatarImageNaviteElement = OkuElement<'img'>
 export type AvatarImageElement = HTMLImageElement
 
 export interface AvatarImageProps extends PrimitiveProps {
@@ -81,5 +81,5 @@ const avatarImage = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuAvatarImage = avatarImage as typeof avatarImage &
 (new () => {
-  $props: Partial<AvatarImageElement>
+  $props: AvatarImageNaviteElement
 })

packages/components/avatar/src/index.ts

@@ -17,18 +17,18 @@ export {
 export type {
   AvatarImageProps,
   AvatarImageElement,
-  AvatarImageIntrinsicElement,
+  AvatarImageNaviteElement,
   AvatarEmits,
 } from './avatarImage'
 
 export type {
   AvatarProps,
   AvatarElement,
-  AvatarIntrinsicElement,
+  AvatarNaviteElement,
 } from './avatar'
 
 export type {
   AvatarFallbackProps,
   AvatarFalbackElement,
-  AvatarFallbackIntrinsicElement,
+  AvatarFallbackNaviteElement,
 } from './avatarFallback'

packages/components/checkbox/src/bubbleInput.ts

@@ -3,15 +3,13 @@ import { computed, defineComponent, h, ref, toRefs, watchEffect } from 'vue'
 
 import { usePrevious, useSize } from '@oku-ui/use-composable'
 
-import type { ElementType } from '@oku-ui/primitive'
+import type { OkuElement } from '@oku-ui/primitive'
 
 import { type CheckedState, isIndeterminate } from './utils'
 
-type BubbleInputIntrinsicElement = ElementType<'input'>
+export type BubbleInputNaviteElement = Omit<OkuElement<'input', true>, 'checked'>
 
-type BubbleInputElement = Partial<Omit<HTMLInputElement, 'checked'>>
-
-interface BubbleInputProps {
+export interface BubbleInputProps {
   checked: CheckedState
   control: HTMLElement | null
   bubbles: boolean
@@ -43,7 +41,6 @@ const bubbleInput = defineComponent({
     ...bubbleInputProps.props,
   },
   setup(props, { attrs }) {
-    const { ...inputAttrs } = attrs as BubbleInputIntrinsicElement
     const { checked, bubbles, control } = toRefs(props)
     const _ref = ref<HTMLInputElement>()
 
@@ -69,11 +66,11 @@ const bubbleInput = defineComponent({
         'type': 'checkbox',
         'aria-hidden': true,
         'defaultChecked': computed(() => isIndeterminate(checked.value) ? false : checked.value).value,
-        ...inputAttrs,
+        ...attrs,
         'tabindex': -1,
         'ref': _ref,
         'style': {
-          ...inputAttrs.style as any,
+          ...attrs.style as any,
           ...controlSize.value,
           position: 'absolute',
           pointerEvents: 'none',
@@ -86,9 +83,5 @@ const bubbleInput = defineComponent({
 
 export const OkuBubbleInput = bubbleInput as typeof bubbleInput
 & (new () => {
-  $props: Partial<BubbleInputElement>
+  $props: BubbleInputNaviteElement
 })
-
-export type {
-  BubbleInputProps,
-}

packages/components/checkbox/src/checkbox.ts

@@ -6,11 +6,11 @@ import { composeEventHandlers } from '@oku-ui/utils'
 import { useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-composable'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
 import type { Scope } from '@oku-ui/provide'
 import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
-import type { CheckedState, ScopeCheckbox } from './utils'
+import type { CheckedState } from './utils'
 import { OkuBubbleInput } from './bubbleInput'
 
 const CHECKBOX_NAME = 'OkuCheckbox'
@@ -25,7 +25,7 @@ type CheckboxInjectValue = {
 export const [CheckboxProvider, useCheckboxInject]
   = createCheckboxProvider<CheckboxInjectValue>(CHECKBOX_NAME)
 
-export type CheckboxIntrinsicElement = ElementType<'button'>
+export type CheckboxNaviteElement = Omit<OkuElement<'button', true>, 'checked' | 'defaultChecked'>
 export type CheckboxElement = HTMLButtonElement
 
 export interface CheckboxProps extends PrimitiveProps {
@@ -117,7 +117,7 @@ const Checkbox = defineComponent({
 
     const {
       ...checkboxAttrs
-    } = attrs as CheckboxIntrinsicElement
+    } = attrs as CheckboxNaviteElement
 
     const hasConsumerStoppedPropagationRef = ref(false)
 
@@ -210,7 +210,7 @@ const Checkbox = defineComponent({
           // We transform because the input is absolutely positioned but we have
           // rendered it **after** the button. This pulls it back to sit on top
           // of the button.
-          style: { transform: 'translateX(-100%)' } as CSSStyleDeclaration,
+          style: { transform: 'translateX(-100%)' },
         },
       ),
       ]
@@ -222,7 +222,7 @@ const Checkbox = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCheckbox = Checkbox as typeof Checkbox &
 (new () => {
-  $props: ScopeCheckbox<Partial<CheckboxElement>>
+  $props: CheckboxNaviteElement
 })
 
 export {

packages/components/checkbox/src/checkboxIndicator.ts

@@ -4,15 +4,14 @@ import { computed, defineComponent, h, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
 
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { OkuElement, PrimitiveProps } from '@oku-ui/primitive'
 
 import { OkuPresence } from '@oku-ui/presence'
-import type { ScopeCheckbox } from './utils'
 import { getState, isIndeterminate, scopeCheckboxProps } from './utils'
 import { useCheckboxInject } from './checkbox'
 
-export type CheckboxIndicatorIntrinsicElement = ElementType<'span'>
-export type CheckboxIndicatorElement = HTMLSpanElement
+export type CheckboxIndicatorNaviteElement = OkuElement<'span'>
+export type CheckboxElement = HTMLSpanElement
 
 export interface CheckboxIndicatorProps extends PrimitiveProps {
   forceMount?: true
@@ -39,7 +38,7 @@ const checkboxIndicator = defineComponent({
   },
   setup(props, { attrs, slots }) {
     const { forceMount } = toRefs(props)
-    const { ...indicatorAttrs } = attrs as CheckboxIndicatorIntrinsicElement
+    const { ...indicatorAttrs } = attrs as CheckboxIndicatorNaviteElement
 
     const forwardedRef = useForwardRef()
 
@@ -68,5 +67,5 @@ const checkboxIndicator = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuCheckboxIndicator = checkboxIndicator as typeof checkboxIndicator &
 (new () => {
-  $props: ScopeCheckbox<Partial<CheckboxIndicatorElement>>
+  $props: CheckboxIndicatorNaviteElement
 })

packages/components/checkbox/src/index.ts

@@ -7,7 +7,7 @@ export {
 export type {
   CheckboxProps,
   CheckboxElement,
-  CheckboxIntrinsicElement,
+  CheckboxNaviteElement,
   CheckboxEmits,
 } from './checkbox'
 
@@ -17,7 +17,6 @@ export {
 } from './checkboxIndicator'
 
 export type {
-  CheckboxIndicatorElement,
   CheckboxIndicatorProps,
-  CheckboxIndicatorIntrinsicElement,
+  CheckboxIndicatorNaviteElement,
 } from './checkboxIndicator'