feat(roving-focus): new package roving-focus (#275)

* feat: focus * feat: usecomposeEventHanders * feat: usecomposeEventHanders * fix: focus group * fix: focus * fix: export type * fix: ts * fix: imports * chore: add collection test * fix: primitive * fix: child * fix: event * fix: tab index * fix: roving * fix: collection index * chore: change mounted * fix: test * chore: delete useComposeEventHandlers * chore: add more stories * chore: add playground
oku-ui · Aug 9, 2023 · fdcbf96 · fdcbf96
1 parent b52e436
commit fdcbf96
Show file tree

Hide file tree

Showing 61 changed files with 1,558 additions and 314 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@oku-ui/primitive": "workspace:^",
     "@oku-ui/progress": "workspace:^",
     "@oku-ui/provide": "workspace:^",
+    "@oku-ui/roving-focus": "workspace:^",
     "@oku-ui/separator": "workspace:^",
     "@oku-ui/slot": "workspace:^",
     "@oku-ui/switch": "workspace:^",

diff --git a/packages/components/arrow/src/arrow.ts b/packages/components/arrow/src/arrow.ts
@@ -1,12 +1,12 @@
 import { cloneVNode, defineComponent, h } from 'vue'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
 type ArrowElement = ElementType<'svg'>
 export type _ArrowEl = SVGSVGElement
 
-interface ArrowProps extends PrimitiveProps {}
+interface ArrowProps extends IPrimitiveProps {}
 
 const NAME = 'Arrow'
 

diff --git a/packages/components/aspect-ratio/src/aspect-ratio.ts b/packages/components/aspect-ratio/src/aspect-ratio.ts
@@ -1,9 +1,9 @@
 import { defineComponent, h } from 'vue'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import { useForwardRef } from '@oku-ui/use-composable'
 
-interface AspectRatioProps extends PrimitiveProps {
+interface AspectRatioProps extends IPrimitiveProps {
   ratio?: number
 }
 

diff --git a/packages/components/avatar/src/avatar.ts b/packages/components/avatar/src/avatar.ts
@@ -1,6 +1,6 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, ref } from 'vue'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { createProvideScope } from '@oku-ui/provide'
@@ -21,7 +21,7 @@ export const [AvatarProvider, useAvatarInject] = createAvatarProvide<AvatarProvi
 type AvatarElement = ElementType<'span'>
 export type _AvatarEl = HTMLSpanElement
 
-interface AvatarProps extends PrimitiveProps {
+interface AvatarProps extends IPrimitiveProps {
   scopeAvatar?: Scope
 }
 

diff --git a/packages/components/avatar/src/avatarFallback.ts b/packages/components/avatar/src/avatarFallback.ts
@@ -1,6 +1,6 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, onMounted, ref, watchEffect } from 'vue'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { useForwardRef } from '@oku-ui/use-composable'
@@ -11,7 +11,7 @@ const FALLBACK_NAME = 'OkuAvatarFallback'
 type AvatarFallbackElement = ElementType<'span'>
 export type _AvatarFalbackEl = HTMLSpanElement
 
-interface AvatarFallbackProps extends PrimitiveProps {
+interface AvatarFallbackProps extends IPrimitiveProps {
   delayMs?: number
 }
 

diff --git a/packages/components/avatar/src/avatarImage.ts b/packages/components/avatar/src/avatarImage.ts
@@ -1,6 +1,6 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, onMounted, toRefs, watch } from 'vue'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { useCallbackRef, useForwardRef } from '@oku-ui/use-composable'
@@ -13,7 +13,7 @@ const IMAGE_NAME = 'AvatarImage'
 type AvatarImageElement = ElementType<'img'>
 export type _AvatarImageEl = HTMLImageElement
 
-interface AvatarImageProps extends PrimitiveProps {
+interface AvatarImageProps extends IPrimitiveProps {
   onLoadingStatusChange?: (status: ImageLoadingStatus) => void
   scopeAvatar?: Scope
 }

diff --git a/packages/components/checkbox/src/bubbleInput.ts b/packages/components/checkbox/src/bubbleInput.ts
@@ -3,13 +3,13 @@ import { defineComponent, h, ref, toRefs, watchEffect } from 'vue'
 
 import { usePrevious, useSize } from '@oku-ui/use-composable'
 
-import type { ElementType, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps } from '@oku-ui/primitive'
 
 import { type CheckedState, isIndeterminate } from './utils'
 
 type BubbleInputElement = ElementType<'input'>
 
-interface BubbleInputProps extends PrimitiveProps {
+interface BubbleInputProps extends IPrimitiveProps {
   checked: Ref<CheckedState>
   control: HTMLElement | null
   bubbles: boolean

diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
@@ -6,7 +6,7 @@ import { composeEventHandlers } from '@oku-ui/utils'
 import { useComposedRefs, useControllable, useForwardRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 
-import type { ComponentPublicInstanceRef, ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ComponentPublicInstanceRef, ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 
 import type { Scope } from '@oku-ui/provide'
 import { type CheckedState, getState, isIndeterminate } from './utils'
@@ -27,7 +27,7 @@ export const [CheckboxProvider, useCheckboxInject]
 type CheckboxElement = ElementType<'button'>
 export type _CheckboxEl = HTMLButtonElement
 
-interface CheckboxProps extends PrimitiveProps {
+interface CheckboxProps extends IPrimitiveProps {
   checked?: CheckedState
   defaultChecked?: CheckedState
   required?: boolean
@@ -176,7 +176,7 @@ const Checkbox = defineComponent({
 
 type CheckboxIndicatorElement = ElementType<'span'>
 
-interface CheckboxIndicatorProps extends PrimitiveProps {
+interface CheckboxIndicatorProps extends IPrimitiveProps {
   forceMount?: true
 }
 

diff --git a/packages/components/checkbox/src/checkboxIndicator.ts b/packages/components/checkbox/src/checkboxIndicator.ts
@@ -4,7 +4,7 @@ import { Transition, defineComponent, h, toRefs } from 'vue'
 import { useForwardRef } from '@oku-ui/use-composable'
 import { Primitive } from '@oku-ui/primitive'
 
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 
 import type { Scope } from '@oku-ui/provide'
 import { getState, isIndeterminate } from './utils'
@@ -13,7 +13,7 @@ import { useCheckboxInject } from './checkbox'
 type CheckboxIndicatorElement = ElementType<'span'>
 export type _CheckboxIndicatorEl = HTMLSpanElement
 
-interface CheckboxIndicatorProps extends PrimitiveProps {
+interface CheckboxIndicatorProps extends IPrimitiveProps {
   forceMount?: true
 }
 

diff --git a/packages/components/collapsible/src/collapsible.ts b/packages/components/collapsible/src/collapsible.ts
@@ -1,14 +1,14 @@
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, toRefs, useModel } from 'vue'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { createProvideScope } from '@oku-ui/provide'
 import { Primitive } from '@oku-ui/primitive'
 
 import { useControllable, useForwardRef, useId } from '@oku-ui/use-composable'
 import { getState } from './utils'
 
-interface CollapsibleProps extends PrimitiveProps {
+interface CollapsibleProps extends IPrimitiveProps {
 }
 type CollapsibleElement = ElementType<'div'>
 export type _CollapsibleEl = HTMLDivElement

diff --git a/packages/components/collapsible/src/collapsibleContent.ts b/packages/components/collapsible/src/collapsibleContent.ts
@@ -3,7 +3,7 @@ import { Transition, defineComponent, h, toRefs } from 'vue'
 import type { Scope } from '@oku-ui/provide'
 
 import { useForwardRef } from '@oku-ui/use-composable'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { OkuPresence } from '@oku-ui/presence'
 import { OkuCollapsibleContentImpl } from './collapsibleContentImpl'
 import { useCollapsibleInject } from './collapsible'
@@ -13,7 +13,7 @@ export const CONTENT_NAME = 'CollapsibleContent'
 type CollapsibleContentElement = ElementType<'div'>
 export type _CollapsibleContentEl = HTMLDivElement
 
-interface CollapsibleContentProps extends PrimitiveProps {
+interface CollapsibleContentProps extends IPrimitiveProps {
 }
 
 const CollapsibleContent = defineComponent({

diff --git a/packages/components/collapsible/src/collapsibleContentImpl.ts b/packages/components/collapsible/src/collapsibleContentImpl.ts
@@ -1,6 +1,6 @@
 import type { PropType, Ref } from 'vue'
 import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch, watchEffect } from 'vue'
-import type { ComponentPublicInstanceRef, ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ComponentPublicInstanceRef, ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import type { Scope } from '@oku-ui/provide'
 import { Primitive } from '@oku-ui/primitive'
 
@@ -12,7 +12,7 @@ import { CONTENT_NAME } from './collapsibleContent'
 type CollapsibleContentImplElement = ElementType<'div'>
 export type _CollapsibleContentImplEl = HTMLDivElement
 
-interface CollapsibleContentImplProps extends PrimitiveProps { }
+interface CollapsibleContentImplProps extends IPrimitiveProps { }
 
 const CollapsibleContentImpl = defineComponent({
   inheritAttrs: false,

diff --git a/packages/components/collapsible/src/collapsibleTrigger.ts b/packages/components/collapsible/src/collapsibleTrigger.ts
@@ -1,7 +1,7 @@
 import type { PropType } from 'vue'
 import { defineComponent, h, toRefs } from 'vue'
 import type { Scope } from '@oku-ui/provide'
-import type { ElementType, InstanceTypeRef, MergeProps, PrimitiveProps } from '@oku-ui/primitive'
+import type { ElementType, IPrimitiveProps, InstanceTypeRef, MergeProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 import { composeEventHandlers } from '@oku-ui/utils'
 
@@ -14,7 +14,7 @@ const TRIGGER_NAME = 'OkuCollapsibleTrigger'
 type CollapsibleTriggerElement = ElementType<'button'>
 export type _CollapsibleTriggerEl = HTMLButtonElement
 
-interface CollapsibleTriggerProps extends PrimitiveProps { }
+interface CollapsibleTriggerProps extends IPrimitiveProps { }
 
 const CollapsibleTrigger = defineComponent({
   name: TRIGGER_NAME,

diff --git a/packages/components/collection/src/collection.test.ts b/packages/components/collection/src/collection.test.ts
@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { h, ref, watchEffect } from 'vue'
+import { createCollection } from './collection'
+
+describe('collection', () => {
+  it('renders the component correctly', () => {
+    type ItemData = { disabled?: boolean }
+
+    const { CollectionSlot, CollectionItemSlot, CollectionProvider, useCollection } = createCollection<HTMLLIElement, ItemData>('List', {
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    })
+    const TestComponent = {
+      components: {
+        CollectionSlot,
+      },
+      setup() {
+        function LogsItem() {
+          const data = useCollection('List')
+          const refData = ref()
+          watchEffect(() => {
+            if (data.value)
+              refData.value = data.value
+          })
+          if (refData.value?.[2]?.disabled)
+            expect('disabled').toBe('disabled')
+        }
+
+        return () => h(CollectionProvider, {}, {
+          default: () => h(CollectionSlot, {}, {
+            default: () => h('ul', { class: 'w-20' }, {
+              default: () => [
+                h(CollectionItemSlot, {}, {
+                  default: () => h('li', {}, 'Item 1'),
+                }),
+                h(CollectionItemSlot, {}, {
+                  default: () => h('li', {}, 'Item 2'),
+                }),
+                h(CollectionItemSlot, { disabled: true }, {
+                  default: () => h('li', {}, 'Item 3'),
+                }),
+                h(LogsItem),
+              ],
+            }),
+          }),
+        })
+      },
+    }
+    const wrapper = mount(TestComponent)
+
+    expect(wrapper.html()).toBe(`<ul class="w-20">
+  <li data-oku-collection-item="">Item 1</li>
+  <li data-oku-collection-item="">Item 2</li>
+  <li data-oku-collection-item="">Item 3</li>
+  <!---->
+</ul>`,
+    )
+  })
+})