Popover

Um painel sobreposto, disparado por um botão, para exibir conteúdo rico.

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

O item popover do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/popover_component.rb
app/components/ui/popover/trigger_component.rb
app/components/ui/popover/content_component.rb
app/components/ui/button_component.rb
app/helpers/ui/popover_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_popover_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

O controller ui-popover alterna o painel, move o foco para dentro dele ao abrir e o devolve ao gatilho ao fechar com Esc. Clicar fora também fecha. O posicionamento usa apenas utilitários (side/align), sem floating-ui.

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Open" } %>
  <%= ui_popover_content do %>
    Popover content.
  <% end %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::PopoverComponent.new do %>
  <%= render Ui::Popover::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Popover::ContentComponent.new(side: :bottom, align: :start) do %>
    Content
  <% end %>
<% end %>

Composição

Popover (data-controller="ui-popover", relative)
|-- Popover::Trigger (Button, aria-expanded)
`-- Popover::Content (absolute, side: + align:)

Exemplos

Padrão

Um painel não modal: abre no clique, põe o foco no conteúdo e fecha com um clique fora ou com Esc.

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Abrir dimensões" } %>
  <%= ui_popover_content do %>
    <div class="grid gap-4">
      <div class="space-y-1">
        <h4 class="font-medium leading-none">Dimensões</h4>
        <p class="text-sm text-muted-foreground">Defina as dimensões da camada.</p>
      </div>

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Abrir dimensões" } %>
  <%= ui_popover_content do %>
    <div class="grid gap-4">
      <div class="space-y-1">
        <h4 class="font-medium leading-none">Dimensões</h4>
        <p class="text-sm text-muted-foreground">Defina as dimensões da camada.</p>
      </div>
      <div class="grid gap-2">
        <div class="grid grid-cols-3 items-center gap-4">
          <%= ui_label(for: "popover-width") { "Largura" } %>
          <%= ui_input(id: "popover-width", value: "100%", class: "col-span-2 h-8") %>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <%= ui_label(for: "popover-height") { "Altura" } %>
          <%= ui_input(id: "popover-height", value: "25px", class: "col-span-2 h-8") %>
        </div>
      </div>
    </div>
  <% end %>
<% end %>

Alinhamento

align: :start, :center ou :end desloca o painel no eixo cruzado.

<% %i[start center end].each do |align| %>
  <%= ui_popover do %>
    <%= ui_popover_trigger(variant: :outline) { "align: #{align}" } %>
    <%= ui_popover_content(side: :bottom, align: align, class: "w-48") do %>
      <p class="text-sm">Alinhado em <strong><%= align %></strong> no eixo horizontal.</p>
    <% end %>
  <% end %>
<% end %>

Referência da API

Todas as partes aceitam class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Popover::Trigger`	`variant`, `size`	`:outline`	O botão que abre e fecha o painel; mantém o `aria-expanded` atualizado.
`Popover::Content`	`side`	`:bottom`	`:top`, `:right`, `:bottom`, `:left`.
`Popover::Content`	`align`	`:center`	`:start`, `:center`, `:end` no eixo cruzado.