refactor(toggle-group): migrate single and multiple groups to a singl…

…e component (#318)

* refactor: toggle group single and multiple to one component

* fix: test

* fix: ariaChecked

packages/components/roving-focus/src/RovingFocusGroup.ts

@@ -2,7 +2,7 @@ import { createProvideScope } from '@oku-ui/provide'
 import type { CollectionPropsType } from '@oku-ui/collection'
 import { createCollection } from '@oku-ui/collection'
 import type { Ref } from 'vue'
-import { defineComponent, h, toRefs } from 'vue'
+import { defineComponent, h, mergeProps, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { primitiveProps } from '@oku-ui/primitive'
 import { OkuRovingFocusGroupImpl, rovingFocusGroupImplProps } from './RovingFocusGroupImpl'
@@ -90,7 +90,16 @@ const rovingFocusGroup = defineComponent({
   },
   emits: rovingFocusGroupProps.emits,
   setup(props, { slots, attrs }) {
-    const { currentTabStopId, dir, loop, orientation, defaultCurrentTabStopId, asChild } = toRefs(props)
+    const {
+      currentTabStopId,
+      dir,
+      loop,
+      orientation,
+      defaultCurrentTabStopId,
+      asChild,
+      ...rest
+    } = toRefs(props)
+
     const forwardedRef = useForwardRef()
     return () => {
       return h(CollectionProvider, {
@@ -100,7 +109,7 @@ const rovingFocusGroup = defineComponent({
           scope: props.scopeOkuRovingFocusGroup,
         }, {
           default: () => h(OkuRovingFocusGroupImpl, {
-            ...attrs,
+            ...mergeProps(rest, attrs),
             asChild: asChild.value,
             currentTabStopId: currentTabStopId?.value,
             defaultCurrentTabStopId: defaultCurrentTabStopId?.value,

packages/components/roving-focus/src/RovingFocusGroupImpl.ts

@@ -167,9 +167,7 @@ const RovingFocusGroupImpl = defineComponent({
         }, () => {
           isTabbingBackOut.value = false
         }),
-      }, {
-        default: () => slots.default?.(),
-      })
+      }, slots)
     }
   },
 })

packages/components/roving-focus/tests/__snapshots__/roving-focus.test.ts.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`OkuRovingFocusGroup > OkuRovingFocusGroupItem aschild > empty 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    style="outline-color: none; outline-style: none; outline-width: initial;"
+    tabindex="-1"
+  >
+    <!---->
+    <!---->
+  </div>
+  
+</div>
+`;
+
+exports[`OkuRovingFocusGroup > OkuRovingFocusGroupItem aschild > one button 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <div
+    style="outline-color: none; outline-style: none; outline-width: initial;"
+    tabindex="-1"
+  >
+    <button
+      data-oku-collection-item=""
+      tabindex="-1"
+    >
+      button
+    </button>
+  </div>
+  
+</div>
+`;

packages/components/roving-focus/tests/roving-focus.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import type { Component } from 'vue'
+import { h } from 'vue'
+import { OkuRovingFocusGroup, OkuRovingFocusGroupItem } from '../src'
+
+const component = {
+  setup(props, { slots, attrs }) {
+    return () => h(OkuRovingFocusGroup, attrs, slots)
+  },
+} as Component
+
+describe('OkuRovingFocusGroup', () => {
+  describe('OkuRovingFocusGroupItem aschild', () => {
+    it('empty', () => {
+      const com = mount(component, {
+        slots: {
+          default: () => [
+            h(OkuRovingFocusGroupItem, {
+              asChild: true,
+            }),
+            h(OkuRovingFocusGroupItem, {
+              asChild: true,
+            }),
+          ],
+        },
+      })
+      expect(com.element).toMatchSnapshot()
+    })
+
+    it('one button', async () => {
+      const com = mount(component, {
+        slots: {
+          default: () => [
+            h(OkuRovingFocusGroupItem, {
+              asChild: true,
+            }, {
+              default: () => h('button', {}, 'button'),
+            }),
+          ],
+        },
+      })
+      expect(com.element).toMatchSnapshot()
+    })
+  })
+})