Combobox

Um Popover com um Command dentro. Não é um componente separado: instalá-lo instala popover e command.

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 combobox --yes

O item combobox do registry instala estes arquivos:

app/components/ui_component.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Select" } %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Search...") %>
      <%= ui_command_list do %>
        <%= ui_command_item(value: "rails") { "Rails" } %>
      <% end %>

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Select" } %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Search...") %>
      <%= ui_command_list do %>
        <%= ui_command_item(value: "rails") { "Rails" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Exemplos

Padrão

Um popover com uma lista de comandos em que dá para buscar.

<%# Combobox = Popover + Command (a composition recipe, not a new component). %>
<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline, class: "w-72 justify-between font-normal") do %>
    Escolha um framework
    <%= ui_icon("chevrons-up-down", class: "opacity-50") %>
  <% end %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>

<%# Combobox = Popover + Command (a composition recipe, not a new component). %>
<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline, class: "w-72 justify-between font-normal") do %>
    Escolha um framework
    <%= ui_icon("chevrons-up-down", class: "opacity-50") %>
  <% end %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Buscar frameworks...") %>
      <%= ui_command_list do %>
        <%= ui_command_empty { "Nenhum framework encontrado." } %>
        <%= ui_command_group do %>
          <%= ui_command_item(value: "rails") { "Rails" } %>
          <%= ui_command_item(value: "hotwire") { "Hotwire" } %>
          <%= ui_command_item(value: "viewcomponent") { "ViewComponent" } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>