feat(VPullToRefresh): add new component

[yuwu9145]

closes #4099

• It allows pulling down as soon as its immediate scrollable parent has scrolled to the top
• Works for Mobile and Desktop

Description

Markup:

<template>
  <v-app>
    <v-container class="pa-0">
      <v-row>
        <v-col>
          <div class="scrollable-container bg-grey-lighten-5">
            <v-pull-to-refresh
              :pull-down-threshold="100"
              @load="load"
            >
              <v-list style="background: transparent">
                <v-list-item
                  v-for="item in items"
                  :key="item.value"
                  :title="item.title"
                />
              </v-list>
            </v-pull-to-refresh>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  let items = [
    {
      title: '1',
      value: 1,
    },
    {
      title: '2',
      value: 2,
    },
    {
      title: '3',
      value: 3,
    },
    // {
    //   title: '4',
    //   value: 4,
    // },
    // {
    //   title: '5',
    //   value: 5,
    // },
    // {
    //   title: '6',
    //   value: 6,
    // },
  ]

  let count = 2
  async function load ({ done }) {
    // Perform API call
    console.log('loading')
    await new Promise(resolve => setTimeout(() => resolve(), 5500))
    items = Array.from({ length: count * 3 }, (k, v) => ({
      title: `${v + 1}`,
      value: v + 1,
    }))
    console.log('load finish')
    count++
    done('ok')
  }

  // const items = Array.from({ length: 1000 }, (k, v) => v + 1)
</script>
<style>
.scrollable-container {
  max-height: 300px;
  overflow-y: scroll;
}
</style>