@threestarsoftware/tssgrid 0.1.25 → 0.1.27

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.27] - 2026-10-14
+
+### セキュリティ修正
+- **`rowClass` / `cellClass` の戻り値がエスケープされず `class` 属性に差し込まれる XSS を修正**（コア）— `rowClass` が返すクラス名が `<tr class="...">` に生で入っており（`data-rcls` は esc 済みだが class 側は未処理）、利用者データ（行の値／`src`）由来のクラス名に `"` を含めると属性を差し込める（`onmouseover` 等＝XSS）。`cellClass`→`class`／`classList.add` も同型。**`_cellClasses`/`_rowClassStr` が返すクラストークンを「安全なクラス名（空白や `" ' < > &` を含まない）」だけに絞る**ように修正（class 属性・`classList.add` の両経路に有効。Tailwind 風の `/` `:` `.` や Unicode クラスは保持）。あわせて **`TssGrid.esc` が `"` `'` も escape** するように（従来 `& < >` のみ）＝`data-rcls`/`data-ccls`/`title` 等 esc 済み属性の `"` 抜けも根から解消。正規のクラスでは挙動不変。
+
+## [0.1.26] - 2026-10-14
+
+### 追加
+- **公開APIの棚卸し＝実務ギャップを一括で公開＋型付け**（コア・TS/Vue 利用向け）。
+  - **`setColumns(columns, headers?)`**：実行時に列定義を差し替え（Vue の `:columns` 変更等）。object モードは元レコード(`_src`)から再展開、配列モードは行を新 COLS に詰める。
+  - **`setReadOnly(flag)`**：グリッド全体の読み取り専用を実行時に切替（`:readonly`）。
+  - **`getSelection()`** / **`rectRange()`**：現在の選択範囲を取得。
+  - **`setCells(cells)`**：`[{r,c,value}]`（c は index か data キー）を **1 undo でまとめ書き込み**（値コピー→再計算等の batch 書き込み）。
+  - **状態プロパティを `.d.ts` に宣言**：`name`/`active`/`extent`/`virtual`/`readOnly`（readonly。`ROWS`/`COLS`/`dataComplete` は既存）。
+  - **`colCfg`/`colType`/`setColumnChecked`/`toEdit`/`pasteGrid` を `.d.ts` に宣言**（元から public だが未宣言だったものを TS で型付きに）。
+  - examples `invoice`/`quote` の低レベル書き込みを `setCells` に移行。挙動は不変。
+
+### 追加（サンプル）
+- **遅延ロード例に「列に無い `src` 項目で行を色付け」を追加**（`examples/lazy-load.html`）— `rowClass:(r,row,src)=>src.retired?…` で退職者行を赤く＝v0.1.25 修正（`data:[]` 遅延ロードでも src が届く）の動く例。
+
 ## [0.1.25] - 2026-10-13
 
 ### 修正

package/package.json

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

package/src/tssgrid.d.ts

@@ -342,6 +342,16 @@ export declare class TssGrid {
   /** Enter/Tab 確定後の移動方向（代入で即反映）。 */
   enterMoves: MoveDir;
   tabMoves: MoveDir;
+  /** グリッド名（読み取り）。 */
+  readonly name: string;
+  /** アクティブセル（読み取り。移動は setActive）。 */
+  readonly active: { r: number; c: number };
+  /** 選択の伸長端（読み取り。setExtent で移動）。 */
+  readonly extent: { r: number; c: number };
+  /** 仮想スクロール有効か（読み取り）。 */
+  readonly virtual: boolean;
+  /** グリッド全体の読み取り専用（読み取り。実行時変更は setReadOnly）。 */
+  readonly readOnly: boolean;
 
   // ---- データ -------------------------------------------------------------
   /** 全データを2次元配列で取得（コピー）。 */
@@ -358,6 +368,12 @@ export declare class TssGrid {
   getValue(r: number, cOrKey: number | string): any;
   /** データを差し替え（履歴・フィルタ・整列状態はリセット）。 */
   setData(rows: any[][] | Record<string, any>[]): void;
+  /** 実行時に列定義を差し替える（Vue の `:columns` 変更等）。`headers` 省略時は columns から再導出。
+   *  object モードは元レコード(`_src`)から新 columns で再展開、配列モードは各行を新 COLS に詰める。
+   *  列構造が変わるので整列/セル単位 readOnly はクリア、frozen/選択は範囲内へクランプ。 */
+  setColumns(columns: ColumnDef[], headers?: (string | { label?: string })[]): void;
+  /** グリッド全体の読み取り専用を実行時に切替（Vue の `:readonly` 等）。 */
+  setReadOnly(flag: boolean): void;
   /**
    * 背景で"育てる"追記（progressive）。data 末尾へ rows を足し、可視窓＋スペーサだけ再描画する。
    * buildTable 全再描画をせず、スクロール位置・アクティブセル・フォーカス・選択・編集中のエディタと値を保ち、履歴にも積まない。
@@ -382,6 +398,12 @@ export declare class TssGrid {
   setValue(r: number, cOrKey: number | string, val: any, force?: boolean): void;
   /** 履歴に積まず・検証も通さず直接書き込み（計算列など派生値用。readOnly 貫通）。 */
   setValueRaw(r: number, cOrKey: number | string, val: any): void;
+  /** 複数セルをまとめて書き込み、1 undo にする。`c` は列 index か data キー。値コピー→再計算等の batch 書き込みに。 */
+  setCells(cells: { r: number; c: number | string; value: any }[]): void;
+  /** アクティブセルを編集モードにする（低レベル）。`value` 指定でその値から開始、`caretEnd` でキャレット末尾。読取専用は無視。 */
+  toEdit(value?: any, caretEnd?: boolean): void;
+  /** アクティブセルを左上に、2次元配列を貼り付け（はみ出しは pasteOverflow ポリシー・1 undo）。 */
+  pasteGrid(grid: any[][]): void;
 
   // ---- 並べ替え / フィルタ -------------------------------------------------
   /** 列で並べ替え（c は index か data キー）。 */
@@ -418,6 +440,10 @@ export declare class TssGrid {
   getSelectedColumns(): number[];
   /** 選択中の行インデックス（Ctrl+行ヘッダクリックの飛び飛び選択に対応・昇順）。行選択モードでなければ `[]`。 */
   getSelectedRows(): number[];
+  /** 現在の選択範囲（矩形＋active/extent）を取得。 */
+  getSelection(): { r0: number; c0: number; r1: number; c1: number; active: { r: number; c: number }; extent: { r: number; c: number } };
+  /** 現在の選択矩形 `{r0,c0,r1,c1}`（active↔extent の正規化）。 */
+  rectRange(): { r0: number; c0: number; r1: number; c1: number };
   /** 飛び飛びの複数列をまとめて削除（高index側から。右クリック「N 列を削除」の実体）。 */
   deleteColsSet(cols: number[]): void;
   /** 飛び飛びの複数行をまとめて削除（高index側から。右クリック「N 行を削除」の実体）。 */
@@ -443,6 +469,12 @@ export declare class TssGrid {
   toggleColumn(c: number): void;
   isColumnHidden(c: number): boolean;
   getHiddenColumns(): number[];
+  /** 列 c の定義（columns[c]）を取得（列の introspection 用）。 */
+  colCfg(c: number): ColumnDef;
+  /** 列 c の型（'text'|'dropdown'|'checkbox'|'date'|'time'|'number'）。 */
+  colType(c: number): string;
+  /** checkbox 列を全 ON/OFF（readOnly 行はスキップ・1 undo）。 */
+  setColumnChecked(c: number, flag: boolean): void;
   setColWidth(c: number, px: number): void;
   autoSizeColumn(c: number): void;
   autoSizeAllColumns(): void;
@@ -493,7 +525,7 @@ export declare class TssGrid {
    *  number/date/time の組込 parse で使うほか、カスタム `parse`/`format` から `TssGrid.zen2han(v)` として呼べる。 */
   static zen2han(s: string): string;
 
-  /** HTML エスケープ（`&` `<` `>`）。`format` で HTML を組む時などに。 */
+  /** HTML エスケープ（`&` `<` `>` `"` `'`）。`format` で HTML/属性を組む時などに（属性値も安全）。 */
   static esc(s: any): string;
 
   [k: string]: any;

package/src/tssgrid.js

@@ -63,14 +63,7 @@
       // 見出し: 明示 headers > columns の title/data 由来 > 既定 A,B,C
       // 見出しの決定: 明示 title（'' 含む）を最優先で尊重。checkbox 列は「ヘッダ＝全選択チェック」なので
       // title 未設定でも data 名（'checked' 等）を出さない（空）。それ以外は title 未設定なら data 名→無ければ列ラベル。
-      this.headers = opts.headers || (this.columns.length
-        ? this.columns.map((c, i) => {
-            if (!c) return undefined;                            // 列定義なし＝従来どおり（空表示）
-            if (c.title != null) return c.title;                 // 明示 title（'' で見出し無し）を尊重
-            if (c.type === 'checkbox') return '';                // checkbox は data 名を見出しに出さない
-            return c.data || TssGrid._colLabel(i);               // 従来: title 未設定は data 名 → 無ければ列ラベル
-          })
-        : ['A', 'B', 'C']);
+      this.headers = this._deriveHeaders(opts.headers);
       this.COLS = this.headers.length;
       // データ取り込み: 配列(string[][]) と オブジェクト配列(object[]) を自動判別。
       // オブジェクト時は columns[c].data をキーに 2次元へ展開し、元オブジェクトは _src に保持（非表示フィールド維持）。
@@ -374,6 +367,39 @@
       return out;
     }
     setData(rows) { this._align.clear(); this._cellRO.clear(); this._unsortedData = null; this._allRows = this._allSrc = this._meta = this._filterFn = null; this.dataComplete = true; this._pendingCount = 0; if (this.history) this.history.clear(); this._ingest(rows); this._padToMin(); this.buildTable(); const ic = this._resolveInitialCell(); this.setActive(ic[0], ic[1]); this._ensureSpare(); }
+    // 見出し導出（constructor / setColumns で共用）: 明示 headers > columns の title/data 由来 > A,B,C。
+    _deriveHeaders(headersOpt) {
+      if (headersOpt) return headersOpt.slice();
+      if (!this.columns.length) return ['A', 'B', 'C'];
+      return this.columns.map((c, i) => {
+        if (!c) return undefined;
+        if (c.title != null) return c.title;
+        if (c.type === 'checkbox') return '';                 // checkbox は data 名を見出しに出さない
+        return c.data || TssGrid._colLabel(i);
+      });
+    }
+    // 実行時に列定義を差し替える（Vue の :columns 変更等）。headers 省略時は columns から再導出。
+    // データは object モードなら _src から新 columns で再展開、配列モードは各行を新 COLS に合わせて詰める。
+    // 列構造が変わるので per-cell 状態（整列/セル readOnly）はクリア、frozen/選択は範囲内へクランプ。
+    setColumns(columns, headers) {
+      this.columns = columns || [];
+      this.headers = this._deriveHeaders(headers);
+      this.COLS = this.headers.length;
+      if (this._src) {
+        this.data = this.data.map((row, r) => row === TssGrid.PENDING ? row : this._objToRow(this._src[r] || {}));
+      } else {
+        this.data = this.data.map(row => { const a = (Array.isArray(row) ? row : []).slice(0, this.COLS); while (a.length < this.COLS) a.push(''); return a; });
+      }
+      this._align.clear(); this._cellRO.clear();              // 旧列 index を指す状態は破棄
+      if (this.frozenCols > this.COLS) this.frozenCols = this.COLS;
+      this.active = { r: this.clampR(this.active.r), c: this.clampC(this.active.c) };
+      this.extent = { r: this.active.r, c: this.active.c };
+      this.buildTable(); this.setActive(this.active.r, this.active.c);
+    }
+    // グリッド全体の読み取り専用を実行時に切替（Vue の :readonly 等）。
+    setReadOnly(flag) { this.readOnly = !!flag; this.buildTable(); this.setActive(this.active.r, this.active.c); }
+    // 現在の選択範囲を取得（矩形＋active/extent）。rectRange の公開版。
+    getSelection() { const g = this.rectRange(); return { r0: g.r0, c0: g.c0, r1: g.r1, c1: g.c1, active: { ...this.active }, extent: { ...this.extent } }; }
     // 背景で"育てる"追記（progressive）: data 末尾へ rows を足し ROWS を更新、可視窓＋上下スペーサだけ再描画する。
     // buildTable 全再描画をしない＝スクロール位置・アクティブセル・フォーカス・選択範囲・編集中のエディタと値を保つ。
     // history には積まない（背景成長は undo 対象外）。既存の setData/insertRows 経路は不変＝完全 opt-in。
@@ -517,6 +543,19 @@
       this.setCell(r, ci, this._cellStr(val), changes);
       this.pushCmd(changes, before, this.snapSel(), 'edit', !!force);
     }
+    // 複数セルをまとめて書き込み、1 undo にする。cells = [{ r, c, value }]（c は index か data キー）。
+    // 「値コピー→再計算」等の batch 書き込み向け＝raw な setCell/pushCmd を外から触らずに済む公開プリミティブ。
+    setCells(cells) {
+      if (!Array.isArray(cells) || !cells.length) return;
+      const before = this.snapSel(), changes = [];
+      for (const it of cells) {
+        if (!it) continue;
+        const ci = this._resolveCol(it.c);
+        if (ci < 0 || it.r < 0 || it.r >= this.ROWS) continue;
+        this.setCell(it.r, ci, this._cellStr(it.value), changes);
+      }
+      if (changes.length) this.pushCmd(changes, before, this.snapSel(), 'edit');
+    }
     // 履歴に積まず・検証も通さず値を直接セット（readOnly も貫通）。表示書式は描画時に適用。
     // 計算列など「入力から導く派生値」向け。undo/redo では入力セルが履歴復元され、onAfterChange で
     // これを呼んで再計算する流儀にする＝派生値が独立した undo ステップにならず入力に追従する。
@@ -828,7 +867,14 @@
       if (this.height) this.wrap.style.maxHeight = this.height;  // 高さ制約（縦スクロール用）
     }
 
-    static esc(s) { return String(s).replace(/[&<>]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[m])); }
+    static esc(s) { return String(s).replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[m])); }
+    // rowClass/cellClass が返す値を「CSS クラス名として安全なトークン配列」に。class 属性へ生で入る＋classList.add
+    // するため、空白や " ' < > & を含むトークンは捨てる＝属性抜け(XSS)や classList.add の例外を防ぐ。
+    static _clsSafe(x) {
+      if (!x) return [];
+      const toks = (Array.isArray(x) ? x : [x]).filter(Boolean).map(String).join(' ').split(/\s+/);
+      return toks.filter(t => t && /^[^\s"'<>&]+$/.test(t));
+    }
     cellEl(r, c) { if (this._merges) { const a = this._anchorOf(r, c); r = a.r; c = a.c; } return this.table.querySelector('td[data-r="' + r + '"][data-c="' + c + '"]'); }
     activeTd() { return this.cellEl(this.active.r, this.active.c); }
     clampR(r) { return Math.max(0, Math.min(this.ROWS - 1, r)); }
@@ -1176,7 +1222,7 @@
       const cc = this.colCfg(c).cellClass;
       if (typeof cc === 'function') { try { push(cc(v, { r, c, row: this.data[r], src })); } catch (_) {} }
       if (typeof this.cellClass === 'function') { try { push(this.cellClass(r, c, v, this.data[r], src)); } catch (_) {} }   // row=値配列, src=元レコード
-      return out.filter(Boolean);
+      return TssGrid._clsSafe(out);   // クラス名として安全なトークンのみ（class 属性/classList.add へ生で入るため）
     }
     // 条件付きクラスをセルに反映（前回分 data-ccls を外してから付け直す＝値変更で追従）。
     _applyCellClass(td, r, c) {
@@ -1189,7 +1235,8 @@
     // 行クラス: rowClass(r, row, src) → 空白区切り文字列（配列は join）。無効/例外は ''。
     _rowClassStr(r) {
       if (typeof this.rowClass !== 'function') return '';
-      try { const x = this.rowClass(r, this.data[r], this._src ? this._src[r] : null); return x ? (Array.isArray(x) ? x.filter(Boolean).join(' ') : String(x).trim()) : ''; } catch (_) { return ''; }
+      let x; try { x = this.rowClass(r, this.data[r], this._src ? this._src[r] : null); } catch (_) { return ''; }
+      return TssGrid._clsSafe(x).join(' ');   // クラス名として安全なトークンのみ（<tr class>/classList.add へ生で入るため）
     }
     // <tr> の行クラスを反映（前回分 data-rcls を外して付け直す＝セル再描画で追従）。
     _applyRowClass(r) {