feat: add list-leading and list-trailing slots to ContextMenu, DropdownMenu, InputMenu, NavigationMenu, Select, SelectMenu

playground/app/pages/components/context-menu.vue

@@ -116,5 +116,47 @@ defineShortcuts(extractShortcuts(items.value))
         Color right click here
       </div>
     </UContextMenu>
+
+    <UContextMenu :items="itemsWithColor" :ui="{ content: 'w-48' }" :size="size">
+      <div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
+        With list slots
+      </div>
+
+      <template #list-leading>
+        <div class="p-1">
+          <UButtonGroup
+            size="xs"
+            class="w-full"
+            orientation="horizontal"
+          >
+            <UButton
+              label="OR"
+              color="primary"
+              block
+              size="xs"
+              class="flex-1"
+            />
+            <UButton
+              label="AND"
+              color="neutral"
+              variant="subtle"
+              block
+              size="xs"
+              class="flex-1"
+            />
+          </UButtonGroup>
+        </div>
+      </template>
+
+      <template #list-trailing>
+        <div class="p-1">
+          <UButton
+            block
+            variant="ghost"
+            label="Load more"
+          />
+        </div>
+      </template>
+    </UContextMenu>
   </div>
 </template>

playground/app/pages/components/dropdown-menu.vue

@@ -151,6 +151,46 @@ defineShortcuts(extractShortcuts(items.value))
       <UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" :ui="{ content: 'w-48' }">
         <UButton label="Color" color="neutral" variant="outline" icon="i-lucide-menu" />
       </UDropdownMenu>
+
+      <UDropdownMenu :items="itemsWithColor" :size="size" arrow :content="{ side: 'bottom', align: 'start' }" :ui="{ content: 'w-48' }">
+        <UButton label="With list slots" color="neutral" variant="outline" icon="i-lucide-menu" />
+
+        <template #list-leading>
+          <div class="p-1">
+            <UButtonGroup
+              size="xs"
+              class="w-full"
+              orientation="horizontal"
+            >
+              <UButton
+                label="OR"
+                color="primary"
+                block
+                size="xs"
+                class="flex-1"
+              />
+              <UButton
+                label="AND"
+                color="neutral"
+                variant="subtle"
+                block
+                size="xs"
+                class="flex-1"
+              />
+            </UButtonGroup>
+          </div>
+        </template>
+
+        <template #list-trailing>
+          <div class="p-1">
+            <UButton
+              block
+              variant="ghost"
+              label="Load more"
+            />
+          </div>
+        </template>
+      </UDropdownMenu>
     </div>
   </div>
 </template>

playground/app/pages/components/input-menu.vue

@@ -145,5 +145,51 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
         class="w-48"
       />
     </div>
+    <div class="flex items-center gap-4">
+      <UInputMenu
+        :items="items"
+        :model-value="[]"
+        multiple
+        icon="i-lucide-search"
+        placeholder="With list slots..."
+        class="w-48"
+      >
+        <template #list-leading>
+          <div class="p-1">
+            <UButtonGroup
+              size="xs"
+              class="w-full"
+              orientation="horizontal"
+            >
+              <UButton
+                label="OR"
+                color="primary"
+                block
+                size="xs"
+                class="flex-1"
+              />
+              <UButton
+                label="AND"
+                color="neutral"
+                variant="subtle"
+                block
+                size="xs"
+                class="flex-1"
+              />
+            </UButtonGroup>
+          </div>
+        </template>
+
+        <template #list-trailing>
+          <div class="p-1">
+            <UButton
+              block
+              variant="ghost"
+              label="Load more"
+            />
+          </div>
+        </template>
+      </UInputMenu>
+    </div>
   </div>
 </template>

playground/app/pages/components/navigation-menu.vue

@@ -114,6 +114,20 @@ const items = [
       :highlight-color="highlightColor"
       :class="highlight && 'data-[orientation=horizontal]:border-b border-(--ui-border)'"
       class="data-[orientation=vertical]:data-[collapsed=false]:w-48"
-    />
+    >
+      <template #list-leading>
+        Logo
+      </template>
+
+      <template #list-trailing>
+        <UModal>
+          <UButton label="Login" />
+
+          <template #body>
+            <USkeleton class="h-20" />
+          </template>
+        </UModal>
+      </template>
+    </UNavigationMenu>
   </div>
 </template>

playground/app/pages/components/select-menu.vue

@@ -138,5 +138,51 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
         </template>
       </USelectMenu>
     </div>
+    <div class="flex items-center gap-4">
+      <USelectMenu
+        :items="statuses.slice(0, 3)"
+        :loading="status === 'pending'"
+        icon="lucide:list"
+        placeholder="With list slots..."
+        class="w-48"
+        value-key="value"
+      >
+        <template #list-leading>
+          <div class="p-1">
+            <UButtonGroup
+              size="xs"
+              class="w-full"
+              orientation="horizontal"
+            >
+              <UButton
+                label="OR"
+                color="primary"
+                block
+                size="xs"
+                class="flex-1"
+              />
+              <UButton
+                label="AND"
+                color="neutral"
+                variant="subtle"
+                block
+                size="xs"
+                class="flex-1"
+              />
+            </UButtonGroup>
+          </div>
+        </template>
+
+        <template #list-trailing>
+          <div class="p-1">
+            <UButton
+              block
+              variant="ghost"
+              label="Load more"
+            />
+          </div>
+        </template>
+      </USelectMenu>
+    </div>
   </div>
 </template>

playground/app/pages/components/select.vue

@@ -139,5 +139,51 @@ function getUserAvatar(value: string) {
         </template>
       </USelect>
     </div>
+    <div class="flex items-center gap-4">
+      <USelect
+        :items="statuses.slice(0, 3)"
+        :loading="status === 'pending'"
+        icon="lucide:list"
+        placeholder="With list slots..."
+        class="w-48"
+        value-key="value"
+      >
+        <template #list-leading>
+          <div class="p-1">
+            <UButtonGroup
+              size="xs"
+              class="w-full"
+              orientation="horizontal"
+            >
+              <UButton
+                label="OR"
+                color="primary"
+                block
+                size="xs"
+                class="flex-1"
+              />
+              <UButton
+                label="AND"
+                color="neutral"
+                variant="subtle"
+                block
+                size="xs"
+                class="flex-1"
+              />
+            </UButtonGroup>
+          </div>
+        </template>
+
+        <template #list-trailing>
+          <div class="p-1">
+            <UButton
+              block
+              variant="ghost"
+              label="Load more"
+            />
+          </div>
+        </template>
+      </USelect>
+    </div>
   </div>
 </template>

src/runtime/components/ContextMenu.vue

@@ -90,6 +90,8 @@ export type ContextMenuSlots<
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
+  'list-leading': (props?: {}) => any
+  'list-trailing': (props?: {}) => any
 } & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }>
 
 </script>
@@ -141,9 +143,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"
     >
+      <template #list-leading>
+        <slot name="list-leading" />
+      </template>
+
       <template v-for="(_, name) in proxySlots" #[name]="slotData">
         <slot :name="(name as keyof ContextMenuSlots<T>)" v-bind="slotData" />
       </template>
+
+      <template #list-trailing>
+        <slot name="list-trailing" />
+      </template>
     </UContextMenuContent>
   </ContextMenuRoot>
 </template>

src/runtime/components/ContextMenuContent.vue

@@ -105,6 +105,8 @@ const groups = computed<ContextMenuItem[][]>(() =>
 
   <ContextMenu.Portal :disabled="!portal">
     <component :is="sub ? ContextMenu.SubContent : ContextMenu.Content" :class="props.class" v-bind="contentProps">
+      <slot name="list-leading" />
+
       <ContextMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
         <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
           <ContextMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
@@ -169,6 +171,8 @@ const groups = computed<ContextMenuItem[][]>(() =>
       </ContextMenu.Group>
 
       <slot />
+
+      <slot name="list-trailing" />
     </component>
   </ContextMenu.Portal>
 </template>

src/runtime/components/DropdownMenu.vue

@@ -98,6 +98,8 @@ export type DropdownMenuSlots<
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
   'item-trailing': SlotProps<T>
+  'list-leading': (props?: {}) => any
+  'list-trailing': (props?: {}) => any
 } & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }>
 
 </script>
@@ -151,10 +153,18 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu
       :loading-icon="loadingIcon"
       :external-icon="externalIcon"
     >
+      <template #list-leading>
+        <slot name="list-leading" />
+      </template>
+
       <template v-for="(_, name) in proxySlots" #[name]="slotData">
         <slot :name="(name as keyof DropdownMenuSlots<T>)" v-bind="slotData" />
       </template>
 
+      <template #list-trailing>
+        <slot name="list-trailing" />
+      </template>
+
       <DropdownMenuArrow v-if="!!arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" />
     </UDropdownMenuContent>
   </DropdownMenuRoot>

src/runtime/components/DropdownMenuContent.vue

@@ -33,7 +33,9 @@ interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> ex
 interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {}
 
 type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
-  default(props?: {}): any
+  'default'(props?: {}): any
+  'list-leading': (props?: {}) => any
+  'list-trailing': (props?: {}) => any
 }
 
 </script>
@@ -111,6 +113,8 @@ const groups = computed<DropdownMenuItem[][]>(() =>
 
   <DropdownMenu.Portal :disabled="!portal">
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
+      <slot name="list-leading" />
+
       <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
         <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
           <DropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
@@ -177,6 +181,8 @@ const groups = computed<DropdownMenuItem[][]>(() =>
       </DropdownMenu.Group>
 
       <slot />
+
+      <slot name="list-trailing" />
     </component>
   </DropdownMenu.Portal>
 </template>