feat(nc-gui): allow switching steps with swipe gesture

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed, useSharedFormStoreOrThrow, useStepper } from '#imports'
+import { computed, ref, useEventListener, useSharedFormStoreOrThrow, useStepper } from '#imports'
 
 const { v$, formState, formColumns } = useSharedFormStoreOrThrow()
 
@@ -28,11 +28,56 @@ const steps = computed(() => {
 
 const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
+const transitionName = ref<'left' | 'right'>('left')
+
 const field = computed(() => formColumns.value?.[index.value])
+
+const el = ref<HTMLDivElement>()
+
+const goNext = () => {
+  if (isLast.value) return
+
+  transitionName.value = 'left'
+
+  goToNext()
+}
+
+const goPrevious = () => {
+  if (isFirst.value) return
+
+  transitionName.value = 'right'
+
+  goToPrevious()
+}
+
+useEventListener('wheel', (event) => {
+  if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
+    // Scrolling more vertically than horizontally
+    return
+  }
+
+  if (event.deltaX < -10) {
+    goPrevious()
+  } else if (event.deltaX > 10) {
+    goNext()
+  }
+})
+
+useEventListener(
+  'touchmove',
+  (e) => {
+    e.preventDefault()
+    console.log('touchmove')
+  },
+  { passive: false },
+)
 </script>
 
 <template>
+  <Transition :name="`slide-${transitionName}`" mode="out-in">
     <div
+      ref="el"
+      :key="field.title"
       class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto px-8 py-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
     >
       <div v-if="field" class="flex flex-col my-6 gap-2">
@@ -89,7 +134,7 @@ const field = computed(() => formColumns.value?.[index.value])
 
       <div v-if="!isFirst || !isLast" class="flex w-full text-lg">
         <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
-        <button class="group color-transition transform hover:scale-110" @click="goToPrevious">
+          <button class="group color-transition transform hover:scale-110" @click="goPrevious">
             <MdiChevronLeft class="group-hover:text-accent" />
           </button>
         </a-tooltip>
@@ -97,10 +142,17 @@ const field = computed(() => formColumns.value?.[index.value])
         <div class="flex-1" />
 
         <a-tooltip v-if="!isLast" title="Go to next" :mouse-enter-delay="1" :mouse-leave-delay="0">
-        <button class="group color-transition transform hover:scale-110" @click="goToNext">
+          <button class="group color-transition transform hover:scale-110" @click="goNext">
             <MdiChevronRight class="group-hover:text-accent" />
           </button>
         </a-tooltip>
       </div>
     </div>
+  </Transition>
 </template>
+
+<style scoped>
+:global(html, body) {
+  @apply overscroll-x-none;
+}
+</style>