feat(components): implement virtualization

docs/app/components/content/examples/command-palette/CommandPaletteCustomSlotExample.vue

@@ -36,9 +36,9 @@ const groups = [
         target: '_blank'
       },
       {
-        label: 'Sylvain Marroufin',
-        suffix: 'smarroufin',
-        to: 'https://github.com/smarroufin',
+        label: 'Romain Hamel',
+        suffix: 'romhml',
+        to: 'https://github.com/romhml',
         target: '_blank'
       },
       {
@@ -48,15 +48,15 @@ const groups = [
         target: '_blank'
       },
       {
-        label: 'Romain Hamel',
-        suffix: 'romhml',
-        to: 'https://github.com/romhml',
+        label: 'Hugo Richard',
+        suffix: 'HugoRCD',
+        to: 'https://github.com/HugoRCD',
         target: '_blank'
       },
       {
-        label: 'Haytham A. Salama',
-        suffix: 'Haythamasalama',
-        to: 'https://github.com/Haythamasalama',
+        label: 'Sandro Circi',
+        suffix: 'sandros94',
+        to: 'https://github.com/sandros94',
         target: '_blank'
       },
       {
@@ -66,9 +66,15 @@ const groups = [
         target: '_blank'
       },
       {
-        label: 'Neil Richter',
-        suffix: 'noook',
-        to: 'https://github.com/noook',
+        label: 'Jakub Michálek',
+        suffix: 'J-Michalek',
+        to: 'https://github.com/J-Michalek',
+        target: '_blank'
+      },
+      {
+        label: 'Eugen Istoc',
+        suffix: 'genu',
+        to: 'https://github.com/genu',
         target: '_blank'
       }
     ]

docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue

@@ -12,12 +12,12 @@ const users = [
     }
   },
   {
-    label: 'Sylvain Marroufin',
-    suffix: 'smarroufin',
-    to: 'https://github.com/smarroufin',
+    label: 'Romain Hamel',
+    suffix: 'romhml',
+    to: 'https://github.com/romhml',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/smarroufin.png'
+      src: 'https://github.com/romhml.png'
     }
   },
   {
@@ -30,21 +30,21 @@ const users = [
     }
   },
   {
-    label: 'Romain Hamel',
-    suffix: 'romhml',
-    to: 'https://github.com/romhml',
+    label: 'Hugo Richard',
+    suffix: 'HugoRCD',
+    to: 'https://github.com/HugoRCD',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/romhml.png'
+      src: 'https://github.com/HugoRCD.png'
     }
   },
   {
-    label: 'Haytham A. Salama',
-    suffix: 'Haythamasalama',
-    to: 'https://github.com/Haythamasalama',
+    label: 'Sandro Circi',
+    suffix: 'sandros94',
+    to: 'https://github.com/sandros94',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/Haythamasalama.png'
+      src: 'https://github.com/sandros94.png'
     }
   },
   {
@@ -57,12 +57,21 @@ const users = [
     }
   },
   {
-    label: 'Neil Richter',
-    suffix: 'noook',
-    to: 'https://github.com/noook',
+    label: 'Jakub Michálek',
+    suffix: 'J-Michalek',
+    to: 'https://github.com/J-Michalek',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/J-Michalek.png'
+    }
+  },
+  {
+    label: 'Eugen Istoc',
+    suffix: 'genu',
+    to: 'https://github.com/genu',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/noook.png'
+      src: 'https://github.com/genu.png'
     }
   }
 ]

docs/app/components/content/examples/command-palette/CommandPaletteSearchTermExample.vue

@@ -10,12 +10,12 @@ const users = [
     }
   },
   {
-    label: 'Sylvain Marroufin',
-    suffix: 'smarroufin',
-    to: 'https://github.com/smarroufin',
+    label: 'Romain Hamel',
+    suffix: 'romhml',
+    to: 'https://github.com/romhml',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/smarroufin.png'
+      src: 'https://github.com/romhml.png'
     }
   },
   {
@@ -28,21 +28,21 @@ const users = [
     }
   },
   {
-    label: 'Romain Hamel',
-    suffix: 'romhml',
-    to: 'https://github.com/romhml',
+    label: 'Hugo Richard',
+    suffix: 'HugoRCD',
+    to: 'https://github.com/HugoRCD',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/romhml.png'
+      src: 'https://github.com/HugoRCD.png'
     }
   },
   {
-    label: 'Haytham A. Salama',
-    suffix: 'Haythamasalama',
-    to: 'https://github.com/Haythamasalama',
+    label: 'Sandro Circi',
+    suffix: 'sandros94',
+    to: 'https://github.com/sandros94',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/Haythamasalama.png'
+      src: 'https://github.com/sandros94.png'
     }
   },
   {
@@ -55,12 +55,21 @@ const users = [
     }
   },
   {
-    label: 'Neil Richter',
-    suffix: 'noook',
-    to: 'https://github.com/noook',
+    label: 'Jakub Michálek',
+    suffix: 'J-Michalek',
+    to: 'https://github.com/J-Michalek',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/J-Michalek.png'
+    }
+  },
+  {
+    label: 'Eugen Istoc',
+    suffix: 'genu',
+    to: 'https://github.com/genu',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/noook.png'
+      src: 'https://github.com/genu.png'
     }
   }
 ]

docs/app/components/content/examples/command-palette/CommandPaletteSelectExample.vue

@@ -16,12 +16,12 @@ const groups = ref([
         }
       },
       {
-        label: 'Sylvain Marroufin',
-        suffix: 'smarroufin',
-        to: 'https://github.com/smarroufin',
+        label: 'Romain Hamel',
+        suffix: 'romhml',
+        to: 'https://github.com/romhml',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/smarroufin.png'
+          src: 'https://github.com/romhml.png'
         }
       },
       {
@@ -34,21 +34,21 @@ const groups = ref([
         }
       },
       {
-        label: 'Romain Hamel',
-        suffix: 'romhml',
-        to: 'https://github.com/romhml',
+        label: 'Hugo Richard',
+        suffix: 'HugoRCD',
+        to: 'https://github.com/HugoRCD',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/romhml.png'
+          src: 'https://github.com/HugoRCD.png'
         }
       },
       {
-        label: 'Haytham A. Salama',
-        suffix: 'Haythamasalama',
-        to: 'https://github.com/Haythamasalama',
+        label: 'Sandro Circi',
+        suffix: 'sandros94',
+        to: 'https://github.com/sandros94',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/Haythamasalama.png'
+          src: 'https://github.com/sandros94.png'
         }
       },
       {
@@ -61,12 +61,21 @@ const groups = ref([
         }
       },
       {
-        label: 'Neil Richter',
-        suffix: 'noook',
-        to: 'https://github.com/noook',
+        label: 'Jakub Michálek',
+        suffix: 'J-Michalek',
+        to: 'https://github.com/J-Michalek',
+        target: '_blank',
+        avatar: {
+          src: 'https://github.com/J-Michalek.png'
+        }
+      },
+      {
+        label: 'Eugen Istoc',
+        suffix: 'genu',
+        to: 'https://github.com/genu',
         target: '_blank',
         avatar: {
-          src: 'https://github.com/noook.png'
+          src: 'https://github.com/genu.png'
         }
       }
     ]

docs/app/components/content/examples/command-palette/CommandPaletteVirtualizeExample.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CommandPaletteItem } from '@nuxt/ui'
+
+const items: CommandPaletteItem[] = Array(1000)
+  .fill(0)
+  .map((_, value) => ({
+    label: `item-${value}`,
+    value
+  }))
+
+const groups = [
+  {
+    id: 'items',
+    items
+  }
+]
+</script>
+
+<template>
+  <UCommandPalette
+    virtualize
+    :fuse="{ resultLimit: 1000 }"
+    :groups="groups"
+    class="flex-1 h-80"
+  />
+</template>

docs/app/components/content/examples/input-menu/InputMenuVirtualizeExample.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { InputMenuItem } from '@nuxt/ui'
+
+const items: InputMenuItem[] = Array(1000).fill(0).map((_, i) => ({
+  label: `item-${i}`,
+  value: i
+}))
+</script>
+
+<template>
+  <UInputMenu virtualize :items="items" class="w-48" />
+</template>

docs/app/components/content/examples/page/PageListDivideExample.vue

@@ -11,13 +11,13 @@ const users = ref([
     }
   },
   {
-    name: 'Sylvain Marroufin',
-    description: 'smarroufin',
-    to: 'https://github.com/smarroufin',
+    name: 'Romain Hamel',
+    description: 'romhml',
+    to: 'https://github.com/romhml',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/smarroufin.png',
-      alt: 'smarroufin'
+      src: 'https://github.com/romhml.png',
+      alt: 'romhml'
     }
   },
   {
@@ -31,13 +31,53 @@ const users = ref([
     }
   },
   {
-    name: 'Romain Hamel',
-    description: 'romhml',
-    to: 'https://github.com/romhml',
+    name: 'Hugo Richard',
+    description: 'HugoRCD',
+    to: 'https://github.com/HugoRCD',
     target: '_blank',
     avatar: {
-      src: 'https://github.com/romhml.png',
-      alt: 'romhml'
+      src: 'https://github.com/HugoRCD.png',
+      alt: 'HugoRCD'
+    }
+  },
+  {
+    name: 'Sandro Circi',
+    description: 'sandros94',
+    to: 'https://github.com/sandros94',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/sandros94.png',
+      alt: 'sandros94'
+    }
+  },
+  {
+    name: 'Daniel Roe',
+    description: 'danielroe',
+    to: 'https://github.com/danielroe',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/danielroe.png',
+      alt: 'danielroe'
+    }
+  },
+  {
+    name: 'Jakub Michálek',
+    description: 'J-Michalek',
+    to: 'https://github.com/J-Michalek',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/J-Michalek.png',
+      alt: 'J-Michalek'
+    }
+  },
+  {
+    name: 'Eugen Istoc',
+    description: 'genu',
+    to: 'https://github.com/genu',
+    target: '_blank',
+    avatar: {
+      src: 'https://github.com/genu.png',
+      alt: 'genu'
     }
   }
 ])