Merge branch 'main' into feat-dialog-2/3

unovue · Jul 16, 2023 · 10b59f6 · 10b59f6
2 parents 6588beb + 05ba8ad
commit 10b59f6
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 43 deletions.
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbar.vue
@@ -9,7 +9,6 @@ export interface ScrollAreaScollbarProvideValue {
   orientation: Ref<"vertical" | "horizontal">;
   forceMount?: Ref<boolean>;
   isHorizontal: Ref<boolean>;
-  visible: Ref<boolean>;
 }
 
 export const SCROLL_AREA_SCROLLBAR_INJECTION_KEY =
@@ -21,7 +20,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onUnmounted, watch, provide, toRef, ref } from "vue";
+import { computed, inject, onUnmounted, watch, provide, toRef } from "vue";
 import {
   type ScrollAreaProvideValue,
   SCROLL_AREA_INJECTION_KEY,
@@ -38,7 +37,6 @@ const props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {
   forceMount: undefined,
 });
 
-const visible = ref(false);
 const isHorizontal = computed(() => props.orientation === "horizontal");
 
 watch(
@@ -62,7 +60,6 @@ provide<ScrollAreaScollbarProvideValue>(SCROLL_AREA_SCROLLBAR_INJECTION_KEY, {
   orientation: toRef(() => props.orientation),
   forceMount: toRef(() => props.forceMount),
   isHorizontal,
-  visible,
 });
 </script>
 

diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarAuto.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from "vue";
+import { inject, ref } from "vue";
 import {
   type ScrollAreaProvideValue,
   SCROLL_AREA_INJECTION_KEY,
@@ -18,7 +18,7 @@ const injectedValueFromScrollbar = inject<ScrollAreaScollbarProvideValue>(
   SCROLL_AREA_SCROLLBAR_INJECTION_KEY
 );
 
-const visible = computed(() => injectedValueFromScrollbar?.visible.value);
+const visible = ref(false);
 
 const handleResize = useDebounceFn(() => {
   if (injectedValueFromRoot?.viewport.value) {
@@ -29,11 +29,9 @@ const handleResize = useDebounceFn(() => {
       injectedValueFromRoot?.viewport.value.offsetHeight <
       injectedValueFromRoot?.viewport.value.scrollHeight;
 
-    if (injectedValueFromScrollbar?.isHorizontal.value) {
-      injectedValueFromScrollbar!.visible.value = isOverflowX;
-    } else {
-      injectedValueFromScrollbar!.visible.value = isOverflowY;
-    }
+    visible.value = injectedValueFromScrollbar?.isHorizontal.value
+      ? isOverflowX
+      : isOverflowY;
   }
 }, 10);
 

diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarHover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, onMounted, onUnmounted } from "vue";
+import { inject, onMounted, onUnmounted, ref } from "vue";
 import {
   type ScrollAreaProvideValue,
   SCROLL_AREA_INJECTION_KEY,
@@ -8,7 +8,6 @@ import {
   type ScrollAreaScollbarProvideValue,
   SCROLL_AREA_SCROLLBAR_INJECTION_KEY,
 } from "./ScrollAreaScrollbar.vue";
-
 import ScrollAreaScrollbarAuto from "./ScrollAreaScrollbarAuto.vue";
 
 const injectedValue = inject<ScrollAreaProvideValue>(SCROLL_AREA_INJECTION_KEY);
@@ -18,14 +17,16 @@ const injectedValueFromScrollbar = inject<ScrollAreaScollbarProvideValue>(
 );
 
 let timeout: ReturnType<typeof setTimeout> | undefined | number;
+const visible = ref(false);
 
 const handlePointerEnter = () => {
   window.clearTimeout(timeout);
-  injectedValueFromScrollbar!.visible.value = true;
+  visible.value = true;
+  console.log(injectedValueFromScrollbar);
 };
 const handlePointerLeave = () => {
   timeout = window.setTimeout(() => {
-    injectedValueFromScrollbar!.visible.value = false;
+    visible.value = false;
   }, injectedValue?.scrollHideDelay);
 };
 
@@ -56,10 +57,9 @@ export default {
 
 <template>
   <ScrollAreaScrollbarAuto
+    v-if="visible"
     v-bind="$attrs"
-    :data-state="
-      injectedValueFromScrollbar?.visible.value ? 'visible' : 'hidden'
-    "
+    :data-state="visible ? 'visible' : 'hidden'"
   >
     <slot></slot>
   </ScrollAreaScrollbarAuto>

diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarImpl.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref } from "vue";
+import { inject, onMounted, onUnmounted, ref } from "vue";
 import {
   type ScrollAreaProvideValue,
   SCROLL_AREA_INJECTION_KEY,
 } from "./ScrollAreaRoot.vue";
-
 import {
   type ScrollAreaScrollbarVisibleProvideValue,
   SCROLL_AREA_SCROLLBAR_VISIBLE_INJECTION_KEY,
 } from "./ScrollAreaScrollbarVisible.vue";
+import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
 import { toInt } from "./utils";
 import { useResizeObserver } from "@vueuse/core";
 
@@ -30,8 +30,8 @@ const emit = defineEmits<{
   (e: "onThumbPointerDown", payload: { x: number; y: number }): void;
 }>();
 
+const { primitiveElement, currentElement: scrollbar } = usePrimitiveElement();
 const prevWebkitUserSelectRef = ref("");
-const scrollbar = ref<HTMLElement>();
 const rectRef = ref<DOMRect>();
 
 function handleDragScroll(event: MouseEvent) {
@@ -121,33 +121,16 @@ const handleSizeChange = () => {
 
 useResizeObserver(scrollbar, handleSizeChange);
 useResizeObserver(injectedValueFromRoot?.content, handleSizeChange);
-
-const isScrollbarNeeded = computed(() => {
-  if (props.isHorizontal) {
-    return (
-      injectedValueFromRoot?.viewport.value?.scrollWidth !==
-      injectedValueFromRoot?.viewport.value?.offsetWidth
-    );
-  } else {
-    return (
-      injectedValueFromRoot?.viewport.value?.scrollHeight !==
-      injectedValueFromRoot?.viewport.value?.offsetHeight
-    );
-  }
-});
 </script>
 
 <template>
-  <div
-    v-if="isScrollbarNeeded"
-    ref="scrollbar"
+  <PrimitiveDiv
+    ref="primitiveElement"
     style="position: absolute"
     @pointerdown="handlePointerDown"
     @pointermove="handlePointerMove"
     @pointerup="handlePointerUp"
   >
-    <template v-if="isScrollbarNeeded">
-      <slot></slot>
-    </template>
-  </div>
+    <slot></slot>
+  </PrimitiveDiv>
 </template>
diff --git a/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue b/packages/radix-vue/src/ScrollArea/ScrollAreaScrollbarX.vue
@@ -28,7 +28,6 @@ onMounted(() => {
   if (scrollbarElement.value)
     injectedValueFromRoot?.onScrollbarYChange(scrollbarElement.value);
 });
-
 const sizes = computed(() => injectedValueFromScrollbarVisible?.sizes.value);
 </script>