@threestarsoftware/tssgrid 0.1.28 → 0.1.29-beta.1

package/CHANGELOG.md

@@ -3,6 +3,11 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [Unreleased]
+
+### 追加（プラグイン）
+- **`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`。
+
 ## [0.1.28] - 2026-10-20
 
 ### 追加（プラグイン）

package/package.json

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

package/plugins/tss-calendar.css

@@ -37,4 +37,11 @@
 .tss-cal-day.tss-cal-today { box-shadow: inset 0 0 0 1px var(--cal-accent); }
 .tss-cal-day.tss-cal-focus { box-shadow: inset 0 0 0 2px var(--cal-accent); }
 .tss-cal-day.tss-cal-sel { background: var(--cal-accent); color: #fff; }
+/* 範囲選択（range:true）。間の日は淡色、両端は濃色。 */
+.tss-cal-day.tss-cal-inrange { background: var(--cal-hover); border-radius: 0; }
+.tss-cal-day.tss-cal-range-start,
+.tss-cal-day.tss-cal-range-end { background: var(--cal-accent); color: #fff; }
+.tss-cal-day.tss-cal-range-start { border-radius: 6px 0 0 6px; }
+.tss-cal-day.tss-cal-range-end { border-radius: 0 6px 6px 0; }
+.tss-cal-day.tss-cal-range-start.tss-cal-range-end { border-radius: 6px; }   /* 開始=終端（1日だけ選択中） */
 .tss-cal-day.tss-cal-disabled { color: var(--cal-muted); background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.04) 4px, rgba(0,0,0,.04) 8px); cursor: not-allowed; }

package/plugins/tss-calendar.d.ts

@@ -28,6 +28,18 @@ declare namespace TssCalendar {
     disable?: Array<'holiday' | 'weekend' | string>;
     /** 共有 input に乗る型（既定 true）＝直打ち可・矢印は本体へ。false でフォーカス奪取型。 */
     inline?: boolean;
+    /** 範囲選択（開始〜終了を1回の編集で）。`true` で全行有効／`(ctx)=>boolean` で行ごとに切替
+     *  （例: 半休の行は範囲を選ばせない）。未指定は単日＝従来動作。1クリック目=開始・2クリック目=終了
+     *  （開始より前なら入替・同日2回は単日確定）。確定値・ツールチップは下記で差し替え可。休日スキップは利用側。 */
+    range?: boolean | ((ctx: any) => boolean);
+    /** 範囲値・ツールチップの日付区切り（既定 '～'）。 */
+    rangeSeparator?: string;
+    /** 範囲の確定値を作る。**同日（単日）のときも呼ばれる**。引数は開始・終了の ISO
+     *  （'YYYY-MM-DD'・開始<=終了に整列済み）。未指定の既定は 範囲=`'YYYY/MM/DD～YYYY/MM/DD'`／
+     *  **単日＝ISO `'YYYY-MM-DD'`（範囲なしの単日と同じ形）**。別フィールド分割などはこの口で。 */
+    rangeValue?: (startISO: string, endISO: string) => string;
+    /** 編集中セルに出す範囲ツールチップの文面（既定は範囲文字列）。休日を除いた日数などを外から足す口。 */
+    rangeTooltip?: (startISO: string, endISO: string) => string;
     /** シングルクリックで開く（既定 true）。 */
     openOnClick?: boolean;
     /** セル右端の目印（既定 '📅'。'' で消す）。 */

package/plugins/tss-calendar.js

@@ -17,6 +17,8 @@
   function parseISO(s) { var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(s || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; }
   function sameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
   function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
+  function fmtSlash(isoStr) { return String(isoStr).replace(/-/g, '/'); }                 // 'YYYY-MM-DD' → 'YYYY/MM/DD'（range の既定表示）
+  function parseLoose(s) { var m = /^(\d{4})[/-](\d{1,2})[/-](\d{1,2})/.exec(String(s || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; } // slash/dash どちらも
 
   function TssCalendar(opts) {
     opts = opts || {};
@@ -35,6 +37,25 @@
     var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null;
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
+    // ── 範囲選択（range）: 連続した日を1回の編集で選ぶ（休暇申請の開始〜終了 等）───────────
+    //   range:true で有効（行ごとに切替えたい時は range:(ctx)=>boolean）。未指定は単日＝従来動作。
+    //   1クリック目=開始、2クリック目=終了（開始より前なら入替・同日2回は単日確定）。間の日に色。
+    //   確定値は rangeValue(開始ISO,終了ISO)（既定: 範囲 'YYYY/MM/DD～YYYY/MM/DD'／単日は ISO 'YYYY-MM-DD'＝範囲なしと同形。rangeValue は同日も呼ぶ）。
+    //   入力中はセルに range のツールチップ（rangeTooltip で文面差替＝休日除く日数を外から足せる口）。
+    //   休日スキップは利用側（返すのは範囲だけ）。
+    var rangeOpt = opts.range;
+    var rangeSep = opts.rangeSeparator != null ? opts.rangeSeparator : '～';
+    var rangeValueFn = typeof opts.rangeValue === 'function' ? opts.rangeValue : null;
+    var rangeTooltipFn = typeof opts.rangeTooltip === 'function' ? opts.rangeTooltip : null;
+    function defRangeStr(aIso, bIso) { return fmtSlash(aIso) + rangeSep + fmtSlash(bIso); }     // 表示用（両端 slash・範囲）
+    function rangeValOf(aIso, bIso) {
+      if (rangeValueFn) return rangeValueFn(aIso, bIso);                                         // rangeValue は同日も必ず呼ぶ（利用側で形を決められる）
+      return aIso === bIso ? aIso : defRangeStr(aIso, bIso);                                     // 既定: 単日＝ISO（範囲なしと同形）／範囲＝'YYYY/MM/DD～YYYY/MM/DD'
+    }
+    function rangeTipOf(aIso, bIso) { return rangeTooltipFn ? rangeTooltipFn(aIso, bIso) : (aIso === bIso ? fmtSlash(aIso) : defRangeStr(aIso, bIso)); }
+    var rc = null;                 // 現在の編集が range なら { td } を持つ（open(ctx) で ctx 判定して設定）
+    var rangeStart = null, hoverEnd = null;   // 範囲選択の途中状態（1クリック目＝rangeStart、プレビュー終端＝hoverEnd）
+
     function disabled(d) {
       if (minD && d < minD) return true;
       if (maxD && d > maxD) return true;
@@ -71,6 +92,12 @@
         if (sameDay(d, today)) cls += ' tss-cal-today';
         if (sameDay(d, sel)) cls += ' tss-cal-sel';
         if (sameDay(d, focus)) cls += ' tss-cal-focus';
+        if (rc && rangeStart) {                              // 範囲の途中＝開始〜(プレビュー)終端を塗る
+          var ra = rangeStart, rb = hoverEnd || rangeStart, lo = ra <= rb ? ra : rb, hi = ra <= rb ? rb : ra;
+          if (d >= lo && d <= hi) cls += ' tss-cal-inrange';
+          if (sameDay(d, ra)) cls += ' tss-cal-range-start';
+          if (sameDay(d, rb)) cls += ' tss-cal-range-end';
+        }
         if (disabled(d)) cls += ' tss-cal-disabled';
         html += '<div class="' + cls + '" data-d="' + k + '"' + (nm ? ' title="' + esc(nm) + '"' : '') + '>' + d.getDate() + '</div>';
         d.setDate(d.getDate() + 1);
@@ -102,20 +129,40 @@
       if (k === 'Escape') { e.preventDefault(); cancel(); return; }
       if (k === 'Enter') { e.preventDefault(); if (!disabled(focus)) pick(focus); return; }
       var dx = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[k];
-      if (dx != null) { e.preventDefault(); focus = new Date(focus); focus.setDate(focus.getDate() + dx); view = new Date(focus.getFullYear(), focus.getMonth(), 1); render(); return; }
+      if (dx != null) { e.preventDefault(); focus = new Date(focus); focus.setDate(focus.getDate() + dx); view = new Date(focus.getFullYear(), focus.getMonth(), 1); if (rc && rangeStart) { hoverEnd = new Date(focus); updateTip(); } render(); return; }
       if (k === 'PageUp' || k === 'PageDown') { e.preventDefault(); view = new Date(view.getFullYear(), view.getMonth() + (k === 'PageUp' ? -1 : 1), 1); render(); }
     }
-    function show(anchor, value, onPick, onCancel) {
+    // range 途中: 日の上をなぞると終端プレビューを更新（間の色＋ツールチップ）。
+    function onOver(e) {
+      if (!(rc && rangeStart)) return;
+      var dd = e.target.getAttribute && e.target.getAttribute('data-d');
+      if (!dd) return;
+      var d = parseISO(dd); if (!d || disabled(d)) return;
+      if (!hoverEnd || !sameDay(hoverEnd, d)) { hoverEnd = d; render(); updateTip(); }
+    }
+    // 編集中セルに範囲ツールチップを出す（rangeTooltip で文面差替可）。
+    function updateTip() {
+      if (!(rc && rc.td)) return;
+      var aIso = iso(rangeStart), bIso = iso(hoverEnd || rangeStart);
+      if (bIso < aIso) { var t = aIso; aIso = bIso; bIso = t; }
+      try { rc.td.title = rangeTipOf(aIso, bIso); } catch (e) { /* noop */ }
+    }
+    function clearTip() { if (rc && rc.td) { try { rc.td.title = ''; } catch (e) { /* noop */ } } }
+    function show(anchor, value, onPick, onCancel, rangeCfg) {
       teardown();   // 既に開いていれば先に片付ける（前の pop 除去＋outside リスナ解除・open-while-open の取り残し防止）
-      done = false; sel = parseISO(value);
-      view = sel ? new Date(sel.getFullYear(), sel.getMonth(), 1) : new Date();
-      focus = sel ? new Date(sel) : new Date();
-      pop = document.createElement('div'); pop.className = 'tss-cal' + (opts.className ? ' ' + opts.className : '');
+      done = false; rc = rangeCfg || null; rangeStart = null; hoverEnd = null;
+      sel = parseISO(value);
+      // range の既存値（'YYYY/MM/DD～…' 等）は parseISO では取れない＝先頭日を緩く読んで月を合わせる。
+      var initD = sel || (rc ? parseLoose(value) : null);
+      view = initD ? new Date(initD.getFullYear(), initD.getMonth(), 1) : new Date();
+      focus = initD ? new Date(initD) : new Date();
+      pop = document.createElement('div'); pop.className = 'tss-cal' + (opts.className ? ' ' + opts.className : '') + (rc ? ' tss-cal-range' : '');
       pop.tabIndex = -1; document.body.appendChild(pop);
       pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });   // フォーカスを奪わない（select は除く）
       pop.addEventListener('click', onClick);
       pop.addEventListener('change', onChange);
       pop.addEventListener('keydown', onKey);
+      if (rc) pop.addEventListener('mouseover', onOver);
       render(); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
       // inline は「外側クリック/フォーカス」を本体（_commitActive / blur）が持つ＝二重に閉じない・共有 input から
@@ -126,13 +173,26 @@
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
-    function pick(d) { if (done) return; done = true; var f = ref.pick; teardown(); f(iso(d)); }
-    function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
+    function teardown() { clearTip(); if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function pick(d) {
+      if (done) return;
+      if (rc) {
+        if (!rangeStart) { rangeStart = d; hoverEnd = d; focus = new Date(d); render(); updateTip(); return; }   // 1クリック目＝開始（閉じない）
+        var aIso = iso(rangeStart), bIso = iso(d);                                                              // 2クリック目＝終了
+        if (bIso < aIso) { var t = aIso; aIso = bIso; bIso = t; }                                              // 逆順は入替／同日は単日
+        done = true; var fr = ref.pick; teardown(); fr(rangeValOf(aIso, bIso)); return;
+      }
+      done = true; var f = ref.pick; teardown(); f(iso(d));
+    }
+    function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }   // range 途中の取消も値は変えない（ref.cancel）
 
     return {
       // TssGrid カスタムエディタ契約
-      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      open: function (ctx) {
+        var rangeMode = typeof rangeOpt === 'function' ? !!rangeOpt(ctx) : !!rangeOpt;   // 行ごとに range を切替（半休行は単日）
+        var cfg = rangeMode ? { td: ctx.td } : null;
+        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, cfg);
+      },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',     // セル右端に表示する合図（opts.icon:'' で消せる）
       openOnClick: opts.openOnClick !== false,        // シングルクリックで開く（既定 ON）