@threestarsoftware/tssgrid 0.1.19 → 0.1.21

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.21] - 2026-10-06
+
+### 修正
+- **チェックボックス列のヘッダ全選択が、read-only 行のせいで「選べる行は全部 ON なのに − になる」のを修正**（コア）— v0.1.20 で全選択の無効判定（`_columnAllReadOnly`）は read-only 行を除外したが、**状態判定（`_columnCheckState`＝✓/−/☐）は read-only 行を total に数えたまま**だった。全選択（`setColumnChecked`）は read-only をスキップするので、状態判定も**「操作できる行（非空かつ非 read-only）」だけで数える**よう統一。選べる行が全部 ON なら **✓**（押せば全部外れる）。あわせて**全 read-only 列では右クリックメニュー「すべてチェック/外す」を出さない**（no-op なので・ヘッダ無効と整合）。これでチェックボックス×read-only の全経路（状態判定／無効判定／全選択書込／body トグル／コンテキストメニュー）が「操作できる集合」で揃った。
+
+## [0.1.20] - 2026-10-06
+
+### 修正
+- **チェックボックス列が全部 read-only の時、ヘッダの全選択チェックが ✓↔− で不安定・押しても無反応だったのを修正**（コア）— ヘッダ状態を非空セルの checked/total だけで決めて read-only を無視していたため、全 read-only でもデータ次第で ✓（全ON）↔ −（一部ON）に切り替わり、しかも全選択は read-only をスキップするのでクリックしても無反応だった。**非空セルが1つ以上ありその全部が read-only の列は、ヘッダを無効化（押せない）＋ −（indeterminate）で安定表示**に。部分 read-only（操作できるセルが残る）・編集可の列は従来どおり（正確な状態＋トグル可）。
+- **read-only のピッカー列（カレンダー等のカスタムエディタ）/ドロップダウン列で、文字位置が編集可行とズレる不具合を修正**（コア・CSS）— read-only セルはアイコン（📅/▾）を消すと同時に `padding-right` を 20px/18px→6px に戻していたため、その14px分だけ文字がズレ、中央寄せ列では read-only 行と編集可行で位置が食い違っていた。ズレの原因はアイコン（`::after` は絶対配置の重ね描画＝文字レイアウトに無関係）ではなく padding だったので、**アイコンは従来どおり出さないまま、`padding`（場所）だけ編集可行と同じに保つ**ことで文字位置を揃えた。`tg-haspicker`／`tg-dropdown` 両方。
+
 ## [0.1.19] - 2026-10-06
 
 ### 修正

package/package.json

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

package/src/tssgrid.css

@@ -100,7 +100,9 @@
 /* 読み取り専用セル: 淡色＋既定カーソル（編集不可・全変更経路で拒否） */
 .tssgrid .tg-table td.tg-readonly { background: var(--tg-readonly-bg); color: var(--tg-readonly-fg); cursor: default; }
 .tssgrid .tg-table td.tg-readonly.sel { background: #e7edf5; }
-.tssgrid .tg-table td.tg-readonly.tg-dropdown { padding-right: 6px; }   /* 開けないので ▾ は出さない */
+/* 読取専用は ▾ を出さない。ただし padding（場所）は空けたまま＝中央寄せ列でも文字位置がズレない
+   （アイコンは position:absolute の重ね描画なので、出す/出さないは文字レイアウトに無関係＝ズレは padding 由来）。 */
+.tssgrid .tg-table td.tg-readonly.tg-dropdown { padding-right: 18px; }
 .tssgrid .tg-table td.tg-readonly.tg-dropdown::after { display: none; }
 /* invalidMode:'keep' で検証 NG のセル: 値は残して赤く警告（色は変数で調整可） */
 .tssgrid .tg-table td.tg-invalid { color: var(--tg-invalid-fg); background: var(--tg-invalid-bg); }
@@ -188,6 +190,8 @@
 .tssgrid .tg-table thead th .tg-head-cb { display: inline-block; margin: 0 4px 0 0; vertical-align: middle; cursor: pointer; }
 /* 見出し文字が無い（単独）＝本体セルと同じく中央寄せ（右 4px を打ち消して列中央でチェックが縦に揃う） */
 .tssgrid .tg-table thead th .tg-head-cb.tg-head-cb-solo { display: block; margin: 0 auto; }
+/* 列が全部 readOnly＝全選択で操作できるセルが無い時は無効（押せない・淡色の − で安定表示） */
+.tssgrid .tg-table thead th .tg-head-cb:disabled { cursor: not-allowed; opacity: .5; }
 
 /* ドロップダウン列: V（シェブロン）キャレットを常時表示。編集中の <select> と同じ SVG＝サイズも一致 */
 .tssgrid .tg-table td.tg-dropdown { position: relative; padding-right: 18px; cursor: pointer; }
@@ -203,7 +207,9 @@
   content: attr(data-ico); position: absolute; right: 5px; top: 0; bottom: 0;
   display: flex; align-items: center; font-size: 12px; color: #7d8a99; pointer-events: none;
 }
-.tssgrid .tg-table td.tg-readonly.tg-haspicker { padding-right: 6px; }   /* 読取専用は出さない */
+/* 読取専用はアイコンを出さない。ただし padding（場所）は空けたまま＝中央寄せ列でも文字位置がズレない
+   （アイコンは position:absolute の重ね描画なので、出す/出さないは文字レイアウトに無関係＝ズレは padding 由来）。 */
+.tssgrid .tg-table td.tg-readonly.tg-haspicker { padding-right: 20px; }
 .tssgrid .tg-table td.tg-readonly.tg-haspicker::after { display: none; }
 /* editor.icon:'▾'（＝プルダウン相当のキャレット）はネイティブ dropdown と同じ SVG シェブロンで統一
    （combo / autocomplete 等・文字グリフの三角ではなく tg-dropdown と揃った見た目に）。絵文字系(📅/🕐)は対象外。 */

package/src/tssgrid.js

@@ -1611,11 +1611,22 @@
     _columnCheckState(c) {
       let checked = 0, total = 0;
       for (let r = 0; r < this.ROWS; r++) {
-        if (this._rowBlankExcept(r, c)) continue;
+        // 全選択は readOnly をスキップする（setColumnChecked と同じ）ので、状態判定も「操作できる行」だけで数える。
+        // これを入れないと「選べる行は全部 ON なのに、押せない行のせいで − 表示」になる。
+        if (this._rowBlankExcept(r, c) || this._isReadOnly(r, c)) continue;
         total++; if (this._isCheckedVal(c, this.data[r][c])) checked++;
       }
       return total === 0 ? 'none' : (checked === total ? 'all' : (checked === 0 ? 'none' : 'some'));
     }
+    // 非空セルが1つ以上あり、その全部が readOnly ＝ 全選択で操作できるセルが無い（＝ヘッダは無効化）。
+    _columnAllReadOnly(c) {
+      let nonBlank = 0, togglable = 0;
+      for (let r = 0; r < this.ROWS; r++) {
+        if (this._rowBlankExcept(r, c)) continue;
+        nonBlank++; if (!this._isReadOnly(r, c)) togglable++;
+      }
+      return nonBlank > 0 && togglable === 0;
+    }
     // ヘッダの全選択チェックボックスの見た目を現在の列状態に同期（some は indeterminate）。
     _syncHeaderCheckboxes() {
       if (!this.colHeaders) return;
@@ -1623,8 +1634,12 @@
         if (this.colType(c) !== 'checkbox' || this.colCfg(c).headerCheckbox === false) continue;
         const cb = this.table.querySelector('thead th[data-c="' + c + '"] .tg-head-cb');
         if (!cb) continue;
-        const st = this._columnCheckState(c);
-        cb.checked = st === 'all'; cb.indeterminate = st === 'some';
+        if (this._columnAllReadOnly(c)) {   // 全 readOnly＝操作不可。安定して「− かつ無効（押せない）」に
+          cb.disabled = true; cb.checked = false; cb.indeterminate = true;
+        } else {
+          const st = this._columnCheckState(c);
+          cb.disabled = false; cb.checked = st === 'all'; cb.indeterminate = st === 'some';
+        }
       }
     }
     // 列 c の checkbox を全 ON/OFF（readOnly はスキップ）。1コマンドで履歴に積む＝Undo 一発。
@@ -1639,6 +1654,7 @@
     // ヘッダのチェックボックスクリック: 全 ON or 全 OFF をトグル（全部 ON なら OFF、それ以外は ON）。
     _toggleColumnAll(c) {
       if (this.colType(c) !== 'checkbox') return;
+      if (this._columnAllReadOnly(c)) return;   // 全 readOnly＝ヘッダは無効（押しても何もしない）
       this.setColumnChecked(c, this._columnCheckState(c) !== 'all');
     }
     // 列ストレッチ: 余白を埋めるよう col 幅を伸ばす（枠に幅制約がある時だけ効く）。colW は変えない。
@@ -2628,8 +2644,8 @@
         case 'cut': return { label: '切り取り', disabled: !this.copyPaste, act: () => this.copy(true) };
         case 'paste': return { label: '貼り付け', disabled: !this.copyPaste, act: () => this.paste() };
         case 'clear': return { label: '内容をクリア', act: () => this.clearRange() };
-        case 'check_column': return this.colType(s.c0) === 'checkbox' ? { label: 'すべてチェック', act: () => this.setColumnChecked(s.c0, true) } : null;
-        case 'uncheck_column': return this.colType(s.c0) === 'checkbox' ? { label: 'すべて外す', act: () => this.setColumnChecked(s.c0, false) } : null;
+        case 'check_column': return (this.colType(s.c0) === 'checkbox' && !this._columnAllReadOnly(s.c0)) ? { label: 'すべてチェック', act: () => this.setColumnChecked(s.c0, true) } : null;   // 全 read-only 列は no-op なので出さない（ヘッダ無効と整合）
+        case 'uncheck_column': return (this.colType(s.c0) === 'checkbox' && !this._columnAllReadOnly(s.c0)) ? { label: 'すべて外す', act: () => this.setColumnChecked(s.c0, false) } : null;
         case 'undo': return { label: '元に戻す', disabled: !this.history.canUndo(), act: () => this.history.undo() };
         case 'redo': return { label: 'やり直し', disabled: !this.history.canRedo(), act: () => this.history.redo() };
         default: return /^-+$/.test(key) || key === 'separator' ? { sep: true } : null;