yummy-guide-generic-administrate 0.8.14 → 0.8.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31c95c124f946da973981b50eaf0247b854e0eca67d35a1fa2d120c58567d366
-  data.tar.gz: 4a27c58133a3ec86c2fd483cfd80cef1c45a6655d91316b790dfe0732c0a1d29
+  metadata.gz: bea5c7cfc5273ba6a7f6cf59dacded8b77c7ce8c728859b689ddd8e504b6e4fc
+  data.tar.gz: e39d3ae5f41ca38513f96e5160ca2ac8949dac0faebee99cebb63e6e8645b66d
 SHA512:
-  metadata.gz: b0a893584bf5d7b1db8baee814bb2802ec78e1ce2c61701e411b4166b235d8ab9fba5d5fe4304d837a73fd9ea0d03a787e02912d27d6ead5325d238bc0b3b21e
-  data.tar.gz: 854c72827dafd518d89c481a7d54da30245fb360e8a717e80b58bb18ac4e82b17e7527bababf8f9bd867b9077ca6d9134de899838de20db5ba6f9e7517a281ad
+  metadata.gz: 07caa0d706ce90f07bfed3d380c1e3ab7a8b527e2285bb856b66e19c6a4a5334ff700c38df3a9e22d45cdaaf78edb2acf3cbaf271c8097d223e1f822c1d1cca9
+  data.tar.gz: bdbebfc1293d49c7bbd12d495d478edb3295e3b2a8a4b193594d1883a63c57c0fbb5f611d569d9ac9c5740e814245c30252af2c8e1ee51a83b61243091d4339e

data/app/assets/javascripts/yummy_guide_administrate/column_resizer.js

@@ -1,5 +1,6 @@
 (function() {
   var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
+  var TANSTACK_TABLE_ATTRIBUTE = 'data-yummy-guide-administrate-tanstack-table';
   var CSS_STICKY_TABLE_SELECTOR = '[data-css-sticky-table]';
   var MAIN_CONTENT_SELECTOR = '.main-content';
   var STICKY_PAGE_HEADER_SELECTOR = '.main-content__header--sticky-table-layout, [data-reservations-sticky-header], .main-content__header';
@@ -544,12 +545,15 @@
 
   function refreshCssStickyLeftColumns(table) {
     if (!table || table.getAttribute('aria-hidden') === 'true') return;
+    if (table.hasAttribute(TANSTACK_TABLE_ATTRIBUTE)) return;
 
     refreshCssStickyLeftColumnSet(table, 'sticky-left', '--sticky-left', '--sticky-width');
     refreshCssStickyLeftColumnSet(table, 'sticky-left-mobile', '--sticky-mobile-left', '--sticky-mobile-width');
   }
 
   function refreshExternalStickyLeftColumns(table, options) {
+    if (table && table.hasAttribute(TANSTACK_TABLE_ATTRIBUTE)) return false;
+
     var api = window.YummyGuideAdministrateStickyLeftColumns;
     var settings = options || {};
 
@@ -571,6 +575,16 @@
   }
 
   function refreshTableWidthLayout(table, options) {
+    if (table && table.hasAttribute(TANSTACK_TABLE_ATTRIBUTE)) {
+      table.dispatchEvent(new CustomEvent('yummy-guide-administrate:column-width-change', {
+        bubbles: true,
+        detail: {
+          columnId: options && options.columnId,
+          width: options && options.width
+        }
+      }));
+    }
+
     refreshCssStickyLeftColumns(table);
     refreshExternalStickyLeftColumns(table, options);
     refreshStickyHeaderLayoutForTable(table);

data/app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js

@@ -1,5 +1,5 @@
 (function() {
-  var TABLE_SELECTOR = "table[data-fixed-columns-count]";
+  var TABLE_SELECTOR = "table[data-fixed-columns-count]:not([data-yummy-guide-administrate-tanstack-table])";
   var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
   var resizeObservers = new WeakMap();
   var suppressedResizeTables = new WeakMap();

data/app/assets/stylesheets/yummy_guide_administrate/components.scss

@@ -140,6 +140,11 @@
     box-shadow: 0 calc(0px - var(--admin-sticky-page-header-top, 0px)) 0 var(--admin-sticky-page-header-top, 0px) var(--admin-page-background, #f6f7f7);
   }
 
+  .app-container > .main-content:has(> .main-content__header > .main-content__header-pagination),
+  body.admin-body > main.main-content:has(> .main-content__header > .main-content__header-pagination) {
+    --admin-sticky-page-header-height: 8rem;
+  }
+
   .main-content__header--sticky-table-layout + .main-content__body,
   [data-reservations-sticky-header] + .main-content__body,
   .app-container > .main-content:has(> .main-content__body--flush [data-css-sticky-table]) > .main-content__body--flush,
@@ -188,6 +193,57 @@
     --admin-sticky-page-header-height: 6.75rem;
     --admin-sticky-page-header-z-index: 10;
   }
+
+  .app-container > .main-content:has(> .main-content__header > .main-content__header-pagination),
+  body.admin-body > main.main-content:has(> .main-content__header > .main-content__header-pagination) {
+    --admin-sticky-page-header-height: 9rem;
+  }
+}
+
+.main-content__header:has(> .main-content__header-pagination) {
+  padding-bottom: calc(var(--admin-sticky-page-header-pagination-height, 2.5rem) + 0.75rem);
+}
+
+.main-content__header-pagination {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  inset-block-end: 0.5rem;
+  inset-inline-start: 50%;
+  justify-content: center;
+  max-inline-size: calc(100% - 2rem);
+  pointer-events: none;
+  position: absolute;
+  transform: translateX(-50%);
+  width: max-content;
+  z-index: 1;
+}
+
+.main-content__header-pagination .pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.5rem;
+  justify-content: center;
+  margin: 0;
+  max-inline-size: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  pointer-events: auto;
+  text-align: center;
+}
+
+.main-content__header-pagination .pagination .first,
+.main-content__header-pagination .pagination .prev,
+.main-content__header-pagination .pagination .page,
+.main-content__header-pagination .pagination .next,
+.main-content__header-pagination .pagination .last {
+  flex: 0 0 auto;
+  inline-size: auto;
+  margin: 0;
+  max-inline-size: none;
+  white-space: nowrap;
+  width: auto;
 }
 
 .scroll-table {
@@ -589,7 +645,23 @@ td.cell-data:hover .admin-copy-cell__button:not([disabled]),
   left: calc(var(--admin-sticky-table-left-offset, 0px) + var(--sticky-left, 0px));
 }
 
+// TanStackを利用するテーブルでは、製品側のReact entrypointがテーブル要素に
+// 設定したCSS変数を使う。仮想行の生成ごとにセルへleftを直接書き込まない。
+@for $index from 1 through 6 {
+  table[data-yummy-guide-administrate-tanstack-table] > :is(thead, tbody, tfoot) > tr:not(.js-virtualized-table-spacer) > :nth-child(#{$index}).sticky-left {
+    --sticky-left: var(--yummy-guide-administrate-tanstack-column-#{$index}-left) !important;
+    --sticky-width: var(--yummy-guide-administrate-tanstack-column-#{$index}-width) !important;
+  }
+}
+
 @media (max-width: 767px) {
+  @for $index from 1 through 6 {
+    table[data-yummy-guide-administrate-tanstack-table] > :is(thead, tbody, tfoot) > tr:not(.js-virtualized-table-spacer) > :nth-child(#{$index}).sticky-left-mobile {
+      --sticky-mobile-left: var(--yummy-guide-administrate-tanstack-column-#{$index}-left) !important;
+      --sticky-mobile-width: var(--yummy-guide-administrate-tanstack-column-#{$index}-width) !important;
+    }
+  }
+
   @for $count from 1 through 6 {
     @for $index from 1 through $count {
       .scroll-table table[data-fixed-columns-count="#{$count}"] tr > :nth-child(#{$index}):not(.sticky-left),

data/app/helpers/yummy_guide/administrate/collection_helper.rb

@@ -98,6 +98,14 @@ module YummyGuide
         )
       end
 
+      # TanStack Table を利用する製品側テーブルが、従来の固定列JSではなく
+      # CSS変数経由で固定位置を受け取るためのopt-in属性を返す。
+      def yummy_guide_administrate_tanstack_table_attributes
+        {
+          "data-yummy-guide-administrate-tanstack-table" => "true"
+        }
+      end
+
       def yummy_guide_administrate_collection_table_fixed_columns_count(page:, collection_presenter:)
         yummy_guide_administrate_collection_fixed_columns_count_for(
           page: page,

data/app/views/administrate/application/_header_pagination.html.erb

@@ -0,0 +1,7 @@
+<% pagination = local_assigns[:pagination] %>
+
+<% if pagination.present? %>
+  <div class="main-content__header-pagination">
+    <%= pagination %>
+  </div>
+<% end %>

data/app/views/administrate/application/_index_header.html.erb

@@ -0,0 +1,30 @@
+<% content_for(:title) do %>
+  <%= display_resource_name(page.resource_name) %>
+<% end %>
+
+<header class="main-content__header main-content__header--sticky-table-layout">
+  <h1 class="main-content__page-title" id="page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <% if show_search_bar %>
+    <%= render(
+      "search",
+      search_term: search_term,
+      resource_name: display_resource_name(page.resource_name)
+    ) %>
+  <% end %>
+
+  <div>
+    <%= link_to(
+      t(
+        "administrate.actions.new_resource",
+        name: display_resource_name(page.resource_name, singular: true).downcase
+      ),
+      [:new, namespace, page.resource_path.to_sym],
+      class: "button",
+    ) if accessible_action?(new_resource, :new) %>
+  </div>
+
+  <%= render("administrate/application/header_pagination", pagination: local_assigns[:pagination]) %>
+</header>

data/app/views/administrate/application/index.html.erb

@@ -0,0 +1,22 @@
+<% pagination = render("pagination", resources: resources) %>
+
+<%=
+  render("index_header",
+    resources: resources,
+    search_term: search_term,
+    page: page,
+    show_search_bar: show_search_bar,
+    pagination: pagination,
+  )
+%>
+
+<section class="main-content__body main-content__body--flush">
+  <%= render(
+    "collection",
+    collection_presenter: page,
+    collection_field_name: resource_name,
+    page: page,
+    resources: resources,
+    table_title: "page-title"
+  ) %>
+</section>

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.8.14"
+    VERSION = "0.8.16"
   end
 end

data/spec/yummy_guide/administrate/collection_helper_spec.rb

@@ -26,6 +26,15 @@ RSpec.describe YummyGuide::Administrate::CollectionHelper do
     end.new
   end
 
+  describe "#yummy_guide_administrate_tanstack_table_attributes" do
+    # TanStack管理のテーブルだけが従来の固定列JSを回避できる属性を返すことを確認する
+    it "returns the TanStack opt-in data attribute" do
+      expect(helper_host.yummy_guide_administrate_tanstack_table_attributes).to eq(
+        "data-yummy-guide-administrate-tanstack-table" => "true"
+      )
+    end
+  end
+
   describe "#yummy_guide_administrate_collection_table_fixed_columns_count" do
     # dashboard の固定列数が表示列数を超えていても、実際の列数で打ち止めになることを確認する
     it "caps the fixed column count by the number of visible attributes" do

data/spec/yummy_guide/administrate/column_resizer_asset_spec.rb

@@ -57,6 +57,18 @@ RSpec.describe "column resizer assets" do
     expect(javascript_source).not_to include("refreshStickyLeftColumnsForWidth")
   end
 
+  # TanStack管理テーブルは仮想行ごとの固定セル再計算を避け、幅変更イベントだけを通知することを確認する
+  it "delegates TanStack table pinning updates to the product entrypoint" do
+    sticky_left_columns_source = File.read(File.expand_path("../../../app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js", __dir__))
+    stylesheet_source = File.read(File.expand_path("../../../app/assets/stylesheets/yummy_guide_administrate/components.scss", __dir__))
+
+    expect(sticky_left_columns_source).to include('table[data-fixed-columns-count]:not([data-yummy-guide-administrate-tanstack-table])')
+    expect(javascript_source).to include("TANSTACK_TABLE_ATTRIBUTE = 'data-yummy-guide-administrate-tanstack-table'")
+    expect(javascript_source).to include("yummy-guide-administrate:column-width-change")
+    expect(javascript_source).to include("if (table.hasAttribute(TANSTACK_TABLE_ATTRIBUTE)) return;")
+    expect(stylesheet_source).to include('--yummy-guide-administrate-tanstack-column-#{$index}-left')
+  end
+
   # ドラッグ中は実テーブルを再レイアウトせず、プレビューだけを更新することを静的に確認する
   it "updates only the lightweight preview while dragging" do
     expect(javascript_source).to include("createDragPreview(sourceTable, previewHeader, startWidth, previewHeaderRect)")
@@ -358,6 +370,22 @@ RSpec.describe "column resizer assets" do
     expect(resizable_navigation_source).to include("z-index: var(--admin-navigation-z-index, 40)")
   end
 
+  # ページネーションを固定ページヘッダー下部中央に配置するCSSがあることを静的に確認する
+  it "places pagination at the bottom center of the sticky page header" do
+    expect(components_source).to include(".main-content__header-pagination")
+    expect(components_source).to include("inset-block-end: 0.5rem")
+    expect(components_source).to include("inset-inline-start: 50%")
+    expect(components_source).to include("transform: translateX(-50%)")
+    expect(components_source).to include("justify-content: center")
+    expect(components_source).to include("pointer-events: none")
+    expect(components_source).to include("pointer-events: auto")
+    expect(components_source).to include("--admin-sticky-page-header-height: 8rem")
+    expect(components_source).to include("--admin-sticky-page-header-height: 9rem")
+    expect(components_source).to include(".main-content__header:has(> .main-content__header-pagination)")
+    expect(components_source).to include("white-space: nowrap")
+    expect(components_source).to include("inline-size: auto")
+  end
+
   # 固定列リサイズ後にCSS変数のleftと幅を再計算する処理があることを静的に確認する
   it "recalculates CSS sticky-left offsets after applying column widths" do
     expect(javascript_source).to include("function refreshCssStickyLeftColumns(table)")

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.8.14
+  version: 0.8.16
 platform: ruby
 authors:
 - akatsuki-kk
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-29 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -121,6 +120,9 @@ files:
 - app/helpers/yummy_guide/administrate/filter_form_helper.rb
 - app/helpers/yummy_guide/administrate/number_input_helper.rb
 - app/helpers/yummy_guide/administrate/tooltip_helper.rb
+- app/views/administrate/application/_header_pagination.html.erb
+- app/views/administrate/application/_index_header.html.erb
+- app/views/administrate/application/index.html.erb
 - app/views/fields/number/_form.html.erb
 - app/views/fields/yummy_guide_administrate/area/picture/_form.html.erb
 - app/views/fields/yummy_guide_administrate/area/picture/_index.html.erb
@@ -169,7 +171,6 @@ metadata:
   homepage_uri: https://github.com/yummy-guide/generic-administrate
   source_code_uri: https://github.com/yummy-guide/generic-administrate
   changelog_uri: https://github.com/yummy-guide/generic-administrate
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -184,8 +185,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
-signing_key:
+rubygems_version: 4.0.21
 specification_version: 4
 summary: Shared Administrate extensions for Yummy Guide Rails apps
 test_files: []