@threestarsoftware/tssgrid 0.1.34 → 0.1.35

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.35] - 2026-11-06
+
+### 追加（プラグイン）
+- **`tss-sort`（見出しクリックで並べ替えUI）を追加**。`tss-filter` と同じ形のプラグインで、各リーフ見出しに **▲▼** を出し、押すたび **昇順 ▲ → 降順 ▼ → 元の順（`clearSort`）** を1列で循環。中身はコアの `sortBy` / `clearSort` を呼ぶだけ（多段は従来どおり `sortByCols` を直接）。`onHeaderClick` / `onHeaderRender` を**連鎖**（既存指定を保ちつつ上乗せ）。`columns`（対象列限定・既定=全リーフ列）／`initial:{col,dir}`（初期の並び）／`iconOnly`（▲▼ の所だけで並べ替え・本体クリックは純粋に列選択）。**本体クリックの列選択は従来どおり**活き、**空行（`minSpareRows`）はコア仕様どおり常に最下部**。`tss-filter` と併用しても ▲▼（ソート）と漏斗（フィルタ）は並ぶだけで**ぶつからない**。API: `getPlugin('sort').getState()`／`.sortBy(col,dir)`／`.clear()`。例 `examples/sort-plugin.html`。従来の手組み例（`examples/sort.html`・`multisort.html`・`sort-filter.html`）はそのまま有効。
+
+### 修正（プラグイン）
+- **`tss-toggle` が関数の `readOnly` を見ていなかった不具合を修正**。列の `readOnly` が関数（`(val,{r})=>boolean`）だと、読取専用のセルでもセグメントを押せて値が変わってしまっていた（`cfg.readOnly === true` だけを見ていたため）。本体と同じ **`_isReadOnly(r, c)`** で判定するようにし、**関数 `readOnly`・セル単位RO・結合の従属・`grid.readOnly`** をすべて尊重。jimu で「直せないときはプラグインを付けない」でしのいでいた回避が不要に。
+
 ## [0.1.34] - 2026-11-05
 
 ### 改善（プラグイン）

package/README.md

@@ -382,6 +382,24 @@ grid.getPlugin('filter').clearAll();            // 全条件クリア
 ```
 - 値候補は**マスタ全行から集計**（絞り込み中でも全値が出る）。フィルタ済み列に印。値は HTML エスケープ。
 
+### 同梱プラグイン: 見出しクリックで並べ替え（sort UI）
+
+`plugins/tss-sort.js`＋`.css`＝ 各見出しに **▲▼** を出し、押すたび **昇順 ▲ → 降順 ▼ → 元の順** を1列で循環。中身はコアの **`sortBy` / `clearSort` を呼ぶだけ**。**列選択は今までどおり**効き、**空行（`minSpareRows`）は常に最下部**。`tss-filter` と併用しても ▲▼（ソート）と漏斗（フィルタ）は**並ぶだけでぶつからない**。動く例: [`examples/sort-plugin.html`](https://tssgrid.threestarsoftware.co.jp/examples/sort-plugin.html)。
+
+```html
+<link rel="stylesheet" href="plugins/tss-sort.css">
+<script src="plugins/tss-sort.js"></script>
+```
+```js
+plugins: [ TssSort.plugin() ]                                  // 全リーフ列に ▲▼
+plugins: [ TssSort.plugin({ columns:['createdAt', 'workDate'] }) ]  // 対象列を限定
+plugins: [ TssSort.plugin({ initial:{ col:'createdAt', dir:'desc' } }) ]  // 初期の並び
+plugins: [ TssSort.plugin({ iconOnly:true }) ]                 // ▲▼ の所だけ（本体クリックは純粋に選択）
+grid.getPlugin('sort').getState();   // { col, dir } または null
+grid.getPlugin('sort').clear();      // 入力順へ戻す
+```
+- 単一列ソート（多段は `grid.sortByCols(specs)` を直接）。`onHeaderClick` / `onHeaderRender` フックを**連鎖**して使う（既存指定を保ちつつ上乗せ）。`sortBy`→再描画→`onHeaderRender` 再実行で ▲▼ の点灯も自動更新。
+
 ### 同梱プラグイン: 共有マスタ（複数グリッドで1データ）
 
 `plugins/tss-shared.js`＝ **1つのマスタ（同じ行データ）を複数グリッドで共有**。左右を**別フィルタ/別ソート**で表示でき、**片方の編集がもう片方の同じ行へ即反映**（行参照を共有）。A系/B系を並べて突き合わせ編集する用途。動く例: [`examples/shared-master.html`](https://tssgrid.threestarsoftware.co.jp/examples/shared-master.html)。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",

package/plugins/tss-sort.css

@@ -0,0 +1,21 @@
+/* TssSort — ヘッダの並べ替えUI（plugins/tss-sort.js）。▲▼ は小さな三角を縦2段。色は --tg-accent を流用。
+   既定は薄いグレー（常時表示＝出入りのピコピコ無し）、点灯中の向きだけアクセント色。漏斗(filter)の右に並ぶ。 */
+.tssgrid .tg-table thead th .tg-sort-ind {
+  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px;
+  margin-left: 5px; vertical-align: middle; line-height: 0; user-select: none; cursor: pointer;
+}
+.tssgrid .tg-table thead th .tg-sort-ind .tg-sort-up,
+.tssgrid .tg-table thead th .tg-sort-ind .tg-sort-dn {
+  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
+}
+.tssgrid .tg-table thead th .tg-sort-ind .tg-sort-up { border-bottom: 5px solid var(--tg-sort-dim, #9aa6b4); }
+.tssgrid .tg-table thead th .tg-sort-ind .tg-sort-dn { border-top: 5px solid var(--tg-sort-dim, #9aa6b4); }
+.tssgrid .tg-table thead th .tg-sort-ind:hover .tg-sort-up { border-bottom-color: #cdd6e2; }
+.tssgrid .tg-table thead th .tg-sort-ind:hover .tg-sort-dn { border-top-color: #cdd6e2; }
+/* 点灯：確定した向きだけアクセント色、反対側は薄く落とす */
+.tssgrid .tg-table thead th .tg-sort-ind.asc .tg-sort-up { border-bottom-color: var(--tg-sort-accent, var(--tg-accent, #2f6fed)); }
+.tssgrid .tg-table thead th .tg-sort-ind.desc .tg-sort-dn { border-top-color: var(--tg-sort-accent, var(--tg-accent, #2f6fed)); }
+.tssgrid .tg-table thead th .tg-sort-ind.asc .tg-sort-dn,
+.tssgrid .tg-table thead th .tg-sort-ind.desc .tg-sort-up { opacity: .35; }
+/* 本体クリックでも並べ替える既定モードでは見出し全体にカーソルを出す（iconOnly は ▲▼ だけ） */
+.tssgrid:not(.tg-sort-icononly) .tg-table thead th.tg-sortable { cursor: pointer; }

package/plugins/tss-sort.js

@@ -0,0 +1,105 @@
+/*! TssSort — ヘッダクリックで並べ替えUI。コアの sortBy / clearSort を呼ぶだけ。
+ *
+ *  各リーフ見出しに ▲▼ インジケータを出し、クリックで「昇順 → 降順 → 元の順（clearSort）」を1列で循環。
+ *  値の並べ替え自体は grid.sortBy(c,'asc'|'desc') / grid.clearSort()（コア機能）。空行（minSpareRows）は
+ *  コア仕様どおり常に最下部のまま。本体クリックの列選択は従来どおり活きる（選択を奪わない）。
+ *  tss-filter と同時に付けても、▲▼（ソート）と漏斗（フィルタ）は別アイコンで並ぶ＝ぶつからない。
+ *
+ *  使い方:
+ *    const grid = new TssGrid(el, { plugins: [ TssSort.plugin() ] });                 // 全リーフ列に ▲▼
+ *    TssSort.plugin({ columns: ['createdAt', 'workDate'] });                           // 対象列を限定（data キー or index）
+ *    TssSort.plugin({ initial: { col: 'createdAt', dir: 'desc' } });                   // 初期の並び
+ *    TssSort.plugin({ iconOnly: true });                                               // ▲▼ の所だけで並べ替え（本体クリックは純粋に選択）
+ *    grid.getPlugin('sort').clear();                                                   // 並べ替え解除（入力順へ）
+ *    grid.getPlugin('sort').getState();                                               // { col, dir } または null
+ *
+ *  opts: columns（対象列の配列・省略=全リーフ列） / initial（{col, dir:'asc'|'desc'}） / iconOnly（既定 false）。
+ *  メモ: 単一列ソート（多段は grid.sortByCols を直接）。onHeaderClick / onHeaderRender フックを「連鎖」して使う
+ *        （既存の指定があれば保ちつつ上乗せ）。sortBy→再描画→onHeaderRender 再実行で ▲▼ の点灯も自動更新。
+ */
+(function (root) {
+  'use strict';
+
+  function plugin(opts) {
+    opts = opts || {};
+    const iconOnly = !!opts.iconOnly;
+    return function (grid) {
+      const cur = { col: -1, dir: null };   // dir: 'asc' | 'desc' | null（唯一の状態）
+
+      // 対象列 index の集合（省略時は全リーフ列）
+      const targets = (() => {
+        if (!opts.columns) return null;   // null = 全列
+        const s = new Set();
+        opts.columns.forEach(k => { const ci = grid._resolveCol ? grid._resolveCol(k) : (typeof k === 'number' ? k : -1); if (ci >= 0) s.add(ci); });
+        return s;
+      })();
+      const isTarget = c => !targets || targets.has(c);
+
+      // 昇順 → 降順 → 元の順（clearSort）を1列で循環。
+      function cycle(c) {
+        if (cur.col !== c) { cur.col = c; cur.dir = 'asc'; grid.sortBy(c, 'asc'); }
+        else if (cur.dir === 'asc') { cur.dir = 'desc'; grid.sortBy(c, 'desc'); }
+        else { cur.col = -1; cur.dir = null; if (!grid.clearSort()) grid.redraw(); }
+      }
+
+      // ---- クリック（onHeaderClick を連鎖）----
+      const prevClick = grid.onHeaderClick;
+      grid.onHeaderClick = function (c, e) {
+        // ソート対象で、漏斗(filter)以外のクリック。iconOnly なら ▲▼ の上だけ。
+        const onFunnel = e && e.target && e.target.closest && e.target.closest('.tg-filter-btn');
+        const onInd = e && e.target && e.target.closest && e.target.closest('.tg-sort-ind');
+        if (isTarget(c) && !onFunnel && (!iconOnly || onInd)) cycle(c);
+        // 既存の onHeaderClick を尊重（false なら列選択を抑止）。ソート自身は選択を奪わない。
+        if (prevClick) { let r; try { r = prevClick.call(grid, c, e); } catch (_) {} if (r === false) return false; }
+        return undefined;   // 列選択は今までどおり通す
+      };
+
+      // ---- ▲▼ インジケータ（onHeaderRender を連鎖。再描画毎に自動で付け直し）----
+      const prevRender = grid.onHeaderRender;
+      grid.onHeaderRender = function (th, c) {
+        if (prevRender) { try { prevRender.call(grid, th, c); } catch (_) {} }
+        if (!isTarget(c)) return;
+        th.classList.add('tg-sortable');
+        const dir = (c === cur.col) ? cur.dir : null;
+        const ind = document.createElement('span');
+        ind.className = 'tg-sort-ind' + (dir ? ' ' + dir : '');
+        ind.innerHTML = '<span class="tg-sort-up"></span><span class="tg-sort-dn"></span>';
+        th.appendChild(ind);
+      };
+      grid.root.classList.add('tg-has-sort');
+      if (iconOnly) grid.root.classList.add('tg-sort-icononly');
+
+      // 初期の並び
+      if (opts.initial && opts.initial.col != null) {
+        const ci = grid._resolveCol ? grid._resolveCol(opts.initial.col) : (typeof opts.initial.col === 'number' ? opts.initial.col : -1);
+        if (ci >= 0 && isTarget(ci)) { cur.col = ci; cur.dir = opts.initial.dir === 'desc' ? 'desc' : 'asc'; grid.sortBy(ci, cur.dir); }
+      }
+      grid.buildTable();   // インジケータを反映（onHeaderRender 実行）
+
+      return {
+        name: 'sort',
+        // 現在の並び { col:(dataキー or index), dir } または null
+        getState: () => (cur.col >= 0 ? { col: (grid.columns[cur.col] && grid.columns[cur.col].data != null ? grid.columns[cur.col].data : cur.col), dir: cur.dir } : null),
+        // プログラムから並べ替え（UIの点灯も同期）
+        sortBy: (c, dir) => {
+          const ci = grid._resolveCol ? grid._resolveCol(c) : (typeof c === 'number' ? c : -1);
+          if (ci < 0 || !isTarget(ci)) return;
+          cur.col = ci; cur.dir = dir === 'desc' ? 'desc' : 'asc'; grid.sortBy(ci, cur.dir);
+        },
+        clear: () => { cur.col = -1; cur.dir = null; if (!grid.clearSort()) grid.redraw(); },
+        destroy: function () {
+          grid.onHeaderClick = prevClick || null;
+          grid.onHeaderRender = prevRender || null;
+          grid.root.classList.remove('tg-has-sort', 'tg-sort-icononly');
+          if (grid.table) grid.table.querySelectorAll('.tg-sort-ind').forEach(el => el.remove());
+          if (grid.table) grid.table.querySelectorAll('th.tg-sortable').forEach(th => th.classList.remove('tg-sortable'));
+          grid.buildTable();
+        },
+      };
+    };
+  }
+
+  const TssSort = { plugin: plugin };
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssSort;
+  else root.TssSort = TssSort;
+})(typeof self !== 'undefined' ? self : this);

package/plugins/tss-toggle.js

@@ -55,7 +55,8 @@
         if (byCol[c]) return byCol[c];
         return null;   // 設定外の列は対象外
       }
-      function editable(r, c) { var cfg = grid.columns[c]; return !grid.readOnly && !(cfg && cfg.readOnly === true); }
+      // 本体と同じ判定＝grid.readOnly / 関数readOnly / セル単位RO / 結合の従属 すべて尊重（cfg.readOnly===true だけ見ていた不具合を修正）。
+      function editable(r, c) { return grid._isReadOnly ? !grid._isReadOnly(r, c) : (!grid.readOnly && !(grid.columns[c] && grid.columns[c].readOnly === true)); }
 
       function onClick(e) {
         var seg = e.target.closest && e.target.closest('.tg-seg[data-tg-v]'); if (!seg) return;