@threestarsoftware/tssgrid 0.1.36 → 0.1.38

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.38] - 2026-11-06
+
+### 追加
+- **`selectOnEdit`（編集開始で中身を全選択＝打てば丸ごと置き換わる）**。クリック/F2 で編集を始めた時に共有 input を `select()`。**時刻/日付ピッカー（tss-time / tss-calendar / tss-datetime）は既定 ON**（値が入ったセルをクリックしてそのまま打てば置換）。列単位 `columns[c].selectOnEdit: true|false` でも指定でき、任意の列や個別の上書きに使える。
+- **`flashInvalid`（不正値を弾いて巻き戻した時にセルを短く点滅して知らせる・コア／既定 ON）**。確定時の検証で弾かれた（＝元の値へ巻き戻した）セルに短い赤パルス（`.tg-reject` 0.5s、`prefers-reduced-motion` 配慮）。従来 "revert" は無言で戻っていた穴を埋める（他グリッド同様「弾いたら知らせる」）。既存の `onInvalid(rejections, source)` コールバックはそのまま発火。`flashInvalid: false` で無効化。
+
+## [0.1.37] - 2026-11-06
+
+### 追加（公式フレームワークアダプタ）
+- **React / Vue 3 の薄い公式アダプタを追加**（`@threestarsoftware/tssgrid/react`・`@threestarsoftware/tssgrid/vue`）。競合（`ag-grid-react` / `@handsontable/react`）と同じ「コアはフレームワーク非依存のまま・薄いコンポーネントがライフサイクルと props を橋渡し」の形。**コアは無依存を維持**＝`react` / `vue` は **peerDependency（任意・`peerDependenciesMeta.optional`）**、アダプタは `React.createElement` / `Vue.h` で手書き＝**ビルド不要（UMD）**。
+  - グリッドは**アンコントロールド**：マウントで生成・アンマウントで `destroy()`、**cell を React/Vue で描かない**（高速）。値は **ref で公開した grid 本体（命令API）** ＋ `onAfterChange` 等のコールバック。`data` プロップは参照が変わった時だけ `setData`（毎レンダー新配列を渡すとリセット＝頻繁な更新は命令APIで）。
+  - React: `<TssGridReact columns={..} data={..} onAfterChange={..} ref={ref} />`、`ref.current` が grid 本体。StrictMode 二重マウント安全（`destroy` 冪等）、SSR/Next 安全（構築は `useEffect`＝クライアント専用）。
+  - Vue: `<TssGridVue :columns :data :options="{ onAfterChange }" ref="g" />`、`g.grid()` が grid 本体。
+  - `columns/data/plugins/options` と全 `on*` コールバックをそのまま透過。型（`.d.ts`）付き。例 `examples/react.html` / `examples/vue.html`（CDN UMD のノービルドデモ）。
+
 ## [0.1.36] - 2026-11-06
 
 inline ピッカー3兄弟（**tss-time / tss-calendar / tss-datetime**）に共通して潜んでいた「ポップアップの `<select>` が使えない／確定がピッカー内部の値を書き戻す／編集中の表示が食い違う」を一掃。土台としてコアに2つの affordance を追加。

package/README.md

@@ -78,9 +78,39 @@ const { TssGrid, HistoryManager } = require('@threestarsoftware/tssgrid');
 
 ## フレームワークで使う（React / Vue / Angular）
 
-専用ラッパーは**作りません**。vanilla on DOM なので CRA/Vite/Next/Webpack/Angular/Nuxt でそのまま動きます。コツは **マウント時に生成し、アンマウント時に `grid.destroy()`** するだけ（リスナ・ResizeObserver・DOM を後始末。idempotent）。
+**React / Vue には薄い公式アダプタ**（`@threestarsoftware/tssgrid/react`・`/vue`）があります。コアは無依存のまま＝`react`・`vue` は **peerDependency（任意）**、アダプタは `React.createElement` / `Vue.h` で手書き＝**ノービルド**。グリッドは「アンコントロールド」（マウントで生成・アンマウントで `destroy()`・**cell は React/Vue で描かない**＝高速）、値は **ref で公開した grid 本体（命令API）** ＋ `onAfterChange` 等のコールバック、`data` プロップは「差し替え」用（参照が変わった時だけ `setData`）。動く例: [`examples/react.html`](https://tssgrid.threestarsoftware.co.jp/examples/react.html) / [`examples/vue.html`](https://tssgrid.threestarsoftware.co.jp/examples/vue.html)。
 
-**React**:
+**React（公式アダプタ）**:
+```jsx
+import { useRef } from 'react';
+import { TssGridReact } from '@threestarsoftware/tssgrid/react';
+import '@threestarsoftware/tssgrid/tssgrid.css';
+
+function Grid({ columns, data }) {
+  const ref = useRef(null);   // ref.current = grid 本体（命令API）
+  return <TssGridReact columns={columns} data={data}
+    onAfterChange={(ch, src) => console.log(ch, src)} ref={ref} />;
+  // 例: ref.current.sortBy('age','desc') / ref.current.getRows()
+}
+```
+
+**Vue 3（公式アダプタ）**:
+```vue
+<script setup>
+import { ref } from 'vue';
+import { TssGridVue } from '@threestarsoftware/tssgrid/vue';
+import '@threestarsoftware/tssgrid/tssgrid.css';
+const g = ref(null);   // g.value.grid() = grid 本体
+</script>
+<template>
+  <TssGridVue :columns="columns" :data="data"
+    :options="{ onAfterChange: (ch, src) => console.log(ch, src) }" ref="g" />
+</template>
+```
+
+アダプタを使わず**依存ゼロで直接**使うこともできます（vanilla on DOM。CRA/Vite/Next/Webpack/Angular/Nuxt でそのまま。コツは **マウント時に生成し、アンマウント時に `grid.destroy()`**）。
+
+**React（直接）**:
 ```jsx
 import { useEffect, useRef } from 'react';
 import { TssGrid } from '@threestarsoftware/tssgrid';
@@ -999,6 +1029,7 @@ new TssGrid(el, { hiddenColumns: [1] });   // 初期で隠す
 | `hiddenColumns` | `number[]` | `[]` | 初期で隠す列インデックス。実行時は `hideColumn`/`showColumn`/`toggleColumn`（→ [列の表示/非表示](#列の表示非表示)） |
 | `wordWrap` | `boolean` | `false` | セル内で折り返し（行高は内容に合わせ伸びる）。`columns[c].wordWrap` で列単位も可 |
 | `ellipsis` | `boolean` | `false` | 溢れた文字を **… で省略**し、溢れたセルは**ホバーで全文（`title`）**。`columns[c].ellipsis` で列単位も可。見え方だけ＝値・コピー・編集は全文のまま。`wordWrap` と同時なら折り返しが優先 |
+| `columns[c].selectOnEdit` | `boolean` | — | クリック/F2 の**編集開始で中身を全選択**（打てば丸ごと置換）。**時刻/日付ピッカーは既定 ON**。列に明示すれば任意の列で有効/無効にできる（列指定がエディタ既定より優先） |
 | `placeholder` | `string` | — | 空セルに薄いヒント文字（`getData` には入らない）。`columns[c].placeholder` で列単位も可 |
 | `className` | `string` | — | コンテナ(`.tssgrid`)に付ける任意クラス（テーマ付け） |
 | `fillHandle` | `boolean \| {direction,autoInsertRow}` | `true` | **`false`でフィル完全OFF**（ハンドルを出さない＝ドラッグでの消去/上書きなし。フィルの起点はハンドルのみなので fill 自体が無効に）。`{direction:'vertical'\|'horizontal'\|'both', autoInsertRow:true}`で詳細指定（下へドラッグで行追加）。設定/表示専用グリッドで誤フィルを防ぐのに有効 |
@@ -1015,6 +1046,7 @@ new TssGrid(el, { hiddenColumns: [1] });   // 初期で隠す
 | `columns[c].readOnly` | `boolean \| (value,{r,c})=>boolean` | — | **列単位**の読み取り専用。関数を渡すとセル単位で判定（→ [読み取り専用](#読み取り専用readonly)） |
 | `onChange` | `(grid)=>void` | — | データ変更時に呼ばれる（後方互換） |
 | `onInvalid` | `(rejections, source)=>void` | — | 列ルールで弾かれた時。`rejections = [{ r, c, value, message }]` |
+| `flashInvalid` | `boolean` | `true` | 不正値を弾いて**巻き戻した時にセルを短く赤く点滅**して知らせる（`.tg-reject`・`prefers-reduced-motion` 配慮）。`onInvalid` は別途そのまま発火。`false` で無効 |
 | `onReadOnly` | `(blocked, source)=>void` | — | 読み取り専用セルへの変更を弾いた時。`blocked = [{ r, c, value }]` |
 | `contextMenu` | `boolean \| Array \| {items}` | `true` | 右クリックメニュー。`true`=既定項目 / `false`=無効 / **配列**=項目を構成（組込キー＋カスタム項目）（→ [右クリックメニュー](#右クリックメニュー行列の挿入削除)） |
 | `allowInsertRows` / `allowDeleteRows` | `boolean` | `true` | 行の挿入 / 削除の可否（メニュー項目の表示も連動） |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",
@@ -67,9 +67,29 @@
       "types": "./plugins/tss-comment.d.ts",
       "default": "./plugins/tss-comment.js"
     },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "default": "./react/index.js"
+    },
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "default": "./vue/index.js"
+    },
     "./plugins/*": "./plugins/*",
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "unpkg": "src/tssgrid.js",
   "jsdelivr": "src/tssgrid.js",
   "sideEffects": [
@@ -83,6 +103,8 @@
     "src/tssgrid.css",
     "src/tssgrid.d.ts",
     "plugins/",
+    "react/",
+    "vue/",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"

package/plugins/tss-calendar.js

@@ -214,6 +214,7 @@
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',     // セル右端に表示する合図（opts.icon:'' で消せる）
       openOnClick: opts.openOnClick !== false,        // シングルクリックで開く（既定 ON）
+      selectOnEdit: true,                             // クリック/F2 の編集開始で中身を全選択＝打てば丸ごと置き換わる
       inline: inline,                                 // true=共有 input に乗る（_usesTextEditor が見る）
       // inline のみ: 打った内容にカレンダーが追従（列の parse があれば表示形→保存値に変換して解釈）。
       // 矢印/Enter/Esc は本体に返す＝onKeyDown は持たない（キー派は打つ・マウス派はクリック）。

package/plugins/tss-datetime.js

@@ -184,6 +184,7 @@
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',
       openOnClick: opts.openOnClick !== false,
+      selectOnEdit: true,   // クリック/F2 の編集開始で中身を全選択＝打てば丸ごと置き換わる
       inline: inline,   // true=共有 input に乗る＝日時をそのまま直打ちできる（矢印/Enter/Esc は本体の既定）
       // inline のみ: 打った内容にピッカーが追従（ctx.parseCell＝セルの確定と同じ読み方。上で付けた parse を使う）。
       onInput: inline ? function (v, ctx) {

package/plugins/tss-time.js

@@ -104,6 +104,7 @@
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '🕐',
       openOnClick: opts.openOnClick !== false,
+      selectOnEdit: true,   // クリック/F2 の編集開始で中身を全選択＝打てば丸ごと置き換わる
       inline: inline,   // true=共有 input に乗る＝時刻をそのまま直打ちできる（矢印/Enter/Esc は本体の既定）
       openAt: function (anchorEl, value, onPick) { show(anchorEl, value, function (v) { onPick(v); }, null); },
     };

package/react/index.d.ts

@@ -0,0 +1,19 @@
+// TssGridReact — TssGrid の薄い React アダプタの型。
+import * as React from 'react';
+import { TssGrid, TssGridOptions } from '../src/tssgrid';
+
+// トップレベルに書ける定番オプション＋全 on* コールバックは Partial<TssGridOptions> として受ける。
+// それ以外は options={{…}} でまとめて渡す。className / style は host の <div> に付く。
+export interface TssGridReactProps extends Partial<TssGridOptions> {
+  className?: string;
+  style?: React.CSSProperties;
+  options?: TssGridOptions;
+}
+
+// ref には grid 本体（命令API）が入る。
+declare const TssGridReact: React.ForwardRefExoticComponent<
+  TssGridReactProps & React.RefAttributes<TssGrid>
+>;
+
+export default TssGridReact;
+export { TssGridReact };

package/react/index.js

@@ -0,0 +1,74 @@
+/*! TssGridReact — TssGrid の薄い React アダプタ（UMD・ノービルド・react は peerDependency）
+ *
+ *  方針（競合 ag-grid-react / @handsontable/react と同じ）:
+ *   - グリッドは「アンコントロールド」= マウント時に1回生成し、アンマウントで destroy()。cell を React で描かない（高速）。
+ *   - 値の読み書きは ref 経由の命令API（grid 本体）＋ onAfterChange 等のコールバック。data プロップは「差し替え」用。
+ *   - 全ての on* コールバック（onAfterChange / onEditEnd …）と columns/data/plugins/options をそのまま TssGrid へ渡す。
+ *
+ *  使い方:
+ *    import { TssGridReact } from '@threestarsoftware/tssgrid/react';
+ *    import '@threestarsoftware/tssgrid/tssgrid.css';
+ *    const ref = useRef(null);
+ *    <TssGridReact columns={cols} data={rows} plugins={[...]}
+ *                  onAfterChange={(ch, src) => ...} ref={ref} />
+ *    // 命令API: ref.current.sortBy('col','desc') / ref.current.getRows() など（grid 本体）
+ *
+ *  注意:
+ *   - data は「参照が変わった時だけ」setData されます（毎レンダー新配列を渡すと毎回リセット＝カーソルも飛ぶ）。
+ *     頻繁な更新は ref の命令API（setValue/ appendRows 等）を使うのが定石。
+ *   - 構築は useEffect（クライアント専用）なので SSR/Next でもそのまま（サーバでは空 div）。columns を変えたい時は key で remount。
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('react'), require('../src/tssgrid.js'));
+  } else {
+    root.TssGridReact = factory(root.React, { TssGrid: root.TssGrid });
+  }
+})(typeof self !== 'undefined' ? self : this, function (React, core) {
+  'use strict';
+  var TssGrid = core && (core.TssGrid || core);
+  var h = React.createElement;
+  // トップレベルに書ける定番オプション（それ以外は options={{…}} で）。
+  var PASS = { columns: 1, headers: 1, data: 1, plugins: 1, name: 1, width: 1, height: 1, rowHeight: 1, rowHeaders: 1, colHeaders: 1, minSpareRows: 1, maxRows: 1, history: 1, virtual: 1, hiddenColumns: 1 };
+
+  function buildOptions(props) {
+    var o = {};
+    if (props.options) for (var k in props.options) o[k] = props.options[k];
+    for (var key in props) {
+      if (PASS[key]) o[key] = props[key];
+      else if (/^on[A-Z]/.test(key) && typeof props[key] === 'function') o[key] = props[key];   // on* コールバック総通し
+    }
+    return o;
+  }
+
+  var TssGridReact = React.forwardRef(function (props, ref) {
+    var hostRef = React.useRef(null);
+    var gridRef = React.useRef(null);
+    var propsRef = React.useRef(props);
+    propsRef.current = props;
+    var firstData = React.useRef(true);
+    var readyState = React.useState(0);                           // grid 生成後に ref（命令API）を更新させるためのバンプ
+
+    React.useEffect(function () {                                  // 生成は1回（アンコントロールド）。StrictMode 二重でも destroy が冪等。
+      var grid = new TssGrid(hostRef.current, buildOptions(propsRef.current));
+      gridRef.current = grid;
+      firstData.current = true;
+      readyState[1](function (n) { return n + 1; });              // ref.current = grid 本体 に更新（useImperativeHandle を再評価）
+      return function () { try { grid.destroy(); } catch (e) {} if (gridRef.current === grid) gridRef.current = null; };
+    }, []);
+
+    React.useEffect(function () {                                  // data の参照が変わったら差し替え（初回=生成時の data を使うのでスキップ）
+      if (firstData.current) { firstData.current = false; return; }
+      var g = gridRef.current;
+      if (g && propsRef.current.data != null) g.setData(propsRef.current.data);
+    }, [props.data]);
+
+    React.useImperativeHandle(ref, function () { return gridRef.current; }, [readyState[0]]);   // grid 本体を命令API として公開（生成後に更新）
+
+    return h('div', { ref: hostRef, className: props.className, style: props.style });
+  });
+  TssGridReact.displayName = 'TssGridReact';
+  TssGridReact.TssGridReact = TssGridReact;   // import { TssGridReact } / import TssGridReact どちらも通す
+  TssGridReact.default = TssGridReact;
+  return TssGridReact;
+});

package/src/tssgrid.css

@@ -109,6 +109,14 @@
 /* invalidMode:'keep' で検証 NG のセル: 値は残して赤く警告（色は変数で調整可） */
 .tssgrid .tg-table td.tg-invalid { color: var(--tg-invalid-fg); background: var(--tg-invalid-bg); }
 .tssgrid .tg-table td.tg-invalid.sel { background: #ffd0d6; }
+/* 不正入力を弾いて巻き戻した時の合図（短い赤パルス）。flashInvalid:false で無効。 */
+.tssgrid .tg-table td.tg-reject { animation: tg-reject-flash .5s ease; }
+@keyframes tg-reject-flash {
+  0%   { background: var(--tg-invalid-bg); box-shadow: inset 0 0 0 2px var(--tg-invalid-fg); }
+  70%  { background: var(--tg-invalid-bg); box-shadow: inset 0 0 0 2px var(--tg-invalid-fg); }
+  100% { background: transparent; box-shadow: none; }
+}
+@media (prefers-reduced-motion: reduce) { .tssgrid .tg-table td.tg-reject { animation-duration: .01s; } }
 .tssgrid .tg-table th.rowhead { background: var(--tg-rowhead-bg); width: 40px; text-align: center; color: var(--tg-rowhead-fg); position: sticky; left: 0; z-index: 2; }
 .tssgrid .tg-table thead th.corner { z-index: 7; }   /* 左上の角は最前面（top+left 固定） */
 /* 列固定: 左から frozenCols 列を sticky で固定（left は JS が設定）。z は 選択オーバーレイ(3)より下に */

package/src/tssgrid.js

@@ -113,6 +113,7 @@
       //     parse/format を付けるか picker:false にするとテキスト入力（並び順を自分で決められる）。
       //     data: オブジェクト配列で渡す時の**バインド先キー**（例 {data:'品番'}）。getRows/getValue(r,'品番') で使う。
       this.onInvalid = opts.onInvalid || null; // (rejections, source) 検証で弾かれた時
+      this.flashInvalid = opts.flashInvalid;   // 既定 undefined=点滅ON（不正で巻き戻した時にセルを短く赤く）。false で無効
       // 読み取り専用: グリッド全体（opts.readOnly）/ 列単位（columns[c].readOnly）。編集と全変更経路を拒否。
       this.readOnly = !!opts.readOnly;
       this.onReadOnly = opts.onReadOnly || null; // (blocked, source) 読み取り専用セルへの変更を弾いた時
@@ -2348,6 +2349,7 @@
         }
         for (let i = changes.length - 1; i >= 0; i--) if (changes[i].neu === changes[i].old) changes.splice(i, 1);
         if (rejections.length && this.onInvalid) { try { this.onInvalid(rejections, source); } catch (_) {} }
+        if (rejections.length) this._flashInvalid(rejections);   // 不正で巻き戻した／赤くしたセルを短く点滅して「知らせる」
         if (!changes.length) { this.renderDump(); this.focusAndSelect(selBefore); return; }
       }
       // onBeforeChange: 検証 / 整形 / 取消。値は既に適用済みなので、取消は old へ巻き戻す。
@@ -2379,6 +2381,20 @@
       if (this.onAfterChange) { try { this.onAfterChange(this._pubChanges(changes, source), source); } catch (_) {} }
       this._syncHeaderCheckboxes();   // ヘッダ全選択チェックの見た目を同期
     }
+    // 不正で巻き戻した（または赤くした）セルを短く点滅して利用者に知らせる。確定後のレンダ確定を待って付与。
+    _flashInvalid(cells) {
+      if (this.flashInvalid === false || !cells || !cells.length) return;
+      const grid = this;
+      setTimeout(function () {
+        cells.forEach(function (rc) {
+          const td = grid.cellEl(rc.r, rc.c);
+          if (!td) return;
+          td.classList.remove('tg-reject'); void td.offsetWidth;   // 連続でも毎回アニメを再発火
+          td.classList.add('tg-reject');
+          setTimeout(function () { try { td.classList.remove('tg-reject'); } catch (e) {} }, 550);
+        });
+      }, 0);
+    }
     commit() {
       const wasEditing = this.mode === 'edit';
       const r = this.active.r, c = this.active.c, oldValue = this.data[r][c];
@@ -3315,6 +3331,10 @@
       if (t === 'checkbox') { this._toggleCheckbox(r, c); return; }
       if (t === 'dropdown') { this._openSelect(); return; }
       this.toEdit(this._editText(r, c), true);
+      // selectOnEdit: クリック/F2 の編集開始で中身を全選択＝打てば丸ごと置き換わる（時刻/日付ピッカー等）。
+      // 列の selectOnEdit を最優先、無ければエディタ申告（editor.selectOnEdit）に従う。
+      const _se = this.colCfg(c).selectOnEdit;
+      if ((_se != null ? _se : (_ed && _ed.selectOnEdit)) && this.editor.select) { try { this.editor.select(); } catch (_) {} }
     }
     // カスタムエディタ口（base-editor 相当）。columns[c].editor = オブジェクト or ()=>オブジェクト。
     // 契約: editor.open({ grid, r, c, value, td, commit(value), cancel() }) / 任意で editor.close()。

package/vue/index.d.ts

@@ -0,0 +1,15 @@
+// TssGridVue — TssGrid の薄い Vue 3 アダプタの型。
+import { DefineComponent } from 'vue';
+import { TssGrid, TssGridOptions } from '../src/tssgrid';
+
+export type TssGridVueProps = Partial<TssGridOptions> & { options?: TssGridOptions };
+
+// expose: grid() で grid 本体（命令API）を返す。
+export interface TssGridVueExposed {
+  grid(): TssGrid | null;
+}
+
+declare const TssGridVue: DefineComponent<TssGridVueProps>;
+
+export default TssGridVue;
+export { TssGridVue };

package/vue/index.js

@@ -0,0 +1,56 @@
+/*! TssGridVue — TssGrid の薄い Vue 3 アダプタ（UMD・ノービルド・vue は peerDependency）
+ *
+ *  方針（React アダプタと同じ）: グリッドはアンコントロールド。マウントで生成・アンマウントで destroy()。
+ *   値の読み書きは expose した grid 本体（命令API）＋ on* コールバック。data プロップは「差し替え」用。
+ *
+ *  使い方:
+ *    import { TssGridVue } from '@threestarsoftware/tssgrid/vue';
+ *    import '@threestarsoftware/tssgrid/tssgrid.css';
+ *    <TssGridVue :columns="cols" :data="rows" :plugins="[...]" :options="{ onAfterChange }" ref="g" />
+ *    // 命令API: this.$refs.g.grid().sortBy('col','desc') など（grid 本体を返す）
+ *
+ *  注意: on* コールバックは :options（例 :options="{ onAfterChange: fn }"）か、@after-change などの属性で渡せます。
+ *        data は参照が変わった時だけ setData（毎回新配列はリセット＝カーソルが飛ぶ）。頻繁な更新は grid の命令APIで。
+ */
+(function (root, factory) {
+  if (typeof module !== 'undefined' && module.exports) {
+    module.exports = factory(require('vue'), require('../src/tssgrid.js'));
+  } else {
+    root.TssGridVue = factory(root.Vue, { TssGrid: root.TssGrid });
+  }
+})(typeof self !== 'undefined' ? self : this, function (Vue, core) {
+  'use strict';
+  var TssGrid = core && (core.TssGrid || core);
+  var PASS = ['columns', 'data', 'plugins', 'headers', 'name', 'width', 'height', 'rowHeight', 'rowHeaders', 'colHeaders', 'minSpareRows', 'maxRows', 'history', 'virtual', 'hiddenColumns'];
+
+  var TssGridVue = Vue.defineComponent({
+    name: 'TssGridVue',
+    inheritAttrs: false,   // on* 属性を div に二重付けしない
+    props: {
+      columns: Array, data: Array, plugins: Array, options: Object, headers: Array,
+      name: String, width: [Number, String], height: [Number, String],
+      rowHeight: Number, rowHeaders: { type: Boolean, default: undefined }, minSpareRows: Number,
+    },
+    setup: function (props, ctx) {
+      var el = Vue.ref(null);
+      var grid = null;
+      function buildOptions() {
+        var o = {};
+        if (props.options) for (var k in props.options) o[k] = props.options[k];
+        PASS.forEach(function (key) { if (props[key] !== undefined) o[key] = props[key]; });
+        var attrs = ctx.attrs || {};
+        for (var a in attrs) { if (/^on[A-Z]/.test(a) && typeof attrs[a] === 'function') o[a] = attrs[a]; }   // @after-change 等＝attrs の onAfterChange
+        return o;
+      }
+      Vue.onMounted(function () { grid = new TssGrid(el.value, buildOptions()); });
+      Vue.onBeforeUnmount(function () { if (grid) { try { grid.destroy(); } catch (e) {} grid = null; } });
+      Vue.watch(function () { return props.data; }, function (d) { if (grid && d != null) grid.setData(d); });   // 参照が変わったら差し替え
+      ctx.expose({ grid: function () { return grid; } });                                                       // grid 本体を命令API として公開
+      return function () { return Vue.h('div', { ref: el }); };
+    },
+  });
+
+  TssGridVue.TssGridVue = TssGridVue;
+  TssGridVue.default = TssGridVue;
+  return TssGridVue;
+});