@threestarsoftware/tssgrid 0.1.27 → 0.1.29-beta.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 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`（単日は `2026/10/13`／区切りは `rangeSeparator`・既定 '～'／`rangeValue(startISO,endISO)` で完全差替可）。**入力中のセルに範囲ツールチップ**を出し、`rangeTooltip(startISO,endISO)` で文面を差し替え可能（休日を除いた日数などを外から足す口）。**休日スキップは利用側**＝カレンダーは範囲を返すだけ。範囲列は `type:'date'` を付けない素の列にする（範囲文字列を日付パーサに通さないため）。例 `examples/calendar-range.html`。
+
+## [0.1.28] - 2026-10-20
+
+### 追加（プラグイン）
+- **`tss-hyperlink`（セル内ハイパーリンク・安全URL）を追加** — 値を**クリックで開くリンク**にする `format` ヘルパ。値は「表示テキスト｜URL」または URL 単体。`columns[c].html:true` ＋ `format: TssHyperlink()` で使う。**URL は利用者データになり得る＝XSS を最初から潰す設計**：`http`/`https`/`mailto`/`tel` のみ許可（`javascript:`/`data:`/`vbscript:` 等は**リンクにせず素のテキスト**に落とす）、スキーム無しは `https://` 補完、表示テキスト・`href` は必ずエスケープ、`target=_blank` に `rel="noopener noreferrer"`。`TssHyperlink.safeUrl(u)` 単体でも利用可。例 `examples/hyperlink.html`（攻撃例含む）。
+- **`tss-cascade` に「その他」自由入力を追加** — 多段（フライアウト）プルダウンの葉に `other:true` を付けると、選んだとき**入力欄に切替**＝自由入力できる（IME 合成ガード・確定/戻る付き）。**`codeField` 指定時**は、値セル＝普通の葉は「大 / 中 / 小」のパス・その他は打った文字／`codeField` セル＝その葉（その他ノード）の `value`。**「その他」が枝ごとにあっても（有給▸その他／午前休▸その他）コードで親が区別できる**（勤怠区分など）。`codeField` 省略時は従来どおり葉の `value` を値セルに保存＝**後方互換**。`separator`/`otherPlaceholder` オプション追加。例 `examples/cascade-other.html`。
+
+### ドキュメント
+- **sparkline の `fill` オプションを明記**（`fill` 指定＝面グラフ／無し＝折れ線）。新規実装ではなく既存オプションの周知（`examples/sparkline.html` は既に使用）。
+
 ## [0.1.27] - 2026-10-14
 
 ### セキュリティ修正

package/README.md

@@ -729,6 +729,24 @@ columns: [
   formula: (row) => ['m4','m5','m6','m7','m8','m9'].map(k=>row[k]).filter(v=>v!=='').join(',') }
 ```
 - `type`('line'/'bar') / `width` / `height` / `color` / `strokeWidth` / `fill`(折れ線下の塗り) / `min`・`max`(既定は自動)。
+- **`fill` を指定すると折れ線の下が塗られて「面グラフ（area）」**になります（＝推移＋量感）。`fill` 無し＝ただの線（line）。別プラグイン不要で line/area を使い分け。
+
+### 同梱プラグイン: セル内ハイパーリンク（tss-hyperlink・安全URL）
+
+`plugins/tss-hyperlink.js`＝ セルの値を**クリックで開くリンク**に（format ヘルパ）。値は **「表示テキスト｜URL」** か **URL 単体**。`columns[c].html:true` ＋ `format: TssHyperlink()` で使います。動く例: [`examples/hyperlink.html`](https://tssgrid.threestarsoftware.co.jp/examples/hyperlink.html)。
+
+```html
+<link rel="stylesheet" href="plugins/tss-hyperlink.css">
+<script src="plugins/tss-hyperlink.js"></script>
+```
+```js
+columns: [
+  { data:'url', html:true, readOnly:true, format: TssHyperlink() },
+];
+// 値: 'GitHub|https://github.com' / 'https://example.com' / 'example.com' / 'メール|mailto:a@b.jp'
+```
+- **★安全URL**: `http`/`https`/`mailto`/`tel` のみリンク化。**`javascript:`・`data:` 等は素のテキストに落とす**（XSS 無効化）。スキーム無しは `https://` 補完、表示テキスト・href は HTML エスケープ、`target=_blank` に `rel="noopener noreferrer"` を付与。
+- `separator`(既定 `'|'`) / `target`(既定 `'_blank'`) / `className`(既定 `'tss-link'`)。`TssHyperlink.safeUrl(u)` で URL 安全化だけ単体利用も可（許可外は `null`）。
 - 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.27",
+  "version": "0.1.29-beta.0",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -59,6 +59,10 @@
       "types": "./plugins/tss-time.d.ts",
       "default": "./plugins/tss-time.js"
     },
+    "./plugins/tss-hyperlink.js": {
+      "types": "./plugins/tss-hyperlink.d.ts",
+      "default": "./plugins/tss-hyperlink.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },

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,17 @@ 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;
+    /** 範囲の確定値を作る（既定 `'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,22 @@
     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'・単日は 'YYYY/MM/DD'）。
+    //   入力中はセルに 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 aIso === bIso ? fmtSlash(aIso) : fmtSlash(aIso) + rangeSep + fmtSlash(bIso); }
+    function rangeValOf(aIso, bIso) { return (aIso !== bIso && rangeValueFn) ? rangeValueFn(aIso, bIso) : defRangeStr(aIso, bIso); }
+    function rangeTipOf(aIso, bIso) { return rangeTooltipFn ? rangeTooltipFn(aIso, bIso) : 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 +89,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 +126,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 +170,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）

package/plugins/tss-cascade.css

@@ -13,3 +13,17 @@
 .tg-cascade .tg-casc-item.active { background: var(--tg-accent, #1573c0); color: #fff; }
 .tg-cascade .tg-casc-label { flex: 1; }
 .tg-cascade .tg-casc-arrow { font-size: 10px; opacity: .7; margin-left: 6px; }
+.tg-cascade .tg-casc-other { font-style: italic; opacity: .95; }
+/* 「その他」モードの入力欄（codeField モードで自由入力） */
+.tg-cascade.tg-casc-inputpop { overflow: visible; }
+.tg-cascade .tg-casc-inputwrap { padding: 4px; min-width: 180px; }
+.tg-cascade .tg-casc-input {
+  width: 100%; box-sizing: border-box; padding: 5px 8px; font: inherit;
+  border: 1px solid #c4ccd6; border-radius: 5px; outline: none;
+}
+.tg-cascade .tg-casc-input:focus { border-color: var(--tg-accent, #1573c0); }
+.tg-cascade .tg-casc-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
+.tg-cascade .tg-casc-actions button {
+  padding: 3px 12px; font: inherit; cursor: pointer; border-radius: 5px; border: 1px solid #c4ccd6; background: #f5f7fa;
+}
+.tg-cascade .tg-casc-actions .tg-casc-ok { background: var(--tg-accent, #1573c0); color: #fff; border-color: transparent; }

package/plugins/tss-cascade.d.ts

@@ -7,12 +7,22 @@ export as namespace TssCascade;
 declare function TssCascade(opts: TssCascade.Options): EditorDef;
 
 declare namespace TssCascade {
-  /** ノード。枝は `children`、葉は `value`（未指定なら `label` を保存）。 */
-  interface Node { label: string; value?: string | number; children?: Node[]; }
+  /** ノード。枝は `children`、葉は `value`（未指定なら `label` を保存）。
+   *  `other:true` の葉は「その他」＝選ぶと入力欄に切替わり、打った文字を値に確定する。
+   *  その時 codeField へ書くコードは、その「その他」ノード自身の `value`（枝ごとに変えられる）。 */
+  interface Node { label: string; value?: string | number; children?: Node[]; other?: boolean; }
 
   interface Options {
     /** 入れ子の選択肢。 */
     options: Node[];
+    /** コードの書き戻し先の列（data キー or 列 index）。
+     *  指定時: 値セル＝普通の葉はパス「大 / 中 / 小」・その他は打った文字／codeField＝葉(その他ノード)の value。
+     *  省略時: 葉の value を値セルに保存（従来・表示は pathFormat）。 */
+    codeField?: string | number;
+    /** 値セルに入れるパスの区切り（既定 ' / '）。pathFormat の separator と揃えると良い。 */
+    separator?: string;
+    /** 「その他」入力欄のプレースホルダ（既定 '自由入力'）。 */
+    otherPlaceholder?: string;
     /** シングルクリックで開く（既定 true）。 */
     openOnClick?: boolean;
     /** ポップアップに付ける任意クラス。 */

package/plugins/tss-cascade.js

@@ -1,33 +1,54 @@
 /*! TssCascade — 多段（フライアウト）プルダウン。TssGrid カスタムエディタ（ポップアップ型）。
  *
  *  メニューのように「大分類 ▸ 中分類 ▸ 小分類」とフライアウトで開き、葉を選ぶとセルに確定。
- *  保存はその葉の value（未指定なら label）。表示は TssCascade.pathFormat で「大 / 中 / 小」のパスにできる。
+ *  葉に `other:true` を付けると、その葉は「その他」＝選ぶと入力欄に切替わり、打った文字をセルに確定。
  *
- *  使い方:
+ *  ── 2つの保存モード ───────────────────────────────────────────────
+ *  (1) codeField 無し（従来）:
+ *      葉の value（未指定なら label）を**値セルに**保存。表示は TssCascade.pathFormat でパスに。
+ *      「その他」を選んだら、打った文字をそのまま値セルに保存。
+ *  (2) codeField あり（コードと表示を分離・combo と同じ流儀）:
+ *      ・値セル        … 普通の葉＝パス「有給 / 私用」／その他＝打った文字「通院」
+ *      ・codeField セル … 普通の葉＝その葉の value／その他＝その「その他」ノードの value
+ *      ＝「その他」が枝ごとにあっても（有給▸その他／午前休▸その他）、codeField を見れば
+ *        どの枝の「その他」かが分かる（文字だけで親が消えない）。値は人が読む表示に使う。
+ *
+ *  使い方（勤怠の区分・枝ごとの「その他」コード）:
  *    const OPTS = [
- *      { label:'営業', children:[
- *        { label:'国内', children:[ {label:'東日本', value:'sales.jp.east'}, {label:'西日本', value:'sales.jp.west'} ] },
- *        { label:'海外', value:'sales.global' },
+ *      { label:'有給', children:[
+ *        { label:'私用', value:'paid:personal' },
+ *        { label:'その他', other:true, value:'paid:other' },   // ← この枝の「その他」コード
+ *      ] },
+ *      { label:'午前休', children:[
+ *        { label:'私用', value:'am_half:personal' },
+ *        { label:'その他', other:true, value:'am_half:other' },
  *      ] },
- *      { label:'開発', children:[ … ] },
  *    ];
  *    columns: [
- *      { data:'category', editor: TssCascade({ options: OPTS }),
- *        format: TssCascade.pathFormat(OPTS) },   // 表示を「営業 / 国内 / 東日本」に（任意）
+ *      { data:'categoryCode' },                                 // コード列（paid:other 等・hidden:true でも可）
+ *      { data:'leaveReason', editor: TssCascade({
+ *          options: OPTS,
+ *          codeField: 'categoryCode',   // コードの書き戻し先（data キー or 列 index）
+ *      }) },
  *    ]
+ *    // 「有給 ▸ その他」で「通院」と入力 → leaveReason='通院' / categoryCode='paid:other'
  *
  *  opts:
- *    options     : 入れ子配列 [{ label, value?, children? }]。必須。value 未指定の葉は label を保存。
+ *    options     : 入れ子配列 [{ label, value?, children?, other? }]。必須。value 未指定の葉は label を保存。
+ *    codeField   : コードの書き戻し先の列（data キー or index）。指定時はモード(2)。省略でモード(1)。
+ *    separator   : 値セルに入れるパスの区切り（既定 ' / '）。pathFormat と合わせると良い。
+ *    otherPlaceholder : 「その他」入力欄のプレースホルダ（既定 '自由入力'）。
  *    openOnClick : 既定 true（プルダウン同様シングルクリックで開く）。
  *    className   : ポップアップに付ける任意クラス。
  *  静的:
- *    TssCascade.pathFormat(options, { separator }) => (value)=>string   // 列 format 用
+ *    TssCascade.pathFormat(options, { separator }) => (value)=>string   // 列 format 用（モード1の表示）
  *    TssCascade.pathOf(options, value, sep?) => string
  */
 (function (root) {
   'use strict';
   function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]; }); }
   function leafVal(n) { return n.value !== undefined ? n.value : n.label; }
+  function isBranch(n) { return !n.other && n.children && n.children.length; }
 
   // 値 → ラベルのパス配列（[大, 中, 小]）。見つからなければ null。
   function findPath(nodes, value, trail) {
@@ -43,20 +64,46 @@
   function TssCascade(opts) {
     opts = opts || {};
     var roots = opts.options || [];
+    var codeField = opts.codeField;
+    var sep = opts.separator || ' / ';
+    var placeholder = opts.otherPlaceholder != null ? opts.otherPlaceholder : '自由入力';
+
     var panels = [];              // 開いているパネル(div)。panels[0]=root, [1]=sub, …
-    var ctxRef = null, done = false, onDoc = null, onKey = null;
+    var chosen = [];              // chosen[d] = 深さ d で降りた枝ノード（葉のパス復元に使う）
+    var ctxRef = null, done = false, onDoc = null, onKey = null, composing = false;
 
     function teardown() {
       panels.forEach(function (p) { if (p.parentNode) p.parentNode.removeChild(p); });
-      panels = [];
+      panels = []; chosen = [];
       if (onDoc) document.removeEventListener('mousedown', onDoc, true);
       if (onKey) document.removeEventListener('keydown', onKey, true);
-      onDoc = onKey = null;
+      onDoc = onKey = null; composing = false;
     }
-    function closeFrom(depth) { while (panels.length > depth) { var p = panels.pop(); if (p.parentNode) p.parentNode.removeChild(p); } }
-    function commitLeaf(n) { if (done) return; done = true; var c = ctxRef; teardown(); c.commit(leafVal(n)); }
+    function closeFrom(depth) { while (panels.length > depth) { var p = panels.pop(); if (p.parentNode) p.parentNode.removeChild(p); } if (chosen.length > depth) chosen.length = depth; }
     function doCancel() { if (done) return; done = true; var c = ctxRef; teardown(); c.cancel(); }
 
+    // 書き戻し: 値セルは commit（履歴に積む）、codeField は別列へ setValueRaw（readOnly 貫通・独立undoを作らない）。
+    function writeCode(code) {
+      var c = ctxRef;
+      if (codeField != null && c.grid && c.r != null) { try { c.grid.setValueRaw(c.r, codeField, code); } catch (e) {} }
+    }
+    // 普通の葉を確定。モード(2)は値＝パス／code＝葉value、モード(1)は値＝葉value（従来）。
+    function commitLeaf(n, depth) {
+      if (done) return; done = true;
+      var c = ctxRef;
+      var path = chosen.slice(0, depth).map(function (x) { return x.label; }).concat(n.label).join(sep);
+      teardown();
+      if (codeField != null) { c.commit(path); writeCode(leafVal(n)); }
+      else c.commit(leafVal(n));
+    }
+    // 「その他」を確定。値＝打った文字／code＝その他ノードの value（枝ごとに違うコード）。
+    function commitOther(n, text) {
+      if (done) return; done = true;
+      var c = ctxRef; teardown();
+      c.commit(text);
+      if (codeField != null) writeCode(leafVal(n));
+    }
+
     function position(pop, anchor, depth) {
       var pw = pop.offsetWidth, ph = pop.offsetHeight, vw = window.innerWidth, vh = window.innerHeight, left, top;
       if (depth === 0) { left = anchor.left; top = anchor.bottom + 2; }
@@ -66,15 +113,43 @@
       pop.style.left = Math.max(6, left) + 'px'; pop.style.top = top + 'px';
     }
 
+    // 「その他」の入力パネル（submenu 相当・panels[depth+1] に積む＝外側クリックで閉じない）。
+    function openInput(n, depth, anchor) {
+      closeFrom(depth + 1);
+      var pop = document.createElement('div');
+      pop.className = 'tg-cascade tg-casc-inputpop' + (opts.className ? ' ' + opts.className : '');
+      pop._isInput = true; pop._depth = depth + 1;
+      pop.innerHTML = '<div class="tg-casc-inputwrap">' +
+        '<input class="tg-casc-input" type="text" placeholder="' + esc(placeholder) + '">' +
+        '<div class="tg-casc-actions"><button type="button" class="tg-casc-ok">確定</button>' +
+        '<button type="button" class="tg-casc-back">戻る</button></div></div>';
+      document.body.appendChild(pop);
+      panels[depth + 1] = pop;
+      position(pop, anchor, depth + 1);
+
+      var input = pop.querySelector('.tg-casc-input');
+      function back() { closeFrom(depth + 1); var pp = panels[depth]; if (pp && pp._active != null && pp._items[pp._active]) pp._items[pp._active].focus(); }
+      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(); commitOther(n, input.value); }
+        else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); back(); }
+      });
+      pop.querySelector('.tg-casc-ok').addEventListener('mousedown', function (e) { e.preventDefault(); commitOther(n, input.value); });
+      pop.querySelector('.tg-casc-back').addEventListener('mousedown', function (e) { e.preventDefault(); back(); });
+      setTimeout(function () { input.focus(); input.setSelectionRange(input.value.length, input.value.length); }, 0);
+      return pop;
+    }
+
     function openPanel(nodes, depth, anchor) {
       closeFrom(depth);
       var pop = document.createElement('div');
       pop.className = 'tg-cascade' + (opts.className ? ' ' + opts.className : '');
       pop.setAttribute('role', 'menu');
       pop.innerHTML = nodes.map(function (n, i) {
-        var branch = n.children && n.children.length;
-        return '<div class="tg-casc-item' + (branch ? ' branch' : '') + '" data-i="' + i + '" role="menuitem" tabindex="-1">' +
-          '<span class="tg-casc-label">' + esc(n.label) + '</span>' + (branch ? '<span class="tg-casc-arrow">▸</span>' : '') + '</div>';
+        var branch = isBranch(n), other = !!n.other;
+        return '<div class="tg-casc-item' + (branch ? ' branch' : '') + (other ? ' tg-casc-other' : '') + '" data-i="' + i + '" role="menuitem" tabindex="-1">' +
+          '<span class="tg-casc-label">' + esc(n.label) + (other ? '…' : '') + '</span>' + (branch ? '<span class="tg-casc-arrow">▸</span>' : '') + '</div>';
       }).join('');
       document.body.appendChild(pop);
       panels[depth] = pop;
@@ -83,16 +158,19 @@
       var items = pop.querySelectorAll('.tg-casc-item');
       pop._items = items; pop._active = null; pop._depth = depth;
       pop._activate = function (idx) { Array.prototype.forEach.call(items, function (el, k) { el.classList.toggle('active', k === idx); }); pop._active = idx; };
-      pop._enter = function (idx, viaKey) {          // 分岐なら submenu を開く（ホバー/→）。葉なら深いパネルを閉じる。
+      pop._enter = function (idx, viaKey) {          // ホバー/→: 枝なら submenu を開く。葉/その他はそれ以上開かない。
         var n = nodes[idx]; if (!n) return; pop._activate(idx);
-        if (n.children && n.children.length) {
+        if (isBranch(n)) {
+          chosen[depth] = n;
           openPanel(n.children, depth + 1, items[idx].getBoundingClientRect());
           if (viaKey) { var sub = panels[depth + 1], f = sub._items[0]; if (f) { sub._activate(0); f.focus(); } }
         } else closeFrom(depth + 1);
       };
-      pop._choose = function (idx) {                 // クリック/Enter：分岐→開く、葉→確定
+      pop._choose = function (idx) {                 // クリック/Enter: 枝→開く／その他→入力へ／葉→確定
         var n = nodes[idx]; if (!n) return;
-        if (n.children && n.children.length) pop._enter(idx, true); else commitLeaf(n);
+        if (n.other) { pop._activate(idx); openInput(n, depth, items[idx].getBoundingClientRect()); }
+        else if (isBranch(n)) pop._enter(idx, true);
+        else commitLeaf(n, depth);
       };
       Array.prototype.forEach.call(items, function (el) {
         var idx = +el.dataset.i;
@@ -104,6 +182,7 @@
 
     function handleKey(e) {
       var pop = panels[panels.length - 1]; if (!pop) return;
+      if (pop._isInput) return;                       // 入力モードのキーは input 側で処理
       var items = pop._items, idx = pop._active == null ? -1 : pop._active, n;
       if (e.key === 'ArrowDown') { e.preventDefault(); n = (idx + 1) % items.length; pop._activate(n); items[n].focus(); }
       else if (e.key === 'ArrowUp') { e.preventDefault(); n = (idx - 1 + items.length) % items.length; pop._activate(n); items[n].focus(); }

package/plugins/tss-hyperlink.css

@@ -0,0 +1,3 @@
+/* TssHyperlink — セル内リンク（plugins/tss-hyperlink.js）。色は --tg-accent を流用。外部CSSで上書き可。 */
+.tssgrid .tg-table td .tss-link { color: var(--tg-accent, #1573c0); text-decoration: underline; cursor: pointer; }
+.tssgrid .tg-table td .tss-link:hover { text-decoration: none; }

package/plugins/tss-hyperlink.d.ts

@@ -0,0 +1,19 @@
+// TssHyperlink — セル内ハイパーリンク（format ヘルパ）。columns[c].html:true ＋ format に渡す。
+export = TssHyperlink;
+export as namespace TssHyperlink;
+
+/** 値 "表示テキスト|URL"（または URL 単体）を安全なリンク HTML に変換する format 関数を返す。 */
+declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any) => string;
+
+declare namespace TssHyperlink {
+  interface Options {
+    /** 表示テキストと URL の区切り（既定 '|'）。 */
+    separator?: string;
+    /** リンクの target（既定 '_blank'）。 */
+    target?: string;
+    /** <a> に付ける任意クラス（既定 'tss-link'）。 */
+    className?: string;
+  }
+  /** URL を安全化（http/https/mailto/tel のみ許可・スキーム無しは https 補完・許可外は null）。 */
+  function safeUrl(u: any): string | null;
+}

package/plugins/tss-hyperlink.js

@@ -0,0 +1,62 @@
+/*! TssHyperlink — セル内ハイパーリンク（format ヘルパ）。SVG/HTML 自前描画・無依存・コア無改変。
+ *
+ *  セルの値を「クリックで開くリンク」として描く。値の形式は "表示テキスト|URL"（区切りは separator）、
+ *  または URL 単体（その場合は URL を表示テキストにも使う）。`columns[c].html:true` ＋ `format` の seam に乗る。
+ *
+ *  ★セキュリティ: URL は利用者データになり得る＝XSS を最初から潰す。
+ *   - プロトコルは http/https/mailto/tel のみ許可（javascript: data: vbscript: 等は拒否＝ただのテキスト表示に落とす）。
+ *   - スキーム無し（example.com/path）は https:// を補完。表示テキスト・href は必ず HTML エスケープ（" ' も）。
+ *   - target=_blank には rel="noopener noreferrer" を付与。
+ *
+ *  使い方:
+ *    columns: [
+ *      { data:'site', title:'リンク', html:true, readOnly:true, format: TssHyperlink() },
+ *    ]
+ *    // 値: "GitHub|https://github.com" / "https://example.com" / "example.com" / "問合せ|mailto:a@b.jp"
+ *
+ *  opts:
+ *    separator : 表示テキストと URL の区切り（既定 '|'）
+ *    target    : リンクの target（既定 '_blank'。'_self' 等も可）
+ *    className  : <a> に付ける任意クラス（既定 'tss-link'）
+ */
+(function (root) {
+  'use strict';
+  function esc(s) {
+    return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+  // 許可: http/https/mailto/tel。スキーム無しで安全な文字だけなら https:// 補完。それ以外(javascript: data: 等)は null。
+  function safeUrl(u) {
+    u = String(u == null ? '' : u).trim();
+    if (u === '') return null;
+    if (/^(https?:|mailto:|tel:)/i.test(u)) return u;          // whitelist したスキーム
+    if (!/[:]/.test(u) && /^[\w./?#=&%+\-~@!$*,;()]+$/.test(u)) return 'https://' + u;  // スキーム無し＝ドメイン/パス→https 補完
+    return null;                                               // javascript: data: vbscript: 等＝拒否
+  }
+
+  function TssHyperlink(opts) {
+    opts = opts || {};
+    var sep = opts.separator != null ? opts.separator : '|';
+    var target = opts.target || '_blank';
+    var cls = opts.className != null ? opts.className : 'tss-link';
+    return function (value) {
+      var v = String(value == null ? '' : value);
+      if (v === '') return '';
+      var i = v.indexOf(sep);
+      var text = i >= 0 ? v.slice(0, i) : v;
+      var url = i >= 0 ? v.slice(i + 1) : v;
+      var safe = safeUrl(url);
+      var label = esc((text.trim() || url.trim()));
+      if (!safe) return label;                                 // 不正/未許可 URL＝リンクにせずテキスト表示（＝安全）
+      var rel = (target === '_blank') ? ' rel="noopener noreferrer"' : '';
+      return '<a href="' + esc(safe) + '" target="' + esc(target) + '"' + rel +
+        (cls ? ' class="' + esc(cls) + '"' : '') + '>' + label + '</a>';
+    };
+  }
+  // URL の安全化だけ外から使いたい時用（カスタム format 内など）。許可外は null。
+  TssHyperlink.safeUrl = safeUrl;
+
+  if (typeof module !== 'undefined' && module.exports) module.exports = TssHyperlink;
+  else root.TssHyperlink = TssHyperlink;
+})(typeof self !== 'undefined' ? self : this);