@threestarsoftware/tssgrid 0.1.13 → 0.1.15

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.15] - 2026-09-30
+
+### 追加
+- **Excel 入力ショートカットを組込**（コア・既定 ON・opt-out 可・すべて未バインドキー＝追加的）— 業務入力でよく使うキーを最初から用意。**`Ctrl+;`＝今日の日付** / **`Ctrl+:`＝現在時刻** / **`Ctrl+D`＝上のセルをコピー（fill down）** / **`Ctrl+R`＝左のセルをコピー（fill right）**。`Ctrl+;`/`Ctrl+:` は**打鍵結果の文字で判定**するので **JIS の `:` 専用キーも US の `Ctrl+Shift+;` も両対応**。fill は範囲選択で一括（単一セルは上/左をコピー）、`setValue`／検証を通り **Undo 1回**・`readOnly` スキップ・**列の型に合わない値は貼付同様に弾く**。無効化は `dateShortcuts:false` / `fillShortcuts:false`（`addShortcut` で同キー登録すればそちらが優先）。
+- **`todayFormat` / `nowFormat`**（コア）— `Ctrl+;` / `Ctrl+:` が**テキスト等（date/time 型でない）列**に入れる日付/時刻の形式を選べる（既定 `'YYYY-MM-DD'` / `'HH:MM'`）。文字列トークン（`YYYY`/`MM`/`DD`・`HH`/`mm`）か `(d: Date) => string`。例 `todayFormat:'YYYY/MM/DD'`。**`date`/`time` 型の列は従来どおり列の仕組み（ISO 保存＋列 `format` 表示）に従う**（この設定に非依存）。
+
+### 変更
+- README のカスタムショートカット例を `Ctrl+D`→`Alt+D` に変更（組込 `Ctrl+D`=fill down と紛れないように・機能変更なし）。
+
+## [0.1.14] - 2026-09-29
+
+### 修正
+- **カスタムエディタの ▾ アイコンをネイティブ `type:'dropdown'` と同じ SVG キャレットに統一**（コア・CSS のみ・挙動不変）— `editor.icon:'▾'`（`tss-combo` / `tss-autocomplete` 等）は従来 `tg-haspicker` の**文字グリフ**で描かれ、`tg-dropdown` の**SVG シェブロン**と字形・余白（20px vs 18px）が食い違っていた。`data-ico="▾"` のときだけネイティブ dropdown と同一の SVG（11×8・`#7d8a99`・`padding-right:18px`）に差し替えて統一。絵文字系アイコン（`📅`/`🕐` 等）は対象外。※開いたリスト自体は、ネイティブ dropdown が OS 描画の `<select>`（CSS 装飾不可）・combo 等は自前ポップアップ（角丸/影/アクセント色）で、**見た目差はあえて残す**（「その他」入力を持つ合図・combo 側は `.tg-combo*`/`--tg-accent` で調整可）。
+
 ## [0.1.13] - 2026-09-24
 
 ### 追加

package/README.md

@@ -392,7 +392,7 @@ shared.getMaster();                         // マスタ全行（getRows 形式
 ```js
 new TssGrid(el, {
   shortcuts: [
-    { keys: 'Ctrl+D', name: 'dup', context: 'grid', handler: (e, { grid }) => grid.insertRow(grid.active.r, 'below') },
+    { keys: 'Alt+D', name: 'dup', context: 'grid', handler: (e, { grid }) => grid.insertRow(grid.active.r, 'below') },
     { keys: ['Ctrl+S', 'Ctrl+Shift+S'], handler: () => save() },   // 複数キー可
   ],
 });
@@ -402,6 +402,19 @@ grid.removeShortcut('dup');
 - マッチすると既定動作を抑止します（`handler` が `true` を返すと既定も続行）。`cmd`/`meta` は `Ctrl` 扱い。
 - 全キーをまとめて捌きたいなら **`onBeforeKeyDown(e)`**（`false` / `preventDefault()` でグリッド既定を止める）。
 
+**組込ショートカット（Excel 互換・既定 ON）**: 業務入力でよく使うキーを最初から用意（すべて未バインドキー＝追加的）。
+
+| キー | 動作 | 備考 |
+|---|---|---|
+| `Ctrl+;` | **今日の日付**（`YYYY-MM-DD`）をセルへ | `date` 列にそのまま入る |
+| `Ctrl+:` | **現在時刻**（`HH:MM`）をセルへ | **JIS の `:` 専用キーも US の `Ctrl+Shift+;` も両対応**（打鍵結果の文字で判定） |
+| `Ctrl+D` | **上のセルをコピー**（fill down）| 範囲選択なら先頭行を下へ一括 |
+| `Ctrl+R` | **左のセルをコピー**（fill right）| 範囲選択なら左端列を右へ一括 |
+
+- いずれも `setValue`／検証を通り **Undo 1回**で戻せます（fill は**列の型に合わない値は貼り付けと同様に弾かれます**）。`readOnly` セルはスキップ。
+- 無効化: `dateShortcuts: false`（`Ctrl+;`/`Ctrl+:`）・`fillShortcuts: false`（`Ctrl+D`/`Ctrl+R`）。独自に `addShortcut` で同じキーを登録すれば**そちらが優先**されます。
+- **入れる形式**: `date`/`time` 型の列は**列の仕組みに従う**（ISO 保存＝`YYYY-MM-DD`/`HH:MM`、見た目は列の `format` で `/` でも自由）。**それ以外（テキスト等）の列は** `todayFormat` / `nowFormat` で形式を選べます（既定 `'YYYY-MM-DD'` / `'HH:MM'`。トークン `YYYY`/`MM`/`DD`・`HH`/`mm`、または `(d: Date) => string`）。例: `todayFormat: 'YYYY/MM/DD'`（スラッシュ区切り）。
+
 **プラグイン**（軽量 base-plugin 相当。`init(grid)→{destroy?}` の薄い契約）:
 
 ```js
@@ -681,6 +694,7 @@ columns: [
 - 値列にエディタを付け、`codeField` で**別のコード列へ code を書き戻す**（`setValueRaw`＝派生値・`readOnly` 列にも書ける）。`options` は `{code,label}` か文字列配列（code=label）。既存の「その他」値（選択肢に無い値）は開くと**入力欄に復元**。
 - undo/redo・貼付で code を値に追従させたい時は `TssCombo.codeOf({options, other})` を `onAfterChange` に噛ませる（任意）。
 - 見た目は `tg-combo*` クラス、色は `--tg-accent` を流用。`openOnClick` / `otherPlaceholder` / `icon` / `className`。
+- **開いたリストの見た目はネイティブ `type:'dropdown'`（OS 描画の `<select>`）とはあえて別**（自前ポップアップ＝角丸・影・アクセント色＝「ここは『その他』入力もできる」合図）。**セル右の ▾ キャレットはネイティブ dropdown と統一済み**。リストを素の dropdown に寄せたい場合は `.tg-combo*` / `--tg-accent` を上書きすれば調整できます（※逆にネイティブ `<select>` のリストは OS 製で CSS 装飾不可）。
 
 ### 同梱プラグイン: セル内スパークライン（sparkline・ミニグラフ）
 
@@ -934,6 +948,10 @@ new TssGrid(el, { hiddenColumns: [1] });   // 初期で隠す
 | `onHeaderRender` | `(th, c)=>void` | — | 各列ヘッダ `th` の生成後に呼ぶ（**再描画毎に自動で再実行**）。ソートアイコン等の要素差し込み用 → 動く例: [`examples/multisort.html`](https://tssgrid.threestarsoftware.co.jp/examples/multisort.html) |
 | `disjointSelect` | `boolean` | `true` | Ctrl+ヘッダで**行/列を飛び飛びに複数選択**（`false` で Ctrl+クリックは単一選択に戻る）。`getSelectedColumns()`/`getSelectedRows()`・飛び飛びコピー/カットと連動 |
 | `shortcuts` | `Array` | `[]` | カスタムショートカット（→ [ショートカット / プラグイン](#ショートカット--プラグイン--破棄)） |
+| `dateShortcuts` | `boolean` | `true` | 組込 `Ctrl+;`=今日 / `Ctrl+:`=現在時刻（`false` で無効） |
+| `fillShortcuts` | `boolean` | `true` | 組込 `Ctrl+D`=上をコピー / `Ctrl+R`=左をコピー（`false` で無効） |
+| `todayFormat` | `string \| (d:Date)=>string` | `'YYYY-MM-DD'` | `Ctrl+;` が**テキスト等の列**に入れる日付形式（トークン `YYYY`/`MM`/`DD`）。`date` 列は列準拠 |
+| `nowFormat` | `string \| (d:Date)=>string` | `'HH:MM'` | `Ctrl+:` が**テキスト等の列**に入れる時刻形式（トークン `HH`/`mm`）。`time` 列は列準拠 |
 | `plugins` | `Array` | `[]` | プラグイン（関数 or 登録名）。`init(grid)` で初期化 |
 | `onPasteOverflow` | `(info)=>void` | — | `pasteOverflow:'error'` で超過時。`info = { anchor:{r,c}, height, width, rows, cols, overRows, overCols }` |
 

package/package.json

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

package/src/tssgrid.css

@@ -203,6 +203,14 @@
 }
 .tssgrid .tg-table td.tg-readonly.tg-haspicker { padding-right: 6px; }   /* 読取専用は出さない */
 .tssgrid .tg-table td.tg-readonly.tg-haspicker::after { display: none; }
+/* editor.icon:'▾'（＝プルダウン相当のキャレット）はネイティブ dropdown と同じ SVG シェブロンで統一
+   （combo / autocomplete 等・文字グリフの三角ではなく tg-dropdown と揃った見た目に）。絵文字系(📅/🕐)は対象外。 */
+.tssgrid .tg-table td.tg-haspicker[data-ico="▾"] { padding-right: 18px; }
+.tssgrid .tg-table td.tg-haspicker[data-ico="▾"]::after {
+  content: ''; right: 5px; top: 50%; bottom: auto; transform: translateY(-50%);
+  display: block; width: 11px; height: 8px; font-size: 0;
+  background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='8'><path d='M1.5 2.2l4 4 4-4' fill='none' stroke='%237d8a99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 11px 8px;
+}
 
 /* 固定列(frozen)は dropdown/haspicker/multiline でも sticky を維持する。
    これら型の position:relative は .tg-frozen と同じ詳細度(0,3,1)で後勝ち＝固定列の

package/src/tssgrid.d.ts

@@ -206,6 +206,14 @@ export interface TssGridOptions {
   allowInsertCols?: boolean;
   allowDeleteCols?: boolean;
   shortcuts?: any[];
+  /** 組込ショートカット Ctrl+;（今日）/ Ctrl+:（現在時刻）を有効化（既定 true）。 */
+  dateShortcuts?: boolean;
+  /** 組込ショートカット Ctrl+D（上をコピー=fill down）/ Ctrl+R（左をコピー=fill right）を有効化（既定 true）。 */
+  fillShortcuts?: boolean;
+  /** Ctrl+; が「date 型でない列」に入れる日付形式（既定 'YYYY-MM-DD'）。トークン YYYY/MM/DD、または (d:Date)=>string。date 列は列の仕組み（ISO 保存＋列 format 表示）に従う。 */
+  todayFormat?: string | ((d: Date) => string);
+  /** Ctrl+: が「time 型でない列」に入れる時刻形式（既定 'HH:MM'）。トークン HH/mm、または (d:Date)=>string。time 列は 'HH:MM' 保存。 */
+  nowFormat?: string | ((d: Date) => string);
   /** プラグイン（関数 or 登録名）。init(grid) で初期化。 */
   plugins?: any[];
 

package/src/tssgrid.js

@@ -281,6 +281,13 @@
       this._merges = null;          // セル結合（横）: [{r,c,colspan}] or null。null=結合なし＝全経路ゼロコスト
       this._listeners = [];         // destroy() 用に登録した document/window リスナを記録
       this._destroyed = false;
+      // Excel 入力ショートカット（組込・既定 ON・opt-out 可・未バインドキーなので追加的）。
+      this.dateShortcuts = opts.dateShortcuts !== false;   // Ctrl+;=今日の日付 / Ctrl+:=現在時刻（文字で判定＝JIS の Ctrl+: も US の Ctrl+Shift+; も拾う）
+      this.fillShortcuts = opts.fillShortcuts !== false;   // Ctrl+D=上のセルをコピー(fill down) / Ctrl+R=左のセルをコピー(fill right)
+      // Ctrl+; / Ctrl+: が「テキスト等（date/time 型でない）」列に入れる形式（文字列トークン YYYY/MM/DD・HH/mm、または関数）。
+      // date/time 型の列はこの設定に関係なく列の仕組み（ISO 保存＋列 format 表示）に従う。
+      this.todayFormat = opts.todayFormat || 'YYYY-MM-DD';
+      this.nowFormat = opts.nowFormat || 'HH:MM';
       (opts.shortcuts || []).forEach(s => this.addShortcut(s));
 
       this._padToMin();        // minRows/minCols まで空行・空列を補う
@@ -2290,6 +2297,45 @@
       else { const { r0, r1, c0, c1 } = this.rectRange(); for (let r = r0; r <= r1; r++) for (let c = c0; c <= c1; c++) this.setCell(r, c, '', changes); }
       this.pushCmd(changes, before, this.snapSel(), 'delete');
     }
+    // フォーマット文字列 or 関数で日時を成形。トークン: YYYY/MM/DD（日付）・HH/mm（時刻）。
+    _fmtDateTime(d, spec, isTime) {
+      if (typeof spec === 'function') { try { return String(spec(d)); } catch (_) { return ''; } }
+      const p2 = n => String(n).padStart(2, '0');
+      const map = isTime ? { HH: p2(d.getHours()), mm: p2(d.getMinutes()) }
+                         : { YYYY: String(d.getFullYear()), MM: p2(d.getMonth() + 1), DD: p2(d.getDate()) };
+      return String(spec).replace(/YYYY|MM|DD|HH|mm/g, t => (map[t] != null ? map[t] : t));
+    }
+    // Excel の Ctrl+; / Ctrl+: 相当。date/time 列は ISO ストレージ（表示は列 format）に従い、
+    // テキスト等の列は todayFormat / nowFormat（既定 'YYYY-MM-DD' / 'HH:MM'）で成形。検証/Undo を通る setValue。
+    _insertDateTime(isTime) {
+      const r = this.active.r, c = this.active.c;
+      if (this._isReadOnly(r, c)) return;
+      const d = new Date(), p2 = n => String(n).padStart(2, '0');
+      let val;
+      if (isTime) {
+        val = this.colType(c) === 'time' ? (p2(d.getHours()) + ':' + p2(d.getMinutes()))   // time 列は保存形式 HH:MM
+                                         : this._fmtDateTime(d, this.nowFormat, true);
+      } else {
+        val = this.colType(c) === 'date' ? (d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate()))   // date 列は ISO 保存（表示は列 format）
+                                         : this._fmtDateTime(d, this.todayFormat, false);
+      }
+      this.setValue(r, c, val);
+    }
+    // Excel の Ctrl+D / Ctrl+R 相当。選択範囲を先頭行/左端列の値で埋める（単一セルなら上/左のセルをコピー）。readOnly はスキップ・1 undo。
+    _fillFrom(dir) {
+      const { r0, r1, c0, c1 } = this.rectRange();
+      const single = (r0 === r1 && c0 === c1);
+      const before = this.snapSel(), changes = [];
+      const put = (r, c, v) => { if (!this._isReadOnly(r, c)) this.setCell(r, c, v, changes); };
+      if (dir === 'down') {
+        if (single) { if (r0 > 0) put(r0, c0, this.data[r0 - 1][c0]); }
+        else { for (let c = c0; c <= c1; c++) { const v = this.data[r0][c]; for (let r = r0 + 1; r <= r1; r++) put(r, c, v); } }
+      } else {
+        if (single) { if (c0 > 0) put(r0, c0, this.data[r0][c0 - 1]); }
+        else { for (let r = r0; r <= r1; r++) { const v = this.data[r][c0]; for (let c = c0 + 1; c <= c1; c++) put(r, c, v); } }
+      }
+      if (changes.length) this.pushCmd(changes, before, this.snapSel(), 'edit');
+    }
 
     // ---- 行/列の挿入・削除（構造変更。Undo に1コマンドで積む） ----
     // 並列配列（columns/colW は疎なことがある）を現在の COLS/ROWS 長に揃えてから splice する。
@@ -3289,6 +3335,9 @@
       if (ctrl && (e.key.toLowerCase() === 'y' || (e.shiftKey && e.key.toLowerCase() === 'z'))) { e.preventDefault(); this.history.redo(); return; }
       if (ctrl && e.key.toLowerCase() === 'c') { e.preventDefault(); this.copy(false); return; }
       if (ctrl && e.key.toLowerCase() === 'x') { e.preventDefault(); this.copy(true); return; }
+      // Excel 入力ショートカット（未バインドキー＝追加的）。文字で判定＝JIS(Ctrl+:) も US(Ctrl+Shift+;) も拾う。
+      if (this.dateShortcuts && ctrl && (e.key === ';' || e.key === ':')) { e.preventDefault(); this._insertDateTime(e.key === ':'); return; }
+      if (this.fillShortcuts && ctrl && !e.shiftKey && (e.key.toLowerCase() === 'd' || e.key.toLowerCase() === 'r')) { e.preventDefault(); this._fillFrom(e.key.toLowerCase() === 'd' ? 'down' : 'right'); return; }
       // Ctrl+V は keydown で拾わず native paste イベントへ委譲（editor の paste リスナが処理）。
       // ここで preventDefault すると paste イベント自体を止めかねないため分岐を置かない。
       if (e.shiftKey && e.key.startsWith('Arrow')) {