@threestarsoftware/tssgrid 0.1.31-beta.0 → 0.1.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -1
- package/LICENSE +21 -0
- package/package.json +1 -1
- package/plugins/tss-autocomplete.d.ts +32 -0
- package/plugins/tss-cascade.d.ts +38 -0
- package/plugins/tss-cascade.js +2 -0
- package/plugins/tss-combo.d.ts +37 -0
- package/plugins/tss-datetime.d.ts +42 -0
- package/plugins/tss-hyperlink.d.ts +19 -0
- package/plugins/tss-time.d.ts +29 -0
- package/src/tssgrid.d.ts +540 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,12 @@
|
|
|
3
3
|
TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠(ゆるめ)。
|
|
4
4
|
数値は特記なき限り**自社調べ**(headless Chrome / Windows 11・環境差あり)。
|
|
5
5
|
|
|
6
|
-
## [
|
|
6
|
+
## [0.1.32] - 2026-11-03
|
|
7
|
+
|
|
8
|
+
### 改善(プラグイン)
|
|
9
|
+
- **`tss-cascade`(多段プルダウン)にセル右端の目印 `▾` を追加** — 他のポップアップ型エディタ(`tss-combo`/`tss-autocomplete` は `▾`、`tss-calendar` は `📅`)は EditorDef の `icon` を既定で返していたが、`tss-cascade` だけ返しておらず**選ぶ列だと見た目で分からなかった**。`icon`(既定 `'▾'`/`''` で消す)を追加(`tss-combo` と同じ形)。印を押しても従来どおり多段メニューが開く(`openOnClick`)。描画はコア共通経路(`ed.icon`→`data-ico`+`tg-haspicker`)=**コア無改変**。型 `tss-cascade.d.ts` に `icon?: string`。
|
|
10
|
+
|
|
11
|
+
## [0.1.31] - 2026-10-29
|
|
7
12
|
|
|
8
13
|
### 改善(プラグイン)
|
|
9
14
|
- **`tss-comment` を実機タッチ対応** — これまで吹き出しは**ホバー(`mouseover`)**だけで、スマホ等のタッチ端末では合成 hover 任せ=不安定だった。**タッチのときはタップで吹き出しをトグル**するよう分岐(同じセル再タップ・コメント外タップで閉じる)。マウスは従来どおりホバー(`pointerdown` の `pointerType` で判定)。desktop の挙動は不変。
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 ThreeStarSoftware
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@threestarsoftware/tssgrid",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.32",
|
|
4
4
|
"description": "軽量・ノービルド・日本語IME堅牢な編集グリッド(vanilla JS / 依存なし / MIT)。Excel ライクな入力画面を <script> タグ1本で。",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// TssAutocomplete — 候補サジェスト付きテキスト入力(TssGrid カスタムエディタ)。
|
|
2
|
+
import { EditorDef } from '../src/tssgrid';
|
|
3
|
+
|
|
4
|
+
export = TssAutocomplete;
|
|
5
|
+
export as namespace TssAutocomplete;
|
|
6
|
+
|
|
7
|
+
declare function TssAutocomplete(opts: TssAutocomplete.Options): EditorDef;
|
|
8
|
+
|
|
9
|
+
declare namespace TssAutocomplete {
|
|
10
|
+
interface SourceCtx { row: any; r: number; c: number; grid: any; }
|
|
11
|
+
|
|
12
|
+
interface Options {
|
|
13
|
+
/** 候補。配列 or `(query, ctx) => string[]`(動的候補)。 */
|
|
14
|
+
source: string[] | ((query: string, ctx: SourceCtx) => string[]);
|
|
15
|
+
/** 共有 input に乗る型(既定 true)=打鍵の1文字目・IME 直打ちが効く。false で自前 input ポップアップ。 */
|
|
16
|
+
inline?: boolean;
|
|
17
|
+
/** true=候補から選んだ値のみ許可(既定 false=自由入力可)。 */
|
|
18
|
+
strict?: boolean;
|
|
19
|
+
/** この文字数以上で候補を出す(既定 0=開いた時点で全件)。 */
|
|
20
|
+
minChars?: number;
|
|
21
|
+
/** 候補表示の最大件数(既定 20)。 */
|
|
22
|
+
max?: number;
|
|
23
|
+
/** 照合方法(既定 'includes')。大文字小文字は無視。 */
|
|
24
|
+
match?: 'includes' | 'startsWith' | ((item: string, query: string) => boolean);
|
|
25
|
+
/** シングルクリックで開く(既定 true)。 */
|
|
26
|
+
openOnClick?: boolean;
|
|
27
|
+
/** セル右端の目印(既定 '▾')。 */
|
|
28
|
+
icon?: string;
|
|
29
|
+
/** ポップアップに付ける任意クラス。 */
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// TssCascade — 多段(フライアウト)プルダウン(TssGrid カスタムエディタ・ポップアップ型)。
|
|
2
|
+
import { EditorDef } from '../src/tssgrid';
|
|
3
|
+
|
|
4
|
+
export = TssCascade;
|
|
5
|
+
export as namespace TssCascade;
|
|
6
|
+
|
|
7
|
+
declare function TssCascade(opts: TssCascade.Options): EditorDef;
|
|
8
|
+
|
|
9
|
+
declare namespace TssCascade {
|
|
10
|
+
/** ノード。枝は `children`、葉は `value`(未指定なら `label` を保存)。
|
|
11
|
+
* `other:true` の葉は「その他」=選ぶと入力欄に切替わり、打った文字を値に確定する。
|
|
12
|
+
* その時 codeField へ書くコードは、その「その他」ノード自身の `value`(枝ごとに変えられる)。 */
|
|
13
|
+
interface Node { label: string; value?: string | number; children?: Node[]; other?: boolean; }
|
|
14
|
+
|
|
15
|
+
interface Options {
|
|
16
|
+
/** 入れ子の選択肢。 */
|
|
17
|
+
options: Node[];
|
|
18
|
+
/** コードの書き戻し先の列(data キー or 列 index)。
|
|
19
|
+
* 指定時: 値セル=普通の葉はパス「大 / 中 / 小」・その他は打った文字/codeField=葉(その他ノード)の value。
|
|
20
|
+
* 省略時: 葉の value を値セルに保存(従来・表示は pathFormat)。 */
|
|
21
|
+
codeField?: string | number;
|
|
22
|
+
/** 値セルに入れるパスの区切り(既定 ' / ')。pathFormat の separator と揃えると良い。 */
|
|
23
|
+
separator?: string;
|
|
24
|
+
/** 「その他」入力欄のプレースホルダ(既定 '自由入力')。 */
|
|
25
|
+
otherPlaceholder?: string;
|
|
26
|
+
/** シングルクリックで開く(既定 true)。 */
|
|
27
|
+
openOnClick?: boolean;
|
|
28
|
+
/** セル右の目印(既定 '▾'/'' で消す)。 */
|
|
29
|
+
icon?: string;
|
|
30
|
+
/** ポップアップに付ける任意クラス。 */
|
|
31
|
+
className?: string;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/** 列 format 用: 値 → 「大 / 中 / 小」のパス文字列を返す関数。 */
|
|
35
|
+
function pathFormat(options: Node[], opts?: { separator?: string }): (value: any) => string;
|
|
36
|
+
/** 値 → パス文字列(単発)。 */
|
|
37
|
+
function pathOf(options: Node[], value: any, separator?: string): string;
|
|
38
|
+
}
|
package/plugins/tss-cascade.js
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
* separator : 値セルに入れるパスの区切り(既定 ' / ')。pathFormat と合わせると良い。
|
|
40
40
|
* otherPlaceholder : 「その他」入力欄のプレースホルダ(既定 '自由入力')。
|
|
41
41
|
* openOnClick : 既定 true(プルダウン同様シングルクリックで開く)。
|
|
42
|
+
* icon : セル右の目印(既定 '▾'/'' で消す)。
|
|
42
43
|
* className : ポップアップに付ける任意クラス。
|
|
43
44
|
* 静的:
|
|
44
45
|
* TssCascade.pathFormat(options, { separator }) => (value)=>string // 列 format 用(モード1の表示)
|
|
@@ -194,6 +195,7 @@
|
|
|
194
195
|
|
|
195
196
|
return {
|
|
196
197
|
openOnClick: opts.openOnClick !== false,
|
|
198
|
+
icon: opts.icon != null ? opts.icon : '▾',
|
|
197
199
|
open: function (ctx) {
|
|
198
200
|
ctxRef = ctx; done = false;
|
|
199
201
|
openPanel(roots, 0, ctx.td.getBoundingClientRect());
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// TssCombo — コード付きプルダウン+「その他」で自由入力(TssGrid カスタムエディタ)。
|
|
2
|
+
// UMD: `import TssCombo from '@threestarsoftware/tssgrid/plugins/tss-combo.js'` でも、<script> タグのグローバル `TssCombo` でも使える。
|
|
3
|
+
import { EditorDef } from '../src/tssgrid';
|
|
4
|
+
|
|
5
|
+
export = TssCombo;
|
|
6
|
+
export as namespace TssCombo;
|
|
7
|
+
|
|
8
|
+
declare function TssCombo(opts: TssCombo.Options): EditorDef;
|
|
9
|
+
|
|
10
|
+
declare namespace TssCombo {
|
|
11
|
+
/** 選択肢1件。`code`(別名 `value`)と表示 `label`。文字列を渡すと code=label。 */
|
|
12
|
+
interface Option { code?: string | number; value?: string | number; label?: string; }
|
|
13
|
+
|
|
14
|
+
interface Options {
|
|
15
|
+
/** 選択肢。`{code,label}` か文字列(code=label)の配列。 */
|
|
16
|
+
options: Array<Option | string>;
|
|
17
|
+
/** 「その他」を有効化。`true` で `{code:'99', label:'その他'}`。選ぶと入力欄に切替。省略で自由入力なし。 */
|
|
18
|
+
other?: boolean | Option;
|
|
19
|
+
/** コードの書き戻し先の列(data キー or 列 index)。省略時はコードを書かず値だけ確定。 */
|
|
20
|
+
codeField?: string | number;
|
|
21
|
+
/** その他モードの入力欄プレースホルダ(既定 '自由入力')。 */
|
|
22
|
+
otherPlaceholder?: string;
|
|
23
|
+
/** シングルクリックで開く(既定 true)。 */
|
|
24
|
+
openOnClick?: boolean;
|
|
25
|
+
/** セル右端の目印(既定 '▾')。 */
|
|
26
|
+
icon?: string;
|
|
27
|
+
/** ポップアップに付ける任意クラス。 */
|
|
28
|
+
className?: string;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* 値 → コードを引く関数を返す(同じ options/other から)。undo/redo・貼付でコードを値に追従させたい時、
|
|
33
|
+
* `onAfterChange` の中で `grid.setValueRaw(r, コード列, codeOf(grid.getValue(r, 値列)))` のように使う。
|
|
34
|
+
* 値が選択肢に無ければ other の code、空なら ''。
|
|
35
|
+
*/
|
|
36
|
+
function codeOf(opts: { options: Array<Option | string>; other?: boolean | Option }): (value: any) => string;
|
|
37
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// TssDatetime — 日付+時刻ピッカー(TssGrid カスタムエディタ/単体でも)。保存値は 'YYYY-MM-DDTHH:MM'。
|
|
2
|
+
import { EditorDef } from '../src/tssgrid';
|
|
3
|
+
|
|
4
|
+
export = TssDatetime;
|
|
5
|
+
export as namespace TssDatetime;
|
|
6
|
+
|
|
7
|
+
declare function TssDatetime(opts?: TssDatetime.Options): TssDatetime.Editor;
|
|
8
|
+
|
|
9
|
+
declare namespace TssDatetime {
|
|
10
|
+
type Holidays = Record<string, string | { name: string; type?: string }>;
|
|
11
|
+
|
|
12
|
+
interface Options {
|
|
13
|
+
holidays?: Holidays;
|
|
14
|
+
weekend?: number[];
|
|
15
|
+
weekLabels?: string[];
|
|
16
|
+
/** 選択可能範囲('YYYY-MM-DD')。 */
|
|
17
|
+
min?: string;
|
|
18
|
+
max?: string;
|
|
19
|
+
yearMin?: number;
|
|
20
|
+
yearMax?: number;
|
|
21
|
+
/** 分刻み(既定 1)。 */
|
|
22
|
+
step?: number;
|
|
23
|
+
/** AM/PM 表示(既定 false=24h)。 */
|
|
24
|
+
hour12?: boolean;
|
|
25
|
+
/** 共有 input に乗る型(既定 true)=直打ち可。false でフォーカス奪取型。 */
|
|
26
|
+
inline?: boolean;
|
|
27
|
+
/** シングルクリックで開く(既定 true)。 */
|
|
28
|
+
openOnClick?: boolean;
|
|
29
|
+
/** セル右端の目印(既定 '📅')。 */
|
|
30
|
+
icon?: string;
|
|
31
|
+
/** ポップアップに付ける任意クラス。 */
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
interface Editor extends EditorDef {
|
|
36
|
+
/** アンカー要素の下に開き、選択で `onPick('YYYY-MM-DDTHH:MM')` を呼ぶ(単体用)。 */
|
|
37
|
+
openAt(anchorEl: Element, value: string, onPick: (value: string) => void): void;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/** 列 format 用: 保存値 'YYYY-MM-DDTHH:MM' を表示整形。 */
|
|
41
|
+
function format(value: any, opts?: { hour12?: boolean }): string;
|
|
42
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// TssHyperlink — セル内ハイパーリンク(format ヘルパ)。columns[c].html:true + format に渡す。
|
|
2
|
+
export = TssHyperlink;
|
|
3
|
+
export as namespace TssHyperlink;
|
|
4
|
+
|
|
5
|
+
/** 値 "表示テキスト|URL"(または URL 単体)を安全なリンク HTML に変換する format 関数を返す。 */
|
|
6
|
+
declare function TssHyperlink(opts?: TssHyperlink.Options): (value: any) => string;
|
|
7
|
+
|
|
8
|
+
declare namespace TssHyperlink {
|
|
9
|
+
interface Options {
|
|
10
|
+
/** 表示テキストと URL の区切り(既定 '|')。 */
|
|
11
|
+
separator?: string;
|
|
12
|
+
/** リンクの target(既定 '_blank')。 */
|
|
13
|
+
target?: string;
|
|
14
|
+
/** <a> に付ける任意クラス(既定 'tss-link')。 */
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
/** URL を安全化(http/https/mailto/tel のみ許可・スキーム無しは https 補完・許可外は null)。 */
|
|
18
|
+
function safeUrl(u: any): string | null;
|
|
19
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// TssTime — 時/分プルダウン方式の時刻エディタ(TssGrid カスタムエディタ/単体でも)。保存値は 24h 'HH:MM'。
|
|
2
|
+
import { EditorDef } from '../src/tssgrid';
|
|
3
|
+
|
|
4
|
+
export = TssTime;
|
|
5
|
+
export as namespace TssTime;
|
|
6
|
+
|
|
7
|
+
declare function TssTime(opts?: TssTime.Options): TssTime.Editor;
|
|
8
|
+
|
|
9
|
+
declare namespace TssTime {
|
|
10
|
+
interface Options {
|
|
11
|
+
/** 分刻み(既定 1)。 */
|
|
12
|
+
step?: number;
|
|
13
|
+
/** AM/PM 表示(既定 false=24h)。 */
|
|
14
|
+
hour12?: boolean;
|
|
15
|
+
/** 共有 input に乗る型(既定 true)=直打ち可。false でフォーカス奪取型。 */
|
|
16
|
+
inline?: boolean;
|
|
17
|
+
/** シングルクリックで開く(既定 true)。 */
|
|
18
|
+
openOnClick?: boolean;
|
|
19
|
+
/** セル右端の目印(既定 '🕐')。 */
|
|
20
|
+
icon?: string;
|
|
21
|
+
/** ポップアップに付ける任意クラス。 */
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface Editor extends EditorDef {
|
|
26
|
+
/** アンカー要素の下に開き、選択で `onPick('HH:MM')` を呼ぶ(単体用)。 */
|
|
27
|
+
openAt(anchorEl: Element, value: string, onPick: (value: string) => void): void;
|
|
28
|
+
}
|
|
29
|
+
}
|
package/src/tssgrid.d.ts
ADDED
|
@@ -0,0 +1,540 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// TssGrid 型定義(公開APIの契約)
|
|
3
|
+
// - これが「外から呼べるもの」の正本。エディタ補完にはここに宣言したものだけ出る
|
|
4
|
+
// =内部メソッド(setCell / pushCmd / place など)は候補に出ず、自然に守られる。
|
|
5
|
+
// - 低レベルだが公開しているメソッドは JSDoc に「通常は○○を推奨」と明記(逃げ道は塞がない)。
|
|
6
|
+
// - v1 ドラフト。実装と差異を見つけたら本ファイルを正として揃える/直す。
|
|
7
|
+
// - 使い方:
|
|
8
|
+
// <script src="tssgrid.js"> 読み込み時 … グローバル TssGrid / HistoryManager に型が付く
|
|
9
|
+
// import { TssGrid } from 'tssgrid' … ESM entry 整備後(§npm化)に有効
|
|
10
|
+
// =============================================================================
|
|
11
|
+
|
|
12
|
+
export type MoveDir = 'down' | 'up' | 'right' | 'left' | 'none';
|
|
13
|
+
export type CellType = 'text' | 'number' | 'date' | 'time' | 'dropdown' | 'checkbox';
|
|
14
|
+
export type ChangeSource = 'edit' | 'paste' | 'fill' | 'delete' | 'undo' | 'redo';
|
|
15
|
+
|
|
16
|
+
/** 1つの値変更(onBeforeChange / onAfterChange の配列要素)。newValue を書き換えると整形確定。 */
|
|
17
|
+
export interface ChangeItem {
|
|
18
|
+
r: number;
|
|
19
|
+
c: number;
|
|
20
|
+
oldValue: any;
|
|
21
|
+
newValue: any;
|
|
22
|
+
source: ChangeSource;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/** 選択範囲。r0/c0=開始、r1/c1=終了(昇順とは限らない)。 */
|
|
26
|
+
export interface SelectionRange { r0: number; c0: number; r1: number; c1: number; }
|
|
27
|
+
export interface CellCoord { r: number; c: number; }
|
|
28
|
+
/** cellClass/cellStyle(列版)が受け取る第2引数。row=その行の値配列, src=元レコード(object モード時・非表示フィールドも見える/配列モードは null)。
|
|
29
|
+
* src は `any`=利用側が自分の行型(`src: MyRow`)でそのまま受けられる(`Record<string,any>|null` だと二重キャストを強いるため)。 */
|
|
30
|
+
export interface CellClassCtx { r: number; c: number; row: any[]; src: any; }
|
|
31
|
+
/** cellClass/cellStyle の戻り値のクラス。文字列(空白区切り可)/配列/null 等(=クラス無し)。 */
|
|
32
|
+
export type ClassValue = string | string[] | null | undefined | false;
|
|
33
|
+
/** cellStyle の戻り値。CSS プロパティのオブジェクト(`{'background':'#fde','--pct':'42%'}`)か文字列(`'background:#fde;--pct:42%'`)。 */
|
|
34
|
+
export type StyleValue = string | Partial<CSSStyleDeclaration> | Record<string, string> | null | undefined;
|
|
35
|
+
export interface SelectionInfo { range: SelectionRange; active: CellCoord; extent: CellCoord; }
|
|
36
|
+
|
|
37
|
+
/** validator が弾いたセル(onInvalid / getInvalidCells)。 */
|
|
38
|
+
export interface Rejection { r: number; c: number; value: any; code?: string; level?: string; message?: string; }
|
|
39
|
+
/** 読み取り専用セルへの変更を弾いた時(onReadOnly)。 */
|
|
40
|
+
export interface ReadOnlyBlock { r: number; c: number; value: any; }
|
|
41
|
+
|
|
42
|
+
/** 行/列の挿入・削除の情報(onStructureChange / onBeforeStructureChange)。 */
|
|
43
|
+
export interface StructureInfo { type: 'insertRow' | 'insertRows' | 'deleteRows' | 'insertCol' | 'deleteCols'; undo?: boolean; [k: string]: any; }
|
|
44
|
+
|
|
45
|
+
/** validator の戻り値: true=OK / 文字列=エラー文 / オブジェクト=メッセージカタログ解決用。 */
|
|
46
|
+
export type ValidatorResult = true | string | { code: string; params?: Record<string, any>; level?: string };
|
|
47
|
+
|
|
48
|
+
/** 列定義(options.columns[c])。`data` は data オブジェクトのキー(または列 index)。 */
|
|
49
|
+
export interface ColumnDef {
|
|
50
|
+
/** data オブジェクトのキー。配列データなら省略可(位置で対応)。 */
|
|
51
|
+
data?: string | number;
|
|
52
|
+
/** ヘッダ見出し(headers より優先)。 */
|
|
53
|
+
title?: string;
|
|
54
|
+
/** セルタイプ。既定 'text'。 */
|
|
55
|
+
type?: CellType;
|
|
56
|
+
/** dropdown の選択肢。関数を渡すと**行ごとに異なる依存ドロップダウン**(例: 都道府県→市区町村)。
|
|
57
|
+
* `(r, row)=>[…]` の row はその行の値配列(`grid.data[r]`)。静的配列は全行共通(後方互換)。 */
|
|
58
|
+
options?: Array<string | { value: string; label?: string }>
|
|
59
|
+
| ((r: number, row: any[]) => Array<string | { value: string; label?: string }>);
|
|
60
|
+
/** 列ごとの初期幅(px)。列定義に同居=並べ替え/コピペで幅が追従。 */
|
|
61
|
+
width?: number;
|
|
62
|
+
/** false でこの列だけリサイズ禁止。 */
|
|
63
|
+
resizable?: boolean;
|
|
64
|
+
/** 列既定の水平/垂直整列。 */
|
|
65
|
+
align?: 'left' | 'center' | 'right';
|
|
66
|
+
valign?: 'top' | 'middle' | 'bottom';
|
|
67
|
+
/** 列単位の読み取り専用。関数でセル単位判定も可。 */
|
|
68
|
+
readOnly?: boolean | ((value: any, cell: CellCoord) => boolean);
|
|
69
|
+
/** 入力検証。編集/貼付/フィルの全経路に効く。 */
|
|
70
|
+
validator?: (value: any, cell: CellCoord) => ValidatorResult;
|
|
71
|
+
/** カスタム編集UI(薄いオブジェクト契約 or それを返す関数)。 */
|
|
72
|
+
editor?: EditorDef | (() => EditorDef);
|
|
73
|
+
/** 入力の正規化(保存値へ変換)。 */
|
|
74
|
+
parse?: (input: string, cell: CellCoord) => any;
|
|
75
|
+
/** 表示の整形(保存値→表示)。文字列 or 宣言的 CellFormat or 関数。
|
|
76
|
+
* 関数は `(value, { r, c }, row)`=第3引数 `row` はその行の値配列(`grid.data[r]`・options と同形)。
|
|
77
|
+
* html:true 併用でセル内にボタン/アイコン等の HTML を描ける(空セルでも実行される)。 */
|
|
78
|
+
format?: string | object | ((value: any, cell: CellCoord, row: any[]) => string);
|
|
79
|
+
/** 数値型: 千区切り表示。 */
|
|
80
|
+
thousands?: boolean;
|
|
81
|
+
/** 数値型: 接頭辞(例 '¥')。 */
|
|
82
|
+
prefix?: string;
|
|
83
|
+
/** 値/行を見てセルに付与する CSS クラス(条件付き書式)。**引数は `(value, { r, c, row, src })`**(第1引数がそのセルの値)。
|
|
84
|
+
* *表全体版は `TssGridOptions.cellClass`(引数順が違う: `(r, c, value, row, src)`)。 */
|
|
85
|
+
cellClass?: (value: any, cell: CellClassCtx) => ClassValue;
|
|
86
|
+
/** セル単位のインラインスタイル(連続色・データバー等)。**引数は `(value, { r, c, row, src })`**。 */
|
|
87
|
+
cellStyle?: (value: any, cell: CellClassCtx) => StyleValue;
|
|
88
|
+
/** true で表示だけ生HTML(値はテキスト保存のまま)。 */
|
|
89
|
+
html?: boolean;
|
|
90
|
+
/** 列単位の折り返し。 */
|
|
91
|
+
wordWrap?: boolean;
|
|
92
|
+
/** 複数行(改行)入力を有効化。編集は隠し textarea(IME 直打ち対応)、表示は改行保持(pre-wrap)。行高は自動で伸びないので rowHeights 等で確保する。 */
|
|
93
|
+
multiline?: boolean;
|
|
94
|
+
/** 空セルの薄いヒント文字。 */
|
|
95
|
+
placeholder?: string;
|
|
96
|
+
[k: string]: any;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/** new TssGrid(container, options) のオプション。 */
|
|
100
|
+
export interface TssGridOptions {
|
|
101
|
+
headers?: string[];
|
|
102
|
+
/** 初期データ。2次元配列 or オブジェクト配列。 */
|
|
103
|
+
data?: any[][] | Record<string, any>[];
|
|
104
|
+
/** 渡すと複数グリッドで Undo を共有。 */
|
|
105
|
+
history?: HistoryManager;
|
|
106
|
+
name?: string;
|
|
107
|
+
showDump?: boolean;
|
|
108
|
+
/** Enter 確定後の移動方向(既定 'down')。Shift で逆。実行時に書換可。 */
|
|
109
|
+
enterMoves?: MoveDir;
|
|
110
|
+
/** Tab 確定後の移動方向(既定 'right')。Shift で逆。実行時に書換可。 */
|
|
111
|
+
tabMoves?: MoveDir;
|
|
112
|
+
initialCell?: [number, number] | { r: number; c: number | string };
|
|
113
|
+
/** 入力フロー制御。Enter/Tab の移動先を上書き(null で既定方向)。入力セルだけ巡回できる。 */
|
|
114
|
+
nextCell?: (a: { r: number; c: number; key: string; shift: boolean }) => { r: number; c: number } | null;
|
|
115
|
+
columns?: ColumnDef[];
|
|
116
|
+
/** 表全体の条件付きクラス(全セルで呼ばれる)。**引数は `(r, c, value, row, src)`**(先頭が行/列番号・列版と順序が違う)。
|
|
117
|
+
* `row`=その行の値配列, `src`=元レコード(object モード時・非表示フィールドも見える)。行に色を付けたいなら `rowClass` の方が簡単。 */
|
|
118
|
+
cellClass?: (r: number, c: number, value: any, row: any[], src: any) => ClassValue;
|
|
119
|
+
/** 表全体のセル単位インラインスタイル。**引数は `(r, c, value, row, src)`**。返り値は CSS オブジェクト or 文字列。 */
|
|
120
|
+
cellStyle?: (r: number, c: number, value: any, row: any[], src: any) => StyleValue;
|
|
121
|
+
/** 行ごとに `<tr>` へ付与する CSS クラス(**行に色を付けるならこれ**)。`(r, row, src)` で呼ばれ、文字列/配列を返す。
|
|
122
|
+
* 編集でセルが再描画されると即追従。CSS は `.tssgrid tr.クラス > td { … }` のように行単位で当てる。 */
|
|
123
|
+
rowClass?: (r: number, row: any[], src: any) => ClassValue;
|
|
124
|
+
/** 検証NG時。'revert'=元に戻す / 'keep'=赤く警告して残す。 */
|
|
125
|
+
invalidMode?: 'revert' | 'keep';
|
|
126
|
+
invalidTitle?: boolean;
|
|
127
|
+
/** エラーの共通メッセージカタログ。 */
|
|
128
|
+
messages?: Record<string, any> | ((info: { code: string; params?: any; level?: string }) => string);
|
|
129
|
+
pasteOverflow?: 'clip' | 'error';
|
|
130
|
+
/** 貼付元の行数がグリッド行数を超える時、不足分を insertRows で一括生成してから貼る(既定 false=従来のクランプ)。行生成+値貼付は1回の undo で戻る。maxRows 上限内・超過分は pasteOverflow に従う。 */
|
|
131
|
+
pasteAutoGrow?: boolean;
|
|
132
|
+
colWidths?: number[] | Record<string, number>;
|
|
133
|
+
rowHeights?: number[] | Record<string, number>;
|
|
134
|
+
defaultColWidth?: number;
|
|
135
|
+
defaultRowHeight?: number;
|
|
136
|
+
minColWidth?: number;
|
|
137
|
+
minRowHeight?: number;
|
|
138
|
+
resizeMode?: 'preview' | 'live';
|
|
139
|
+
/** 左から固定する列数。freezeCols(n) でも変更可。 */
|
|
140
|
+
frozenCols?: number;
|
|
141
|
+
/** 上から固定する行数。freezeRows(n) でも変更可。frozenCols 併用で四隅固定。 */
|
|
142
|
+
frozenRows?: number;
|
|
143
|
+
/** ヘッダ結合(複数段見出し)。最下段がリーフ=実列。 */
|
|
144
|
+
nestedHeaders?: Array<Array<string | { label: string; colspan?: number }>>;
|
|
145
|
+
width?: number | string;
|
|
146
|
+
height?: number | string;
|
|
147
|
+
resizeCols?: boolean;
|
|
148
|
+
resizeRows?: boolean;
|
|
149
|
+
/** false で選択カーソルを非表示(表示専用グリッド向け・内部選択は保持)。 */
|
|
150
|
+
cursor?: boolean;
|
|
151
|
+
stretchH?: 'none' | 'last' | 'all';
|
|
152
|
+
rowHeaders?: boolean;
|
|
153
|
+
/** 行番号列の幅(px)。既定 40。大量行で桁数が増える時に広げる。 */
|
|
154
|
+
rowHeaderWidth?: number;
|
|
155
|
+
/** 行ヘッダの表示内容。未指定=行番号(r+1) / false=数字なし(空) / (r)=>文字列=カスタム表示。 */
|
|
156
|
+
rowHeaderLabel?: false | ((r: number) => string | number);
|
|
157
|
+
/** 行のドラッグ並べ替え。true=行ヘッダーセルの ⠿ アイコンを掴んで移動 / 'header'=行ヘッダーセル全体が移動ハンドル(クリック=選択/ドラッグ=移動)。 */
|
|
158
|
+
rowReorder?: boolean | 'header';
|
|
159
|
+
/** 行ヘッダーの ⠿ マークの位置。'before'=番号の前(既定)/ 'after'=番号の後 / false=マークを出さない。 */
|
|
160
|
+
rowReorderMark?: 'before' | 'after' | false;
|
|
161
|
+
/** 右端に非データの「削除列」(🗑)を1列出す。既定 false。クリックで deleteRows(右クリック→行を削除と同一経路・1 undo で復活)。
|
|
162
|
+
* 最後の1行(0行にはできない)は削除でなく「中身クリア(行は残す)」=🗑 は無効にならず内容だけ空に(readOnly はスキップ・1 undo で復活)。
|
|
163
|
+
* minRows>1 のロック時は下限で🗑 を無効表示(削除もクリアもしない)。allowDeleteRows:false なら列ごと出さない。
|
|
164
|
+
* getRows/getData/toCSV・列インデックス・列選択/リサイズ/reorder の対象外。 */
|
|
165
|
+
rowDelete?: boolean;
|
|
166
|
+
/** 削除列の幅(px)。既定 36。 */
|
|
167
|
+
rowDeleteWidth?: number;
|
|
168
|
+
/** 仮想スクロール(固定行高ウィンドウイング)。大量行を可視窓だけ描画。true か { buffer:窓上下バッファ行数(既定6) }。
|
|
169
|
+
* 制約(v1): 行高一定/固定行列・折り返し・セル結合は非対応(指定時は自動無効化)。 */
|
|
170
|
+
virtual?: boolean | { buffer?: number };
|
|
171
|
+
colHeaders?: boolean;
|
|
172
|
+
hiddenColumns?: number[];
|
|
173
|
+
wordWrap?: boolean;
|
|
174
|
+
/** multiline 列の Enter 挙動。'commit'(既定・Excel風): Enter=確定 / Alt+Enter=改行。'newline'(メモ帳風): Enter=改行 / Ctrl+Enter=確定。 */
|
|
175
|
+
multilineEnter?: 'commit' | 'newline';
|
|
176
|
+
/** multiline セル右上の「複数行」ヒント表示(既定 true)。色は CSS 変数 --tg-ml-mark。false で非表示。 */
|
|
177
|
+
multilineMark?: boolean;
|
|
178
|
+
/** multiline 編集時に伸びる箱の最大行数(既定 10)。超えた分はボックス内スクロール。ビューポート/wrap を超える時はそちらが優先。 */
|
|
179
|
+
multilineEditMaxLines?: number;
|
|
180
|
+
placeholder?: string;
|
|
181
|
+
className?: string;
|
|
182
|
+
/** false でフィル完全OFF。詳細指定も可。 */
|
|
183
|
+
fillHandle?: boolean | { direction?: 'vertical' | 'horizontal' | 'both'; autoInsertRow?: boolean };
|
|
184
|
+
autoColumnSize?: boolean | number;
|
|
185
|
+
copyPaste?: boolean;
|
|
186
|
+
/** 共有エディタへのブラウザ自動入力(Chrome の「ポイントカード/住所/支払い」等)を強めに抑止する。既定 false。
|
|
187
|
+
* 通常は name + autocomplete='off' で抑止するが、Chrome は loyalty/payment 系で 'off' を無視することがある。
|
|
188
|
+
* true にすると autocomplete='new-password' に切り替えて確実に止める(副作用として環境により鍵アイコンや生成PW提案が出る場合あり=opt-in)。
|
|
189
|
+
* 周囲に自前のラベル付き `<input>`(フォーム塊)を並べる埋め込み画面で有効。 */
|
|
190
|
+
suppressAutofill?: boolean;
|
|
191
|
+
minSpareRows?: number;
|
|
192
|
+
autoWrapRow?: boolean;
|
|
193
|
+
autoWrapCol?: boolean;
|
|
194
|
+
minRows?: number;
|
|
195
|
+
maxRows?: number;
|
|
196
|
+
minCols?: number;
|
|
197
|
+
maxCols?: number;
|
|
198
|
+
/** グリッド全体を読み取り専用(ビューア用途)。 */
|
|
199
|
+
readOnly?: boolean;
|
|
200
|
+
/** 右クリックメニュー。true=既定 / false=無効 / 配列 or {items} =構成(組込キー文字列+カスタム MenuItem)。 */
|
|
201
|
+
contextMenu?: boolean | Array<string | MenuItem> | { items: Array<string | MenuItem> };
|
|
202
|
+
/** Ctrl+ヘッダで行/列を飛び飛び複数選択(既定 true)。false で Ctrl+クリックは単一選択に戻る。 */
|
|
203
|
+
disjointSelect?: boolean;
|
|
204
|
+
allowInsertRows?: boolean;
|
|
205
|
+
allowDeleteRows?: boolean;
|
|
206
|
+
allowInsertCols?: boolean;
|
|
207
|
+
allowDeleteCols?: boolean;
|
|
208
|
+
shortcuts?: any[];
|
|
209
|
+
/** 組込ショートカット Ctrl+;(今日)/ Ctrl+:(現在時刻)を有効化(既定 true)。 */
|
|
210
|
+
dateShortcuts?: boolean;
|
|
211
|
+
/** 組込ショートカット Ctrl+D(上をコピー=fill down)/ Ctrl+R(左をコピー=fill right)を有効化(既定 true)。 */
|
|
212
|
+
fillShortcuts?: boolean;
|
|
213
|
+
/** Ctrl+; が「date 型でない列」に入れる日付形式(既定 'YYYY-MM-DD')。トークン YYYY/MM/DD、または (d:Date)=>string。date 列は列の仕組み(ISO 保存+列 format 表示)に従う。 */
|
|
214
|
+
todayFormat?: string | ((d: Date) => string);
|
|
215
|
+
/** Ctrl+: が「time 型でない列」に入れる時刻形式(既定 'HH:MM')。トークン HH/mm、または (d:Date)=>string。time 列は 'HH:MM' 保存。 */
|
|
216
|
+
nowFormat?: string | ((d: Date) => string);
|
|
217
|
+
/** プラグイン(関数 or 登録名)。init(grid) で初期化。 */
|
|
218
|
+
plugins?: any[];
|
|
219
|
+
|
|
220
|
+
// ---- イベント / コールバック -------------------------------------------
|
|
221
|
+
/** 確定の直前。検証・自動整形。false で全取消、change.newValue 書換で整形。 */
|
|
222
|
+
onBeforeChange?: (changes: ChangeItem[], source: ChangeSource) => boolean | void;
|
|
223
|
+
/** 確定の直後(undo/redo 含む)。保存・再計算に。 */
|
|
224
|
+
onAfterChange?: (changes: ChangeItem[], source: ChangeSource) => void;
|
|
225
|
+
onEditStart?: (info: { r: number; c: number; value: any }) => void;
|
|
226
|
+
onEditEnd?: (info: { r: number; c: number; oldValue: any; newValue: any; canceled: boolean }) => void;
|
|
227
|
+
onSelectionChange?: (info: SelectionInfo) => void;
|
|
228
|
+
onBeforeSelectionChange?: (info: SelectionInfo) => boolean | void;
|
|
229
|
+
onBeforePaste?: (data: string[][]) => boolean | string[][] | void;
|
|
230
|
+
onAfterPaste?: (data: string[][], info: { range: SelectionRange }) => void;
|
|
231
|
+
onBeforeCopy?: (data: string[][], info: { range: SelectionRange }) => boolean | string[][] | void;
|
|
232
|
+
onBeforeCut?: (data: string[][], info: { range: SelectionRange }) => boolean | string[][] | void;
|
|
233
|
+
onAfterCopy?: (data: string[][], info: { range: SelectionRange; cut: boolean }) => void;
|
|
234
|
+
onBeforeStructureChange?: (info: StructureInfo) => boolean | void;
|
|
235
|
+
onStructureChange?: (info: StructureInfo) => void;
|
|
236
|
+
/** 遅延ロード(push): 描画窓が変わった時に呼ぶ (start,end)。未取得(PENDING)行を fillRows で埋めるトリガ。 */
|
|
237
|
+
onViewportChange?: (start: number, end: number) => void;
|
|
238
|
+
/** 遅延ロード(push): dataComplete=false で sort/filter 要求が来た時に呼ぶ。エンジンはローカル計算せず、これで通知+パージ=プラグインがサーバ側で並替/絞込して setRowCount+fillRows し直す。 */
|
|
239
|
+
onSortFilterChange?: (state: { type: 'sort' | 'filter'; sort?: any; filter?: any }) => void;
|
|
240
|
+
onBeforeAutofill?: (src: SelectionRange, target: SelectionRange) => boolean | void;
|
|
241
|
+
onAfterAutofill?: (src: SelectionRange, target: SelectionRange) => void;
|
|
242
|
+
onBeforeKeyDown?: (e: KeyboardEvent) => boolean | void;
|
|
243
|
+
onHeaderClick?: (c: number, e: MouseEvent) => boolean | void;
|
|
244
|
+
/** 各列ヘッダ th の生成後に呼ぶ(再描画毎に自動で再実行)。ソートアイコン等の要素差し込み用。 */
|
|
245
|
+
onHeaderRender?: (th: HTMLTableCellElement, c: number) => void;
|
|
246
|
+
onInvalid?: (rejections: Rejection[], source: ChangeSource) => void;
|
|
247
|
+
onReadOnly?: (blocked: ReadOnlyBlock[], source: ChangeSource) => void;
|
|
248
|
+
onChange?: (grid: TssGrid) => void;
|
|
249
|
+
onPasteOverflow?: (info: { anchor: CellCoord; height: number; width: number; rows: number; cols: number; overRows: number; overCols: number }) => void;
|
|
250
|
+
|
|
251
|
+
[k: string]: any;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
export interface CsvOptions {
|
|
255
|
+
headers?: boolean; formatted?: boolean; skipEmpty?: boolean; eol?: string;
|
|
256
|
+
/** CSV数式インジェクション無害化(既定 true)。=@+- 始まりの非数値セルを ' で保護。生値が要る用途は false。 */
|
|
257
|
+
sanitizeFormula?: boolean;
|
|
258
|
+
delimiter?: string; [k: string]: any;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/** カスタム編集UIが `open` で受け取る ctx。確定は commit=本体の関所(検証/整形/readOnly/履歴)を通る。 */
|
|
262
|
+
export interface EditorContext {
|
|
263
|
+
grid: TssGrid; r: number; c: number; value: any; td: HTMLTableCellElement | null;
|
|
264
|
+
commit(value?: any): void; cancel(): void;
|
|
265
|
+
/** inline エディタのみ: true。 */
|
|
266
|
+
inline?: boolean;
|
|
267
|
+
/** inline エディタのみ: 打鍵/IME が入る本体の共有 input(読み取り・listen 用)。 */
|
|
268
|
+
input?: HTMLInputElement | HTMLTextAreaElement;
|
|
269
|
+
/** inline エディタのみ: 共有 input の値を差し替える(候補で置換する用・確定はしない)。 */
|
|
270
|
+
setValue?(value: any): void;
|
|
271
|
+
/**
|
|
272
|
+
* inline エディタのみ: 打たれた文字を**この列の保存値**に解釈する(=セルの確定と同じ読み方。
|
|
273
|
+
* `columns[c].parse` があればそれ、無ければ型ごとの組込=date/time/number)。解釈できなければ `null`。
|
|
274
|
+
* **エディタが独自パーサを持つと本体と食い違う**ので、打った内容に追従する実装は必ずこれを使うこと。
|
|
275
|
+
*/
|
|
276
|
+
parseCell?(value: any): any;
|
|
277
|
+
[k: string]: any;
|
|
278
|
+
}
|
|
279
|
+
/** カスタム編集UIの契約(`columns[c].editor`)。 */
|
|
280
|
+
export interface EditorDef {
|
|
281
|
+
open(ctx: EditorContext): void;
|
|
282
|
+
close?(): void;
|
|
283
|
+
/** セル右端に出すアイコン。 */
|
|
284
|
+
icon?: string;
|
|
285
|
+
/** シングルクリックで開く(ドロップダウン同様)。 */
|
|
286
|
+
openOnClick?: boolean;
|
|
287
|
+
/**
|
|
288
|
+
* `true` で「本体の共有 input に乗るエディタ」=**打鍵の1文字目・IME 直打ちが素のテキスト列と同じに効く**。
|
|
289
|
+
* 入力は本体(IME 堅牢な共有 input)に任せ、エディタは候補表示等だけを担当する型。text/number 系の列で有効
|
|
290
|
+
* (dropdown/checkbox/ネイティブ日付は従来どおり対象外)。未指定なら従来のフォーカスを奪うエディタ(挙動不変)。
|
|
291
|
+
*/
|
|
292
|
+
inline?: boolean;
|
|
293
|
+
/** inline のみ: 本体より先にキーを受ける(**IME 変換中も呼ばれる**=変換中の↑↓を奪わない実装が書ける)。`false` で本体既定を止める。 */
|
|
294
|
+
onKeyDown?(e: KeyboardEvent, ctx: EditorContext): boolean | void;
|
|
295
|
+
/** inline のみ: 共有 input の入力通知(候補の絞り込み用)。 */
|
|
296
|
+
onInput?(value: string, ctx: EditorContext): void;
|
|
297
|
+
[k: string]: any;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/** 右クリックの対象種別。カスタムメニュー項目の name/disabled/hidden の第2引数、callback の {ctx} で受け取る。 */
|
|
301
|
+
export interface MenuContext { on: 'col' | 'row' | 'cell' | 'corner'; r: number; c: number; }
|
|
302
|
+
|
|
303
|
+
/** 右クリックメニューのカスタム項目。name/disabled/hidden は関数なら (range, ctx) で呼ばれる。 */
|
|
304
|
+
export interface MenuItem {
|
|
305
|
+
name?: string | ((range: SelectionRange, ctx: MenuContext) => string);
|
|
306
|
+
callback?: (arg: { range: SelectionRange; key?: string; ctx: MenuContext }) => void;
|
|
307
|
+
disabled?: boolean | ((range: SelectionRange, ctx: MenuContext) => boolean);
|
|
308
|
+
hidden?: boolean | ((range: SelectionRange, ctx: MenuContext) => boolean);
|
|
309
|
+
danger?: boolean; separator?: boolean; key?: string; submenu?: Array<string | MenuItem>;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/** Undo/Redo 履歴。複数グリッドで共有すると Undo タイムラインが繋がる。 */
|
|
313
|
+
export declare class HistoryManager {
|
|
314
|
+
constructor(max?: number);
|
|
315
|
+
onChange: ((h: HistoryManager) => void) | null;
|
|
316
|
+
push(cmd: { apply: () => void; revert: () => void }): void;
|
|
317
|
+
undo(): void;
|
|
318
|
+
redo(): void;
|
|
319
|
+
clear(): void;
|
|
320
|
+
canUndo(): boolean;
|
|
321
|
+
canRedo(): boolean;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* 軽量・ノービルド・日本語IME堅牢な編集グリッド。
|
|
326
|
+
* @example
|
|
327
|
+
* const grid = new TssGrid(document.getElementById('app'), {
|
|
328
|
+
* columns: [{ data: 'name', title: '品名' }, { data: 'qty', title: '数量', type: 'number' }],
|
|
329
|
+
* data: [{ name: 'りんご', qty: 12 }],
|
|
330
|
+
* });
|
|
331
|
+
*/
|
|
332
|
+
export declare class TssGrid {
|
|
333
|
+
constructor(container: HTMLElement, options?: TssGridOptions);
|
|
334
|
+
|
|
335
|
+
/** 行数 / 列数(読み取り)。 */
|
|
336
|
+
readonly ROWS: number;
|
|
337
|
+
readonly COLS: number;
|
|
338
|
+
/** 列定義(実行時参照)。 */
|
|
339
|
+
columns: ColumnDef[];
|
|
340
|
+
/** 履歴マネージャ。 */
|
|
341
|
+
history: HistoryManager;
|
|
342
|
+
/** Enter/Tab 確定後の移動方向(代入で即反映)。 */
|
|
343
|
+
enterMoves: MoveDir;
|
|
344
|
+
tabMoves: MoveDir;
|
|
345
|
+
/** グリッド名(読み取り)。 */
|
|
346
|
+
readonly name: string;
|
|
347
|
+
/** アクティブセル(読み取り。移動は setActive)。 */
|
|
348
|
+
readonly active: { r: number; c: number };
|
|
349
|
+
/** 選択の伸長端(読み取り。setExtent で移動)。 */
|
|
350
|
+
readonly extent: { r: number; c: number };
|
|
351
|
+
/** 仮想スクロール有効か(読み取り)。 */
|
|
352
|
+
readonly virtual: boolean;
|
|
353
|
+
/** グリッド全体の読み取り専用(読み取り。実行時変更は setReadOnly)。 */
|
|
354
|
+
readonly readOnly: boolean;
|
|
355
|
+
|
|
356
|
+
// ---- データ -------------------------------------------------------------
|
|
357
|
+
/** 全データを2次元配列で取得(コピー)。 */
|
|
358
|
+
getData(): any[][];
|
|
359
|
+
/** 全行をオブジェクト配列で取得(columns[c].data キー基準)。 */
|
|
360
|
+
getRows(): Record<string, any>[];
|
|
361
|
+
/** r 行目をオブジェクトで取得。 */
|
|
362
|
+
getRow(r: number): Record<string, any>;
|
|
363
|
+
/** 列を縦に取得(index か data キー)。 */
|
|
364
|
+
getColumn(cOrKey: number | string): any[] | undefined;
|
|
365
|
+
/** 全列を配列の配列で取得。 */
|
|
366
|
+
getColumns(): any[][];
|
|
367
|
+
/** 1セルの値を取得(c は index か data キー)。 */
|
|
368
|
+
getValue(r: number, cOrKey: number | string): any;
|
|
369
|
+
/** データを差し替え(履歴・フィルタ・整列状態はリセット)。 */
|
|
370
|
+
setData(rows: any[][] | Record<string, any>[]): void;
|
|
371
|
+
/** 実行時に列定義を差し替える(Vue の `:columns` 変更等)。`headers` 省略時は columns から再導出。
|
|
372
|
+
* object モードは元レコード(`_src`)から新 columns で再展開、配列モードは各行を新 COLS に詰める。
|
|
373
|
+
* 列構造が変わるので整列/セル単位 readOnly はクリア、frozen/選択は範囲内へクランプ。 */
|
|
374
|
+
setColumns(columns: ColumnDef[], headers?: (string | { label?: string })[]): void;
|
|
375
|
+
/** グリッド全体の読み取り専用を実行時に切替(Vue の `:readonly` 等)。 */
|
|
376
|
+
setReadOnly(flag: boolean): void;
|
|
377
|
+
/**
|
|
378
|
+
* 背景で"育てる"追記(progressive)。data 末尾へ rows を足し、可視窓+スペーサだけ再描画する。
|
|
379
|
+
* buildTable 全再描画をせず、スクロール位置・アクティブセル・フォーカス・選択・編集中のエディタと値を保ち、履歴にも積まない。
|
|
380
|
+
* 「先頭ページを描く→残りを idle で appendRows」して first-paint を早める土台(既存の setData/insertRows 経路は不変)。
|
|
381
|
+
* rows は現在のデータと同形(オブジェクトモードはオブジェクト配列/配列モードは行配列)。
|
|
382
|
+
*/
|
|
383
|
+
appendRows(rows: any[][] | Record<string, any>[], opts?: { keepScroll?: boolean; noHistory?: boolean }): void;
|
|
384
|
+
/**
|
|
385
|
+
* 遅延ロード(push・on-demand)。総行数を total に確保し、未取得ぶんを PENDING 行で埋める(virtual 前提)。
|
|
386
|
+
* dataComplete=false になり、この間 minSpareRows は自動無効。onViewportChange で「今要る範囲」を受け fillRows で埋める流れ。
|
|
387
|
+
* setData で解除。AG Grid の Infinite Row Model 相当を push プリミティブで。
|
|
388
|
+
*/
|
|
389
|
+
setRowCount(total: number): void;
|
|
390
|
+
/**
|
|
391
|
+
* 遅延ロード(push): PENDING 行 [start, start+rows.length) を実データに差し替える(onViewportChange への応答)。
|
|
392
|
+
* 塗り替え範囲が可視窓に重なる時だけ窓を再描画=スクロール/選択/アクティブは不変。全 PENDING が埋まると dataComplete=true。
|
|
393
|
+
*/
|
|
394
|
+
fillRows(start: number, rows: any[][] | Record<string, any>[]): void;
|
|
395
|
+
/** 遅延ロード: 全行がロード済みなら true。setRowCount で false、全 fillRows 完了で true に戻る。 */
|
|
396
|
+
readonly dataComplete: boolean;
|
|
397
|
+
/** 1セルに書き込み(履歴あり・検証/onBeforeChange 経由)。force=true で readOnly 貫通。 */
|
|
398
|
+
setValue(r: number, cOrKey: number | string, val: any, force?: boolean): void;
|
|
399
|
+
/** 履歴に積まず・検証も通さず直接書き込み(計算列など派生値用。readOnly 貫通)。 */
|
|
400
|
+
setValueRaw(r: number, cOrKey: number | string, val: any): void;
|
|
401
|
+
/** 複数セルをまとめて書き込み、1 undo にする。`c` は列 index か data キー。値コピー→再計算等の batch 書き込みに。 */
|
|
402
|
+
setCells(cells: { r: number; c: number | string; value: any }[]): void;
|
|
403
|
+
/** アクティブセルを編集モードにする(低レベル)。`value` 指定でその値から開始、`caretEnd` でキャレット末尾。読取専用は無視。 */
|
|
404
|
+
toEdit(value?: any, caretEnd?: boolean): void;
|
|
405
|
+
/** アクティブセルを左上に、2次元配列を貼り付け(はみ出しは pasteOverflow ポリシー・1 undo)。 */
|
|
406
|
+
pasteGrid(grid: any[][]): void;
|
|
407
|
+
|
|
408
|
+
// ---- 並べ替え / フィルタ -------------------------------------------------
|
|
409
|
+
/** 列で並べ替え(c は index か data キー)。 */
|
|
410
|
+
sortBy(cOrKey: number | string, dir?: 'asc' | 'desc'): void;
|
|
411
|
+
/** 多段(複数列)で並べ替え。specs は優先順(先頭=第1キー)。各段は sortBy と同じ比較規則。 */
|
|
412
|
+
sortByCols(specs: Array<{ col: number | string; dir?: 'asc' | 'desc' }>): void;
|
|
413
|
+
/** 比較関数で並べ替え。 */
|
|
414
|
+
sortRows(cmp: (a: any[], b: any[]) => number): void;
|
|
415
|
+
/** 並べ替え解除(入力順に戻す)。 */
|
|
416
|
+
clearSort(): void;
|
|
417
|
+
isSorted(): boolean;
|
|
418
|
+
/** 非破壊フィルタ。pred(row, masterIndex, src)=>boolean、または { col: 値|fn }。 */
|
|
419
|
+
filter(pred: ((row: any[], masterIndex: number, src: any) => boolean) | Record<string, any>): void;
|
|
420
|
+
/** フィルタ解除(フィルタ中に編集/追加した行も含め全部戻る)。 */
|
|
421
|
+
clearFilter(): void;
|
|
422
|
+
isFiltered(): boolean;
|
|
423
|
+
/** フィルタ中でも全行(マスタ)を取得。 */
|
|
424
|
+
getAllRows(): Record<string, any>[];
|
|
425
|
+
|
|
426
|
+
// ---- 選択 / カーソル ----------------------------------------------------
|
|
427
|
+
setActive(r: number, c: number): void;
|
|
428
|
+
setExtent(r: number, c: number): void;
|
|
429
|
+
selectRect(r0: number, c0: number, r1: number, c1: number): void;
|
|
430
|
+
selectRow(r: number): void;
|
|
431
|
+
selectCol(c: number): void;
|
|
432
|
+
selectAll(): void;
|
|
433
|
+
/**
|
|
434
|
+
* 指定行までスクロール(HTML の `#` アンカー相当・選択は変えない)。
|
|
435
|
+
* `align` は `'start'`(既定=その行を先頭=sticky ヘッダ直下へ)/ `'center'` / `'end'` / `'nearest'`(可視ならそのまま)。
|
|
436
|
+
* 仮想(均一行高)でも非仮想(可変行高・実DOM測定)でも動く。範囲外の `r` は自動でクランプ。
|
|
437
|
+
*/
|
|
438
|
+
scrollToRow(r: number, align?: 'start' | 'center' | 'end' | 'nearest'): void;
|
|
439
|
+
/** 選択中の列インデックス(Ctrl+ヘッダクリックの飛び飛び選択に対応・昇順)。列選択モードでなければ `[]`。 */
|
|
440
|
+
getSelectedColumns(): number[];
|
|
441
|
+
/** 選択中の行インデックス(Ctrl+行ヘッダクリックの飛び飛び選択に対応・昇順)。行選択モードでなければ `[]`。 */
|
|
442
|
+
getSelectedRows(): number[];
|
|
443
|
+
/** 現在の選択範囲(矩形+active/extent)を取得。 */
|
|
444
|
+
getSelection(): { r0: number; c0: number; r1: number; c1: number; active: { r: number; c: number }; extent: { r: number; c: number } };
|
|
445
|
+
/** 現在の選択矩形 `{r0,c0,r1,c1}`(active↔extent の正規化)。 */
|
|
446
|
+
rectRange(): { r0: number; c0: number; r1: number; c1: number };
|
|
447
|
+
/** 飛び飛びの複数列をまとめて削除(高index側から。右クリック「N 列を削除」の実体)。 */
|
|
448
|
+
deleteColsSet(cols: number[]): void;
|
|
449
|
+
/** 飛び飛びの複数行をまとめて削除(高index側から。右クリック「N 行を削除」の実体)。 */
|
|
450
|
+
deleteRowsSet(rows: number[]): void;
|
|
451
|
+
|
|
452
|
+
// ---- 行 / 列 構造 -------------------------------------------------------
|
|
453
|
+
insertRow(ri: number, where?: 'above' | 'below'): void;
|
|
454
|
+
/** count 行を1回の再描画・1つの undo コマンドで挿入(大量挿入を O(N) に)。maxRows 上限でクランプ。既定 count=1 は insertRow と等価。 */
|
|
455
|
+
insertRows(ri: number, count?: number, where?: 'above' | 'below'): void;
|
|
456
|
+
deleteRows(r0: number, r1?: number): void;
|
|
457
|
+
/** 行 r の中身を空にする(行自体は残す・readOnly はスキップ・1 undo)。rowDelete の🗑を最後の1行で押した時の実体。 */
|
|
458
|
+
clearRow(r: number): void;
|
|
459
|
+
insertCol(ci: number, where?: 'left' | 'right'): void;
|
|
460
|
+
deleteCols(c0: number, c1?: number): void;
|
|
461
|
+
/** 1行を移動(Undo 対応)。 */
|
|
462
|
+
moveRow(from: number, to: number): void;
|
|
463
|
+
/** 複数行をまとめて移動(Undo 対応)。 */
|
|
464
|
+
moveRows(r0: number, r1: number, to: number): void;
|
|
465
|
+
|
|
466
|
+
// ---- 列の表示 / 幅 / 固定 / 行高 ---------------------------------------
|
|
467
|
+
hideColumn(c: number): void;
|
|
468
|
+
showColumn(c: number): void;
|
|
469
|
+
toggleColumn(c: number): void;
|
|
470
|
+
isColumnHidden(c: number): boolean;
|
|
471
|
+
getHiddenColumns(): number[];
|
|
472
|
+
/** 列 c の定義(columns[c])を取得(列の introspection 用)。 */
|
|
473
|
+
colCfg(c: number): ColumnDef;
|
|
474
|
+
/** 列 c の型('text'|'dropdown'|'checkbox'|'date'|'time'|'number')。 */
|
|
475
|
+
colType(c: number): string;
|
|
476
|
+
/** checkbox 列を全 ON/OFF(readOnly 行はスキップ・1 undo)。 */
|
|
477
|
+
setColumnChecked(c: number, flag: boolean): void;
|
|
478
|
+
setColWidth(c: number, px: number): void;
|
|
479
|
+
autoSizeColumn(c: number): void;
|
|
480
|
+
autoSizeAllColumns(): void;
|
|
481
|
+
freezeCols(n: number): void;
|
|
482
|
+
freezeRows(n: number): void;
|
|
483
|
+
setRowHeight(r: number, px: number): void;
|
|
484
|
+
|
|
485
|
+
// ---- セル状態 / 検証 ----------------------------------------------------
|
|
486
|
+
setAlignment(align: string, range?: SelectionRange): void;
|
|
487
|
+
getAlignment(r: number, c: number): string;
|
|
488
|
+
setCellReadOnly(flag: boolean, range?: SelectionRange): void;
|
|
489
|
+
/** 今の全セルを検証し、NG を一覧で返す(保存前チェック等)。 */
|
|
490
|
+
getInvalidCells(): Rejection[];
|
|
491
|
+
|
|
492
|
+
// ---- 出力 / 再描画 / 破棄 ----------------------------------------------
|
|
493
|
+
toCSV(opts?: CsvOptions): string;
|
|
494
|
+
downloadCSV(filename: string, opts?: CsvOptions): void;
|
|
495
|
+
/** 列定義変更後などの再描画(データ・選択は保持)。 */
|
|
496
|
+
redraw(): void;
|
|
497
|
+
/** セル1つだけ表示を描き直す(テキスト/HTML・条件付き書式・無効表示を最新データで)。全体 redraw より軽い。
|
|
498
|
+
* format が外部状態に依存する/セル内ボタンの状態を更新した等に。`c` は列 index か data キー。窓外/非表示は no-op。 */
|
|
499
|
+
renderCell(r: number, cOrKey: number | string): void;
|
|
500
|
+
/** 画像/フォント等の遅延レイアウト後に幾何キャッシュを再構築する保険。 */
|
|
501
|
+
refreshGeometry(): void;
|
|
502
|
+
/** グリッドを破棄(リスナ除去・DOM 撤去・idempotent)。フレームワークの teardown で呼ぶ。 */
|
|
503
|
+
destroy(): void;
|
|
504
|
+
|
|
505
|
+
// ---- 拡張 ---------------------------------------------------------------
|
|
506
|
+
addShortcut(s: { name: string; keys: string; handler: (grid: TssGrid, e: KeyboardEvent) => void }): void;
|
|
507
|
+
removeShortcut(name: string): void;
|
|
508
|
+
usePlugin(plugin: ((grid: TssGrid, opts?: any) => any) | string, opts?: any): any;
|
|
509
|
+
getPlugin(name: string): any;
|
|
510
|
+
|
|
511
|
+
// ---- 低レベル(公開はするが通常は上位APIを推奨) -----------------------
|
|
512
|
+
/** 選択範囲(または range)をクリア。※通常は値消去なら setValue('') を推奨。一括の低レベル手段。 */
|
|
513
|
+
clearRange(): void;
|
|
514
|
+
/** 選択範囲をクリップボードへ。cut=true で切り取り。 */
|
|
515
|
+
copy(cut?: boolean): void;
|
|
516
|
+
/** テーブルDOMを再構築(低レベル)。※通常は redraw() を推奨。主にプラグイン拡張者向け。 */
|
|
517
|
+
buildTable(): void;
|
|
518
|
+
/** セルの DOM 要素を返す(低レベル・内部DOM構造に依存)。結合セルはアンカーに解決。 */
|
|
519
|
+
cellEl(r: number, c: number): HTMLTableCellElement | null;
|
|
520
|
+
|
|
521
|
+
/** 遅延ロード: 未取得行を表す sentinel。setRowCount が未取得ぶんを data[r] に入れ、fillRows で実データへ差し替える。 */
|
|
522
|
+
static readonly PENDING: unique symbol;
|
|
523
|
+
|
|
524
|
+
/** 全角→半角(数字・符号・小数点・カンマ・%・¥・空白+日付/時刻の区切り /:)。IME 誤入力対策のユーティリティ。
|
|
525
|
+
* number/date/time の組込 parse で使うほか、カスタム `parse`/`format` から `TssGrid.zen2han(v)` として呼べる。 */
|
|
526
|
+
static zen2han(s: string): string;
|
|
527
|
+
|
|
528
|
+
/** HTML エスケープ(`&` `<` `>` `"` `'`)。`format` で HTML/属性を組む時などに(属性値も安全)。 */
|
|
529
|
+
static esc(s: any): string;
|
|
530
|
+
|
|
531
|
+
[k: string]: any;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
// グローバル(<script> 読み込み時の window.TssGrid / window.HistoryManager)にも型を付ける。
|
|
535
|
+
declare global {
|
|
536
|
+
interface Window {
|
|
537
|
+
TssGrid: typeof TssGrid;
|
|
538
|
+
HistoryManager: typeof HistoryManager;
|
|
539
|
+
}
|
|
540
|
+
}
|