@threestarsoftware/tssgrid 0.1.12 → 0.1.14

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [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
+
+### 追加
+- **エディタ系プラグイン6つに型定義 `.d.ts` を同梱（TypeScript ファースト）** — `columns[c].editor` に入れるエディタ工場プラグインを **`import` するだけで型が効く**ように。対象は `tss-combo` / `tss-autocomplete` / `tss-cascade` / `tss-calendar` / `tss-datetime` / `tss-time`。UMD 形（`export =` ＋ `export as namespace`）なので **module import でも `<script>` グローバルでも**型が効く。戻り値は `EditorDef` を満たし、静的メソッド（`TssCombo.codeOf` / `TssCascade.pathFormat`・`pathOf` / `TssDatetime.format`）や単体 `openAt` も型付け。`package.json` の `exports` に6プラグインの `types` エントリを追加（その他の `usePlugin`/`format` 系プラグインは従来どおり untyped＝必要なら5行のアンビエント宣言で補える。README 参照）。コア無改変。
+
 ## [0.1.12] - 2026-09-24
 
 ### 追加

package/README.md

@@ -56,6 +56,18 @@ import '@threestarsoftware/tssgrid/tssgrid.css';
 ```
 **型定義 (`.d.ts`) 同梱**なので TypeScript ではそのまま補完が効きます（APIリファレンス → [tssgrid…/api](https://tssgrid.threestarsoftware.co.jp/api.html)）。
 
+**プラグインの型（TypeScript）**: エディタ系プラグインは **`.d.ts` 同梱で `import` するだけで型が効きます**（`.js` 付きで import）:
+```ts
+import TssCombo from '@threestarsoftware/tssgrid/plugins/tss-combo.js';   // ← 型が効く
+// 対応: tss-combo / tss-autocomplete / tss-cascade / tss-calendar / tss-datetime / tss-time
+columns: [{ data: 'pay', editor: TssCombo({ options: [{ code: '01', label: '現金' }], other: { code: '99', label: 'その他' }, codeField: 'payCode' }) }];
+```
+それ以外のプラグイン（`usePlugin` 系・`format` ヘルパ系）は型定義がまだ無いので、必要なら5行のアンビエント宣言で補えます（`editor.open/close` を持つ戻り値は `EditorDef`）:
+```ts
+import type { EditorDef } from '@threestarsoftware/tssgrid';
+declare function TssXxx(opts: any): EditorDef;   // 未同梱プラグインの暫定宣言
+```
+
 **Node / CommonJS**:
 
 ```js
@@ -669,6 +681,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・ミニグラフ）
 

package/package.json

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

package/plugins/tss-autocomplete.d.ts

@@ -0,0 +1,32 @@
+// TssAutocomplete — 候補サジェスト付きテキスト入力（TssGrid カスタムエディタ）。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssAutocomplete;
+export as namespace TssAutocomplete;
+
+declare function TssAutocomplete(opts: TssAutocomplete.Options): EditorDef;
+
+declare namespace TssAutocomplete {
+  interface SourceCtx { row: any; r: number; c: number; grid: any; }
+
+  interface Options {
+    /** 候補。配列 or `(query, ctx) => string[]`（動的候補）。 */
+    source: string[] | ((query: string, ctx: SourceCtx) => string[]);
+    /** 共有 input に乗る型（既定 true）＝打鍵の1文字目・IME 直打ちが効く。false で自前 input ポップアップ。 */
+    inline?: boolean;
+    /** true=候補から選んだ値のみ許可（既定 false=自由入力可）。 */
+    strict?: boolean;
+    /** この文字数以上で候補を出す（既定 0=開いた時点で全件）。 */
+    minChars?: number;
+    /** 候補表示の最大件数（既定 20）。 */
+    max?: number;
+    /** 照合方法（既定 'includes'）。大文字小文字は無視。 */
+    match?: 'includes' | 'startsWith' | ((item: string, query: string) => boolean);
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '▾'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+}

package/plugins/tss-calendar.d.ts

@@ -0,0 +1,44 @@
+// TssCalendar — 休日対応カレンダー（TssGrid カスタムエディタ／単体ピッカーとしても）。保存値は 'YYYY-MM-DD'。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssCalendar;
+export as namespace TssCalendar;
+
+declare function TssCalendar(opts?: TssCalendar.Options): TssCalendar.Editor;
+
+declare namespace TssCalendar {
+  /** 休日マップ。`'YYYY-MM-DD'` → 名称文字列 or `{name, type?}`。 */
+  type Holidays = Record<string, string | { name: string; type?: string }>;
+
+  interface Options {
+    holidays?: Holidays;
+    /** 週末とみなす曜日（0=日, 6=土。既定 [0,6]）。 */
+    weekend?: number[];
+    /** 曜日ラベル（既定 ['日','月',…,'土']）。 */
+    weekLabels?: string[];
+    /** 月見出し（既定 `y年(m+1)月`）。 */
+    monthLabel?: (year: number, month: number) => string;
+    /** 選択可能範囲（'YYYY-MM-DD'）。 */
+    min?: string;
+    max?: string;
+    /** 年プルダウンの範囲。 */
+    yearMin?: number;
+    yearMax?: number;
+    /** 選択不可にする種別（例 ['holiday','weekend']）。 */
+    disable?: Array<'holiday' | 'weekend' | string>;
+    /** 共有 input に乗る型（既定 true）＝直打ち可・矢印は本体へ。false でフォーカス奪取型。 */
+    inline?: boolean;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '📅'。'' で消す）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /** グリッドの `editor` として使えるほか、単体で `openAt` を呼べる。 */
+  interface Editor extends EditorDef {
+    /** アンカー要素の下に開き、日付選択で `onPick(iso)` を呼ぶ（単体ピッカー用）。 */
+    openAt(anchorEl: Element, isoValue: string, onPick: (iso: string) => void): void;
+  }
+}

package/plugins/tss-cascade.d.ts

@@ -0,0 +1,26 @@
+// TssCascade — 多段（フライアウト）プルダウン（TssGrid カスタムエディタ・ポップアップ型）。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssCascade;
+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[]; }
+
+  interface Options {
+    /** 入れ子の選択肢。 */
+    options: Node[];
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /** 列 format 用: 値 → 「大 / 中 / 小」のパス文字列を返す関数。 */
+  function pathFormat(options: Node[], opts?: { separator?: string }): (value: any) => string;
+  /** 値 → パス文字列（単発）。 */
+  function pathOf(options: Node[], value: any, separator?: string): string;
+}

package/plugins/tss-combo.d.ts

@@ -0,0 +1,37 @@
+// TssCombo — コード付きプルダウン＋「その他」で自由入力（TssGrid カスタムエディタ）。
+// UMD: `import TssCombo from '@threestarsoftware/tssgrid/plugins/tss-combo.js'` でも、<script> タグのグローバル `TssCombo` でも使える。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssCombo;
+export as namespace TssCombo;
+
+declare function TssCombo(opts: TssCombo.Options): EditorDef;
+
+declare namespace TssCombo {
+  /** 選択肢1件。`code`（別名 `value`）と表示 `label`。文字列を渡すと code=label。 */
+  interface Option { code?: string | number; value?: string | number; label?: string; }
+
+  interface Options {
+    /** 選択肢。`{code,label}` か文字列（code=label）の配列。 */
+    options: Array<Option | string>;
+    /** 「その他」を有効化。`true` で `{code:'99', label:'その他'}`。選ぶと入力欄に切替。省略で自由入力なし。 */
+    other?: boolean | Option;
+    /** コードの書き戻し先の列（data キー or 列 index）。省略時はコードを書かず値だけ確定。 */
+    codeField?: string | number;
+    /** その他モードの入力欄プレースホルダ（既定 '自由入力'）。 */
+    otherPlaceholder?: string;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '▾'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  /**
+   * 値 → コードを引く関数を返す（同じ options/other から）。undo/redo・貼付でコードを値に追従させたい時、
+   * `onAfterChange` の中で `grid.setValueRaw(r, コード列, codeOf(grid.getValue(r, 値列)))` のように使う。
+   * 値が選択肢に無ければ other の code、空なら ''。
+   */
+  function codeOf(opts: { options: Array<Option | string>; other?: boolean | Option }): (value: any) => string;
+}

package/plugins/tss-datetime.d.ts

@@ -0,0 +1,42 @@
+// TssDatetime — 日付＋時刻ピッカー（TssGrid カスタムエディタ／単体でも）。保存値は 'YYYY-MM-DDTHH:MM'。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssDatetime;
+export as namespace TssDatetime;
+
+declare function TssDatetime(opts?: TssDatetime.Options): TssDatetime.Editor;
+
+declare namespace TssDatetime {
+  type Holidays = Record<string, string | { name: string; type?: string }>;
+
+  interface Options {
+    holidays?: Holidays;
+    weekend?: number[];
+    weekLabels?: string[];
+    /** 選択可能範囲（'YYYY-MM-DD'）。 */
+    min?: string;
+    max?: string;
+    yearMin?: number;
+    yearMax?: number;
+    /** 分刻み（既定 1）。 */
+    step?: number;
+    /** AM/PM 表示（既定 false=24h）。 */
+    hour12?: boolean;
+    /** 共有 input に乗る型（既定 true）＝直打ち可。false でフォーカス奪取型。 */
+    inline?: boolean;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '📅'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  interface Editor extends EditorDef {
+    /** アンカー要素の下に開き、選択で `onPick('YYYY-MM-DDTHH:MM')` を呼ぶ（単体用）。 */
+    openAt(anchorEl: Element, value: string, onPick: (value: string) => void): void;
+  }
+
+  /** 列 format 用: 保存値 'YYYY-MM-DDTHH:MM' を表示整形。 */
+  function format(value: any, opts?: { hour12?: boolean }): string;
+}

package/plugins/tss-time.d.ts

@@ -0,0 +1,29 @@
+// TssTime — 時/分プルダウン方式の時刻エディタ（TssGrid カスタムエディタ／単体でも）。保存値は 24h 'HH:MM'。
+import { EditorDef } from '../src/tssgrid';
+
+export = TssTime;
+export as namespace TssTime;
+
+declare function TssTime(opts?: TssTime.Options): TssTime.Editor;
+
+declare namespace TssTime {
+  interface Options {
+    /** 分刻み（既定 1）。 */
+    step?: number;
+    /** AM/PM 表示（既定 false=24h）。 */
+    hour12?: boolean;
+    /** 共有 input に乗る型（既定 true）＝直打ち可。false でフォーカス奪取型。 */
+    inline?: boolean;
+    /** シングルクリックで開く（既定 true）。 */
+    openOnClick?: boolean;
+    /** セル右端の目印（既定 '🕐'）。 */
+    icon?: string;
+    /** ポップアップに付ける任意クラス。 */
+    className?: string;
+  }
+
+  interface Editor extends EditorDef {
+    /** アンカー要素の下に開き、選択で `onPick('HH:MM')` を呼ぶ（単体用）。 */
+    openAt(anchorEl: Element, value: string, onPick: (value: string) => void): void;
+  }
+}

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)で後勝ち＝固定列の