@threestarsoftware/tssgrid 0.1.29-beta.2 → 0.1.29

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
-## [Unreleased]
+## [0.1.29] - 2026-10-25
 
 ### 追加（プラグイン）
 - **`tss-calendar` に範囲選択 `range` を追加** — 連続した日（休暇申請の開始〜終了など）を**1回の編集で**選べる。`range:true` で有効、`range:(ctx)=>boolean` で**行ごとにON/OFF**（半休の行は範囲を選ばせない等）。未指定は単日＝**従来動作**。1クリック目＝開始・2クリック目＝終了（**開始より前なら入替・同じ日を2回で単日確定**）、間の日に色が付く。1クリック目だけで閉じたら（Esc／外クリック）**値は変えない**。確定値は既定で `2026/10/13～2026/10/16`（**単日は ISO `2026-10-13`＝範囲なしの単日と同じ形**で保存値が混ざらない／区切りは `rangeSeparator`・既定 '～'／`rangeValue(startISO,endISO)` で完全差替可・**同日も呼ばれる**）。**入力中のセルに範囲ツールチップ**を出し、`rangeTooltip(startISO,endISO)` で文面を差し替え可能（休日を除いた日数などを外から足す口）。**休日スキップは利用側**＝カレンダーは範囲を返すだけ。範囲列は `type:'date'` を付けない素の列にする（範囲文字列を日付パーサに通さないため）。例 `examples/calendar-range.html`。

package/package.json

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

package/plugins/tss-calendar.js

@@ -81,7 +81,10 @@
       for (var mm = 0; mm < 12; mm++) monSel += '<option value="' + mm + '"' + (mm === m ? ' selected' : '') + '>' + (mm + 1) + '月</option>';
       monSel += '</select>';
       // range が使える行はトグル（範囲で選ぶ）を上部に。OFF=単日1クリック／ON=2クリック範囲。
-      var toggle = rc ? '<label class="tss-cal-toggle"><input type="checkbox" class="tss-cal-range-cb"' + (rangeActive ? ' checked' : '') + '><span>' + esc(rangeToggleLabel) + '</span></label>' : '';
+      // ★<label>＋ネイティブ checkbox だと click で input にフォーカスが移り、inline 時に共有 input が blur→
+      //   本体が commit+close してカレンダーが閉じてしまう。so 非フォーカスな span で包み、checked は render が持ち、
+      //   切替は pop の click（mousedown は preventDefault 済＝フォーカスを奪わない）で処理する（onClick 参照）。
+      var toggle = rc ? '<span class="tss-cal-toggle" data-toggle="1"><input type="checkbox" class="tss-cal-range-cb" tabindex="-1"' + (rangeActive ? ' checked' : '') + '><span>' + esc(rangeToggleLabel) + '</span></span>' : '';
       var html = toggle + '<div class="tss-cal-head">'
         + '<button type="button" class="tss-cal-nav" data-nav="-1" aria-label="前の月">‹</button>'
         + '<span class="tss-cal-sels">' + yrSel + monSel + '</span>'
@@ -120,6 +123,8 @@
       pop.style.top = top + 'px';
     }
     function onClick(e) {
+      // 「範囲で選ぶ」トグル: ネイティブ checkbox の toggle/フォーカスには頼らず click で反転（フォーカス不動＝inline でも閉じない）。
+      if (e.target.closest && e.target.closest('.tss-cal-toggle')) { e.preventDefault(); setRangeActive(!rangeActive); return; }
       var nav = e.target.getAttribute && e.target.getAttribute('data-nav');
       if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); return; }
       var dd = e.target.getAttribute && e.target.getAttribute('data-d');
@@ -127,8 +132,7 @@
     }
     function onChange(e) {
       var t = e.target;
-      if (t.classList && t.classList.contains('tss-cal-range-cb')) { setRangeActive(t.checked); }   // 「範囲で選ぶ」トグル
-      else if (t.classList && t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
+      if (t.classList && t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
       else if (t.classList && t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
     }
     function onKey(e) {