Vitral 0.2
Menu

Command

Um campo de busca sobre uma lista de comandos que filtra enquanto você digita, inline ou como uma paleta modal aberta por um atalho.

Testado com WAI-ARIA

Importação

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>

Paleta

…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

Lido de packages/vue/src/components/Command/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
shouldFilterbooleanOculta os itens que a busca não encontra. Desligado, a aplicação filtra (e renderiza só o que combina). O padrão é true.
filter(value: string, search: string, keywords: string[]) => number | booleanPontua um item em relação à busca: 0 (ou false) o oculta, e pontuações maiores vêm primeiro. O padrão é o `commandScore` do core (texto inteiro, depois prefixo, início de palavra, qualquer lugar e letras em ordem) sobre o valor e as palavras-chave, ignorando maiúsculas e acentos.
loopbooleanCom as setas, volta do último item para o primeiro.
labelstringDá nome à lista. O padrão é o "Command palette" do locale.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
selectvalue: stringUm item foi escolhido, por Enter ou por um toque.

Slots

NomeProps do slotDescrição
default——