refactor(roving-focus): ts to sfc (#509)

* refactor(roving-focus): ts to sfc

* Refactor focus handling and add tabindex attribute

* Add outline style to RovingFocusGroupImpl.vue

* Refactor focus and blur event handlers in RovingFocusGroupImpl.vue

* Remove unused import statement in Slot.vue

packages/vue/src/primitive/Primitive.vue

@@ -12,7 +12,6 @@ import { OkuSlot } from '@oku-ui/slot'
 
 defineOptions({
   name: 'OkuPrimitive',
-  inheritAttrs: false,
 })
 
 withDefaults(

packages/vue/src/primitive/index.ts

@@ -1,5 +1,7 @@
-export { default as Primitive } from './Primitive.vue'
-export type * from './Primitive.vue'
+export {
+  default as Primitive,
+  type PrimitiveProps,
+} from './Primitive.vue'
 
 export { renderSlotFragments } from './utils'
 

packages/vue/src/primitive/utils.ts

@@ -1,7 +1,7 @@
 // same inspiration and resource https://github.com/chakra-ui/ark/blob/main/packages/vue/src/factory.tsx
 
 import type { VNode } from 'vue'
-import { Fragment, nextTick, watch, watchSyncEffect } from 'vue'
+import { Fragment } from 'vue'
 
 /**
  * Checks whether a given VNode is a render-vialble element.

packages/vue/src/roving-focus/RovingFocusGroup.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useComponentRef } from '@oku-ui/use-composable'
+import OkuRovingFocusGroupImpl from './RovingFocusGroupImpl.vue'
+import type { RovingFocusGroupProps } from './props'
+import { CollectionProvider, CollectionSlot } from './props'
+
+defineOptions({
+  name: 'OkuRovingFocusGroup',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<RovingFocusGroupProps>(), {
+  orientation: undefined,
+  dir: undefined,
+  loop: false,
+})
+
+const { componentRef, currentElement } = useComponentRef<HTMLInputElement | null>()
+
+defineExpose({
+  $el: currentElement,
+})
+</script>
+
+<template>
+  <CollectionProvider
+    :scope="props.scopeOkuRovingFocusGroup"
+  >
+    <CollectionSlot
+      :scope="props.scopeOkuRovingFocusGroup"
+    >
+      <OkuRovingFocusGroupImpl
+        v-bind="$attrs"
+        :is="props.is"
+        ref="componentRef"
+        :orientation="props.orientation"
+        :dir="props.dir"
+        :loop="props.loop"
+        :as-child="props.asChild"
+      >
+        <slot />
+      </OkuRovingFocusGroupImpl>
+    </CollectionSlot>
+  </CollectionProvider>
+</template>