@toolbox-web/grid-vue 0.4.0 → 0.4.1

package/README.md

@@ -217,6 +217,72 @@ import '@toolbox-web/grid-vue/features/editing';
 | `commit` | `(value: any) => void` | Save the new value |
 | `cancel` | `() => void`           | Cancel editing     |
 
+## Events
+
+Handle grid events using Vue's template syntax or the `useGridEvent` composable.
+
+### Template Event Binding
+
+```vue
+<script setup lang="ts">
+import { TbwGrid } from '@toolbox-web/grid-vue';
+import type { CellClickDetail, SortChangeDetail } from '@toolbox-web/grid';
+
+function onCellClick(e: CustomEvent<CellClickDetail>) {
+  console.log(`Clicked ${e.detail.field} at row ${e.detail.rowIndex}`);
+}
+
+function onSortChange(e: CustomEvent<SortChangeDetail>) {
+  console.log(`Sorted by ${e.detail.field} ${e.detail.direction}`);
+}
+</script>
+
+<template>
+  <TbwGrid :rows="rows" @cell-click="onCellClick" @sort-change="onSortChange">
+    <TbwGridColumn field="name" header="Name" sortable />
+  </TbwGrid>
+</template>
+```
+
+### Available Events
+
+| Event                  | Detail Type          | Description                       |
+| ---------------------- | -------------------- | --------------------------------- |
+| `@cell-click`          | `CellClickDetail`    | Cell was clicked                  |
+| `@row-click`           | `RowClickDetail`     | Row was clicked                   |
+| `@cell-commit`         | `CellCommitDetail`   | Cell value committed (cancelable) |
+| `@row-commit`          | `RowCommitDetail`    | Row edit completed (cancelable)   |
+| `@cell-change`         | `CellChangeDetail`   | Row updated via API               |
+| `@sort-change`         | `SortChangeDetail`   | Sort state changed                |
+| `@column-resize`       | `ColumnResizeDetail` | Column was resized                |
+| `@cell-activate`       | `CellActivateDetail` | Cell activated (cancelable)       |
+| `@column-state-change` | `GridColumnState`    | Column visibility/order changed   |
+
+## Using Plugins (Advanced)
+
+For full control, pass plugin instances directly via `:grid-config`. Use `markRaw()` to prevent Vue from making plugin instances reactive:
+
+```vue
+<script setup lang="ts">
+import { markRaw } from 'vue';
+import { TbwGrid, TbwGridColumn } from '@toolbox-web/grid-vue';
+import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
+import { FilteringPlugin } from '@toolbox-web/grid/plugins/filtering';
+
+const gridConfig = {
+  plugins: markRaw([new SelectionPlugin({ mode: 'range' }), new FilteringPlugin({ debounceMs: 200 })]),
+};
+</script>
+
+<template>
+  <TbwGrid :rows="rows" :grid-config="gridConfig">
+    <TbwGridColumn field="name" header="Name" />
+  </TbwGrid>
+</template>
+```
+
+> **Important:** Always wrap plugin arrays with `markRaw()`. Vue's reactivity proxy breaks plugin internal state.
+
 ## Composables
 
 ### useGrid
@@ -480,6 +546,19 @@ const props = defineProps<{
 | `VueCellEditor`         | Deprecated - use `CellEditor`        |
 | `VueTypeDefault`        | Deprecated - use `TypeDefault`       |
 
+## Requirements
+
+- **Vue 3.4+** (uses `defineModel` and improved generics)
+- **@toolbox-web/grid** (peer dependency)
+
+## Demo
+
+See the [Vue demo app](../../demos/employee-management/vue/) for a full-featured example using `@toolbox-web/grid-vue`.
+
+```bash
+bun nx serve demo-vue
+```
+
 ## Building
 
 ```bash

package/features/pinned-columns.d.ts

@@ -11,7 +11,7 @@
  *
  * <template>
  *   <TbwGrid pinnedColumns :columns="[
- *     { field: 'id', sticky: 'left' },
+ *     { field: 'id', pinned: 'left' },
  *     { field: 'name' },
  *   ]" />
  * </template>

package/features/pinned-columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"pinned-columns.js","sources":["../../../../libs/grid-vue/src/features/pinned-columns.ts"],"sourcesContent":["/**\n * Pinned columns feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `pinnedColumns` prop on TbwGrid.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/pinned-columns';\n * </script>\n *\n * <template>\n *   <TbwGrid pinnedColumns :columns=\"[\n *     { field: 'id', sticky: 'left' },\n *     { field: 'name' },\n *   ]\" />\n * </template>\n * ```\n *\n * @packageDocumentation\n */\n\nimport { PinnedColumnsPlugin } from '@toolbox-web/grid/plugins/pinned-columns';\nimport { registerFeature } from '../lib/feature-registry';\n\nregisterFeature('pinnedColumns', () => {\n  return new PinnedColumnsPlugin();\n});\n"],"names":["registerFeature","PinnedColumnsPlugin"],"mappings":";;AAyBAA,EAAgB,iBAAiB,MACxB,IAAIC,EAAA,CACZ;"}
+{"version":3,"file":"pinned-columns.js","sources":["../../../../libs/grid-vue/src/features/pinned-columns.ts"],"sourcesContent":["/**\n * Pinned columns feature for @toolbox-web/grid-vue\n *\n * Import this module to enable the `pinnedColumns` prop on TbwGrid.\n *\n * @example\n * ```vue\n * <script setup>\n * import '@toolbox-web/grid-vue/features/pinned-columns';\n * </script>\n *\n * <template>\n *   <TbwGrid pinnedColumns :columns=\"[\n *     { field: 'id', pinned: 'left' },\n *     { field: 'name' },\n *   ]\" />\n * </template>\n * ```\n *\n * @packageDocumentation\n */\n\nimport { PinnedColumnsPlugin } from '@toolbox-web/grid/plugins/pinned-columns';\nimport { registerFeature } from '../lib/feature-registry';\n\nregisterFeature('pinnedColumns', () => {\n  return new PinnedColumnsPlugin();\n});\n"],"names":["registerFeature","PinnedColumnsPlugin"],"mappings":";;AAyBAA,EAAgB,iBAAiB,MACxB,IAAIC,EAAA,CACZ;"}

package/lib/feature-props.d.ts

@@ -156,9 +156,9 @@ export interface FeatureProps<TRow = unknown> {
      * @example
      * ```vue
      * <TbwGrid pinnedColumns :columns="[
-     *   { field: 'id', sticky: 'left' },
+     *   { field: 'id', pinned: 'left' },
      *   { field: 'name' },
-     *   { field: 'actions', sticky: 'right' },
+     *   { field: 'actions', pinned: 'right' },
      * ]" />
      * ```
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid-vue",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Vue 3 adapter for @toolbox-web/grid data grid component",
   "type": "module",
   "main": "./index.js",