better_ui 0.3.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9f8b92fdba76f5e84f09fb6a3bf9879b209e0e7dfd8f864186784db24b808c59
-  data.tar.gz: 4d21e971baeecb10c7a3c5952041ac7e6911342e0efe4d0015efb92f9f214652
+  metadata.gz: d5ce58a483a9db3c7164c77c50c5206f83304c2b52f6ebff2d92dbc2ddfe0c78
+  data.tar.gz: 262e9f1b61ccf46254e582c2466cf4fea4c89d6ec48cb1117cb63355996a3e2c
 SHA512:
-  metadata.gz: 778ee8d067130b37947a227ccf1322e8cf5b82d19c9b3f7a0371cc16b62071daaeb5eb6a191898ef2b06419486fe656bc22bea4314fbf98884fdf16259ac8409
-  data.tar.gz: 1df545b428bdb281fb6f78b7be2e58e455bd6bd67f0202684f51b9e756c9ccc3e928a283f97d98a924185e1bb859b63f8cf2a91857ef49478cf6bfc3f254629d
+  metadata.gz: 9d024e430e9eb3d69c30adc09b8cff4a8a79a3585ea0769abe0e279c7dcb54b36faf7239ad393436f5558dc0db67c29a66e7eac8f32a11232d12cffbffc2cb96
+  data.tar.gz: 4c18bd0f1df604a289bab875eee931283616cd22f7b1a24e239446643392228a09b92f0e9b54888b9c3d8bdc2074a089ff0d35373aca0e60bccda86ef7b843fe

data/app/components/better_ui/application/main/component.html.erb

@@ -1,4 +1,4 @@
-<main class="w-full fixed <%= get_layout_class %> <%= get_padding_class(padding) %><%= classes ? ' ' + classes : '' %>">
+<main class="w-full <%= get_layout_class %> <%= get_padding_class(padding) %><%= classes ? ' ' + classes : '' %>">
   <div class="h-[calc(100vh-81px)] p-4">
     <div class="h-full w-full bg-white p-4 <%= get_padding_class(inner_padding) %> <%= get_rounded_class %> <%= get_shadow_class %> overflow-y-auto">
       <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">

data/app/components/better_ui/application/sidebar/component.html.erb

@@ -2,7 +2,8 @@
      data-bui-sidebar-width-value="<%= @width == :md ? 256 : 320 %>"
      data-bui-sidebar-min-width-value="200"
      data-bui-sidebar-max-width-value="400"
-     data-bui-sidebar-pinned-value="true">
+     data-bui-sidebar-pinned-value="true"
+     class="<%= wrapper_classes %>">
   
   <!-- Mobile Overlay -->
   <div data-bui-sidebar-target="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
@@ -174,7 +175,28 @@
   <!-- Footer Section -->
   <% if has_footer? %>
     <div class="px-6 py-4 border-t border-gray-200">
-      <% if footer[:user_info].present? %>
+      <% if has_user_dropdown? %>
+        <!-- User Dropdown -->
+        <% user_dropdown = footer[:user_dropdown] %>
+        <%= bui_dropdown(
+          trigger: user_dropdown_trigger,
+          position: :top,
+          theme: :white,
+          fullwidth: true,
+          show_chevron: false
+        ) do %>
+          <% (user_dropdown[:menu_items] || []).each do |item| %>
+            <%= bui_dropdown_item(
+              text: item[:text],
+              icon: item[:icon],
+              href: item[:href],
+              theme: item[:theme] || :default,
+              active: item[:active] || false,
+              disabled: item[:disabled] || false
+            ) %>
+          <% end %>
+        <% end %>
+      <% elsif footer[:user_info].present? %>
         <div class="flex items-center">
           <% if footer[:user_info][:avatar].present? %>
             <div class="flex-shrink-0">
@@ -206,7 +228,7 @@
       <% end %>
       
       <% if footer[:content].present? %>
-        <div class="<%= footer[:user_info].present? ? 'mt-4' : '' %>">
+        <div class="<%= (footer[:user_info].present? || has_user_dropdown?) ? 'mt-4' : '' %>">
           <%= footer[:content] %>
         </div>
       <% end %>

data/app/components/better_ui/application/sidebar/component.rb

@@ -4,10 +4,12 @@ module BetterUi
   module Application
     module Sidebar
       class Component < ViewComponent::Base
-        # Include degli helper per utilizzare bui_icon, bui_avatar e bui_button
+        # Include degli helper per utilizzare bui_icon, bui_avatar, bui_button e bui_dropdown
         include BetterUi::General::Components::Icon::IconHelper
         include BetterUi::General::Components::Avatar::AvatarHelper
         include BetterUi::General::Components::Button::ButtonHelper
+        include BetterUi::General::Components::Dropdown::DropdownHelper
+        include BetterUi::General::Components::Dropdown::ItemHelper
         attr_reader :width, :position, :theme, :shadow, :border, :header, :footer, :navigation_sections, :collapsible, :classes
 
         # Larghezze sidebar con classi Tailwind dirette
@@ -46,7 +48,7 @@ module BetterUi
         # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg), default :lg
         # @param border [Boolean] Se mostrare il bordo destro/sinistro, default true
         # @param header [Hash] Configurazione header (logo, title, subtitle)
-        # @param footer [Hash] Configurazione footer (content, user_info)
+        # @param footer [Hash] Configurazione footer (content, user_info, user_dropdown)
         # @param navigation_sections [Array] Array di sezioni di navigazione
         # @param collapsible [Boolean] Se abilitare sezioni collassabili, default true
         # @param classes [String] Classi CSS aggiuntive
@@ -74,8 +76,8 @@ module BetterUi
           @classes = classes
         end
 
-        def container_classes
-          base_classes = %w[fixed inset-y-0 h-screen z-50 flex flex-col]
+        def wrapper_classes
+          base_classes = %w[fixed top-0 inset-y-0 h-screen z-[9999]]
 
           # Posizione
           base_classes << (position == :right ? "right-0" : "left-0")
@@ -83,6 +85,12 @@ module BetterUi
           # Larghezza
           base_classes << width_class
 
+          base_classes.compact.join(" ")
+        end
+
+        def container_classes
+          base_classes = %w[flex flex-col h-full]
+
           # Tema
           base_classes.concat(theme_classes)
 
@@ -104,7 +112,56 @@ module BetterUi
         end
 
         def has_footer?
-          footer.present? && (footer[:content].present? || footer[:user_info].present?)
+          footer.present? && (footer[:content].present? || footer[:user_info].present? || footer[:user_dropdown].present?)
+        end
+
+        def has_user_dropdown?
+          footer.present? && footer[:user_dropdown].present?
+        end
+
+        def user_dropdown_trigger
+          return '' unless has_user_dropdown?
+          
+          user_dropdown = footer[:user_dropdown]
+          avatar_html = if user_dropdown[:avatar].present?
+            if user_dropdown[:avatar].is_a?(Hash)
+              bui_avatar(**user_dropdown[:avatar])
+            else
+              user_dropdown[:avatar].html_safe
+            end
+          else
+            ''
+          end
+
+          content_tag(:div, class: "flex items-center w-full text-left") do
+            avatar_section = if user_dropdown[:avatar].present?
+              content_tag(:div, avatar_html, class: "flex-shrink-0")
+            else
+              ''
+            end
+
+            text_section = content_tag(:div, class: user_dropdown[:avatar].present? ? 'ml-3 min-w-0 flex-1' : 'min-w-0 flex-1') do
+              name_part = if user_dropdown[:name].present?
+                content_tag(:p, user_dropdown[:name], class: "text-sm font-medium text-gray-700 truncate")
+              else
+                ''
+              end
+
+              subtitle_part = if user_dropdown[:subtitle].present?
+                content_tag(:p, user_dropdown[:subtitle], class: "text-xs text-gray-500 truncate")
+              else
+                ''
+              end
+
+              (name_part + subtitle_part).html_safe
+            end
+
+            chevron_section = content_tag(:div, class: "ml-auto flex-shrink-0") do
+              bui_icon("chevron-down", size: :small, classes: "text-gray-400")
+            end
+
+            (avatar_section + text_section + chevron_section).html_safe
+          end
         end
 
         private

data/app/components/better_ui/general/button/component.html.erb

@@ -2,15 +2,15 @@
 <% if link? %>
   <%= link_to @href, **link_attributes do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
-    <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+    <% if @text %>
+      <span class="flex-grow"><%= @text %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,15 +18,15 @@
 <% else %>
   <%= tag.button(**button_attributes) do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
-    <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+    <% if @text %>
+      <span class="flex-grow"><%= @text %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>

data/app/components/better_ui/general/button/component.rb

@@ -2,7 +2,7 @@ module BetterUi
   module General
     module Button
       class Component < ViewComponent::Base
-        attr_reader :label, :type, :size, :full_width, :disabled,
+        attr_reader :text, :theme, :size, :full_width, :disabled,
                     :icon, :icon_position, :href, :method, :data, :classes, :id, :rounded, :button_type, :html_options
 
         # Classi base sempre presenti
@@ -40,8 +40,8 @@ module BetterUi
 
         # Inizializzazione del componente
         def initialize(
-          label: nil,
-          type: :white,
+          text: nil,
+          theme: :white,
           size: :medium,
           full_width: false,
           disabled: false,
@@ -56,8 +56,8 @@ module BetterUi
           button_type: :button,
           **html_options
         )
-          @label = label
-          @type = type.to_sym
+          @text = text
+          @theme = theme.to_sym
           @size = size.to_sym
           @full_width = full_width
           @disabled = disabled
@@ -95,7 +95,7 @@ module BetterUi
         end
 
         def get_button_type_classes
-          BUTTON_THEME[@type] || BUTTON_THEME[:white]
+          BUTTON_THEME[@theme] || BUTTON_THEME[:white]
         end
 
         def get_border_radius_class
@@ -173,21 +173,21 @@ module BetterUi
 
         # Verifica se rendere il componente
         def render?
-          @label.present? || @icon.present? || content.present?
+          @text.present? || @icon.present? || content.present?
         end
 
         private
 
         def validate_params
-          validate_type
+          validate_theme
           validate_size
           validate_icon_position
           validate_rounded
         end
 
-        def validate_type
-          unless BUTTON_THEME.keys.include?(@type)
-            raise ArgumentError, "Il tipo deve essere uno tra: #{BUTTON_THEME.keys.join(', ')}"
+        def validate_theme
+          unless BUTTON_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{BUTTON_THEME.keys.join(', ')}"
           end
         end
 

data/app/components/better_ui/general/dropdown/component.html.erb

@@ -1,19 +1,22 @@
-<div class="relative inline-block <%= @classes %>" 
+<div class="relative <%= @classes %> <%= fullwidth_classes %>" 
      data-controller="bui-dropdown" 
      data-bui-dropdown-open-value="false"
+     data-bui-dropdown-selectable-value="<%= @selectable.to_s %>"
      <%= tag.attributes(@html_options.except(:class)) %>>
   
   <button type="button"
-          class="inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors <%= dynamic_trigger_classes %>"
+          class="items-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors <%= dynamic_trigger_classes %> <%= fullwidth_classes %>"
           data-bui-dropdown-target="trigger"
           data-action="click->bui-dropdown#toggle keydown->bui-dropdown#keydown"
           aria-expanded="false"
           aria-haspopup="true">
     <%= @trigger %>
-    <%= bui_icon("chevron-down", size: :small, classes: "ml-2 -mr-1") %>
+    <% if @show_chevron %>
+      <%= bui_icon("chevron-down", size: :small, classes: "ml-2 -mr-1") %>
+    <% end %>
   </button>
 
-  <div class="absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none <%= dynamic_menu_classes %>"
+  <div class="absolute z-[1000] my-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none <%= dynamic_menu_classes %> <%= fullwidth_classes %>"
        data-bui-dropdown-target="menu"
        role="menu"
        aria-orientation="vertical"

data/app/components/better_ui/general/dropdown/component.rb

@@ -6,7 +6,7 @@ module BetterUi
       class Component < ViewComponent::Base
         include BetterUi::General::Components::Icon::IconHelper
         
-        attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :classes, :html_options
+        attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :fullwidth, :show_chevron, :selectable, :classes, :html_options
 
         # Classi base spostate nel template HTML per migliore leggibilità
 
@@ -54,6 +54,12 @@ module BetterUi
           none: ""
         }.freeze
 
+        # Stili per full-width del trigger
+        DROPDOWN_FULLWIDTH = {
+          true => "w-full text-left justify-start",
+          false => "inline-flex justify-center"
+        }.freeze
+
         def initialize(
           trigger:,
           position: :bottom,
@@ -61,6 +67,9 @@ module BetterUi
           size: :medium,
           rounded: :medium,
           animation: :fade,
+          fullwidth: false,
+          show_chevron: true,
+          selectable: false,
           classes: nil,
           **html_options
         )
@@ -70,12 +79,21 @@ module BetterUi
           @size = size.to_sym
           @rounded = rounded.to_sym
           @animation = animation.to_sym
+          @fullwidth = fullwidth
+          @show_chevron = show_chevron
+          @selectable = selectable
           @classes = classes
           @html_options = html_options
 
           validate_params
         end
 
+        def fullwidth_classes
+          [
+            get_fullwidth_classes
+          ].compact.join(" ")
+        end
+
         # Restituisce solo le classi dinamiche per il trigger
         def dynamic_trigger_classes
           [
@@ -127,6 +145,10 @@ module BetterUi
           DROPDOWN_ANIMATION[@animation] || DROPDOWN_ANIMATION[:fade]
         end
 
+        def get_fullwidth_classes
+          DROPDOWN_FULLWIDTH[@fullwidth] || DROPDOWN_FULLWIDTH[false]
+        end
+
         def validate_params
           validate_theme
           validate_size

data/app/components/better_ui/general/field/component.html.erb

@@ -1,8 +1,8 @@
 <%# Form field component template %>
 <div class="<%= BASE_CLASSES %>">
-  <% if label.present? %>
+  <% if text.present? %>
     <label for="<%= id %>" class="<%= LABEL_CLASSES %>">
-      <%= label %>
+      <%= text %>
       <% if required %>
         <span class="<%= REQUIRED_CLASSES %>">*</span>
       <% end %>
@@ -24,4 +24,4 @@
       <%= help_text %>
     </div>
   <% end %>
-</div> 
+</div>

data/app/components/better_ui/general/field/component.rb

@@ -4,7 +4,7 @@ module BetterUi
   module General
     module Field
       class Component < ViewComponent::Base
-        attr_reader :label, :name, :required, :error, :help_text, :id
+        attr_reader :text, :name, :required, :error, :help_text, :id
 
         renders_one :input
 
@@ -14,8 +14,8 @@ module BetterUi
         ERROR_CLASSES = "text-sm text-red-600 mt-1"
         HELP_TEXT_CLASSES = "text-sm text-gray-500 mt-1"
 
-        def initialize(label:, name:, required: false, error: nil, help_text: nil, id: nil)
-          @label = label
+        def initialize(text:, name:, required: false, error: nil, help_text: nil, id: nil)
+          @text = text
           @name = name
           @required = required
           @error = error

data/app/components/better_ui/general/grid/cell_component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= combined_classes %>"<% if @id %> id="<%= @id %>"<% end %><% @html_options.except(:class).each do |attr, value| %> <%= attr %>="<%= value %>"<% end %>>
+  <%= content %>
+</div>