finish

unovue · Jul 16, 2023 · 70936a4 · 70936a4
1 parent a3dee3f
commit 70936a4
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/packages/radix-vue/src/HoverCard/HoverCardContent.vue b/packages/radix-vue/src/HoverCard/HoverCardContent.vue
@@ -1,10 +1,7 @@
 <script lang="ts">
 export type Boundary = Element | null | Array<Element | null>;
 
-export interface HoverCardContentProps extends PopperContentProps {
-  asChild?: boolean;
-  forceMount?: boolean;
-}
+export interface HoverCardContentProps extends PopperContentProps {}
 </script>
 
 <script setup lang="ts">
@@ -40,9 +37,8 @@ async function handleMouseleave(e: MouseEvent) {
     @mouseover="injectedValue.isHover = true"
     @mouseleave="handleMouseleave"
     :data-state="injectedValue?.open.value ? 'open' : 'closed'"
-    role="tooltip"
-    tabindex="-1"
-    :as-child="props.asChild"
+    :data-side="props.side"
+    :data-align="props.align"
   >
     <slot />
   </PopperContent>

diff --git a/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue b/packages/radix-vue/src/HoverCard/HoverCardTrigger.vue
@@ -16,17 +16,18 @@ import { PopperAnchor } from "@/Popper";
 import { useHoverDelay, useMouseleaveDelay } from "../shared";
 
 const injectedValue = inject<HoverCardProvideValue>(HOVER_CARD_INJECTION_KEY);
+
 const props = withDefaults(defineProps<HoverCardTriggerProps>(), {
   asChild: false,
 });
 
-const { primitiveElement, currentElement: triggerElement } =
+const { primitiveElement, currentElement } =
   usePrimitiveElement();
 
 async function handleMouseEnter(e: MouseEvent) {
   const result = await useHoverDelay(
     e,
-    triggerElement.value!,
+    currentElement.value!,
     injectedValue?.openDelay
   );
   if (result) {

diff --git a/packages/radix-vue/src/shared/component/Arrow.vue b/packages/radix-vue/src/shared/component/Arrow.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { SVGAttributes } from "vue";
 
-export interface ArrowProps extends SVGAttributes {
+export interface ArrowProps {
   width?: number;
   height?: number;
 }

diff --git a/playground/vue3/src/components/Demo/HoverCardDemo.vue b/playground/vue3/src/components/Demo/HoverCardDemo.vue
@@ -35,9 +35,12 @@ const hoverState = ref(false)
       <HoverCardContent
         class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all"
         :side-offset="5"
-        align="start"
-        :avoidCollisions="false"
+        side="top"
+        align="end"
+        :avoidCollisions="true"
+        as-child
       >
+      <div>
         <div class="flex flex-col gap-[7px]">
           <img
             class="block h-[60px] w-[60px] rounded-full"
@@ -78,6 +81,7 @@ const hoverState = ref(false)
         </div>
 
         <HoverCardArrow class="fill-white" size="8" />
+      </div>
       </HoverCardContent>
     </HoverCardPortal>
   </HoverCardRoot>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml