fix: add virtual scroll to pagination list (#8863)

* fix: add virtual scroll to pagination list

* fix: use max-height instead of height

* fix: pr requested change

packages/nc-gui/components/nc/MenuItem.vue

@@ -1,11 +1,17 @@
-<script>
-export default {
+<script setup lang="ts">
+import type { StyleValue } from '@vue/runtime-dom'
+
+defineProps<{
+  style?: StyleValue
+}>()
+
+defineOptions({
   inheritAttrs: false,
-}
+})
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="w-full" :style="style">
     <a-menu-item v-bind="$attrs" class="nc-menu-item">
       <div class="nc-menu-item-inner">
         <slot />

packages/nc-gui/components/nc/PaginationV2.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { UseVirtualList } from '@vueuse/components'
 import NcTooltip from '~/components/nc/Tooltip.vue'
 
 const props = defineProps<{
@@ -143,7 +144,7 @@ const pageSizeOptions = [
           </NcButton>
 
           <template #overlay>
-            <NcMenu class="nc-scrollbar-md nc-pagination-menu max-h-54">
+            <NcMenu class="nc-pagination-menu overflow-hidden">
               <NcSubMenu :key="`${localPageSize}page`" class="bg-gray-100 z-20 top-0 !sticky">
                 <template #title>
                   <div class="rounded-lg text-[13px] font-medium w-full">{{ localPageSize }} / page</div>
@@ -161,26 +162,36 @@ const pageSizeOptions = [
                 </NcMenuItem>
               </NcSubMenu>
 
-              <div :key="localPageSize" class="flex flex-col mt-1 max-h-48 overflow-hidden nc-scrollbar-md gap-1">
-                <NcMenuItem
-                  v-for="x in pagesList"
-                  :key="`${localPageSize}${x.value}`"
-                  @click.stop="
-                    changePage({
-                      set: x.value,
-                    })
-                  "
-                >
-                  <div
-                    :class="{
-                      'text-brand-500': x.value === current,
+              <UseVirtualList
+                :key="localPageSize"
+                :list="pagesList"
+                height="auto"
+                :options="{ itemHeight: 36 }"
+                class="mt-1 max-h-46"
+              >
+                <template #default="{ data: item }">
+                  <NcMenuItem
+                    :key="`${localPageSize}${item.value}`"
+                    :style="{
+                      height: '36px',
                     }"
-                    class="flex text-[13px] !w-full text-gray-800 items-center justify-between"
+                    @click.stop="
+                      changePage({
+                        set: item.value,
+                      })
+                    "
                   >
-                    {{ x.label }}
-                  </div>
-                </NcMenuItem>
-              </div>
+                    <div
+                      :class="{
+                        'text-brand-500': item.value === current,
+                      }"
+                      class="flex text-[13px] !w-full text-gray-800 items-center justify-between"
+                    >
+                      {{ item.label }}
+                    </div>
+                  </NcMenuItem>
+                </template>
+              </UseVirtualList>
             </NcMenu>
           </template>
         </NcDropdown>