fluxbit_view_components 0.5.0 → 0.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f66b9f23ca4ef3e2fe559a212875eda72091ec0e44473efdeade01655b01ddf
-  data.tar.gz: 5d17abad070b64489453dde8cc700f3c464d4b97d60f0cb8aab4aa0137013385
+  metadata.gz: bd7bed7240f33dbb0940a142d872dc031c7ad7bd2f065f1051ef2b2eb5dd4abe
+  data.tar.gz: dad11a6840d1835cbf7f7c2ff03d37bf70f1d1bc708c00785bf0b0e09f954796
 SHA512:
-  metadata.gz: 0f893f775299b24f11ebc2c8120099c13999f525502d314d9ad87709a02fbbf6dd194bede20193e0cf5a5a7bd53b2b9e58d1298113df77f3ee7b958988c81bfd
-  data.tar.gz: 802ffce4186aa7fe55a32c56b904e084b4c346b6e50a5891bab9683eaa636cde5654b97e0c9b4502e30ad20e4d21b4bdcb2e68260cd66fd9d1aad72a7fd1ea73
+  metadata.gz: 0c2278a2d6995c3247cadc40c50baa567f4dccade78c4e6aea44d0df001c206dd9cea61a2b94ef3644e9badb1f0b6c090843e6cf5c1be7b7b9cb675d3ebee3bb
+  data.tar.gz: eb413e15da3790ed9c5b39b2966153b23ec8d88ddb9fa8b0a452318cdf15304f60ac75066ef92f7a65ff7f3fb78cf4c28a671962a63f5487d7a3417fd28ae8ed

data/app/components/fluxbit/accordion_component.rb

@@ -6,7 +6,10 @@ class Fluxbit::AccordionComponent < Fluxbit::Component
   include Fluxbit::Config::AccordionComponent
 
   renders_many :panels, lambda { |**attrs, &block|
+    @panel_index ||= 0
+    attrs[:index] = @panel_index unless attrs.key?(:index)
     panel = Panel.new(accordion_id: fx_id, flush: @flush, color: @color, **attrs)
+    @panel_index += 1
     block.call(panel) if block_given?
     panel
   }
@@ -58,7 +61,7 @@ class Fluxbit::AccordionComponent < Fluxbit::Component
     # @param [Boolean] flush (false) Whether the panel should use flush styling.
     # @param [Symbol, String] color (:default) The color theme for this panel.
     # @param [Boolean] open (false) Whether the panel should start in an expanded state.
-    # @param [Integer] index (0) The panel's position index for proper styling (first, middle, last).
+    # @param [Integer] index The panel's position index for proper styling (first, middle, last). Automatically increments for each panel if not specified.
     # @param [Hash] **props Additional HTML attributes for the panel container.
     #
     # @return [Fluxbit::AccordionComponent::Panel]

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

@@ -99,7 +99,7 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
         first_element: true,
         class: [
           styles[:default],
-          (@props.key?(:readonly) || @props.key?(:disabled) ? styles[:text][@color] : nil),
+          (@props.key?(:readonly) || @props.key?(:disabled) ? styles[:text][@color] : styles[:text][:default]),
           styles[:ring][@color],
           styles[:bg][@color],
           styles[:placeholder][@color],

data/app/components/fluxbit/form/upload_image_component.html.erb

@@ -1,10 +1,10 @@
 <%= content_tag :div, **@wrapper_html do %>
-  <div id="<%= id %>" class="mt-6 grow lg:mt-0 lg:ml-6 lg:shrink-0 lg:grow-0">
+  <div id="<%= id %>" class="grow lg:mt-0 lg:shrink-0 lg:grow-0">
     <%= label %>
     <div class="mt-1 lg:hidden">
       <div class="flex items-center">
         <div class="inline-block h-12 w-12 shrink-0 overflow-hidden <%= container_rounded_class %> relative" aria-hidden="true">
-          <%= image_element %>
+          <%= has_initials? ? initials_element : image_element %>
         </div>
         <div class="ml-5 rounded-md shadow-xs">
           <div class="group relative flex items-center justify-center rounded-md border border-slate-300 py-2 px-3 focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2 hover:bg-slate-50">
@@ -18,11 +18,11 @@
       </div>
     </div>
 
-    <div class="relative hidden overflow-hidden <%= container_rounded_class %> lg:block w-40">
-      <div class="inline-block h-40 w-40 shrink-0 overflow-hidden <%= container_rounded_class %> relative" aria-hidden="true">
-        <%= image_element %>
+    <div class="relative hidden overflow-hidden <%= container_rounded_class %> lg:block w-40 h-40">
+      <div class="absolute inset-0 w-full h-full overflow-hidden <%= container_rounded_class %>" aria-hidden="true">
+        <%= has_initials? ? initials_element : image_element %>
       </div>
-      <label for="desktop-<%= id %>" class="absolute inset-0 flex flex-col h-full w-full items-center justify-center bg-blue-800/75 text-sm font-medium text-white opacity-0 hover:opacity-100">
+      <label for="desktop-<%= id %>" class="absolute inset-0 flex flex-col items-center justify-center bg-blue-800/75 text-sm font-medium text-white opacity-0 hover:opacity-100 <%= container_rounded_class %>">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
         </svg>
@@ -36,12 +36,25 @@
 
   <script>
     function loadFile(event, id) {
-      const images = document.querySelectorAll('.img_photo_' + id);
+      const elements = document.querySelectorAll('.img_photo_' + id);
       if (event.target.files && event.target.files[0]) {
-        images.forEach(function(img) {
-          img.src = URL.createObjectURL(event.target.files[0]);
-          img.onload = function() {
-            URL.revokeObjectURL(img.src);
+        elements.forEach(function(element) {
+          if (element.hasAttribute('data-initials-placeholder')) {
+            const img = document.createElement('img');
+            img.className = element.className.replace('flex items-center justify-center', '');
+            img.alt = element.querySelector('span')?.textContent || 'Uploaded image';
+            img.classList.remove('bg-gradient-to-br', 'from-blue-500', 'to-purple-600', 'from-green-500', 'to-teal-600', 'from-pink-500', 'to-rose-600', 'from-orange-500', 'to-red-600', 'from-indigo-500', 'to-blue-600', 'from-purple-500', 'to-pink-600', 'from-cyan-500', 'to-blue-600', 'from-emerald-500', 'to-green-600', 'from-amber-500', 'to-orange-600', 'from-violet-500', 'to-purple-600');
+            img.classList.add('object-cover');
+            img.src = URL.createObjectURL(event.target.files[0]);
+            img.onload = function() {
+              URL.revokeObjectURL(img.src);
+            }
+            element.parentNode.replaceChild(img, element);
+          } else {
+            element.src = URL.createObjectURL(event.target.files[0]);
+            element.onload = function() {
+              URL.revokeObjectURL(element.src);
+            }
           }
         });
       }

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

@@ -21,6 +21,7 @@ class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
   # @param helper_popover_placement [String] Placement of the popover (default: "right")
   # @param image_path [String] Path to the image to be displayed (optional)
   # @param image_placeholder [String] Placeholder image path if no image is attached (optional)
+  # @param initials [String] Initials to display as placeholder (e.g., "JD" for John Doe) - overrides image_placeholder
   # @param title [Boolean, String] Whether to show a title (true for default, false to hide, or custom string)
   # @param rounded [Boolean] Whether to show image as circle (true, default) or square with rounded edges (false)
   # @param class [String] Additional CSS classes for the input element
@@ -30,6 +31,7 @@ class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
     @title = @props.delete(:title) || "Change"
     @rounded = @props.delete(:rounded)
     @rounded = true if @rounded.nil?
+    @initials = @props.delete(:initials)
     @image_path = @props.delete(:image_path) ||
       (if @object&.send(@attribute).respond_to?(:attached?) && @object&.send(@attribute)&.send("attached?")
         @object&.send(@attribute)&.variant(resize_to_fit: [ 160, 160 ])
@@ -58,4 +60,51 @@ class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
   def image_rounded_class
     @rounded ? "rounded-full" : "rounded-lg"
   end
+
+  def has_initials?
+    @initials.present?
+  end
+
+  def initials_element
+    return unless has_initials?
+
+    content_tag :div,
+                class: "img_photo_#{id} img_photo absolute inset-0 w-full h-full flex items-center justify-center #{image_rounded_class} #{initials_gradient_class}",
+                data: { initials_placeholder: true } do
+      content_tag :span, @initials.upcase, class: "text-white font-bold #{initials_text_size_class}"
+    end
+  end
+
+  def initials_gradient_class
+    # Generate a consistent gradient based on the initials hash
+    gradient_index = @initials.sum { |c| c.ord } % gradient_options.length
+    gradient_options[gradient_index]
+  end
+
+  def initials_text_size_class
+    # Smaller initials (1-2 chars) get larger text, longer ones get smaller text
+    case @initials.length
+    when 1..2
+      "text-4xl"
+    when 3
+      "text-3xl"
+    else
+      "text-2xl"
+    end
+  end
+
+  def gradient_options
+    [
+      "bg-gradient-to-br from-blue-500 to-purple-600",
+      "bg-gradient-to-br from-green-500 to-teal-600",
+      "bg-gradient-to-br from-pink-500 to-rose-600",
+      "bg-gradient-to-br from-orange-500 to-red-600",
+      "bg-gradient-to-br from-indigo-500 to-blue-600",
+      "bg-gradient-to-br from-purple-500 to-pink-600",
+      "bg-gradient-to-br from-cyan-500 to-blue-600",
+      "bg-gradient-to-br from-emerald-500 to-green-600",
+      "bg-gradient-to-br from-amber-500 to-orange-600",
+      "bg-gradient-to-br from-violet-500 to-purple-600"
+    ]
+  end
 end

data/app/components/fluxbit/gravatar_component.rb

@@ -19,6 +19,8 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
   #
   # @param [Hash] props The properties to customize the Gravatar.
   # @option props [String] :email The email address associated with the Gravatar.
+  # @option props [String] :name The display name for the Gravatar (used with :initials and :color defaults).
+  # @option props [String] :initials Custom initials to display (used with :initials default).
   # @option props [Symbol] :rating (:g) The rating of the Gravatar (:g, :pg, :r, :x).
   # @option props [Boolean] :secure (true) Whether to use HTTPS for the Gravatar URL.
   # @option props [Symbol] :filetype (:png) The filetype of the Gravatar (:png, :jpg, :gif).
@@ -34,7 +36,9 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
       secure: options(@props.delete(:secure), default: true),
       filetype: options((@props.delete(:filetype)|| "").to_sym, collection: gravatar_styles[:filetype], default: @@filetype),
       default: options((@props.delete(:default)|| "").to_sym, collection: gravatar_styles[:default], default: @@default),
-      size: gravatar_styles[:size][options(@props[:size], collection: gravatar_styles[:size], default: @@size)]
+      size: gravatar_styles[:size][options(@props[:size], collection: gravatar_styles[:size], default: @@size)],
+      name: @props.delete(:name),
+      initials: @props.delete(:initials)
     }
     add class: gravatar_styles[:base], to: @props
     @email = @props.delete(:email)
@@ -88,6 +92,8 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
       case key
       when :forcedefault
         processed_options[key] = "y" if val
+      when :name, :initials
+        processed_options[key] = val if val.present?
       else
         processed_options[key] = val
       end

data/lib/fluxbit/config/gravatar_component.rb

@@ -3,13 +3,13 @@
 module Fluxbit::Config::GravatarComponent
   mattr_accessor :rating, default: :pg
   mattr_accessor :filetype, default: :png
-  mattr_accessor :default, default: :robohash # options: 404, mp (mystery person), identicon, monsterid, wavatar, retro, robohash, blank
+  mattr_accessor :default, default: :robohash # options: 404, mp (mystery person), identicon, monsterid, wavatar, retro, robohash, blank, initials, color
 
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
   mattr_accessor :gravatar_styles do
     {
       base: "bg-gray-200 dark:bg-gray-600",
-      default: %i[404 mp identicon monsterid wavatar retro robohash blank],
+      default: %i[404 mp identicon monsterid wavatar retro robohash blank initials color],
       size: { xs: 30, sm: 40, md: 50, lg: 100, xl: 200 },
       rating: %i[g pg r x],
       filetype: %i[jpg jpeg gif png heic]

data/lib/fluxbit/view_components/version.rb

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

data/lib/generators/fluxbit/scaffold_generator.rb

@@ -89,6 +89,8 @@ module Fluxbit
       # Generate i18n
       template "i18n.en.yml.tt",    File.join("config", "locales", "#{file_name.pluralize}.en.yml")
       template "i18n.pt-BR.yml.tt", File.join("config", "locales", "#{file_name.pluralize}.pt-BR.yml")
+      template "i18n.general.en.yml.tt",    File.join("config", "locales", "general.en.yml")
+      template "i18n.general.pt-BR.yml.tt", File.join("config", "locales", "general.pt-BR.yml")
 
       # Generate Policy
       template "policy.rb.tt", File.join("app/policies", "#{file_name.singularize}_policy.rb")
@@ -97,6 +99,7 @@ module Fluxbit
       template "_alert.html.erb.tt", File.join("app/views/shared", "_alert.html.erb")
       template "send_alert_via_drawer.html.erb.tt", File.join("app/views/shared", "send_alert_via_drawer_alert.html.erb")
       template "_flash.html.erb.tt", File.join("app/views/shared", "_flash.html.erb")
+      template "sortable.rb.tt", File.join("app/controllers/concerns", "sortable.rb")
     end
 
     private

data/lib/generators/fluxbit/templates/_flash.html.erb.tt

@@ -6,10 +6,12 @@
   "warning" => :warning
 } %>
 
-<%% flash.each do |type, msg| %>
-  <%% next if msg.blank? %>
-  <%% color = mapping[type.to_s] || :info %>
-  <%%= fx_alert(color: color) do %>
-    <%%= safe_join(Array(msg).map { |m| sanitize(m.to_s, tags: [], attributes: []) }, tag.br) %>
+<div id="notice" class="fixed top-4 right-4 z-50 max-w-md w-auto">
+  <%% flash.each do |type, msg| %>
+    <%% next if msg.blank? %>
+    <%% color = mapping[type.to_s] || :info %>
+    <%%= fx_alert(color: color) do %>
+      <%%= safe_join(Array(msg).map { |m| sanitize(m.to_s, tags: [], attributes: []) }, tag.br) %>
+    <%% end %>
   <%% end %>
-<%% end %>
+</div>

data/lib/generators/fluxbit/templates/controller.rb.tt

@@ -2,6 +2,7 @@
 # frozen_string_literal: true
 
 class <%= namespaced? ? "#{namespace_module}::" : "" %><%= class_name.pluralize %>Controller < ApplicationController
+  include Sortable
   include Pundit::Authorization
   rescue_from Pundit::NotAuthorizedError, with: :user_not_authorized
 
@@ -241,7 +242,7 @@ class <%= namespaced? ? "#{namespace_module}::" : "" %><%= class_name.pluralize
   private
 
   def set_<%= singular %>
-    @<%= singular %> = <%= class_name.singularize %>.find(params[:id])
+    @<%= singular %> = policy_scope(<%= class_name.singularize %>).find(params[:id])
     # Note: Pundit authorization for @<%= singular %> happens in each action
   rescue ActiveRecord::RecordNotFound
     @message = t("<%= plural %>.messages.not_found")
@@ -264,7 +265,7 @@ class <%= namespaced? ? "#{namespace_module}::" : "" %><%= class_name.pluralize
 
   def set_<%= plural %>_for_bulk_actions
     <%= singular %>_ids = Array(params[:<%= singular %>_ids]).reject(&:blank?)
-    @<%= plural %> = <%= class_name.singularize %>.where(id: <%= singular %>_ids)
+    @<%= plural %> = policy_scope(<%= class_name.singularize %>).where(id: <%= singular %>_ids)
 
     if @<%= plural %>.empty?
       @message = t("<%= plural %>.messages.not_selected_for_action")

data/lib/generators/fluxbit/templates/i18n.general.en.yml.tt

@@ -0,0 +1,4 @@
+en:
+  general:
+    messages:
+      order_error: "Invalid order parameter."

data/lib/generators/fluxbit/templates/sortable.rb.tt

@@ -0,0 +1,23 @@
+module Sortable
+  extend ActiveSupport::Concern
+
+  included do
+    helper_method :apply_sorting
+  end
+
+  private
+
+  def apply_sorting(resource_class, order_param, order_options = %i[created_at updated_at], default_order = { created_at: :desc })
+    if order_param.present?
+      order = order_param.rpartition("_")
+      if order.length == 3 && %w[asc desc].include?(order.last) && order_options.include?(order.first.to_sym)
+        resource_class.order(order.first.to_sym => order.last.to_sym)
+      else
+        flash[:error] = t("general.messages.order_error")
+        resource_class.order(default_order)
+      end
+    else
+      resource_class.order(default_order) # Default order
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fluxbit_view_components
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.2
 platform: ruby
 authors:
 - Arthur Molina
@@ -44,9 +44,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.0.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 4.0.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -54,9 +51,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.0.0
-    - - "<"
-      - !ruby/object:Gem::Version
-        version: 4.0.0
 - !ruby/object:Gem::Dependency
   name: webdrivers
   requirement: !ruby/object:Gem::Requirement
@@ -292,15 +286,18 @@ files:
 - lib/generators/fluxbit/templates/edit.html.erb.tt
 - lib/generators/fluxbit/templates/fluxbit_pagy.css
 - lib/generators/fluxbit/templates/i18n.en.yml.tt
+- lib/generators/fluxbit/templates/i18n.general.en.yml.tt
+- lib/generators/fluxbit/templates/i18n.general.pt-BR.yml.tt
 - lib/generators/fluxbit/templates/i18n.pt-BR.yml.tt
 - lib/generators/fluxbit/templates/index.html.erb.tt
 - lib/generators/fluxbit/templates/index.json.jbuilder.tt
 - lib/generators/fluxbit/templates/new.html.erb.tt
 - lib/generators/fluxbit/templates/partial.html.erb.tt
 - lib/generators/fluxbit/templates/policy.rb.tt
-- lib/generators/fluxbit/templates/send_alert_via_drawer.erb.tt
+- lib/generators/fluxbit/templates/send_alert_via_drawer.html.erb.tt
 - lib/generators/fluxbit/templates/show.html.erb.tt
 - lib/generators/fluxbit/templates/show.json.jbuilder.tt
+- lib/generators/fluxbit/templates/sortable.rb.tt
 - lib/generators/fluxbit/templates/update.turbo_stream.erb.tt
 - lib/generators/fluxbit/templates/update_all.turbo_stream.erb.tt
 - lib/install/install.rb