feat(ScrollArea): new component

docs/app/components/content/ComponentExample.vue

@@ -44,6 +44,7 @@ const props = withDefaults(defineProps<{
    * A list of variable props to link to the component.
    */
   options?: Array<{
+    type?: string
     alias?: string
     name: string
     label: string
@@ -195,6 +196,7 @@ const urlSearchParams = computed(() => {
             <UInput
               v-else
               :model-value="get(optionsValues, option.name)"
+              :type="option.type"
               color="neutral"
               variant="soft"
               :ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"

docs/app/components/content/examples/scroll-area/ScrollAreaCustomExample.vue

@@ -0,0 +1,28 @@
+<template>
+  <UScrollArea class="h-96 w-full border border-default rounded-lg">
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          Section 1
+        </h3>
+      </template>
+      <p>Custom content without using the items prop.</p>
+    </UCard>
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          Section 2
+        </h3>
+      </template>
+      <p>Any content can be placed here and it will be scrollable.</p>
+    </UCard>
+    <UCard>
+      <template #header>
+        <h3 class="font-semibold">
+          Section 3
+        </h3>
+      </template>
+      <p>You can mix different components and layouts as needed.</p>
+    </UCard>
+  </UScrollArea>
+</template>

docs/app/components/content/examples/scroll-area/ScrollAreaExample.vue

@@ -0,0 +1,41 @@
+<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>

docs/app/components/content/examples/scroll-area/ScrollAreaInfiniteScrollExample.vue

@@ -0,0 +1,81 @@
+<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,
+      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>

docs/app/components/content/examples/scroll-area/ScrollAreaOrientationExample.vue

@@ -0,0 +1,32 @@
+<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>

docs/app/components/content/examples/scroll-area/ScrollAreaScrollToExample.vue

@@ -0,0 +1,57 @@
+<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>

docs/app/components/content/examples/scroll-area/ScrollAreaVariableHeightExample.vue

@@ -0,0 +1,29 @@
+<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 }"
+    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>

docs/app/components/content/examples/scroll-area/ScrollAreaVirtualizeExample.vue

@@ -0,0 +1,31 @@
+<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>