fix(Carousel): more responsive scroll for vertical orientation

[J-Sek]

Follow-up after #197

• (vertical) fix missing transition when dragging
• (vertical) more responsive scroll interactions

Playground

<script setup lang="ts">
  import { Carousel, useTheme } from '@vuetify/v0'

  useTheme().select('dark')

  const slides = [
    { id: 1, label: 'Mountains', color: 'bg-sky-800 text-white' },
    { id: 2, label: 'Desert', color: 'bg-amber-700 text-white' },
    { id: 3, label: 'Forest', color: 'bg-emerald-800 text-white' },
    { id: 4, label: 'Ocean', color: 'bg-blue-900 text-white' },
    { id: 5, label: 'Tundra', color: 'bg-slate-700 text-white' },
    { id: 6, label: 'Savanna', color: 'bg-yellow-700 text-white' },
    { id: 7, label: 'Canyon', color: 'bg-orange-800 text-white' },
    { id: 8, label: 'Reef', color: 'bg-teal-800 text-white' },
    { id: 9, label: 'Glacier', color: 'bg-cyan-800 text-white' },
  ]
</script>

<template>
  <div class="p-4">
    <section>
      <Carousel.Root :per-view="1" orientation="vertical">
        <Carousel.Viewport class="rounded-lg gap-4 cursor-grab py-12 data-[dragging]:cursor-grabbing h-[300px]">
          <Carousel.Item
            v-for="slide in slides"
            :key="slide.id"
            class="flex items-center justify-center h-40 rounded-lg text-lg font-medium flex-[0_0_100%]"
            :class="slide.color"
            :value="slide.id"
          >
            {{ slide.label }}
          </Carousel.Item>
        </Carousel.Viewport>
      </Carousel.Root>
    </section>

    <section>
      <Carousel.Root :per-view="2">
        <Carousel.Viewport class="rounded-lg gap-4 cursor-grab px-12 data-[dragging]:cursor-grabbing">
          <Carousel.Item
            v-for="slide in slides"
            :key="slide.id"
            class="flex items-center justify-center h-40 rounded-lg text-lg font-medium flex-[0_0_calc((100%-1rem)/2)]"
            :class="slide.color"
            :value="slide.id"
          >
            {{ slide.label }}
          </Carousel.Item>
        </Carousel.Viewport>
      </Carousel.Root>
    </section>
  </div>
</template>

<style>
section {
  max-width: 1000px;
  margin: 16px auto;
  padding: 16px;
  outline: 1px dashed var(--v0-divider);
  border-radius: 12px;
}
</style>

[pkg-pr-new]

Open in StackBlitz

commit: f1917fa