From ac8f3c34760f4c9c0f952ecd027b32951b9c416c Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 27 Jul 2024 08:53:17 +0800
Subject: [PATCH] refactor(Arrow)!: improve polygon

---
 packages/radix-vue/src/Popper/PopperArrow.vue |  1 +
 .../radix-vue/src/shared/component/Arrow.vue  | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/radix-vue/src/Popper/PopperArrow.vue b/packages/radix-vue/src/Popper/PopperArrow.vue
index f9deb18b1..79d2f7197 100644
--- a/packages/radix-vue/src/Popper/PopperArrow.vue
+++ b/packages/radix-vue/src/Popper/PopperArrow.vue
@@ -68,6 +68,7 @@ const baseSide = computed(() => OPPOSITE_SIDE[contentContext.placedSide.value])
       }"
       :as="as"
       :as-child="asChild"
+      :rounded="rounded"
       :width="width"
       :height="height"
     >
diff --git a/packages/radix-vue/src/shared/component/Arrow.vue b/packages/radix-vue/src/shared/component/Arrow.vue
index 0ad14b5e4..d0c72a640 100644
--- a/packages/radix-vue/src/shared/component/Arrow.vue
+++ b/packages/radix-vue/src/shared/component/Arrow.vue
@@ -15,6 +15,12 @@ export interface ArrowProps extends PrimitiveProps {
    * @defaultValue 5
    */
   height?: number
+  /**
+   * When `true`, render the rounded version of arrow. Do not work with `as`/`asChild`
+   *
+   * @defaultValue false
+   */
+  rounded?: boolean
 }
 </script>
 
@@ -35,9 +41,18 @@ useForwardExpose()
     v-bind="props"
     :width="width"
     :height="height"
-    :viewBox="asChild ? undefined : '0 0 30 10'"
+    :viewBox="asChild ? undefined : '0 0 12 6'"
     :preserveAspectRatio="asChild ? undefined : 'none'"
   >
-    <slot><polygon points="0,0 30,0 15,10" /></slot>
+    <slot>
+      <path
+        v-if="!rounded"
+        d="M0 0L6 6L12 0"
+      />
+      <path
+        v-else
+        d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0"
+      />
+    </slot>
   </Primitive>
 </template>