@threestarsoftware/tssgrid 0.1.12 → 0.1.13

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "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;
+  }
+}