From 388933a5b6fcd9eea87f34736bc749653b4551ca Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 20 Jul 2023 12:44:22 +0800
Subject: [PATCH] fix error due to wrong typing, which leads to wrong
 conditional to render "asChild" props

---
 .../src/ScrollArea/ScrollAreaScrollbar.vue         | 12 ++++++++++--
 .../src/ScrollArea/ScrollAreaScrollbarImpl.vue     | 14 +++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
index fa0e9cf5f..cd07efc2c 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
@@ -13,7 +13,7 @@ export interface ScrollAreaScollbarProvideValue {
 }
 
 export const SCROLL_AREA_SCROLLBAR_INJECTION_KEY =
-  "ScrollAreaScrollbar" as const;
+  Symbol() as InjectionKey<ScrollAreaScollbarProvideValue>;
 
 export default {
   inheritAttrs: false,
@@ -21,7 +21,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onUnmounted, watch, provide, toRefs } from "vue";
+import {
+  computed,
+  inject,
+  onUnmounted,
+  watch,
+  provide,
+  toRefs,
+  type InjectionKey,
+} from "vue";
 import {
   type ScrollAreaProvideValue,
   SCROLL_AREA_INJECTION_KEY,
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
index ff5062f0b..826c342ab 100644
--- a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
+++ b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onMounted, onUnmounted, ref } from "vue";
+import { inject, onMounted, onUnmounted, ref, useSlots } from "vue";
 import {
   type ScrollAreaProvideValue,
   SCROLL_AREA_INJECTION_KEY,
@@ -8,10 +8,7 @@ import {
   type ScrollAreaScrollbarVisibleProvideValue,
   SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
 } from "./ScrollAreaScrollbarVisible.vue";
-import {
-  type ScrollAreaScrollbarProps,
-  SCROLL_AREA_SCROLLBAR_INJECTION_KEY,
-} from "./ScrollAreaScrollbar.vue";
+import { SCROLL_AREA_SCROLLBAR_INJECTION_KEY } from "./ScrollAreaScrollbar.vue";
 import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
 import { toInt } from "./utils";
 import { useResizeObserver } from "@vueuse/core";
@@ -24,9 +21,7 @@ const injectedValueFromScrollbarVisible =
     SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY
   );
 
-const injectedValueFromScrollbar = inject<ScrollAreaScrollbarProps>(
-  SCROLL_AREA_SCROLLBAR_INJECTION_KEY
-);
+const injectedValueFromScrollbar = inject(SCROLL_AREA_SCROLLBAR_INJECTION_KEY);
 
 const props = defineProps<{
   isHorizontal: boolean;
@@ -135,7 +130,8 @@ useResizeObserver(injectedValueFromRoot?.content, handleSizeChange);
   <PrimitiveDiv
     ref="primitiveElement"
     style="position: absolute"
-    :as-child="injectedValueFromScrollbar?.asChild"
+    data-scrollbarimpl
+    :as-child="injectedValueFromScrollbar?.asChild.value"
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"