Command

Uma paleta de comandos filtrável, com navegação por setas e Enter.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add command --yes

O item command do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/command_component.rb
app/components/ui/command/input_component.rb
app/components/ui/command/list_component.rb
app/components/ui/command/empty_component.rb
app/components/ui/command/group_component.rb
app/components/ui/command/item_component.rb
app/components/ui/command/separator_component.rb
app/components/ui/command/shortcut_component.rb
app/helpers/ui/command_helper.rb
app/javascript/controllers/ui_command_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_command do %>
  <%= ui_command_input(placeholder: "Search...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "No results found." } %>
    <%= ui_command_group(heading: "Suggestions") do %>
      <%= ui_command_item(value: "profile") { "Profile" } %>
    <% end %>
  <% end %>

<%= ui_command do %>
  <%= ui_command_input(placeholder: "Search...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "No results found." } %>
    <%= ui_command_group(heading: "Suggestions") do %>
      <%= ui_command_item(value: "profile") { "Profile" } %>
    <% end %>
  <% end %>
<% end %>

Exemplos

Padrão

Uma paleta com grupos, ícones e atalhos.

<%= ui_command(class: "w-80 shadow-md") do %>
  <%= ui_command_input(placeholder: "Digite um comando ou busque...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "Nada encontrado." } %>
    <%= ui_command_group(heading: "Sugestões") do %>
      <%= ui_command_item(value: "calendar") do %>
        <%= ui_icon("calendar") %>
        Calendário

<%= ui_command(class: "w-80 shadow-md") do %>
  <%= ui_command_input(placeholder: "Digite um comando ou busque...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "Nada encontrado." } %>
    <%= ui_command_group(heading: "Sugestões") do %>
      <%= ui_command_item(value: "calendar") do %>
        <%= ui_icon("calendar") %>
        Calendário
      <% end %>
      <%= ui_command_item(value: "emoji") do %>
        <%= ui_icon("smile") %>
        Buscar emoji
      <% end %>
    <% end %>
    <%= ui_command_separator %>
    <%= ui_command_group(heading: "Configurações") do %>
      <%= ui_command_item(value: "profile") do %>
        <%= ui_icon("user") %>
        Perfil
        <%= ui_command_shortcut { "⌘P" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Command::Input`	`placeholder`	`nil`	O placeholder do campo de busca.
`Command::Group`	`heading`	`nil`	Um título acima dos itens do grupo.
`Command::Item`	`value`	`nil`	O que a busca compara e o evento `select` informa; o texto do item quando ausente.
`Command::Item`	`disabled`	`false`	Desabilita: não recebe clique e o teclado o pula.