Class: PhlexKit::NativeSelect

Inherits:

BaseComponent

• Object
• Phlex::HTML
• BaseComponent
• PhlexKit::NativeSelect

Defined in:

app/components/phlex_kit/native_select/native_select.rb

Overview

Styled native , ported from ruby_ui's RubyUI::NativeSelect. A real browser select (native option list, mobile-friendly) wrapped so we can hide the OS chevron (appearance:none) and draw our own — otherwise the native arrow renders an inconsistent light-on-dark box. Multi-part, like PhlexKit::Card:

render PhlexKit::NativeSelect.new(name: "store_id") do
render PhlexKit::NativeSelectOption.new(value: "") { "All stores" }
render PhlexKit::NativeSelectGroup.new(label: "Live") do
  render PhlexKit::NativeSelectOption.new(value: store.id) { store.name }
end
end

The yielded block is the

/ list; name:/id:/required:/ **on(...) pass through to the via mix. size: is the kit's lone selector here (default | sm) — SIZES.fetch fails loud on anything else.

Constant Summary

SIZES =

size => extra class appended after the base select class (nil = default).

{
  default: nil,
  sm: "sm"
}.freeze

Instance Method Summary

• #initialize(size: :default, **attrs) ⇒ NativeSelect constructor

  A new instance of NativeSelect.

• #view_template(&block) ⇒ Object

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(size: :default, **attrs) ⇒ NativeSelect

Returns a new instance of NativeSelect.

# File 'app/components/phlex_kit/native_select/native_select.rb', line 24

def initialize(size: :default, **attrs)
  @size = size.to_sym
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object

# File 'app/components/phlex_kit/native_select/native_select.rb', line 29

def view_template(&block)
  div(class: "pk-native-select") do
    select(**mix({
      class: classes,
      data: {
        phlex_kit__form_field_target: "input",
        action: "change->phlex-kit--form-field#onChange invalid->phlex-kit--form-field#onInvalid"
      }
    }, @attrs), &block)
    render PhlexKit::NativeSelectIcon.new
  end
end