refactor(checkbox): update component and some corrections to other co…

…mponents (#432) * refactor: checkbox * fix: useSize * fix: vitest unexpected error * fix: lint issues * refactor: fix typo in tests * refactor: aspect-ratio use slot function * refactor: avatar use slot function * fix: checkbox emits * refactor: popover use slot function * refactor: scroll-area use slot function * refactor: arrow use slot function * refactor: collection use slot function * refactor: visually-hidden use slot function * refactor: dismissable-layer use slot function * refactor: focus-scope use slot function * refactor: portal use slot function * refactor: roving-focus use slot function * refactor: slot use slot function * refactor: popper use slot function * refactor: menu use slot function * refactor: primitive use only slots * fix: slot component * fix: update snapshot tests * refactor: add OkuBubbleInput name * refactor: add OkuBubbleInput name to props file --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
oku-ui · Nov 29, 2023 · 545bb06 · 545bb06
1 parent c579bd5
commit 545bb06
Show file tree

Hide file tree

Showing 95 changed files with 2,201 additions and 5,411 deletions.
diff --git a/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap b/packages/components/alert-dialog/tests/__snapshots__/alert-dialog.test.ts.snap
diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts
@@ -33,24 +33,21 @@ const aspectRatio = defineComponent({
         paddingBottom: `${100 / ratio.value}%`,
       },
       'data-oku-aspect-ratio-wrapper': '',
-    }, [
-      h(Primitive.div, {
-        ...mergeProps(attrs, otherProps, emits),
-        ref: forwardedRef,
-        style: {
-          ...attrs.style as any,
-          // ensures children expand in ratio
-          position: 'absolute',
-          top: '0px',
-          right: '0px',
-          left: '0px',
-          bottom: '0px',
-        },
-      }, slots),
-    ])
+    }, h(Primitive.div, {
+      ...mergeProps(attrs, otherProps, emits),
+      ref: forwardedRef,
+      style: {
+        ...attrs.style as any,
+        // ensures children expand in ratio
+        position: 'absolute',
+        top: '0px',
+        right: '0px',
+        left: '0px',
+        bottom: '0px',
+      },
+    }, () => slots.default?.()))
   },
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAspectRatio = aspectRatio as typeof aspectRatio &
-  (new () => { $props: AspectRatioNativeElement })
+export const OkuAspectRatio = aspectRatio as typeof aspectRatio & (new () => { $props: AspectRatioNativeElement })
diff --git a/packages/components/aspect-ratio/tests/aspect-ratio.test.ts b/packages/components/aspect-ratio/tests/aspect-ratio.test.ts
@@ -47,7 +47,7 @@ describe('okuAspectRatio', () => {
   /**
    * @vitest-environment jsdom
    */
-  it('should pass accessibility tests', async () => {
+  it('should have no accessibility violations', async () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 })
@@ -65,7 +65,7 @@ describe('okuAspectRatio Stories', () => {
     /**
      * @vitest-environment jsdom
      */
-    it('should pass accessibility tests', async () => {
+    it('should have no accessibility violations', async () => {
       expect(await axe(wrapper.element)).toHaveNoViolations()
     })
 
@@ -86,7 +86,7 @@ describe('okuAspectRatio Stories', () => {
     /**
      * @vitest-environment jsdom
      */
-    it('should pass accessibility tests', async () => {
+    it('should have no accessibility violations', async () => {
       expect(await axe(wrapper.element)).toHaveNoViolations()
     })
 
@@ -107,7 +107,7 @@ describe('okuAspectRatio Stories', () => {
     /**
      * @vitest-environment jsdom
      */
-    it('should pass accessibility tests', async () => {
+    it('should have no accessibility violations', async () => {
       expect(await axe(wrapper.element)).toHaveNoViolations()
     })
 

diff --git a/packages/components/avatar/src/avatar-fallback.ts b/packages/components/avatar/src/avatar-fallback.ts
@@ -41,15 +41,15 @@ const avatarFallback = defineComponent({
 
     onBeforeUnmount(() => window.clearTimeout(timerId))
 
-    return () => canRender.value && inject.imageLoadingStatus.value !== 'loaded'
+    return () => [canRender.value && inject.imageLoadingStatus.value !== 'loaded'
       ? h(Primitive.span, {
         ...mergeProps(attrs, otherProps, listeners),
         ref: forwardedRef,
-      }, slots)
-      : null
+      }, () => slots.default?.())
+      : null,
+    ]
   },
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAvatarFallback = avatarFallback as typeof avatarFallback &
-  (new () => { $props: AvatarFallbackNativeElement })
+export const OkuAvatarFallback = avatarFallback as typeof avatarFallback & (new () => { $props: AvatarFallbackNativeElement })
diff --git a/packages/components/avatar/src/avatar-image.ts b/packages/components/avatar/src/avatar-image.ts
@@ -38,16 +38,16 @@ const avatarImage = defineComponent({
         handleLoadingStatusChange(imageLoadingStatus.value)
     })
 
-    return () => imageLoadingStatus.value === 'loaded'
+    return () => [imageLoadingStatus.value === 'loaded'
       ? h(Primitive.img, {
         ...mergeProps(attrs, otherProps, emits),
         src: src.value,
         ref: forwardedRef,
-      }, slots)
-      : null
+      }, () => slots.default?.())
+      : null,
+    ]
   },
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAvatarImage = avatarImage as typeof avatarImage &
-  (new () => { $props: AvatarImageNativeElement })
+export const OkuAvatarImage = avatarImage as typeof avatarImage & (new () => { $props: AvatarImageNativeElement })
diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
@@ -24,7 +24,7 @@ const avatar = defineComponent({
     const otherProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
 
     const forwardedRef = useForwardRef()
-    const listeners = useListeners()
+    const emits = useListeners()
 
     const imageLoadingStatus = ref<ImageLoadingStatus>('idle')
 
@@ -35,12 +35,11 @@ const avatar = defineComponent({
     })
 
     return () => h(Primitive.span, {
-      ...mergeProps(attrs, otherProps, listeners),
+      ...mergeProps(attrs, otherProps, emits),
       ref: forwardedRef,
-    }, slots)
+    }, () => slots.default?.())
   },
 })
 
 // TODO: https://github.com/vuejs/core/pull/7444 after delete
-export const OkuAvatar = avatar as typeof avatar &
-  (new () => { $props: AvatarNativeElement })
+export const OkuAvatar = avatar as typeof avatar & (new () => { $props: AvatarNativeElement })
diff --git a/packages/components/avatar/tests/avatar.test.ts b/packages/components/avatar/tests/avatar.test.ts
@@ -70,7 +70,7 @@ describe('okuAvatar', () => {
   /**
    * @vitest-environment jsdom
    */
-  it('should pass accessibility tests', async () => {
+  it('should have no accessibility violations', async () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
@@ -195,7 +195,7 @@ describe('okuAvatar Stories', () => {
     /**
      * @vitest-environment jsdom
      */
-    it('should pass accessibility tests', async () => {
+    it('should have no accessibility violations', async () => {
       expect(await axe(wrapper.element)).toHaveNoViolations()
     })
 
@@ -216,7 +216,7 @@ describe('okuAvatar Stories', () => {
     /**
      * @vitest-environment jsdom
      */
-    it('should pass accessibility tests', async () => {
+    it('should have no accessibility violations', async () => {
       expect(await axe(wrapper.element)).toHaveNoViolations()
     })
 

diff --git a/packages/components/checkbox/README.md b/packages/components/checkbox/README.md
@@ -4,12 +4,12 @@ A control that allows the user to toggle between checked and not checked.
 
 ![@oku-ui/checkbox](./../../../.github/assets/og/oku-checkbox.jpg)
 
-<span><a href="https://www.npmjs.com/package/@oku-ui/checkbox "><img src="https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/checkbox"> <img src="https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/checkbox"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
+[![Version](https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/checkbox) [![Downloads](https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D)](https://www.npmjs.com/package/@oku-ui/checkbox)
 
 ## Installation
 
 ```sh
 $ pnpm add @oku-ui/checkbox
 ```
 
-[Documentation](https://oku-ui.com/primitives/components/checkbox)
+[Documentation](https://oku-ui.com/primitives/components/checkbox)