fluxbit_view_components 0.4.3 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98187d5ac8174cfe0b38638e43b70e8076ec32068cab920e5829105e0e903f6a
-  data.tar.gz: 1e7c9b50861f506bb56407ecdd008988a96c9b8d3f79f75e43fbae7f2642c989
+  metadata.gz: 6f66b9f23ca4ef3e2fe559a212875eda72091ec0e44473efdeade01655b01ddf
+  data.tar.gz: 5d17abad070b64489453dde8cc700f3c464d4b97d60f0cb8aab4aa0137013385
 SHA512:
-  metadata.gz: 426024fbf92e4dd34587a9f14057a541e5f00cb501578026c940ffcc98739398cded786b733c36aa0d1d4de2292ce56b7700e9b93d630c4b15a9e58f9098a1e6
-  data.tar.gz: 688a8bec19c6def98088f4e59dc8bd96f46c7fc7818612e799bb77f2f44ebced4dc2055d77b7afcad78b6bbd1b5e0d9c16859fcf4ba62866ff472a15955f4c63
+  metadata.gz: 0f893f775299b24f11ebc2c8120099c13999f525502d314d9ad87709a02fbbf6dd194bede20193e0cf5a5a7bd53b2b9e58d1298113df77f3ee7b958988c81bfd
+  data.tar.gz: 802ffce4186aa7fe55a32c56b904e084b4c346b6e50a5891bab9683eaa636cde5654b97e0c9b4502e30ad20e4d21b4bdcb2e68260cd66fd9d1aad72a7fd1ea73

data/app/assets/javascripts/fluxbit_view_components/index.js

@@ -8,6 +8,7 @@ import FxProgress from './progress_controller'
 import FxRowClick from './row_click_controller'
 import FxSelectAll from './select_all_controller'
 import FxSpinnerPercent from './spinner_percent_controller'
+import FxTelephone from './telephone_controller'
 import FxThemeButton from './theme_button_controller'
 
 export {
@@ -21,6 +22,7 @@ export {
   FxRowClick,
   FxSelectAll,
   FxSpinnerPercent,
+  FxTelephone,
   FxThemeButton
 }
 
@@ -35,6 +37,7 @@ export function registerFluxbitControllers(application) {
   application.register('fx-row-click', FxRowClick)
   application.register('fx-select-all', FxSelectAll)
   application.register('fx-spinner-percent', FxSpinnerPercent)
+  application.register('fx-telephone', FxTelephone)
   application.register('fx-theme-button', FxThemeButton)
 
   // Make controllers globally accessible for vanilla JS
@@ -50,6 +53,7 @@ export function registerFluxbitControllers(application) {
       FxRowClick,
       FxSelectAll,
       FxSpinnerPercent,
+      FxTelephone,
       FxThemeButton
     }
   }

data/app/assets/javascripts/fluxbit_view_components/telephone_controller.js

@@ -0,0 +1,98 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["countrySelect"]
+  static values = {
+    mask: { type: String, default: "(##) #####-####" }
+  }
+
+  connect() {
+    this.input = this.element.querySelector('input[type="tel"]')
+    if (this.input) {
+      this.input.addEventListener('input', this.applyMask.bind(this))
+      this.input.addEventListener('keydown', this.handleBackspace.bind(this))
+
+      // Apply mask to existing value on load
+      if (this.input.value) {
+        this.applyMask({ target: this.input })
+      }
+    }
+  }
+
+  disconnect() {
+    if (this.input) {
+      this.input.removeEventListener('input', this.applyMask.bind(this))
+      this.input.removeEventListener('keydown', this.handleBackspace.bind(this))
+    }
+  }
+
+  updateMask(event) {
+    const selectedOption = event.target.options[event.target.selectedIndex]
+    const newMask = selectedOption.dataset.mask
+
+    if (newMask) {
+      this.maskValue = newMask
+      // Clear the current value and reapply mask
+      const currentValue = this.input.value
+      this.input.value = ''
+      this.input.value = this.getCleanValue(currentValue)
+      this.applyMask({ target: this.input })
+    }
+  }
+
+  handleBackspace(event) {
+    if (event.key === 'Backspace' || event.keyCode === 8) {
+      const cursorPosition = this.input.selectionStart
+      const value = this.input.value
+
+      // Check if the character before cursor is a mask character
+      if (cursorPosition > 0) {
+        const charBefore = value.charAt(cursorPosition - 1)
+        if (this.isMaskCharacter(charBefore)) {
+          event.preventDefault()
+          // Find the previous digit and remove it
+          let newPosition = cursorPosition - 1
+          while (newPosition > 0 && this.isMaskCharacter(value.charAt(newPosition))) {
+            newPosition--
+          }
+
+          if (newPosition >= 0) {
+            const cleanValue = this.getCleanValue(value.substring(0, newPosition) + value.substring(cursorPosition))
+            this.input.value = cleanValue
+            this.applyMask({ target: this.input })
+            this.input.setSelectionRange(newPosition, newPosition)
+          }
+        }
+      }
+    }
+  }
+
+  applyMask(event) {
+    const input = event.target
+    let value = this.getCleanValue(input.value)
+    let maskedValue = ''
+    let valueIndex = 0
+
+    for (let i = 0; i < this.maskValue.length && valueIndex < value.length; i++) {
+      const maskChar = this.maskValue.charAt(i)
+
+      if (maskChar === '#') {
+        maskedValue += value.charAt(valueIndex)
+        valueIndex++
+      } else {
+        maskedValue += maskChar
+      }
+    }
+
+    input.value = maskedValue
+  }
+
+  getCleanValue(value) {
+    // Remove all non-numeric characters
+    return value.replace(/\D/g, '')
+  }
+
+  isMaskCharacter(char) {
+    return /[\s\-\(\)\/\.]/.test(char)
+  }
+}

data/app/assets/javascripts/fluxbit_view_components.js

@@ -1067,6 +1067,93 @@ class FxSpinnerPercent extends Controller {
   }
 }
 
+class FxTelephone extends Controller {
+  static targets=[ "countrySelect" ];
+  static values={
+    mask: {
+      type: String,
+      default: "(##) #####-####"
+    }
+  };
+  connect() {
+    this.input = this.element.querySelector('input[type="tel"]');
+    if (this.input) {
+      this.input.addEventListener("input", this.applyMask.bind(this));
+      this.input.addEventListener("keydown", this.handleBackspace.bind(this));
+      if (this.input.value) {
+        this.applyMask({
+          target: this.input
+        });
+      }
+    }
+  }
+  disconnect() {
+    if (this.input) {
+      this.input.removeEventListener("input", this.applyMask.bind(this));
+      this.input.removeEventListener("keydown", this.handleBackspace.bind(this));
+    }
+  }
+  updateMask(event) {
+    const selectedOption = event.target.options[event.target.selectedIndex];
+    const newMask = selectedOption.dataset.mask;
+    if (newMask) {
+      this.maskValue = newMask;
+      const currentValue = this.input.value;
+      this.input.value = "";
+      this.input.value = this.getCleanValue(currentValue);
+      this.applyMask({
+        target: this.input
+      });
+    }
+  }
+  handleBackspace(event) {
+    if (event.key === "Backspace" || event.keyCode === 8) {
+      const cursorPosition = this.input.selectionStart;
+      const value = this.input.value;
+      if (cursorPosition > 0) {
+        const charBefore = value.charAt(cursorPosition - 1);
+        if (this.isMaskCharacter(charBefore)) {
+          event.preventDefault();
+          let newPosition = cursorPosition - 1;
+          while (newPosition > 0 && this.isMaskCharacter(value.charAt(newPosition))) {
+            newPosition--;
+          }
+          if (newPosition >= 0) {
+            const cleanValue = this.getCleanValue(value.substring(0, newPosition) + value.substring(cursorPosition));
+            this.input.value = cleanValue;
+            this.applyMask({
+              target: this.input
+            });
+            this.input.setSelectionRange(newPosition, newPosition);
+          }
+        }
+      }
+    }
+  }
+  applyMask(event) {
+    const input = event.target;
+    let value = this.getCleanValue(input.value);
+    let maskedValue = "";
+    let valueIndex = 0;
+    for (let i = 0; i < this.maskValue.length && valueIndex < value.length; i++) {
+      const maskChar = this.maskValue.charAt(i);
+      if (maskChar === "#") {
+        maskedValue += value.charAt(valueIndex);
+        valueIndex++;
+      } else {
+        maskedValue += maskChar;
+      }
+    }
+    input.value = maskedValue;
+  }
+  getCleanValue(value) {
+    return value.replace(/\D/g, "");
+  }
+  isMaskCharacter(char) {
+    return /[\s\-\(\)\/\.]/.test(char);
+  }
+}
+
 class FxThemeButton extends Controller {
   static targets=[ "lightIcon", "darkIcon", "systemIcon" ];
   static values={
@@ -1154,6 +1241,7 @@ function registerFluxbitControllers(application) {
   application.register("fx-row-click", FxRowClick);
   application.register("fx-select-all", FxSelectAll);
   application.register("fx-spinner-percent", FxSpinnerPercent);
+  application.register("fx-telephone", FxTelephone);
   application.register("fx-theme-button", FxThemeButton);
   if (typeof window !== "undefined") {
     window.FluxbitControllers = {
@@ -1167,9 +1255,10 @@ function registerFluxbitControllers(application) {
       FxRowClick: FxRowClick,
       FxSelectAll: FxSelectAll,
       FxSpinnerPercent: FxSpinnerPercent,
+      FxTelephone: FxTelephone,
       FxThemeButton: FxThemeButton
     };
   }
 }
 
-export { FxAssigner, FxAutoSubmit, FxDrawer, FxMethodLink, FxModal, FxPassword, FxProgress, FxRowClick, FxSelectAll, FxSpinnerPercent, FxThemeButton, registerFluxbitControllers };
+export { FxAssigner, FxAutoSubmit, FxDrawer, FxMethodLink, FxModal, FxPassword, FxProgress, FxRowClick, FxSelectAll, FxSpinnerPercent, FxTelephone, FxThemeButton, registerFluxbitControllers };

data/app/components/fluxbit/form/telephone_component.rb

@@ -0,0 +1,197 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::TelephoneComponent` is a telephone input component that extends `Fluxbit::Form::TextFieldComponent`.
+# It provides a styled telephone input with an integrated country code selector showing country flags and dialing codes.
+# The input includes automatic masking for phone numbers.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::TelephoneComponent.new(name: :phone)
+#
+# @example With default country
+#   = render Fluxbit::Form::TelephoneComponent.new(name: :phone, default_country: "BR")
+#
+class Fluxbit::Form::TelephoneComponent < Fluxbit::Form::TextFieldComponent
+  include Fluxbit::Config::Form::TelephoneComponent
+
+  # Initializes the telephone component with the given properties.
+  #
+  # @param default_country [String] The default country code (ISO 3166-1 alpha-2, e.g., "BR", "US")
+  # @param country_field_name [String] Name for the hidden country code field (optional, deprecated in favor of :country)
+  # @param country [Symbol] Attribute name for the country field when using form builder (e.g., :phone_country)
+  # @param ... all other parameters from TextFieldComponent
+  def initialize(**props)
+    @default_country = props.delete(:default_country) || @@default_country
+    @country_field_name = props.delete(:country_field_name)
+    @country_attribute = props.delete(:country)
+
+    # Set default sizing from config if not specified
+    props[:sizing] = @@default_sizing unless props.key?(:sizing)
+
+    # Force type to tel
+    props[:type] = :tel
+
+    super(**props)
+
+    # Override the input classes to match our custom sizing
+    override_input_sizing
+  end
+
+  def call
+    content_tag :div, **@wrapper_html do
+      safe_join [
+        label,
+        telephone_input_container,
+        help_text
+      ]
+    end
+  end
+
+  private
+
+  def override_input_sizing
+    # Remove the original size classes
+    current_classes = @props[:class].to_s
+
+    # Get size class from config
+    size_index = [@sizing, 0].max
+    size_index = [size_index, @@telephone_styles[:input][:sizes].length - 1].min
+    custom_size_class = @@telephone_styles[:input][:sizes][size_index]
+
+    # Remove the old size class and add our custom one
+    # First remove common padding/text classes that might conflict
+    current_classes = current_classes.gsub(/\bp-[\d.]+\b/, "")
+                                    .gsub(/\btext-(xs|sm|base|md|lg|xl)\b/, "")
+                                    .gsub(/\brounded-lg\b/, "")
+                                    .strip
+
+    @props[:class] = "#{current_classes} #{custom_size_class}".strip
+  end
+
+  def current_country
+    @@telephone_countries.find { |c| c[:code] == @default_country } || @@telephone_countries.first
+  end
+
+  def country_select
+    content_tag :div, class: "relative flex-shrink-0" do
+      if @form.present? && @country_attribute.present?
+        # Use form builder's select to get proper name attribute
+        @form.select(
+          @country_attribute,
+          options_for_select(
+            @@telephone_countries.map { |c| [ "#{c[:flag]} #{c[:dial_code]}", c[:code], { "data-dial-code": c[:dial_code], "data-mask": c[:mask] } ] },
+            country_select_value
+          ),
+          {},
+          {
+            id: country_select_id,
+            class: country_select_classes,
+            data: {
+              fx_telephone_target: "countrySelect",
+              action: "change->fx-telephone#updateMask"
+            }
+          }
+        )
+      else
+        # Standalone select (no form builder)
+        select_tag(
+          country_select_name,
+          country_options_html,
+          id: country_select_id,
+          class: country_select_classes,
+          data: {
+            fx_telephone_target: "countrySelect",
+            action: "change->fx-telephone#updateMask"
+          }
+        )
+      end
+    end
+  end
+
+  def country_options_html
+    safe_join(
+      @@telephone_countries.map do |country|
+        content_tag :option,
+                    "#{country[:flag]} #{country[:dial_code]}",
+                    value: country[:code],
+                    selected: country[:code] == country_select_value,
+                    data: {
+                      dial_code: country[:dial_code],
+                      mask: country[:mask]
+                    }
+      end
+    )
+  end
+
+  def country_select_name
+    # Only used in standalone mode
+    @country_field_name || "#{@name}_country"
+  end
+
+  def country_select_value
+    # Priority:
+    # 1. Value from object attribute (when using form builder with country attribute)
+    # 2. Default country
+    if @form.present? && @country_attribute.present? && @object.present?
+      @object.public_send(@country_attribute) rescue @default_country
+    else
+      @default_country
+    end
+  end
+
+  def country_select_id
+    "#{@props[:id] || @name}_country"
+  end
+
+  def country_select_classes
+    # Get size from config
+    size_index = [@sizing, 0].max
+    size_index = [size_index, @@telephone_styles[:country_select][:sizes].length - 1].min
+    size_config = @@telephone_styles[:country_select][:sizes][size_index]
+
+    # Get color from config
+    color = @color || :default
+    color_classes = @@telephone_styles[:country_select][:colors][color] || @@telephone_styles[:country_select][:colors][:default]
+
+    [
+      @@telephone_styles[:country_select][:base],
+      @@telephone_styles[:country_select][:width],
+      size_config[:padding],
+      size_config[:text],
+      color_classes
+    ].join(" ")
+  end
+
+  def telephone_input
+    # Override the props to adjust styling for the telephone input
+    input_props = @props.dup
+
+    # Remove left border radius since it connects to the country select
+    current_classes = input_props[:class] || ""
+    input_props[:class] = current_classes.gsub("rounded-lg", "rounded-r-lg")
+
+    # Store original props temporarily
+    original_props = @props
+    @props = input_props
+
+    result = input
+
+    # Restore original props
+    @props = original_props
+
+    result
+  end
+
+  def telephone_input_container
+    content_tag :div,
+                class: "flex w-full",
+                data: {
+                  controller: "fx-telephone",
+                  fx_telephone_mask_value: current_country[:mask]
+                } do
+      safe_join([
+        country_select,
+        content_tag(:div, telephone_input, class: "relative flex-1")
+      ])
+    end
+  end
+end

data/app/helpers/fluxbit/form_builder.rb

@@ -68,7 +68,7 @@ module Fluxbit
       end
     end
 
-    [ :range, :toggle, :upload_image, :dropzone, :password ].each do |component|
+    [ :range, :toggle, :upload_image, :dropzone, :password, :telephone ].each do |component|
       define_method("fx_#{component}") do |method, **options, &block|
         options[:error] ||= error_for(method)
         options[:error] = !!options[:error] if options[:error_hidden] && options[:error]

data/lib/fluxbit/config/form/telephone_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::TelephoneComponent
+  mattr_accessor :default_country, default: "BR"
+  mattr_accessor :default_sizing, default: 1
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :telephone_countries do
+    [
+      { code: "BR", name: "Brasil", dial_code: "+55", flag: "🇧🇷", mask: "(##) #####-####" },
+      { code: "AR", name: "Argentina", dial_code: "+54", flag: "🇦🇷", mask: "## ####-####" },
+      { code: "MX", name: "México", dial_code: "+52", flag: "🇲🇽", mask: "## #### ####" },
+      { code: "CO", name: "Colombia", dial_code: "+57", flag: "🇨🇴", mask: "### ### ####" },
+      { code: "CL", name: "Chile", dial_code: "+56", flag: "🇨🇱", mask: "# #### ####" },
+      { code: "PE", name: "Perú", dial_code: "+51", flag: "🇵🇪", mask: "### ### ###" },
+      { code: "VE", name: "Venezuela", dial_code: "+58", flag: "🇻🇪", mask: "###-###-####" },
+      { code: "EC", name: "Ecuador", dial_code: "+593", flag: "🇪🇨", mask: "## ### ####" },
+      { code: "BO", name: "Bolivia", dial_code: "+591", flag: "🇧🇴", mask: "# ### ####" },
+      { code: "PY", name: "Paraguay", dial_code: "+595", flag: "🇵🇾", mask: "### ### ###" },
+      { code: "UY", name: "Uruguay", dial_code: "+598", flag: "🇺🇾", mask: "# ### ## ##" },
+      { code: "CR", name: "Costa Rica", dial_code: "+506", flag: "🇨🇷", mask: "#### ####" },
+      { code: "PA", name: "Panamá", dial_code: "+507", flag: "🇵🇦", mask: "####-####" },
+      { code: "CU", name: "Cuba", dial_code: "+53", flag: "🇨🇺", mask: "# ### ####" },
+      { code: "DO", name: "República Dominicana", dial_code: "+1", flag: "🇩🇴", mask: "(###) ###-####" },
+      { code: "GT", name: "Guatemala", dial_code: "+502", flag: "🇬🇹", mask: "#### ####" },
+      { code: "HN", name: "Honduras", dial_code: "+504", flag: "🇭🇳", mask: "####-####" },
+      { code: "SV", name: "El Salvador", dial_code: "+503", flag: "🇸🇻", mask: "####-####" },
+      { code: "NI", name: "Nicaragua", dial_code: "+505", flag: "🇳🇮", mask: "#### ####" },
+      { code: "US", name: "United States", dial_code: "+1", flag: "🇺🇸", mask: "(###) ###-####" },
+      { code: "CA", name: "Canada", dial_code: "+1", flag: "🇨🇦", mask: "(###) ###-####" },
+      { code: "ES", name: "España", dial_code: "+34", flag: "🇪🇸", mask: "### ## ## ##" },
+      { code: "PT", name: "Portugal", dial_code: "+351", flag: "🇵🇹", mask: "### ### ###" },
+      { code: "GB", name: "United Kingdom", dial_code: "+44", flag: "🇬🇧", mask: "#### ### ####" },
+      { code: "DE", name: "Germany", dial_code: "+49", flag: "🇩🇪", mask: "### #########" },
+      { code: "FR", name: "France", dial_code: "+33", flag: "🇫🇷", mask: "# ## ## ## ##" },
+      { code: "IT", name: "Italy", dial_code: "+39", flag: "🇮🇹", mask: "### ### ####" },
+      { code: "JP", name: "Japan", dial_code: "+81", flag: "🇯🇵", mask: "##-####-####" },
+      { code: "CN", name: "China", dial_code: "+86", flag: "🇨🇳", mask: "### #### ####" },
+      { code: "IN", name: "India", dial_code: "+91", flag: "🇮🇳", mask: "##### #####" },
+      { code: "AU", name: "Australia", dial_code: "+61", flag: "🇦🇺", mask: "### ### ###" }
+    ]
+  end
+
+  mattr_accessor :telephone_styles do
+    {
+      country_select: {
+        base: "mt-1 block border border-r-0 rounded-l-lg focus:ring-blue-500 focus:border-blue-500",
+        colors: {
+          default: "text-slate-900 bg-slate-50 border-slate-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",
+          success: "text-green-900 bg-green-50 border-green-300 dark:bg-green-700 dark:border-green-600 dark:text-white",
+          danger: "text-red-900 bg-red-50 border-red-300 dark:bg-red-700 dark:border-red-600 dark:text-white",
+          warning: "text-yellow-900 bg-yellow-50 border-yellow-300 dark:bg-yellow-700 dark:border-yellow-600 dark:text-white",
+          info: "text-cyan-900 bg-cyan-50 border-cyan-300 dark:bg-cyan-700 dark:border-cyan-600 dark:text-white"
+        },
+        width: "w-24",
+        sizes: [
+          { padding: "p-2", text: "text-xs" },      # Small (0)
+          { padding: "p-2.5", text: "text-sm" },    # Medium (1)
+          { padding: "p-4", text: "text-base" }     # Large (2)
+        ]
+      },
+      input: {
+        sizes: [
+          "p-2 text-xs rounded-lg",      # Small (0)
+          "p-2.5 text-sm rounded-lg",    # Medium (1)
+          "p-4 text-base rounded-lg"     # Large (2)
+        ]
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/view_components/version.rb

@@ -1,5 +1,5 @@
 module Fluxbit
   module ViewComponents
-    VERSION = "0.4.3"
+    VERSION = "0.5.0"
   end
 end

data/lib/fluxbit/view_components.rb

@@ -16,6 +16,7 @@ module Fluxbit
       require "fluxbit/config/form/password_component"
       require "fluxbit/config/form/radio_group_button_component"
       require "fluxbit/config/form/range_component"
+      require "fluxbit/config/form/telephone_component"
       require "fluxbit/config/form/text_field_component"
       require "fluxbit/config/form/toggle_component"
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fluxbit_view_components
 version: !ruby/object:Gem::Version
-  version: 0.4.3
+  version: 0.5.0
 platform: ruby
 authors:
 - Arthur Molina
@@ -146,6 +146,7 @@ files:
 - app/assets/javascripts/fluxbit_view_components/row_click_controller.js
 - app/assets/javascripts/fluxbit_view_components/select_all_controller.js
 - app/assets/javascripts/fluxbit_view_components/spinner_percent_controller.js
+- app/assets/javascripts/fluxbit_view_components/telephone_controller.js
 - app/assets/javascripts/fluxbit_view_components/theme_button_controller.js
 - app/components/fluxbit/accordion_component.rb
 - app/components/fluxbit/alert_component.rb
@@ -177,6 +178,7 @@ files:
 - app/components/fluxbit/form/radio_group_button_component.rb
 - app/components/fluxbit/form/range_component.rb
 - app/components/fluxbit/form/select_component.rb
+- app/components/fluxbit/form/telephone_component.rb
 - app/components/fluxbit/form/text_field_component.rb
 - app/components/fluxbit/form/toggle_component.html.erb
 - app/components/fluxbit/form/toggle_component.rb
@@ -233,6 +235,7 @@ files:
 - lib/fluxbit/config/form/password_component.rb
 - lib/fluxbit/config/form/radio_group_button_component.rb
 - lib/fluxbit/config/form/range_component.rb
+- lib/fluxbit/config/form/telephone_component.rb
 - lib/fluxbit/config/form/text_field_component.rb
 - lib/fluxbit/config/form/toggle_component.rb
 - lib/fluxbit/config/gravatar_component.rb