DashboardBúsqueda

Un CommandPalette listo para usar para agregar a su panel de control.

xph0000xUso

El componente DashboardSearch extiende el componente CommandPalette, de modo que puede pasar cualquier propiedad como icon, placeholder, etc.

Úselo dentro de la ranura predeterminada del componente DashboardGroup:

layouts/dashboard.vue

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UDashboardSearchButton />
    </UDashboardSidebar>

    <UDashboardSearch />

    <slot />
  </UDashboardGroup>
</template>

Puede abrir la CommandPalette pulsando: kbd{value="meta"}: kbd{value="K" class="ms-px"}, utilizando el componente DashboardSearchButton o utilizando una directiva v-model:open.

atajo

Utilice la prop shortcut para cambiar el acceso directo utilizado en defineShortcuts para abrir el componente ContentSearch. Predeterminados a meta_k (: kbd{value="meta"}: kbd{value="K"}).

app.vue

<template>
  <UDashboardSearch
    v-model:search-term="searchTerm"
    shortcut="meta_k"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>

De forma predeterminada, se agregará un grupo de comandos a la paleta de comandos para que pueda cambiar entre el modo claro y oscuro. Esto solo tendrá efecto si el colorMode no se fuerza en una página específica que se puede lograr a través de definePageMeta:

pages/index.vue

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

Puede desactivar este comportamiento estableciendo el prop color-mode en false:

app.vue

<template>
  <UDashboardSearch
    v-model:search-term="searchTerm"
    :color-mode="false"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>

API (Edición española)

Accesorios

Prop	Default	Type
`size`	`'md'`	`"sm" \| "md" \| "xs" \| "lg" \| "xl"`
`close`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Display a close button in the input (useful when inside a Modal for example). `{ size: 'md', color: 'neutral', variant: 'ghost' }`
`input`	`true`	`boolean \| Omit<InputProps<AcceptableValue, ModelModifiers>, "modelValue" \| "defaultValue">` Configure the input or hide it with `false`. `{ fixed: true }`
`shortcut`	`'meta_k'`	`string` Keyboard shortcut to open the search (used by `defineShortcuts`)
`fuse`	`{ fuseOptions: { ignoreLocation: true, useTokenSearch: true, threshold: 0.1, keys: ['label', 'description', 'suffix'] }, resultLimit: 12, matchAllWhenSearchEmpty: true }`	`UseFuseOptions<CommandPaletteItem>` Options for useFuse passed to the CommandPalette.
`searchDelay`	`100`	`number` Delay (in milliseconds) before the search term is passed to Fuse (debounced). Useful for large datasets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles. Set to `0` to disable.
`colorMode`	`true`	`boolean` When `true`, the theme command will be added to the groups.
`title`		`string`
`transition`	`true`	`boolean` Animate the modal when opening or closing.
`description`		`string`
`overlay`	`true`	`boolean` Render an overlay behind the modal.
`content`		`DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>` The content of the modal.
`dismissible`	`true`	`boolean` When `false`, the modal will not close when clicking outside or pressing escape.
`fullscreen`	`false`	`boolean` When `true`, the modal will take up the full screen.
`modal`		`boolean` The modality of the dialog When set to `true`, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
`portal`	`true`	`string \| false \| true \| HTMLElement` Render the modal in a portal.
`unmountOnHide`	`true`	`boolean` When set to `false`, the dialog content will not be unmounted when closed, but instead hidden with CSS. Useful for SEO or when you want to improve performance by not remounting the component on every open.
`icon`	`appConfig.ui.icons.search`	`any` The icon displayed in the input. Set to `false` to hide the icon.
`autofocus`	`true`	`boolean` Automatically focus the input when component is mounted.
`disabled`		`boolean` When `true`, prevents the user from interacting with listbox
`trailingIcon`	`appConfig.ui.icons.search`	`any` The icon displayed on the right side of the input.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`selectedIcon`	`appConfig.ui.icons.check`	`any` The icon displayed when an item is selected.
`childrenIcon`	`appConfig.ui.icons.chevronRight`	`any` The icon displayed when an item has children.
`placeholder`	`t('commandPalette.placeholder')`	`string` The placeholder text for the input.
`closeIcon`	`appConfig.ui.icons.close`	`any` The icon displayed in the close button.
`back`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Display a button to navigate back in history. `{ size: 'md', color: 'neutral', variant: 'link' }`
`backIcon`	`appConfig.ui.icons.arrowLeft`	`any` The icon displayed in the back button.
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`labelKey`	`'label'`	`string` The key used to get the label from the item.
`descriptionKey`	`'description'`	`string` The key used to get the description from the item.
`preserveGroupOrder`	`false`	`boolean` Whether to preserve the order of groups as defined in the `groups` prop when filtering. When `false`, groups will appear based on item matches.
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| ((index: number) => number) \| undefined; } \| undefined` Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
`groups`		`CommandPaletteGroup<CommandPaletteItem>[]`
`open`	`false`	`boolean`
`searchTerm`	`''`	`string`
`ui`		{ modal?: SlotClass; input?: SlotClass; } & { root?: SlotClass; input?: SlotClass; close?: SlotClass; back?: SlotClass; content?: SlotClass; footer?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemTrailingHighlightedIcon?: SlotClass; itemTrailingKbds?: SlotClass; itemTrailingKbdsSize?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemLabelBase?: SlotClass; itemLabelPrefix?: SlotClass; itemLabelSuffix?: SlotClass; itemDescription?: SlotClass; }

Slots (Edición española)

Slot	Type
`empty`	`{ searchTerm: string; }`
`footer`	`{ ui: object; }`
`back`	`{ ui: object; }`
`close`	`{ ui: object; }`
`item`	`{ item: CommandPaletteItem; index: number; ui: object; }`
`item-leading`	`{ item: CommandPaletteItem; index: number; ui: object; }`
`item-label`	`{ item: CommandPaletteItem; index: number; ui: object; }`
`item-description`	`{ item: CommandPaletteItem; index: number; ui: object; }`
`item-trailing`	`{ item: CommandPaletteItem; index: number; ui: object; }`
`group-label`	`{ group: CommandPaletteGroup<CommandPaletteItem>; label: string; ui: object; }`
`content`	`{ close: () => void; }`

Emisiones

Event	Type
`update:open`	`[value: boolean]`
`update:searchTerm`	`[value: string]`

Exposición

Al acceder al componente a través de una referencia de plantilla, puede utilizar lo siguiente:

Nombre	Tipo
`commandPaletteRef`xx{lang="ts-type"} (Edición española)	`Ref<InstanceType<typeof UCommandPalette> \| null>`xx{lang="ts-type"} (Edición española)

Temas

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSearch: {
      slots: {
        modal: '',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
          }
        },
        size: {
          xs: {},
          sm: {},
          md: {},
          lg: {},
          xl: {}
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSearch: {
          slots: {
            modal: '',
            input: ''
          },
          variants: {
            fullscreen: {
              false: {
                modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
              }
            },
            size: {
              xs: {},
              sm: {},
              md: {},
              lg: {},
              xl: {}
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog (Edición española)

No recent changes

DashboardResizeHandle

A handle to resize a sidebar or panel.

DashboardSearchButton

A pre-styled Button to open the DashboardSearch modal.