* swipe to dismiss can now look at fling velocity to determine if it …

…should dismiss a popup => no need to scroll to top

* implemented POC of swipe to dismiss for calendar popup

front/components/ui-kit/app-date-time-grid.vue

@@ -28,7 +28,7 @@
       </div>
     </div>
 
-    <van-calendar v-model:show="showDatePicker" @confirm="onConfirmDate" :show-confirm="false" :min-date="minDate" :max-date="maxDate" color="#000" first-day-of-week="1" />
+    <van-calendar @open="onOpen" v-model:show="showDatePicker" @confirm="onConfirmDate" :show-confirm="false" :min-date="minDate" :max-date="maxDate" color="#000" first-day-of-week="1" />
 
     <van-popup v-model:show="showTimePicker" round position="bottom" style="padding-top: 4px">
       <div ref="popupRef" class="h-100 display-flex flex-column app-date-time-grid">
@@ -74,8 +74,9 @@ import { useDataStore } from '~/stores/dataStore'
 import DateUtils from '~/utils/DateUtils'
 import { addDays, addYears, startOfDay, subYears } from 'date-fns'
 import { useFormAttributes } from '~/composables/useFormAttributes'
-import { clone } from 'lodash'
+import { clone, head } from 'lodash'
 import { usePointerSwipe } from '@vueuse/core'
+import { useSwipeToDismiss } from '~/composables/useSwipeToDismiss.js'
 
 const dataStore = useDataStore()
 const attrs = useAttrs()
@@ -199,6 +200,21 @@ const { distanceY } = usePointerSwipe(popupRef, {
   },
 })
 
+const appCalendar = ref(null)
+
+const onOpen = async () => {
+  await nextTick()
+  appCalendar.value = head(document.getElementsByClassName('van-calendar__popup'))
+}
+
+useSwipeToDismiss({
+  onSwipe: () => {
+    showDatePicker.value = false
+  },
+  swipeRef: appCalendar,
+  showDropdown: showDatePicker,
+})
+
 // -------------------------------
 const onClickedMinusDay = () => {
   date.value = addDays(date.value, -1)

front/composables/useSwipeToDismiss.js

@@ -6,6 +6,7 @@ let globalZIndex = 0
 export function useSwipeToDismiss({ onSwipe, swipeRef, showDropdown }) {
   let zIndex = null
   let isScrollOnTop = false
+  let swipeStartAt = null
 
   watch(showDropdown, async (newValue) => {
     if (newValue) {
@@ -21,18 +22,26 @@ export function useSwipeToDismiss({ onSwipe, swipeRef, showDropdown }) {
 
   const { x, y } = useScroll(swipeRef)
 
-  const { lengthY: swipeYDistance } = useSwipe(swipeRef, {
+  const { lengthY: swipeYDistance,  } = useSwipe(swipeRef, {
     disableTextSelect: true,
-    onSwipe(e) {
+
+    onSwipeStart(e) {
+      swipeStartAt = e.timeStamp
       if (y.value < 100) {
         isScrollOnTop = true
       }
     },
     onSwipeEnd(e, direction) {
-      if (swipeYDistance.value < -100 && isScrollOnTop && zIndex === globalZIndex) {
-        // showDropdown.value = false
-        onSwipe()
+      let duration = e.timeStamp - swipeStartAt
+      let velocity = Math.abs(swipeYDistance.value) / duration
+      // console.log('velocity', {duration, velocity, swipeYDistance: swipeYDistance.value})
+
+      if (zIndex === globalZIndex && swipeYDistance.value < -100) {
+        if (isScrollOnTop || velocity >= 1.0) {
+          onSwipe()
+        }
       }
+
       isScrollOnTop = false
     },
   })