fox_tail 0.1.1 → 0.2.0

data/app/components/fox_tail/clickable_component.rb

@@ -42,23 +42,23 @@ class FoxTail::ClickableComponent < FoxTail::BaseComponent
   end
 
   def stimulus_controller_options
-    { state: stimulus_state, active_classes: active_classes, disabled_classes: disabled_classes }
+    {state: stimulus_state, active_classes: active_classes, disabled_classes: disabled_classes}
   end
 
   protected
 
   def root_classes
     classnames theme.apply(:root, self),
-               theme.apply("root/#{disabled? ? :disabled : :active}", self),
-               block_given? && yield,
-               html_class
+      theme.apply("root/#{disabled? ? :disabled : :active}", self),
+      block_given? && yield,
+      html_class
   end
 
   def active_classes
     classnames theme.apply(:root, self),
-               theme.apply("root/active", self),
-               block_given? && yield,
-               html_class
+      theme.apply("root/active", self),
+      block_given? && yield,
+      html_class
   end
 
   def disabled_classes
@@ -87,7 +87,7 @@ class FoxTail::ClickableComponent < FoxTail::BaseComponent
     def attributes(options = {})
       {
         data: {
-          controller: identifier,
+          :controller => identifier,
           value_key(:state) => options[:state] || :active,
           classes_key(:active) => options[:active_classes],
           classes_key(:disabled) => options[:disabled_classes]

data/app/components/fox_tail/clickable_controller.ts

@@ -26,6 +26,18 @@ export default class extends Controller {
         return !this.isLink;
     }
 
+    disable() {
+        this.stateValue = 'disabled';
+    }
+
+    activate() {
+        this.stateValue = 'active';
+    }
+
+    loading() {
+        this.stateValue = 'loading';
+    }
+
     connect() {
         super.connect();
         this.element.addEventListener('click', this.handleClick.bind(this));

data/app/components/fox_tail/collapsible_component.rb

@@ -1,20 +1,25 @@
 # frozen_string_literal: true
 
 class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
-  attr_reader :id
-
   renders_one :trigger, lambda { |attributes = {}|
-    FoxTail::CollapsibleTriggerComponent.new trigger_id, "##{id}", attributes.merge(open: open?)
+    FoxTail::CollapsibleTriggerComponent.new "##{id}", attributes.merge(open: open?, id: trigger_id)
   }
 
   has_option :open, default: false, type: :boolean
   has_option :trigger_id
 
-  def initialize(id, html_attributes = {})
+  def initialize(id_or_attributes = {}, html_attributes = {})
+    if id_or_attributes.is_a? Hash
+      html_attributes = id_or_attributes
+    else
+      __id_argument_deprecated_warning
+      html_attributes[:id] = id_or_attributes
+    end
+
     super(html_attributes)
-    @id = id
   end
 
   def trigger_id
@@ -24,10 +29,10 @@ class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         !open? && theme.apply("root/collapsed", self),
-                                         html_class
+      !open? && theme.apply("root/collapsed", self),
+      html_class
   end
 
   def call
@@ -46,7 +51,7 @@ class FoxTail::CollapsibleComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:collapsed)] = !options[:open]
       attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
       attributes

data/app/components/fox_tail/collapsible_trigger_component.rb

@@ -11,15 +11,15 @@ class FoxTail::CollapsibleTriggerComponent < FoxTail::TriggerBaseComponent
     super
 
     html_attributes[:class] = classnames theme.classname("root.base"),
-                                         open? && theme.classname("root.expanded"),
-                                         !open? && theme.classname("root.collapsed"),
-                                         html_class
+      open? && theme.classname("root.expanded"),
+      !open? && theme.classname("root.collapsed"),
+      html_class
   end
 
   def stimulus_controller_options
     super.merge open: open?,
-                collapsed_classes: theme.classname("root.collapsed"),
-                expanded_classes: theme.classname("root.expanded")
+      collapsed_classes: theme.classname("root.collapsed"),
+      expanded_classes: theme.classname("root.expanded")
   end
 
   class StimulusController < FoxTail::StimulusController
@@ -35,12 +35,12 @@ class FoxTail::CollapsibleTriggerComponent < FoxTail::TriggerBaseComponent
 
     def attributes(options = {})
       trigger_type = TRIGGER_TYPES[options[:trigger_type]&.to_sym]
-      attributes = super options
+      attributes = super
       attributes[:data][classes_key(:collapsed)] = options[:collapsed_classes]
       attributes[:data][classes_key(:expanded)] = options[:expanded_classes]
       attributes[:data][outlet_key(collapsible_identifier)] = options[:selector]
       attributes[:data][:action] = build_actions(trigger_type)
-      attributes[:aria] = { expanded: options[:opened], controls: extract_controls(options[:collapsible_selector]) }
+      attributes[:aria] = {expanded: options[:opened], controls: extract_controls(options[:collapsible_selector])}
       attributes
     end
 

data/app/components/fox_tail/collapsible_trigger_component.theme.yml

@@ -1,5 +1,6 @@
 root:
   base: group
   collapsed: collapsed
+  expanded: expanded
 root/collapsed:
   base: collapsed

data/app/components/fox_tail/color_theme_trigger_component.rb

@@ -4,7 +4,7 @@ class FoxTail::ColorThemeTriggerComponent < FoxTail::TriggerBaseComponent
   has_option :action
 
   def initialize(html_attributes = {})
-    super html_attributes.delete(:id), nil, html_attributes
+    super(html_attributes.delete(:id), nil, html_attributes)
   end
 
   def stimulus_controller_options
@@ -21,7 +21,7 @@ class FoxTail::ColorThemeTriggerComponent < FoxTail::TriggerBaseComponent
     def attributes(options = {})
       controller_options = options.extract! :key, :storage, :default_theme, :domain
       controller_options.reverse_merge! FoxTail::Base.fox_tail_config.color_theme
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:key)] = controller_options[:key]
       attributes[:data][value_key(:storage)] = controller_options[:storage]
       attributes[:data][value_key(:default_theme)] = controller_options[:default_theme]

data/app/components/fox_tail/concerns/choosable.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::Choosable
+  extend ActiveSupport::Concern
+
+  included do
+    has_option :choices
+  end
+
+  protected
+
+  def add_choices
+    return unless choices?
+
+    choices.each do |choice|
+      text, value, options = extract_choice_values choice
+
+      if value.is_a? Array
+        add_choice_group text, value
+      else
+        add_choice value, text, options
+      end
+    end
+  end
+
+  def add_choice(value, label, options = {})
+    raise NotImplementedError
+  end
+
+  def add_choice_group(label, choices)
+    raise NotImplementedError
+  end
+
+  def extract_choice_values(choice)
+    if choice.is_a? Array
+      choice[1] ||= choice[0]
+      choice[2] ||= {}
+      choice
+    else
+      [choice, choice, {}]
+    end
+  end
+end

data/app/components/fox_tail/concerns/formable.rb

@@ -4,6 +4,12 @@ module FoxTail::Concerns::Formable
   include ActionView::ModelNaming
   extend ActiveSupport::Concern
 
+  FORM_OPTIONS = %i[
+    object_name method_name namespace object
+    skip_default_ids allow_method_names_outside_object
+    value_array object_index
+  ].freeze
+
   included do
     has_option :object_name
     has_option :method_name
@@ -13,6 +19,7 @@ module FoxTail::Concerns::Formable
     has_option :allow_method_names_outside_object, type: :boolean, default: false
     has_option :value_array, type: :boolean, default: false
     has_option :object_index
+    has_option :errors_for
   end
 
   def initialize(*)
@@ -35,7 +42,7 @@ module FoxTail::Concerns::Formable
   end
 
   def name_and_id_index
-    if self.options.key? :object_index
+    if options.key? :object_index
       object_index.presence || ""
     elsif @generate_indexed_names
       @auto_index || ""
@@ -79,7 +86,7 @@ module FoxTail::Concerns::Formable
 
   def add_default_name_and_id_for_value(value, attributes: html_attributes)
     add_default_name attributes: attributes
-    attributes[:id] = tag_id_for_value value, attributes: attributes
+    attributes[:id] = tag_id_for_value value, attributes: attributes unless attributes.key? :id
   end
 
   def tag_id_for_value(value, attributes = html_attributes)
@@ -116,11 +123,11 @@ module FoxTail::Concerns::Formable
     end
   end
 
-  def field_id(method, *suffixes, namespace: self.namespace, index: self.object_index)
+  def field_id(method, *suffixes, namespace: self.namespace, index: object_index)
     view_context.field_id(object_name, method, *suffixes, namespace: namespace.presence, index: index.presence).presence
   end
 
-  def field_name(method, *methods, multiple: false, index: self.object_index)
+  def field_name(method, *methods, multiple: false, index: object_index)
     view_context.field_name(object_name, method, *methods, index: index.presence, multiple: !!multiple).presence
   end
 
@@ -141,16 +148,23 @@ module FoxTail::Concerns::Formable
   end
 
   def translator(value: nil, scope: nil, default: "")
-    FoxTail::Translator.new object,
-                                             object_name,
-                                             method_name,
-                                             value: value,
-                                             scope: scope,
-                                             default: default
+    FoxTail::Translator.new object, object_name, method_name, value: value, scope: scope, default: default
+  end
+
+  def object_errors_for
+    (Array(method_name) + Array(options[:errors_for])).compact_blank.uniq
   end
 
-  def object_errors?(method = method_name)
+  def object_errors?(methods = object_errors_for)
+    return false if methods.blank?
+
     object = convert_to_model self.object
-    object.present? && method.present? && object.errors[method.to_sym].present?
+    return false if object.blank?
+
+    methods.any? { |m| object.errors[m].present? }
+  end
+
+  def objectify_options(options)
+    options.merge self.options.slice(*FORM_OPTIONS)
   end
 end

data/app/components/fox_tail/concerns/has_options.rb

@@ -22,29 +22,52 @@ module FoxTail::Concerns::HasOptions
 
   class_methods do
     def default_options
-      registered_options.reject { |_,v| v[:default].blank? }.transform_values { |v| v[:default] }
+      registered_options.reject { |_, v| v[:default].nil? }.transform_values { |v| v[:default] }
     end
 
     def has_option(name, as: name, default: nil, type: nil)
       raise FoxTail::ReservedOption.new(self, as) if RESERVED_OPTIONS.include?(as.to_s)
 
-      self.registered_options = registered_options.merge name => { name: name, as: as, default: default, type: type }
+      register_option name, {name: name, as: as, default: default, type: type}
+    end
 
-      define_method as do
-        options[name]
-      end
+    def include_options_from(klass, only: nil, except: nil)
+      return unless klass.respond_to? :registered_options
 
-      define_method :"#{as}?" do
-        if type == :boolean
-          !!send(as)
-        else
-          send(as).present?
+      only = Array(only).map(&:to_sym) if only.present?
+      except = Array(except).map(&:to_sym) if except.present?
+
+      klass.registered_options.each do |k, v|
+        if !registered_options.key?(k) && (only.nil? || only.include?(k)) && (except.nil? || except.exclude?(k))
+          register_option k, v
         end
       end
+
+      define_method "#{klass.name.underscore.gsub("_component", "").gsub("/", "_")}_options" do
+        options.slice(*klass.registered_options.keys)
+      end
     end
 
     def extract_options(options = {})
       options.slice(*registered_options.keys)
     end
+
+    private
+
+    def register_option(name, option)
+      self.registered_options = registered_options.merge name => option
+
+      define_method option[:as] do
+        options[name]
+      end
+
+      define_method :"#{option[:as]}?" do
+        if option[:type] == :boolean
+          !!send(option[:as])
+        else
+          send(option[:as]).present?
+        end
+      end
+    end
   end
 end

data/app/components/fox_tail/concerns/identifiable.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module FoxTail::Concerns::Identifiable
+  extend ActiveSupport::Concern
+
+  class_methods do
+    def generate_unique_id
+      "#{name.underscore.gsub("_component", "").gsub("/", "_")}_#{SecureRandom.base58(6)}"
+    end
+  end
+
+  def id
+    html_attributes[:id] ||= self.class.generate_unique_id
+  end
+  alias_method :generate_unique_id, :id
+
+  private
+
+  def __id_argument_deprecated_warning(slot: false)
+    FoxTail.deprecator.allow ["identifiable"] do
+      callstack = Array(caller_locations[slot ? 7 : 4])
+      FoxTail.deprecator.warn "first argument `id` is deprecated, use `id:` instead", callstack
+    end
+  end
+end

data/app/components/fox_tail/dialog_component.html.erb

@@ -1,10 +1,8 @@
 <%= content_tag tag_name, html_attributes do %>
   <%= header if header? %>
-  <% if body? %>
+  <% bodies.each do |body| %>
     <%= body %>
-    <%= content if content? %>
-  <% elsif content? %>
-    <%= content_tag :div, content, class: theme.apply(:body, self) %>
   <% end %>
+  <%= formatted_content %>
   <%= footer if footer? %>
 <% end %>

data/app/components/fox_tail/dialog_component.rb

@@ -6,7 +6,7 @@ class FoxTail::DialogComponent < FoxTail::SurfaceComponent
     content_tag :div, options, &block
   }
 
-  renders_one :body, lambda { |options = {}, &block|
+  renders_many :bodies, lambda { |options = {}, &block|
     options[:class] = classnames theme.apply(:body, self), options[:class]
     content_tag :div, options, &block
   }
@@ -16,9 +16,11 @@ class FoxTail::DialogComponent < FoxTail::SurfaceComponent
     content_tag :div, options, &block
   }
 
+  has_option :wrap_content, type: :boolean, default: true
+
   def initialize(html_attributes = {})
     html_attributes[:border] = false unless html_attributes.key? :border
-    super(html_attributes)
+    super
   end
 
   def hover?
@@ -28,4 +30,11 @@ class FoxTail::DialogComponent < FoxTail::SurfaceComponent
   def tag_name
     :div
   end
+
+  def formatted_content
+    return nil unless content? && content.present?
+    return content unless wrap_content?
+
+    content_tag :div, content, class: theme.apply(:body, self)
+  end
 end

data/app/components/fox_tail/dismissible_component.rb

@@ -35,7 +35,7 @@ class FoxTail::DismissibleComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:remove)] = options[:remove]
       attributes[:data][value_key(:auto_close)] = options[:auto_close]
       attributes[:data][value_key(:delay)] = options[:delay]

data/app/components/fox_tail/dismissible_trigger_component.rb

@@ -7,7 +7,7 @@ class FoxTail::DismissibleTriggerComponent < FoxTail::TriggerBaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][outlet_key(:dismissible)] = options[:selector]
       attributes[:data][:action] = action(:dismiss) if options[:trigger_type] == :click
       attributes

data/app/components/fox_tail/dot_indicator_component.rb

@@ -18,8 +18,8 @@ class FoxTail::DotIndicatorComponent < FoxTail::BaseComponent
 
   def render_animated_dot
     container_classes = classnames theme.apply(:root, self),
-                                   theme.apply(:container, self),
-                                   html_class
+      theme.apply(:container, self),
+      html_class
 
     dot_classes = classnames theme.apply(:root, self), theme.apply(:dot, self)
     animated_classes = classnames dot_classes, theme.apply("dot/animation", self)

data/app/components/fox_tail/dot_indicator_component.theme.yml

@@ -12,17 +12,11 @@ dot:
     neutral: &default bg-gray-400
     dark: bg-gray-700
     light: bg-gray-200
-    red: bg-red-400
-    blue: bg-blue-400
-    green: bg-green-400
-    yellow: bg-yellow-400
-    indigo: bg-indigo-400
-    purple: bg-purple-400
-    pink: bg-pink-400
-    info: bg-blue-700
-    success: bg-green-700
-    error: bg-red-700
-    warning: bg-yellow-700
+    primary: bg-primary-400
+    info: bg-info-700
+    success: bg-success-700
+    danger: bg-danger-700
+    warning: bg-warning-700
     default: *default
 dot/animation:
   base: absolute animate-ping opacity-75 w-full h-full

data/app/components/fox_tail/drawer_component.rb

@@ -19,7 +19,7 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
 
         if use_stimulus?
           options[:data][:action] = stimulus_merger.merge_actions options[:data][:action],
-                                                                  stimulus_controller.action(:hide)
+            stimulus_controller.action(:hide)
         end
 
         content_tag :button, options do
@@ -48,8 +48,8 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
     super
 
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         open? ? visible_classes : hidden_classes,
-                                         html_class
+      open? ? visible_classes : hidden_classes,
+      html_class
 
     html_attributes[:tab_index] ||= -1
     html_attributes[:aria] ||= {}
@@ -104,7 +104,7 @@ class FoxTail::DrawerComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:backdrop)] = options[:backdrop]
       attributes[:data][value_key(:body_scrolling)] = options[:body_scrolling]
       attributes[:data][value_key(:open)] = options[:open]

data/app/components/fox_tail/drawer_trigger_component.rb

@@ -7,13 +7,13 @@ class FoxTail::DrawerTriggerComponent < FoxTail::TriggerBaseComponent
     super
 
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         theme.apply("root/#{open? ? :open : :close}", self),
-                                         html_class
+      theme.apply("root/#{open? ? :open : :close}", self),
+      html_class
   end
 
   def stimulus_controller_options
     super.merge open_classes: theme.apply("root/open", self),
-                closed_classes: theme.apply("root/closed", self)
+      closed_classes: theme.apply("root/closed", self)
   end
 
   class StimulusController < FoxTail::StimulusController
@@ -22,7 +22,7 @@ class FoxTail::DrawerTriggerComponent < FoxTail::TriggerBaseComponent
     end
 
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][outlet_key(drawer_identifier)] = options[:selector]
       attributes[:data][classes_key(:open)] = options[:open_classes]
       attributes[:data][classes_key(:closed)] = options[:closed_classes]

data/app/components/fox_tail/dropdown/checkbox_item_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class FoxTail::Dropdown::CheckboxItemComponent < FoxTail::Dropdown::InputItemComponent
+  include_options_from FoxTail::CheckboxComponent
+
+  def id
+    options[:id] ||= multiple? ? tag_id_for_value(checked_value) : tag_id
+  end
+
+  def input_classes
+    classnames super, theme.apply(:checkbox, self)
+  end
+
+  def input_content
+    render FoxTail::CheckboxComponent.new(options.merge(class: input_classes))
+  end
+end

data/app/components/fox_tail/dropdown/input_item_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+class FoxTail::Dropdown::InputItemComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+
+  has_option :id
+  has_option :name
+  has_option :value
+
+  def id
+    options[:id] ||= tag_id
+  end
+
+  def name
+    options[:name] ||= tag_name
+  end
+
+  def value
+    options[:value] ||= value_from_object
+  end
+
+  def before_render
+    super
+
+    html_attributes[:id] = "#{id}_menu_item" if id.present?
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
+  end
+
+  def call
+    content_tag :div, html_attributes do
+      concat content_tag(:div, input_content, class: input_container_classes)
+      concat content_tag(:div, label_content, class: label_container_classes)
+    end
+  end
+
+  def input_container_classes
+    theme.apply :input_container, self
+  end
+
+  def label_container_classes
+    theme.apply :label_container, self
+  end
+
+  def input_classes
+    theme.apply :input, self
+  end
+
+  def label_classes
+    theme.apply :label, self
+  end
+
+  def input_content
+    raise NotImplementedError
+  end
+
+  def label_content
+    label_tag id, content, class: label_classes
+  end
+end