Vitral 0.2
Menu

Command

A search box over a list of commands that filters as you type, inline or as a modal palette opened with a hotkey.

WAI-ARIA tested

Import

main.ts
import { Command } from '@vitral/vue';

Inline

Last command: —
<script setup lang="ts">import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Icon } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');</script> <template>    <Command style="max-width: 26rem" @select="last = $event">        <CommandInput placeholder="Type a command or search…" />        <CommandList>            <CommandEmpty>No results found.</CommandEmpty>            <CommandGroup heading="Suggestions">                <CommandItem><Icon icon="calendar" /> Calendar</CommandItem>                <CommandItem :keywords="['emoji', 'smile']"><Icon icon="star" /> Search emoji</CommandItem>                <CommandItem disabled><Icon icon="sliders" /> Calculator</CommandItem>            </CommandGroup>            <CommandSeparator />            <CommandGroup heading="Settings">                <CommandItem shortcut="⌘P"><Icon icon="user" /> Profile</CommandItem>                <CommandItem shortcut="⌘B"><Icon icon="bell" /> Notifications</CommandItem>                <CommandItem shortcut="⌘S"><Icon icon="sliders" /> Preferences</CommandItem>            </CommandGroup>        </CommandList>    </Command>    <small style="color: var(--vt-text-muted-color)">Last command: {{ last }}</small></template>

Palette

…or press Ctrl+J (⌘J).
<script setup lang="ts">import { Button, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Icon } from '@vitral/vue';import { ref } from 'vue'; const palette = ref(false);</script> <template>    <Button label="Open palette" icon="search" severity="secondary" @click="palette = true" />    <small style="color: var(--vt-text-muted-color)">…or press Ctrl+J (⌘J).</small>    <CommandDialog v-model:visible="palette" hotkey="j">        <CommandInput placeholder="Search…" />        <CommandList>            <CommandEmpty />            <CommandGroup heading="Navigation">                <CommandItem value="home"><Icon icon="home" /> Home</CommandItem>                <CommandItem value="docs"><Icon icon="file" /> Documentation</CommandItem>                <CommandItem value="themes"><Icon icon="sun" /> Themes</CommandItem>            </CommandGroup>        </CommandList>    </CommandDialog></template>

API

Read from packages/vue/src/components/Command/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
shouldFilterbooleanHide the items the search does not match. Off, the app filters (and renders only what matches). Defaults to true.
filter(value: string, search: string, keywords: string[]) => number | booleanScores an item against the search: 0 (or false) hides it, and higher scores come first. Defaults to core's `commandScore` (whole text, then prefix, word start, anywhere, and letters in order) over the value and keywords, ignoring case and accents.
loopbooleanWrap from the last item to the first with the arrows.
labelstringNames the list. Defaults to the locale's "Command palette".

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
selectvalue: stringAn item was chosen, by Enter or a press.

Slots

NameSlot propsDescription
default——