better_ui 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f946c8d53c3641506cd438e13df28f7cc23b3b341294ee790b8fb8ce6a3b5438
-  data.tar.gz: 0fa3b052a2588162f89d752460be51e318ed971152e6a903f9cfb76bbd2ca336
+  metadata.gz: aa5d4adee48517dabb8bd4b65018f8f05a5f9414e8ccbe46e7c0a6f833b735ba
+  data.tar.gz: b39c4dc0a95c7cca09807d27c88d6eba91fe480857bdb7d61dba1d2deb045cec
 SHA512:
-  metadata.gz: 421babdbde227a74c064a9508b1dc32b4f04a31e0a96d4e3b5677492a5ed1d8e4edab11ad9e8289bf82c04424b73933559fda60a5d030cf5d42fc89fc4eb5f93
-  data.tar.gz: 708369a2f8160381dd63e3dd1eedb0524eaf74517369d9e317bb95139f315e6041ae3ce6bfcb536e4ce15b2ab9e31cc6c9cf324b90322b726329284be9332057
+  metadata.gz: ded2a724d33adb91e44c7551689ba1c492f6ccf353c603c7d388db48f009331b820159064d796d83a8095f52f03dd7fd9c863b8e27ddecffbfde281c39bc0203
+  data.tar.gz: c9f3fecbe32188a0bd8e5c23876a9638e960377337dcb42165c0cc0dc63762140eff6a98802c57a426d5586db1be71f006fa933951e898168226477f2206c6bc

data/app/components/better_ui/table/column_component.rb

@@ -21,10 +21,11 @@ module BetterUi
       SORT_DIRECTIONS = %i[asc desc].freeze
 
       attr_reader :key, :label, :align, :header_classes, :cell_classes, :formatter,
-                  :sortable, :sorted, :sort_direction
+                  :sortable, :sorted, :sort_direction, :sort_url, :sort_html
 
       def initialize(key: nil, label: nil, align: :left, header_classes: nil, cell_classes: nil,
-                     sortable: false, sorted: false, sort_direction: :asc, &formatter)
+                     sortable: false, sorted: false, sort_direction: :asc,
+                     sort_url: nil, sort_html: {}, &formatter)
         @key = key
         @label = label
         @align = validate_align(align)
@@ -33,6 +34,8 @@ module BetterUi
         @sortable = sortable
         @sorted = sorted
         @sort_direction = validate_sort_direction(sort_direction)
+        @sort_url = sort_url
+        @sort_html = sort_html || {}
         @formatter = formatter
       end
 

data/app/components/better_ui/table/concerns/sort_icons.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Table
+    module Concerns
+      # Shared SVG sort icon helpers for table header components.
+      #
+      # Provides three icon methods used by both TableComponent (collection mode)
+      # and HeaderCellComponent (slot mode) to render sort direction indicators.
+      module SortIcons
+        extend ActiveSupport::Concern
+
+        private
+
+        # SVG chevron-up icon for ascending sort
+        def sort_icon_asc_svg
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">' \
+            '<path fill-rule="evenodd" d="M11.78 9.78a.75.75 0 0 1-1.06 0L8 7.06 5.28 9.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />' \
+          "</svg>"
+        end
+
+        # SVG chevron-down icon for descending sort
+        def sort_icon_desc_svg
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">' \
+            '<path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />' \
+          "</svg>"
+        end
+
+        # SVG chevron-up-down icon for unsorted state
+        def sort_icon_unsorted_svg
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">' \
+            '<path fill-rule="evenodd" d="M5.22 10.22a.75.75 0 0 1 1.06 0L8 11.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06ZM10.78 5.78a.75.75 0 0 1-1.06 0L8 4.06 6.28 5.78a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />' \
+          "</svg>"
+        end
+
+        # Returns the appropriate sort icon SVG for the given sort state
+        def sort_icon_svg(sorted:, direction: :asc)
+          return sort_icon_unsorted_svg unless sorted
+
+          case direction
+          when :asc then sort_icon_asc_svg
+          when :desc then sort_icon_desc_svg
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/table/header_cell_component/header_cell_component.html.erb

@@ -1,12 +1,21 @@
 <th class="<%= component_classes %>"<% if @scope %> scope="<%= @scope %>"<% end %> <%= tag.attributes(@options) %>>
-  <% if @sortable %>
+  <% if sort_link? %>
+    <%= link_to @sort_url, **sort_link_html, class: "flex items-center gap-1 no-underline text-inherit" do %>
+      <% if @label.present? %>
+        <%= @label %>
+      <% else %>
+        <%= content %>
+      <% end %>
+      <span class="<%= sort_icon_classes %>"><%= raw sort_icon %></span>
+    <% end %>
+  <% elsif @sortable %>
     <span class="flex items-center gap-1">
       <% if @label.present? %>
         <%= @label %>
       <% else %>
         <%= content %>
       <% end %>
-      <span class="<%= sort_icon_classes %>"><%= sort_icon %></span>
+      <span class="<%= sort_icon_classes %>"><%= raw sort_icon %></span>
     </span>
   <% else %>
     <% if @label.present? %>

data/app/components/better_ui/table/header_cell_component.rb

@@ -13,6 +13,7 @@ module BetterUi
     # @example Header cell with block content
     #   <%= render BetterUi::Table::HeaderCellComponent.new(align: :right) { "Actions" } %>
     class HeaderCellComponent < ApplicationComponent
+      include Concerns::SortIcons
       SIZES = {
         xs: { padding: "px-2 py-1.5", text: "text-xs" },
         sm: { padding: "px-3 py-2", text: "text-sm" },
@@ -26,6 +27,7 @@ module BetterUi
 
       def initialize(label: nil, align: :left, size: :md, style: :default, scope: :col,
                      variant: :primary, sortable: false, sorted: false, sort_direction: :asc,
+                     sort_url: nil, sort_html: {},
                      container_classes: nil, **options)
         @label = label
         @align = validate_align(align)
@@ -36,6 +38,8 @@ module BetterUi
         @sortable = sortable
         @sorted = sorted
         @sort_direction = validate_sort_direction(sort_direction)
+        @sort_url = sort_url
+        @sort_html = sort_html || {}
         @container_classes = container_classes
         @options = options
       end
@@ -84,12 +88,8 @@ module BetterUi
 
       def sort_icon
         return nil unless @sortable
-        return "↕" unless @sorted
 
-        case @sort_direction
-        when :asc then "↑"
-        when :desc then "↓"
-        end
+        sort_icon_svg(sorted: @sorted, direction: @sort_direction)
       end
 
       def sort_icon_classes
@@ -112,6 +112,14 @@ module BetterUi
         end
       end
 
+      def sort_link?
+        @sortable && @sort_url.present?
+      end
+
+      def sort_link_html
+        @sort_html
+      end
+
       def validate_align(align)
         unless ALIGNMENTS.include?(align)
           raise ArgumentError, "Invalid align: #{align}. Must be one of: #{ALIGNMENTS.join(', ')}"

data/app/components/better_ui/table/table_component/table_component.html.erb

@@ -16,10 +16,15 @@
             <tr>
               <% columns.each do |column| %>
                 <th class="<%= collection_header_cell_classes(column) %>" scope="col">
-                  <% if column.sortable %>
+                  <% if column.sortable && collection_sort_link?(column) %>
+                    <%= link_to collection_sort_url(column), **collection_sort_link_html(column), class: "flex items-center gap-1 no-underline text-inherit" do %>
+                      <%= column.display_label %>
+                      <span class="<%= collection_sort_icon_classes(column) %>"><%= raw collection_sort_icon(column) %></span>
+                    <% end %>
+                  <% elsif column.sortable %>
                     <span class="flex items-center gap-1">
                       <%= column.display_label %>
-                      <span class="<%= collection_sort_icon_classes(column) %>"><%= collection_sort_icon(column) %></span>
+                      <span class="<%= collection_sort_icon_classes(column) %>"><%= raw collection_sort_icon(column) %></span>
                     </span>
                   <% else %>
                     <%= column.display_label %>

data/app/components/better_ui/table/table_component.rb

@@ -30,6 +30,7 @@ module BetterUi
     #     <% t.with_column(key: :role, label: "Role") { |user| user.role.humanize } %>
     #   <% end %>
     class TableComponent < ApplicationComponent
+      include Concerns::SortIcons
       SIZES = {
         xs: { th_padding: "px-2 py-1.5", td_padding: "px-2 py-2", text: "text-xs" },
         sm: { th_padding: "px-3 py-2", td_padding: "px-3 py-2.5", text: "text-sm" },
@@ -93,6 +94,10 @@ module BetterUi
         body_row_partial: nil,
         header_partial: nil,
         footer_partial: nil,
+        sort_column: nil,
+        sort_direction: nil,
+        sort_url: nil,
+        sort_html: {},
         container_classes: nil,
         table_classes: nil,
         header_classes: nil,
@@ -115,6 +120,10 @@ module BetterUi
         @body_row_partial = body_row_partial
         @header_partial = header_partial
         @footer_partial = footer_partial
+        @sort_column = sort_column&.to_sym
+        @table_sort_direction = sort_direction&.to_sym
+        @sort_url = sort_url
+        @sort_html = sort_html || {}
         @container_classes = container_classes
         @table_classes = table_classes
         @header_classes = header_classes
@@ -417,20 +426,41 @@ module BetterUi
         "cursor-pointer select-none"
       end
 
-      # Collection mode: sort icon
+      # Collection mode: whether this column is currently sorted
+      # Table-level sort_column overrides column-level sorted
+      def effective_sorted?(column)
+        if @sort_column
+          column.key && column.key.to_sym == @sort_column
+        else
+          column.sorted
+        end
+      end
+
+      # Collection mode: effective sort direction for a column
+      # Table-level overrides column-level when the column is the sorted one
+      def effective_sort_direction(column)
+        if @sort_column && effective_sorted?(column) && @table_sort_direction
+          @table_sort_direction
+        else
+          column.sort_direction
+        end
+      end
+
+      # Collection mode: next sort direction (toggles asc↔desc)
+      def next_sort_direction(column)
+        effective_sorted?(column) && effective_sort_direction(column) == :asc ? :desc : :asc
+      end
+
+      # Collection mode: sort icon SVG
       def collection_sort_icon(column)
         return nil unless column.sortable
-        return "↕" unless column.sorted
 
-        case column.sort_direction
-        when :asc then "↑"
-        when :desc then "↓"
-        end
+        sort_icon_svg(sorted: effective_sorted?(column), direction: effective_sort_direction(column))
       end
 
       # Collection mode: sort icon classes
       def collection_sort_icon_classes(column)
-        return "text-grayscale-400" unless column.sorted
+        return "text-grayscale-400" unless effective_sorted?(column)
 
         case @variant
         when :primary then "text-primary-700"
@@ -445,6 +475,28 @@ module BetterUi
         end
       end
 
+      # Collection mode: whether a column should render a sort link
+      def collection_sort_link?(column)
+        return false unless column.sortable
+        column.sort_url.present? || @sort_url.present?
+      end
+
+      # Collection mode: resolved sort URL for a column
+      def collection_sort_url(column)
+        if column.sort_url.present?
+          column.sort_url
+        elsif @sort_url.present?
+          @sort_url.call(column.key, next_sort_direction(column))
+        end
+      end
+
+      # Collection mode: merged sort link HTML attributes
+      def collection_sort_link_html(column)
+        base = @sort_html.dup
+        override = column.sort_html
+        base.merge(override)
+      end
+
       # Partial helpers
       def body_row_partial?
         @body_row_partial.present?

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.10.0"
+  VERSION = "0.11.0"
 end

data/spec/components/previews/better_ui/table/table_component_preview/collection_mode.html.erb

@@ -1,9 +1,9 @@
 <%
   users = [
-    OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "admin", active: true),
-    OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "editor", active: true),
-    OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "viewer", active: false),
-    OpenStruct.new(name: "Diana Prince", email: "diana@example.com", role: "admin", active: true)
+    ::OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "admin", active: true),
+    ::OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "editor", active: true),
+    ::OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "viewer", active: false),
+    ::OpenStruct.new(name: "Diana Prince", email: "diana@example.com", role: "admin", active: true)
   ]
 %>
 

data/spec/components/previews/better_ui/table/table_component_preview/highlighted.html.erb

@@ -44,10 +44,10 @@
 
   <%
     orders = [
-      OpenStruct.new(number: "ORD-001", customer: "Alice Johnson", status: "Shipped", total: "$299.00", pending: false),
-      OpenStruct.new(number: "ORD-002", customer: "Bob Smith", status: "Pending Review", total: "$149.50", pending: true),
-      OpenStruct.new(number: "ORD-003", customer: "Charlie Brown", status: "Delivered", total: "$75.25", pending: false),
-      OpenStruct.new(number: "ORD-004", customer: "Diana Prince", status: "Pending Review", total: "$512.00", pending: true)
+      ::OpenStruct.new(number: "ORD-001", customer: "Alice Johnson", status: "Shipped", total: "$299.00", pending: false),
+      ::OpenStruct.new(number: "ORD-002", customer: "Bob Smith", status: "Pending Review", total: "$149.50", pending: true),
+      ::OpenStruct.new(number: "ORD-003", customer: "Charlie Brown", status: "Delivered", total: "$75.25", pending: false),
+      ::OpenStruct.new(number: "ORD-004", customer: "Diana Prince", status: "Pending Review", total: "$512.00", pending: true)
     ]
   %>
 

data/spec/components/previews/better_ui/table/table_component_preview/row_html.html.erb

@@ -4,9 +4,9 @@
 
   <%
     users = [
-      OpenStruct.new(id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Admin"),
-      OpenStruct.new(id: 2, name: "Bob Smith", email: "bob@example.com", role: "Editor"),
-      OpenStruct.new(id: 3, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer")
+      ::OpenStruct.new(id: 1, name: "Alice Johnson", email: "alice@example.com", role: "Admin"),
+      ::OpenStruct.new(id: 2, name: "Bob Smith", email: "bob@example.com", role: "Editor"),
+      ::OpenStruct.new(id: 3, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer")
     ]
   %>
 

data/spec/components/previews/better_ui/table/table_component_preview/sortable.html.erb

@@ -29,9 +29,9 @@
 
   <%
     users = [
-      OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "Admin", joined: "2024-01-15"),
-      OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "Editor", joined: "2024-02-20"),
-      OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", joined: "2024-03-10")
+      ::OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "Admin", joined: "2024-01-15"),
+      ::OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "Editor", joined: "2024-02-20"),
+      ::OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", joined: "2024-03-10")
     ]
   %>
 
@@ -41,4 +41,46 @@
     <% t.with_column(key: :role, label: "Role") %>
     <% t.with_column(key: :joined, label: "Joined", sortable: true, sorted: true, sort_direction: :desc) %>
   <% end %>
+
+  <h2 class="text-xl font-bold mb-4 mt-8">Sortable with Links (Slot Mode)</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Sort headers wrapped in clickable links with sort_url.</p>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :success) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Name", sortable: true, sorted: true, sort_direction: :asc,
+                      sort_url: "?sort=name&direction=desc",
+                      sort_html: { data: { turbo_frame: "_top" } }) %>
+      <% h.with_cell(label: "Email", sortable: true,
+                      sort_url: "?sort=email&direction=asc") %>
+      <% h.with_cell(label: "Role") %>
+    <% end %>
+
+    <% [
+      ["Alice Johnson", "alice@example.com", "Admin"],
+      ["Bob Smith", "bob@example.com", "Editor"]
+    ].each do |row_data| %>
+      <% t.with_row do |r| %>
+        <% r.with_cell { row_data[0] } %>
+        <% r.with_cell { row_data[1] } %>
+        <% r.with_cell { row_data[2] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <h2 class="text-xl font-bold mb-4 mt-8">Sortable with Links (Collection Mode + Table-level sort_url)</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Table-level sort_url auto-generates links for all sortable columns, with sort_column deriving the sorted state.</p>
+
+  <%= render BetterUi::Table::TableComponent.new(
+    collection: users,
+    variant: :accent,
+    sort_column: :name,
+    sort_direction: :asc,
+    sort_url: ->(key, dir) { "?sort=#{key}&direction=#{dir}" },
+    sort_html: { data: { turbo_frame: "_top" } }
+  ) do |t| %>
+    <% t.with_column(key: :name, label: "Name", sortable: true) %>
+    <% t.with_column(key: :email, label: "Email", sortable: true) %>
+    <% t.with_column(key: :role, label: "Role") %>
+    <% t.with_column(key: :joined, label: "Joined", sortable: true) %>
+  <% end %>
 </div>

data/spec/components/previews/better_ui/table/table_component_preview.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "ostruct"
+
 module BetterUi
   module Table
     class TableComponentPreview < ViewComponent::Preview

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: better_ui
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.11.0
 platform: ruby
 authors:
 - Umberto Peserico
@@ -158,6 +158,7 @@ files:
 - app/components/better_ui/table/cell_component.rb
 - app/components/better_ui/table/cell_component/cell_component.html.erb
 - app/components/better_ui/table/column_component.rb
+- app/components/better_ui/table/concerns/sort_icons.rb
 - app/components/better_ui/table/header_cell_component.rb
 - app/components/better_ui/table/header_cell_component/header_cell_component.html.erb
 - app/components/better_ui/table/header_component.rb