feat(VDataIterator): add items-length prop

[J-Sek]

resolves #19486

Note: alternative (maybe easier) solution would be to add this prop to VDataTableFooter instead

Markup:

<template>
  <v-app theme="dark">
    <v-container max-width="700">
      <v-data-iterator
        v-model:items-per-page="itemsPerPage"
        v-model:page="page"
        :items="serverItems"
        :items-length="totalItems"
        :loading="loading"
        item-value="name"
      >
        <template #loader>
          <div
            class="d-flex align-center justify-center"
            style="min-height: 255px"
          >
            <v-progress-circular size="150" width="3" indeterminate />
          </div>
        </template>
        <template #default="{ items }">
          <div style="min-height: 255px">
            <div class="d-flex flex-wrap justify-center ga-3 align-start">
              <v-card
                v-for="(item, i) in items"
                :key="i"
                :subtitle="`${item.raw.calories} calories`"
                :title="item.raw.name"
                style="width: 40%; max-width: 300px"
              />
            </div>
          </div>
        </template>
        <template #footer>
          <v-data-table-footer :items-per-page-options="[-1, 2, 5, 10]" />
        </template>
      </v-data-iterator>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, watch } from 'vue'

  const desserts = [
    { name: 'Frozen Yogurt', calories: 159 },
    { name: 'Jelly bean', calories: 375 },
    { name: 'KitKat', calories: 518 },
    { name: 'Eclair', calories: 262 },
    { name: 'Gingerbread', calories: 356 },
    { name: 'Ice cream sandwich', calories: 237 },
    { name: 'Cupcake', calories: 305 },
    { name: 'Honeycomb', calories: 408 },
    { name: 'Donut', calories: 452 },
  ]
  const FakeAPI = {
    async fetch ({ page, itemsPerPage }) {
      return new Promise(resolve => {
        setTimeout(() => {
          const start = (page - 1) * itemsPerPage
          const end = start + itemsPerPage
          const items = desserts.slice()

          const paginated = items.slice(start, end === -1 ? undefined : end)
          resolve({ items: paginated, total: items.length })
        }, 500)
      })
    },
  }

  const serverItems = ref([])
  const loading = ref(true)
  const page = ref(1)
  const itemsPerPage = ref(5)
  const totalItems = ref(0)

  watch(page, loadItems, { immediate: true })
  watch(itemsPerPage, loadItems, { immediate: true })

  function loadItems () {
    const fetchArgs = { page: page.value, itemsPerPage: itemsPerPage.value }
    loading.value = true
    FakeAPI.fetch(fetchArgs).then(({ items, total }) => {
      // todo: compare getch args with current values to avoid race conditions
      serverItems.value = items
      totalItems.value = total
      loading.value = false
    })
  }
</script>