Class: PhlexKit::DatePicker

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

Overview

Date picker, ported from ruby_ui's RubyUI::DatePicker: a labelled PhlexKit::Input inside a PhlexKit::Popover whose panel holds a PhlexKit::Calendar. The input carries the phlex-kit--calendar-input controller and the calendar's outlet points at its id, so picking a day writes the formatted date into the field. Upstream's popover_options (hover trigger via @floating-ui) are gone — the kit popover is click-only, CSS-positioned. Tailwind → vanilla .pk-date-picker* (date_picker.css).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(id: nil, name: nil, label: "Select a date", value: nil, placeholder: "Select a date", selected_date: value, date_format: "yyyy-MM-dd", input_attrs: {}, calendar_attrs: {}, trigger_attrs: {}, content_attrs: {}, **attrs) ⇒ DatePicker

Returns a new instance of DatePicker.



10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
# File 'app/components/phlex_kit/date_picker/date_picker.rb', line 10

def initialize(
  id: nil,
  name: nil,
  label: "Select a date",
  value: nil,
  placeholder: "Select a date",
  selected_date: value,
  date_format: "yyyy-MM-dd",
  input_attrs: {},
  calendar_attrs: {},
  trigger_attrs: {},
  content_attrs: {},
  **attrs
)
  @id = id || "date-picker-#{SecureRandom.hex(4)}"
  @name = name
  @label = label
  @selected_date = selected_date
  @date_format = date_format
  # Seed the input with the same date_format the calendar controller
  # writes — a bare `selected_date.to_s` (ISO) would mismatch the format
  # until the first interaction.
  @value = value || format_selected_date
  @placeholder = placeholder
  @input_attrs = input_attrs
  @calendar_attrs = calendar_attrs
  @trigger_attrs = trigger_attrs
  @content_attrs = content_attrs
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'app/components/phlex_kit/date_picker/date_picker.rb', line 41

def view_template
  div(**mix({ class: "pk-date-picker" }, @attrs)) do
    render Popover.new do
      render PopoverTrigger.new(**trigger_attrs) do
        div(class: "pk-date-picker-field") do
          label(class: "pk-date-picker-label", for: @id) { @label } if @label
          render Input.new(**input_attrs)
        end
      end
      render PopoverContent.new(**@content_attrs) do
        render Calendar.new(input_id: input_selector, selected_date: @selected_date, date_format: @date_format, **@calendar_attrs)
      end
    end
  end
end