Shadwire
Componentes

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 a sua aplicação 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: 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: "Buscar...") %>
  <%= ui_command_list do %>
    <%= ui_command_empty { "Nada encontrado." } %>
    <%= ui_command_group(heading: "Sugestões") do %>
      <%= ui_command_item(value: "perfil") { "Perfil" } %>
    <% end %>
  <% end %>

Exemplos

Padrão

Paleta com grupos, ícones e atalhos.

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