fix error due to wrong typing, which leads to wrong conditional to re…

…nder "asChild" props
unovue · Jul 20, 2023 · 388933a · 388933a
1 parent c7b07d7
commit 388933a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
@@ -13,15 +13,23 @@ export interface ScrollAreaScollbarProvideValue {
 }
 
 export const SCROLL_AREA_SCROLLBAR_INJECTION_KEY =
-  "ScrollAreaScrollbar" as const;
+  Symbol() as InjectionKey<ScrollAreaScollbarProvideValue>;
 
 export default {
   inheritAttrs: false,
 };
 </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
@@ -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"