VirtualList

<script setup lang="ts">
  import { VirtualList, Inline, Text } from '@hina-ui/vue'
  const items = Array.from({ length: 1000 }, (_, id) => ({ id, label: `Item ${id + 1}` }))
</script>

<template>
  <VirtualList
    :items="items"
    :get-key="item => item.id"
    :height="240"
    :estimate-size="48"
    :dynamic="false"
    label="Fixed-size list"
    class="border-line rounded-lg border"
  >
    <template #default="{ item, index }">
      <Inline justify="between" gap="sm" :wrap="false" class="border-line h-full border-b px-4">
        <Text as="span" size="sm">{{ item.label }}</Text>
        <Text as="span" size="sm" tone="muted" class="tabular-nums">
          {{ index + 1 }} / {{ items.length }}
        </Text>
      </Inline>
    </template>
  </VirtualList>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    VirtualList,
    Collapsible,
    CollapsibleTrigger,
    CollapsibleContent,
    Text,
  } from '@hina-ui/vue'

  const expanded = ref<Record<number, boolean>>({})
  const items = Array.from({ length: 500 }, (_, id) => ({
    id,
    title: `Item ${id + 1}`,
    description: 'Text wraps naturally and determines the height of each item. '.repeat(
      (id % 3) + 1,
    ),
  }))
</script>

<template>
  <VirtualList
    :items="items"
    :get-key="item => item.id"
    :estimate-size="140"
    :height="360"
    label="Dynamic-size list"
    class="border-line rounded-lg border"
  >
    <template #default="{ item }">
      <Collapsible v-model:open="expanded[item.id]" class="border-line border-b p-4">
        <Text size="sm" weight="medium">{{ item.title }}</Text>
        <Text size="sm" tone="muted" class="mt-1">{{ item.description }}</Text>
        <CollapsibleTrigger class="mt-2">
          {{ expanded[item.id] ? 'Collapse' : 'Expand' }}
        </CollapsibleTrigger>
        <CollapsibleContent>
          <Text size="sm" tone="muted" class="pt-2">
            {{ 'Expanded content is measured automatically. '.repeat(5) }}
          </Text>
        </CollapsibleContent>
      </Collapsible>
    </template>
  </VirtualList>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    VirtualList,
    NumberInput,
    Button,
    Inline,
    Stack,
    Text,
    type VirtualListExpose,
    type VirtualListRange,
  } from '@hina-ui/vue'

  const list = ref<VirtualListExpose>()
  const target = ref(5000)
  const range = ref<VirtualListRange>({ startIndex: 0, endIndex: 0 })
  const items = Array.from({ length: 10000 }, (_, id) => ({ id, label: `Item ${id + 1}` }))
</script>

<template>
  <Stack class="w-full">
    <Inline gap="sm">
      <NumberInput
        v-model="target"
        :min="1"
        :max="items.length"
        aria-label="Item number"
        class="w-36"
      />
      <Button @click="list?.scrollToIndex(target - 1, { align: 'center' })">Scroll to item</Button>
      <Button variant="outline" @click="list?.scrollToOffset(0)">Back to top</Button>
      <Text as="span" size="sm" tone="muted" class="tabular-nums">
        Visible {{ range.startIndex + 1 }}–{{ range.endIndex + 1 }}
      </Text>
    </Inline>
    <VirtualList
      ref="list"
      :items="items"
      :get-key="item => item.id"
      :dynamic="false"
      :estimate-size="48"
      :height="288"
      label="Scrollable list"
      class="border-line rounded-lg border"
      @range-change="range = $event"
    >
      <template #default="{ item }">
        <Inline gap="none" class="border-line h-full border-b px-4">
          <Text size="sm">{{ item.label }}</Text>
        </Inline>
      </template>
    </VirtualList>
  </Stack>
</template>

<script setup lang="ts">
  import { VirtualList, Stack, Text } from '@hina-ui/vue'
  const items = Array.from({ length: 200 }, (_, id) => ({ id, label: `Item ${id + 1}` }))
</script>

<template>
  <Stack class="w-full">
    <Stack v-for="dir in ['ltr', 'rtl'] as const" :key="dir" gap="sm">
      <Text size="xs" tone="muted" class="uppercase">{{ dir }}</Text>
      <VirtualList
        :items="items"
        :get-key="item => item.id"
        orientation="horizontal"
        :dir="dir"
        :height="144"
        :estimate-size="160"
        :dynamic="false"
        :gap="12"
        :label="`${dir} Horizontal list`"
      >
        <template #default="{ item, index }">
          <Stack
            justify="between"
            gap="sm"
            class="border-line bg-surface h-full rounded-lg border p-4"
          >
            <Text size="2xl" tone="muted" class="tabular-nums">
              {{ String(index + 1).padStart(2, '0') }}
            </Text>
            <Text size="sm">{{ item.label }}</Text>
          </Stack>
        </template>
      </VirtualList>
    </Stack>
  </Stack>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { VirtualList, Button, Switch, Empty, Inline, Stack, Text } from '@hina-ui/vue'

  const loading = ref(false)
  const empty = ref(false)
  const items = computed(() =>
    empty.value ? [] : Array.from({ length: 100 }, (_, id) => ({ id, label: `Item ${id + 1}` })),
  )
</script>

<template>
  <Stack class="w-full">
    <Inline>
      <Switch v-model="loading">Loading</Switch>
      <Button variant="outline" @click="empty = !empty">
        {{ empty ? 'Restore items' : 'Clear items' }}
      </Button>
    </Inline>
    <VirtualList
      :items="items"
      :get-key="item => item.id"
      :loading="loading"
      :height="240"
      :estimate-size="48"
      :dynamic="false"
      label="List states"
      class="border-line rounded-lg border"
    >
      <template #default="{ item }">
        <Inline gap="none" class="border-line h-full border-b px-4">
          <Text size="sm">{{ item.label }}</Text>
        </Inline>
      </template>
      <template #empty>
        <Empty title="No items" description="There are no items to display." size="sm" />
      </template>
    </VirtualList>
  </Stack>
</template>