chore: fix

packages/components/hover-card/src/hoverCard.ts

@@ -51,7 +51,7 @@ export const hoverCardProps = {
  },
  defaultOpen: {
  type: Boolean as PropType<boolean>,
- default: false,
+ default: undefined,
  },
  openDelay: {
  type: Number as PropType<number | undefined>,
@@ -80,13 +80,14 @@ const hoverCard = defineComponent({
  },
  setup(props, { slots, emit }) {
  const {
+ scopeOkuHoverCard,
  open: openProp,
  defaultOpen,
  openDelay: openDelayProp,
  closeDelay: closeDelayProp,
  } = toRefs(props)
 
- const popperScope = usePopperScope(props.scopeOkuHoverCard)
+ const popperScope = usePopperScope(scopeOkuHoverCard.value)
  const openTimerRef = ref(0)
  const closeTimerRef = ref(0)
  const hasSelectionRef = ref(false)
@@ -102,8 +103,9 @@ const hoverCard = defineComponent({
  const { state, updateValue } = useControllable({
  prop: computed(() => proxyChecked.value),
  defaultProp: computed(() => defaultOpen.value),
- onChange: () => {
- emit('openChange')
+ onChange: (value) => {
+ emit('openChange', value)
+ modelValue.value = value
  },
  initialValue: false,
  })
@@ -134,7 +136,7 @@ const hoverCard = defineComponent({
  })
 
  hoverCardProvide({
- scope: props.scopeOkuHoverCard,
+ scope: scopeOkuHoverCard.value,
  open: computed(() => state.value || false),
  onOpenChange: open => updateValue(open),
  onOpen: () => handleOpen(),

packages/components/hover-card/src/hoverCardArrow.ts

@@ -1,5 +1,5 @@
-import { defineComponent, h, mergeProps } from 'vue'
-import { useForwardRef } from '@oku-ui/use-composable'
+import { defineComponent, h, mergeProps, reactive } from 'vue'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
 import { OkuPopperArrow, type PopperArrowElement, type PopperArrowNaviteElement, type PopperArrowProps, popperArrowProps } from '@oku-ui/popper'
 import { usePopperScope } from './hoverCard'
 import { scopeHoverCardProps } from './utils'
@@ -33,14 +33,17 @@ const hoverCardArrow = defineComponent({
  setup(props, { attrs, slots }) {
  const { scopeOkuHoverCard, ...arrowProps } = props
 
+ const _reactive = reactive(arrowProps)
+ const reactiveArrowProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
  const forwardedRef = useForwardRef()
  const popperScope = usePopperScope(scopeOkuHoverCard)
 
  // if the arrow is inside the `VisuallyHidden`, we don't want to render it all to
  // prevent issues in positioning the arrow due to the duplicate
  return () => h(OkuPopperArrow, {
  ...popperScope,
- ...mergeProps(attrs, arrowProps),
+ ...mergeProps(attrs, reactiveArrowProps),
  ref: forwardedRef,
  }, slots)
  },

packages/components/hover-card/src/hoverCardContent.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue'
-import { computed, defineComponent, h, mergeProps, toRefs } from 'vue'
-import { useForwardRef } from '@oku-ui/use-composable'
+import { computed, defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
 import { OkuPresence } from '@oku-ui/presence'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { OkuHoverCardContentImpl, hoverCardContentImplProps } from './hoverCardContentImpl'
@@ -57,19 +57,23 @@ const hoverCardContent = defineComponent({
  },
  emits: hoverCardContentProps.emits,
  setup(props, { attrs, slots, emit }) {
- const { forceMount: _force, ...contentProps } = props
- const { forceMount } = toRefs(props)
+ const { forceMount: forceMountProps, ...contentProps } = toRefs(props)
+ const _reactive = reactive(contentProps)
+ const reactiveTriggerProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
  const portalInject = usePortalInject(CONTENT_NAME, props.scopeOkuHoverCard)
- const forceMountProps = computed(() => forceMount.value || portalInject.forceMount?.value)
+ const forceMount = computed(() => forceMountProps.value || portalInject.forceMount?.value)
+
  const forwardedRef = useForwardRef()
+
  const inject = useHoverCardInject(CONTENT_NAME, props.scopeOkuHoverCard)
 
  return () => h(OkuPresence, {
- present: computed(() => forceMountProps.value || inject.open.value).value,
+ present: computed(() => forceMount.value || inject.open.value).value,
  }, {
  default: () => h(OkuHoverCardContentImpl, {
  'data-state': inject.open.value ? 'open' : 'closed',
- ...mergeProps(attrs, contentProps),
+ ...mergeProps(attrs, reactiveTriggerProps),
  'onPointerenter': composeEventHandlers<HoverCardContentEmits['pointerenter'][0]>((el) => {
  emit('pointerenter', el)
  }, excludeTouch(inject.onOpen)),

packages/components/hover-card/src/hoverCardContentImpl.ts

@@ -1,6 +1,6 @@
-import { defineComponent, h, mergeProps, ref, watchEffect } from 'vue'
+import { defineComponent, h, mergeProps, reactive, ref, toRefs, watchEffect } from 'vue'
 import { primitiveProps, propsOmit } from '@oku-ui/primitive'
-import { useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
+import { reactiveOmit, useComposedRefs, useForwardRef } from '@oku-ui/use-composable'
 import { type DismissableLayerEmits, OkuDismissableLayer, type DismissableLayerProps as OkuDismissableLayerProps } from '@oku-ui/dismissable-layer'
 import { OkuPopperContent, popperContentProps } from '@oku-ui/popper'
 import type { PopperContentProps as OkuPopperContentProps, PopperContentElement, PopperContentEmits, PopperContentNaviteElement } from '@oku-ui/popper'
@@ -9,10 +9,11 @@ import { OkuVisuallyHidden } from '@oku-ui/visually-hidden'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { getTabbableNodes, scopeHoverCardProps } from './utils'
 import { useHoverCardInject, usePopperScope } from './hoverCard'
+import { CONTENT_NAME } from './hoverCardContent'
 
 let originalBodyUserSelect: string
 
-const CONTENT_NAME = 'OkuHoverCardContentImpl'
+const CONTENT_NAME_IMPL = 'OkuHoverCardContentImpl'
 
 export type HoverCardContentImplNaviteElement = PopperContentNaviteElement
 export type HoverCardContentImplElement = PopperContentElement
@@ -63,7 +64,7 @@ export const hoverCardContentImplProps = {
 }
 
 const hoverCardContentImpl = defineComponent({
- name: CONTENT_NAME,
+ name: CONTENT_NAME_IMPL,
  components: {
  OkuDismissableLayer,
  OkuPopperContent,
@@ -79,17 +80,19 @@ const hoverCardContentImpl = defineComponent({
  emits: hoverCardContentImplProps.emits,
  setup(props, { attrs, emit, slots }) {
  const {
- asChild: _asChild,
- scopeOkuHoverCard: _scope,
- onEscapeKeyDown: _onEscapeKeyDown,
- onPointerdownOutside: _onPointerDownOutside,
- onFocusoutSide: _onFocusOutside,
- onInteractOutside: _onInteractOutside,
+ scopeOkuHoverCard,
+ // onEscapeKeyDown: _onEscapeKeyDown,
+ // onPointerdownOutside: _onPointerDownOutside,
+ // onFocusoutSide: _onFocusOutside,
+ // onInteractOutside: _onInteractOutside,
  ...contentProps
- } = props
+ } = toRefs(props)
 
- const inject = useHoverCardInject(CONTENT_NAME, props.scopeOkuHoverCard)
- const popperScope = usePopperScope(props.scopeOkuHoverCard)
+ const _reactive = reactive(contentProps)
+ const reactiveContentProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+ const inject = useHoverCardInject(CONTENT_NAME, scopeOkuHoverCard.value)
+ const popperScope = usePopperScope(scopeOkuHoverCard.value)
 
  const contentRef = ref<HTMLDivElement | null>(null)
  const forwardedRef = useForwardRef()
@@ -167,8 +170,7 @@ const hoverCardContentImpl = defineComponent({
  }, {
  default: () => h(OkuPopperContent, {
  ...popperScope,
- ...mergeProps(attrs, contentProps),
- asChild: props.asChild,
+ ...mergeProps(attrs, reactiveContentProps),
  onPointerdown: composeEventHandlers<HoverCardContentImplEmits['pointerdown'][0]>((el) => {
  emit('pointerdown', el)
  }, (event) => {

packages/components/hover-card/src/hoverCardPortal.ts

@@ -7,10 +7,6 @@ import { OkuPresence } from '@oku-ui/presence'
 import { createHoverCardProvide, scopeHoverCardProps } from './utils'
 import { useHoverCardInject } from './hoverCard'
 
-/* -------------------------------------------------------------------------------------------------
- * HoverCardPortal
- * ----------------------------------------------------------------------------------------------- */
-
 const PORTAL_NAME = 'OkuHoverCardPortal'
 
 export type HoverCardPortalElement = PortalElement
@@ -68,7 +64,6 @@ const hoverCardPortal = defineComponent({
  scope: scopeOkuHoverCard.value,
  forceMount,
  })
-
  return () => h(OkuPresence, {
  present: computed(() => forceMount.value || inject.open.value).value,
  }, {

packages/components/hover-card/src/hoverCardTrigger.ts

@@ -1,17 +1,13 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, mergeProps, reactive, toRefs } from 'vue'
 import type { OkuElement } from '@oku-ui/primitive'
 import { Primitive, primitiveProps } from '@oku-ui/primitive'
-import { useForwardRef } from '@oku-ui/use-composable'
+import { reactiveOmit, useForwardRef } from '@oku-ui/use-composable'
 import { OkuPopperAnchor } from '@oku-ui/popper'
 import { composeEventHandlers } from '@oku-ui/utils'
 import { excludeTouch, scopeHoverCardProps } from './utils'
 
 import { useHoverCardInject, usePopperScope } from './hoverCard'
 
-/* -------------------------------------------------------------------------------------------------
- * HoverCardTrigger
- * ----------------------------------------------------------------------------------------------- */
-
 const HOVERCARD_TRIGGER_NAME = 'OkuHoverCardTrigger'
 
 export type HoverCardTriggerNativeElement = OkuElement<'a'>
@@ -48,8 +44,13 @@ const hoverCardTrigger = defineComponent({
  },
  emits: hoverCardTriggerProps.emits,
  setup(props, { attrs, slots, emit }) {
- const inject = useHoverCardInject(HOVERCARD_TRIGGER_NAME, props.scopeOkuHoverCard)
- const popperScope = usePopperScope(props.scopeOkuHoverCard)
+ const { scopeOkuHoverCard, ...triggerProps } = toRefs(props)
+
+ const _reactive = reactive(triggerProps)
+ const reactiveTriggerProps = reactiveOmit(_reactive, (key, _value) => key === undefined)
+
+ const inject = useHoverCardInject(HOVERCARD_TRIGGER_NAME, scopeOkuHoverCard.value)
+ const popperScope = usePopperScope(scopeOkuHoverCard.value)
 
  const forwardedRef = useForwardRef()
 
@@ -59,8 +60,7 @@ const hoverCardTrigger = defineComponent({
  }, {
  default: () => h(Primitive.a, {
  'data-state': inject.open.value ? 'open' : 'closed',
- ...attrs,
- 'asChild': props.asChild,
+ ...mergeProps(attrs, reactiveTriggerProps),
  'ref': forwardedRef,
  'onPointerenter': composeEventHandlers<PointerEvent>((el) => {
  emit('pointerenter', el)

packages/components/hover-card/src/stories/Animated.vue

@@ -17,7 +17,7 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
  </OkuHoverCardTrigger>
  <OkuHoverCardPortal>
  <OkuHoverCardContent class="animatedContentClass" :side-offset="10">
- <OkuHoverCardArrow class="arrowClass" width="20px" height="10px" />
+ <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
  <CardContentPlaceholder />
  </OkuHoverCardContent>
  </OkuHoverCardPortal>

packages/components/hover-card/src/stories/Basic.vue

@@ -24,7 +24,3 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
  </OkuHoverCard>
  </div>
 </template>
-
-<style lang="postcss">
-@import './hover.css'
-</style>

packages/components/hover-card/src/stories/ContainTextSelection.vue

@@ -107,7 +107,3 @@ import {
  </div>
  </div>
 </template>
-
-<style lang="postcss">
-@import './hover.css'
-</style>

packages/components/hover-card/src/stories/Controlled.vue

@@ -13,14 +13,18 @@ const open = ref(false)
 </script>
 
 <template>
+ <button @click="open = !open">
+ Toggle
+ </button>
+
  <div style="padding: 50px; display: flex; justify-content: center">
- <OkuHoverCard :open="open" @on-open-change="open = !open">
+ <OkuHoverCard :open="open" @open-change="open = !open">
  <OkuHoverCardTrigger href="/" class="triggerClass">
  trigger
  </OkuHoverCardTrigger>
  <OkuHoverCardPortal>
  <OkuHoverCardContent class="contentClass">
- <OkuHoverCardArrow class="arrowClass" width="20px" height="10px" />
+ <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
  <CardContentPlaceholder />
  </OkuHoverCardContent>
  </OkuHoverCardPortal>

packages/components/hover-card/src/stories/ForcedMount.vue

@@ -17,7 +17,7 @@ import CardContentPlaceholder from './CardContentPlaceholder.vue'
  </OkuHoverCardTrigger>
  <OkuHoverCardPortal force-mount>
  <OkuHoverCardContent class="contentClass" :side-offset="10">
- <OkuHoverCardArrow class="arrowClass" width="20px" height="10px" />
+ <OkuHoverCardArrow class="arrowClass" :width="20" :height="10" />
  <CardContentPlaceholder />
  </OkuHoverCardContent>
  </OkuHoverCardPortal>