@affino/datagrid-vue-app 0.1.7 → 0.1.9

package/README.md

@@ -780,6 +780,7 @@ Object form:
 ## Custom Cell Renderers
 
 Columns can provide a `cellRenderer` callback that returns Vue content for the display layer.
+If a custom cell also needs keyboard-accessible interaction without breaking the grid-owned focus model, declare `cellInteraction` on the column and use `context.interactive` inside the renderer.
 
 ```vue
 <script setup lang="ts">
@@ -791,11 +792,12 @@ interface Row {
   employee: string
   status: string
   approval: string
+  approved: boolean
 }
 
 const rows: Row[] = [
-  { id: "w1", employee: "Maya Patel", status: "Submitted", approval: "Waiting" },
-  { id: "w2", employee: "Liam Chen", status: "Approved", approval: "Approved" },
+  { id: "w1", employee: "Maya Patel", status: "Submitted", approval: "Waiting", approved: false },
+  { id: "w2", employee: "Liam Chen", status: "Approved", approval: "Approved", approved: true },
 ]
 
 const columns: DataGridAppColumnInput<Row>[] = [
@@ -803,6 +805,16 @@ const columns: DataGridAppColumnInput<Row>[] = [
   {
     key: "status",
     label: "Status",
+    cellInteraction: {
+      click: true,
+      keyboard: ["enter", "space"],
+      role: "button",
+      label: ({ row }) => row?.approved ? "Reopen approval" : "Approve row",
+      pressed: ({ row }) => row?.approved === true,
+      onInvoke: ({ rowId, row }) => {
+        console.log("toggle approval", rowId, row?.status)
+      },
+    },
     cellRenderer: ({ displayValue, row }) => h("span", {
       class: [
         "status-pill",
@@ -810,7 +822,20 @@ const columns: DataGridAppColumnInput<Row>[] = [
       ],
     }, displayValue),
   },
-  { key: "approval", label: "Approval" },
+  {
+    key: "approval",
+    label: "Approval",
+    cellRenderer: ({ displayValue, interactive }) => h("button", {
+      type: "button",
+      class: "approval-action",
+      disabled: interactive?.enabled === false,
+      "aria-pressed": interactive?.ariaPressed,
+      onClick: event => {
+        event.stopPropagation()
+        interactive?.activate("click")
+      },
+    }, displayValue),
+  },
 ]
 </script>
 
@@ -827,14 +852,38 @@ const columns: DataGridAppColumnInput<Row>[] = [
 - `column` and `columnIndex`
 - `value`: raw string value used by the stage
 - `displayValue`: formatted display string after presentation rules
+- `interactive`: resolved cell interaction contract when the column declares `cellInteraction`; otherwise `null`
+
+`interactive` exposes:
+
+- `enabled`: `false` only when the interaction is currently disabled
+- `click`: whether click invocation is enabled for the cell wrapper
+- `keyboard`: enabled keyboard triggers (`enter`, `space`)
+- `role`, `ariaLabel`, `ariaPressed`, `ariaChecked`, `ariaDisabled`
+- `activate(trigger?)`: invoke the same column-level interaction path used by grid keyboard and wrapper click handling
 
 Guidelines:
 
-- treat `cellRenderer` as display-only; editing, selection, fill, clipboard, and menus still belong to the grid shell
+- keep interaction intent on the column via `cellInteraction`; use `interactive.activate(...)` from the renderer instead of ad-hoc row-local handlers
+- the grid shell still owns focus, selection, fill, clipboard, menus, and editing; `cellInteraction` only adds semantic invoke behavior inside that model
 - prefer pure render output from row data over local mutable renderer state
 - keep identifiers, derived values, and formula-result columns read-only where appropriate
 - if a renderer caches local UI state, listen for targeted app-layer cell refresh and re-sync on refresh
 
+### System checkbox interactions
+
+The built-in row-selection checkbox column uses the same `cellInteraction` contract internally.
+That means row checkboxes and the header select-all control now follow the same semantic path as authored interactive cells: click and keyboard invoke flow through one runtime contract, while the stage exposes the matching checkbox ARIA state.
+
+Practical implications:
+
+- `row-selection` is the reference example of a package-owned `cellInteraction` column
+- row checkboxes expose checkbox semantics without introducing nested focus targets inside the grid cell
+- the header checkbox stays aligned with the current visible body rows, including filtered slices
+- custom boolean/action columns should prefer this pattern instead of bespoke click handlers attached inside renderers
+
+For a live example, open the sandbox route `/vue/row-selection-grid` and switch between the visible row filters before using the header checkbox.
+
 ## Theme
 
 Preset string:

package/dist/DataGrid.d.ts

@@ -184,6 +184,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<number | undefined>;
         default: undefined;
     };
+    fillHandle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rangeMove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     rowHover: {
         type: BooleanConstructor;
         default: boolean;
@@ -373,6 +381,14 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<number | undefined>;
         default: undefined;
     };
+    fillHandle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    rangeMove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     rowHover: {
         type: BooleanConstructor;
         default: boolean;
@@ -436,6 +452,8 @@ declare const _default: import("vue").DefineComponent<{
     advancedFilter: DataGridAdvancedFilterProp | undefined;
     minRows: number | undefined;
     maxRows: number | undefined;
+    fillHandle: boolean;
+    rangeMove: boolean;
     viewMode: DataGridAppViewMode | undefined;
     pageSize: number | undefined;
     currentPage: number | undefined;

package/dist/chunks/{DataGridGanttStage.vue_vue_type_script_setup_true_lang-DiaL9sUh.js → DataGridGanttStage.vue_vue_type_script_setup_true_lang-BYUAjngz.js}

@@ -1,5 +1,5 @@
 import { defineComponent as yn, computed as u, ref as y, watch as de, nextTick as Mt, onMounted as wn, onBeforeUnmount as pn, openBlock as De, createElementBlock as We, createElementVNode as V, normalizeStyle as ne, createVNode as bn, mergeProps as Sn, unref as Mn, createCommentVNode as Tn } from "vue";
-import { o as Pn, q as Dn, _ as Wn } from "./DataGridTableStage.vue_vue_type_script_setup_true_lang-Bb5ixAcf.js";
+import { o as Pn, q as Dn, _ as Wn } from "./DataGridTableStage.vue_vue_type_script_setup_true_lang-l1nn1PNS.js";
 import { resolveDataGridGanttAnalysis as _n, buildDataGridGanttVisibleBars as kn, buildDataGridGanttDependencyPaths as Rn, resolveDataGridGanttRangeFrame as Xe, buildDataGridTimelineRenderModels as Tt, resolveDataGridTimelineDateToPixel as Pt, resolveDataGridTimelineScrollLeftForDate as En, applyDataGridGanttDragDelta as In, hitTestDataGridGanttBar as Dt, clampDataGridTimelineScrollLeft as xn, buildDataGridGanttRowEditPatch as Cn } from "@affino/datagrid-gantt";
 const be = 0.5, Ln = 1.25;
 function Hn(s) {

package/dist/chunks/{DataGridGanttStageEntry-B8Ghe1BD.js → DataGridGanttStageEntry-CaMj_sad.js}

@@ -1,5 +1,5 @@
 import { defineComponent as e, h as r } from "vue";
-import { _ as a } from "./DataGridGanttStage.vue_vue_type_script_setup_true_lang-DiaL9sUh.js";
+import { _ as a } from "./DataGridGanttStage.vue_vue_type_script_setup_true_lang-BYUAjngz.js";
 import { normalizeDataGridGanttOptions as n } from "@affino/datagrid-gantt";
 const m = e({
   name: "DataGridGanttStageEntry",