refactor(Arrow)!: improve polygon

unovue · Jul 27, 2024 · ac8f3c3 · ac8f3c3
1 parent d493bfb
commit ac8f3c3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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>