fox_tail 0.1.1 → 0.2.0

data/app/components/fox_tail/modal_controller.ts

@@ -45,6 +45,7 @@ export default class ModalController extends Controller {
 
     private _open = false;
     private _visible = false;
+    private _preventClose = false;
     private _attachKeyboard = () => {};
     private _detachKeyboard = () => {};
     private _attachClickOutside = () => {};
@@ -64,6 +65,10 @@ export default class ModalController extends Controller {
         return modals.peak() === this;
     }
 
+    get canClose(): boolean {
+        return this._open && !this._preventClose;
+    }
+
     connect() {
         super.connect();
 
@@ -108,6 +113,14 @@ export default class ModalController extends Controller {
         }
     }
 
+    preventClose() {
+        this._preventClose = true;
+    }
+
+    allowClose() {
+        this._preventClose = false;
+    }
+
     show(): void {
         if (this._open || this.onShow()) {
             return;
@@ -121,7 +134,7 @@ export default class ModalController extends Controller {
     }
 
     hide(): void {
-        if (!this._open || this.onHide()) {
+        if (!this.canClose || this.onHide()) {
             return;
         }
 

data/app/components/fox_tail/modal_trigger_component.rb

@@ -7,8 +7,8 @@ class FoxTail::ModalTriggerComponent < FoxTail::TriggerBaseComponent
     end
 
     def attributes(options = {})
-      attributes = super options
-      attributes[:data][outlet_key(self.modal_identifier)] = options[:selector]
+      attributes = super
+      attributes[:data][outlet_key(modal_identifier)] = options[:selector]
       attributes[:data][:action] = action options.fetch(:action, :show), event: options.fetch(:trigger_type, :click)
       attributes
     end

data/app/components/fox_tail/pagination/action_component.rb

@@ -22,12 +22,13 @@ class FoxTail::Pagination::ActionComponent < FoxTail::ClickableComponent
         options[:class] = classnames theme.apply(:visual, self), options[:class]
         image_tag source, options
       }
-    },
+    }
   }
 
   has_option :action
   has_option :size
   has_option :show_label, type: :boolean, default: true
+  has_option :icon
 
   def left?
     %i[first previous].include? action
@@ -37,6 +38,12 @@ class FoxTail::Pagination::ActionComponent < FoxTail::ClickableComponent
     !left?
   end
 
+  def before_render
+    super
+
+    with_icon icon if !visual? && icon?
+  end
+
   def call
     super do
       concat visual if visual? && left?

data/app/components/fox_tail/pagination_component.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
 class FoxTail::PaginationComponent < FoxTail::BaseComponent
-  attr_reader :url, :current_page, :total_pages
+  attr_reader :current_page, :total_pages
 
   renders_one :first_button, lambda { |options = {}|
+    options = action_options options
     options[:action] = :first
-    options[:size] = size
     options[:disabled] = first_page?
-    options[:theme] = theme.theme :action
     options[:url] = page_url first_page
+    options[:icon] = :chevron_double_left if show_icon? && options[:icon].blank?
     FoxTail::Pagination::ActionComponent.new options
   }
 
   renders_one :previous_button, lambda { |options = {}|
+    options = action_options options
     options[:action] = :previous
-    options[:size] = size
     options[:disabled] = !previous_page?
-    options[:theme] = theme.theme :action
     options[:url] = page_url previous_page
+    options[:icon] = :chevron_left if show_icon? && options[:icon].blank?
     FoxTail::Pagination::ActionComponent.new options
   }
 
   renders_one :next_button, lambda { |options = {}|
+    options = action_options options
     options[:action] = :next
-    options[:size] = size
     options[:disabled] = !next_page?
-    options[:theme] = theme.theme :action
     options[:url] = page_url next_page
+    options[:icon] = :chevron_right if show_icon? && options[:icon].blank?
     FoxTail::Pagination::ActionComponent.new options
   }
 
   renders_one :last_button, lambda { |options = {}|
+    options = action_options options
     options[:action] = :last
-    options[:size] = size
     options[:disabled] = last_page?
-    options[:theme] = theme.theme :action
     options[:url] = page_url last_page
+    options[:icon] = :chevron_double_right if show_icon? && options[:icon].blank?
     FoxTail::Pagination::ActionComponent.new options
   }
 
@@ -52,6 +52,14 @@ class FoxTail::PaginationComponent < FoxTail::BaseComponent
     @total_pages = total_pages
   end
 
+  def show_label?
+    %i[text with_icons].include? variant.to_sym
+  end
+
+  def show_icon?
+    %i[with_icons icons].include? variant.to_sym
+  end
+
   def url
     return options[:url] if options.key? :url
 
@@ -95,10 +103,10 @@ class FoxTail::PaginationComponent < FoxTail::BaseComponent
     left_padding = [current_page + padding, last_page].min - current_page
 
     start_page = if right_padding <= left_padding
-                   current_page - right_padding
-                 else
-                   [current_page - (right_padding + (padding - left_padding)), 1].max
-                 end
+      current_page - right_padding
+    else
+      [current_page - (right_padding + (padding - left_padding)), 1].max
+    end
 
     end_page = [last_page, start_page + (padding * 2)].min
 
@@ -128,4 +136,14 @@ class FoxTail::PaginationComponent < FoxTail::BaseComponent
     with_previous_button unless previous_button?
     with_next_button unless next_button?
   end
+
+  private
+
+  def action_options(options)
+    options = options.dup
+    options[:size] = size
+    options[:theme] = theme.theme :action
+    options[:show_label] = show_label? unless options.key? :show_label
+    options
+  end
 end

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

@@ -27,10 +27,10 @@ page:
     base: !concat [*item_base, " px-4"]
     current_page?:
       false: text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800
-      true: text-blue-600 dark:text-white bg-blue-50 dark:bg-gray-700
+      true: text-primary-600 dark:text-white bg-primary-50 dark:bg-gray-700
   root/active:
     current_page?:
-      true: hover:text-blue-700 hover:bg-blue-100
+      true: hover:text-primary-700 hover:bg-primary-100
       false: hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white
 ellipse:
   base: !concat [*item_base, " px-3 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800"]

data/app/components/fox_tail/password_input_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class FoxTail::PasswordInputComponent < FoxTail::InputComponent
+  include FoxTail::Concerns::HasStimulusController
+
+  has_option :controlled, type: :boolean, default: false
+
+  def use_stimulus?
+    super && controlled?
+  end
+
+  def stimulus_controller_options
+    {}
+  end
+
+  def before_render
+    super
+
+    html_attributes[:type] = :password
+    html_attributes[:spellcheck] = false unless html_attributes.key? :spellcheck
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
+end

data/app/components/fox_tail/password_input_controller.ts

@@ -0,0 +1,61 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller<HTMLInputElement> {
+    private _visible: boolean = false;
+
+    get isVisible(): boolean {
+        return this._visible;
+    }
+
+    connect() {
+        super.connect();
+
+        this.element.setAttribute('type', 'password');
+    }
+
+    show() {
+        if (this._visible || this.onShow()) {
+            return;
+        }
+
+        this.element.type = 'text';
+        this.element.focus();
+        this._visible = true;
+        this.onShown();
+    }
+
+    hide() {
+        if (!this._visible || this.onHide()) {
+            return;
+        }
+
+        this.element.type = 'password';
+        this.element.focus();
+        this._visible = false;
+        this.onHidden();
+    }
+
+    toggle() {
+        if (this._visible) {
+            this.hide();
+        } else {
+            this.show();
+        }
+    }
+
+    onShow(): boolean {
+        return this.dispatch('show', { cancelable: true }).defaultPrevented;
+    }
+
+    onShown() {
+        this.dispatch('shown', { cancelable: false });
+    }
+
+    onHide(): boolean {
+        return this.dispatch('hide', { cancelable: true }).defaultPrevented;
+    }
+
+    onHidden() {
+        this.dispatch('hidden', { cancelable: false });
+    }
+}

data/app/components/fox_tail/password_input_trigger_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class FoxTail::PasswordInputTriggerComponent < FoxTail::TriggerBaseComponent
+  def before_render
+    super
+
+    html_attributes[:class] = classnames theme.apply("root/hidden", self), html_class
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:controls] = selector.gsub(/^[#|.]/, "")
+    html_attributes[:aria][:expanded] = false
+  end
+
+  def stimulus_controller_options
+    super.merge hidden_classes: theme.apply("root/hidden", self),
+      visible_classes: theme.apply("root/visible", self)
+  end
+
+  class StimulusController < FoxTail::StimulusController
+    def password_input_identifier
+      FoxTail::PasswordInputComponent.stimulus_controller_identifier
+    end
+
+    def attributes(options = {})
+      attributes = super
+      attributes[:data][outlet_key(password_input_identifier)] = options[:selector]
+      attributes[:data][classes_key(:hidden)] = options[:hidden_classes]
+      attributes[:data][classes_key(:visible)] = options[:visible_classes]
+      attributes[:data][:action] = action(:toggle)
+      attributes
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+root/visible:
+  base: password-visible
+root/hidden:
+  base: password-hidden

data/app/components/fox_tail/password_input_trigger_controller.ts

@@ -0,0 +1,77 @@
+import { Controller } from '@hotwired/stimulus';
+import PasswordInputController from './password_input_controller';
+import useForwardedEventListener from '../../../src/mixins/use_forwarded_event_listener';
+
+export default class extends Controller {
+    static classes = ['hidden', 'visible'];
+    static outlets = ['fox-tail--password-input'];
+
+    declare readonly hiddenClasses: string[];
+    declare readonly visibleClasses: string[];
+    declare readonly foxTailPasswordInputOutlet: PasswordInputController;
+    declare readonly foxTailPasswordInputOutletElement: Element;
+
+    private _unsubscribeListener: (() => void) | null = null;
+
+    foxTailPasswordInputOutletConnected(
+        _outlet: PasswordInputController,
+        element: Element,
+    ): void {
+        const [observe, unobserve] = useForwardedEventListener(
+            this,
+            ['show', 'shown', 'hide', 'hidden'],
+            element,
+            this.element,
+            { capture: true, eventPrefix: 'fox-tail--password-input' },
+        );
+
+        this._unsubscribeListener = unobserve;
+        observe();
+
+        this.updateAttributes();
+    }
+
+    foxTailPasswordInputOutletDisconnected() {
+        if (this._unsubscribeListener) {
+            this._unsubscribeListener();
+            this._unsubscribeListener = null;
+        }
+    }
+
+    disconnect() {
+        super.disconnect();
+
+        this.foxTailPasswordInputOutletDisconnected();
+    }
+
+    show() {
+        this.foxTailPasswordInputOutlet.show();
+    }
+
+    hide() {
+        this.foxTailPasswordInputOutlet.hide();
+    }
+
+    toggle() {
+        this.foxTailPasswordInputOutlet.toggle();
+    }
+
+    onForwardEvent(): void {
+        this.updateAttributes();
+    }
+
+    private updateAttributes() {
+        this.element.setAttribute(
+            'aria-expanded',
+            this.foxTailPasswordInputOutlet.isVisible.toString(),
+        );
+
+        if (this.foxTailPasswordInputOutlet.isVisible) {
+            this.element.classList.remove(...this.hiddenClasses);
+            this.element.classList.add(...this.visibleClasses);
+        } else {
+            this.element.classList.remove(...this.visibleClasses);
+            this.element.classList.add(...this.hiddenClasses);
+        }
+    }
+}

data/app/components/fox_tail/popover_component.rb

@@ -1,10 +1,9 @@
 # frozen_string_literal: true
 
 class FoxTail::PopoverComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
-  attr_reader :id
-
   renders_one :header, lambda { |text_or_attributes = {}, attributes = {}, &block|
     attributes = text_or_attributes if block
     attributes[:class] = classnames theme.classname("header.base"), attributes[:class]
@@ -14,7 +13,8 @@ class FoxTail::PopoverComponent < FoxTail::BaseComponent
   renders_one :trigger, lambda { |attributes = {}|
     attributes[:trigger_type] = trigger_type
     attributes[:delay] = delay
-    FoxTail::PopoverTriggerComponent.new trigger_id, "##{id}", attributes
+    attributes[:id] = trigger_id
+    FoxTail::PopoverTriggerComponent.new "##{id}", attributes
   }
 
   has_option :variant, default: :default
@@ -27,9 +27,15 @@ class FoxTail::PopoverComponent < FoxTail::BaseComponent
   has_option :trigger_id
   has_option :trigger_type, default: :hover
 
-  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
@@ -39,7 +45,7 @@ class FoxTail::PopoverComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:role] ||= :tooltip
     html_attributes[:class] = classnames theme.apply(:root, self), theme.apply("root/hidden", self), html_class
     stimulus_controller.merge! html_attributes, stimulus_controller_options if use_stimulus?
@@ -94,7 +100,7 @@ class FoxTail::PopoverComponent < 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]

data/app/components/fox_tail/popover_trigger_component.rb

@@ -3,12 +3,11 @@
 class FoxTail::PopoverTriggerComponent < FoxTail::TriggerBaseComponent
   has_option :delay, default: 300
 
-  def initialize(id, selector, html_attributes = {})
+  def initialize(id_or_selector, selector_or_attributes = {}, html_attributes = {})
     super
-    with_trigger_type :hover unless trigger_type?
+    options[:trigger_type] = :hover unless trigger_type?
   end
 
-
   def stimulus_controller_options
     super.merge delay: delay
   end
@@ -31,7 +30,7 @@ class FoxTail::PopoverTriggerComponent < FoxTail::TriggerBaseComponent
 
     def attributes(options = nil)
       trigger_type = options[:trigger_type]&.to_sym
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:delay)] = options[:delay]
       attributes[:data][outlet_key(popover_identifier)] = options[:selector]
       attributes[:data][:action] = build_actions TRIGGER_TYPES[trigger_type]

data/app/components/fox_tail/progress_bar_component.rb

@@ -36,7 +36,7 @@ class FoxTail::ProgressBarComponent < FoxTail::BaseComponent
   end
 
   def stimulus_controller_options
-    { value: value, update_label: show_label? && !content? }
+    {value: value, update_label: show_label? && !content?}
   end
 
   private
@@ -49,7 +49,7 @@ class FoxTail::ProgressBarComponent < FoxTail::BaseComponent
   end
 
   def bar_attributes
-    attributes = { class: theme.apply(:bar, self), style: "width: #{value}%" }
+    attributes = {class: theme.apply(:bar, self), style: "width: #{value}%"}
     return attributes unless use_stimulus?
 
     attributes[:data] = {}

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

@@ -14,11 +14,9 @@ bar:
     transition transition-[width] ease-linear
   color:
     dark: bg-gray-600 dark:bg-gray-300
-    blue: &blue bg-blue-600 dark:bg-blue-500
-    red: bg-red-600 dark:bg-red-500
-    green: bg-green-600 dark:bg-green-500
-    yellow: bg-yellow-600 dark:bg-yellow-500
-    indigo: bg-indigo-600 dark:bg-indigo-500
-    purple: bg-purple-600 dark:bg-purple-500
-    pink: bg-pink-600 dark:bg-pink-500
-    default: *blue
+    primary: &primary bg-primary-600 dark:bg-primary-500
+    info: bg-info-600 dark:bg-info-500
+    success: bg-success-600 dark:bg-success-500
+    warning: bg-warning-600 dark:bg-warning-500
+    danger: bg-danger-600 dark:bg-danger-500
+    default: *primary

data/app/components/fox_tail/progress_bar_controller.ts

@@ -27,6 +27,10 @@ export default class extends Controller {
         this.updateBar();
     }
 
+    updateDirectUploadProgress(event: CustomEvent) {
+        this.progressValue = event.detail.loaded / event.detail.total;
+    }
+
     private updateAriaAttributes() {
         this.element.setAttribute(
             'aria-valuenow',

data/app/components/fox_tail/proxy_events_controller.ts

@@ -0,0 +1,39 @@
+import { ActionEvent, Controller } from '@hotwired/stimulus';
+
+import proxyEvent from '../../../src/utilities/proxy_event';
+
+export default class extends Controller {
+    static targets = ['listener'];
+
+    static values = {
+        query: String,
+    };
+
+    declare readonly listenerTargets: HTMLElement[];
+    declare readonly hasQueryValue: boolean;
+    declare readonly queryValue: string;
+
+    proxy(event: CustomEvent | ActionEvent) {
+        this.listenerTargets.forEach((target) =>
+            this.proxyEvent(target, event),
+        );
+
+        if (this.hasQueryValue) {
+            document
+                .querySelectorAll(this.queryValue)
+                .forEach((target) => this.proxyEvent(target, event));
+        }
+    }
+
+    private proxyEvent(
+        target: Element,
+        event: CustomEvent | ActionEvent,
+    ): void {
+        this.application.logDebugActivity(this.identifier, 'proxyEvent', {
+            event,
+            listener: target,
+        });
+
+        target.dispatchEvent(proxyEvent(event));
+    }
+}

data/app/components/fox_tail/radio_button_component.rb

@@ -1,17 +1,53 @@
 # frozen_string_literal: true
 
 class FoxTail::RadioButtonComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Formable
+  include FoxTail::Concerns::HasStimulusController
+
   has_option :color, default: :default
   has_option :size, default: :base
+  has_option :value
+  has_option :checked, as: :boolean, default: false
+  has_option :controlled, type: :boolean, default: false
+
+  def value
+    options[:value] ||= value_from_object
+  end
+
+  def checked?
+    return !!options[:checked] if options.key? :checked
+    return false if object.blank?
+
+    value.to_s == value_from_object.to_s
+  end
+
+  def use_stimulus?
+    super && controlled?
+  end
+
+  def stimulus_controller_options
+    {}
+  end
 
   def before_render
     super
 
+    add_default_name_and_id_for_value value
     html_attributes[:type] = :radio
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
+    html_attributes[:value] = value
+    html_attributes[:checked] = checked?
   end
 
   def call
-    tag :input, html_attributes
+    tag.input(html_attributes)
   end
+
+  class << self
+    def stimulus_controller_name
+      "form-field"
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
 end

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

@@ -3,13 +3,11 @@ root:
     bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600
     focus:ring-2 dark:ring-offset-gray-800
   color:
-    blue: &default text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600
-    red: text-red-600 focus:ring-red-500 dark:focus:ring-red-600
-    green: text-green-600 focus:ring-green-500 dark:focus:ring-green-600
-    yellow: text-yellow-600 focus:ring-yellow-500 dark:focus:ring-yellow-600
-    indigo: text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
-    purple: text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600
-    pink: text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600
+    primary: &default text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600
+    info: text-info-600 focus:ring-info-500 dark:focus:ring-info-600
+    success: text-success-600 focus:ring-success-500 dark:focus:ring-success-600
+    warning: text-warning-600 focus:ring-warning-500 dark:focus:ring-warning-600
+    danger: text-danger-600 focus:ring-danger-500 dark:focus:ring-danger-600
     default: *default
   size:
     sm: w-3 h-3

data/app/components/fox_tail/range_component.rb

@@ -22,6 +22,6 @@ class FoxTail::RangeComponent < FoxTail::BaseComponent
   end
 
   def call
-    tag :input, html_attributes
+    tag.input(html_attributes)
   end
 end