fox_tail 0.1.0 → 0.2.0

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

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

@@ -1,9 +1,46 @@
 # frozen_string_literal: true
 
 class FoxTail::Dropdown::MenuComponent < FoxTail::BaseComponent
-  renders_many :items, lambda { |options = {}|
-    options[:theme] = theme.theme :item
-    FoxTail::Dropdown::MenuItemComponent.new options
+  renders_one :header, lambda { |title_or_options = {}, options = {}, &block|
+    if block
+      options = title_or_options
+      title_or_options = capture(&block)
+    end
+
+    options[:class] = classnames theme.apply(:header, self), options[:class]
+
+    content_tag :div, title_or_options, options
+  }
+
+  renders_many :items, types: {
+    item: {
+      as: :item,
+      renders: lambda { |options = {}|
+        options[:theme] = theme.theme :item
+        FoxTail::Dropdown::MenuItemComponent.new options
+      }
+    },
+    checkbox: {
+      as: :checkbox,
+      renders: lambda { |options = {}|
+        options[:theme] = theme.theme :input_item
+        FoxTail::Dropdown::CheckboxItemComponent.new options
+      }
+    },
+    radio: {
+      as: :radio,
+      renders: lambda { |options = {}|
+        options[:theme] = theme.theme :input_item
+        FoxTail::Dropdown::RadioItemComponent.new options
+      }
+    },
+    toggle: {
+      as: :toggle,
+      renders: lambda { |options = {}|
+        options[:theme] = theme.theme :input_item
+        FoxTail::Dropdown::ToggleItemComponent.new options
+      }
+    }
   }
 
   def render?
@@ -17,7 +54,20 @@ class FoxTail::Dropdown::MenuComponent < FoxTail::BaseComponent
   end
 
   def call
-    content_tag :ul, html_attributes do
+    content_tag :div, html_attributes do
+      concat header if header?
+      concat render_list
+    end
+  end
+
+  def objectify_options(options)
+    super.merge name: name, value: value, multiple: multiple?
+  end
+
+  private
+
+  def render_list
+    content_tag :ul, class: theme.apply(:list, self) do
       items.each { |item| concat content_tag(:li, item) }
     end
   end

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

@@ -32,11 +32,21 @@ class FoxTail::Dropdown::MenuItemComponent < FoxTail::ClickableComponent
   }
 
   has_option :color, default: :default
+  has_option :autocomplete_value
+  has_option :autocomplete_text
 
   def visuals?
     left_visual? || right_visual?
   end
 
+  def before_render
+    super
+
+    if self.class.use_stimulus? && options.key?(:autocomplete_value)
+      FoxTail::AutocompleteComponent.append_option_action autocomplete_value, autocomplete_text, html_attributes
+    end
+  end
+
   def call
     super do
       concat left_visual if left_visual?
@@ -48,7 +58,6 @@ class FoxTail::Dropdown::MenuItemComponent < FoxTail::ClickableComponent
   private
 
   def render_icon(icon, options, side)
-    options[:variant] ||= :mini
     options[:"aria-hidden"] = true
     options[:class] = classnames theme.apply(:visual, self, side: side), options[:class]
     FoxTail::IconBaseComponent.new icon, options

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class FoxTail::Dropdown::RadioItemComponent < FoxTail::Dropdown::InputItemComponent
+  include_options_from FoxTail::RadioButtonComponent
+
+  def input_classes
+    classnames super, theme.apply(:radio, self)
+  end
+
+  def input_content
+    render FoxTail::RadioButtonComponent.new(options.merge(class: input_classes))
+  end
+end

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class FoxTail::Dropdown::ToggleItemComponent < FoxTail::Dropdown::InputItemComponent
+  include_options_from FoxTail::ToggleComponent
+
+  def id
+    options[:id] ||= multiple? ? tag_id_for_value(checked_value) : tag_id
+  end
+
+  def call
+    content_tag :div, input_content, html_attributes
+  end
+
+  def input_classes
+    classnames super, theme.apply(:checkbox, self)
+  end
+
+  def input_content
+    render FoxTail::ToggleComponent.new(options.merge(class: input_classes)) do |toggle|
+      toggle.with_label(content) if content?
+    end
+  end
+end

data/app/components/fox_tail/dropdown_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 class FoxTail::DropdownComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
-  attr_reader :id
-
   renders_one :trigger, lambda { |options = {}, &block|
     options[:trigger_type] = trigger_type
     options[:delay] = delay
-    FoxTail::DropdownTriggerComponent.new trigger_id, "##{id}", options, &block
+    options[:id] = trigger_id
+    FoxTail::DropdownTriggerComponent.new "##{id}", options, &block
   }
 
   renders_one :header, lambda { |options = {}, &block|
@@ -21,18 +21,31 @@ class FoxTail::DropdownComponent < FoxTail::BaseComponent
     FoxTail::Dropdown::MenuComponent.new options
   }
 
+  renders_one :footer, lambda { |options = {}, &block|
+    attributes = options.merge class: classnames(theme.apply(:footer, self), options[:class])
+    content_tag :div, attributes, &block
+  }
+
   has_option :divider, default: true, type: :boolean
   has_option :placement, default: "bottom"
   has_option :offset, default: 10
   has_option :shift
   has_option :ignore_click_outside
+  has_option :disable_click_outside, type: :boolean, default: false
   has_option :trigger_id
   has_option :trigger_type, default: :click
   has_option :delay, default: 300
+  has_option :scroll, type: :boolean, default: false
+
+  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
 
-  def initialize(id, html_attributes = {})
     super(html_attributes)
-    @id = id
   end
 
   def trigger_id
@@ -42,10 +55,10 @@ class FoxTail::DropdownComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         theme.apply("root/hidden", self),
-                                         html_class
+      theme.apply("root/hidden", self),
+      html_class
   end
 
   def call
@@ -62,6 +75,7 @@ class FoxTail::DropdownComponent < FoxTail::BaseComponent
       offset: offset,
       shift: shift,
       ignore_click_outside: ignore_click_outside,
+      disable_click_outside: disable_click_outside?,
       hidden_classes: theme.apply("root/hidden", self),
       visible_classes: theme.apply("root/visible", self),
       trigger_type: trigger_type,
@@ -74,6 +88,13 @@ class FoxTail::DropdownComponent < FoxTail::BaseComponent
   def render_dropdown
     content_tag :div, html_attributes do
       concat header if header?
+      concat render_dropdown_body
+      concat footer if footer?
+    end
+  end
+
+  def render_dropdown_body
+    content_tag :div, class: theme.apply(:body, self) do
       menus.each { |menu| concat menu } if menus?
       concat content if content?
     end
@@ -93,11 +114,12 @@ class FoxTail::DropdownComponent < FoxTail::BaseComponent
 
     def attributes(options = {})
       trigger_type = options[:trigger_type]&.to_sym
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:placement)] = options[:placement]
       attributes[:data][value_key(:offset)] = options[:offset]
       attributes[:data][value_key(:shift)] = options[:shift]
       attributes[:data][value_key(:ignore_click_outside)] = options[:ignore_click_outside]
+      attributes[:data][value_key(:disable_click_outside)] = options[:disable_click_outside]
       attributes[:data][outlet_key(trigger_identifier)] = "##{options[:trigger_id]}"
       attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
       attributes[:data][classes_key(:visible)] = options[:visible_classes]

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

@@ -1,42 +1,58 @@
 root:
   base: >-
     absolute z-10 rounded-lg shadow w-48 
+    border border-gray-200 dark:border-gray-600 
     bg-white dark:bg-gray-700 
     focus:outline-none 
     transition-opacity duration-300 ease-in-out
-  divider?: divide-y divide-gray-100 dark:divide-gray-600
+  scroll?: flex flex-col
 root/hidden:
   base: invisible opacity-0
 root/visible:
   base: visible opacity-100
 header:
   base: px-4 py-3 text-sm text-gray-900 dark:text-white
+  divider?: border-b border-gray-200 dark:border-gray-600 rounded-t-lg bg-white dark:bg-gray-700
+  scroll?: grow-1 shrink-0
+footer:
+  base: px-4 py-3 text-sm text-gray-900 dark:text-white
+  divider?: border-t border-gray-200 dark:border-gray-600 rounded-b-lg bg-white dark:bg-gray-700
+  scroll?: grow-1 shrink-0
+body:
+  scroll?: overflow-y-auto flex-1
+  divider?: divide-y divide-gray-200 dark:divide-gray-600
 menu:
   root:
     base: py-2 text-sm text-gray-700 dark:text-gray-200
+  header:
+    base: font-semibold py-2 px-3
   item:
     root:
-      base: flex items-center justify-start w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600
+      base: flex items-center justify-start text-left w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600
       visuals?: flex items-center gap-2
       color:
         neutral: &default text-gray-700 dark:text-gray-200 dark:hover:text-white
         dark: text-gray-800 dark:text-gray-700
         light: text-gray-300 dark:text-gray-500
-        blue: text-blue-600 dark:text-blue-500
-        red: text-red-600 dark:text-red-500
-        green: text-green-600 dark:text-green-500
-        yellow: text-yellow-600 dark:text-yellow-500
-        indigo: text-indigo-600 dark:text-indigo-500
-        purple: text-purple-600 dark:text-purple-500
-        pink: text-pink-600 dark:text-pink-500
-        info: text-blue-800 dark:text-blue-700
-        error: text-red-800 dark:text-red-700
-        warning: text-yellow-800 dark:text-yellow-700
-        success: text-green-800 dark:text-green-700
+        primary: text-primary-600 dark:text-primary-500
+        info: text-info-800 dark:text-info-700
+        danger: text-danger-800 dark:text-danger-700
+        warning: text-warning-800 dark:text-warning-700
+        success: text-success-800 dark:text-success-700
         default: *default
     root/disabled:
       base: opacity-50
     visual:
-      base: w-2.5 h-2.5
+      base: w-2.5 h-2.5 shrink-0
       side:
+        start: w-3.5 h-3.5
         end: ml-auto
+  input_item:
+    root:
+      base: flex gap-2 w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600
+    input_container:
+      base: flex items-start mt-0.5 shrink-0 grow-1
+    label_container:
+      base: flex-1 flex-nowrap
+    label:
+      base: block w-full

data/app/components/fox_tail/dropdown_controller.ts

@@ -23,6 +23,10 @@ export default class extends Controller {
             default: 10,
         },
         ignoreClickOutside: String,
+        disableClickOutside: {
+            type: Boolean,
+            default: false,
+        },
         delay: {
             type: Number,
             default: 300,
@@ -35,6 +39,7 @@ export default class extends Controller {
     declare readonly offsetValue: number;
     declare readonly hasIgnoreClickOutside: boolean;
     declare readonly ignoreClickOutsideValue: string;
+    declare readonly disableClickOutsideValue: boolean;
     declare readonly delayValue: number;
     declare readonly visibleClasses: string[];
     declare readonly hiddenClasses: string[];
@@ -66,8 +71,12 @@ export default class extends Controller {
             ],
         });
 
-        [this.observeClickOutside, this.unobserveClickOutside] =
+        const [observeClickOutside, unobserveClickOutside] =
             useClickOutside(this);
+
+        this.observeClickOutside = () =>
+            !this.disableClickOutsideValue && observeClickOutside();
+        this.unobserveClickOutside = unobserveClickOutside;
     }
 
     show(): void {

data/app/components/fox_tail/dropdown_trigger_component.rb

@@ -8,14 +8,14 @@ class FoxTail::DropdownTriggerComponent < 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 delay: delay,
-                open_classes: theme.apply("root/open", self),
-                closed_classes: theme.apply("root/closed", self)
+      open_classes: theme.apply("root/open", self),
+      closed_classes: theme.apply("root/closed", self)
   end
 
   class StimulusController < FoxTail::StimulusController
@@ -36,7 +36,7 @@ class FoxTail::DropdownTriggerComponent < FoxTail::TriggerBaseComponent
 
     def attributes(options = {})
       trigger_type = options[:trigger_type]&.to_sym
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:delay)] = options[:delay]
       attributes[:data][outlet_key(dropdown_identifier)] = options[:selector]
       attributes[:data][classes_key(:open)] = options[:open_classes]

data/app/components/fox_tail/dropzone_component.rb

@@ -1,6 +1,9 @@
 # frozen_string_literal: true
 
 class FoxTail::DropzoneComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+  include FoxTail::Concerns::HasStimulusController
+
   DEFAULT_ICON = "cloud-arrow-up"
 
   renders_one :icon, lambda { |icon, attributes = {}|
@@ -13,7 +16,7 @@ class FoxTail::DropzoneComponent < FoxTail::BaseComponent
 
     if block
       attributes = text_or_attributes
-      text_or_attributes = capture &block
+      text_or_attributes = capture(&block)
     end
 
     content_tag :p, text_or_attributes, attributes
@@ -24,11 +27,22 @@ class FoxTail::DropzoneComponent < FoxTail::BaseComponent
     content_tag :p, text, attributes
   }
 
+  def use_stimulus?
+    super && controlled?
+  end
+
+  def stimulus_controller_options
+    {}
+  end
+
   def before_render
     super
 
     with_icon DEFAULT_ICON, variant: :outline unless icon?
     with_title I18n.t("components.fox_tail.dropzone.title_html").html_safe unless title?
+
+    add_default_name_and_id
+
     html_attributes[:type] = :file
     html_attributes[:class] = theme.apply(:root, self)
   end
@@ -36,10 +50,18 @@ class FoxTail::DropzoneComponent < FoxTail::BaseComponent
   private
 
   def outer_container_attributes
-    { class: classnames(theme.apply(:outer_container, self), html_class) }
+    {class: classnames(theme.apply(:outer_container, self), html_class)}
   end
 
   def inner_container_attributes
-    { class: theme.apply(:inner_container, self) }
+    {class: theme.apply(:inner_container, self)}
   end
+
+  class << self
+    def stimulus_controller_name
+      "form-field"
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
 end

data/app/components/fox_tail/f_a_b/item_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class FoxTail::FAB::ItemComponent < FoxTail::IconButtonComponent
-  DEFAULT_OPTIONS = { color: :light, variant: :solid }.freeze
+  DEFAULT_OPTIONS = {color: :light, variant: :solid}.freeze
 
   has_option :placement, default: :top
   has_option :label_placement, default: :left
@@ -14,7 +14,7 @@ class FoxTail::FAB::ItemComponent < FoxTail::IconButtonComponent
       html_attributes.reverse_merge! DEFAULT_OPTIONS
     end
 
-    super icon_or_attributes, html_attributes
+    super
   end
 
   def before_render

data/app/components/fox_tail/f_a_b_component.rb

@@ -27,7 +27,7 @@ class FoxTail::FABComponent < FoxTail::BaseComponent
   has_option :trigger_type, default: :hover
 
   def initialize(html_attributes = {})
-    super(html_attributes)
+    super
 
     html_attributes[:id] ||= :"fab_#{SecureRandom.hex(4)}"
     options[:item_placement] = calculate_item_placement if item_placement == :auto
@@ -48,9 +48,9 @@ class FoxTail::FABComponent < FoxTail::BaseComponent
     with_icon "plus" unless icon?
 
     html_attributes[:class] = classnames theme.apply(:root, self),
-                                         placement.is_a?(String) && placement,
-                                         theme.apply("root/hidden", self),
-                                         html_class
+      placement.is_a?(String) && placement,
+      theme.apply("root/hidden", self),
+      html_class
   end
 
   def call
@@ -65,7 +65,7 @@ class FoxTail::FABComponent < FoxTail::BaseComponent
     {
       trigger_type: trigger_type,
       visible_classes: theme.apply("root/visible", self),
-      hidden_classes: theme.apply("root/hidden", self),
+      hidden_classes: theme.apply("root/hidden", self)
     }
   end
 
@@ -81,10 +81,10 @@ class FoxTail::FABComponent < FoxTail::BaseComponent
 
   def merge_item_options(options)
     options.merge label_style: label_style,
-                  pill: rounded?,
-                  placement: placement,
-                  label_placement: label_placement,
-                  theme: theme.theme(:item)
+      pill: rounded?,
+      placement: placement,
+      label_placement: label_placement,
+      theme: theme.theme(:item)
   end
 
   def calculate_item_placement
@@ -104,7 +104,7 @@ class FoxTail::FABComponent < FoxTail::BaseComponent
   end
 
   def render_items
-    attributes = { }
+    attributes = {}
     attributes[:class] = classnames theme.apply(:menu, self)
     attributes[:data] = {}
     attributes[:data][stimulus_controller.target_key] = :menu if use_stimulus?
@@ -122,7 +122,7 @@ class FoxTail::FABComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:trigger_type)] = options[:trigger_type]
       attributes[:data][classes_key(:visible)] = options[:visible_classes]
       attributes[:data][classes_key(:hidden)] = options[:hidden_classes]

data/app/components/fox_tail/file_input_component.rb

@@ -9,7 +9,7 @@ class FoxTail::FileInputComponent < FoxTail::InputBaseComponent
   end
 
   def call
-    tag :input, html_attributes
+    tag.input(html_attributes)
   end
 
   protected

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

@@ -5,7 +5,7 @@ root:
     placeholder-gray-600 dark:placeholder-gray-400
     bg-gray-50 dark:bg-gray-700
     rounded-lg border border-gray-300 dark:border-gray-600
-    focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500
+    focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500
   size:
     sm: text-xs
     base: text-sm

data/app/components/fox_tail/filter_bar_component.en.yml

@@ -0,0 +1,4 @@
+en:
+  submit: Go
+  filter_toggle: Filters
+  collapse: Filters

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

@@ -0,0 +1,26 @@
+<%= form_tag url, html_attributes do %>
+  <% hidden_fields.each do |input| %>
+    <%= input %>
+  <% end %>
+  <% if static_filters? %>
+    <%= content_tag :div, class: theme.apply(:static_filters, self) do %>
+      <% static_filters.each do |filter| %>
+        <%= filter %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= content_tag :div, class: theme.apply(:controls, self) do %>
+    <%= content if content? %>
+    <%= filter_toggle if filters? %>
+    <% submit_buttons.each do |submit_button| %>
+      <%= submit_button %>
+    <% end %>
+  <% end %>
+  <% if filters? %>
+    <%= render FoxTail::CollapsibleComponent.new(id: collapsible_id, class: theme.apply(:filters, self)) do %>
+      <% filters.each do |filter| %>
+        <%= filter %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>