@threestarsoftware/tssgrid 0.1.21 → 0.1.23

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.23] - 2026-10-08
+
+### 追加
+- **`TssGrid.zen2han(s)` / `TssGrid.esc(s)` を公開 static として型定義（`.d.ts`）に追加**（コア）— 全角→半角ユーティリティ（内部名 `_zen2han` を公開名 `zen2han` にリネーム）と HTML エスケープ `esc` を、**TypeScript から型付きで呼べる**ように宣言。`number`/`date`/`time` の組込 parse で使うほか、**カスタム `parse`/`format` から `TssGrid.zen2han(v)` を再利用**できる（例: 和暦・年月日の自前パーサの前処理で全角も吸収）。挙動は不変。
+
+## [0.1.22] - 2026-10-07
+
+### 追加
+- **`renderCell(r, cOrKey)` を公開**（コア）— セル1つだけ表示を描き直す（テキスト/HTML・条件付き書式〔cellClass/cellStyle/rowClass〕・無効表示を最新データで）。全体 `redraw()` より軽い。`format` が外部状態に依存する／セル内ボタンの状態を更新した等で「このセルだけ」描き直したい時に。`c` は列 index か data キー、範囲外 `r`・未解決 key・窓外/非表示は安全に no-op。**TypeScript の型定義（`.d.ts`）にも追加**。
+- **`date` / `time` 列が IME ON の全角入力を受理**（コア）— 従来は半角しか受け付けず弾いていた全角の日付/時刻（`２０２６／０１／０５`・`９：３０` 等）を、**半角化して受理**するように（`number` 列と同じく `_zen2han` を通す。全角スラッシュ `／`・全角コロン `：` も対応）。全角の日付/時刻は元々不正なので常に正規化＝受理が広がるだけ（半角は従来どおり・実在しない日付/時刻は引き続き拒否）。
+- **ページネーション（サーバ側ページング）のサンプルを追加** — `examples/pagination.html`。ページネーションはサーバ API 形に依存するため**本体は「渡された1ページ分を描く」だけ**に徹する方針を、モックサーバ `fetchPage(offset,limit)→{rows,total}` ＋ `grid.setData(rows)` ＋ グリッド外の前/次/ページサイズ/「N件中 M〜」で提示。README に「ページネーション（サーバ側ページング）」節も追加。
+
 ## [0.1.21] - 2026-10-06
 
 ### 修正

package/README.md

@@ -351,6 +351,22 @@ new TssGrid(el, { virtual: { buffer: 10 }, data });   // 窓の上下バッフ
 - 制約（v1）: **行高一定**／**固定行列・折り返し・セル結合は非対応**（指定時は自動で無効化＋警告）。行番号の桁数が増える場合は `rowHeaderWidth` で行ヘッダ幅を広げられます。
 - フィルタとの関係: `filter()` は「絞り込んだ部分集合だけ描く」軽さ、`virtual` は「絞らず全件をスクロールする」軽さ。用途で使い分け（v1 では併用は未対応）。
 
+### ページネーション（サーバ側ページング）
+
+ページネーションは**サーバの API 形（offset/limit・`total` 件数の有無）に依存**するので、**TssGrid 本体は「渡された1ページ分を描く」だけ**に徹します（コアに作り込みません）。ロジックはアプリ側で、**ページ変更 → fetch → `grid.setData(pageRows)`**、ページ番号ボタンや「N 件中 M〜」は**グリッドの外**に置きます。動く例: [`examples/pagination.html`](https://tssgrid.threestarsoftware.co.jp/examples/pagination.html)。
+
+```js
+async function load() {
+  const { rows, total } = await fetchPage((page - 1) * size, size);  // サーバの offset/limit
+  grid.setData(rows);          // ← TssGrid は1ページ分を描くだけ
+  renderCount(total);          // 「N 件中 M〜」はグリッドの外で
+}
+// 前/次/ページ番号は <button> で外に置き、go(p) → load() を呼ぶ
+```
+- **`total` が返るサーバ**: 「全何件・何ページ」まで出せる（上の例）。**`total` が無い（cursor のみ）**: ページ番号は出せないので **`appendRows` で「もっと読む」＝無限スクロール型**に。
+- **1本の長いスクロールで必要分だけ取得**したいなら、ページ送りでなく `setRowCount(total)` ＋ `onViewportChange` ＋ `fillRows(start, rows)`（AG Grid の Infinite Row Model 相当・上の「メソッド」参照）。
+- sort/filter をサーバ側でやる場合も同じ＝**操作 → 再 fetch → `setData`**（遅延スクロール型なら `onSortFilterChange` で委譲）。
+
 ### 同梱プラグイン: ヘッダ オートフィルタ（filter UI）
 
 `plugins/tss-filter.js`＋`.css`＝ 各見出しの**ロート（漏斗）アイコン**をクリックで**値チェックリスト＋検索**のポップアップ（Excel風。ソートの▲▼と区別できるアイコン）。複数列の条件は **AND**。中身は上の**コア `filter()` を呼ぶだけ**。動く例: [`examples/filter-ui.html`](https://tssgrid.threestarsoftware.co.jp/examples/filter-ui.html)。
@@ -972,7 +988,7 @@ new TssGrid(el, {
 });
 ```
 
-メソッド: `getData()` / `getRows()` / `getRow(r)` / `getColumn(cOrKey)` / `getColumns()` / `setData(rows)` / `appendRows(rows,opts?)`（**背景で"育てる"追記**＝data末尾に足し可視窓だけ再描画。buildTable全再描画せずスクロール位置・選択・編集中エディタを保ち履歴にも積まない。「先頭ページを描く→残りをidleでappendRows」でfirst-paintを早める土台。既存経路は不変のopt-in） / `setRowCount(total)` ＋ `fillRows(start,rows)`（**遅延ロード=on-demand**＝virtual前提。総件数を確保し未取得ぶんは「読込中」行、`onViewportChange(start,end)` で要る範囲を受け `fillRows` で実データを流し込む。sort/filterは遅延中ローカル計算せず `onSortFilterChange` でサーバ委譲、未取得セルは編集不可、export（getData/toCSV）はロード済みのみ＝AG Grid の Infinite Row Model 相当を push で） / `getValue(r,cOrKey)` / `setValue(r,cOrKey,val,force?)` / `setValueRaw(r,cOrKey,val)`（履歴に積まない派生値書き込み・計算列用） / `hideColumn(c)` / `showColumn(c)` / `toggleColumn(c)` / `isColumnHidden(c)` / `getHiddenColumns()` / `setAlignment(align,range?)` / `getAlignment(r,c)` / `setCellReadOnly(flag,range?)` / `autoSizeColumn(c)` / `autoSizeAllColumns()` / `sortBy(cOrKey, dir)` / `sortRows(cmp)` / `addShortcut(s)` / `removeShortcut(name)` / `usePlugin(fn)` / `getPlugin(name)` / `destroy()` / `setActive(r,c)` / `scrollToRow(r, align?)`（**指定行までスクロール＝HTML の `#` アンカー相当**。`align` は `'start'`〔既定＝先頭・sticky ヘッダ直下〕/`'center'`/`'end'`/`'nearest'`〔可視ならそのまま〕。仮想・非仮想どちらでも動き、範囲外 `r` は自動クランプ。**選択は変えない**ので目印は `rowClass` 等を併用。例 `examples/scroll-to-row.html`） / `selectRow(r)` / `selectCol(c)` / `selectAll()` / `setColWidth(c,px)` / `setRowHeight(r,px)` / `freezeCols(n)` / `freezeRows(n)` / `moveRow(from,to)` / `moveRows(r0,r1,to)` / `clearSort()` / `toCSV(opts)` / `downloadCSV(name,opts)` / `insertRow(ri,'above'|'below')` / `insertRows(ri,count?,'above'|'below')`（count 行を1回の再描画・1 undo で一括挿入＝大量挿入が O(N)） / `deleteRows(r0,r1?)` / `insertCol(ci,'left'|'right')` / `deleteCols(c0,c1?)` / `redraw()`（列定義変更後の再描画, データ・選択は保持）ほか。
+メソッド: `getData()` / `getRows()` / `getRow(r)` / `getColumn(cOrKey)` / `getColumns()` / `setData(rows)` / `appendRows(rows,opts?)`（**背景で"育てる"追記**＝data末尾に足し可視窓だけ再描画。buildTable全再描画せずスクロール位置・選択・編集中エディタを保ち履歴にも積まない。「先頭ページを描く→残りをidleでappendRows」でfirst-paintを早める土台。既存経路は不変のopt-in） / `setRowCount(total)` ＋ `fillRows(start,rows)`（**遅延ロード=on-demand**＝virtual前提。総件数を確保し未取得ぶんは「読込中」行、`onViewportChange(start,end)` で要る範囲を受け `fillRows` で実データを流し込む。sort/filterは遅延中ローカル計算せず `onSortFilterChange` でサーバ委譲、未取得セルは編集不可、export（getData/toCSV）はロード済みのみ＝AG Grid の Infinite Row Model 相当を push で） / `getValue(r,cOrKey)` / `setValue(r,cOrKey,val,force?)` / `setValueRaw(r,cOrKey,val)`（履歴に積まない派生値書き込み・計算列用） / `hideColumn(c)` / `showColumn(c)` / `toggleColumn(c)` / `isColumnHidden(c)` / `getHiddenColumns()` / `setAlignment(align,range?)` / `getAlignment(r,c)` / `setCellReadOnly(flag,range?)` / `autoSizeColumn(c)` / `autoSizeAllColumns()` / `sortBy(cOrKey, dir)` / `sortRows(cmp)` / `addShortcut(s)` / `removeShortcut(name)` / `usePlugin(fn)` / `getPlugin(name)` / `destroy()` / `setActive(r,c)` / `scrollToRow(r, align?)`（**指定行までスクロール＝HTML の `#` アンカー相当**。`align` は `'start'`〔既定＝先頭・sticky ヘッダ直下〕/`'center'`/`'end'`/`'nearest'`〔可視ならそのまま〕。仮想・非仮想どちらでも動き、範囲外 `r` は自動クランプ。**選択は変えない**ので目印は `rowClass` 等を併用。例 `examples/scroll-to-row.html`） / `selectRow(r)` / `selectCol(c)` / `selectAll()` / `setColWidth(c,px)` / `setRowHeight(r,px)` / `freezeCols(n)` / `freezeRows(n)` / `moveRow(from,to)` / `moveRows(r0,r1,to)` / `clearSort()` / `toCSV(opts)` / `downloadCSV(name,opts)` / `insertRow(ri,'above'|'below')` / `insertRows(ri,count?,'above'|'below')`（count 行を1回の再描画・1 undo で一括挿入＝大量挿入が O(N)） / `deleteRows(r0,r1?)` / `insertCol(ci,'left'|'right')` / `deleteCols(c0,c1?)` / `redraw()`（列定義変更後の再描画, データ・選択は保持） / `renderCell(r, cOrKey)`（**セル1つだけ表示を描き直す**＝テキスト/HTML・条件付き書式・無効表示を最新データで。全体 `redraw()` より軽い。`format` が外部状態に依存する／セル内ボタンの状態を更新した等に。窓外/非表示は no-op）ほか。
 
 ## イベント
 
@@ -1046,8 +1062,8 @@ new TssGrid(el, {
 | `'text'`（既定） | テキスト入力 | そのまま |
 | `'dropdown'` | `<select>`（`options` 必須）。セルに ▾ を表示、**1クリックで一覧が開き**、選ぶと即確定 | 選択肢 or 空のみ許可。範囲外は拒否。**クリア用の空オプションは自動で先頭に付く**ので `options` に `''` を入れない（入れると空が二重）。`allowEmpty:false` で**空オプションを出さず空値も弾く**＝ラジオ的な必須選択。**`options` は `string[]` または `{value,label}[]`＝保存値(value=内部コード)と表示(label)を分離**（`getData`/`getRows` は value で返る・検証も value で照合） |
 | `'checkbox'` | Space / クリックでトグル | `checked`(既定 `'1'`) / `unchecked`(既定 `''`)。貼付値も正規化 |
-| `'date'` | `<input type="date">` | `YYYY-MM-DD` のみ。実在しない日付（例 `2026-02-30`）は拒否 |
-| `'time'` | `<input type="time">` / テキスト | `HH:MM[:SS]`（24時間制）で保存。`hour12:true` で AM/PM 表示・入力 |
+| `'date'` | `<input type="date">` | `YYYY-MM-DD` のみ。実在しない日付（例 `2026-02-30`）は拒否。**全角→半角を正規化**（IME ON のまま `２０２６／０１／０５` と打っても受理。区切りは `-` `/` `.` ＋ 8桁 `20260105` も可） |
+| `'time'` | `<input type="time">` / テキスト | `HH:MM[:SS]`（24時間制）で保存。`hour12:true` で AM/PM 表示・入力。**全角→半角を正規化**（IME ON のまま `９：３０` と打っても受理） |
 | `'number'` | テキスト（編集時は素の数値） | 数値のみ。`decimals`/`thousands`/`prefix`/`suffix` で表示書式（→ [CellFormat](#cellformat宣言的な表示書式数値--日付)）。**全角→半角を既定で正規化**（`１２３`→`123`、`zenkaku:false`で無効化）。右寄せ |
 
 - **`validator(value, { r, c })`**: `true`/`undefined` で許可、`false` で拒否、**文字列を返すとエラーメッセージ付きで拒否**。型と併用可（型 → validator の順で評価）。

package/package.json

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

package/src/tssgrid.d.ts

@@ -462,6 +462,9 @@ export declare class TssGrid {
   downloadCSV(filename: string, opts?: CsvOptions): void;
   /** 列定義変更後などの再描画（データ・選択は保持）。 */
   redraw(): void;
+  /** セル1つだけ表示を描き直す（テキスト/HTML・条件付き書式・無効表示を最新データで）。全体 redraw より軽い。
+   *  format が外部状態に依存する／セル内ボタンの状態を更新した等に。`c` は列 index か data キー。窓外/非表示は no-op。 */
+  renderCell(r: number, cOrKey: number | string): void;
   /** 画像/フォント等の遅延レイアウト後に幾何キャッシュを再構築する保険。 */
   refreshGeometry(): void;
   /** グリッドを破棄（リスナ除去・DOM 撤去・idempotent）。フレームワークの teardown で呼ぶ。 */
@@ -486,6 +489,13 @@ export declare class TssGrid {
   /** 遅延ロード: 未取得行を表す sentinel。setRowCount が未取得ぶんを data[r] に入れ、fillRows で実データへ差し替える。 */
   static readonly PENDING: unique symbol;
 
+  /** 全角→半角（数字・符号・小数点・カンマ・%・¥・空白＋日付/時刻の区切り ／：）。IME 誤入力対策のユーティリティ。
+   *  number/date/time の組込 parse で使うほか、カスタム `parse`/`format` から `TssGrid.zen2han(v)` として呼べる。 */
+  static zen2han(s: string): string;
+
+  /** HTML エスケープ（`&` `<` `>`）。`format` で HTML を組む時などに。 */
+  static esc(s: any): string;
+
   [k: string]: any;
 }
 

package/src/tssgrid.js

@@ -526,6 +526,13 @@
     }
     // 列定義(format/hour12 等)を変えた後の再描画。データと選択は保持。
     redraw() { this.buildTable(); this.setActive(this.active.r, this.active.c); }
+    // セル1つだけ表示を描き直す（テキスト/HTML・条件付き書式〔cellClass/cellStyle/rowClass〕・無効表示を最新データで）。
+    // 全体 redraw() より軽い。format が外部状態に依存する／セル内ボタンの状態を更新した等で「このセルだけ」を描き直す用。
+    // c は列 index か data キー。非表示・仮想で窓外のセルは安全に no-op（描画対象の DOM が無いだけ）。
+    renderCell(r, c) {
+      const ci = this._resolveCol(c); if (ci < 0 || r < 0 || r >= this.ROWS) return;
+      this._renderCell(r, ci);
+    }
 
     // ---- 並べ替え（A方式: データ実体を並べ替え。Undo には積まない／状態は行に追従） ----
     // 行を order(=新しい並びの「元index配列」)で再配置。data/rowH/_src と セル状態(整列/cellRO)も行ごと追従。
@@ -954,7 +961,8 @@
     static _colLabel(n) { let s = ''; n = n | 0; do { s = String.fromCharCode(65 + (n % 26)) + s; n = Math.floor(n / 26) - 1; } while (n >= 0); return s; }
     // 入力文字列 → 'yyyy-mm-dd'（不正は null）。yyyymmdd / yyyy-mm-dd / yyyy/mm/dd / yyyy.mm.dd を許容。
     static _parseDate(s) {
-      s = String(s).trim(); if (s === '') return null;
+      s = TssGrid.zen2han(String(s).trim());   // IME ON の全角（２０２６／０１／０１ 等）も半角化して受理
+      if (s === '') return null;
       let y, m, d;
       const sep = /^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/.exec(s);
       if (sep) { y = +sep[1]; m = +sep[2]; d = +sep[3]; }
@@ -965,7 +973,8 @@
     }
     // 入力文字列 → 24時間制 'HH:MM' / 'HH:MM:SS'（不正は null）。24h と 12h(AM/PM) の両方を受理。
     static _parseTime(s) {
-      const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([AaPp][.]?[Mm][.]?)?$/.exec(String(s).trim());
+      // IME ON の全角（９：３０ 等）も半角化して受理
+      const m = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([AaPp][.]?[Mm][.]?)?$/.exec(TssGrid.zen2han(String(s).trim()));
       if (!m) return null;
       let h = +m[1]; const mi = +m[2], se = m[3] == null ? null : +m[3];
       const ap = m[4] ? m[4][0].toLowerCase() : null;  // 'a' | 'p' | null
@@ -982,17 +991,20 @@
       return h + ':' + m[2] + (m[3] != null ? ':' + m[3] : '') + ' ' + ap;
     }
     // CellFormat: 入力(グルーピング/前後綴り混じり) → 正規化した数値文字列（保存値）。不正は null。
-    // 全角→半角（数値文脈）。数字・符号・小数点・カンマ・%・¥・空白を半角化。業務フォームの IME 誤入力対策。
-    static _zen2han(s) {
+    // 全角→半角（公開 static ユーティリティ）。数字・符号・小数点・カンマ・%・¥・空白＋日付/時刻の区切り（／：）を半角化。
+    // 業務フォームの IME 誤入力対策（IME ON のまま「２０２６／０１／０１」「９：３０」等を打っても弾かず半角で受理）。
+    // 内部（number/date/time の parse）で使うほか、カスタム parse/format から TssGrid.zen2han(v) として呼べる。
+    static zen2han(s) {
       return String(s)
         .replace(/[０-９]/g, ch => String.fromCharCode(ch.charCodeAt(0) - 0xFEE0))
         .replace(/＋/g, '+').replace(/[－−ー―]/g, '-')
         .replace(/．/g, '.').replace(/，/g, ',')
+        .replace(/／/g, '/').replace(/：/g, ':')
         .replace(/％/g, '%').replace(/￥/g, '¥').replace(/　/g, ' ');
     }
     static _parseNumber(v, cfg) {
       let s = String(v).trim();
-      if (cfg.zenkaku !== false) s = TssGrid._zen2han(s);   // 既定で全角→半角（cfg.zenkaku:false で無効化）
+      if (cfg.zenkaku !== false) s = TssGrid.zen2han(s);   // 既定で全角→半角（cfg.zenkaku:false で無効化）
       if (cfg.prefix) s = s.split(cfg.prefix).join('');
       if (cfg.suffix) s = s.split(cfg.suffix).join('');
       s = s.replace(/,/g, '').replace(/\s/g, '');