fluxbit_view_components 0.5.1 → 0.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ff7c36152723efea00fcb464ac64ca6462b5f2a0f80cd7eab5298f5129bab1a
-  data.tar.gz: aa51123027b44b8e2a268275c15ed192bcb8bc111f5ec82d1d9ad74597b3f0c1
+  metadata.gz: bd7bed7240f33dbb0940a142d872dc031c7ad7bd2f065f1051ef2b2eb5dd4abe
+  data.tar.gz: dad11a6840d1835cbf7f7c2ff03d37bf70f1d1bc708c00785bf0b0e09f954796
 SHA512:
-  metadata.gz: 2051c7d64576f3a0f8996475e184b164adc767241c52e33837472b7a28f011a2fe5e67fc86ad122599a7679dd252a019834489a795fae7b4bb558f4a444200d5
-  data.tar.gz: 5d62cc33db45e466341d46fbef8c35b128c4c16d8311a66ec0052a7133e4d7a344527577c66df08a609a48fa142e051a952dda15f041bada8c2ecc54919706a0
+  metadata.gz: 0c2278a2d6995c3247cadc40c50baa567f4dccade78c4e6aea44d0df001c206dd9cea61a2b94ef3644e9badb1f0b6c090843e6cf5c1be7b7b9cb675d3ebee3bb
+  data.tar.gz: eb413e15da3790ed9c5b39b2966153b23ec8d88ddb9fa8b0a452318cdf15304f60ac75066ef92f7a65ff7f3fb78cf4c28a671962a63f5487d7a3417fd28ae8ed

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.1"
+    VERSION = "0.5.2"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fluxbit_view_components
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  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