Scroll Area

<script setup lang="ts">
defineProps<{
  orientation?: 'vertical' | 'horizontal'
  virtualize?: boolean
  lanes?: number
  gap?: number
  padding?: number
}>()

const items = Array.from({ length: 50 }, (_, i) => ({
  id: i + 1,
  title: `Item ${i + 1}`,
  description: `Description for item ${i + 1}`
}))
</script>

<template>
  <UScrollArea
    v-slot="{ item }"
    :items="items"
    :orientation="orientation"
    :virtualize="virtualize ? {
      lanes: lanes && lanes > 1 ? lanes : undefined,
      gap,
      paddingStart: padding,
      paddingEnd: padding
    } : false"
    class="h-96 w-full border border-default rounded-lg"
  >
    <UCard class="h-full overflow-hidden">
      <template #header>
        <h3 class="font-semibold">
          {{ item.title }}
        </h3>
      </template>
      <p class="text-sm text-muted">
        {{ item.description }}
      </p>
    </UCard>
  </UScrollArea>
</template>

<script setup lang="ts">
defineProps<{
  orientation?: 'vertical' | 'horizontal'
}>()

const items = Array.from({ length: 30 }, (_, i) => ({
  id: i + 1,
  title: `Item ${i + 1}`,
  description: `Description for item ${i + 1}`
}))
</script>

<template>
  <UScrollArea
    v-slot="{ item }"
    :items="items"
    :orientation="orientation"
    :class="orientation === 'vertical' ? 'h-96 flex flex-col' : 'w-full'"
    class="border border-default rounded-lg"
  >
    <UCard>
      <template #header>
        <h3 class="font-semibold">
          {{ item.title }}
        </h3>
      </template>
      <p class="text-sm text-muted">
        {{ item.description }}
      </p>
    </UCard>
  </UScrollArea>
</template>

<script setup lang="ts">
const props = defineProps<{
  itemCount?: number
}>()

const items = computed(() => Array.from({ length: props.itemCount || 10000 }, (_, i) => ({
  id: i + 1,
  title: `Item ${i + 1}`,
  description: `Description for item ${i + 1}`
})))
</script>

<template>
  <UScrollArea
    v-slot="{ item }"
    :items="items"
    virtualize
    class="h-96 w-full border border-default rounded-lg p-4"
  >
    <UCard class="mb-4">
      <template #header>
        <h3 class="font-semibold">
          {{ item.title }}
        </h3>
      </template>
      <p class="text-sm text-muted">
        {{ item.description }}
      </p>
    </UCard>
  </UScrollArea>
</template>

<script setup lang="ts">
const items = Array.from({ length: 100 }, (_, i) => ({
  id: i + 1,
  title: `Card ${i + 1}`,
  description: i % 3 === 0
    ? `This is a longer description with more text to demonstrate variable height handling in virtualized lists. Item ${i + 1} has significantly more content than others.`
    : `Short description for item ${i + 1}.`
}))
</script>

<template>
  <UScrollArea
    v-slot="{ item }"
    :items="items"
    :virtualize="{ estimateSize: 120, lanes: 3, gap: 16, paddingStart: 16, paddingEnd: 16 }"
    class="h-96 w-full border border-default rounded-lg"
  >
    <UCard>
      <template #header>
        <h3 class="font-semibold">
          {{ item.title }}
        </h3>
      </template>
      <p class="text-sm text-muted">
        {{ item.description }}
      </p>
    </UCard>
  </UScrollArea>
</template>

<script setup lang="ts">
const props = defineProps<{
  targetIndex?: number
  itemCount?: number
}>()

const items = computed(() => Array.from({ length: props.itemCount || 1000 }, (_, i) => ({
  id: i + 1,
  title: `Item ${i + 1}`
})))

const scrollArea = useTemplateRef('scrollArea')

function scrollToTop() {
  scrollArea.value?.scrollToIndex(0, { align: 'start', behavior: 'smooth' })
}

function scrollToBottom() {
  scrollArea.value?.scrollToIndex(items.value.length - 1, { align: 'end', behavior: 'smooth' })
}

function scrollToItem(index: number) {
  scrollArea.value?.scrollToIndex(index - 1, { align: 'center', behavior: 'smooth' })
}
</script>

<template>
  <div class="space-y-4 w-full">
    <UScrollArea
      ref="scrollArea"
      :items="items"
      :virtualize="{ estimateSize: 58 }"
      class="h-96 w-full border border-default rounded-lg p-4"
    >
      <template #default="{ item, index }">
        <div
          class="p-3 mb-2 rounded-lg border border-default"
          :class="index === (targetIndex || 500) - 1 ? 'bg-primary-500/10 border-primary-500/20' : 'bg-elevated'"
        >
          <span class="font-medium">{{ item.title }}</span>
        </div>
      </template>
    </UScrollArea>

    <UFieldGroup size="sm">
      <UButton icon="i-lucide-arrow-up-to-line" color="neutral" variant="outline" @click="scrollToTop">
        Top
      </UButton>
      <UButton icon="i-lucide-arrow-down-to-line" color="neutral" variant="outline" @click="scrollToBottom">
        Bottom
      </UButton>
      <UButton icon="i-lucide-navigation" color="neutral" variant="outline" @click="scrollToItem(targetIndex || 500)">
        Go to {{ targetIndex || 500 }}
      </UButton>
    </UFieldGroup>
  </div>
</template>

<script setup lang="ts">
import { UButton } from '#components'

type Recipe = {
  id: number
  name: string
  image: string
  difficulty: string
  cuisine: string
  rating: number
  reviewCount: number
  prepTimeMinutes: number
  cookTimeMinutes: number
}

type RecipeResponse = {
  recipes: Recipe[]
  total: number
  skip: number
  limit: number
}

const skip = ref(0)
const limit = 10

const { data, status, execute } = await useFetch(
  'https://dummyjson.com/recipes?limit=10&select=name,image,difficulty,cuisine,rating,reviewCount,prepTimeMinutes,cookTimeMinutes',
  {
    key: 'scroll-area-recipes-infinite-scroll',
    params: { skip, limit },
    transform: (data?: RecipeResponse) => {
      return data?.recipes
    },
    lazy: true,
    immediate: false
  }
)

const recipes = ref<Recipe[]>([])

watch(data, () => {
  if (data.value) {
    recipes.value = [...recipes.value, ...data.value]
  }
})

execute()

function loadMore() {
  if (status.value !== 'pending') {
    skip.value += limit
  }
}
</script>

<template>
  <UScrollArea
    :items="recipes"
    :virtualize="{
      estimateSize: 120,
      gap: 16,
      paddingStart: 16,
      paddingEnd: 16,
      loadMoreThreshold: 5
    }"
    class="h-96 w-full"
    @load-more="loadMore"
  >
    <template #default="{ item }">
      <UPageCard
        :description="`${item.cuisine} • ${item.difficulty}`"
        orientation="horizontal"
        :ui="{ container: 'lg:flex flex-row' }"
      >
        <template #header>
          <UUser
            :name="item.name"
            :description="`${item.prepTimeMinutes + item.cookTimeMinutes} min • ${item.reviewCount} reviews`"
            :avatar="{ src: item.image, alt: item.name }"
          />
        </template>
        <UButton color="neutral" variant="subtle" size="xl" class="fit-content justify-self-end">
          <UIcon name="i-lucide-star" class="size-3" />
          {{ item.rating }}
        </UButton>
      </UPageCard>
    </template>
  </UScrollArea>

  <UIcon
    v-if="status === 'pending'"
    name="i-lucide-loader-circle"
    class="animate-spin size-5 absolute bottom-4 left-0 right-0 mx-auto"
  />
</template>