katalyst-tables 3.7.0 → 3.8.0

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

@@ -58,7 +58,7 @@ module Katalyst
         end
 
         def default_html_attributes
-          { data: { turbo_action: "replace" } }
+          { class: "sortable", data: { turbo_action: "replace" } }
         end
       end
     end

data/app/components/katalyst/summary_table_component.rb

@@ -21,8 +21,6 @@ module Katalyst
       super(collection: [model], **)
 
       @summary_rows = []
-
-      update_html_attributes(class: "summary-table")
     end
 
     def with_cell(cell, &)
@@ -40,5 +38,9 @@ module Katalyst
         @index += 1
       end
     end
+
+    def default_html_attributes
+      { class: "katalyst--summary-table" }
+    end
   end
 end

data/app/components/katalyst/table_component.rb

@@ -230,7 +230,7 @@ module Katalyst
     # @example Render a generic text column for any value that supports `to_s`
     #   <% row.enum :status %>
     #   <%# label => <th>Status</th> %>
-    #   <%# data => <td class="type-enum"><span data-enum="status" data-value="published">Published</span></td> %>
+    #   <%# data => <td data-cell-type="enum"><span data-enum="status" data-value="published">Published</span></td> %>
     def enum(column, label: nil, heading: false, **, &)
       with_cell(Tables::Cells::EnumComponent.new(
                   collection:, row:, column:, record:, label:, heading:, **,
@@ -317,6 +317,10 @@ module Katalyst
 
     private
 
+    def default_html_attributes
+      { class: "katalyst--table" }
+    end
+
     # Extension point for subclasses and extensions to customize header row rendering.
     def add_header_row_callback(&block)
       @header_row_callbacks << block

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

@@ -12,7 +12,7 @@ module Katalyst
         private
 
         def default_html_attributes
-          { class: "type-boolean" }
+          { data: { cell_type: "boolean" } }
         end
       end
     end

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

@@ -40,7 +40,7 @@ module Katalyst
         private
 
         def default_html_attributes
-          { class: "type-currency" }
+          { data: { cell_type: "currency" } }
         end
       end
     end

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

@@ -26,7 +26,7 @@ module Katalyst
 
         def default_html_attributes
           {
-            class: "type-date",
+            data:  { cell_type: "date" },
             title: (absolute_time if row.body? && @relative && value.present? && days_ago_in_words(value).present?),
           }
         end

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

@@ -28,7 +28,7 @@ module Katalyst
 
         def default_html_attributes
           {
-            class: "type-datetime",
+            data:  { cell_type: "datetime" },
             title: (absolute_time if row.body? && @relative && today?),
           }
         end

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

@@ -15,7 +15,7 @@ module Katalyst
         private
 
         def default_html_attributes
-          { class: "type-enum" }
+          { data: { cell_type: "enum" } }
         end
       end
     end

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

@@ -44,7 +44,7 @@ module Katalyst
         private
 
         def default_html_attributes
-          { class: "type-number" }
+          { data: { cell_type: "number" } }
         end
       end
     end

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

@@ -18,11 +18,11 @@ module Katalyst
 
         def default_html_attributes
           if @row.header?
-            { class: "ordinal" }
+            { data: { cell_type: "ordinal" } }
           else
             {
-              class: "ordinal",
-              data:  {
+              data: {
+                cell_type:                                    "ordinal",
                 controller:                                   Orderable::ITEM_CONTROLLER,
                 "#{Orderable::ITEM_CONTROLLER}-params-value": params.to_json,
               },

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

@@ -11,7 +11,7 @@ module Katalyst
 
         def default_html_attributes
           {
-            class: "type-rich-text",
+            data:  { cell_type: "rich-text" },
             title: (value.to_plain_text unless row.header?),
           }
         end

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

@@ -24,16 +24,16 @@ module Katalyst
         def default_html_attributes
           if @row.header?
             {
-              class: "selection",
-              data:  {
+              data: {
+                cell_type: "selection",
                 "#{Selectable::TABLE_CONTROLLER}-target" => "header",
                 action: "change->#{Selectable::TABLE_CONTROLLER}#toggleHeader",
               },
             }
           else
             {
-              class: "selection",
-              data:  {
+              data: {
+                cell_type: "selection",
                 controller: Selectable::ITEM_CONTROLLER,
                 action: "change->#{Selectable::ITEM_CONTROLLER}#change",
                 "#{Selectable::ITEM_CONTROLLER}-params-value" => @params.to_json,

data/app/components/katalyst/tables/query/input_component.html.erb

@@ -15,5 +15,5 @@
       ) %>
   <div aria-hidden="true" class="highlight" data-tables--query-input-target="highlight"><%= form.object.query %></div>
   <%= form.hidden_field(:p) %>
-  <%= form.button("Apply", type: :submit, name: nil, tabindex: -1) %>
+  <%= form.button("Apply", type: :submit, name: nil, tabindex: -1, class: "button") %>
 <% end %>

data/app/components/katalyst/tables/query/modal_component.html.erb

@@ -9,7 +9,7 @@
   <div class="content">
     <% if suggestions? %>
       <h4 id="suggestions-title"><%= t(".suggestions_title") %></h4>
-      <ul id="suggestions" role="listbox" aria-labelledby="suggestions-title">
+      <ul id="suggestions" class="suggestions" role="listbox" aria-labelledby="suggestions-title">
         <% suggestions.each do |suggestion| %>
           <%= render suggestion %>
         <% end %>

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

@@ -80,7 +80,8 @@ module Katalyst
 
       def default_html_attributes
         {
-          data: {
+          class: "katalyst--tables--query",
+          data:  {
             controller:   "tables--query",
             turbo_action: :replace,
             action:       %w[

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

@@ -7,6 +7,8 @@ module Katalyst
         class Date < Value
           include Helpers::Range
 
+          ISO_DATE = /\A(?<year>\d{4})-(?<month>\d\d)-(?<day>\d\d)\z/
+
           define_range_patterns /\d{4}-\d\d-\d\d/
 
           def type
@@ -34,8 +36,6 @@ module Katalyst
 
           private
 
-          ISO_DATE = /\A(?<year>\d{4})-(?<month>\d\d)-(?<day>\d\d)\z/
-
           def cast_value(value)
             return value unless value.is_a?(::String)
 

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-tables
 version: !ruby/object:Gem::Version
-  version: 3.7.0
+  version: 3.8.0
 platform: ruby
 authors:
 - Katalyst Interactive
 bindir: bin
 cert_chain: []
-date: 2025-01-13 00:00:00.000000000 Z
+date: 2025-03-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: katalyst-html-attributes
@@ -53,19 +53,13 @@ files:
 - app/assets/builds/katalyst/tables.min.js
 - app/assets/builds/katalyst/tables.min.js.map
 - app/assets/config/katalyst-tables.js
-- app/assets/stylesheets/katalyst/tables/_index.scss
-- app/assets/stylesheets/katalyst/tables/_ordinal.scss
-- app/assets/stylesheets/katalyst/tables/_query.scss
-- app/assets/stylesheets/katalyst/tables/_select.scss
-- app/assets/stylesheets/katalyst/tables/_summary.scss
-- app/assets/stylesheets/katalyst/tables/_table.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_boolean.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_currency.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_date.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_datetime.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_enum.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_index.scss
-- app/assets/stylesheets/katalyst/tables/typed-columns/_number.scss
+- app/assets/images/katalyst/tables/icons/sort-asc.svg
+- app/assets/images/katalyst/tables/icons/sort-desc.svg
+- app/assets/stylesheets/katalyst/_tables.scss
+- app/assets/stylesheets/katalyst/tables.css
+- app/assets/stylesheets/katalyst/tables/query.css
+- app/assets/stylesheets/katalyst/tables/summary.css
+- app/assets/stylesheets/katalyst/tables/table.css
 - app/components/concerns/katalyst/tables/has_table_content.rb
 - app/components/concerns/katalyst/tables/identifiable.rb
 - app/components/concerns/katalyst/tables/orderable.rb

data/app/assets/stylesheets/katalyst/tables/_index.scss

@@ -1,3 +0,0 @@
-@use "query";
-@use "table";
-@use "summary";

data/app/assets/stylesheets/katalyst/tables/_ordinal.scss

@@ -1,38 +0,0 @@
-$width: 2rem !default;
-$time: 125ms !default;
-
-table {
-  tr {
-    transition:
-      top $time ease-in-out,
-      transform $time ease-in-out;
-  }
-
-  tr[dragging] {
-    transition: transform $time ease-in-out;
-    filter: drop-shadow(0 0 0.5rem var(--row-border-color));
-    transform: scale(1.01);
-    td {
-      box-shadow: none;
-    }
-  }
-
-  th.ordinal {
-    width: $width;
-    padding-left: 0;
-    a {
-      width: $width;
-      height: 3rem;
-    }
-    a::after {
-      margin-left: 0.4rem;
-    }
-  }
-
-  td.ordinal {
-    width: $width;
-    padding-left: 0;
-    cursor: grab;
-    text-align: center;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/_query.scss

@@ -1,142 +0,0 @@
-[data-controller="tables--query"] {
-  position: relative;
-
-  .query-input {
-    position: relative;
-    display: grid;
-    grid-template-areas: "input button";
-    grid-template-columns: 1fr auto;
-
-    [role="combobox"] {
-      grid-area: input;
-      background: transparent;
-      caret-color: black;
-      resize: none;
-    }
-
-    &[data-connected] [role="combobox"] {
-      color: transparent;
-    }
-
-    button {
-      grid-area: button;
-      flex: 0;
-    }
-
-    .highlight {
-      grid-area: input;
-      visibility: hidden;
-      border: 1px solid transparent;
-      color: black;
-      z-index: -1;
-      font-size: 1rem;
-      padding: 2px;
-
-      overflow-wrap: break-word;
-      white-space: pre-wrap;
-
-      .value {
-        color: #666666;
-      }
-    }
-
-    &[data-connected] .highlight {
-      visibility: visible;
-    }
-  }
-}
-
-.query-modal {
-  --suggestion-hover: rgba(0, 0, 0, 0.1);
-  --suggestion-selected: #888;
-
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  border: 1px solid rgba(0, 0, 0, 0.16);
-  box-shadow:
-    0 3px 6px rgba(0, 0, 0, 0.16),
-    0 3px 6px rgba(0, 0, 0, 0.23);
-  background: white;
-  border-radius: 4px;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.125s;
-  pointer-events: none;
-  display: grid;
-  grid-template-areas: "header" "content" "footer";
-  grid-template-rows: auto 1fr auto;
-
-  &[data-open] {
-    opacity: 1;
-    pointer-events: unset;
-  }
-
-  header {
-    grid-area: header;
-  }
-
-  .content {
-    grid-area: content;
-    padding-top: 0.5rem;
-  }
-
-  h4 {
-    padding-inline: 1rem;
-  }
-
-  ul {
-    margin-block: 0;
-    padding-inline-start: 0;
-    list-style: none;
-
-    li {
-      position: relative;
-      display: flex;
-      align-items: baseline;
-      padding-inline: 1rem;
-      padding-block: 0.125rem;
-
-      &[aria-selected="true"],
-      &:hover {
-        outline: none;
-        background: var(--suggestion-hover);
-      }
-
-      &[aria-selected="true"]::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 4px;
-        background: var(--suggestion-selected);
-      }
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .error {
-    background: #fff2f2;
-    border-bottom: 1px solid #fdd3d3;
-    padding: 0.5rem 1rem;
-
-    code {
-      font-weight: bold;
-    }
-  }
-
-  footer {
-    grid-area: footer;
-    display: flex;
-    justify-content: flex-start;
-    padding-inline: 1rem;
-    padding-block: 0.5rem;
-    border-top: 1px solid #d3d3d3;
-    font-size: small;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/_select.scss

@@ -1,7 +0,0 @@
-:where(th.selection, td.selection) {
-  width: 2rem;
-
-  label {
-    display: block;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/_table.scss

@@ -1,128 +0,0 @@
-@use "ordinal" as *;
-@use "select" as *;
-@use "typed-columns";
-
-$grey: #f0ecf3 !default;
-
-$table-header-color: transparent !default;
-$row-border-color: $grey !default;
-$row-height: 48px !default;
-$cell-spacing: 0.5rem !default;
-$tag-color: $grey !default;
-$on-tag-color: black !default;
-
-$width-small: 6rem !default;
-$width-medium: 12rem !default;
-$width-large: 16rem !default;
-
-table {
-  --row-height: #{$row-height};
-  --cell-spacing: #{$cell-spacing};
-  --table-header-color: #{$table-header-color};
-  --row-border-color: #{$row-border-color};
-  --tag-color: #{$tag-color};
-  --on-tag-color: #{$on-tag-color};
-
-  --width-small: #{$width-small};
-  --width-medium: #{$width-medium};
-  --width-large: #{$width-large};
-}
-
-table {
-  border: none;
-  table-layout: fixed;
-  border-collapse: collapse;
-  text-align: left;
-  width: 100%;
-
-  thead {
-    background: var(--table-header-color);
-  }
-
-  tr {
-    height: var(--row-height);
-    line-height: var(--row-height);
-  }
-
-  th,
-  td {
-    border: none;
-    box-shadow: inset 0px -1px 0px var(--row-border-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
-    white-space: nowrap;
-    background-color: white;
-    padding-right: var(--cell-spacing);
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    > a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-decoration: none;
-    }
-
-    > img,
-    > a > img {
-      max-height: 3rem;
-      padding: 0;
-    }
-
-    > .trix-content {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  th {
-    font-weight: bold;
-
-    :where(&.width-s) {
-      width: var(--width-small);
-    }
-
-    :where(&.width-m) {
-      width: var(--width-medium);
-    }
-
-    :where(&.width-l) {
-      width: var(--width-large);
-    }
-  }
-
-  thead a.ascending:after,
-  [data-sort="asc"] a::after {
-    display: inline-block;
-    content: " ";
-    position: relative;
-    margin-left: 1rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
-    background-size: 14px 14px;
-    height: 14px;
-    width: 14px;
-    top: 0;
-    transform: rotate(180deg);
-  }
-
-  thead a.descending:after,
-  [data-sort="desc"] a::after {
-    display: inline-block;
-    content: " ";
-    position: relative;
-    margin-left: 1rem;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
-    background-size: 14px 14px;
-    height: 14px;
-    width: 14px;
-    top: 4px;
-  }
-
-  caption {
-    margin: 2rem 0;
-  }
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_boolean.scss

@@ -1,4 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-boolean, td.type-boolean) {
-  width: var(--width-small);
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_currency.scss

@@ -1,8 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-currency, td.type-currency) {
-  width: var(--width-small);
-}
-
-:where(thead th.type-currency, td.type-currency) {
-  text-align: right;
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_date.scss

@@ -1,4 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-date, td.type-date) {
-  width: var(--width-small);
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_datetime.scss

@@ -1,4 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-datetime, td.type-datetime) {
-  width: var(--width-medium);
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_enum.scss

@@ -1,19 +0,0 @@
-:where(th.type-enum, td.type-enum) {
-  width: var(--width-small);
-}
-
-:where(td.type-enum) {
-  // ensure ellipsis is the correct color
-  color: var(--on-tag-color);
-
-  small {
-    background: var(--tag-color);
-    border-radius: 0.25rem;
-    padding: 0.25rem;
-    font-size: small;
-  }
-}
-
-table td.type-enum {
-  text-overflow: unset;
-}

data/app/assets/stylesheets/katalyst/tables/typed-columns/_index.scss

@@ -1,6 +0,0 @@
-@use "boolean";
-@use "currency";
-@use "date";
-@use "datetime";
-@use "enum";
-@use "number";

data/app/assets/stylesheets/katalyst/tables/typed-columns/_number.scss

@@ -1,8 +0,0 @@
-// where psuedo selector has a specificity of 0 so it can be easily overwritten with simple selectors
-:where(th.type-number, td.type-number) {
-  width: var(--width-small);
-}
-
-:where(thead th.type-number, td.type-number) {
-  text-align: right;
-}