Base components
When you install Phlex, you get a very basic base class for the rest of your views and/or components to inherit from and where shared logic is placed.
This is the base class, all the Quicksilver components are based on. You can build your own or just copy this.
# frozen_string_literal: true
class UI::Base < Phlex::HTML
TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
extend Literal::Properties
include Phlex::Rails::Helpers::Routes
include Phlex::Rails::Helpers::ClassNames
include Phlex::Rails::Helpers::LinkTo
if Rails.env.development?
def before_template
comment { "Before #{self.class.name}" }
super
end
end
prop :class, _Nilable(String)
prop :data, Hash, default: {}.freeze, reader: :private
private
def classes
TAILWIND_MERGER.merge [default_classes, @class].join(" ")
end
def default_classes
end
end
Form base components
Our form components rely on methods from their parents. You can copy them here.
# frozen_string_literal: true
class Form::BaseTag < UI::Base
ALLOWED_OPTIONS = [:readonly, :disabled, :name, :autofocus, :data].freeze
class << self
def allowed_options
ALLOWED_OPTIONS
end
end
prop :form, AppFormBuilder, reader: :private
prop :method, _Union(Symbol, String), reader: :private
prop :value, _Any?, reader: :private
prop :options, Hash, :**, reader: :private
def id
form.field_id(method)
end
def name
form.field_name(method)
end
def value
return @value if @value
return if form.object.blank?
return unless form.object.respond_to?(method)
form.object.public_send(method)
end
private
def options_with_defaults
options.with_defaults(default_options)
end
def default_options
{id:, name:, value:, data:}
end
end
# frozen_string_literal: true
class Form::Input < Form::BaseTag
def view_template
input(type:, class: classes, **options_with_defaults)
end
private
def default_classes = "ui-form-control"
end