chore: update components

packages/vue/src/arrow/Arrow.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
   {
     width: 30,
     height: 10,
+    is: 'svg',
   },
 )
 
@@ -25,16 +26,15 @@ defineExpose({
 
 <template>
   <Primitive
-    v-bind="props"
-    is="svg"
+    :is="props.is"
     ref="componentRef"
     viewBox="0 0 30 10"
-    :as-child="asChild"
-    :width="width"
-    :height="height"
-    :preserveAspectRatio="asChild ? undefined : 'none'"
+    :as-child="props.asChild"
+    :width="props.width"
+    :height="props.height"
+    :preserveAspectRatio="props.asChild ? undefined : 'none'"
   >
-    <slot v-if="asChild" />
+    <slot v-if="props.asChild" />
     <polygon
       v-else
       points="0,0 30,0 15,10"

packages/vue/src/arrow/index.ts

@@ -1,4 +1,4 @@
 export {
   default as OkuArrow,
+  type ArrowProps,
 } from './Arrow.vue'
-export type * from './Arrow.vue'

packages/vue/src/aspect-ratio/AspectRatio.vue

@@ -18,6 +18,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<AspectRatioProps>(), {
   ratio: 1 / 1,
+  is: 'div',
 })
 
 const { componentRef, currentElement } = useComponentRef<HTMLDivElement | null>()
@@ -39,9 +40,10 @@ defineExpose({
     data-oku-aspect-ratio-wrapper=""
   >
     <Primitive
-      is="div"
+      :is="props.is"
       v-bind="$attrs"
       ref="componentRef"
+      :as-child="props.asChild"
       :style="{
         ...$attrs.style as any,
         // ensures children expand in ratio

packages/vue/src/focus-scope/FocusScope.vue

@@ -45,6 +45,7 @@ export type FocusScopeEmits = {
    */
   unmountAutoFocus: [event: Event]
 }
+
 </script>
 
 <script setup lang="ts">
@@ -55,7 +56,9 @@ defineOptions({
 const props = withDefaults(defineProps<FocusScopeProps>(), {
   loop: false,
   trapped: false,
+  is: 'div',
 })
+
 const emit = defineEmits<FocusScopeEmits>()
 
 const { componentRef, currentElement } = useComponentRef<HTMLElement | null>()
@@ -250,10 +253,10 @@ defineExpose({
 
 <template>
   <Primitive
-    is="div"
+    :is="props.is"
     ref="componentRef"
+    :as-child="props.asChild"
     :tabindex="-1"
-    :as-child="asChild"
     @keydown="handleKeydown"
   >
     <slot />

packages/vue/src/label/Label.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { mergeProps, useAttrs } from 'vue'
-import { useComponentRef, useListeners } from '@oku-ui/use-composable'
+import { useComponentRef } from '@oku-ui/use-composable'
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
 
@@ -12,25 +11,27 @@ export type LabelEmits = {
   mousedown: [event: MouseEvent]
 }
 
-const props = defineProps<LabelProps>()
-const emit = defineEmits<LabelEmits>()
+const props = withDefaults(
+  defineProps<LabelProps>(),
+  {
+    is: 'label',
+  },
+)
 
-const attrs = useAttrs()
+const emit = defineEmits<LabelEmits>()
 
 const { componentRef, currentElement } = useComponentRef<HTMLLabelElement | null>()
 
 defineExpose({
   $el: currentElement,
 })
 
-const emits = useListeners(['onMousedown'])
 </script>
 
 <template>
   <Primitive
-    is="label"
+    v-bind="props"
     ref="componentRef"
-    v-bind="mergeProps(props, attrs, emits)"
     @mousedown="(event: LabelEmits['mousedown'][0]) => {
       emit('mousedown', event)
       // prevent text selection when double clicking label

packages/vue/src/label/index.ts

@@ -1,2 +1,6 @@
-export { default as OkuLabel } from './Label.vue'
+export {
+  default as OkuLabel,
+  type LabelProps,
+  type LabelEmits,
+} from './Label.vue'
 export type * from './Label.vue'

packages/vue/src/popper/Popper.vue

@@ -1,42 +1,28 @@
 <script lang="ts">
-import { createScope } from '@oku-ui/provide'
 import { defineOptions, ref } from 'vue'
+import { usePopperProvide } from './utils'
 
 export interface ScopePopper {
   scopeOkuPopper?: any
 }
 
-export const { composeProviderScopes, createProvide }
-    = createScope<PopperProvide['_names']>('OkuPopper')
-
-export type PopperProvide = {
-  _names: 'OkuPopper' | 'OkuPopperContent'
-  anchor: Ref<Measurable | null>
-  onAnchorChange(anchor: Measurable | null): void
-}
-
-export const { useProvider, useInject: usePopperInject }
-    = createProvide<Omit<PopperProvide, '_names'>>('OkuPopper')
 </script>
 
 <script setup lang="ts">
-import type { Ref } from 'vue'
-
 import type { Measurable } from '@oku-ui/utils'
 
 export interface PopperProps extends ScopePopper {
 }
 
 defineOptions({
   name: 'OkuPopper',
-  inheritAttrs: false,
 })
 
 const props = defineProps<PopperProps>()
 
 const anchor = ref<Measurable | null>(null)
 
-useProvider({
+usePopperProvide({
   scope: props.scopeOkuPopper,
   anchor,
   onAnchorChange(value: Measurable | null) {

packages/vue/src/popper/PopperAnchor.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@oku-ui/primitive'
+import { usePopperInject } from './utils'
 
 interface PopperAnchorProps extends PrimitiveProps {
   virtualRef?: any
@@ -9,7 +10,6 @@ interface PopperAnchorProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import { defineOptions, watchEffect, withDefaults } from 'vue'
-import { usePopperInject } from './Popper.vue'
 import { Primitive } from '@oku-ui/primitive'
 import { useComponentRef } from '@oku-ui/use-composable'
 
@@ -21,29 +21,30 @@ const props = withDefaults(
   defineProps<PopperAnchorProps>(),
   {
     virtualRef: undefined,
+    is: 'div',
   },
 )
 
 const inject = usePopperInject('OkuPopper', props.scopeOkuPopper)
 const { componentRef, currentElement } = useComponentRef<HTMLDivElement | null>()
 
-defineExpose({
-  $el: currentElement,
-})
-
 watchEffect(() => {
   // Consumer can anchor the popper to something that isn't
   // a DOM node e.g. pointer position, so we override the
   // `anchorRef` with their virtual ref in this case.
   inject.onAnchorChange(props.virtualRef ?? currentElement.value)
 })
+
+defineExpose({
+  $el: currentElement,
+})
 </script>
 
 <template>
   <Primitive
-    :is="is"
+    :is="props.is"
     ref="componentRef"
-    :as-child="asChild"
+    :as-child="props.asChild"
   >
     <slot />
   </Primitive>

packages/vue/src/popper/PopperArrow.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { ArrowProps } from '@oku-ui/arrow'
-import type { Side } from './utils'
+import { type Side, usePopperContentInject } from './utils'
 
 export interface PopperArrowProps extends ArrowProps {
   scopeOkuPopper?: any
@@ -19,8 +19,6 @@ import { computed, defineOptions } from 'vue'
 import { useComponentRef } from '@oku-ui/use-composable'
 import { OkuArrow } from '@oku-ui/arrow'
 
-import { usePopperContentInject } from './PopperContent.vue'
-
 defineOptions({
   name: 'OkuPopperArrow',
   inheritAttrs: false,

packages/vue/src/popper/PopperContent.vue

@@ -1,6 +1,4 @@
 <script lang="ts">
-import { createProvide, usePopperInject } from './Popper.vue'
-
 type Boundary = Element | null | Array<Element | null>
 
 export interface PopperContentProps extends PrimitiveProps {
@@ -62,21 +60,10 @@ export interface PopperContentProps extends PrimitiveProps {
 export type PopperContentEmits = {
   placed: [void]
 }
-export type PopperContentContext = {
-  _names: 'OkuPopperContent'
-  placedSide: Ref<Side | undefined>
-  onArrowChange(arrow: HTMLSpanElement | null): void
-  arrowX?: Ref<number | undefined>
-  arrowY?: Ref<number | undefined>
-  shouldHideArrow: Ref<boolean | undefined>
-}
 
-export const { useInject: usePopperContentInject, useProvider: usePopperContentProvider }
- = createProvide<Omit<PopperContentContext, '_names'>>('OkuPopper')
 </script>
 
 <script lang="ts" setup>
-import type { Ref } from 'vue'
 import { computed, defineOptions, ref, watch, watchEffect, withDefaults } from 'vue'
 import type { PrimitiveProps } from '@oku-ui/primitive'
 import { Primitive } from '@oku-ui/primitive'
@@ -89,7 +76,7 @@ import type {
   Placement,
 } from '@floating-ui/vue'
 import type { Align, Side } from './utils'
-import { getSideAndAlignFromPlacement, isNotNull, transformOrigin } from './utils'
+import { getSideAndAlignFromPlacement, isNotNull, transformOrigin, usePopperContentProvide, usePopperInject } from './utils'
 
 defineOptions({
   name: 'OkuPopperContent',
@@ -109,6 +96,7 @@ const props = withDefaults(defineProps<PopperContentProps>(), {
   hideWhenDetached: false,
   updatePositionStrategy: 'optimized',
   layoutShift: true,
+  is: 'div',
 })
 const emit = defineEmits<PopperContentEmits>()
 
@@ -222,7 +210,7 @@ watch(currentElement, () => {
     contentZIndex.value = window.getComputedStyle(currentElement.value).zIndex
 })
 
-usePopperContentProvider({
+usePopperContentProvide({
   scope: props.scopeOkuPopper,
   placedSide,
   onArrowChange(anchor: HTMLElement | null) {
@@ -255,15 +243,14 @@ defineExpose({
     :dir="dir"
   >
     <Primitive
-      is="div"
+      :is="props.is"
       ref="componentRef"
       v-bind="$attrs"
       :data-side="placedSide"
       :data-align="placedAlign"
-      :dir="dir"
-      :as-child="asChild"
+      :dir="props.dir"
+      :as-child="props.asChild"
       :style="{
-        ...$attrs.style as any,
         // if the PopperContent hasn't been placed yet (not all measurements done)
         // we prevent animations so that users's animation don't kick in too early referring wrong sides
         animation: !isPositioned ? 'none' : undefined,

packages/vue/src/popper/index.ts

@@ -1,16 +1,25 @@
 import type { } from '@floating-ui/vue'
 
-export { default as OkuPopper } from './Popper.vue'
-export { default as OkuPopperAnchor } from './PopperAnchor.vue'
-export { default as OkuPopperContent } from './PopperContent.vue'
-export { default as OkuPopperArrow } from './PopperArrow.vue'
-
-export type * from './Popper.vue'
-export type * from './PopperAnchor.vue'
-export type * from './PopperContent.vue'
-export type * from './PopperArrow.vue'
+export {
+  default as OkuPopper,
+  type PopperProps,
+} from './Popper.vue'
+export {
+  default as OkuPopperAnchor,
+  type PopperAnchorProps,
+} from './PopperAnchor.vue'
+export {
+  default as OkuPopperContent,
+  type PopperContentProps,
+  type PopperContentEmits,
+} from './PopperContent.vue'
+export {
+  default as OkuPopperArrow,
+  type PopperArrowProps,
+} from './PopperArrow.vue'
 
 export {
   SIDE_OPTIONS,
   ALIGN_OPTIONS,
+  createPopperScope,
 } from './utils'

packages/vue/src/popper/utils.ts

@@ -1,4 +1,7 @@
 import type { Middleware, Placement } from '@floating-ui/vue'
+import { createScope } from '@oku-ui/provide'
+import type { Ref } from 'vue'
+import type { Measurable } from '@oku-ui/utils'
 
 export const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const
 export const ALIGN_OPTIONS = ['start', 'center', 'end'] as const
@@ -60,3 +63,25 @@ export function getSideAndAlignFromPlacement(placement: Placement) {
   const [side, align = 'center'] = placement.split('-')
   return [side as Side, align as Align] as const
 }
+
+export type PopperContext = {
+  anchor: Ref<Measurable | null>
+  onAnchorChange(anchor: Measurable | null): void
+}
+
+export type PopperContentContext = {
+  placedSide: Ref<Side | undefined>
+  onArrowChange(arrow: HTMLSpanElement | null): void
+  arrowX?: Ref<number | undefined>
+  arrowY?: Ref<number | undefined>
+  shouldHideArrow: Ref<boolean | undefined>
+}
+
+export const [createPopperProvide, createPopperScope]
+  = createScope<'OkuPopper' | 'OkuPopperContent'>('OkuPopper')
+
+export const [usePopperProvide, usePopperInject]
+  = createPopperProvide<PopperContext>('OkuPopper')
+
+export const [usePopperContentProvide, usePopperContentInject]
+  = createPopperProvide<PopperContentContext>('OkuPopper')