@threestarsoftware/tssgrid 0.1.32 → 0.1.33

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.33] - 2026-11-05
+
+### 追加
+- **`ellipsis`（溢れた文字を … で省略＋ホバーで全文）を追加**（コア・`wordWrap` の兄弟）。既定は従来どおり `overflow:hidden` で切るだけ（… は出ない）。`ellipsis:true`（グリッド全体）／`columns[c].ellipsis:true`（列単位）で**末尾を省略記号**にし、**溢れているセルだけホバーで全文を `title`**（ネイティブツールチップ）表示。溢れているセルだけ初回ホバーで1回測るので軽い（未使用なら即 return＝ゼロコスト）。**見え方だけ**＝値・コピー・編集は全文のまま（コピーは表示文字でなく元の値）。折り返し（`wordWrap`）と同時なら折り返しが優先。例 `examples/ellipsis.html`。
+
+### 修正
+- **`html:true` 列の編集がフォーマット後の生HTMLになる不具合を修正**（コア）— 編集開始値を作る `_editText` が、date/number 以外では `_displayValue`（format 適用後）を返しており、`html:true`＋`format` 列だと `<a>`/`<span>` の**生HTML**が編集欄に入って崩れていた（その後タグのままリンク化して二重に崩れる）。**`html:true` 列は「生の値」を編集する**ように修正（表示の装飾＝format と、編集対象＝値、を分離）。html でない format 列は従来どおり表示形を編集（回帰なし）。
+
+### 改善（プラグイン）
+- **`tss-hyperlink` に「モードB（値＝文字だけ・URLはシステムが付与）」を追加** — 従来は値 `"表示\|URL"` に URL を埋める必要があった（モードA）。`url` オプション（文字列 or `(value,ctx,row)=>string`）を渡すと、**値は表示テキストだけ**になり URL・装飾をシステム側で付与できる（入力・コピー・編集は文字だけ／Tabulator の `link` フォーマッタ同様）。安全な URL を返せば `<a>`、`null`/`''`/不正なら `<span>`（href 無し＝**SPA クリックをホストが拾う**用）、`false` で素テキスト。`className` は関数化（行ごとに出し分け）、`attrs`（`data-*`/`aria-*`/`title`/`id`/`role` のみ・値はエスケープ・`null` は出さない）で `data-id` 等を安全に付与。本文は常に自動エスケープ＝手書き format の XSS 罠を回避。**`safeUrl` がサイト内相対パス（`/path`・`./`・`../`・`#`・`?`）をそのまま許可**（SPA ルーティング用）、**プロトコル相対 `//host` は拒否**（不意の外部遷移回避）。`TssHyperlink()`（値＝"text\|url"）は**完全後方互換**。
+
 ## [0.1.32] - 2026-11-03
 
 ### 改善（プラグイン）

package/README.md

@@ -771,6 +771,7 @@ columns: [
 ```
 - **★安全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`）。
+- **モードB（値＝文字だけ・URL はシステムが付与）**: `url` オプション（文字列 or `(value,ctx,row)=>string`）を渡すと値は表示テキストだけになり、**入力・コピー・編集も文字だけ**（Tabulator の `link` フォーマッタ同様）。安全な URL を返せば `<a>`、`null`/`''`/不正なら `<span>`（href 無し＝**SPA クリックをホストが拾う**用）、`false` で素テキスト。`className` は関数化（行ごとに出し分け）、`attrs`(`data-*`/`aria-*`/`title`/`id`/`role` のみ・値はエスケープ・`null` は出さない)で `data-id` 等を安全付与。`label` で表示差し替え。サイト内相対パス（`/x`・`./`・`../`・`#`・`?`）は許可、`//host` は拒否。例: `format: TssHyperlink({ url:(v,{r},row)=>'/members/'+row.id })`。
 - 数値しか SVG に入れない＝安全。`formula`/`html-cells` と同じ仕組みで、**有料グリッドの "セル内グラフ" を無料で**。
 
 ### 同梱プラグイン: セル内 横棒グラフ（bar・データバー）
@@ -976,6 +977,7 @@ new TssGrid(el, { hiddenColumns: [1] });   // 初期で隠す
 | `rowHeaders` / `colHeaders` | `boolean` | `true` | 行番号列 / ヘッダ行の表示。`false` で隠す |
 | `hiddenColumns` | `number[]` | `[]` | 初期で隠す列インデックス。実行時は `hideColumn`/`showColumn`/`toggleColumn`（→ [列の表示/非表示](#列の表示非表示)） |
 | `wordWrap` | `boolean` | `false` | セル内で折り返し（行高は内容に合わせ伸びる）。`columns[c].wordWrap` で列単位も可 |
+| `ellipsis` | `boolean` | `false` | 溢れた文字を **… で省略**し、溢れたセルは**ホバーで全文（`title`）**。`columns[c].ellipsis` で列単位も可。見え方だけ＝値・コピー・編集は全文のまま。`wordWrap` と同時なら折り返しが優先 |
 | `placeholder` | `string` | — | 空セルに薄いヒント文字（`getData` には入らない）。`columns[c].placeholder` で列単位も可 |
 | `className` | `string` | — | コンテナ(`.tssgrid`)に付ける任意クラス（テーマ付け） |
 | `fillHandle` | `boolean \| {direction,autoInsertRow}` | `true` | **`false`でフィル完全OFF**（ハンドルを出さない＝ドラッグでの消去/上書きなし。フィルの起点はハンドルのみなので fill 自体が無効に）。`{direction:'vertical'\|'horizontal'\|'both', autoInsertRow:true}`で詳細指定（下へドラッグで行追加）。設定/表示専用グリッドで誤フィルを防ぐのに有効 |

package/package.json

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

package/plugins/tss-hyperlink.d.ts

@@ -2,17 +2,30 @@
 export = TssHyperlink;
 export as namespace TssHyperlink;
 
-/** 値 "表示テキスト|URL"（または URL 単体）を安全なリンク HTML に変換する format 関数を返す。 */
-declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any) => string;
+/** セルの値をリンク HTML に変換する format 関数を返す。
+ *  モードA（既定）: 値 "表示テキスト|URL"（または URL 単体）。値に URL が入る。
+ *  モードB（`url` 指定）: 値＝表示テキストだけ・URL/装飾はオプションで付与（入力/コピー/編集は文字だけ）。 */
+declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any, ctx?: TssHyperlink.Ctx, row?: any) => string;
 
 declare namespace TssHyperlink {
+  interface Ctx { r: number; c: number; }
+  /** (value, ctx, row) を受けて値を返す関数（className/url/label/attrs 用）。row はその行の値配列。 */
+  type Fn<T> = (value: any, ctx: Ctx, row: any) => T;
+
   interface Options {
-    /** 表示テキストと URL の区切り（既定 '|'）。 */
+    /** （モードA）表示テキストと URL の区切り（既定 '|'）。 */
     separator?: string;
     /** リンクの target（既定 '_blank'）。 */
     target?: string;
-    /** <a> に付ける任意クラス（既定 'tss-link'）。 */
-    className?: string;
+    /** <a>/<span> に付けるクラス。文字列 or 関数（行ごとに出し分け可。既定 'tss-link'）。 */
+    className?: string | Fn<string | null | undefined>;
+    /** 指定するとモードB（値＝表示テキストだけ）。URL を文字列 or 関数で付与。
+     *  安全な URL を返せば <a>、null/''/不正なら <span>（href 無し＝SPA クリック用）、false で素テキスト。 */
+    url?: string | Fn<string | null | false | undefined>;
+    /** （モードB・任意）表示テキストの差し替え（既定は値そのもの）。 */
+    label?: Fn<any>;
+    /** 追加属性 (value, ctx, row)=>({key:val})。data- / aria- / title / id / role のみ・値はエスケープ・null は出さない。 */
+    attrs?: Fn<Record<string, any>>;
   }
   /** URL を安全化（http/https/mailto/tel のみ許可・スキーム無しは https 補完・許可外は null）。 */
   function safeUrl(u: any): string | null;

package/plugins/tss-hyperlink.js

@@ -1,23 +1,34 @@
 /*! TssHyperlink — セル内ハイパーリンク（format ヘルパ）。SVG/HTML 自前描画・無依存・コア無改変。
  *
- *  セルの値を「クリックで開くリンク」として描く。値の形式は "表示テキスト|URL"（区切りは separator）、
- *  または URL 単体（その場合は URL を表示テキストにも使う）。`columns[c].html:true` ＋ `format` の seam に乗る。
+ *  2つのモード（Tabulator の link フォーマッタ同様、URL を値に埋めても／システムが付けてもよい）:
+ *   ◆モードA（既定・後方互換）: 値 = "表示テキスト|URL" または URL 単体。値に URL が入っている。
+ *       format: TssHyperlink()
+ *   ◆モードB（`url` オプション指定時）: 値 = 表示テキストだけ。URL・装飾はシステム側（関数/文字列）で付与。
+ *       入力・コピー・編集は「文字だけ」。本文は常に自動エスケープ＝手書き format の XSS 罠を回避。
+ *       format: TssHyperlink({ url:(val,{r},row)=>'/x/'+row.id })            // 本物リンク（URLを生成）
+ *       format: TssHyperlink({ url:()=>null, className:'my-link',            // href 無し＝<span>（SPA クリックをホストが拾う）
+ *                              attrs:(val,{r})=>({ 'data-id': ids[r] }) })
  *
- *  ★セキュリティ: URL は利用者データになり得る＝XSS を最初から潰す。
- *   - プロトコルは http/https/mailto/tel のみ許可（javascript: data: vbscript: 等は拒否＝ただのテキスト表示に落とす）。
- *   - スキーム無し（example.com/path）は https:// を補完。表示テキスト・href は必ず HTML エスケープ（" ' も）。
+ *  ★セキュリティ: URL も attrs も利用者データになり得る＝XSS を最初から潰す。
+ *   - URL のプロトコルは http/https/mailto/tel のみ許可（javascript: data: vbscript: 等は拒否＝ただのテキスト/素の span に落とす）。
+ *   - スキーム無し（example.com/path）は https:// を補完。表示テキスト・href・属性値は必ず HTML エスケープ（" ' も）。
+ *   - attrs は data-* / aria-* / title / id / role のキーだけ許可（on* や style, href, class は弾く）。値が null のキーは出さない。
  *   - target=_blank には rel="noopener noreferrer" を付与。
  *
- *  使い方:
+ *  使い方（列は html:true が要る＝format が HTML を返すため。編集はコアが「生の値」を出すので文字だけ編集になる）:
  *    columns: [
- *      { data:'site', title:'リンク', html:true, readOnly:true, format: TssHyperlink() },
+ *      { data:'site', title:'リンク', html:true, readOnly:true, format: TssHyperlink() },               // モードA
+ *      { data:'name', title:'名前',   html:true, format: TssHyperlink({ url:(v,{r})=>'/u/'+ids[r] }) }, // モードB
  *    ]
- *    // 値: "GitHub|https://github.com" / "https://example.com" / "example.com" / "問合せ|mailto:a@b.jp"
  *
  *  opts:
- *    separator : 表示テキストと URL の区切り（既定 '|'）
+ *    separator : （モードA）表示テキストと URL の区切り（既定 '|'）
+ *    url       : （指定でモードB）URL。文字列 or (value, ctx, row)=>string。安全な URL を返せば <a>、
+ *                null/''/不正なら <span>（href 無し＝SPA クリック用）、false を返すと素テキスト（装飾なし）。
+ *    label     : （モードB・任意）表示テキストを差し替える (value, ctx, row)=>string（既定は値そのもの）
+ *    attrs     : （任意）追加属性 (value, ctx, row)=>({key:val})。data- / aria- / title / id / role のみ・値はエスケープ。
  *    target    : リンクの target（既定 '_blank'。'_self' 等も可）
- *    className  : <a> に付ける任意クラス（既定 'tss-link'）
+ *    className : <a>/<span> に付けるクラス。文字列 or (value, ctx, row)=>string（行ごとに出し分け可。既定 'tss-link'）
  */
 (function (root) {
   'use strict';
@@ -31,27 +42,63 @@
     u = String(u == null ? '' : u).trim();
     if (u === '') return null;
     if (/^(https?:|mailto:|tel:)/i.test(u)) return u;          // whitelist したスキーム
+    if (/^\/\//.test(u)) return null;                          // プロトコル相対 //host は拒否（不意の外部遷移/phishing 回避）
+    if (/^(\/|\.\/|\.\.\/|[#?])/.test(u)) return u;            // サイト内相対（/path ./x ../x #frag ?q）はそのまま（SPA ルーティング用）
     if (!/[:]/.test(u) && /^[\w./?#=&%+\-~@!$*,;()]+$/.test(u)) return 'https://' + u;  // スキーム無し＝ドメイン/パス→https 補完
     return null;                                               // javascript: data: vbscript: 等＝拒否
   }
+  // attrs を安全な属性文字列に。data-*/aria-*/title/id/role のみ・値はエスケープ・null は出さない。
+  function attrStr(fn, v, ctx, row) {
+    if (typeof fn !== 'function') return '';
+    var o; try { o = fn(v, ctx, row) || {}; } catch (_) { return ''; }
+    var s = '';
+    for (var k in o) {
+      if (!Object.prototype.hasOwnProperty.call(o, k)) continue;
+      var val = o[k];
+      if (val == null) continue;
+      if (!/^(data-[a-z0-9-]+|aria-[a-z0-9-]+|title|id|role)$/i.test(k)) continue;   // 安全キーのみ
+      s += ' ' + k.toLowerCase() + '="' + esc(val) + '"';
+    }
+    return s;
+  }
 
   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 defCls = opts.className != null ? opts.className : 'tss-link';
+    var modeB = ('url' in opts);                                // url 指定＝モードB（値は文字だけ）
+    function clsAttrFor(v, ctx, row) {
+      var c = (typeof defCls === 'function') ? defCls(v, ctx, row) : defCls;
+      c = (c == null ? '' : String(c));
+      return c ? ' class="' + esc(c) + '"' : '';
+    }
+    return function (value, ctx, row) {
       var v = String(value == null ? '' : value);
       if (v === '') return '';
+      var clsAttr = clsAttrFor(v, ctx, row);
+      var extra = attrStr(opts.attrs, v, ctx, row);
+      var rel = (target === '_blank') ? ' rel="noopener noreferrer"' : '';
+
+      if (modeB) {
+        // 値＝表示テキスト。URL は opts.url（文字列/関数）で付与。本文は常にエスケープ。
+        var label0 = (typeof opts.label === 'function') ? opts.label(v, ctx, row) : v;
+        var label = esc(String(label0 == null ? '' : label0));
+        var u = (typeof opts.url === 'function') ? opts.url(v, ctx, row) : opts.url;
+        if (u === false) return label;                          // 明示的にリンクにしない＝素テキスト
+        var safeB = safeUrl(u);
+        if (safeB) return '<a href="' + esc(safeB) + '" target="' + esc(target) + '"' + rel + clsAttr + extra + '>' + label + '</a>';
+        return '<span' + clsAttr + extra + '>' + label + '</span>';   // href 無し＝SPA クリック用
+      }
+
+      // モードA（後方互換）: 値 "表示|URL" / "URL"
       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>';
+      var labelA = esc((text.trim() || url.trim()));
+      if (!safe) return labelA;                                 // 不正/未許可 URL＝リンクにせずテキスト表示（＝安全）
+      return '<a href="' + esc(safe) + '" target="' + esc(target) + '"' + rel + clsAttr + extra + '>' + labelA + '</a>';
     };
   }
   // URL の安全化だけ外から使いたい時用（カスタム format 内など）。許可外は null。

package/src/tssgrid.css

@@ -97,6 +97,8 @@
 .tssgrid .tg-table td.tg-placeholder { color: var(--tg-placeholder-fg); }
 /* セル内折り返し: グリッド全体(.tg-wordwrap) or 列単位(td.tg-wrap-cell)。行高は中身に合わせて伸びる */
 .tssgrid.tg-wordwrap .tg-table td, .tssgrid .tg-table td.tg-wrap-cell { white-space: normal; word-break: break-word; }
+/* 溢れた文字を … で省略: グリッド全体(.tg-ellipsis) or 列単位(td.tg-ellip-cell)。既定は overflow:hidden で切るだけ＝…は出ない。ホバーで全文を title 表示（JS）。折り返し(wordWrap)が同時指定なら折り返しが優先（white-space:normal で text-overflow 無効） */
+.tssgrid.tg-ellipsis .tg-table td, .tssgrid .tg-table td.tg-ellip-cell { text-overflow: ellipsis; }
 /* 読み取り専用セル: 淡色＋既定カーソル（編集不可・全変更経路で拒否） */
 .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; }

package/src/tssgrid.d.ts

@@ -89,6 +89,8 @@ export interface ColumnDef {
   html?: boolean;
   /** 列単位の折り返し。 */
   wordWrap?: boolean;
+  /** 列単位の … 省略（溢れた文字を省略記号で切る／ホバーで全文を title 表示）。値・コピー・編集は不変＝見え方だけ。折り返し(wordWrap)と同時なら折り返しが優先。 */
+  ellipsis?: boolean;
   /** 複数行(改行)入力を有効化。編集は隠し textarea（IME 直打ち対応）、表示は改行保持(pre-wrap)。行高は自動で伸びないので rowHeights 等で確保する。 */
   multiline?: boolean;
   /** 空セルの薄いヒント文字。 */
@@ -171,6 +173,8 @@ export interface TssGridOptions {
   colHeaders?: boolean;
   hiddenColumns?: number[];
   wordWrap?: boolean;
+  /** グリッド全体の … 省略（溢れた文字を省略記号で切る／ホバーで全文を title 表示）。列単位は columns[c].ellipsis。見え方だけ＝値・コピー・編集は不変。 */
+  ellipsis?: boolean;
   /** multiline 列の Enter 挙動。'commit'(既定・Excel風): Enter=確定 / Alt+Enter=改行。'newline'(メモ帳風): Enter=改行 / Ctrl+Enter=確定。 */
   multilineEnter?: 'commit' | 'newline';
   /** multiline セル右上の「複数行」ヒント表示（既定 true）。色は CSS 変数 --tg-ml-mark。false で非表示。 */

package/src/tssgrid.js

@@ -214,6 +214,8 @@
       this.stretchH = opts.stretchH || 'none';
       // セル内折り返し（既定 nowrap）。grid 全体 or columns[c].wordWrap。
       this.wordWrap = !!opts.wordWrap;
+      // 溢れた文字を … で省略（既定は切るだけ）。grid 全体 or columns[c].ellipsis。ホバーで全文を title 表示（見え方だけ・値/コピー/編集は不変）。
+      this.ellipsis = !!opts.ellipsis;
       // 複数行(改行)編集の Enter 挙動: 'commit'(既定・Excel風: Enter=確定 / Alt+Enter=改行) | 'newline'(メモ帳風: Enter=改行 / Ctrl+Enter=確定)。列は columns[c].multiline:true で有効化。
       this.multilineEnter = opts.multilineEnter === 'newline' ? 'newline' : 'commit';
       // multiline セル右上の「複数行」ヒント（既定 ON）。色は CSS 変数 --tg-ml-mark で。false で消す。
@@ -858,6 +860,7 @@
       this.root = q('.tssgrid');
       if (this.className) this.root.className += ' ' + this.className;  // 任意クラス（テーマ付け）
       if (this.wordWrap) this.root.classList.add('tg-wordwrap');        // グリッド全体の折り返し
+      if (this.ellipsis) this.root.classList.add('tg-ellipsis');        // グリッド全体の … 省略
       if (!this.multilineMark) this.root.classList.add('tg-no-ml-mark'); // multiline の右上ヒントを消す
       if (!this.cursor) this.root.classList.add('tg-no-cursor');        // 表示専用（選択枠なし＋セルカーソル既定）
       if (this.width) {
@@ -1195,6 +1198,8 @@
     _editText(r, c) {
       if (this._nativeInputType(c)) return this.data[r][c];
       if (this.colType(c) === 'number') return this.data[r][c];
+      // html:true は format の出力が markup（<a>/<span> 等）＝編集対象は生の値。整形後を入れるとタグを編集して崩れる。
+      if (this.colCfg(c).html) return this.data[r][c];
       return this._displayValue(r, c);
     }
     // td の中身を型に応じて描画。data は確定済み前提。空セルは placeholder（あれば）を表示。
@@ -1485,6 +1490,7 @@
         if (this.colType(c) === 'number') cls.push('tg-num');  // 数値は右寄せ
         if (this._isReadOnly(r, c)) cls.push('tg-readonly');  // 読み取り専用（淡色＋カーソル既定）
         if (this.colCfg(c).wordWrap) cls.push('tg-wrap-cell');  // 列単位の折り返し
+        if (this.colCfg(c).ellipsis) cls.push('tg-ellip-cell');  // 列単位の … 省略
         if (this.colCfg(c).multiline) cls.push('tg-multiline-cell');  // 複数行（改行保持＝pre-wrap）
         if (this.data[r][c] === '' && this._placeholder(c) != null) cls.push('tg-placeholder');  // 空セルのヒント
         const al = this._cellAlign(r, c);   // 整列（列既定＋セル上書き）
@@ -3164,6 +3170,15 @@
         this.setActive(+td.dataset.r, +td.dataset.c); this._beginEdit(this.active.r, this.active.c);
       });
       this.fillhandle.addEventListener('mousedown', (e) => { e.preventDefault(); e.stopPropagation(); this.filling = { src: this.rectRange() }; this._fillRow = null; });
+      // 溢れて … で切れたセルは、ホバー時に全文を title（ネイティブツールチップ）で出す。
+      // 対象セルだけを初回ホバーで1回測るso軽い（redraw で td が作り直され _ellChk も消える）。ellipsis 未使用なら即 return＝ゼロコスト。
+      this.table.addEventListener('mouseover', (e) => {
+        const td = e.target.closest && e.target.closest('td');
+        if (!td || td._ellChk) return;
+        if (!this.ellipsis && !td.classList.contains('tg-ellip-cell')) return;
+        td._ellChk = 1;
+        if (td.scrollWidth > td.clientWidth + 1 && !td.hasAttribute('title')) td.title = td.textContent;
+      });
       // 右クリックメニュー（行/列の挿入・削除）
       this.table.addEventListener('contextmenu', (e) => this._onContextMenu(e));
       this.menuEl.addEventListener('mousedown', (e) => {