feat: Make stepper draggable and take up more width

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -1,83 +1,149 @@
 <template>
-  <div class="flex flex-col w-full lg:max-w-4xl mx-auto">
-    <slot />
+  <div class="flex flex-col w-full">
+    <div class="w-full p-4">
+      <div class="flex flex-col gap-4 sm:gap-6 w-full">
+        <slot />
 
-    <UStepper ref="stepper" v-model="activeStepperItemIndex" :items="stepperItems" class="w-full" />
+        <div class="lch-stepper relative">
+          <div
+            ref="stepperScrollEl"
+            :class="['lch-stepper-scroll overflow-x-auto overflow-y-visible scroll-smooth', cursorClass]"
+          >
+            <UStepper
+              ref="stepper"
+              v-model="activeStepperItemIndex"
+              :items="stepperItems"
+              :ui="{
+                header: 'flex w-full flex-nowrap',
+                item: 'w-auto shrink-0 flex-[0_0_calc(100%/6)] min-w-[14rem]'
+              }"
+              :linear="false"
+              class="w-full"
+            />
+          </div>
 
-    <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
-      {{ currentFormElementSection.title }}
-    </h1>
+          <div
+            v-if="canScrollLeft"
+            class="pointer-events-none absolute inset-y-0 left-0 w-20 bg-linear-to-r from-default to-transparent"
+          />
+          <div
+            v-if="canScrollRight"
+            class="pointer-events-none absolute inset-y-0 right-0 w-20 bg-linear-to-l from-default to-transparent"
+          />
 
-    <UCard
-      v-for="{ subsection, sectionIndex } in visibleSubsections"
-      :key="getSubsectionKey(currentFormElementSection, sectionIndex, subsection)"
-      variant="subtle"
-      class="mb-6"
-    >
-      <div class="mb-4">
-        <h2 class="text-lg font-semibold text-highlighted">{{ subsection.title }}</h2>
-        <p v-if="subsection.subtitle" class="text-sm text-dimmed">{{ subsection.subtitle }}</p>
+          <UButton
+            v-if="canScrollLeft"
+            icon="i-lucide-chevron-left"
+            color="neutral"
+            variant="ghost"
+            size="md"
+            class="absolute left-1 top-1/2 -translate-y-1/2"
+            aria-label="Scroll steps left"
+            @click="scrollStepperBy(-1)"
+          />
+          <UButton
+            v-if="canScrollRight"
+            icon="i-lucide-chevron-right"
+            color="neutral"
+            variant="ghost"
+            size="md"
+            class="absolute right-1 top-1/2 -translate-y-1/2"
+            aria-label="Scroll steps right"
+            @click="scrollStepperBy(1)"
+          />
+        </div>
       </div>
-      <FormEngine
-        :model-value="subsection.formElements"
-        :visibility-map="visibilityMap"
-        :application-form-id="applicationFormId"
-        :disabled="disabled"
-        :all-form-elements="allFormElements"
-        @update:model-value="
-          (elements) =>
-            handleFormElementUpdate(elements, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
-        "
-        @add:input-form="
-          (position) =>
-            handleAddInputForm(position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
-        "
-        @clone:element="
-          (element, position) =>
-            handleCloneElement(element, position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
-        "
-      />
-    </UCard>
+    </div>
 
-    <UCard v-if="visibleSubsections.length === 0" variant="subtle" class="mb-6">
-      <div class="text-center py-8 text-dimmed">
-        <UIcon name="i-lucide-eye-off" class="w-12 h-12 mx-auto mb-3 opacity-50" />
-        <p>{{ $t('applicationForms.noVisibleElements') }}</p>
-      </div>
-    </UCard>
+    <div class="w-full p-4">
+      <div class="flex flex-col gap-4 sm:gap-6 w-full lg:max-w-4xl mx-auto">
+        <h1 v-if="currentFormElementSection?.title" class="text-xl text-pretty font-bold text-highlighted">
+          {{ currentFormElementSection.title }}
+        </h1>
 
-    <div class="flex gap-2 justify-between">
-      <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
-        {{ $t('applicationForms.navigation.previous') }}
-      </UButton>
-
-      <div class="flex flex-wrap items-center gap-1.5">
-        <UButton trailing-icon="i-lucide-save" :disabled="disabled" variant="outline" size="lg" @click="emit('save')">
-          {{ $t('applicationForms.navigation.save') }}
-        </UButton>
-        <UButton
-          v-if="stepper?.hasNext"
-          trailing-icon="i-lucide-arrow-right"
-          size="lg"
-          @click="handleNavigate('forward')"
+        <UCard
+          v-for="{ subsection, sectionIndex } in visibleSubsections"
+          :key="getSubsectionKey(currentFormElementSection, sectionIndex, subsection)"
+          variant="subtle"
+          class="mb-6"
         >
-          {{ $t('applicationForms.navigation.next') }}
-        </UButton>
-        <UButton
-          v-if="!stepper?.hasNext"
-          trailing-icon="i-lucide-send-horizontal"
-          :disabled="disabled"
-          size="lg"
-          @click="emit('submit')"
-        >
-          {{ $t('applicationForms.navigation.submit') }}
-        </UButton>
+          <div class="mb-4">
+            <h2 class="text-lg font-semibold text-highlighted">{{ subsection.title }}</h2>
+            <p v-if="subsection.subtitle" class="text-sm text-dimmed">{{ subsection.subtitle }}</p>
+          </div>
+          <FormEngine
+            :model-value="subsection.formElements"
+            :visibility-map="visibilityMap"
+            :application-form-id="applicationFormId"
+            :disabled="disabled"
+            :all-form-elements="allFormElements"
+            @update:model-value="
+              (elements) =>
+                handleFormElementUpdate(elements, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
+            "
+            @add:input-form="
+              (position) =>
+                handleAddInputForm(position, getSubsectionKey(currentFormElementSection, sectionIndex, subsection))
+            "
+            @clone:element="
+              (element, position) =>
+                handleCloneElement(
+                  element,
+                  position,
+                  getSubsectionKey(currentFormElementSection, sectionIndex, subsection)
+                )
+            "
+          />
+        </UCard>
+
+        <UCard v-if="visibleSubsections.length === 0" variant="subtle" class="mb-6">
+          <div class="text-center py-8 text-dimmed">
+            <UIcon name="i-lucide-eye-off" class="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p>{{ $t('applicationForms.noVisibleElements') }}</p>
+          </div>
+        </UCard>
+
+        <div class="flex gap-2 justify-between">
+          <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
+            {{ $t('applicationForms.navigation.previous') }}
+          </UButton>
+
+          <div class="flex flex-wrap items-center gap-1.5">
+            <UButton
+              trailing-icon="i-lucide-save"
+              :disabled="disabled"
+              variant="outline"
+              size="lg"
+              @click="emit('save')"
+            >
+              {{ $t('applicationForms.navigation.save') }}
+            </UButton>
+            <UButton
+              v-if="stepper?.hasNext"
+              trailing-icon="i-lucide-arrow-right"
+              size="lg"
+              @click="handleNavigate('forward')"
+            >
+              {{ $t('applicationForms.navigation.next') }}
+            </UButton>
+            <UButton
+              v-if="!stepper?.hasNext"
+              trailing-icon="i-lucide-send-horizontal"
+              :disabled="disabled"
+              size="lg"
+              @click="emit('submit')"
+            >
+              {{ $t('applicationForms.navigation.submit') }}
+            </UButton>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { usePointerSwipe } from '@vueuse/core'
 import type {
   ApplicationFormDto,
   FormElementSectionDto,
@@ -104,11 +170,39 @@ const { stepper, activeStepperItemIndex, stepperItems, currentFormElementSection
   computed(() => props.formElementSections)
 )
 
+const stepperScrollEl = ref<HTMLElement | null>(null)
+const initialScrollLeft = ref(0)
+const initialPointerX = ref(0)
+const canScrollLeft = ref(false)
+const canScrollRight = ref(false)
+
 const { evaluateFormElementVisibility } = useFormElementVisibility()
 const { clearHiddenFormElementValues } = useFormElementValueClearing()
 const { processSpawnTriggers } = useSectionSpawning()
 const { cloneElement } = useClonableElements()
 
+const { isSwiping } = usePointerSwipe(stepperScrollEl, {
+  threshold: 0,
+  disableTextSelect: true,
+
+  onSwipeStart: (e: PointerEvent) => {
+    // Capture initial scroll position and pointer position when drag starts
+    initialScrollLeft.value = stepperScrollEl.value?.scrollLeft ?? 0
+    initialPointerX.value = e.clientX
+  },
+
+  onSwipe: (e: PointerEvent) => {
+    // Calculate how far the pointer has moved from initial position
+    const deltaX = initialPointerX.value - e.clientX
+
+    // Update scroll position with direct 1:1 tracking
+    const el = stepperScrollEl.value
+    if (el) {
+      el.scrollLeft = initialScrollLeft.value + deltaX
+    }
+  }
+})
+
 const previousVisibilityMap = ref<Map<string, boolean>>(new Map())
 
 const allFormElements = computed(() => {
@@ -121,6 +215,13 @@ const visibilityMap = computed(() => {
   return evaluateFormElementVisibility(allFormElements.value)
 })
 
+const cursorClass = computed(
+  () =>
+    isSwiping.value
+      ? 'cursor-grabbing select-none' // During drag: closed fist + no selection
+      : 'cursor-grab' // Ready to drag: open hand
+)
+
 const visibleSubsections = computed(() => {
   if (!currentFormElementSection.value?.formElementSubSections) {
     return []
@@ -146,8 +247,105 @@ onMounted(() => {
     activeStepperItemIndex.value = props.initialSectionIndex
   }
   previousVisibilityMap.value = visibilityMap.value
+
+  stepperScrollEl.value?.addEventListener('scroll', updateStepperOverflowIndicators, { passive: true })
+  updateStepperOverflowIndicators()
+
+  window.addEventListener('resize', scrollToActiveStep)
 })
 
+onUnmounted(() => {
+  stepperScrollEl.value?.removeEventListener('scroll', updateStepperOverflowIndicators)
+  window.removeEventListener('resize', scrollToActiveStep)
+})
+
+watch(
+  () => activeStepperItemIndex.value,
+  async () => {
+    await nextTick()
+    scrollToActiveStep()
+  }
+)
+
+watch(
+  () => stepperItems.value.length,
+  async () => {
+    await nextTick()
+    updateStepperOverflowIndicators()
+  }
+)
+
+function getActiveStepElement(): HTMLElement | null {
+  const root = stepperScrollEl.value
+  if (!root) return null
+
+  const selectors = [
+    // Nuxt UI / Reka often exposes state via data attributes
+    '[data-state="active"]',
+    '[data-active="true"]',
+    // ARIA patterns
+    '[aria-current="step"]',
+    '[aria-selected="true"]'
+  ]
+
+  for (const selector of selectors) {
+    const el = root.querySelector(selector) as HTMLElement | null
+    if (!el) continue
+
+    // Prefer the list item (stable width) if present
+    const li = el.closest('li') as HTMLElement | null
+    return li ?? el
+  }
+
+  return null
+}
+
+function scrollToActiveStep() {
+  const scroller = stepperScrollEl.value
+  if (!scroller) return
+
+  const activeIndex = activeStepperItemIndex.value
+  if (activeIndex < 3) {
+    scroller.scrollTo({ left: 0, behavior: 'smooth' })
+    return
+  }
+
+  const activeEl = getActiveStepElement()
+  if (!activeEl) return
+
+  const scrollerRect = scroller.getBoundingClientRect()
+  const activeRect = activeEl.getBoundingClientRect()
+
+  const activeCenterInScroller = activeRect.left - scrollerRect.left + activeRect.width / 2 + scroller.scrollLeft
+  const targetScrollLeft = activeCenterInScroller - scroller.clientWidth / 2
+
+  const maxScrollLeft = Math.max(0, scroller.scrollWidth - scroller.clientWidth)
+  const clamped = Math.max(0, Math.min(maxScrollLeft, targetScrollLeft))
+
+  scroller.scrollTo({ left: clamped, behavior: 'smooth' })
+}
+
+function updateStepperOverflowIndicators() {
+  const scroller = stepperScrollEl.value
+  if (!scroller) {
+    canScrollLeft.value = false
+    canScrollRight.value = false
+    return
+  }
+
+  const maxScrollLeft = Math.max(0, scroller.scrollWidth - scroller.clientWidth)
+  canScrollLeft.value = scroller.scrollLeft > 1
+  canScrollRight.value = scroller.scrollLeft < maxScrollLeft - 1
+}
+
+function scrollStepperBy(direction: -1 | 1) {
+  const scroller = stepperScrollEl.value
+  if (!scroller) return
+
+  const delta = Math.max(200, Math.round(scroller.clientWidth * 0.6))
+  scroller.scrollBy({ left: direction * delta, behavior: 'smooth' })
+}
+
 async function handleAddInputForm(position: number, subsectionKey: string) {
   const foundSubsection = findSubsectionByKey(subsectionKey)
   if (!foundSubsection) return
@@ -248,3 +446,17 @@ function updateSubsectionElements(
   }))
 }
 </script>
+
+<style scoped>
+.lch-stepper-scroll {
+  -webkit-overflow-scrolling: touch;
+}
+
+.lch-stepper-scroll::-webkit-scrollbar {
+  height: 0px;
+}
+
+.lch-stepper-scroll {
+  scrollbar-width: none;
+}
+</style>