Enhancement: Improve UCommandPalette component

[Muhamed-M]

Description

I wanted to provide some feedback and share an example related to preloading results when using the UCommandPalette component in Nuxt UI.

Issue Explanation:

The UCommandPalette component, as currently implemented, has a limitation when it comes to handling preloaded data. Specifically, the issue arises when trying to populate the component with a default set of results when the user hasn't typed anything in the search box.

<script setup lang="ts">
const groups = [{
  key: 'users',
  label: q => q && `Users matching “${q}”...`,
  search: async (q) => {
    // @ts-ignore
    const users: any[] = await $fetch('https://jsonplaceholder.typicode.com/users', { params: { q } })

    return users.map(user => ({ id: user.id, label: user.name, suffix: user.email }))
  }
}]
</script>

<template>
  <UCommandPalette :groups="groups" :autoselect="false" />
</template>

When component is mounted empty state message will appear.

Context:

When using the command palette to search for users, I'd like to preload a limited list of users from the backend even when the user hasn't typed anything in the search box. This can be particularly useful for providing suggestions or showing recently interacted users by default.

Example Code:

Here is an example of how I handle this on the backend using Prisma. This function retrieves up to 5 users, even if the search input is empty:

export const findUsersBySearch = async (search: string, loggedUserId: number) => {
  const whereObj: any = {};

  if (search) {
    whereObj['OR'] = [
      {
        username: {
          contains: search,
          mode: 'insensitive',
        },
      },
      {
        email: {
          contains: search,
          mode: 'insensitive',
        },
      },
      {
        firstName: {
          contains: search,
          mode: 'insensitive',
        },
      },
    ];
  }

  const users = await prisma.user.findMany({
    where: {
      ...whereObj,
      NOT: {
        id: loggedUserId,
      },
    },
    take: 5, // Limit results to 5 users
  });

  return users;
};

How It Works:

The findUsersBySearch function filters users based on the search input.
If the search input is empty, it simply returns a default list of 5 users (excluding the logged-in user) without any filtering by search terms.
This approach is useful for preloading the command palette with initial results when no search input is provided.

Suggestion:

It would be great to have built-in support for such preloading behavior directly in the UCommandPalette component, allowing for a smoother user experience when the component is first opened.

Additional Feedback:

I also find it a bit inconvenient that the component is named CommandPalette. While it certainly captures the functionality, it might be more versatile and intuitive to have a more generic name like Autocomplete, similar to what Vuetify offers. An Autocomplete component with a broader set of features could cater to various use cases, including the one I mentioned earlier, where preloading results when no input is provided would be much easier to handle.

By adopting a more generic component name and feature set, it could align better with the expectations of developers coming from other frameworks and make the component more flexible and powerful.

Additional context

No response