@affino/datagrid-vue-app 0.1.62 → 0.1.64

package/README.md

@@ -1268,6 +1268,7 @@ Object form:
 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.
 For grouped rows, prefer `groupCellRenderer` so you receive structured group metadata instead of reverse-engineering the formatted disclosure label.
+If an authored renderer throws, the stage preserves the cell wrapper and falls back to the resolved `displayValue` for that cell.
 
 ```vue
 <script setup lang="ts">
@@ -1339,6 +1340,7 @@ const columns: DataGridAppColumnInput<Row>[] = [
 - `column` and `columnIndex`
 - `value`: raw string value used by the stage
 - `displayValue`: formatted display string after presentation rules
+- `surface`: rendered surface metadata; `surface.kind` is `"real"` for materialized rows and `"placeholder"` for visual placeholder rows
 - `interactive`: resolved cell interaction contract when the column declares `cellInteraction`; otherwise `null`
 
 `groupCellRenderer` receives the same display fields for group rows plus `group`, which includes:
@@ -1386,9 +1388,23 @@ Guidelines:
 - keep group expand/collapse behind an explicit trigger inside `groupCellRenderer`; do not rely on the whole group cell acting as the disclosure target
 - 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
+- do not mutate grid state, row data, selection, focus, or editor state while the renderer is running
+- avoid synchronous layout reads such as `getBoundingClientRect()`, `clientWidth`, or computed-style reads inside renderers; measure layout in your surrounding app lifecycle instead
+- return bounded Vue content for each cell; expensive charts, popovers, network work, or observers should mount lazily behind explicit user intent
+- provide stable keys for repeated child VNodes returned from a renderer so virtualized row/column remounts do not lose child identity unnecessarily
+- treat `surface.kind === "placeholder"` as a display-only state; do not assume placeholder rows are persisted or editable until the grid materializes them through the placeholder-row policy
+- keep per-cell renderer work proportional to one cell because the stage invokes renderers synchronously for every rendered center and pinned cell
 - 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
 
+Performance expectations:
+
+- Renderers run in the same Vue render pass as virtualized row and column window updates.
+- Wide grids, pinned panes, and pinned-bottom rows multiply the number of rendered cell surfaces.
+- Renderer exceptions are isolated to the affected cell and fall back to `displayValue`; they are still application bugs and should be fixed rather than used as control flow.
+- The grid may use lightweight display-value rendering during active touch scroll; renderers must not be the only place where essential text, ARIA labels, selection state, or edit affordances exist.
+- Enterprise custom-renderer scenarios should be validated with the browser-frame/perf gates documented in `docs/perf/datagrid-performance-gates.md` before being treated as a performance baseline.
+
 ### System checkbox interactions
 
 The built-in row-selection checkbox column uses the same `cellInteraction` contract internally.

package/dist/advanced-filter.js

@@ -1,4 +1,4 @@
-import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DxZakgyj.js";
+import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js";
 export {
   e as DataGridAdvancedFilterPopover
 };

package/dist/aggregations.js

@@ -1,4 +1,4 @@
-import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js";
+import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-TgxL5evy.js";
 export {
   a as DataGridAggregationsPopover
 };

package/dist/chunks/{DataGridAdvancedFilterPopover-C_MjEKFo.js → DataGridAdvancedFilterPopover-p_hnZLCA.js}

@@ -1,4 +1,4 @@
-import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DxZakgyj.js";
+import { _ as f } from "./DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js";
 export {
   f as default
 };

package/dist/chunks/{DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DxZakgyj.js → DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-AVmOe3Bv.js}

@@ -1,6 +1,6 @@
 import { defineComponent as N, inject as z, ref as A, computed as c, watch as w, nextTick as O, openBlock as i, createElementBlock as u, Fragment as C, createElementVNode as a, mergeProps as F, unref as _, createCommentVNode as P, createTextVNode as K, toDisplayString as l, createBlock as M, Teleport as U, renderList as T, createVNode as k } from "vue";
 import { usePopoverController as Z, useFloatingPopover as H } from "@affino/popover-vue";
-import { _ as L } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-xry4J3Lx.js";
+import { _ as L } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-CpC_nuMk.js";
 import { d as J, r as Q } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 import { D } from "./dataGridAdvancedFilter-xnME5bRa.js";
 import { u as W } from "./useDataGridDraggableOverlaySurface-BgkSR_nl.js";

package/dist/chunks/{DataGridAggregationsPopover-C8kdwv0O.js → DataGridAggregationsPopover-Bzbn6Nuy.js}

@@ -1,4 +1,4 @@
-import { _ as f } from "./DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js";
+import { _ as f } from "./DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-TgxL5evy.js";
 export {
   f as default
 };

package/dist/chunks/{DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js → DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-TgxL5evy.js}

@@ -1,6 +1,6 @@
 import { defineComponent as V, inject as E, ref as b, computed as d, watch as _, nextTick as m, openBlock as l, createElementBlock as i, Fragment as y, createElementVNode as e, mergeProps as k, unref as f, toDisplayString as h, createBlock as G, Teleport as D, createVNode as C, renderList as I, createCommentVNode as L } from "vue";
 import { usePopoverController as j, useFloatingPopover as z } from "@affino/popover-vue";
-import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-xry4J3Lx.js";
+import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-CpC_nuMk.js";
 import { d as q, r as K } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" }, J = /* @__PURE__ */ e("div", null, [
   /* @__PURE__ */ e("div", { class: "datagrid-aggregations__eyebrow" }, "Aggregations"),

package/dist/chunks/DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-CpC_nuMk.js

@@ -0,0 +1,419 @@
+import { defineComponent as Se, inject as Pe, ref as v, useAttrs as Re, computed as s, watch as $, nextTick as m, onMounted as Me, onBeforeUnmount as Be, openBlock as b, createElementBlock as h, createElementVNode as ae, mergeProps as Ve, withModifiers as O, createBlock as De, Teleport as Te, normalizeStyle as Ne, normalizeClass as ie, Fragment as re, renderList as $e, toDisplayString as Ge, createCommentVNode as z } from "vue";
+import { d as He, r as Ue } from "./dataGridOverlayThemeVars-vzY74EIz.js";
+function We(n = {}) {
+  return {
+    open: n.open ?? !1,
+    filter: n.filter ?? "",
+    activeIndex: n.activeIndex ?? -1
+  };
+}
+function P(n, l) {
+  return n.open === l ? n : {
+    ...n,
+    open: l
+  };
+}
+function q(n, l) {
+  return n.filter === l ? n : {
+    ...n,
+    filter: l
+  };
+}
+function R(n, l, t) {
+  const r = Ke(l, t);
+  return r === n.activeIndex ? n : {
+    ...n,
+    activeIndex: r
+  };
+}
+function ue(n, l, t, r = !0) {
+  if (t <= 0 || l === 0)
+    return n;
+  if (n.activeIndex < 0)
+    return R(n, l > 0 ? 0 : t - 1, t);
+  const u = n.activeIndex + Math.trunc(l);
+  return r ? R(n, Xe(u, t), t) : R(n, u, t);
+}
+function Ke(n, l) {
+  if (l <= 0)
+    return -1;
+  if (!Number.isFinite(n))
+    return 0;
+  const t = Math.trunc(n);
+  return t < 0 ? 0 : t >= l ? l - 1 : t;
+}
+function Xe(n, l) {
+  return (n % l + l) % l;
+}
+const ze = 0, qe = 1, je = 2, Je = 3, Ye = 4, Ze = 5, Qe = 6, et = 7, ce = 100;
+function tt(n, l) {
+  const t = j(l);
+  if (t.length === 0)
+    return [...n];
+  const r = n.map((u, c) => ({
+    option: u,
+    score: nt(u, t),
+    originalIndex: c
+  })).filter((u) => u.score < ce);
+  return r.sort((u, c) => {
+    if (u.score !== c.score)
+      return u.score - c.score;
+    const k = u.option.label.length, d = c.option.label.length;
+    return k !== d ? k - d : u.originalIndex - c.originalIndex;
+  }), r.map((u) => u.option);
+}
+function nt(n, l) {
+  const t = j(n.label), r = j(n.value);
+  return t === l ? ze : r === l ? qe : t.startsWith(l) ? je : r.startsWith(l) ? Je : se(t, l) ? Ye : se(r, l) ? Ze : t.includes(l) ? Qe : r.includes(l) ? et : ce;
+}
+function se(n, l) {
+  return n.length === 0 || l.length === 0 ? !1 : n.split(/[^a-z0-9]+/i).some((t) => t.length > 0 && t.startsWith(l));
+}
+function j(n) {
+  return n.trim().toLocaleLowerCase();
+}
+const lt = ["id", "name", "value", "placeholder", "disabled", "aria-busy", "aria-invalid", "aria-expanded", "aria-activedescendant"], ot = ["data-affino-popover-sticky"], at = {
+  key: 0,
+  class: "datagrid-cell-combobox__empty"
+}, it = ["id", "aria-selected", "data-option-index", "onMousemove", "onClick"], rt = { class: "datagrid-cell-combobox__option-label" }, ut = {
+  key: 0,
+  class: "datagrid-cell-combobox__option-state",
+  "aria-hidden": "true"
+}, st = {
+  key: 0,
+  class: "datagrid-cell-combobox__empty"
+}, ct = {
+  inheritAttrs: !1
+}, xt = /* @__PURE__ */ Se({
+  ...ct,
+  __name: "DataGridFilterableCombobox",
+  props: {
+    value: {},
+    options: { default: () => [] },
+    loadOptions: {},
+    placeholder: { default: "Type to filter" },
+    disabled: { type: Boolean, default: !1 },
+    openOnMount: { type: Boolean, default: !0 },
+    initialFilter: { default: "" },
+    openOnFocus: { type: Boolean, default: !0 },
+    inlinePanel: { type: Boolean, default: !1 },
+    stickyPopoverId: {}
+  },
+  emits: ["commit", "cancel", "optionsResolved"],
+  setup(n, { emit: l }) {
+    const t = n, r = l, u = Pe(He, v(null)), c = Re(), k = v(null), d = v(null), L = v(null), J = v({}), G = v({}), M = v("below"), F = v(""), I = v(!1), A = v(null), B = v([]), o = v(We({ open: !1 })), S = `datagrid-filterable-combobox-${Math.random().toString(36).slice(2, 10)}`, de = `${S}-input`, ve = `${S}-field`;
+    let E = 0, _ = null;
+    const fe = s(() => {
+      const {
+        class: e,
+        id: a,
+        name: i,
+        style: f,
+        type: w,
+        value: le,
+        placeholder: oe,
+        disabled: dt,
+        onInput: vt,
+        onFocus: ft,
+        onBlur: pt,
+        onKeydown: mt,
+        onClick: bt,
+        ...Ae
+      } = c;
+      return Ae;
+    }), pe = s(() => String(c.id ?? de)), me = s(() => String(c.name ?? ve)), be = s(() => [
+      "cell-editor-control",
+      "datagrid-cell-combobox__input",
+      c.class
+    ]), he = s(() => c.style), _e = s(() => {
+      if (A.value)
+        return "true";
+      const e = c["aria-invalid"];
+      if (e === !0 || e === "true")
+        return "true";
+      if (!(e === !1 || e === "false" || e == null))
+        return e === "grammar" || e === "spelling" ? e : "true";
+    }), xe = s(() => {
+      if (!t.inlinePanel)
+        return "body";
+    }), H = s(() => Y.value.find((e) => e.value === t.value) ?? null), Y = s(() => t.loadOptions && B.value.length > 0 ? B.value : t.options), p = s(() => tt(Y.value, o.value.filter)), x = s(() => o.value.activeIndex), V = s(() => x.value >= 0 ? p.value[x.value] ?? null : null), ye = s(() => x.value >= 0 ? Z(x.value) : void 0), D = s(() => o.value.open);
+    function Z(e) {
+      return `${S}-option-${e}`;
+    }
+    function ge() {
+      J.value = Ue(u.value);
+    }
+    function U() {
+      F.value = H.value?.label ?? t.value;
+    }
+    function Q() {
+      F.value = t.initialFilter;
+    }
+    function C(e) {
+      const a = p.value;
+      if (a.length === 0) {
+        o.value = {
+          ...o.value,
+          activeIndex: -1
+        };
+        return;
+      }
+      let i = 0;
+      if (e && H.value) {
+        const f = a.findIndex((w) => w.value === H.value?.value);
+        f >= 0 && (i = f);
+      }
+      o.value = R(o.value, i, a.length);
+    }
+    async function W(e) {
+      if (!t.loadOptions)
+        return;
+      const a = E + 1;
+      E = a, I.value = !0, A.value = null;
+      try {
+        const i = await t.loadOptions(e);
+        if (a !== E)
+          return;
+        B.value = i, r("optionsResolved", i), C(!0), m(() => {
+          y(), g();
+        });
+      } catch (i) {
+        if (a !== E)
+          return;
+        A.value = i instanceof Error ? i.message : "options-load-failed", B.value = [], C(!1);
+      } finally {
+        a === E && (I.value = !1);
+      }
+    }
+    function y() {
+      if (t.inlinePanel) {
+        M.value = "below", G.value = {
+          position: "absolute",
+          top: "calc(100% - 1px)",
+          left: "0px",
+          width: "100%",
+          maxHeight: "260px",
+          zIndex: "4"
+        };
+        return;
+      }
+      if (typeof window > "u" || !d.value)
+        return;
+      const e = d.value.getBoundingClientRect(), a = Math.max(e.width, 160), i = Math.min(L.value?.offsetHeight ?? 220, 260), w = window.innerHeight - e.bottom - 8 < Math.min(180, i) && e.top > i + 12;
+      M.value = w ? "above" : "below";
+      const le = w ? Math.max(8, e.top - i + 1) : Math.min(window.innerHeight - i - 8, e.bottom - 1), oe = Math.min(
+        Math.max(8, e.left),
+        Math.max(8, window.innerWidth - a - 8)
+      );
+      G.value = {
+        position: "fixed",
+        top: `${le}px`,
+        left: `${oe}px`,
+        width: `${a}px`,
+        maxHeight: "260px",
+        zIndex: "240"
+      };
+    }
+    function ee() {
+      if (_ == null || typeof window > "u") {
+        _ = null;
+        return;
+      }
+      window.cancelAnimationFrame(_), _ = null;
+    }
+    function we() {
+      if (typeof window > "u") {
+        y();
+        return;
+      }
+      _ == null && (_ = window.requestAnimationFrame(() => {
+        _ = null, D.value && y();
+      }));
+    }
+    function g() {
+      if (!L.value || x.value < 0)
+        return;
+      L.value.querySelector(`[data-option-index="${x.value}"]`)?.scrollIntoView({ block: "nearest" });
+    }
+    function K() {
+      t.disabled || (o.value = P(o.value, !0), C(!0), m(() => {
+        if (y(), g(), d.value?.focus({ preventScroll: !0 }), !!d.value) {
+          if (o.value.filter.length > 0) {
+            const e = d.value.value.length;
+            d.value.setSelectionRange(e, e);
+            return;
+          }
+          d.value.select();
+        }
+      }), t.loadOptions && W(o.value.filter));
+    }
+    function T() {
+      ee(), o.value = P(o.value, !1);
+    }
+    function Ie(e) {
+      return e instanceof Node && (k.value?.contains(e) === !0 || L.value?.contains(e) === !0);
+    }
+    function Ee() {
+      if (o.value.filter.trim().length === 0)
+        return t.value;
+      if (V.value)
+        return V.value.value;
+      const e = F.value.trim().toLocaleLowerCase();
+      return e.length === 0 ? t.value : p.value.find((i) => i.label.trim().toLocaleLowerCase() === e || i.value.trim().toLocaleLowerCase() === e)?.value ?? t.value;
+    }
+    function te(e = "stay") {
+      I.value || A.value || (T(), r("commit", Ee(), e));
+    }
+    function ne(e, a = "stay") {
+      I.value || A.value || (T(), r("commit", e, a));
+    }
+    function X(e) {
+      o.value = R(o.value, e, p.value.length), m(g);
+    }
+    function Ce() {
+      t.openOnFocus && K();
+    }
+    function Oe() {
+      K();
+    }
+    function ke(e) {
+      if (t.disabled)
+        return;
+      const a = e.target.value;
+      F.value = a, o.value = q(o.value, a), o.value = P(o.value, !0), C(!1), m(() => {
+        y(), g();
+      }), t.loadOptions && W(a);
+    }
+    function Le() {
+      m(() => {
+        Ie(document.activeElement) || te("stay");
+      });
+    }
+    function Fe(e) {
+      if (!t.disabled && !(e.isComposing || e.key === "Process" || e.keyCode === 229)) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), o.value = P(o.value, !0), o.value = ue(o.value, 1, p.value.length, !0), m(g);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), o.value = P(o.value, !0), o.value = ue(o.value, -1, p.value.length, !0), m(g);
+          return;
+        }
+        if (e.key === "Home") {
+          e.preventDefault(), X(0);
+          return;
+        }
+        if (e.key === "End") {
+          e.preventDefault(), X(Math.max(0, p.value.length - 1));
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (e.preventDefault(), V.value) {
+            ne(V.value.value, e.shiftKey ? "previous" : "next");
+            return;
+          }
+          te(e.shiftKey ? "previous" : "next");
+          return;
+        }
+        e.key === "Escape" && (e.preventDefault(), T(), r("cancel"));
+      }
+    }
+    function N() {
+      D.value && we();
+    }
+    return $(() => t.options, () => {
+      t.loadOptions || (C(!0), m(y));
+    }, { immediate: !0 }), $(() => t.value, () => {
+      U();
+    }), $(() => t.initialFilter, (e) => {
+      document.activeElement !== d.value && (o.value = q(o.value, e), e.length > 0 ? (Q(), W(e)) : U(), C(!0), m(() => {
+        y(), g();
+      }));
+    }), $(() => t.disabled, (e) => {
+      e && T();
+    }), Me(() => {
+      ge(), t.initialFilter.length > 0 ? (o.value = q(o.value, t.initialFilter), Q()) : U(), t.openOnMount && K(), typeof window < "u" && (window.addEventListener("resize", N), window.addEventListener("scroll", N, { capture: !0, passive: !0 }));
+    }), Be(() => {
+      E += 1, ee(), typeof window < "u" && (window.removeEventListener("resize", N), window.removeEventListener("scroll", N, { capture: !0 }));
+    }), (e, a) => (b(), h("div", {
+      ref_key: "rootEl",
+      ref: k,
+      class: "datagrid-cell-combobox"
+    }, [
+      ae("input", Ve({
+        ref_key: "inputEl",
+        ref: d
+      }, fe.value, {
+        id: pe.value,
+        name: me.value,
+        class: be.value,
+        style: he.value,
+        type: "text",
+        role: "combobox",
+        value: F.value,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "aria-busy": I.value ? "true" : void 0,
+        "aria-invalid": _e.value,
+        "aria-expanded": D.value ? "true" : "false",
+        "aria-controls": S,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": ye.value,
+        onFocus: Ce,
+        onMousedown: a[0] || (a[0] = O(() => {
+        }, ["stop"])),
+        onContextmenu: a[1] || (a[1] = O(() => {
+        }, ["stop"])),
+        onClick: O(Oe, ["stop"]),
+        onInput: ke,
+        onKeydown: O(Fe, ["stop"]),
+        onBlur: Le
+      }), null, 16, lt),
+      (b(), De(Te, {
+        to: xe.value,
+        disabled: e.inlinePanel
+      }, [
+        D.value ? (b(), h("div", {
+          key: 0,
+          id: S,
+          ref_key: "panelEl",
+          ref: L,
+          class: ie(["datagrid-cell-combobox__panel", {
+            "datagrid-cell-combobox__panel--inline": e.inlinePanel,
+            "datagrid-cell-combobox__panel--attached-below": M.value === "below",
+            "datagrid-cell-combobox__panel--attached-above": M.value === "above"
+          }]),
+          "data-affino-popover-sticky": e.stickyPopoverId || void 0,
+          style: Ne([J.value, G.value]),
+          role: "listbox",
+          onMousedown: a[2] || (a[2] = O(() => {
+          }, ["prevent"]))
+        }, [
+          I.value ? (b(), h("div", at, "Loading options...")) : (b(), h(re, { key: 1 }, [
+            (b(!0), h(re, null, $e(p.value, (i, f) => (b(), h("button", {
+              id: Z(f),
+              key: `${i.value}-${f}`,
+              type: "button",
+              class: ie(["datagrid-cell-combobox__option", {
+                "datagrid-cell-combobox__option--active": f === x.value,
+                "datagrid-cell-combobox__option--selected": i.value === e.value
+              }]),
+              role: "option",
+              "aria-selected": i.value === e.value ? "true" : "false",
+              "data-option-index": f,
+              onMousemove: (w) => X(f),
+              onClick: O((w) => ne(i.value), ["stop"])
+            }, [
+              ae("span", rt, Ge(i.label), 1),
+              i.value === e.value ? (b(), h("span", ut)) : z("", !0)
+            ], 42, it))), 128)),
+            p.value.length === 0 ? (b(), h("div", st, " No matching options ")) : z("", !0)
+          ], 64))
+        ], 46, ot)) : z("", !0)
+      ], 8, ["to", "disabled"]))
+    ], 512));
+  }
+});
+export {
+  xt as _
+};