@threestarsoftware/tssgrid 0.1.25 → 0.1.26

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [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.26",
   "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;

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 ステップにならず入力に追従する。