@threestarsoftware/tssgrid 0.1.33 → 0.1.35

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 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
+
+### 改善（プラグイン）
+- **`tss-toggle` を 2択から N択（3つ以上）へ拡張**。これまで内部で選択肢を2つに切り詰めていた（`slice(0,2)`）のを撤廃し、`columns: { ans: ['未回答','出席','欠席'] }` のように **3つ以上の択一**を「並んだセグメント＝ラジオ的に全選択肢が常に見える」形で置けるようにした。クリック確定（`setValue`＝検証・Undo を通る）・許可値以外の validator 拒否・アクティブセルで **Space は次の値へ循環**（2択なら従来どおり反対側）は据え置き。値は dropdown 同様 **value を保存**。**短いラベルなら dropdown と同程度の幅**で収まり、タップ数は「開く→選ぶ」の 2 から **1** に。用途: 出欠（未回答/出席/欠席）・優先度（高/中/低）など少数の短い択一。選択肢が多い／ラベルが長い／列幅が狭い場合は従来どおり `type:'dropdown'` が省スペース。例 `examples/toggle.html` に出欠3択パネルを追加。**後方互換**（2択の既存指定・`TssToggle.format()` 直指定は不変）。
+
 ## [0.1.33] - 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)。
@@ -817,9 +835,9 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 ```
 - **おすすめ（いずれも `<script>`/CDN で no-build）**: **Chart.js**（MIT・定番・バランス◎）/ **ApexCharts**（MIT・モダンで映え）/ **Apache ECharts**（Apache-2.0・多機能）/ **uPlot**（MIT・超軽量）。Highcharts/AG Charts は商用有料なので MIT 方針なら避ける。
 
-### 同梱プラグイン: 2択トグル（toggle・有効｜無効）
+### 同梱プラグイン: 択一トグル／ラジオ（toggle・2択以上）
 
-`plugins/tss-toggle.js`＋`.css`＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
+`plugins/tss-toggle.js`＋`.css`＝ 択一（**2つ以上**）を**並んだセグメント（有効｜無効／未回答｜出席｜欠席）**で表示、クリックで切替。ラジオボタンの「**全選択肢が常に見える・1クリックで確定**」をセル内で実現。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-toggle.css">
@@ -827,12 +845,13 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 ```
 ```js
 plugins: [ TssToggle.plugin({ columns: {
-  status: ['有効', '無効'],                                      // 文字列2つ（value=label）
+  status: ['有効', '無効'],                                      // 文字列（value=label）。2つ以上でOK
+  ans:    ['未回答', '出席', '欠席'],                             // 3択以上も可
   pub:    [{ value:'1', label:'公開' }, { value:'0', label:'非公開' }],  // value/label 分離
 } }) ]
 ```
-- クリックでその側に確定（`setValue`＝**検証・Undo を通る**）。アクティブセルで **Space** で反対側へトグル。2値以外の打ち込みは自動 validator で拒否。
-- 単純な ON/OFF 1個なら組込 `type:'checkbox'`、3択以上は `type:'dropdown'`。見た目は `--tg-toggle-accent` 等で。
+- クリックでその値に確定（`setValue`＝**検証・Undo を通る**）。アクティブセルで **Space** で次の値へ循環（2択なら反対側）。許可値以外の打ち込みは自動 validator で拒否。
+- 単純な ON/OFF 1個なら組込 `type:'checkbox'`。**短いラベルの少数択一**（出欠・高/中/低 等）に向き、短ければ dropdown と同程度の幅で収まる。**選択肢が多い／ラベルが長い／列幅が狭い**なら `type:'dropdown'` が省スペース。見た目は `--tg-toggle-accent` 等で。
 
 ### 同梱プラグイン: セル結合（merge・横/縦/矩形）
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.33",
+  "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.css

@@ -1,4 +1,4 @@
-/* TssToggle — 2択セグメント。色は変数で上書き可。 */
+/* TssToggle — 2択以上（N択）のセグメント。色は変数で上書き可。横幅ぶんピルが並ぶ。 */
 .tg-toggle { display: inline-flex; border: 1px solid var(--tg-toggle-border, #cfd7e0); border-radius: 999px; overflow: hidden; font-size: .92em; line-height: 1.7; vertical-align: middle; }
 .tg-toggle .tg-seg { padding: 0 11px; cursor: pointer; color: var(--tg-toggle-fg, #64748b); user-select: none; transition: background .12s; }
 .tg-toggle .tg-seg + .tg-seg { border-left: 1px solid var(--tg-toggle-border, #cfd7e0); }

package/plugins/tss-toggle.js

@@ -1,23 +1,25 @@
-/*! TssToggle — 2択セグメント・トグル（有効|無効・公開|非公開・男|女 …）。
+/*! TssToggle — 2択以上（N択）のセグメント・トグル／ラジオ（有効|無効・未回答|出席|欠席 …）。
  *
- *  ラジオの2択を「並んだピル（セグメント）」で表示し、クリックでどちらかに切替。値は dropdown と同じく
+ *  択一（2つ以上）を「並んだピル（セグメント）」で表示し、クリックで切替。値は dropdown と同じく
  *  選んだ option の value を保存（getData も value）。html:true+format で描画、クリックは委譲で拾う。
+ *  ラジオボタンの「全選択肢が常に見える・1クリックで確定」をセル内で実現する用途（出欠・優先度 高/中/低 等）。
  *
  *  使い方:
  *    plugins: [ TssToggle.plugin({ columns: {
- *      status: ['有効', '無効'],                                   // 文字列2つ（value=label）
+ *      status: ['有効', '無効'],                                   // 文字列（value=label）。2つ以上でOK
+ *      att:    ['未回答', '出席', '欠席'],                          // 3択以上も可
  *      pub:    [{value:'1',label:'公開'},{value:'0',label:'非公開'}] // value/label 分離も可
  *    } }) ]
  *    // 列定義側で直接: { data:'status', html:true, format: TssToggle.format(['有効','無効']) } ＋ plugins:[TssToggle.plugin()]
  *
- *  opts(plugin): columns（{dataキー: 2要素配列}） / accent（選択側の色・CSS変数 --tg-toggle-accent でも）。
+ *  opts(plugin): columns（{dataキー: 2要素以上の配列}） / accent（選択側の色・CSS変数 --tg-toggle-accent でも）。
  *  挙動: クリックでその側に確定（setValue＝検証/Undo を通る）。アクティブセルで Space は反対側へトグル。
  *        他値を打ち込めないよう、対象列に「2値のみ許可」の validator を自動付与。
  */
 (function (root) {
   'use strict';
   function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
-  function normOpts(arr) { return (arr || []).slice(0, 2).map(function (o) { return (o && typeof o === 'object') ? { value: String(o.value), label: String(o.label) } : { value: String(o), label: String(o) }; }); }
+  function normOpts(arr) { return (arr || []).map(function (o) { return (o && typeof o === 'object') ? { value: String(o.value), label: String(o.label) } : { value: String(o), label: String(o) }; }); }
 
   function makeFormat(options) {
     var opts = normOpts(options);
@@ -45,7 +47,7 @@
         cfg.html = true;
         if (typeof cfg.format !== 'function') cfg.format = makeFormat(o);
         var vals = o.map(function (x) { return x.value; });
-        if (typeof cfg.validator !== 'function') cfg.validator = function (v) { return v === '' || vals.indexOf(v) >= 0; };   // 2値以外を弾く
+        if (typeof cfg.validator !== 'function') cfg.validator = function (v) { return v === '' || vals.indexOf(v) >= 0; };   // 許可値以外を弾く
         byCol[ci] = vals;
       });
       // それ自体は無効でも format 直指定の列をクリックで拾えるよう、format 由来の列も拾う
@@ -53,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;
@@ -68,7 +71,7 @@
         if (!vals || !editable(r, c) || grid.mode === 'edit') return;
         e.preventDefault();
         var cur = grid.getValue(r, c), i = vals.indexOf(String(cur));
-        grid.setValue(r, c, vals[(i + 1) % vals.length]);     // 反対側へトグル
+        grid.setValue(r, c, vals[(i + 1) % vals.length]);     // 次の値へ循環（2択なら反対側）
       }
       grid.wrap.addEventListener('click', onClick);
       grid.editor.addEventListener('keydown', onKey);