Class: PhlexKit::CommandDialogContent
- Inherits:
-
BaseComponent
- Object
- Phlex::HTML
- BaseComponent
- PhlexKit::CommandDialogContent
- Defined in:
- app/components/phlex_kit/command/command_dialog_content.rb
Overview
A holding the palette overlay. Like PhlexKit::SheetContent, the phlex-kit--command-dialog controller clones it into on open; the cloned wrapper carries the phlex-kit--command controller (+ the instance marker the outlet selector finds), a click/esc-dismiss backdrop, and the centered panel. See command.rb.
Constant Summary collapse
- SIZES =
{ xs: "xs", sm: "sm", md: nil, lg: "lg", xl: "xl", full: "full" }.freeze
Instance Method Summary collapse
-
#initialize(size: :md, aria_label: "Command palette", **attrs) ⇒ CommandDialogContent
constructor
A new instance of CommandDialogContent.
- #view_template(&block) ⇒ Object
Methods inherited from BaseComponent
Constructor Details
#initialize(size: :md, aria_label: "Command palette", **attrs) ⇒ CommandDialogContent
Returns a new instance of CommandDialogContent.
10 11 12 13 14 |
# File 'app/components/phlex_kit/command/command_dialog_content.rb', line 10 def initialize(size: :md, aria_label: "Command palette", **attrs) @size = size.to_sym @aria_label = aria_label @attrs = attrs end |
Instance Method Details
#view_template(&block) ⇒ Object
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
# File 'app/components/phlex_kit/command/command_dialog_content.rb', line 16 def view_template(&block) template(data: { phlex_kit__command_dialog_target: "content" }) do # The keydown action is the focus trap: Tab cycles within the cloned # overlay instead of escaping to the page underneath. div(data: { controller: "phlex-kit--command", phlex_kit__command_dialog_instance: true, action: "keydown->phlex-kit--command#trapFocus" }) do backdrop div(**mix({ class: panel_classes, role: "dialog", aria: { modal: "true", label: @aria_label }, data: { state: "open" } }, @attrs), &block) end end end |