keystone_ui 0.44.0 → 0.45.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 399e1a496d6abbf8fc37149cbf05ea62223222c1cf6b5678dc400b286a17f06a
-  data.tar.gz: 5d7566e89343b57e8a35a6693e4fe6107184203299a880d58eab541b6ff16d81
+  metadata.gz: 978bd820f9629e5a312c465218ba68c9f055edbf7d4e740b450ffc935541ef00
+  data.tar.gz: 1d210e3d67198f807e6ebd626de17c8f39ff98182409b6b1746061f1b63830f9
 SHA512:
-  metadata.gz: e0e0ab5ac2704a8612ec78bd80987d61ddfaee104cf0eedf976075e8ea28b4d64ac26990e061055165d334f06c8951b0eb8083b6005cb666dd8d47fec7ec5a7f
-  data.tar.gz: 8de679cd46c03c8c8856196fc1d73d87def5ab3910c7b142d744ab7fca02c8b011f0cea93a2a2b42979d677b84c7448c32880d2ab6783851506188622bba7c30
+  metadata.gz: 57965061e3a70ccd8ee5be0dd9c9ba7af36afac30278bcb84fa1ec19a74c2b135367bb4fddc06371b5c914d5a6ad2c1b8332dca913ec823aa6030a28028a514a
+  data.tar.gz: 2d8c7a55901017fc335b759596bf13a400ece07714e13a986029fa142cf94f287db343a8468555074d0847433ca227e9893466625b5c94da4d2edc936d371afc

data/app/components/keystone/ui/column.rb

@@ -3,10 +3,11 @@
 module Keystone
   module Ui
     class Column
-      attr_reader :key, :header_text
+      attr_reader :key, :header_text, :align
 
-      def initialize(key, header_text, mobile_hidden: false, sortable: false, hideable: false, locked: false)
+      def initialize(key, header_text, mobile_hidden: false, sortable: false, hideable: false, locked: false, align: nil)
         @key = key
+        @align = align
         @header_text = header_text
         @mobile_hidden = mobile_hidden
         @sortable = sortable

data/app/components/keystone/ui/data_table_component.html.erb

@@ -36,6 +36,14 @@
         <% end %>
       <% else %>
         <% @items.each_with_index do |item, idx| %>
+          <% if (group = group_starting_at(idx)) %>
+            <tr class="<%= Keystone::Ui::DataTableComponent::HEAD_CLASSES %>" data-table-group>
+              <% group_cells(group).each do |cell| %>
+                <th scope="colgroup" class="<%= cell[:classes] %>"><%= cell[:value] %></th>
+              <% end %>
+              <% if actions? %><th></th><% end %>
+            </tr>
+          <% end %>
           <tr>
             <% row_cells[idx].each do |cell| %>
               <td class="<%= cell[:classes] %>">
@@ -60,5 +68,15 @@
         <% end %>
       <% end %>
     </tbody>
+    <% if total_cells.any? %>
+      <tfoot class="<%= Keystone::Ui::DataTableComponent::HEAD_CLASSES %>">
+        <tr>
+          <% total_cells.each do |cell| %>
+            <th scope="row" class="<%= cell[:classes] %>"><%= cell[:value] %></th>
+          <% end %>
+          <% if actions? %><th></th><% end %>
+        </tr>
+      </tfoot>
+    <% end %>
   </table>
 </div>

data/app/components/keystone/ui/data_table_component.rb

@@ -16,6 +16,7 @@ module Keystone
       ROW_CLASSES_MIDDLE = "ks-table-cell-middle text-sm whitespace-nowrap"
       ROW_CLASSES_LAST = "ks-table-cell-last text-right text-sm whitespace-nowrap"
 
+      ALIGN_CLASSES = { start: "text-left", end: "text-right" }.freeze
       MOBILE_HIDDEN_CLASSES = "hidden sm:table-cell"
       HEADER_LOCKED_CLASSES = "ks-table-header-locked sticky left-0"
       CELL_LOCKED_CLASSES = "ks-table-cell-locked sticky left-0"
@@ -29,8 +30,11 @@ module Keystone
       SORT_DESC_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 0 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" /></svg>'
       SORT_NEUTRAL_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .55.24l3.25 3.5a.75.75 0 1 1-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 0 1-1.1-1.02l3.25-3.5A.75.75 0 0 1 10 3Zm-3.76 9.2a.75.75 0 0 1 1.06.04l2.7 2.908 2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z" clip-rule="evenodd" /></svg>'
 
-      def initialize(items:, columns:, empty_message: nil, sort: nil, sort_direction: nil, sort_url: nil, hidden_columns: [], key: nil)
+      def initialize(items:, columns:, empty_message: nil, sort: nil, sort_direction: nil, sort_url: nil, hidden_columns: [], key: nil, group_by: nil, group_totals: {}, total: nil)
         @items = items.to_a
+        @group_by = group_by
+        @group_totals = group_totals.to_h.transform_keys(&:to_s)
+        @total = total&.to_h&.transform_keys(&:to_s)
         @all_columns = columns.map { |col| normalize_column(col) }
         @default_hidden = hidden_columns
         @layout = SavedLayout.new(columns: @all_columns, value: nil, default_hidden: hidden_columns)
@@ -83,7 +87,7 @@ module Keystone
 
           cell = {
             label: column.header_text,
-            classes: tokens.join(" "),
+            classes: aligned(tokens.join(" "), column),
             scope: "col"
           }
 
@@ -127,7 +131,7 @@ module Keystone
 
             cell = {
               value: resolve_value(item, column.key),
-              classes: tokens.join(" ")
+              classes: aligned(tokens.join(" "), column)
             }
 
             link_block = @link_blocks[column.key]
@@ -146,6 +150,28 @@ module Keystone
         visual_column_count
       end
 
+      def group_starting_at(index)
+        return unless @group_by
+
+        name = resolve_value(@items[index], @group_by)
+        name if index.zero? || name != resolve_value(@items[index - 1], @group_by)
+      end
+
+      def total_cells
+        return [] unless @total
+
+        @columns.map.with_index do |column, index|
+          { value: @total[column.key.to_s], classes: aligned(header_classes_for(index), column) }
+        end
+      end
+
+      def group_cells(name)
+        subtotals = @group_totals.fetch(name.to_s, {}).to_h.transform_keys(&:to_s)
+        @columns.map.with_index do |column, index|
+          { value: index.zero? ? name : subtotals[column.key.to_s], classes: aligned(header_classes_for(index), column) }
+        end
+      end
+
       private
 
       def apply_saved_layout
@@ -170,6 +196,12 @@ module Keystone
         end
       end
 
+      def aligned(classes, column)
+        return classes unless column.align
+
+        [ *classes.split.grep_v(/\Atext-(left|right)\z/), ALIGN_CLASSES.fetch(column.align) ].join(" ")
+      end
+
       def resolve_value(item, key)
         if item.respond_to?(key)
           item.public_send(key)

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.44.0"
+  VERSION = "0.45.0"
 end

data/the_local/agents/keystone_ui-develop.md

@@ -333,13 +333,18 @@ two exceptions: `ui_page`'s `padding:` treats any value other than `:none` as
 
 8. Build tables.
 
-   - `ui_data_table(items:, columns:, empty_message: nil, sort: nil, sort_direction: nil, sort_url: nil, hidden_columns: [], key: nil)`
+   - `ui_data_table(items:, columns:, empty_message: nil, sort: nil, sort_direction: nil, sort_url: nil, hidden_columns: [], key: nil, group_by: nil, group_totals: {}, total: nil)`
      takes a block yielding the table. `items:` are records or hashes, and a
      cell's value is the column key called on the item, or `item[key]`.
+     `group_by:` lists rows under heading rows named by that key's value,
+     `group_totals:` (`{ "Group name" => { column_key => value } }`) puts
+     subtotals in each heading row, and `total:` (`{ column_key => value }`)
+     ends the table with a total row. Pass every subtotal and total already
+     calculated. `align: :start` or `:end` on a `Column` aligns it left or right.
    - `columns:` takes `{ key: "Label" }` hashes when every column is plain.
      Switch the whole set to `Keystone::Ui::Column` objects once one column
      needs an option.
-   - `Keystone::Ui::Column.new(key, header_text, mobile_hidden: false, sortable: false, hideable: false, locked: false)`
+   - `Keystone::Ui::Column.new(key, header_text, mobile_hidden: false, sortable: false, hideable: false, locked: false, align: nil)`
      — `mobile_hidden:` hides the column below `sm:`, `sortable:` gives it a
      sort header, and `hideable:` lets it be hidden and moved.
      `locked: true` on the first column keeps it in view while the rest scrolls

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui
 version: !ruby/object:Gem::Version
-  version: 0.44.0
+  version: 0.45.0
 platform: ruby
 authors:
 - Tyler Schneider