Class: PhlexKit::Field

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/field/field.rb

Overview

One labeled control row/column, ported from shadcn/ui's Field. PRESENTATIONAL layout only — pair with PhlexKit::FormField when you want the kit's Stimulus live-validation (FormField wraps the control; Field arranges label, control, description and error around it — they nest without conflict).

render PhlexKit::Field.new do
render PhlexKit::FieldLabel.new(for: "email") { "Email" }
render PhlexKit::Input.new(id: "email", type: :email)
render PhlexKit::FieldDescription.new { "We never share it." }
end

orientation: :vertical (default) stacks; :horizontal puts the label beside the control (checkbox/switch rows); :responsive is vertical that goes horizontal when the enclosing FieldGroup is ≥28rem wide (container query). invalid: true tints the whole field; disabled: true dims labels. .pk-field* (field.css).

Constant Summary collapse

ORIENTATIONS = 
{ vertical: "vertical", horizontal: "horizontal", responsive: "responsive" }.freeze

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(orientation: :vertical, invalid: false, disabled: false, **attrs) ⇒ Field

Returns a new instance of Field.



21
22
23
24
25
26
 
# File 'app/components/phlex_kit/field/field.rb', line 21

def initialize(orientation: :vertical, invalid: false, disabled: false, **attrs)
  @orientation = orientation.to_sym
  @invalid = invalid
  @disabled = disabled
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



28
29
30
31
32
33
 
# File 'app/components/phlex_kit/field/field.rb', line 28

def view_template(&)
  data = { slot: "field", orientation: fetch_option(ORIENTATIONS, @orientation, :orientation) }
  data[:invalid] = "true" if @invalid
  data[:disabled] = "true" if @disabled
  div(**mix({ class: "pk-field", role: "group", data: data }, @attrs), &)
end