@threestarsoftware/tssgrid 0.1.33 → 0.1.34

package/CHANGELOG.md

@@ -3,6 +3,11 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.34] - 2026-11-05
+
+### 改善（プラグイン）
+- **`tss-toggle` を 2択から N択（3つ以上）へ拡張**。これまで内部で選択肢を2つに切り詰めていた（`slice(0,2)`）のを撤廃し、`columns: { ans: ['未回答','出席','欠席'] }` のように **3つ以上の択一**を「並んだセグメント＝ラジオ的に全選択肢が常に見える」形で置けるようにした。クリック確定（`setValue`＝検証・Undo を通る）・許可値以外の validator 拒否・アクティブセルで **Space は次の値へ循環**（2択なら従来どおり反対側）は据え置き。値は dropdown 同様 **value を保存**。**短いラベルなら dropdown と同程度の幅**で収まり、タップ数は「開く→選ぶ」の 2 から **1** に。用途: 出欠（未回答/出席/欠席）・優先度（高/中/低）など少数の短い択一。選択肢が多い／ラベルが長い／列幅が狭い場合は従来どおり `type:'dropdown'` が省スペース。例 `examples/toggle.html` に出欠3択パネルを追加。**後方互換**（2択の既存指定・`TssToggle.format()` 直指定は不変）。
+
 ## [0.1.33] - 2026-11-05
 
 ### 追加

package/README.md

@@ -817,9 +817,9 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 ```
 - **おすすめ（いずれも `<script>`/CDN で no-build）**: **Chart.js**（MIT・定番・バランス◎）/ **ApexCharts**（MIT・モダンで映え）/ **Apache ECharts**（Apache-2.0・多機能）/ **uPlot**（MIT・超軽量）。Highcharts/AG Charts は商用有料なので MIT 方針なら避ける。
 
-### 同梱プラグイン: 2択トグル（toggle・有効｜無効）
+### 同梱プラグイン: 択一トグル／ラジオ（toggle・2択以上）
 
-`plugins/tss-toggle.js`＋`.css`＝ ラジオの2択を**並んだセグメント（有効｜無効）**で表示、クリックで切替。チェックボックスより**2ラベルが見える**。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
+`plugins/tss-toggle.js`＋`.css`＝ 択一（**2つ以上**）を**並んだセグメント（有効｜無効／未回答｜出席｜欠席）**で表示、クリックで切替。ラジオボタンの「**全選択肢が常に見える・1クリックで確定**」をセル内で実現。値は dropdown 同様 **value を保存**。動く例: [`examples/toggle.html`](https://tssgrid.threestarsoftware.co.jp/examples/toggle.html)。
 
 ```html
 <link rel="stylesheet" href="plugins/tss-toggle.css">
@@ -827,12 +827,13 @@ new TssGrid(el, { columns, data, onAfterChange: () => { chart.data = toChartData
 ```
 ```js
 plugins: [ TssToggle.plugin({ columns: {
-  status: ['有効', '無効'],                                      // 文字列2つ（value=label）
+  status: ['有効', '無効'],                                      // 文字列（value=label）。2つ以上でOK
+  ans:    ['未回答', '出席', '欠席'],                             // 3択以上も可
   pub:    [{ value:'1', label:'公開' }, { value:'0', label:'非公開' }],  // value/label 分離
 } }) ]
 ```
-- クリックでその側に確定（`setValue`＝**検証・Undo を通る**）。アクティブセルで **Space** で反対側へトグル。2値以外の打ち込みは自動 validator で拒否。
-- 単純な ON/OFF 1個なら組込 `type:'checkbox'`、3択以上は `type:'dropdown'`。見た目は `--tg-toggle-accent` 等で。
+- クリックでその値に確定（`setValue`＝**検証・Undo を通る**）。アクティブセルで **Space** で次の値へ循環（2択なら反対側）。許可値以外の打ち込みは自動 validator で拒否。
+- 単純な ON/OFF 1個なら組込 `type:'checkbox'`。**短いラベルの少数択一**（出欠・高/中/低 等）に向き、短ければ dropdown と同程度の幅で収まる。**選択肢が多い／ラベルが長い／列幅が狭い**なら `type:'dropdown'` が省スペース。見た目は `--tg-toggle-accent` 等で。
 
 ### 同梱プラグイン: セル結合（merge・横/縦/矩形）
 

package/package.json

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

package/plugins/tss-toggle.css

@@ -1,4 +1,4 @@
-/* TssToggle — 2択セグメント。色は変数で上書き可。 */
+/* TssToggle — 2択以上（N択）のセグメント。色は変数で上書き可。横幅ぶんピルが並ぶ。 */
 .tg-toggle { display: inline-flex; border: 1px solid var(--tg-toggle-border, #cfd7e0); border-radius: 999px; overflow: hidden; font-size: .92em; line-height: 1.7; vertical-align: middle; }
 .tg-toggle .tg-seg { padding: 0 11px; cursor: pointer; color: var(--tg-toggle-fg, #64748b); user-select: none; transition: background .12s; }
 .tg-toggle .tg-seg + .tg-seg { border-left: 1px solid var(--tg-toggle-border, #cfd7e0); }

package/plugins/tss-toggle.js

@@ -1,23 +1,25 @@
-/*! TssToggle — 2択セグメント・トグル（有効|無効・公開|非公開・男|女 …）。
+/*! TssToggle — 2択以上（N択）のセグメント・トグル／ラジオ（有効|無効・未回答|出席|欠席 …）。
  *
- *  ラジオの2択を「並んだピル（セグメント）」で表示し、クリックでどちらかに切替。値は dropdown と同じく
+ *  択一（2つ以上）を「並んだピル（セグメント）」で表示し、クリックで切替。値は dropdown と同じく
  *  選んだ option の value を保存（getData も value）。html:true+format で描画、クリックは委譲で拾う。
+ *  ラジオボタンの「全選択肢が常に見える・1クリックで確定」をセル内で実現する用途（出欠・優先度 高/中/低 等）。
  *
  *  使い方:
  *    plugins: [ TssToggle.plugin({ columns: {
- *      status: ['有効', '無効'],                                   // 文字列2つ（value=label）
+ *      status: ['有効', '無効'],                                   // 文字列（value=label）。2つ以上でOK
+ *      att:    ['未回答', '出席', '欠席'],                          // 3択以上も可
  *      pub:    [{value:'1',label:'公開'},{value:'0',label:'非公開'}] // value/label 分離も可
  *    } }) ]
  *    // 列定義側で直接: { data:'status', html:true, format: TssToggle.format(['有効','無効']) } ＋ plugins:[TssToggle.plugin()]
  *
- *  opts(plugin): columns（{dataキー: 2要素配列}） / accent（選択側の色・CSS変数 --tg-toggle-accent でも）。
+ *  opts(plugin): columns（{dataキー: 2要素以上の配列}） / accent（選択側の色・CSS変数 --tg-toggle-accent でも）。
  *  挙動: クリックでその側に確定（setValue＝検証/Undo を通る）。アクティブセルで Space は反対側へトグル。
  *        他値を打ち込めないよう、対象列に「2値のみ許可」の validator を自動付与。
  */
 (function (root) {
   'use strict';
   function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
-  function normOpts(arr) { return (arr || []).slice(0, 2).map(function (o) { return (o && typeof o === 'object') ? { value: String(o.value), label: String(o.label) } : { value: String(o), label: String(o) }; }); }
+  function normOpts(arr) { return (arr || []).map(function (o) { return (o && typeof o === 'object') ? { value: String(o.value), label: String(o.label) } : { value: String(o), label: String(o) }; }); }
 
   function makeFormat(options) {
     var opts = normOpts(options);
@@ -45,7 +47,7 @@
         cfg.html = true;
         if (typeof cfg.format !== 'function') cfg.format = makeFormat(o);
         var vals = o.map(function (x) { return x.value; });
-        if (typeof cfg.validator !== 'function') cfg.validator = function (v) { return v === '' || vals.indexOf(v) >= 0; };   // 2値以外を弾く
+        if (typeof cfg.validator !== 'function') cfg.validator = function (v) { return v === '' || vals.indexOf(v) >= 0; };   // 許可値以外を弾く
         byCol[ci] = vals;
       });
       // それ自体は無効でも format 直指定の列をクリックで拾えるよう、format 由来の列も拾う
@@ -68,7 +70,7 @@
         if (!vals || !editable(r, c) || grid.mode === 'edit') return;
         e.preventDefault();
         var cur = grid.getValue(r, c), i = vals.indexOf(String(cur));
-        grid.setValue(r, c, vals[(i + 1) % vals.length]);     // 反対側へトグル
+        grid.setValue(r, c, vals[(i + 1) % vals.length]);     // 次の値へ循環（2択なら反対側）
       }
       grid.wrap.addEventListener('click', onClick);
       grid.editor.addEventListener('keydown', onKey);