refactor: props and emits

packages/components/arrow/src/arrow.ts

@@ -1,43 +1,62 @@
-import { cloneVNode, defineComponent, h } from 'vue'
+import type { PropType } from 'vue'
+import { cloneVNode, defineComponent, h, toRefs } from 'vue'
 import type { ElementType, 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 ArrowElement = SVGSVGElement
 
-interface ArrowProps extends PrimitiveProps {}
+export interface ArrowProps extends PrimitiveProps {
+  width?: number
+  height?: number
+}
+
+export const arrowProps = {
+  props: {
+    width: {
+      type: Number as PropType<number>,
+      default: '5',
+    },
+    height: {
+      type: Number as PropType<number>,
+      default: '10',
+    },
+    ...primitiveProps,
+  },
+  emits: {},
+}
 
 const NAME = 'OkuArrow'
 
 const arrow = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: {
-    ...primitiveProps,
+    ...arrowProps.props,
   },
   setup(props, { attrs, slots }) {
     const forwardedRef = useForwardRef()
 
-    const { width = '10px', height = '5px', ...arrowAttrs } = attrs as ArrowIntrinsicElement
+    const { width, height } = toRefs(props)
 
     const originalReturn = () => {
       const defaultSlot = typeof slots.default === 'function' ? slots.default()[0] : slots.default ?? null
       return props.asChild
         ? defaultSlot
           ? cloneVNode(defaultSlot, {
-            ...arrowAttrs,
-            width,
-            height,
+            ...attrs,
+            width: `${width.value}px`,
+            height: `${height.value}px`,
             viewBox: '0 0 30 10',
             preserveAspectRatio: 'none',
           })
           : null
         : h(Primitive.svg, {
-          ...arrowAttrs,
+          ...attrs,
           ref: forwardedRef,
-          width,
-          height,
+          width: width.value,
+          height: height.value,
           viewBox: '0 0 30 10',
           preserveAspectRatio: 'none',
         },
@@ -55,7 +74,5 @@ const arrow = defineComponent({
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
 export const OkuArrow = arrow as typeof arrow
 & (new () => {
-  $props: Partial<ArrowElement>
+  $props: Partial<ArrowIntrinsicElement>
 })
-
-export type { ArrowProps }

packages/components/arrow/src/index.ts

@@ -1,4 +1,10 @@
 export {
   OkuArrow,
+  arrowProps,
+} from './arrow'
+
+export type {
+  ArrowProps,
+  ArrowElement,
+  ArrowIntrinsicElement,
 } from './arrow'
-export type { ArrowProps, ArrowElement, ArrowIntrinsicElement } from './arrow'

packages/components/arrow/src/stories/ArrowDemo.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import type { InstanceArrowType } from '@oku-ui/arrow'
 import { OkuArrow } from '@oku-ui/arrow'
 
 export interface OkuArrowProps {
@@ -12,30 +11,29 @@ withDefaults(defineProps<OkuArrowProps>(), {
   template: '#1',
 })
 
-const arrowRef = ref<InstanceArrowType>()
+const arrowRef = ref()
 onMounted(() => {
-  console.log(arrowRef.value?.$el)
+  console.log(arrowRef.value)
 })
-const alert = () => window.alert('clicked')
 </script>
 
 <template>
   <div>
     <template v-if="template === '#1'">
       <div class="grid grid-cols-4 gap-4">
-        <OkuArrow ref="arrowRef" width="20" height="10" class="align-middle fill-blue-500" />
+        <OkuArrow ref="arrowRef" :width="20" :height="10" class="align-middle fill-blue-500" />
       </div>
     </template>
 
     <template v-if="template === '#2'">
       <div class="grid grid-cols-4 gap-4">
-        <OkuArrow width="40" height="10" class="align-middle" />
+        <OkuArrow :width="40" :height="10" class="align-middle" />
 
-        <OkuArrow width="40" height="10" class="align-middle" />
+        <OkuArrow :width="40" :height="10" class="align-middle" />
 
-        <OkuArrow width="50" height="30" class="align-middle" />
+        <OkuArrow :width="50" :height="30" class="align-middle" />
 
-        <OkuArrow width="20" height="100" class="align-middle" />
+        <OkuArrow :width="20" :height="100" class="align-middle" />
       </div>
     </template>
 

packages/components/arrow/tests/__snapshots__/arrow.test.ts.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`label > tag 1`] = `
+<svg
+  data-testid="test-arrow"
+  height="30"
+  preserveAspectRatio="none"
+  viewBox="0 0 30 10"
+  width="40"
+>
+  <polygon
+    points="0,0 30,0 15,10"
+  />
+</svg>
+`;

packages/components/arrow/src/arrow.test.ts → packages/components/arrow/tests/arrow.test.ts

@@ -4,7 +4,8 @@ import { mount } from '@vue/test-utils'
 import type { VueNode } from '@vue/test-utils/dist/types'
 import type { Component } from 'vue'
 import { h } from 'vue'
-import { OkuArrow } from './arrow'
+import { axe } from 'vitest-axe'
+import { OkuArrow } from '../src'
 
 const component = {
   setup(props, { attrs, slots }) {
@@ -13,8 +14,8 @@ const component = {
 } as Component
 
 // TODO: delete any
-const WIDTH = 40 as any
-const HEIGHT = 30 as any
+const WIDTH = 40
+const HEIGHT = 30
 
 describe('label', () => {
   let _wrapper: VueWrapper
@@ -34,15 +35,19 @@ describe('label', () => {
   })
 
   it('tag', () => {
-    expect(_wrapper.html()).equal(`<svg data-testid="test-arrow" width="40" height="30" viewBox="0 0 30 10" preserveAspectRatio="none">
-  <polygon points="0,0 30,0 15,10"></polygon>
-</svg>`)
+    expect(_wrapper.element).toMatchSnapshot()
   })
 
+  /**
+ * @vitest-environment jsdom
+ */
   it('shold have no accessibility violations', async () => {
     // https://github.com/capricorn86/happy-dom/issues/978
-    // const results = await axe(_wrapper.element)
-    // expect(results).toHaveNoViolations()
+    const results = await axe(_wrapper.element)
+    // TODO:77 https://github.com/chaance/vitest-axe/issues/7
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    expect(results).toHaveNoViolations()
   })
 
   it('should have width attribute', () => {

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

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
 import { defineComponent, h, toRef } from 'vue'
 import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
@@ -9,18 +9,25 @@ export type AspectRatioElement = HTMLDivElement
 
 const NAME = 'OkuAspectRatio'
 
-interface AspectRatioProps extends PrimitiveProps {
+export interface AspectRatioProps extends PrimitiveProps {
   ratio?: number
 }
 
-const AspectRatio = defineComponent({
-  name: NAME,
-  inheritAttrs: false,
+export const aspectRatioProps = {
   props: {
     ratio: {
-      type: Number,
+      type: Number as PropType<number>,
       default: 1 / 1,
     },
+  },
+  emits: {},
+}
+
+const AspectRatio = defineComponent({
+  name: NAME,
+  inheritAttrs: false,
+  props: {
+    ...aspectRatioProps.props,
     ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
@@ -69,5 +76,3 @@ export const OkuAspectRatio = AspectRatio as typeof AspectRatio &
 (new () => {
   $props: Partial<AspectRatioElement>
 })
-
-export type { AspectRatioProps }

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

@@ -1,4 +1,8 @@
-export { OkuAspectRatio } from './aspect-ratio'
+export {
+  OkuAspectRatio,
+  aspectRatioProps,
+} from './aspect-ratio'
+
 export type {
   AspectRatioProps,
   AspectRatioElement,

packages/components/aspect-ratio/tests/__snapshots__/aspect-ratio.test.ts.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`OkuAspectRatio > component render 1`] = `
+<div
+  data-oku-aspect-ratio-wrapper=""
+  style="position: relative; width: 100%; padding-bottom: 100%;"
+>
+  <div
+    style="position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px;"
+  >
+    <!---->
+  </div>
+</div>
+`;

packages/components/aspect-ratio/tests/aspect-ratio.test.ts

@@ -0,0 +1,39 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import type { Component } from 'vue'
+import { h } from 'vue'
+import { axe } from 'vitest-axe'
+import { OkuAspectRatio } from '../src'
+
+const component = {
+  setup(props, { attrs, slots }) {
+    return () => h(OkuAspectRatio, { ...attrs }, slots)
+  },
+} as Component
+
+describe('OkuAspectRatio', () => {
+  enableAutoUnmount(afterEach)
+
+  it('renders the component correctly', () => {
+    const wrapper = mount(component)
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  /**
+  * @vitest-environment jsdom
+  */
+  it('should have no accessibility violations', async () => {
+    const _wrapper = mount(component)
+    const results = await axe(_wrapper.element)
+    // https:// github.com/capricorn86/happy-dom/issues/978
+    // TODO:77 https://github.com/chaance/vitest-axe/issues/7
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    expect(results).toHaveNoViolations()
+  })
+
+  it('component render', async () => {
+    const wrapper = mount(component)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

packages/components/avatar/src/avatar.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref } from 'vue'
 import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
-import { Primitive } from '@oku-ui/primitive'
+import { Primitive, primitiveProps } from '@oku-ui/primitive'
 import { createProvideScope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
 import type { ScopeAvatar } from './utils'
@@ -21,15 +21,22 @@ export const [avatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvi
 export type AvatarIntrinsicElement = ElementType<'span'>
 export type AvatarElement = HTMLSpanElement
 
-interface AvatarProps extends PrimitiveProps {
+export interface AvatarProps extends PrimitiveProps {
 
 }
 
+export const avatarProps = {
+  props: {},
+  emits: {},
+}
+
 const avatar = defineComponent({
   name: AVATAR_NAME,
   inheritAttrs: false,
   props: {
+    ...avatarProps,
     ...scopeAvatarProps,
+    ...primitiveProps,
   },
   setup(props, { attrs, slots }) {
     const { ...avatarProps } = attrs as AvatarIntrinsicElement
@@ -50,6 +57,7 @@ const avatar = defineComponent({
       Primitive.span, {
         ...avatarProps,
         ref: forwardedRef,
+        asChild: props.asChild,
       },
       {
         default: () => slots.default?.(),
@@ -64,7 +72,3 @@ export const OkuAvatar = avatar as typeof avatar &
 (new () => {
   $props: ScopeAvatar<Partial<AvatarElement>>
 })
-
-export type {
-  AvatarProps,
-}