katalyst-tables 3.12.1 → 3.13.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 007b144646f8dc19c4c446a46725b662b014d5aea88accddc30e7b92426b3d2a
-  data.tar.gz: e28722af27d28e8c5fd6bb190b356d4f6da73d3247b02de20c4519802e6e30a0
+  metadata.gz: 23a8a8a1807a0f6355a6c8b8dfd8a79b8654b42f49f4e04ddffa95a152658ec5
+  data.tar.gz: b4b62f128a45aac4bd9fbb32218288ce861951a673c420075e91acff9f2243a9
 SHA512:
-  metadata.gz: '09c6645880695698dcc6f4478b2ca30e550ff48d937ffb49ecad6b482a55d5d0e56f9b2d9a5821df545ac263fe3759af177d4f043c37e17b077cf1c9f8da6fab'
-  data.tar.gz: 83318a4e3a4069708866d6037ecad1759b83dabc8204e3e301686e1bbbc61ae01b180c787ef7c90d1f6e2513fe15fd38237ce9b82d60734beaf94566c94e305c
+  metadata.gz: 428907f63918d7f3497729b1ebb7605028bd4e8d467ce2681941ce629532b9cab778e2f6d3420305fff6b0683deefa9197b69321f782b4ea9b442727643a4039
+  data.tar.gz: 5a484636e22f700bf9721c123855998dbfaa7b732939ad60f0e3af4bfde70292f156785c61acc63a39e6eb859845a03c68d329373875cd9985d395795f3ce0b2

data/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.13.0]
+
+Default style overhaul for .katalyst--summary-table (BREAKING CHANGE)
+* Use grid instead of table layout to support more complex alignment
+* Respond to stacked layout on mobile
+* Users will likely want to make spacing and layout tweaks depending on table style
+
 ## [3.12.0]
 
 * Support for ordering variable height rows

data/app/assets/images/katalyst/tables/icons/sort-asc.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
-  <path d="M8 1V15M8 15L15 8M8 15L1 8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 1v14m0 0 7-7m-7 7L1 8"/></svg>

data/app/assets/images/katalyst/tables/icons/sort-desc.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
-  <path d="M8 15V1M8 1L15 8M8 1L1 8" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 15V1m0 0 7 7M8 1 1 8"/></svg>

data/app/assets/stylesheets/katalyst/tables/summary.css

@@ -1,17 +1,42 @@
 .katalyst--summary-table {
-  width: unset;
-  border-top: 1px solid var(--row-border-color);
+  --table-min-width: min(60ch, 100cqi);
+  --table-max-width: 100%;
+  --label-min-width: min(20ch, 33cqi);
+  --label-width: clamp(12ch, 33cqi, 30ch);
 
-  th {
-    min-width: 12rem;
+  display: grid;
+  grid-template-columns: fit-content(var(--label-width)) 1fr;
+  align-items: stretch;
+
+  width: fit-content;
+  min-width: var(--table-min-width);
+  max-width: var(--table-max-width);
+
+  tbody,
+  tr {
+    display: contents;
   }
 
   th,
   td {
-    vertical-align: baseline;
-    text-align: left;
+    overflow-wrap: anywhere;
+    hyphens: auto;
   }
 
+  th {
+    min-width: var(--label-min-width);
+  }
+}
+
+@container (width < 60ch) {
+  .katalyst--summary-table {
+    grid-template-columns: 1fr;
+    min-width: unset;
+    width: 100%;
+  }
+}
+
+.katalyst--summary-table {
   :where([data-cell-type="enum"]) {
     [data-enum] {
       background: var(--tag-background-color, var(--color-tint, #f0ecf3));

data/app/assets/stylesheets/katalyst/tables/table.css

@@ -78,7 +78,7 @@
   /* Select */
 
   :where([data-cell-type="selection"]) {
-    --cell-width: 2rem;
+    width: 2rem;
 
     label {
       display: block;
@@ -98,28 +98,29 @@
     aspect-ratio: 1;
     height: 1.5ex;
     line-height: 1;
-    background: none;
-    background-size: contain;
+    background: currentColor;
     transform: translateY(0.1ex);
     margin-inline-start: var(--space-2xs, 0.5rem);
+    opacity: 0;
+    -webkit-mask: url("icons/sort-asc.svg") no-repeat center;
+    mask: url("icons/sort-asc.svg") no-repeat center;
+    transition: opacity var(--animation-duration, 125ms);
   }
 
+  /* Unsorted + hover/focus: ghost arrow */
   a:is(.sortable):hover::after,
-  a:is(.sortable):focus-visible::after,
-  [data-sort="asc"] a:is(.sortable)::after,
-  [data-sort="desc"] a:is(.sortable):hover::after,
-  [data-sort="desc"] a:is(.sortable):focus-visible::after {
-    background: currentColor;
-    -webkit-mask: url("/katalyst/tables/icons/sort-asc.svg") no-repeat center;
-    mask: url("/katalyst/tables/icons/sort-asc.svg") no-repeat center;
+  a:is(.sortable):focus-visible::after {
+    opacity: 0.3;
   }
 
-  [data-sort="desc"] a:is(.sortable)::after,
-  [data-sort="asc"] a:is(.sortable):hover::after,
-  [data-sort="asc"] a:is(.sortable):focus-visible::after {
-    background: currentColor;
-    -webkit-mask: url("/katalyst/tables/icons/sort-desc.svg") no-repeat center;
-    mask: url("/katalyst/tables/icons/sort-desc.svg") no-repeat center;
+  /* Sorted: solid state arrow */
+  [data-sort] a:is(.sortable)::after {
+    opacity: 1;
+  }
+
+  [data-sort="desc"] a:is(.sortable)::after {
+    -webkit-mask: url("icons/sort-desc.svg") no-repeat center;
+    mask: url("icons/sort-desc.svg") no-repeat center;
   }
 
   /* Width and wrapping */

data/app/components/concerns/katalyst/tables/has_table_content.rb

@@ -15,7 +15,7 @@ module Katalyst
 
       def before_render
         # move @__vc_render_in_block to @row_proc to avoid slot lookup attempting to call it
-        @row_proc = @__vc_render_in_block
+        @row_proc             = @__vc_render_in_block
         @__vc_render_in_block = nil
       end
 
@@ -26,11 +26,11 @@ module Katalyst
       private
 
       def row_content(row, record)
-        @current_row = row
+        @current_row    = row
         @current_record = record
         row_proc.call(self, record)
       ensure
-        @current_row = nil
+        @current_row    = nil
         @current_record = nil
       end
 

data/app/components/concerns/katalyst/tables/selectable.rb

@@ -7,9 +7,9 @@ module Katalyst
     module Selectable
       extend ActiveSupport::Concern
 
-      FORM_CONTROLLER = "tables--selection--form"
+      FORM_CONTROLLER  = "tables--selection--form"
       TABLE_CONTROLLER = "tables--selection--table"
-      ITEM_CONTROLLER = "tables--selection--item"
+      ITEM_CONTROLLER  = "tables--selection--item"
 
       # Returns the default dom id for the selection form, uses the table's
       # default id with '_selection' appended.

data/app/components/concerns/katalyst/tables/sortable.rb

@@ -33,7 +33,7 @@ module Katalyst
           super(**)
 
           @collection = collection
-          @cell = cell
+          @cell       = cell
         end
 
         def call
@@ -46,12 +46,12 @@ module Katalyst
           # Implementation inspired by pagy's `pagy_url_for` helper.
           # Preserve any existing GET parameters
           # CAUTION: these parameters are not sanitised
-          sort = column && collection.toggle_sort(column)
-          params = if sort && !sort.eql?(collection.default_sort)
-                     request.GET.merge("sort" => sort).except("page")
-                   else
-                     request.GET.except("page", "sort")
-                   end
+          sort         = column && collection.toggle_sort(column)
+          params       = if sort && !sort.eql?(collection.default_sort)
+                           request.GET.merge("sort" => sort).except("page")
+                         else
+                           request.GET.except("page", "sort")
+                         end
           query_string = params.empty? ? "" : "?#{Rack::Utils.build_nested_query(params)}"
 
           "#{request.path}#{query_string}"

data/app/components/katalyst/table_component.rb

@@ -61,10 +61,10 @@ module Katalyst
       # caption: true means render the caption, caption: false means no caption, if a hash, passes as options
       @caption_options = caption
 
-      @header_row_callbacks = []
-      @body_row_callbacks = []
+      @header_row_callbacks      = []
+      @body_row_callbacks        = []
       @header_row_cell_callbacks = []
-      @body_row_cell_callbacks = []
+      @body_row_cell_callbacks   = []
 
       super(generate_ids:, object_name:, partial:, as:, **)
     end

data/app/components/katalyst/tables/cell_component.rb

@@ -11,10 +11,10 @@ module Katalyst
         super(**)
 
         @collection = collection
-        @row = row
-        @column = column
-        @record = record
-        @heading = heading
+        @row        = row
+        @column     = column
+        @record     = record
+        @heading    = heading
 
         if @row.header?
           @label = Label.new(collection:, column:, label:)

data/app/components/katalyst/tables/cells/date_time_component.rb

@@ -12,7 +12,7 @@ module Katalyst
         def initialize(format:, relative:, **)
           super(**)
 
-          @format = format
+          @format   = format
           @relative = relative
         end
 

data/app/components/katalyst/tables/cells/number_component.rb

@@ -12,7 +12,7 @@ module Katalyst
         def initialize(format:, options:, **)
           super(**)
 
-          @format = format
+          @format  = format
           @options = options
         end
 

data/app/components/katalyst/tables/cells/select_component.rb

@@ -7,7 +7,7 @@ module Katalyst
         def initialize(params:, form_id:, **)
           super(**)
 
-          @params = params
+          @params  = params
           @form_id = form_id
         end
 

data/app/components/katalyst/tables/label.rb

@@ -5,8 +5,8 @@ module Katalyst
     class Label
       def initialize(collection:, column:, label: nil)
         @collection = collection
-        @column = column
-        @label = label
+        @column     = column
+        @label      = label
       end
 
       def value

data/app/components/katalyst/tables/query_component.rb

@@ -63,7 +63,7 @@ module Katalyst
       # Caution: requires config.view_component.capture_compatibility_patch_enabled to be set
       def with_form(model: collection, url: @url, method: :get, **options, &block)
         @form_options = { model:, url:, method:, **options }
-        @form_block = block
+        @form_block   = block
       end
 
       def with_modal(collection: self.collection, **, &)

data/app/helpers/katalyst/tables/frontend.rb

@@ -35,7 +35,7 @@ module Katalyst
                      **,
                      &)
         component ||= default_table_component_class
-        component = component.new(collection:, header:, caption:, generate_ids:, object_name:, partial:, as:, **)
+        component   = component.new(collection:, header:, caption:, generate_ids:, object_name:, partial:, as:, **)
 
         render(component, &)
       end
@@ -81,7 +81,7 @@ module Katalyst
       # @yieldparam [nil, Object] nil for the header column, or the given model for the value column
       def summary_table_with(model:, **, &)
         component ||= default_summary_table_component_class
-        component = component.new(model:, **)
+        component   = component.new(model:, **)
 
         render(component, &)
       end

data/app/models/concerns/katalyst/tables/collection/has_params.rb

@@ -32,11 +32,10 @@ module Katalyst
 
         # Returns a hash of the current attributes that have changed from defaults.
         # This uses Refinements internally so it needs to be exposed publicly with this super call.
-        # rubocop:disable Lint/UselessMethodDefinition
+        # rubocop:disable-next Lint/UselessMethodDefinition
         def to_params
           super
         end
-        # rubocop:enable Lint/UselessMethodDefinition
       end
     end
   end

data/app/models/concerns/katalyst/tables/collection/pagination.rb

@@ -46,7 +46,7 @@ module Katalyst
         class Paginate # :nodoc:
           # Pagy is not a required gem unless you're using pagination
           # Expect to see NoMethodError failures if pagy is not available
-          if (pagy_method = "Pagy::Method".safe_constantize)
+          if (pagy_method     = "Pagy::Method".safe_constantize)
             include(pagy_method)
           elsif (pagy_backend = "Pagy::Backend".safe_constantize)
             include(pagy_backend)

data/app/models/concerns/katalyst/tables/collection/query/parser.rb

@@ -11,8 +11,8 @@ module Katalyst
 
           def initialize(collection)
             @collection = collection
-            @tagged = {}
-            @untagged = []
+            @tagged     = {}
+            @untagged   = []
           end
 
           # @param query [String]

data/app/models/concerns/katalyst/tables/collection/query/untagged_literal.rb

@@ -10,7 +10,7 @@ module Katalyst
           def initialize(value:, start:)
             @value = value
             @start = start
-            @end = start + value.length
+            @end   = start + value.length
           end
 
           def literal?

data/app/models/concerns/katalyst/tables/collection/query/value_parser.rb

@@ -8,7 +8,7 @@ module Katalyst
           attr_accessor :query, :key
 
           def initialize(key:, start:)
-            @key = key
+            @key   = key
             @start = start
           end
 

data/app/models/katalyst/tables/suggestions/constant_value.rb

@@ -10,7 +10,7 @@ module Katalyst
           super(value)
 
           @attribute_type = type
-          @name = name
+          @name           = name
         end
 
         def type

data/app/models/katalyst/tables/suggestions/custom_value.rb

@@ -9,7 +9,7 @@ module Katalyst
         def initialize(value, name:, type:)
           super(value)
 
-          @name = name
+          @name           = name
           @attribute_type = type
         end
 

data/app/models/katalyst/tables/suggestions/database_value.rb

@@ -10,7 +10,7 @@ module Katalyst
           super(value)
 
           @attribute_type = type
-          @name = name
+          @name           = name
         end
 
         def type

data/lib/katalyst/tables/collection/type/enum.rb

@@ -16,12 +16,12 @@ module Katalyst
           end
 
           def suggestions(scope, attribute)
-            model = scope.model
+            model  = scope.model
             column = attribute.name
 
             if attribute.name.include?(".")
               table_name, column = attribute.name.split(".")
-              model = scope.model.reflections[table_name].klass
+              model              = scope.model.reflections[table_name].klass
 
               raise(ArgumentError, "Unknown association '#{table_name}' for #{scope.model}") unless model
             end

data/lib/katalyst/tables/collection/type/helpers/range.rb

@@ -86,7 +86,7 @@ module Katalyst
               # when a value that accepts multiple is given a range, it double-packs the value so we get ..[0]
               # unpack the array value
               from = from.first if from.is_a?(::Array) && from.length == 1
-              to = to.first if to.is_a?(::Array) && to.length == 1
+              to   = to.first if to.is_a?(::Array) && to.length == 1
               (from..to)
             end
           end

data/lib/katalyst/tables/collection/type/search.rb

@@ -6,11 +6,10 @@ module Katalyst
       module Type
         class Search < Value
           # @overwrite Value.initialize() to require scope
-          # rubocop:disable Lint/UselessMethodDefinition
+          # rubocop:disable-next Lint/UselessMethodDefinition
           def initialize(scope:, **)
             super
           end
-          # rubocop:enable Lint/UselessMethodDefinition
 
           def type
             :search

data/lib/katalyst/tables/collection/type/string.rb

@@ -13,7 +13,7 @@ module Katalyst
           def initialize(exact: false, **)
             super(**)
 
-            @exact = exact
+            @exact    = exact
             @delegate = ActiveModel::Type::String.new
           end
 

data/lib/katalyst/tables/collection/type/value.rb

@@ -12,7 +12,7 @@ module Katalyst
           def initialize(scope: nil, filter: true)
             super()
 
-            @scope = scope
+            @scope      = scope
             @filterable = filter
           end
 
@@ -52,12 +52,12 @@ module Katalyst
           end
 
           def suggestions(scope, attribute, limit: 10, order: :asc)
-            model = scope.model
+            model  = scope.model
             column = attribute.name
 
             if attribute.name.include?(".")
               table_name, column = attribute.name.split(".")
-              model = scope.model.reflections[table_name].klass
+              model              = scope.model.reflections[table_name].klass
 
               raise(ArgumentError, "Unknown association '#{table_name}' for #{scope.model}") unless model
 

data/lib/katalyst/tables/config.rb

@@ -27,7 +27,7 @@ module Katalyst
           Katalyst::Tables::Sortable
         ]
 
-        self.date_format = :default
+        self.date_format     = :default
         self.datetime_format = :default
       end
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-tables
 version: !ruby/object:Gem::Version
-  version: 3.12.1
+  version: 3.13.1
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -37,8 +37,10 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 4.0.0
-description: HTML table generator for building tabular index views with filtering,
+description: 'HTML table generator for building tabular index views with filtering,
   sorting, and pagination.
+
+  '
 email:
 - devs@katalyst.com.au
 executables: []
@@ -182,7 +184,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.6
+rubygems_version: 4.0.16
 specification_version: 4
 summary: HTML table generator for Rails views
 test_files: []