From 9d77c12b1d9fa3605b93668a3f19da865d895a85 Mon Sep 17 00:00:00 2001
From: alsaze <veselov@alfabit.com>
Date: Thu, 9 Oct 2025 00:05:27 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D1=8E=20=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B5=D0=B3=D1=83=20=D1=82=D0=BE=D0=B2=D0=B0=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/product/[id].vue | 60 +++++++++++++++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/pages/product/[id].vue b/pages/product/[id].vue
index 429f518..6f3dbaf 100644
--- a/pages/product/[id].vue
+++ b/pages/product/[id].vue
@@ -36,8 +36,31 @@
         body: 'flex-1 overflow-y-auto',
       }"
     >
-      <template #body>
-        <ProductDescription />
+      <template #content>
+        <!--        <div ref="targetDrawer" class="flex flex-col gap-10" style="overflow-y: auto;"> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--          <h1>BABAB</h1> -->
+        <!--        </div> -->
+
+        <ProductDescription ref="targetDrawer" style="overflow-y: auto;" />
       </template>
     </UDrawer>
 
@@ -48,38 +71,49 @@
 
 <script setup lang="ts">
 import type { UseSwipeDirection } from '@vueuse/core'
-import { useMediaQuery, useSwipe } from '@vueuse/core'
+import { useMediaQuery, useScroll, useSwipe } from '@vueuse/core'
 import { computed, shallowRef } from 'vue'
 import ProductPrice from '~/components/ProductPrice.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { productsData } = useProduct()
+const { currentVariant } = useCurrentProduct()
 const isMobile = useMediaQuery('(max-width: 1280px)')
 const open = ref(false)
 const target = shallowRef<HTMLElement | null>(null)
 const targetHeight = computed(() => target.value?.offsetHeight)
+const targetDrawer = shallowRef<HTMLElement | null>(null)
+const targetDrawerHeight = computed(() => targetDrawer.value?.offsetHeight)
+const { y } = useScroll(targetDrawer)
 
 const { lengthY } = useSwipe(
   target,
   {
     passive: false,
-    onSwipe(e: TouchEvent) {
-      if (targetHeight.value) {
-        if (lengthY.value > 100) {
-          open.value = true
-        }
-      }
-    },
     onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
-      console.log('lengthY.value', lengthY.value)
-      if (lengthY.value > 100 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.5) {
+      if (lengthY.value > 50 && targetHeight.value && (Math.abs(lengthY.value) / targetHeight.value) >= 0.25) {
         open.value = true
       }
     },
   },
 )
 
-const { currentVariant } = useCurrentProduct()
+const { lengthY: drawerLengthY } = useSwipe(
+  targetDrawer,
+  {
+    passive: false,
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+      console.log('drawerLengthY.value', drawerLengthY.value)
+      console.log('y', y.value)
+      console.log('targetDrawerHeight.value', targetDrawerHeight.value)
+      console.log('Math.abs(drawerLengthY.value)', Math.abs(drawerLengthY.value))
+      console.log('Math.abs(drawerLengthY.value) / targetDrawerHeight.value', Math.abs(drawerLengthY.value) / targetDrawerHeight.value)
+      if (drawerLengthY.value < 0 && y.value === 0 && targetDrawerHeight.value && (Math.abs(drawerLengthY.value) / targetDrawerHeight.value) >= 0.2) {
+        open.value = false
+      }
+    },
+  },
+)
 </script>
 
 <style scoped lang="scss">