yummy-guide-generic-administrate 0.7.1 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0a5f41bc5f403a7d4da80d9a2b66c7313a9370374e171d2916b96de8aea2a8d
-  data.tar.gz: 77c5494b19b7c2364477e394c954e5640ac737658e05ec481ecef62aafc30c59
+  metadata.gz: b23f3b7fd7d17420fdeaf7325f51f1f70b93fb86497bcdb6621b617b5086d926
+  data.tar.gz: 38004b14e38a03b882d6e84253fc63ad1a2e8480ab287ee27ced1d13e81239a7
 SHA512:
-  metadata.gz: 73ea4e2fb99ffc3e16393fc105e93b39e0812ad313f4e88f95a333ae18a10132e7207e482c956f37dad5391c8ceb6ab246724adc6e413fe8d5b012c3d45c03fc
-  data.tar.gz: e891e0b581251db97ac188c934bef264d77790b47b154e44dd57f4d82cc57e4bd1f8d5a48e1537cf710e0e585935ff10eb889c3bac690a1455d16477b979b069
+  metadata.gz: ecc7d99ccc8f23f5b4d0dd9288a9d6f870f95dc9c2d19256865828fa9a3d1f10d322fd37d627d2e85d648e13ab1fb128fb2d0430035451147fa2f4b72739bbb4
+  data.tar.gz: 05b2097517ad48edd1e8f54230bd3f2d1ea5e591dccc733d0397e1ec89d7d3b855920066296b4119c6c4b7b46572413ca07730dae2663e584cf403d1bc0f6cc9

data/README.md

@@ -138,7 +138,8 @@ engine の共通 partial に委譲します。
 
 gem 付属の collection partial をそのまま使う場合、table wrapper と table 本体に
 必要な `data-*` 属性はすでに入っています。そのため、JS / CSS を読み込めば固定
-ヘッダーは自動で有効になります。
+ヘッダーとカラム幅調整は自動で有効になります。カラム幅調整を使う場合は
+`yummy_guide_administrate/column_resizer.js` も読み込んでください。
 
 内部的には以下のような構造になります。
 
@@ -154,6 +155,8 @@ gem 付属の collection partial をそのまま使う場合、table wrapper と
 </div>
 ```
 
+複数画面で幅設定を共有したい場合は、render local に `column_width_storage_scope: "admin.reservations"` のような任意の scope 名を渡してください。
+
 #### 2. ヘッダー位置を明示したい場合
 
 固定ヘッダーの表示位置をページ上部の特定箇所に合わせたい場合は、

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

@@ -0,0 +1,610 @@
+(function() {
+  var TABLE_SELECTOR = 'table[data-fixed-columns-count]';
+  var HANDLE_CLASS = 'admin-column-resizer__handle';
+  var HEADER_CLASS = 'admin-column-resizer__header';
+  var TABLE_CLASS = 'admin-column-resizer__table';
+  var DRAGGING_BODY_CLASS = 'admin-column-resizer--dragging';
+  var FIXED_HEADER_TABLE_CLASS = 'table-fixed-header__table';
+  var STORAGE_PREFIX = 'yummyGuideAdminColumnWidths:v1:';
+  var STYLE_ELEMENT_ID = 'admin-column-resizer-rules';
+  var WIDTH_VAR_PREFIX = '--admin-column-resizer-col-';
+  var MIN_WIDTH = 48;
+  var STICKY_REFRESH_INTERVAL = 120;
+
+  var dragState = null;
+  var dragApplyFrame = null;
+  var generatedRuleCount = 0;
+  var initializedHandles = new WeakSet();
+  var tableStates = new WeakMap();
+  var stickyRefreshFrame = null;
+  var stickyRefreshTimer = null;
+  var lastStickyRefreshAt = 0;
+
+  function storageScopeForTable(table) {
+    var sourceTable = matchingSourceTable(table);
+    var scopedTable = sourceTable || table;
+    var scope = scopedTable && scopedTable.getAttribute('data-column-resizer-storage-scope');
+
+    return scope || window.location.pathname;
+  }
+
+  function storageKeyForTable(table) {
+    return STORAGE_PREFIX + storageScopeForTable(table);
+  }
+
+  function parsedWidths(rawWidths) {
+    if (!rawWidths) return {};
+
+    var widths = JSON.parse(rawWidths);
+    return widths && typeof widths === 'object' && !Array.isArray(widths) ? widths : {};
+  }
+
+  function safeReadWidths(key) {
+    try {
+      return parsedWidths(window.localStorage.getItem(key));
+    } catch (_error) {
+      return {};
+    }
+  }
+
+  function safeWriteWidths(key, widths) {
+    try {
+      if (Object.keys(widths).length === 0) {
+        window.localStorage.removeItem(key);
+      } else {
+        window.localStorage.setItem(key, JSON.stringify(widths));
+      }
+    } catch (_error) {
+      // localStorage may be unavailable in private browsing or restricted contexts.
+    }
+  }
+
+  function preciseNumber(value) {
+    return Math.round(value * 1000) / 1000;
+  }
+
+  function cssPixelValue(value) {
+    return preciseNumber(value) + 'px';
+  }
+
+  function measuredWidth(element) {
+    if (!element) return 0;
+
+    var rectWidth = element.getBoundingClientRect().width;
+    return preciseNumber(rectWidth || element.offsetWidth || 0);
+  }
+
+  function normalizedIdentifier(value) {
+    return (value || '').toString().trim().toLowerCase()
+      .replace(/[^a-z0-9]+/g, '_')
+      .replace(/^_+|_+$/g, '')
+      .slice(0, 80) || 'column';
+  }
+
+  function directCells(row) {
+    return Array.from(row.children).filter(function(cell) {
+      return cell.tagName === 'TH' || cell.tagName === 'TD';
+    });
+  }
+
+  function columnHeaders(table) {
+    var row = table.querySelector('thead tr');
+    if (!row) return [];
+
+    return directCells(row).filter(function(cell) {
+      return cell.tagName === 'TH';
+    });
+  }
+
+  function headerLabel(header) {
+    return (header.getAttribute('aria-label') || header.getAttribute('title') || header.textContent || '')
+      .trim()
+      .replace(/\s+/g, ' ');
+  }
+
+  function headerSignature(table) {
+    return columnHeaders(table).map(function(header, index) {
+      return normalizedIdentifier(header.dataset.columnId || headerLabel(header) || ('column_' + (index + 1)));
+    }).join('__');
+  }
+
+  function matchingSourceTable(table) {
+    if (!table) return null;
+    if (!table.classList.contains(FIXED_HEADER_TABLE_CLASS)) return null;
+
+    var signature = headerSignature(table);
+    return sourceTables().find(function(sourceTable) {
+      return headerSignature(sourceTable) === signature;
+    }) || null;
+  }
+
+  function tableIdentifier(table) {
+    if (table.dataset.adminColumnResizerTableId) return table.dataset.adminColumnResizerTableId;
+
+    var sourceTable = matchingSourceTable(table);
+    if (sourceTable) {
+      table.dataset.adminColumnResizerTableId = tableIdentifier(sourceTable);
+      return table.dataset.adminColumnResizerTableId;
+    }
+
+    var tableLabel = table.id ||
+      table.getAttribute('aria-labelledby') ||
+      table.getAttribute('data-admin-column-resizer-table') ||
+      table.getAttribute('data-fixed-header-source');
+
+    if (!tableLabel) {
+      var index = sourceTables().indexOf(table);
+      tableLabel = 'table_' + (index >= 0 ? index + 1 : allTrackedTables().indexOf(table) + 1);
+    }
+
+    table.dataset.adminColumnResizerTableId = normalizedIdentifier(tableLabel);
+    return table.dataset.adminColumnResizerTableId;
+  }
+
+  function fallbackColumnId(table, header, index) {
+    return [
+      'fallback',
+      tableIdentifier(table),
+      index + 1,
+      normalizedIdentifier(headerLabel(header))
+    ].join('.');
+  }
+
+  function headerColumnId(header) {
+    return header.dataset.adminColumnResizerColumnId || header.dataset.columnId || '';
+  }
+
+  function assignHeaderColumnId(table, header, index) {
+    if (header.colSpan && header.colSpan > 1) return '';
+
+    var columnId = header.dataset.columnId || fallbackColumnId(table, header, index);
+    header.dataset.adminColumnResizerColumnId = columnId;
+    return columnId;
+  }
+
+  function columnWidthVariable(index) {
+    return WIDTH_VAR_PREFIX + (index + 1);
+  }
+
+  function columnRule(index) {
+    var nthChild = index + 1;
+    var variableName = columnWidthVariable(index);
+    var selector = [
+      '.' + TABLE_CLASS + ' > thead > tr > :nth-child(' + nthChild + ')',
+      '.' + TABLE_CLASS + ' > tbody > tr > :nth-child(' + nthChild + ')',
+      '.' + TABLE_CLASS + ' > tfoot > tr > :nth-child(' + nthChild + ')'
+    ].join(', ');
+
+    return selector + ' { box-sizing: border-box !important; width: var(' + variableName + ') !important; min-width: var(' + variableName + ') !important; max-width: var(' + variableName + ') !important; }';
+  }
+
+  function ensureStyleElement() {
+    var styleElement = document.getElementById(STYLE_ELEMENT_ID);
+    if (styleElement) return styleElement;
+
+    styleElement = document.createElement('style');
+    styleElement.id = STYLE_ELEMENT_ID;
+    document.head.appendChild(styleElement);
+
+    return styleElement;
+  }
+
+  function ensureColumnRules(columnCount) {
+    if (columnCount <= generatedRuleCount) return;
+
+    var rules = [];
+    for (var index = generatedRuleCount; index < columnCount; index += 1) {
+      rules.push(columnRule(index));
+    }
+
+    ensureStyleElement().appendChild(document.createTextNode(rules.join('\n') + '\n'));
+    generatedRuleCount = columnCount;
+  }
+
+  function tablesFromRoot(root) {
+    var tables = [];
+
+    function appendTable(table) {
+      if (table && tables.indexOf(table) === -1) {
+        tables.push(table);
+      }
+    }
+
+    if (root.closest) {
+      appendTable(root.closest(TABLE_SELECTOR));
+    }
+
+    if (root.matches && root.matches(TABLE_SELECTOR)) {
+      appendTable(root);
+    }
+
+    if (root.querySelectorAll) {
+      root.querySelectorAll(TABLE_SELECTOR).forEach(appendTable);
+    }
+
+    return tables;
+  }
+
+  function shouldInitializeForAddedNode(node) {
+    if (!node.matches) return false;
+    if (node.matches(TABLE_SELECTOR) || (node.querySelector && node.querySelector(TABLE_SELECTOR))) return true;
+    if (!node.closest || !node.closest(TABLE_SELECTOR)) return false;
+
+    return !!node.closest('thead') || node.matches('colgroup, col');
+  }
+
+  function allTrackedTables() {
+    return Array.from(document.querySelectorAll(TABLE_SELECTOR));
+  }
+
+  function sourceTables() {
+    return allTrackedTables().filter(function(table) {
+      return table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS);
+    });
+  }
+
+  function stateForTable(table) {
+    return tableStates.get(table) || configureTable(table);
+  }
+
+  function ensureManagedColgroup(table, columnCount) {
+    var fixedHeaderColgroup = table.querySelector('colgroup[data-fixed-header-colgroup]');
+    var colgroup = fixedHeaderColgroup || table.querySelector('colgroup[data-admin-column-resizer-colgroup]');
+
+    if (!colgroup) {
+      colgroup = document.createElement('colgroup');
+      colgroup.setAttribute('data-admin-column-resizer-colgroup', 'true');
+      table.insertBefore(colgroup, table.firstChild);
+    }
+
+    while (colgroup.children.length < columnCount) {
+      colgroup.appendChild(document.createElement('col'));
+    }
+
+    return colgroup;
+  }
+
+  function configureTable(table) {
+    var headers = columnHeaders(table);
+    if (headers.length === 0) return null;
+
+    var indexByColumnId = Object.create(null);
+
+    headers.forEach(function(header, index) {
+      var columnId = assignHeaderColumnId(table, header, index);
+      if (!columnId) return;
+
+      if (indexByColumnId[columnId] === undefined) {
+        indexByColumnId[columnId] = index;
+      }
+
+      ensureHandle(header);
+    });
+
+    table.classList.add(TABLE_CLASS);
+    ensureColumnRules(headers.length);
+    ensureManagedColgroup(table, headers.length);
+
+    var state = {
+      columnCount: headers.length,
+      indexByColumnId: indexByColumnId
+    };
+    tableStates.set(table, state);
+
+    return state;
+  }
+
+  function columnIndex(table, columnId) {
+    var state = stateForTable(table);
+    if (!state || state.indexByColumnId[columnId] === undefined) return -1;
+
+    return state.indexByColumnId[columnId];
+  }
+
+  function columnHeader(table, columnId) {
+    var index = columnIndex(table, columnId);
+    if (index < 0) return null;
+
+    return columnHeaders(table)[index] || null;
+  }
+
+  function applyColgroupWidth(table, columnCount, index, widthValue) {
+    var colgroup = ensureManagedColgroup(table, columnCount);
+    if (!colgroup || !colgroup.children[index]) return;
+
+    colgroup.children[index].style.width = widthValue;
+  }
+
+  function clearColgroupWidth(table, columnCount, index) {
+    var colgroup = ensureManagedColgroup(table, columnCount);
+    if (!colgroup || !colgroup.children[index]) return;
+
+    colgroup.children[index].style.removeProperty('width');
+  }
+
+  function applyTableColumnWidth(table, columnId, width) {
+    var state = stateForTable(table);
+    var index = state && state.indexByColumnId[columnId];
+    if (!state || index === undefined) return;
+
+    var widthValue = cssPixelValue(width);
+    table.style.setProperty(columnWidthVariable(index), widthValue);
+    applyColgroupWidth(table, state.columnCount, index, widthValue);
+  }
+
+  function clearTableColumnWidth(table, columnId) {
+    var state = stateForTable(table);
+    var index = state && state.indexByColumnId[columnId];
+    if (!state || index === undefined) return;
+
+    table.style.removeProperty(columnWidthVariable(index));
+    clearColgroupWidth(table, state.columnCount, index);
+  }
+
+  function applyColumnWidth(columnId, width, key) {
+    allTrackedTables().forEach(function(table) {
+      if (key && storageKeyForTable(table) !== key) return;
+
+      applyTableColumnWidth(table, columnId, width);
+    });
+  }
+
+  function clearColumnWidth(columnId, key) {
+    allTrackedTables().forEach(function(table) {
+      if (key && storageKeyForTable(table) !== key) return;
+
+      clearTableColumnWidth(table, columnId);
+    });
+  }
+
+  function applyStoredWidthsToTable(table, widths) {
+    Object.keys(widths).forEach(function(columnId) {
+      var width = parseFloat(widths[columnId]);
+      if (Number.isNaN(width) || width < MIN_WIDTH) return;
+
+      applyTableColumnWidth(table, columnId, width);
+    });
+  }
+
+  function applyStoredWidthsToTables(tables) {
+    if (dragState) return;
+
+    var widthsByStorageKey = Object.create(null);
+
+    tables.forEach(function(table) {
+      var key = storageKeyForTable(table);
+      widthsByStorageKey[key] = widthsByStorageKey[key] || safeReadWidths(key);
+
+      applyStoredWidthsToTable(table, widthsByStorageKey[key]);
+    });
+  }
+
+  function dispatchStickyRefresh() {
+    stickyRefreshFrame = null;
+    lastStickyRefreshAt = Date.now();
+    window.dispatchEvent(new Event('resize'));
+  }
+
+  function scheduleStickyRefresh(immediate) {
+    if (stickyRefreshFrame || stickyRefreshTimer) return;
+
+    var elapsed = Date.now() - lastStickyRefreshAt;
+    var delay = immediate ? 0 : Math.max(0, STICKY_REFRESH_INTERVAL - elapsed);
+
+    stickyRefreshTimer = window.setTimeout(function() {
+      stickyRefreshTimer = null;
+      stickyRefreshFrame = window.requestAnimationFrame(dispatchStickyRefresh);
+    }, delay);
+  }
+
+  function columnNeedsDragRefresh(header) {
+    return header.classList.contains('sticky') ||
+      header.classList.contains('sticky-left') ||
+      header.classList.contains('actions-column');
+  }
+
+  function sourceTableForHandle(handle) {
+    var header = handle.closest('th');
+    if (!header) return null;
+
+    var table = handle.closest(TABLE_SELECTOR);
+    var columnId = headerColumnId(header);
+
+    if (table && table.getAttribute('aria-hidden') !== 'true' && !table.classList.contains(FIXED_HEADER_TABLE_CLASS)) {
+      return table;
+    }
+
+    return sourceTables().find(function(sourceTable) {
+      return columnHeader(sourceTable, columnId);
+    }) || matchingSourceTable(table) || null;
+  }
+
+  function flushDragWidth() {
+    if (!dragState) return;
+
+    if (dragApplyFrame) {
+      window.cancelAnimationFrame(dragApplyFrame);
+      dragApplyFrame = null;
+    }
+
+    applyColumnWidth(dragState.columnId, dragState.currentWidth || dragState.startWidth, dragState.storageKey);
+  }
+
+  function scheduleDragWidth(width) {
+    dragState.currentWidth = width;
+    dragState.moved = dragState.moved || Math.abs(width - dragState.startWidth) > 2;
+
+    if (dragApplyFrame) return;
+
+    dragApplyFrame = window.requestAnimationFrame(function() {
+      dragApplyFrame = null;
+      if (!dragState) return;
+
+      applyColumnWidth(dragState.columnId, dragState.currentWidth, dragState.storageKey);
+      if (dragState.refreshDuringDrag) scheduleStickyRefresh(false);
+    });
+  }
+
+  function startDrag(event) {
+    if (event.button !== 0) return;
+
+    var handle = event.currentTarget;
+    var header = handle.closest('th');
+    if (!header) return;
+
+    var columnId = headerColumnId(header);
+    if (!columnId) return;
+
+    var sourceTable = sourceTableForHandle(handle);
+    if (!sourceTable) return;
+
+    var sourceHeader = columnHeader(sourceTable, columnId) || header;
+    var startWidth = measuredWidth(sourceHeader) || measuredWidth(header);
+    if (!startWidth) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    dragState = {
+      columnId: columnId,
+      storageKey: storageKeyForTable(sourceTable),
+      startX: event.clientX,
+      startWidth: startWidth,
+      currentWidth: startWidth,
+      moved: false,
+      refreshDuringDrag: columnNeedsDragRefresh(sourceHeader)
+    };
+
+    document.body.classList.add(DRAGGING_BODY_CLASS);
+    document.addEventListener('pointermove', handleDragMove);
+    document.addEventListener('pointerup', finishDrag);
+    document.addEventListener('pointercancel', finishDrag);
+  }
+
+  function handleDragMove(event) {
+    if (!dragState) return;
+
+    event.preventDefault();
+
+    scheduleDragWidth(Math.max(MIN_WIDTH, dragState.startWidth + event.clientX - dragState.startX));
+  }
+
+  function finishDrag(event) {
+    if (!dragState) return;
+
+    if (event) {
+      event.preventDefault();
+    }
+
+    flushDragWidth();
+
+    var widths = safeReadWidths(dragState.storageKey);
+    var width = Math.max(MIN_WIDTH, dragState.currentWidth || dragState.startWidth);
+    widths[dragState.columnId] = preciseNumber(width);
+    safeWriteWidths(dragState.storageKey, widths);
+
+    dragState = null;
+    document.body.classList.remove(DRAGGING_BODY_CLASS);
+    document.removeEventListener('pointermove', handleDragMove);
+    document.removeEventListener('pointerup', finishDrag);
+    document.removeEventListener('pointercancel', finishDrag);
+    scheduleStickyRefresh(true);
+  }
+
+  function resetColumn(event) {
+    var handle = event.currentTarget;
+    var header = handle.closest('th');
+    if (!header) return;
+
+    var columnId = headerColumnId(header);
+    if (!columnId) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    var sourceTable = sourceTableForHandle(handle);
+    var key = storageKeyForTable(sourceTable || handle.closest(TABLE_SELECTOR));
+    var widths = safeReadWidths(key);
+    delete widths[columnId];
+    safeWriteWidths(key, widths);
+    clearColumnWidth(columnId, key);
+    scheduleStickyRefresh(true);
+  }
+
+  function stopHandleClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  function ensureHandle(header) {
+    if (!headerColumnId(header)) return;
+
+    header.classList.add(HEADER_CLASS);
+
+    var handle = Array.from(header.children).find(function(child) {
+      return child.classList && child.classList.contains(HANDLE_CLASS);
+    });
+
+    if (!handle) {
+      handle = document.createElement('span');
+      handle.className = HANDLE_CLASS;
+      handle.setAttribute('aria-hidden', 'true');
+      header.appendChild(handle);
+    }
+
+    if (initializedHandles.has(handle)) return;
+
+    initializedHandles.add(handle);
+    handle.addEventListener('pointerdown', startDrag);
+    handle.addEventListener('dblclick', resetColumn);
+    handle.addEventListener('click', stopHandleClick);
+  }
+
+  function initializeTable(table) {
+    return configureTable(table);
+  }
+
+  function initializeColumnResizer(root) {
+    if (!root.querySelectorAll) return;
+
+    var configuredTables = tablesFromRoot(root).filter(function(table) {
+      return !!initializeTable(table);
+    });
+
+    applyStoredWidthsToTables(configuredTables);
+  }
+
+  function initializeFromDocument() {
+    initializeColumnResizer(document);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeFromDocument);
+  } else {
+    initializeFromDocument();
+  }
+
+  document.addEventListener('turbo:load', initializeFromDocument);
+  window.addEventListener('resize', initializeFromDocument);
+
+  if (window.MutationObserver) {
+    var mutationObserver = new MutationObserver(function(mutations) {
+      mutations.forEach(function(mutation) {
+        mutation.addedNodes.forEach(function(node) {
+          if (node.nodeType !== Node.ELEMENT_NODE) return;
+          if (!shouldInitializeForAddedNode(node)) return;
+
+          initializeColumnResizer(node);
+        });
+      });
+    });
+
+    mutationObserver.observe(document.documentElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  setTimeout(initializeFromDocument, 100);
+  setTimeout(initializeFromDocument, 300);
+})();

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

@@ -0,0 +1,64 @@
+.admin-column-resizer__header {
+  position: relative;
+}
+
+.admin-column-resizer__handle {
+  position: absolute;
+  top: 0;
+  right: -5px;
+  bottom: 0;
+  z-index: 20;
+  width: 12px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.admin-column-resizer__handle::after {
+  content: "";
+  position: absolute;
+  top: 20%;
+  right: 3px;
+  bottom: 20%;
+  width: 1px;
+  background: rgba(255, 255, 255, 0.45);
+  opacity: 0;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.admin-column-resizer__header:hover > .admin-column-resizer__handle::after,
+.admin-column-resizer__handle:focus-visible::after,
+.admin-column-resizer--dragging .admin-column-resizer__handle::after {
+  opacity: 1;
+}
+
+.admin-column-resizer__handle:hover::after,
+.admin-column-resizer__handle:focus-visible::after {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.admin-column-resizer--dragging,
+.admin-column-resizer--dragging * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+[data-fixed-table-header] .admin-column-resizer__handle {
+  pointer-events: auto;
+}
+
+[data-fixed-table-header] .table-fixed-header__table th.admin-column-resizer__header:not(.sticky):not(.sticky-left) {
+  position: relative;
+}
+
+@media (pointer: coarse), screen and (max-width: 767px) {
+  .admin-column-resizer__handle {
+    right: -10px;
+    width: 28px;
+  }
+
+  .admin-column-resizer__handle::after {
+    right: 13px;
+    background: rgba(255, 255, 255, 0.75);
+    opacity: 1;
+  }
+}

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

@@ -48,7 +48,7 @@
     z-index: 2;
 
     &::after {
-      background-color: transparent;
+      background-color: #d1d5db;
       bottom: 0;
       content: "";
       left: 3px;
@@ -59,10 +59,14 @@
     }
 
     &:hover::after {
-      background-color: #9aa8ba;
+      background-color: #4b5563;
     }
   }
 
+  .admin-navigation--resizing .admin-navigation-resize-handle::after {
+    background-color: #374151;
+  }
+
   .admin-navigation-scroll-area {
     max-height: inherit;
     overflow-x: hidden;
@@ -70,10 +74,6 @@
     overscroll-behavior: contain;
   }
 
-  .admin-navigation--resizing .admin-navigation-resize-handle::after {
-    background-color: #5d7596;
-  }
-
   .admin-navigation-scroll-area .menubar,
   .admin-navigation-scroll-area .menubar a,
   .admin-navigation-scroll-area .menubar__group-label,
@@ -99,6 +99,10 @@
     width: 100%;
   }
 
+  .admin-navigation-scroll-area .navigation__link--indented {
+    text-indent: 16px;
+  }
+
   .admin-navigation-scroll-area .menubar li.menubar__item a {
     padding-left: 36px;
   }

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

@@ -1,5 +1,6 @@
 @import "fixed_submit_actions";
 @import "datetime_input";
+@import "column_resizer";
 
 @media screen and (min-width: 768px) {
   .app-container {

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

@@ -26,6 +26,17 @@ module YummyGuide
         0
       end
 
+      def yummy_guide_administrate_collection_column_id(collection_presenter, column_name)
+        [
+          collection_presenter.resource_name,
+          column_name
+        ].map { |segment| segment.to_s.parameterize(separator: "_") }.join(".")
+      end
+
+      def yummy_guide_administrate_collection_actions_column_id(collection_presenter)
+        yummy_guide_administrate_collection_column_id(collection_presenter, :actions)
+      end
+
       def yummy_guide_administrate_build_collection_cell(content:, present_path: nil, target: nil, reference_link: false, text_link: false, leading_actions: nil, copy_text: nil, copy_text_transform: nil)
         normalized_content = yummy_guide_administrate_collection_cell_content(content)
 

data/app/views/yummy_guide/administrate/administrate/application/_collection.html.erb

@@ -1,8 +1,12 @@
+<% column_width_storage_scope = local_assigns[:column_width_storage_scope].presence %>
 <div class="scroll-table" data-fixed-header-scroll>
   <table
     aria-labelledby="<%= table_title %>"
     data-fixed-columns-count="<%= yummy_guide_administrate_collection_table_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
     data-mobile-fixed-columns-count="<%= yummy_guide_administrate_collection_table_mobile_fixed_columns_count(page: page, collection_presenter: collection_presenter) %>"
+    <% if column_width_storage_scope %>
+      data-column-resizer-storage-scope="<%= column_width_storage_scope %>"
+    <% end %>
     data-fixed-header-source
   >
     <thead>
@@ -12,6 +16,7 @@
             class="cell-label cell-label--<%= attr_type.html_class %> cell-label--<%= collection_presenter.ordered_html_class(attr_name) %> cell-label--<%= "#{collection_presenter.resource_name}_#{attr_name}" %>"
             scope="col"
             aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>"
+            data-column-id="<%= yummy_guide_administrate_collection_column_id(collection_presenter, attr_name) %>"
           >
             <%= link_to(sanitized_order_params(page, collection_field_name).merge(
                   collection_presenter.order_params_for(attr_name, key: collection_field_name)

data/lib/yummy_guide/administrate/engine.rb

@@ -9,6 +9,7 @@ module YummyGuide
         app.config.assets.precompile += %w[
           yummy_guide_administrate/components.css
           yummy_guide_administrate/clipboards.js
+          yummy_guide_administrate/column_resizer.js
           yummy_guide_administrate/datetime_input.js
           yummy_guide_administrate/fixed_submit_actions.js
           yummy_guide_administrate/filter_controls.js

data/lib/yummy_guide/administrate/version.rb

@@ -2,6 +2,6 @@
 
 module YummyGuide
   module Administrate
-    VERSION = "0.7.1"
+    VERSION = "0.8.0"
   end
 end

data/spec/yummy_guide/administrate/collection_helper_spec.rb

@@ -54,6 +54,29 @@ RSpec.describe YummyGuide::Administrate::CollectionHelper do
     end
   end
 
+  describe "#yummy_guide_administrate_collection_column_id" do
+    let(:collection_presenter) { Struct.new(:resource_name).new("external_reservation") }
+
+    # 一覧カラム幅の保存に使う ID が列順ではなくリソース名と属性名から決まることを確認する
+    it "builds a stable id from the resource name and attribute name" do
+      expect(helper_host.yummy_guide_administrate_collection_column_id(collection_presenter, :customer_name)).to eq("external_reservation.customer_name")
+    end
+
+    # 手書き追加カラムも同じ形式の ID で保存対象にできることを確認する
+    it "normalizes custom column names" do
+      expect(helper_host.yummy_guide_administrate_collection_column_id(collection_presenter, "Article Pages")).to eq("external_reservation.article_pages")
+    end
+  end
+
+  describe "#yummy_guide_administrate_collection_actions_column_id" do
+    # actions 列も通常カラムと同じ保存キー体系に入ることを確認する
+    it "builds the actions column id" do
+      collection_presenter = Struct.new(:resource_name).new("reservation")
+
+      expect(helper_host.yummy_guide_administrate_collection_actions_column_id(collection_presenter)).to eq("reservation.actions")
+    end
+  end
+
   describe "#yummy_guide_administrate_build_collection_cell" do
     let(:present_path) { "/admin/articles/test-article" }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yummy-guide-generic-administrate
 version: !ruby/object:Gem::Version
-  version: 0.7.1
+  version: 0.8.0
 platform: ruby
 authors:
 - akatsuki-kk
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-06-01 00:00:00.000000000 Z
+date: 2026-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: administrate
@@ -91,6 +91,7 @@ files:
 - Rakefile
 - app/assets/images/yummy_guide_administrate/icon-copy.svg
 - app/assets/javascripts/yummy_guide_administrate/clipboards.js
+- app/assets/javascripts/yummy_guide_administrate/column_resizer.js
 - app/assets/javascripts/yummy_guide_administrate/datetime_input.js
 - app/assets/javascripts/yummy_guide_administrate/filter_controls.js
 - app/assets/javascripts/yummy_guide_administrate/filter_form.js
@@ -98,6 +99,7 @@ files:
 - app/assets/javascripts/yummy_guide_administrate/resizable_navigation.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_left_columns.js
 - app/assets/javascripts/yummy_guide_administrate/sticky_table_headers.js
+- app/assets/stylesheets/yummy_guide_administrate/_column_resizer.scss
 - app/assets/stylesheets/yummy_guide_administrate/_datetime_input.scss
 - app/assets/stylesheets/yummy_guide_administrate/_fixed_submit_actions.scss
 - app/assets/stylesheets/yummy_guide_administrate/_resizable_navigation.scss