@threestarsoftware/tssgrid 0.1.6 → 0.1.8

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.8] - 2026-09-02
+
+### 追加
+- **多段（フライアウト）プルダウン プラグイン `tss-cascade`**（プラグイン・無依存・コア無改変）— メニューのように「大分類 ▸ 中分類 ▸ 小分類」とフライアウトで開き、**葉を選ぶとセルに確定**するカスタムエディタ（`columns[c].editor` 契約に乗る）。`options` は入れ子配列 `[{ label, value?, children? }]`、保存は葉の `value`（未指定なら label）、表示は **`TssCascade.pathFormat(options)`** で「大 / 中 / 小」のパスに。クリック展開＋キーボード（↑↓/→←/Enter/Esc）＋画面端フリップ。動く例 `examples/cascade-dropdown.html`。
+
+### 修正
+- **右クリックメニューのカスタム項目が `key`（組込キー）だけ・`callback` 無しで無反応だったのを修正**（コア）— カスタム項目 `{ name, key:'row_above' }` は `callback` を実行する仕様で、`key` だけ書いても組込アクションが起動せず**何も起きなかった**（位置に依らず／組込文字列 `'row_above'` は最下行でも正常）。**`callback` 無しで `key` が組込項目を指す時はその組込アクションを実行**するようにし、「**組込動作のまま `name`/`disabled` だけカスタムしたい**」を可能に。`callback` 付き・未知 `key`・組込文字列・`disabled` は不変（後方互換）。
+
+## [0.1.7] - 2026-08-01
+
+### 追加
+- **`format` に第3引数 `row`（その行の値配列＝`grid.data[r]`）**（コア）— `format(value, { r, c }, row)` の第3引数 `row` を追加（`options` の `(r, row)` と同形）。**行の状態でセル内容（ボタン/アイコン等）を出し分ける**時、`format` の中で `grid` を参照せず `row[列index]` から状態を読める＝**初回描画（`const grid = new TssGrid(...)` の構築中に `format` が走る時点で `grid` 未代入＝TDZ で例外）を回避**できる。既存の2引数 `format` はそのまま（後方互換）。
+- **`examples/cell-button.html` を「行の状態で切替」に刷新**＋**`examples/file-upload.html` を追加**（コア無改修のサンプル）— 前者は 未申請/申請中/編集中 で出すボタンを切替（申請/コピー・編集/削除・保存/取消）、click 委譲で状態遷移→`redraw`、複製・削除も。後者は**行ごとのファイル添付**（セル内ボタン＋ドラッグ&ドロップ／落とした行を `closest('tr[data-r]')` で特定して `setValue`）。
+
 ## [0.1.6] - 2026-07-30
 
 ### 追加

package/README.md

@@ -286,18 +286,27 @@ onAfterChange: (chs) => chs.forEach(ch => { if (ch.c === 0 && ch.oldValue !== ch
 
 ### セル内ボタン（`html:true` ＋ クリック委譲）
 
-専用のボタン列 API はありません。**`columns[c].html:true` ＋ `format` が返す HTML** でセルにボタンを描き、**`grid.table` に click 委譲**して `data-*` で拾うのが定石です（→ 動く例: [`examples/cell-button.html`](https://tssgrid.threestarsoftware.co.jp/examples/cell-button.html)）。
+専用のボタン列 API はありません。**`columns[c].html:true` ＋ `format` が返す HTML** でセルにボタンを描き、**`grid.table` に click 委譲**して `data-*` で拾うのが定石です。**行の状態でボタンを出し分け**たいときは、状態を**列に持たせて** `format` の**第3引数 `row`（その行の値配列）**から読みます（→ 動く例: [`examples/cell-button.html`](https://tssgrid.threestarsoftware.co.jp/examples/cell-button.html)＝未申請/申請中/編集中でボタン切替）。
 
 ```js
-columns: [ /* … */,
-  { html:true, readOnly:true, format: () => '<button class="mybtn" data-act="del">削除</button>' } ]
+// format の引数は (value, { r, c }, row)。row = その行の値配列（grid.data[r]）
+columns: [ /* …, 状態列(index 2), … */,
+  { html:true, readOnly:true, format: (_v, _cell, row) => {
+    const st = row[2];                       // 状態を「行の値配列」から読む（grid は参照しない）
+    if (st === '編集中') return '<button class="mybtn" data-act="save">保存</button>';
+    if (st === '申請中') return '<button class="mybtn" data-act="edit">編集</button>';
+    return '<button class="mybtn" data-act="submit">申請</button>';
+  } } ]
 grid.table.addEventListener('click', e => {
   const b = e.target.closest('.mybtn'); if (!b) return;
   const r = +b.closest('tr[data-r]').dataset.r;
-  if (b.dataset.act === 'del') grid.deleteRows(r, r);
+  grid.setValue(r, '状態', '申請中', true);   // 状態遷移（readOnly列は force=true）
+  grid.redraw();                             // ← format 再実行でボタンが変わる
 });
 ```
-- ボタン列は `readOnly:true` にして編集モードに入らないように。行番号は `closest('tr[data-r]')` から。**`html:true` はエスケープを外す**ので、ラベルにユーザー入力を入れる時は自分でエスケープを（XSS 責任は HTML 提供側）。空セルでも `format` は走ります（飾り列を全行に描ける）。
+- ボタン列は `readOnly:true` にして編集モードに入らないように。行番号は `closest('tr[data-r]')` から。空セルでも `format` は走ります（飾り列を全行に描ける）。
+- **⚠️ 初回描画は `new TssGrid(...)` の構築中に走る**ので、`format` の中で **`grid` 変数を参照しない**（まだ未代入＝TDZ で例外）。状態は**第3引数 `row`** から読むのが安全（`grid.getValue` を使いたくなるが初回で落ちる）。状態を変えたら **`grid.redraw()`** で `format` を再実行してボタンを更新します。
+- **`html:true` はエスケープを外す**ので、ラベルにユーザー入力を入れる時は自分でエスケープを（XSS 責任は HTML 提供側）。
 
 ### 非破壊フィルタ（`filter` / `clearFilter`）
 
@@ -1205,6 +1214,7 @@ new TssGrid(el, {
 
 - **組込キー**: `row_above` / `row_below` / `remove_row` / `col_left` / `col_right` / `remove_col` / `copy` / `cut` / `paste` / `clear` / `undo` / `redo`、区切りは `'---------'`（ダッシュのみ）。
 - **カスタム項目**: `{ name, callback, disabled?, hidden?, key?, submenu? }`。`name`/`disabled`/`hidden` は**関数**も可＝引数は `(range, ctx)`（`range`＝選択範囲 `{r0,c0,r1,c1}`）。`callback` の `this` はグリッド、引数は `{ range, key, ctx }`。
+- **組込動作のまま name/disabled だけ変えたい**: カスタム項目に `callback` を**書かず** `key` に組込キー（`row_above` 等）を指定すると、**その組込アクションを実行**します（`disabled`/`name` はカスタム側を尊重）。例: `{ name: '行を上に追加', key: 'row_above', disabled: (s) => … }`＝ラベルと活性条件だけ差し替え、挿入動作は組込のまま。
 - **`ctx`＝右クリックの対象** `{ on, r, c }`。`on` は `'col'`（列ヘッダ）/`'row'`（行ヘッダ）/`'cell'`（データセル）/`'corner'`（隅）。例: **列ヘッダを右クリックした時だけ項目を出す**なら `hidden: (range, ctx) => ctx.on !== 'col'`。
 - `submenu` に配列を渡すとフライアウトの**サブメニュー**になります（同じ組込キー／カスタム項目が使えます）。
 

package/package.json

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

package/plugins/tss-cascade.css

@@ -0,0 +1,15 @@
+/* TssCascade — 多段（フライアウト）プルダウン（plugins/tss-cascade.js）。色は --tg-accent を流用。 */
+.tg-cascade {
+  position: fixed; z-index: 1000; min-width: 150px; max-height: 60vh; overflow: auto;
+  background: #fff; color: #1f2733; border: 1px solid #c4ccd6; border-radius: 8px;
+  box-shadow: 0 6px 22px rgba(20, 40, 80, .22);
+  font: 13px "Meiryo UI", "Segoe UI", sans-serif; padding: 4px; box-sizing: border-box;
+}
+.tg-cascade .tg-casc-item {
+  display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 5px;
+  cursor: pointer; white-space: nowrap; outline: none;
+}
+.tg-cascade .tg-casc-item:hover,
+.tg-cascade .tg-casc-item.active { background: var(--tg-accent, #1573c0); color: #fff; }
+.tg-cascade .tg-casc-label { flex: 1; }
+.tg-cascade .tg-casc-arrow { font-size: 10px; opacity: .7; margin-left: 6px; }

package/plugins/tss-cascade.js

@@ -0,0 +1,139 @@
+/*! TssCascade — 多段（フライアウト）プルダウン。TssGrid カスタムエディタ（ポップアップ型）。
+ *
+ *  メニューのように「大分類 ▸ 中分類 ▸ 小分類」とフライアウトで開き、葉を選ぶとセルに確定。
+ *  保存はその葉の value（未指定なら label）。表示は TssCascade.pathFormat で「大 / 中 / 小」のパスにできる。
+ *
+ *  使い方:
+ *    const OPTS = [
+ *      { label:'営業', children:[
+ *        { label:'国内', children:[ {label:'東日本', value:'sales.jp.east'}, {label:'西日本', value:'sales.jp.west'} ] },
+ *        { label:'海外', value:'sales.global' },
+ *      ] },
+ *      { label:'開発', children:[ … ] },
+ *    ];
+ *    columns: [
+ *      { data:'category', editor: TssCascade({ options: OPTS }),
+ *        format: TssCascade.pathFormat(OPTS) },   // 表示を「営業 / 国内 / 東日本」に（任意）
+ *    ]
+ *
+ *  opts:
+ *    options     : 入れ子配列 [{ label, value?, children? }]。必須。value 未指定の葉は label を保存。
+ *    openOnClick : 既定 true（プルダウン同様シングルクリックで開く）。
+ *    className   : ポップアップに付ける任意クラス。
+ *  静的:
+ *    TssCascade.pathFormat(options, { separator }) => (value)=>string   // 列 format 用
+ *    TssCascade.pathOf(options, value, sep?) => string
+ */
+(function (root) {
+  'use strict';
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  function leafVal(n) { return n.value !== undefined ? n.value : n.label; }
+
+  // 値 → ラベルのパス配列（[大, 中, 小]）。見つからなければ null。
+  function findPath(nodes, value, trail) {
+    trail = trail || [];
+    for (var i = 0; i < (nodes || []).length; i++) {
+      var n = nodes[i], t = trail.concat(n.label);
+      if (n.children && n.children.length) { var r = findPath(n.children, value, t); if (r) return r; }
+      else if (String(leafVal(n)) === String(value)) return t;
+    }
+    return null;
+  }
+
+  function TssCascade(opts) {
+    opts = opts || {};
+    var roots = opts.options || [];
+    var panels = [];              // 開いているパネル(div)。panels[0]=root, [1]=sub, …
+    var ctxRef = null, done = false, onDoc = null, onKey = null;
+
+    function teardown() {
+      panels.forEach(function (p) { if (p.parentNode) p.parentNode.removeChild(p); });
+      panels = [];
+      if (onDoc) document.removeEventListener('mousedown', onDoc, true);
+      if (onKey) document.removeEventListener('keydown', onKey, true);
+      onDoc = onKey = null;
+    }
+    function closeFrom(depth) { while (panels.length > depth) { var p = panels.pop(); if (p.parentNode) p.parentNode.removeChild(p); } }
+    function commitLeaf(n) { if (done) return; done = true; var c = ctxRef; teardown(); c.commit(leafVal(n)); }
+    function doCancel() { if (done) return; done = true; var c = ctxRef; teardown(); c.cancel(); }
+
+    function position(pop, anchor, depth) {
+      var pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, left, top;
+      if (depth === 0) { left = anchor.left; top = anchor.bottom + 2; }
+      else { left = anchor.right - 2; top = anchor.top - 4; }               // 親アイテムの右へフライアウト
+      if (left + pw > vw - 6) left = depth === 0 ? Math.max(6, vw - pw - 6) : Math.max(6, anchor.left - pw + 2);  // 右端で左へフリップ
+      if (top + ph > vh - 6) top = Math.max(6, vh - ph - 6);
+      pop.style.left = Math.max(6, left) + 'px'; pop.style.top = top + 'px';
+    }
+
+    function openPanel(nodes, depth, anchor) {
+      closeFrom(depth);
+      var pop = document.createElement('div');
+      pop.className = 'tg-cascade' + (opts.className ? ' ' + opts.className : '');
+      pop.setAttribute('role', 'menu');
+      pop.innerHTML = nodes.map(function (n, i) {
+        var branch = n.children && n.children.length;
+        return '<div class="tg-casc-item' + (branch ? ' branch' : '') + '" data-i="' + i + '" role="menuitem" tabindex="-1">' +
+          '<span class="tg-casc-label">' + esc(n.label) + '</span>' + (branch ? '<span class="tg-casc-arrow">▸</span>' : '') + '</div>';
+      }).join('');
+      document.body.appendChild(pop);
+      panels[depth] = pop;
+      position(pop, anchor, depth);
+
+      var items = pop.querySelectorAll('.tg-casc-item');
+      pop._items = items; pop._active = null; pop._depth = depth;
+      pop._activate = function (idx) { Array.prototype.forEach.call(items, function (el, k) { el.classList.toggle('active', k === idx); }); pop._active = idx; };
+      pop._enter = function (idx, viaKey) {          // 分岐なら submenu を開く（ホバー/→）。葉なら深いパネルを閉じる。
+        var n = nodes[idx]; if (!n) return; pop._activate(idx);
+        if (n.children && n.children.length) {
+          openPanel(n.children, depth + 1, items[idx].getBoundingClientRect());
+          if (viaKey) { var sub = panels[depth + 1], f = sub._items[0]; if (f) { sub._activate(0); f.focus(); } }
+        } else closeFrom(depth + 1);
+      };
+      pop._choose = function (idx) {                 // クリック/Enter：分岐→開く、葉→確定
+        var n = nodes[idx]; if (!n) return;
+        if (n.children && n.children.length) pop._enter(idx, true); else commitLeaf(n);
+      };
+      Array.prototype.forEach.call(items, function (el) {
+        var idx = +el.dataset.i;
+        el.addEventListener('mouseenter', function () { pop._enter(idx, false); });
+        el.addEventListener('click', function (e) { e.stopPropagation(); pop._choose(idx); });
+      });
+      return pop;
+    }
+
+    function handleKey(e) {
+      var pop = panels[panels.length - 1]; if (!pop) return;
+      var items = pop._items, idx = pop._active == null ? -1 : pop._active, n;
+      if (e.key === 'ArrowDown') { e.preventDefault(); n = (idx + 1) % items.length; pop._activate(n); items[n].focus(); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); n = (idx - 1 + items.length) % items.length; pop._activate(n); items[n].focus(); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); if (idx >= 0) pop._enter(idx, true); }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); if (panels.length > 1) { closeFrom(panels.length - 1); var pp = panels[panels.length - 1]; if (pp._active != null) pp._items[pp._active].focus(); } }
+      else if (e.key === 'Enter') { e.preventDefault(); if (idx >= 0) pop._choose(idx); }
+      else if (e.key === 'Escape') { e.preventDefault(); doCancel(); }
+    }
+
+    return {
+      openOnClick: opts.openOnClick !== false,
+      open: function (ctx) {
+        ctxRef = ctx; done = false;
+        openPanel(roots, 0, ctx.td.getBoundingClientRect());
+        onDoc = function (e) { for (var i = 0; i < panels.length; i++) if (panels[i].contains(e.target)) return; doCancel(); };
+        onKey = handleKey;
+        document.addEventListener('mousedown', onDoc, true);
+        document.addEventListener('keydown', onKey, true);
+        var f = panels[0]._items[0]; if (f) { panels[0]._activate(0); f.focus(); }
+      },
+      close: function () { teardown(); },
+    };
+  }
+
+  TssCascade.pathFormat = function (options, o) {
+    o = o || {}; var sep = o.separator || ' / ';
+    return function (value) { if (value === '' || value == null) return ''; var p = findPath(options || [], value); return p ? p.join(sep) : String(value); };
+  };
+  TssCascade.pathOf = function (options, value, sep) { var p = findPath(options || [], value); return p ? p.join(sep || ' / ') : (value == null ? '' : String(value)); };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssCascade;
+  else root.TssCascade = TssCascade;
+})(typeof self !== 'undefined' ? self : this);

package/src/tssgrid.d.ts

@@ -65,8 +65,10 @@ export interface ColumnDef {
   editor?: EditorDef | (() => EditorDef);
   /** 入力の正規化（保存値へ変換）。 */
   parse?: (input: string, cell: CellCoord) => any;
-  /** 表示の整形（保存値→表示）。文字列 or 宣言的 CellFormat。 */
-  format?: string | object | ((value: any, cell: CellCoord) => string);
+  /** 表示の整形（保存値→表示）。文字列 or 宣言的 CellFormat or 関数。
+   *  関数は `(value, { r, c }, row)`＝第3引数 `row` はその行の値配列（`grid.data[r]`・options と同形）。
+   *  html:true 併用でセル内にボタン/アイコン等の HTML を描ける（空セルでも実行される）。 */
+  format?: string | object | ((value: any, cell: CellCoord, row: any[]) => string);
   /** 数値型: 千区切り表示。 */
   thousands?: boolean;
   /** 数値型: 接頭辞（例 '¥'）。 */

package/src/tssgrid.js

@@ -1093,7 +1093,7 @@
       const cfg = this.colCfg(c), v = this.data[r][c];
       if (v === '') return v;
       if (typeof cfg.format === 'function') {
-        try { const out = cfg.format(v, { r, c }); return out == null ? '' : String(out); } catch (_) { return v; }
+        try { const out = cfg.format(v, { r, c }, this.data[r]); return out == null ? '' : String(out); } catch (_) { return v; }   // 第3引数=その行の値配列（options と同形）
       }
       if (typeof cfg.format === 'string') return TssGrid._applyDatePattern(v, cfg.format);  // 日付パターン表示
       if (cfg.type === 'number') return TssGrid._formatNumber(v, cfg);  // 数値書式（カンマ/小数/前後綴り）
@@ -1128,7 +1128,7 @@
       // 空セルでも format を走らせる＝ボタン/アイコン等の"飾り"を全行に描ける（_displayValue は空を素通しするので html+関数formatだけ特別扱い）。
       if (this.colCfg(c).html) {
         const fmt = this.colCfg(c).format;
-        if (typeof fmt === 'function' && this.data[r][c] === '') { try { const o = fmt('', { r, c }); return o == null ? '' : String(o); } catch (_) { return ''; } }
+        if (typeof fmt === 'function' && this.data[r][c] === '') { try { const o = fmt('', { r, c }, this.data[r]); return o == null ? '' : String(o); } catch (_) { return ''; } }
         return this._displayValue(r, c);
       }
       const _h = TssGrid.esc(this._displayValue(r, c));
@@ -2545,7 +2545,10 @@
         const disabled = typeof entry.disabled === 'function' ? !!entry.disabled.call(this, s, ctx) : !!entry.disabled;
         const it = { label: String(name == null ? '' : name), disabled, danger: !!entry.danger };
         if (Array.isArray(entry.submenu)) it.submenu = entry.submenu;
-        else it.act = () => { if (typeof entry.callback === 'function') { try { entry.callback.call(this, { range: { ...s }, key: entry.key, ctx }); } catch (_) {} } };
+        else if (typeof entry.callback === 'function') it.act = () => { try { entry.callback.call(this, { range: { ...s }, key: entry.key, ctx }); } catch (_) {} };
+        // callback 無しで key が組込項目（row_above 等）を指すなら、その組込アクションを実行＝
+        // 「組込動作のまま name/disabled だけカスタムしたい」を可能に（key だけ書いて無反応だった不具合の解消）。
+        else if (entry.key) { const bi = this._builtinItem(entry.key, s); if (bi && typeof bi.act === 'function') it.act = bi.act; }
         items.push(it);
       }
       return items;