<script setup lang="ts">
const pageSize = defineModel<number>({ required: true });

withDefaults(
  defineProps<{
    fetchData?: (...args: unknown[]) => void;
  }>(),
  {},
);
</script>

<template>
  <q-btn-dropdown dense unelevated :label="pageSize" class="bordered q-pl-md">
    <q-list>
      <q-item
        v-for="v in [10, 30, 50, 100, 500, 1000]"
        :key="v"
        clickable
        v-close-popup
        @click="
          () => {
            pageSize = v;
            fetchData();
          }
        "
      >
        <q-item-section>
          <q-item-label>{{ v }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
</template>
