@threestarsoftware/tssgrid 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.12] - 2026-09-24
+
+### 追加
+- **コード付きプルダウン＋「その他」で自由入力 プラグイン `tss-combo`**（プラグイン・無依存・コア無改変）— 「**選択肢から選ぶ。ただし『その他』を選んだら自由入力**」を、業務側で**その他かどうかを分岐せず** **(コード, 値) のペア**で扱えるカスタムエディタ（`columns[c].editor` 契約に乗る）。**コードはそのまま**（選んだ項目の code／その他は固定 code）、**値だけ**が「選択ラベル or 入力文字列」に変わる。値列にエディタを付け `codeField` で**別のコード列へ code を書き戻す**（`setValueRaw`＝派生値・`readOnly` 列にも書ける）。`options` は `{code,label}` か文字列配列、`other` 省略で自由入力なし（素のコード選択）。既存の「その他」値（選択肢に無い値）は開くと**入力欄に復元**。undo/redo・貼付で code を追従させたい時用に `TssCombo.codeOf({options,other})` ヘルパ。動く例 `examples/combo-other.html`（tss-combo の各パターン＝コード+名称両表示/hidden/その他なし/文字列options ＋ autocomplete・2セル方式の比較も）。
+
+## [0.1.11] - 2026-09-16
+
+### 修正
+- **表全体版 `cellClass` / `cellStyle` / `rowClass` と `CellClassCtx` の `src`（元レコード）を `any` に**（型定義のみ・実行時は不変）— `src` は関数の**引数（反変位置）**なので `Record<string, any> | null` で固定すると、**自分で行の型を書いている利用者が関数を渡せず** `as unknown as MyRow` の二重キャストを強いられていた（0.1.9〜0.1.10 で該当）。`any` にすると利用側が `src: MyRow` と**そのまま注釈でき、関数内はその型で検査される**（今より安全側・既に `row: any[]` なので揃う）。d.ts 4か所（`CellClassCtx.src` / 表全体 `cellClass`・`cellStyle`・`rowClass`）＋ api.html を更新。※将来の `TssGrid<Row>` ジェネリック化は 0.2 系で検討。
+
 ## [0.1.10] - 2026-09-16
 
 ### 追加

package/README.md

@@ -647,6 +647,29 @@ columns: [
 - ↑↓で候補移動・Enter確定・Esc取消・クリック選択。`source`(配列 or 関数) / `strict`(候補のみ) / `minChars` / `max` / `match`(`includes`/`startsWith`/関数) / `openOnClick`。
 - カスタムエディタ契約（`editor.open/close`）に乗るだけ。見た目は `tss-ac-*` クラスと `--ac-*` 変数で。
 
+### 同梱プラグイン: コード付きプルダウン＋その他自由入力（tss-combo）
+
+`plugins/tss-combo.js`＝ 「**選択肢から選ぶ。ただし『その他』を選んだら自由入力**」を、業務側で**その他かどうかを分岐せず** **(コード, 値) のペア**で扱えるようにするエディタ。**コードはそのまま**（選んだ項目の code／その他は固定 code）、**値だけ**が「選択ラベル or 入力文字列」に変わる。動く例: [`examples/combo-other.html`](https://tssgrid.threestarsoftware.co.jp/examples/combo-other.html)（tss-combo の各パターン＋ autocomplete / 2セル方式の比較も）。
+
+```html
+<link rel="stylesheet" href="plugins/tss-combo.css">
+<script src="plugins/tss-combo.js"></script>
+```
+```js
+columns: [
+  { data: 'payCode', readOnly: true },                  // コード列（hidden 運用も可＝hiddenColumns:[…]）
+  { data: 'payName', editor: TssCombo({
+      options: [ { code:'01', label:'現金' }, { code:'02', label:'振込' } ],
+      other:     { code:'99', label:'その他' },          // 選ぶと入力欄に切替（省略で自由入力なし）
+      codeField: 'payCode',                              // コードの書き戻し先（data キー or 列 index）
+  }) },
+];
+// 通常項目 → (payCode, payName) = (その code, label)／その他 → ('99', 入力文字列)
+```
+- 値列にエディタを付け、`codeField` で**別のコード列へ code を書き戻す**（`setValueRaw`＝派生値・`readOnly` 列にも書ける）。`options` は `{code,label}` か文字列配列（code=label）。既存の「その他」値（選択肢に無い値）は開くと**入力欄に復元**。
+- undo/redo・貼付で code を値に追従させたい時は `TssCombo.codeOf({options, other})` を `onAfterChange` に噛ませる（任意）。
+- 見た目は `tg-combo*` クラス、色は `--tg-accent` を流用。`openOnClick` / `otherPlaceholder` / `icon` / `className`。
+
 ### 同梱プラグイン: セル内スパークライン（sparkline・ミニグラフ）
 
 `plugins/tss-sparkline.js`（**SVG自前描画**）＝ セルの数列を**ミニ折れ線/棒**で描く。`columns[c].html:true` ＋ `format`（format が返す SVG がセルに入る）seam に乗るだけ。Chart.js 等は積まない。動く例: [`examples/sparkline.html`](https://tssgrid.threestarsoftware.co.jp/examples/sparkline.html)（月次売上→動向グラフ・編集でライブ更新）。

package/package.json

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

package/plugins/tss-combo.css

@@ -0,0 +1,26 @@
+/* TssCombo — コード付きプルダウン＋その他自由入力（plugins/tss-combo.js）。色は --tg-accent を流用。 */
+.tg-combo {
+  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-combo .tg-combo-item {
+  padding: 5px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; outline: none;
+}
+.tg-combo .tg-combo-item:hover,
+.tg-combo .tg-combo-item.active { background: var(--tg-accent, #1573c0); color: #fff; }
+.tg-combo .tg-combo-other { font-style: italic; opacity: .95; }
+.tg-combo .tg-combo-sep { height: 1px; background: #e2e7ee; margin: 4px 6px; }
+/* その他モードの入力欄 */
+.tg-combo .tg-combo-inputwrap { padding: 4px; min-width: 180px; }
+.tg-combo .tg-combo-input {
+  width: 100%; box-sizing: border-box; padding: 5px 8px; font: inherit;
+  border: 1px solid #c4ccd6; border-radius: 5px; outline: none;
+}
+.tg-combo .tg-combo-input:focus { border-color: var(--tg-accent, #1573c0); }
+.tg-combo .tg-combo-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
+.tg-combo .tg-combo-actions button {
+  padding: 3px 12px; font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid #c4ccd6; background: #f5f7fa;
+}
+.tg-combo .tg-combo-actions .tg-combo-ok { background: var(--tg-accent, #1573c0); color: #fff; border-color: transparent; }

package/plugins/tss-combo.js

@@ -0,0 +1,182 @@
+/*! TssCombo — コード付きプルダウン＋「その他」で自由入力。TssGrid カスタムエディタ（ポップアップ型）。
+ *
+ *  ねらい: 「選択肢から選ぶ。ただし『その他』を選んだら自由入力」を **1操作で (コード, 値) のペア**にする。
+ *  - 通常項目を選ぶ → 値セル＝そのラベル / コードセル＝その code
+ *  - 「その他」を選ぶ → 入力欄に切替 → 値セル＝入力文字列 / コードセル＝その他の code（固定）
+ *  業務側は「その他かどうか」を分岐せず (コード, 値) を読むだけでよい（コードはそのまま・値だけが選択/入力で変わる）。
+ *
+ *  使い方（値列にエディタを付け、codeField でコードの書き戻し先＝別列を指す）:
+ *    columns: [
+ *      { data:'payCode' },                                  // コード列（そのまま保存: 01/02/…/99）。hidden:true でも可
+ *      { data:'payName', editor: TssCombo({
+ *          options: [
+ *            { code:'01', label:'現金' },
+ *            { code:'02', label:'振込' },
+ *            { code:'03', label:'クレジット' },
+ *          ],
+ *          other:     { code:'99', label:'その他' },        // これを選ぶと入力欄に切替（省略で「その他」無効＝素のコード選択）
+ *          codeField: 'payCode',                            // コードの書き戻し先（data キー or 列 index）
+ *      }) },
+ *    ]
+ *
+ *  opts:
+ *    options    : [{ code, label }]（`value` も code の別名として可／文字列は code=label）。必須。
+ *    other      : { code, label } でその他を有効化。`other:true` なら {code:'99', label:'その他'}。省略で無効。
+ *    codeField  : コードの書き戻し先の列（data キー or index）。省略時はコードを書かず値だけ確定。
+ *    otherPlaceholder : 入力欄のプレースホルダ（既定 '自由入力'）。
+ *    openOnClick: 既定 true（プルダウン同様シングルクリックで開く）。
+ *    icon       : セル右の目印（既定 '▾'）。className: ポップアップに付ける任意クラス。
+ */
+(function (root) {
+  'use strict';
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  // options を [{code,label}] に正規化（value を code の別名に／文字列は両方同じ）。
+  function normOpt(o) {
+    if (o && typeof o === 'object') {
+      var code = o.code != null ? o.code : (o.value != null ? o.value : o.label);
+      return { code: String(code == null ? '' : code), label: String(o.label != null ? o.label : code) };
+    }
+    return { code: String(o), label: String(o) };
+  }
+
+  function TssCombo(opts) {
+    opts = opts || {};
+    var list = (opts.options || []).map(normOpt);
+    var other = opts.other === true ? { code: '99', label: 'その他' }
+      : (opts.other && typeof opts.other === 'object') ? normOpt(opts.other) : null;
+    var codeField = opts.codeField;
+    var placeholder = opts.otherPlaceholder != null ? opts.otherPlaceholder : '自由入力';
+
+    var pop = null, ctxRef = null, done = false, onDoc = null, onKey = null;
+    var items = [], hi = -1, composing = false;
+
+    function teardown() {
+      if (onDoc) document.removeEventListener('mousedown', onDoc, true);
+      if (onKey) document.removeEventListener('keydown', onKey, true);
+      onDoc = onKey = null;
+      if (pop && pop.parentNode) pop.parentNode.removeChild(pop);
+      pop = null; items = []; hi = -1; composing = false;
+    }
+    // (コード, 値) を確定＝値セルは commit（履歴に積む）、コードセルは別列へ setValueRaw で書き戻す。
+    // ★ setValueRaw を使う理由: コードは「値から導く派生値」なのでコード列を readOnly:true にしても貫通して書け、
+    //   履歴に独立ステップを作らない（＝値のセルだけが 1 undo 単位）。undo/redo でコードも値に追従させたい場合は
+    //   下の TssCombo.codeOf を onAfterChange に噛ませる（任意）。
+    function commitPair(code, value) {
+      if (done) return; done = true;
+      var c = ctxRef; teardown();
+      c.commit(value);                                    // 値列（このセル）＝履歴に積む
+      if (codeField != null && c.grid && c.r != null) {
+        try { c.grid.setValueRaw(c.r, codeField, code); } catch (e) {}   // コード列（別列・派生値・readOnly 貫通）
+      }
+    }
+    function doCancel() { if (done) return; done = true; var c = ctxRef; teardown(); if (c.cancel) c.cancel(); }
+
+    function position(anchor) {
+      var r = anchor.getBoundingClientRect(), pw = pop.offsetWidth, ph = pop.offsetHeight;
+      var left = Math.max(6, Math.min(r.left, window.innerWidth - pw - 6));
+      var top = r.bottom + 2;
+      if (top + ph > window.innerHeight - 6) top = Math.max(6, r.top - 2 - ph);   // 下にはみ出すなら上へ
+      pop.style.left = left + 'px'; pop.style.top = top + 'px'; pop.style.minWidth = r.width + 'px';
+    }
+
+    // ---- リスト表示（選択モード）----
+    function renderList(highlight) {
+      var rows = list.map(function (o, i) {
+        return '<div class="tg-combo-item" data-i="' + i + '" role="option">' + esc(o.label) + '</div>';
+      });
+      if (other) rows.push('<div class="tg-combo-sep"></div>' +
+        '<div class="tg-combo-item tg-combo-other" data-other="1" role="option">' + esc(other.label) + '…</div>');
+      pop.innerHTML = rows.join('');
+      items = pop.querySelectorAll('.tg-combo-item');
+      hi = -1;
+      Array.prototype.forEach.call(items, function (el, k) {
+        el.addEventListener('mouseenter', function () { activate(k); });
+        el.addEventListener('mousedown', function (e) { e.preventDefault(); });      // フォーカスを奪わない
+        el.addEventListener('click', function (e) { e.stopPropagation(); choose(k); });
+      });
+      // 現在値に一致する項目をハイライト（無ければ先頭）
+      var want = 0;
+      if (highlight != null) for (var i = 0; i < list.length; i++) if (list[i].label === highlight) { want = i; break; }
+      activate(want);
+    }
+    function activate(k) {
+      if (k < 0 || k >= items.length) return;
+      Array.prototype.forEach.call(items, function (el, i) { el.classList.toggle('active', i === k); });
+      hi = k; if (items[k]) items[k].scrollIntoView({ block: 'nearest' });
+    }
+    function choose(k) {
+      var el = items[k]; if (!el) return;
+      if (el.dataset.other) return showInput('');                 // 「その他」→入力モードへ
+      var o = list[k]; commitPair(o.code, o.label);               // 通常項目→(code, label) 確定
+    }
+
+    // ---- 入力表示（その他モード）----
+    function showInput(initial) {
+      pop.innerHTML = '<div class="tg-combo-inputwrap">' +
+        '<input class="tg-combo-input" type="text" placeholder="' + esc(placeholder) + '">' +
+        '<div class="tg-combo-actions"><button type="button" class="tg-combo-ok">確定</button>' +
+        '<button type="button" class="tg-combo-back">戻る</button></div></div>';
+      var input = pop.querySelector('.tg-combo-input');
+      input.value = initial == null ? '' : initial;
+      input.addEventListener('compositionstart', function () { composing = true; });
+      input.addEventListener('compositionend', function () { composing = false; });
+      input.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter') { if (composing || e.isComposing || e.keyCode === 229) return; e.preventDefault(); confirmInput(input.value); }
+        else if (e.key === 'Escape') { e.preventDefault(); if (list.length) renderListWithHighlight(); else doCancel(); }
+      });
+      pop.querySelector('.tg-combo-ok').addEventListener('mousedown', function (e) { e.preventDefault(); confirmInput(input.value); });
+      pop.querySelector('.tg-combo-back').addEventListener('mousedown', function (e) { e.preventDefault(); renderListWithHighlight(); });
+      setTimeout(function () { input.focus(); input.setSelectionRange(input.value.length, input.value.length); }, 0);
+    }
+    function confirmInput(v) { commitPair(other ? other.code : '', v); }        // (その他code, 入力値) 確定
+    function renderListWithHighlight() { renderList(ctxRef ? ctxRef.value : null); }
+
+    function handleKey(e) {
+      if (!pop || pop.querySelector('.tg-combo-input')) return;      // 入力モードのキーは input 側で処理
+      if (e.key === 'ArrowDown') { e.preventDefault(); activate((hi + 1) % items.length); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); activate((hi - 1 + items.length) % items.length); }
+      else if (e.key === 'Enter') { e.preventDefault(); if (hi >= 0) choose(hi); }
+      else if (e.key === 'Escape') { e.preventDefault(); doCancel(); }
+    }
+
+    return {
+      openOnClick: opts.openOnClick !== false,
+      icon: opts.icon != null ? opts.icon : '▾',
+      open: function (ctx) {
+        ctxRef = ctx; done = false;
+        pop = document.createElement('div');
+        pop.className = 'tg-combo' + (opts.className ? ' ' + opts.className : '');
+        pop.setAttribute('role', 'listbox');
+        document.body.appendChild(pop);
+        // 現在値が選択肢に無い＝過去に「その他」で入れた値 → いきなり入力モードで復元
+        var cur = ctx.value, known = cur != null && cur !== '' && list.some(function (o) { return o.label === String(cur); });
+        if (other && cur != null && cur !== '' && !known) showInput(String(cur));
+        else renderList(cur);
+        position(ctx.td);
+        onDoc = function (e) { if (pop && !pop.contains(e.target) && !(ctx.td && ctx.td.contains(e.target))) doCancel(); };
+        onKey = handleKey;
+        document.addEventListener('mousedown', onDoc, true);
+        document.addEventListener('keydown', onKey, true);
+      },
+      close: function () { teardown(); },
+    };
+  }
+
+  // 値 → コードを引く関数を返す（同じ options/other から）。undo/redo・貼付でコードを値に追従させたい時、
+  //   onAfterChange: (chs) => chs.forEach(ch => { if (ch.c === 値列) grid.setValueRaw(ch.r, コード列, codeOf(grid.getValue(ch.r, 値列))); })
+  // のように噛ませる（任意）。値が選択肢に無ければ other の code、空なら ''。
+  TssCombo.codeOf = function (opts) {
+    opts = opts || {};
+    var list = (opts.options || []).map(normOpt);
+    var other = opts.other === true ? { code: '99' }
+      : (opts.other && typeof opts.other === 'object') ? normOpt(opts.other) : null;
+    return function (value) {
+      if (value == null || value === '') return '';
+      for (var i = 0; i < list.length; i++) if (list[i].label === String(value)) return list[i].code;
+      return other ? other.code : '';
+    };
+  };
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssCombo;
+  else root.TssCombo = TssCombo;
+})(typeof self !== 'undefined' ? self : this);

package/src/tssgrid.d.ts

@@ -25,8 +25,9 @@ export interface ChangeItem {
 /** 選択範囲。r0/c0=開始、r1/c1=終了（昇順とは限らない）。 */
 export interface SelectionRange { r0: number; c0: number; r1: number; c1: number; }
 export interface CellCoord { r: number; c: number; }
-/** cellClass/cellStyle（列版）が受け取る第2引数。row=その行の値配列, src=元レコード（object モード時・非表示フィールドも見える／配列モードは null）。 */
-export interface CellClassCtx { r: number; c: number; row: any[]; src: Record<string, any> | null; }
+/** cellClass/cellStyle（列版）が受け取る第2引数。row=その行の値配列, src=元レコード（object モード時・非表示フィールドも見える／配列モードは null）。
+ *  src は `any`＝利用側が自分の行型（`src: MyRow`）でそのまま受けられる（`Record<string,any>|null` だと二重キャストを強いるため）。 */
+export interface CellClassCtx { r: number; c: number; row: any[]; src: any; }
 /** cellClass/cellStyle の戻り値のクラス。文字列（空白区切り可）／配列／null 等（＝クラス無し）。 */
 export type ClassValue = string | string[] | null | undefined | false;
 /** cellStyle の戻り値。CSS プロパティのオブジェクト（`{'background':'#fde','--pct':'42%'}`）か文字列（`'background:#fde;--pct:42%'`）。 */
@@ -114,12 +115,12 @@ export interface TssGridOptions {
   columns?: ColumnDef[];
   /** 表全体の条件付きクラス（全セルで呼ばれる）。**引数は `(r, c, value, row, src)`**（先頭が行/列番号・列版と順序が違う）。
    *  `row`=その行の値配列, `src`=元レコード（object モード時・非表示フィールドも見える）。行に色を付けたいなら `rowClass` の方が簡単。 */
-  cellClass?: (r: number, c: number, value: any, row: any[], src: Record<string, any> | null) => ClassValue;
+  cellClass?: (r: number, c: number, value: any, row: any[], src: any) => ClassValue;
   /** 表全体のセル単位インラインスタイル。**引数は `(r, c, value, row, src)`**。返り値は CSS オブジェクト or 文字列。 */
-  cellStyle?: (r: number, c: number, value: any, row: any[], src: Record<string, any> | null) => StyleValue;
+  cellStyle?: (r: number, c: number, value: any, row: any[], src: any) => StyleValue;
   /** 行ごとに `<tr>` へ付与する CSS クラス（**行に色を付けるならこれ**）。`(r, row, src)` で呼ばれ、文字列/配列を返す。
    *  編集でセルが再描画されると即追従。CSS は `.tssgrid tr.クラス > td { … }` のように行単位で当てる。 */
-  rowClass?: (r: number, row: any[], src: Record<string, any> | null) => ClassValue;
+  rowClass?: (r: number, row: any[], src: any) => ClassValue;
   /** 検証NG時。'revert'=元に戻す / 'keep'=赤く警告して残す。 */
   invalidMode?: 'revert' | 'keep';
   invalidTitle?: boolean;