mittens_ui 0.0.14 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2479146dca0d7b1cacd610a6c50d8d04df41c8678db14f1b97950ab62b377a63
-  data.tar.gz: 3d86bd7ce738e1a530bd983d26a17a6fe4f2255dc3654d4f203624ceaa634138
+  metadata.gz: 65ad0d43134bc7e47bcb8d797b70f275a6330426ba073f2f0861fa56a1f8f551
+  data.tar.gz: c613e0ddc59df4efdc64a0ee5b4af846c2549e30c562352c52864bfcdc62abe2
 SHA512:
-  metadata.gz: 5e780dfaf16f6657fb955e664470c2ba816290b4d2a05d0f002cb8b810008d6dc7fc92c5cd0115bd10176ca83fafff55f9833de65c8006f37e8f479357137021
-  data.tar.gz: accbcf0f8c5f3114fe5a974a268c4c479bc067eb2aae596450e0e7fa074090c5f81b8a306fbd2028f6a039109781adbe9c784076b2564bb16a04f851024d7cd0
+  metadata.gz: 98a84d6b246ec8112a724d9c7cb1ec6b3f147e369aafa8cb8290cdc40b1359ce9bd656f6f8e83555ce5acb99387983eb7a4b6af8beb27388b7b4834c35a29d18
+  data.tar.gz: ebda9e48f8553c48b9548d73a7778d0211a07d605e0758f107bdcca33e1877dadd07ff5132db3ca646e0070916675cb4685b150205e7cdce01305ec3a5feeb28

data/README.md

@@ -243,27 +243,14 @@ img = MittensUi::Image.new("./assets/animation.gif")
 ### TableView
 ```ruby
 table = MittensUi::TableView.new(
-  headers: ["Name", "Email"],
-  data: [
-    ["John", "john@example.com"],
-    ["Jane", "jane@example.com"]
-  ],
+  ['Name', 'Email'],
+  [['John', 'john@example.com']]
 )
 
-table.add(["Bob", "bob@example.com"])
-table.add(["First", "first@example.com"], :prepend)
+table.add(['Jane', 'jane@example.com'])
 
-table.remove_selected
-
-puts table.row_count
-
-puts table.selected_row.inspect
-
-# Single click on the row
 table.row_clicked { |row| puts row.inspect }
-
-# Double click on the row
-table.row_double_clicked { |row| puts row.inspect }
+table.row_double_clicked { |row| puts "Double: #{row.inspect}" }
 ```
 
 ### Alert

data/examples/contacts.rb

@@ -2,6 +2,7 @@ require '../lib/mittens_ui'
 
 app_options = { name: 'contacts', title: 'Contacts', height: 680, width: 600, can_resize: true }.freeze
 
+
 MittensUi::Application.Window(app_options) do
   puts MittensUi::Application.store.get(:last_selected_contact)
 
@@ -25,63 +26,39 @@ MittensUi::Application.Window(app_options) do
   # --- Contacts Table ---
   MittensUi::Separator.new(:horizontal, top: 2, bottom: 2)
 
-contacts_table = MittensUi::TableView.new(
-  ['Name', 'Email', 'Phone'],
-  [
-    ['John Appleseed', 'john@example.com', '555-1234'],
-    ['Jane Doe', 'jane@example.com', '555-5678'],
-    ['Michael Smith', 'michael.smith@email.com', '555-1001'],
-    ['Emily Johnson', 'emily.j@email.com', '555-1002'],
-    ['Chris Evans', 'cevans@email.com', '555-1003'],
-    ['Olivia Brown', 'olivia.b@email.com', '555-1004'],
-    ['Daniel Wilson', 'dan.w@email.com', '555-1005'],
-    ['Sophia Martinez', 'sophia.m@email.com', '555-1006'],
-    ['James Anderson', 'j.anderson@email.com', '555-1007'],
-    ['Isabella Thomas', 'isabella.t@email.com', '555-1008'],
-    ['Benjamin Taylor', 'ben.taylor@email.com', '555-1009'],
-    ['Mia Moore', 'mia.moore@email.com', '555-1010'],
-    ['Lucas Jackson', 'lucas.j@email.com', '555-1011'],
-    ['Charlotte White', 'charlotte.w@email.com', '555-1012'],
-    ['Henry Harris', 'henry.h@email.com', '555-1013'],
-    ['Amelia Martin', 'amelia.m@email.com', '555-1014'],
-    ['Alexander Thompson', 'alex.t@email.com', '555-1015'],
-    ['Evelyn Garcia', 'evelyn.g@email.com', '555-1016'],
-    ['William Martinez', 'will.m@email.com', '555-1017'],
-    ['Harper Robinson', 'harper.r@email.com', '555-1018'],
-    ['Daniel Clark', 'dan.clark@email.com', '555-1019'],
-    ['Abigail Rodriguez', 'abigail.r@email.com', '555-1020'],
-    ['Matthew Lewis', 'matt.lewis@email.com', '555-1021'],
-    ['Ella Lee', 'ella.lee@email.com', '555-1022'],
-    ['David Walker', 'd.walker@email.com', '555-1023'],
-    ['Scarlett Hall', 'scarlett.h@email.com', '555-1024'],
-    ['Joseph Allen', 'j.allen@email.com', '555-1025'],
-    ['Grace Young', 'grace.y@email.com', '555-1026'],
-    ['Samuel King', 'sam.king@email.com', '555-1027'],
-    ['Chloe Wright', 'chloe.w@email.com', '555-1028'],
-    ['Andrew Scott', 'andrew.s@email.com', '555-1029'],
-    ['Victoria Green', 'victoria.g@email.com', '555-1030'],
-    ['Joshua Adams', 'josh.adams@email.com', '555-1031'],
-    ['Lily Baker', 'lily.b@email.com', '555-1032'],
-    ['Ryan Nelson', 'ryan.n@email.com', '555-1033'],
-    ['Zoey Carter', 'zoey.c@email.com', '555-1034'],
-    ['Nathan Mitchell', 'nathan.m@email.com', '555-1035'],
-    ['Hannah Perez', 'hannah.p@email.com', '555-1036'],
-    ['Aaron Roberts', 'aaron.r@email.com', '555-1037'],
-    ['Sofia Turner', 'sofia.t@email.com', '555-1038'],
-    ['Caleb Phillips', 'caleb.p@email.com', '555-1039'],
-    ['Avery Campbell', 'avery.c@email.com', '555-1040'],
-    ['Ethan Parker', 'ethan.p@email.com', '555-1041'],
-    ['Madison Evans', 'madison.e@email.com', '555-1042'],
-    ['Logan Edwards', 'logan.e@email.com', '555-1043'],
-    ['Layla Collins', 'layla.c@email.com', '555-1044'],
-    ['Noah Stewart', 'noah.s@email.com', '555-1045'],
-    ['Riley Sanchez', 'riley.s@email.com', '555-1046'],
-    ['Jack Morris', 'jack.m@email.com', '555-1047'],
-    ['Aria Rogers', 'aria.r@email.com', '555-1048'],
-    ['Sebastian Reed', 'sebastian.r@email.com', '555-1049'],
-    ['Nora Cook', 'nora.c@email.com', '555-1050']
+  first_names = %w[
+    John Jane Michael Emily Chris Olivia Daniel Sophia James Isabella
+    Benjamin Mia Lucas Charlotte Henry Amelia Alexander Evelyn William Harper
+    Daniel Abigail Matthew Ella David Scarlett Joseph Grace Samuel Chloe
+    Andrew Victoria Joshua Lily Ryan Zoey Nathan Hannah Aaron Sofia
+    Caleb Avery Ethan Madison Logan Layla Noah Riley Jack Aria
+    Sebastian Nora Liam Ava Mason Ella Ethan Harper Logan Grace
+  ]
+
+  last_names = %w[
+    Smith Johnson Brown Taylor Anderson Thomas Jackson White Harris Martin
+    Thompson Garcia Martinez Robinson Clark Rodriguez Lewis Lee Walker Hall
+    Allen Young King Wright Scott Green Adams Baker Nelson Carter Mitchell
+    Perez Roberts Turner Phillips Campbell Parker Evans Edwards Collins Stewart
+    Sanchez Morris Rogers Reed Cook Morgan Bell Murphy Bailey Rivera Cooper
   ]
-)
+
+  contacts_data = 1000.times.map do |i|
+    first = first_names.sample
+    last  = last_names.sample
+
+    name  = "#{first} #{last}"
+    email = "#{first.downcase}.#{last.downcase}#{i}@example.com"
+    phone = "555-#{1000 + i}"
+
+    [name, email, phone]
+  end
+
+  contacts_table = MittensUi::TableView.new(
+    ['Name', 'Email', 'Phone'],
+    contacts_data
+  )
+
   contacts_table.row_double_clicked do |row|
     puts "Double clicked: #{row.inspect}"
   end

data/lib/mittens_ui/table_view.rb

@@ -3,13 +3,14 @@
 require 'mittens_ui/core'
 
 module MittensUi
-  # A simple, but custom table widget built on {Gtk::Grid}.
+  # A simple, custom table widget built on Gtk::Grid.
   #
-  # Provides:
-  # - Column headers with sorting (▲ ▼ indicators)
-  # - Row selection
-  # - Single-click and double-click callbacks
-  # - Dynamic row insertion
+  # Features:
+  # - Sorting with ▲ ▼ indicators
+  # - Row selection (mouse + keyboard)
+  # - Single & double click callbacks
+  # - Pagination for large datasets (auto-enabled > 500 rows)
+  # - Built-in pagination UI (Prev / Next buttons + page indicator)
   # - Dark mode friendly styling
   #
   # @example Basic usage
@@ -21,23 +22,28 @@ module MittensUi
   # @example Add row
   #   table.add(['Jane', 'jane@example.com'])
   #
-  # @example Click handlers
-  #   table.row_clicked { |row| puts row.inspect }
-  #   table.row_double_clicked { |row| puts "Double: #{row.inspect}" }
+  # @example Pagination (automatic)
+  #   # Pagination UI appears automatically when data > 500 rows
   #
   class TableView < Core
     attr_reader :data, :headers, :selected_row_idx
 
-    # @param headers [Array<String>] column headers
-    # @param data [Array<Array<String>>] initial rows
-    # @param options [Hash] Core layout options
+    PAGE_THRESHOLD = 500
+    PAGE_SIZE      = 100
+
     def initialize(headers = [], data = [], options = {})
       @headers = headers
       @data = data
+
       @row_widgets = []
       @header_labels = []
       @selected_row_idx = nil
       @sort_directions = {}
+      @current_page = 0
+
+      # ---------------------------
+      # GTK Structure
+      # ---------------------------
 
       @grid = Gtk::Grid.new
       @grid.set_column_spacing(0)
@@ -46,102 +52,147 @@ module MittensUi
       @scroller = Gtk::ScrolledWindow.new
       @scroller.set_policy(:automatic, :automatic)
       @scroller.set_child(@grid)
+      @scroller.set_vexpand(true)
+      @scroller.set_min_content_height(300)
+      @scroller.set_max_content_height(300)
+
+      # Pagination UI
+      @pagination_box = Gtk::Box.new(:horizontal, 10)
+      @pagination_box.set_margin_top(10)
+      @pagination_box.set_halign(:center)
 
-      # Calculate height of table:
-      row_height = 24
-      header_height = 40
-      max_height = 300
-      desired_height = [(@data.size * row_height) + header_height, max_height].min
+      @prev_btn = Gtk::Button.new(label: '← Prev')
+      @next_btn = Gtk::Button.new(label: 'Next →')
+      @page_label = Gtk::Label.new('')
 
-      # Set the scroller's min and max height
-      @scroller.set_min_content_height(desired_height)
-      @scroller.set_max_content_height(desired_height)
+      @prev_btn.signal_connect('clicked') { prev_page }
+      @next_btn.signal_connect('clicked') { next_page }
 
-      super(@scroller, options)
+      @pagination_box.append(@prev_btn)
+      @pagination_box.append(@page_label)
+      @pagination_box.append(@next_btn)
 
-      # Click handling
+      # Root container (important for Core)
+      @container = Gtk::Box.new(:vertical, 0)
+      @container.append(@scroller)
+      @container.append(@pagination_box)
+
+      super(@container, options)
+
+      # Events
       @on_row_clicked = nil
       @on_row_double_clicked = nil
       @last_click_time = nil
       @last_clicked_row = nil
 
       setup_css
+      setup_keyboard
+
       render_headers
       render_rows
+      update_pagination_ui
     end
 
     # ---------------------------
     # Public API
     # ---------------------------
 
-    # Add a row to the table
-    #
-    # @param row [Array<String>] row data
-    # @param direction [Symbol] :append or :prepend
-    # @return [void]
     def add(row, direction = :append)
       return if row.nil? || row.empty?
 
-      if direction == :prepend
-        @data.unshift(row)
-      else
-        @data << row
-      end
+      direction == :prepend ? @data.unshift(row) : @data << row
 
+      adjust_page_after_insert
       render_rows
+      update_pagination_ui
     end
 
-    # Replace table data
-    #
-    # @param new_data [Array<Array<String>>]
     def update_data(new_data)
       @data = new_data
+      @current_page = 0
       render_rows
+      update_pagination_ui
     end
 
-    # Check if a row is selected
-    #
-    # @param idx [Integer, nil]
-    # @return [Boolean]
     def row_selected?(idx = nil)
       return !@selected_row_idx.nil? if idx.nil?
+
       @selected_row_idx == idx
     end
 
-    # Get selected row data
-    #
-    # @return [Array<String>, nil]
     def selected_row
       return nil unless @selected_row_idx
+
       @data[@selected_row_idx]
     end
 
-    # Remove selected row
-    #
-    # @return [Array<String>, nil]
     def remove_selected
       return nil unless @selected_row_idx
 
       removed = @data.delete_at(@selected_row_idx)
       @selected_row_idx = nil
       render_rows
+      update_pagination_ui
       removed
     end
 
-    # Register single-click handler
-    #
-    # @yield [row] row data
     def row_clicked(&block)
       @on_row_clicked = block
     end
 
-    # Register double-click handler
-    #
-    # @yield [row] row data
     def row_double_clicked(&block)
       @on_row_double_clicked = block
     end
 
+    # ---------------------------
+    # Pagination
+    # ---------------------------
+
+    def paginated_data
+      return @data if @data.size <= PAGE_THRESHOLD
+
+      start = @current_page * PAGE_SIZE
+      @data.slice(start, PAGE_SIZE) || []
+    end
+
+    def next_page
+      return if @data.size <= PAGE_THRESHOLD
+
+      max_page = (@data.size / PAGE_SIZE.to_f).ceil - 1
+      @current_page = [@current_page + 1, max_page].min
+      render_rows
+      update_pagination_ui
+    end
+
+    def prev_page
+      return if @data.size <= PAGE_THRESHOLD
+
+      @current_page = [@current_page - 1, 0].max
+      render_rows
+      update_pagination_ui
+    end
+
+    def adjust_page_after_insert
+      return if @data.size <= PAGE_THRESHOLD
+
+      @current_page = (@data.size / PAGE_SIZE.to_f).floor
+    end
+
+    def update_pagination_ui
+      if @data.size <= PAGE_THRESHOLD
+        @pagination_box.hide
+        return
+      end
+
+      total_pages = (@data.size / PAGE_SIZE.to_f).ceil
+      @page_label.set_label("#{@current_page + 1} / #{total_pages}")
+
+      @prev_btn.set_sensitive(@current_page > 0)
+      @next_btn.set_sensitive(@current_page < total_pages - 1)
+
+      @pagination_box.show
+    end
+
     # ---------------------------
     # Rendering
     # ---------------------------
@@ -151,37 +202,35 @@ module MittensUi
     def setup_css
       css = Gtk::CssProvider.new
       css.load(data: <<~CSS)
-        frame {
-          border-radius: 0;
-          box-shadow: none;
-          border: none;
-        }
-
-        .table-cell {
+        box.table-cell {
           padding: 6px 10px;
           border-bottom: 1px solid @borders;
+          background-color: @theme_base_color;
+          color: @theme_text_color;
         }
 
-        .header-cell {
+        box.header-cell {
           font-weight: bold;
           padding: 8px 10px;
           border-bottom: 2px solid @borders;
-          background-color: @theme_base_color;
+          background-color: shade(@theme_base_color, 0.95);
+          color: @theme_text_color;
         }
 
-        .row-even {
-          background-color: alpha(@theme_bg_color, 0.96);
+        box.row-even {
+          background-color: shade(@theme_base_color, 1.00);
         }
 
-        .row-odd {
-          background-color: alpha(@theme_bg_color, 0.90);
+        box.row-odd {
+          background-color: shade(@theme_base_color, 0.97);
         }
 
-        .table-cell:hover {
-          background-color: alpha(@theme_selected_bg_color, 0.25);
+        box.table-cell:hover {
+          background-color: @theme_selected_bg_color;
+          color: @theme_selected_fg_color;
         }
 
-        .row-selected {
+        box.row-selected {
           background-color: @theme_selected_bg_color;
           color: @theme_selected_fg_color;
         }
@@ -190,7 +239,7 @@ module MittensUi
       Gtk::StyleContext.add_provider_for_display(
         Gdk::Display.default,
         css,
-        Gtk::StyleProvider::PRIORITY_USER
+        Gtk::StyleProvider::PRIORITY_APPLICATION
       )
     end
 
@@ -202,19 +251,15 @@ module MittensUi
 
         @header_labels[col_idx] = label
 
-        frame = Gtk::Frame.new
-        frame.set_child(label)
-        frame.set_hexpand(true)
-        frame.style_context.add_class('header-cell')
+        box = Gtk::Box.new(:horizontal, 0)
+        box.append(label)
+        box.style_context.add_class('header-cell')
 
         gesture = Gtk::GestureClick.new
-        gesture.set_button(0)
-        gesture.signal_connect("pressed") do |_g, _n, _x, _y|
-          sort_column(col_idx)
-        end
-        frame.add_controller(gesture)
+        gesture.signal_connect('pressed') { sort_column(col_idx) }
+        box.add_controller(gesture)
 
-        @grid.attach(frame, col_idx, 0, 1, 1)
+        @grid.attach(box, col_idx, 0, 1, 1)
       end
     end
 
@@ -222,8 +267,11 @@ module MittensUi
       @row_widgets.each { |row| row.each { |w| @grid.remove(w) } }
       @row_widgets.clear
 
-      @data.each_with_index do |row, row_idx|
-        base_class = row_idx.even? ? 'row-even' : 'row-odd'
+      rows = paginated_data
+
+      rows.each_with_index do |row, visible_idx|
+        actual_idx = visible_idx + (@current_page * PAGE_SIZE)
+        base_class = visible_idx.even? ? 'row-even' : 'row-odd'
         widget_row = []
 
         row.each_with_index do |cell, col_idx|
@@ -231,46 +279,17 @@ module MittensUi
           label.set_xalign(0.0)
           label.set_hexpand(true)
 
-          frame = Gtk::Frame.new
-          frame.set_child(label)
-          frame.set_hexpand(true)
-          frame.style_context.add_class('table-cell')
-          frame.style_context.add_class(base_class)
-          frame.style_context.add_class('row-selected') if row_selected?(row_idx)
-
-          gesture = Gtk::GestureClick.new
-          gesture.set_button(0)
-
-          gesture.signal_connect("pressed") do |_g, _n, _x, _y|
-            now = Process.clock_gettime(Process::CLOCK_MONOTONIC)
-
-            if @last_click_time &&
-               @last_clicked_row == row_idx &&
-               (now - @last_click_time) < 0.3
-
-              # DOUBLE CLICK
-              @on_row_double_clicked&.call(@data[row_idx])
-            else
-              # SINGLE CLICK (delayed slightly to avoid conflict)
-              GLib::Timeout.add(250) do
-                if @last_clicked_row == row_idx
-                  @on_row_clicked&.call(@data[row_idx])
-                end
-                false
-              end
-            end
-
-            @last_click_time = now
-            @last_clicked_row = row_idx
-            @selected_row_idx = row_idx
-
-            render_rows
-          end
+          box = Gtk::Box.new(:horizontal, 0)
+          box.append(label)
 
-          frame.add_controller(gesture)
+          box.style_context.add_class('table-cell')
+          box.style_context.add_class(base_class)
+          box.style_context.add_class('row-selected') if row_selected?(actual_idx)
 
-          @grid.attach(frame, col_idx, row_idx + 1, 1, 1)
-          widget_row << frame
+          attach_click_handlers(box, actual_idx)
+
+          @grid.attach(box, col_idx, visible_idx + 1, 1, 1)
+          widget_row << box
         end
 
         @row_widgets << widget_row
@@ -280,21 +299,76 @@ module MittensUi
       @row_widgets.flatten.each(&:show)
     end
 
+    def attach_click_handlers(widget, row_idx)
+      gesture = Gtk::GestureClick.new
+      gesture.set_button(0)
+
+      gesture.signal_connect('pressed') do |_g, _n, _x, _y|
+        now = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+
+        if @last_click_time &&
+           @last_clicked_row == row_idx &&
+           (now - @last_click_time) < 0.3
+
+          @on_row_double_clicked&.call(@data[row_idx])
+        else
+          GLib::Timeout.add(200) do
+            @last_clicked_row == row_idx ? @on_row_clicked&.call(@data[row_idx]) : false
+          end
+        end
+
+        @last_click_time = now
+        @last_clicked_row = row_idx
+        @selected_row_idx = row_idx
+
+        render_rows
+      end
+
+      widget.add_controller(gesture)
+    end
+
     def sort_column(col_idx)
       dir = @sort_directions[col_idx] ? :desc : :asc
       @sort_directions[col_idx] = !@sort_directions[col_idx]
 
       @header_labels.each_with_index do |lbl, i|
-        lbl.set_label(@headers[i].to_s) if lbl
+        lbl.set_label(@headers[i])
       end
 
-      arrow = dir == :asc ? "  ▲" : "  ▼"
+      arrow = dir == :asc ? ' ▲' : ' ▼'
       @header_labels[col_idx].set_label(@headers[col_idx] + arrow)
 
       @data.sort_by! { |row| row[col_idx].to_s }
       @data.reverse! if dir == :desc
 
+      render_rows
+      update_pagination_ui
+    end
+
+    def setup_keyboard
+      controller = Gtk::EventControllerKey.new
+
+      controller.signal_connect('key-pressed') do |_ctrl, key, _, _|
+        case key
+        when Gdk::Keyval::KEY_Up
+          move_selection(-1)
+        when Gdk::Keyval::KEY_Down
+          move_selection(1)
+        when Gdk::Keyval::KEY_Return
+          @on_row_double_clicked&.call(selected_row)
+        end
+      end
+
+      @scroller.add_controller(controller)
+    end
+
+    def move_selection(delta)
+      return if @data.empty?
+
+      @selected_row_idx ||= 0
+      @selected_row_idx = [[@selected_row_idx + delta, 0].max, @data.size - 1].min
+
       render_rows
     end
   end
-end
+end

data/lib/mittens_ui/version.rb

@@ -1,3 +1,3 @@
 module MittensUi
-  VERSION = "0.0.14"
+  VERSION = "0.0.15"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mittens_ui
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.0.15
 platform: ruby
 authors:
 - Zach Tuttle