Class: Panda::Core::Base

Inherits:
Phlex::HTML
  • Object
show all
Extended by:
Literal::Properties
Includes:
Phlex::Rails::Helpers::Routes
Defined in:
app/components/panda/core/base.rb

Overview

Base class for all Phlex components in the Panda ecosystem.

This base component provides:

  • Type-safe properties via Literal

  • Tailwind CSS class merging

  • Attribute merging with sensible defaults

  • Rails helper integration

  • Development-mode debugging comments

Examples:

Basic usage

class MyComponent < Panda::Core::Base
  prop :title, String
  prop :variant, Symbol, default: :primary

  def view_template
    div(**@attrs) { title }
  end

  def default_attrs
    { class: "my-component my-component--#{variant}" }
  end
end

With attribute merging

# Component definition
class Button < Panda::Core::Base
  prop :text, String

  def view_template
    button(**@attrs) { text }
  end

  def default_attrs
    { class: "btn btn-primary", type: "button" }
  end
end

# Usage - user attrs merge with defaults
render Button.new(text: "Click me", class: "mt-4", type: "submit")
# => <button type="submit" class="btn btn-primary mt-4">Click me</button>

Constant Summary collapse

TAILWIND_MERGER =

Frozen instance of TailwindMerge for efficient class merging

::TailwindMerge::Merger.new.freeze

Instance Method Summary collapse

Instance Method Details

#after_template ⇒ Object 



114
115
116
117
118
 
# File 'app/components/panda/core/base.rb', line 114

def after_template
  class_name = self.class.name
  super
  comment { "End #{class_name}" }
end

#attrs ⇒ Hash

Special handling for the attrs property - merges user attributes with defaults and intelligently handles Tailwind class merging

Parameters:

  • value (Hash) —

    User-provided attributes

Returns:

  • (Hash) —

    Merged attributes with Tailwind classes properly combined



61
62
63
 
# File 'app/components/panda/core/base.rb', line 61

prop :attrs, Hash, :**, reader: :private do |value|
  merge_attrs(value, default_attrs)
end

#before_template ⇒ Object 



108
109
110
111
112
 
# File 'app/components/panda/core/base.rb', line 108

def before_template
  class_name = self.class.name
  comment { "Begin #{class_name}" }
  super
end

#default_attrs ⇒ Hash

Override this method in subclasses to provide default attributes for your component.

Examples:

def default_attrs
  {
    class: "btn btn-#{variant}",
    type: "button",
    data: { controller: "button" }
  }
end

Returns:

  • (Hash) —

    Default HTML attributes for the component



101
102
103
 
# File 'app/components/panda/core/base.rb', line 101

def default_attrs
  {}
end

#merge_attrs(user_attrs, default_attrs) ⇒ Hash

Merges user-provided attributes with default attributes. Special handling for :class to merge Tailwind classes intelligently.

Parameters:

  • user_attrs (Hash) —

    Attributes provided by the user

  • default_attrs (Hash) —

    Default attributes from the component

Returns:

  • (Hash) —

    Merged attributes



71
72
73
74
75
76
77
 
# File 'app/components/panda/core/base.rb', line 71

def merge_attrs(user_attrs, default_attrs)
  attrs = default_attrs.merge(user_attrs)
  if attrs[:class].is_a?(String)
    attrs[:class] = TAILWIND_MERGER.merge(attrs[:class])
  end
  attrs
end

#tailwind_merge_attrs(user_attrs, default_attrs) ⇒ Hash

Helper alias for merge_attrs with clearer intent

Parameters:

  • user_attrs (Hash) —

    Attributes provided by the user

  • default_attrs (Hash) —

    Default attributes from the component

Returns:

  • (Hash) —

    Merged attributes with Tailwind classes combined



84
85
86
 
# File 'app/components/panda/core/base.rb', line 84

def tailwind_merge_attrs(user_attrs, default_attrs)
  merge_attrs(user_attrs, default_attrs)
end