DataList 数据列表

<script setup lang="ts">
  import { reactive } from 'vue'
  import { Bookmark } from '@lucide/vue'
  import { DataList, Image, Link, Stack, Text, Toggle, Tooltip } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('zh-CN')
  const saved = reactive<Record<number, boolean>>({})
</script>
<template>
  <DataList
    :items="items.slice(3, 6)"
    item-key="id"
    item-description="subtitle"
    layout="grid"
    layout-toggle
    grid-min="10rem"
    label="自定义条目"
    class="max-w-2xl"
  >
    <template #header><Text size="sm" tone="muted">3 条作品</Text></template>
    <template #title="{ item }">
      <Link :href="item.url" target="_blank" rel="noopener noreferrer" tone="neutral">
        {{ item.title }}
      </Link>
    </template>
    <template #media="{ item }">
      <Image :src="item.cover.src" alt="" fit="cover" class="size-full" />
    </template>
    <template #meta="{ item }">
      <Stack gap="xs" class="min-w-0 w-full">
        <Tooltip :content="item.developer">
          <Text size="xs" tone="muted" truncate class="w-fit max-w-full">{{ item.developer }}</Text>
        </Tooltip>
        <Text as="time" :datetime="item.released" size="xs" tone="muted">{{ item.released }}</Text>
      </Stack>
    </template>
    <template #actions="{ item }">
      <Toggle v-model="saved[item.id]" size="sm" :label="`标记 ${item.title}`" :tooltip="false">
        <template #icon="{ pressed }">
          <Bookmark :class="pressed ? 'fill-current' : undefined" />
        </template>
        {{ saved[item.id] ? '已标记' : '标记' }}
      </Toggle>
    </template>
  </DataList>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataList, Select, Text } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('zh-CN')
  const page = ref(1)
  const pageSize = ref(10)
  const sizes = [10, 20, 50].map(value => ({ value, label: `${value} 条 / 页` }))
</script>
<template>
  <DataList
    v-model:page="page"
    v-model:page-size="pageSize"
    :items="items"
    item-key="id"
    item-title="title"
    item-description="subtitle"
    pagination
    class="max-w-2xl"
  >
    <template #header="{ pageSize: size, setPageSize }">
      <Text size="sm" tone="muted">共 {{ items.length }} 条</Text>
      <Select
        :model-value="size"
        :options="sizes"
        size="sm"
        class="w-36 max-w-full"
        aria-label="每页条数"
        @update:model-value="value => setPageSize(Number(value))"
      />
    </template>
    <template #meta="{ item }">
      <Text size="xs" tone="muted">{{ item.released }}</Text>
    </template>
  </DataList>
</template>

<script setup lang="ts">
  import { computed, ref, watch } from 'vue'
  import { Button, DataList, Empty, SearchInput, Select, Text } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('zh-CN')
  const query = ref('')
  const order = ref<string | number | null>('release')
  const page = ref(1)
  const options = [
    { value: 'release', label: '发行时间降序' },
    { value: 'title', label: '名称排序' },
  ]
  const filtered = computed(() =>
    items
      .filter(item =>
        `${item.title} ${item.originalTitle} ${item.developer}`
          .toLocaleLowerCase()
          .includes(query.value.trim().toLocaleLowerCase()),
      )
      .toSorted((a, b) =>
        order.value === 'release'
          ? b.released.localeCompare(a.released)
          : a.title.localeCompare(b.title),
      ),
  )
  watch([query, order], () => {
    page.value = 1
  })
</script>
<template>
  <DataList
    v-model:page="page"
    :items="filtered"
    item-key="id"
    item-title="title"
    item-description="subtitle"
    pagination
    :page-size="10"
    label="筛选结果"
    class="max-w-2xl"
  >
    <template #header>
      <SearchInput
        v-model="query"
        placeholder="搜索名称或开发商"
        aria-label="搜索"
        class="w-full @lg/hn-data-list:min-w-0 @lg/hn-data-list:flex-1"
      />
      <Select
        v-model="order"
        :options="options"
        aria-label="排序方式"
        class="w-full @lg/hn-data-list:w-44"
      />
    </template>
    <template #meta="{ item }">
      <Text size="xs" tone="muted">{{ item.released }}</Text>
    </template>
    <template #empty>
      <Empty title="没有匹配的作品" size="sm" :icon="false">
        <template #actions>
          <Button variant="outline" tone="neutral" size="sm" @click="query = ''">清空搜索</Button>
        </template>
      </Empty>
    </template>
    <template #footer="{ total }">
      <Text size="xs" tone="muted">共 {{ total }} 条结果</Text>
    </template>
  </DataList>
</template>

<script setup lang="ts">
  import { onMounted, onScopeDispose, ref, watch } from 'vue'
  import { useRuntimeConfig } from '#app'
  import { Button, DataList, Empty, Switch, Text } from '@hina-ui/vue'
  import type { DataListDemoItem } from '../../data-list'

  const baseURL = useRuntimeConfig().app.baseURL
  const page = ref(1)
  const rows = ref<DataListDemoItem[]>([])
  const total = ref<number>()
  const loading = ref(true)
  const knownTotal = ref(true)
  const hasNextPage = ref(false)
  const failed = ref(false)
  let controller: AbortController | undefined
  async function load() {
    controller?.abort()
    const request = new AbortController()
    controller = request
    loading.value = true
    failed.value = false
    try {
      const response = await fetch(`${baseURL}demo/data-list/page-${page.value}.json`, {
        signal: request.signal,
      })
      if (!response.ok) throw new Error(String(response.status))
      const data = (await response.json()) as {
        items: Omit<DataListDemoItem, 'subtitle'>[]
        total: number
        hasNextPage: boolean
      }
      if (request.signal.aborted) return
      rows.value = data.items.map(item => ({
        ...item,
        title: item.title,
        subtitle: item.title === item.originalTitle ? '' : item.originalTitle,
      }))
      total.value = data.total
      hasNextPage.value = data.hasNextPage
    } catch {
      if (!request.signal.aborted) {
        rows.value = []
        failed.value = true
      }
    } finally {
      if (!request.signal.aborted) loading.value = false
    }
  }
  onMounted(load)
  watch(page, load)
  onScopeDispose(() => controller?.abort())
</script>
<template>
  <DataList
    v-model:page="page"
    :items="rows"
    item-key="id"
    item-title="title"
    item-description="subtitle"
    pagination
    manual
    :page-size="10"
    :total="knownTotal ? total : undefined"
    :has-next-page="hasNextPage"
    :loading="loading"
    :min-height="400"
    class="max-w-2xl"
    label="远程条目"
  >
    <template #header>
      <Switch v-model="knownTotal" :disabled="loading">已知总条数</Switch>
      <Button variant="ghost" tone="neutral" size="sm" :disabled="loading" @click="load">
        刷新
      </Button>
    </template>
    <template #meta="{ item }">
      <Text size="xs" tone="muted">{{ item.released }}</Text>
    </template>
    <template #empty>
      <Empty :title="failed ? '加载失败' : '暂无数据'" size="sm">
        <template v-if="failed" #actions><Button size="sm" @click="load">重试</Button></template>
      </Empty>
    </template>
  </DataList>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { DataList, Image, SegmentedControl, Stack, Text } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('zh-CN')
  const state = ref('initial')
  const options = [
    { value: 'initial', label: '首次加载' },
    { value: 'ready', label: '内容' },
    { value: 'refresh', label: '刷新' },
    { value: 'empty', label: '空态' },
  ]
  const rows = computed(() =>
    state.value === 'initial' || state.value === 'empty' ? [] : items.slice(0, 2),
  )
</script>
<template>
  <Stack class="w-full max-w-2xl">
    <SegmentedControl v-model="state" :options="options" size="sm" aria-label="列表状态" />
    <DataList
      :items="rows"
      item-key="id"
      item-title="title"
      item-description="subtitle"
      :loading="state === 'initial' || state === 'refresh'"
      :placeholder-count="2"
      :media-ratio="3 / 4"
      :height="280"
      label="条目"
    >
      <template #media="{ item }">
        <Image :src="item.cover.src" alt="" fit="cover" class="size-full" />
      </template>
      <template #meta="{ item }">
        <Text size="xs" tone="muted">{{ item.released }}</Text>
      </template>
    </DataList>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { DataList, Image, Text, type DataListLayout } from '@hina-ui/vue'
  import { dataListVirtualDemo } from '../../data-list-virtual'
  const items = dataListVirtualDemo('zh-CN')
  const layout = ref<DataListLayout>('list')
  const range = ref({ startIndex: -1, endIndex: -1 })
</script>
<template>
  <DataList
    v-model:layout="layout"
    :items="items"
    item-key="id"
    item-title="title"
    item-description="subtitle"
    layout-toggle
    :media-ratio="layout === 'grid' ? 16 / 10 : 3 / 4"
    grid-min="12rem"
    :height="400"
    :virtualize="{ estimateSize: layout === 'grid' ? 280 : 128, overscan: 1 }"
    body-class="border-line rounded-lg border"
    content-class="p-4"
    label="虚拟条目"
    class="max-w-2xl"
    @range-change="range = $event"
  >
    <template #media="{ item }">
      <Image :src="item.cover.src" alt="" fit="cover" class="size-full" />
    </template>
    <template #meta="{ item }">
      <Text size="xs" tone="muted">{{ item.released }}</Text>
    </template>
    <template #footer>
      <Text size="xs" tone="muted">
        可见范围：{{ range.startIndex + 1 }}–{{ range.endIndex + 1 }} / {{ items.length }}
      </Text>
    </template>
  </DataList>
</template>