dashboardSearch

대시보드에 추가할 준비가 된 CommandPalette.

Usage

DashboardSearch 구성 요소는 CommandPalette 구성 요소를 확장하므로 icon, placeholder 등과 같은 모든 속성을 전달할 수 있습니다.

DashboardGroup 구성 요소의 기본 슬롯 내에서 이 옵션을 사용합니다.

layouts/dashboard.vue

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

    <UDashboardSearch />

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

명령팔레트는 :kbd{value="K" class="ms-px"} 키를 누르거나 DashboardSearchButton 구성 요소를 사용하거나 v-model:open 지시어를 사용하여 열 수 있습니다.

바로 가기

shortcut 소품을 사용하여 defineShortcuts에서 사용되는 단축키를 변경하여 ContentSearch 구성 요소를 엽니다. 기본값은 meta_k( :kbd{value="K"})입니다.

app.vue

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

Color 모델

기본적으로 명령 팔레트에 명령 그룹이 추가되어 밝은 모드와 어두운 모드 사이를 전환할 수 있습니다. 이 명령은 colorMode가 definePageMeta를 통해 수행할 수 있는 특정 페이지에서 강제로 수행되지 않은 경우에만 적용됩니다.

pages/index.vue

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

color-mode prop을 false로 설정하면 이 동작을 비활성화할 수 있습니다.

app.vue

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

API 사용

Props 코드

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; }

슬롯

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; }`

Emits

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

노출

템플릿 참조를 통해 컴포넌트에 액세스하는 경우 다음을 사용할 수 있습니다.

이름 (Name)	유형 (Type)
`commandPaletteRef` (`commandPaletteRef`)	`Ref<InstanceType<typeof UCommandPalette> \| null>` (`Ref<InstanceType<typeof UCommandPalette> \| null>`)

Theme 테마

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'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

DashboardResizeHandle

A handle to resize a sidebar or panel.

DashboardSearchButton

A pre-styled Button to open the DashboardSearch modal.