@affino/datagrid-vue-app 0.1.38 → 0.1.40

package/README.md

@@ -708,7 +708,7 @@ Out of the box this wires:
 - sort ascending / descending / clear
 - group / ungroup for groupable columns
 - pin column submenu (`left`, `right`, `none`)
-- value-set filter picker with search + apply/clear
+- value-set filter picker with search + apply/clear; server-backed row models may resolve values asynchronously through `api.columns.getHistogram(columnKey, { ignoreSelfFilter: true, search })`
 - column order / visibility popover
 
 Supported action keys for `actions` are:
@@ -1741,11 +1741,57 @@ The component emits:
 
 - When at least one filter is active, the `Advanced filter` toolbar button shows an active filter icon and active button styling.
 - Removing the only advanced-filter clause does not lock the UI; the builder keeps one empty clause row so the user can clear and rebuild the expression in place.
+- `advancedFilter.labels` customizes the toolbar text, panel headings, field labels, action labels, logical join labels, and operator labels. This is the supported localization path for built-in advanced-filter copy.
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :advanced-filter="{
+    labels: {
+      buttonLabel: 'Расширенный фильтр',
+      title: 'Условия отбора',
+      joinLabel: 'Связь',
+      columnLabel: 'Колонка',
+      operatorLabel: 'Оператор',
+      valueLabel: 'Значение',
+      apply: 'Применить',
+      cancel: 'Отмена',
+      operators: {
+        contains: 'содержит',
+        equals: 'равно',
+        'not-equals': 'не равно',
+      },
+      joins: { and: 'И', or: 'ИЛИ' },
+    },
+  }"
+/>
+```
 
 ## Built-in Overlay Panels
 
 - The built-in `Column layout`, `Advanced filter`, and `Find / replace` toolbar panels render through the shared Affino overlay host rather than inline in the grid tree.
 - These built-in panels are draggable by their header title area and reopen at the last detached position for the current grid instance during the active page session.
+- `columnLayout.labels` customizes the built-in columns panel text, including the toolbar label, panel title, close/cancel/apply actions, and move-button accessible labels.
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :column-layout="{
+    labels: {
+      buttonLabel: 'Колонки',
+      eyebrow: 'Настройка колонок',
+      title: 'Порядок и видимость',
+      close: 'Закрыть',
+      cancel: 'Отмена',
+      apply: 'Применить',
+      moveUp: 'Вверх',
+      moveDown: 'Вниз',
+    },
+  }"
+/>
+```
 
 ## Column Reorder
 
@@ -1792,7 +1838,7 @@ If you need to ship the UI but keep row order locked, leave `rowReorder` unset o
 ### Runtime access
 
 - `getApi()`
-- `getRuntime()`
+- `getRuntime()` returns the typed runtime bridge (`DataGridExposedRuntime`) for virtual-window and body-row APIs.
 - `getCore()`
 
 ### History

package/dist/DataGrid.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ExtractPublicPropTypes, type PropType, type VNode } from "vue";
-import { type CreateDataGridCoreOptions, type DataGridApi, type DataGridApiRowSelectionChangedEvent, type DataGridApiSelectionChangedEvent, type DataGridApiPluginDefinition, type DataGridAggregationModel, type DataGridColumnSnapshot, type DataGridColumnPin, type DataGridComputedFieldDefinition, type DataGridCoreServiceRegistry, type DataGridFilterSnapshot, type DataGridFormulaFieldDefinition, type DataGridFormulaFunctionRegistry, type DataGridGroupBySpec, type DataGridMigrateStateOptions, type DataGridRowNode, type DataGridRowSelectionSnapshot, type DataGridRowModel, type DataGridRowNodeInput, type DataGridSetStateOptions, type DataGridSortState, type DataGridUnifiedColumnState, type DataGridUnifiedState, type DataGridPivotSpec } from "@affino/datagrid-vue";
+import { type CreateDataGridCoreOptions, type DataGridApi, type DataGridApiRowSelectionChangedEvent, type DataGridApiSelectionChangedEvent, type DataGridApiPluginDefinition, type DataGridAggregationModel, type DataGridColumnSnapshot, type DataGridColumnPin, type DataGridComputedFieldDefinition, type DataGridCoreServiceRegistry, type DataGridFilterSnapshot, type DataGridFormulaFieldDefinition, type DataGridFormulaFunctionRegistry, type DataGridGroupBySpec, type DataGridMigrateStateOptions, type DataGridRowNode, type DataGridRowSelectionSnapshot, type DataGridRowModel, type DataGridRowNodeInput, type DataGridSetStateOptions, type DataGridSortState, type DataGridUnifiedColumnState, type DataGridUnifiedState, type DataGridPivotSpec, type UseDataGridRuntimeResult } from "@affino/datagrid-vue";
 import { defineDataGridStructuralRowActionHandler, type DataGridStructuralRowActionHandler, type DataGridStructuralRowActionId } from "./dataGridStructuralRowActions";
 import type { DataGridBivariantCallback } from "./types/bivariance";
 import type { DataGridAppToolbarModule } from "./host/DataGridModuleHost";
@@ -58,6 +58,7 @@ export declare function defineDataGridFilterCellStyleReader<TRow = unknown>(): <
 export declare function defineDataGridCellClassResolver<TRow = unknown>(): <TResolver extends DataGridCellClassResolver<TRow>>(resolver: TResolver) => TResolver;
 export declare function defineDataGridCellStyleResolver<TRow = unknown>(): <TResolver extends DataGridCellStyleResolver<TRow>>(resolver: TResolver) => TResolver;
 export { defineDataGridStructuralRowActionHandler };
+export type DataGridExposedRuntime<TRow = unknown> = Pick<UseDataGridRuntimeResult<TRow>, "api" | "syncBodyRowsInRange" | "setViewportRange" | "setVirtualWindowRange" | "setRows" | "rowPartition" | "virtualWindow" | "columnSnapshot" | "getBodyRowAtIndex" | "resolveBodyRowIndexById">;
 declare const dataGridProps: {
     readonly rows: {
         readonly type: PropType<readonly unknown[]>;
@@ -341,6 +342,7 @@ export interface DataGridExposed<TRow = unknown> {
     history: DataGridHistoryController;
     getHistory: () => DataGridHistoryController;
     getApi: () => DataGridApi<TRow> | null;
+    getRuntime: () => DataGridExposedRuntime<TRow> | null;
     getSelectionAggregatesLabel: () => string;
     runStructuralRowAction: (action: DataGridStructuralRowActionId, rowId: string | number) => Promise<boolean>;
     getState: () => DataGridUnifiedState<TRow> | null;

package/dist/advanced-filter.js

@@ -1,4 +1,4 @@
-import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-CDuio50U.js";
+import { _ as e } from "./chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DxZakgyj.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-Ct7ZV2zk.js";
+import { _ as a } from "./chunks/DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.js";
 export {
   a as DataGridAggregationsPopover
 };

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

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

package/dist/chunks/DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DxZakgyj.js

@@ -0,0 +1,263 @@
+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 { 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";
+const X = ["data-datagrid-advanced-filter-active"], Y = {
+  key: 0,
+  class: "datagrid-app-toolbar__button-icon datagrid-app-toolbar__button-icon--advanced-filter",
+  "data-datagrid-advanced-filter-icon": "true",
+  "aria-hidden": "true"
+}, x = /* @__PURE__ */ a("svg", {
+  viewBox: "0 0 16 16",
+  focusable: "false"
+}, [
+  /* @__PURE__ */ a("path", {
+    d: "M2 3.5h12l-4.6 5.2v3.2l-2.8 1.6V8.7L2 3.5Z",
+    fill: "currentColor"
+  })
+], -1), ee = [
+  x
+], ae = ["data-datagrid-overlay-dragging"], te = { class: "datagrid-advanced-filter__header" }, le = { class: "datagrid-advanced-filter__eyebrow" }, oe = { class: "datagrid-advanced-filter__title" }, de = { class: "datagrid-advanced-filter__applied" }, re = { class: "datagrid-advanced-filter__applied-head" }, ie = { class: "datagrid-advanced-filter__eyebrow" }, ne = { class: "datagrid-advanced-filter__applied-title" }, se = ["disabled"], ce = {
+  key: 0,
+  class: "datagrid-advanced-filter__applied-list"
+}, ue = {
+  key: 1,
+  class: "datagrid-advanced-filter__applied-empty"
+}, ve = { class: "datagrid-advanced-filter__rows" }, pe = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, _e = { class: "datagrid-advanced-filter__label" }, fe = { class: "datagrid-advanced-filter__field" }, ge = { class: "datagrid-advanced-filter__label" }, be = { class: "datagrid-advanced-filter__field" }, me = { class: "datagrid-advanced-filter__label" }, ye = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, he = { class: "datagrid-advanced-filter__label" }, we = ["name", "value", "placeholder", "aria-label", "onInput"], Ce = { class: "datagrid-advanced-filter__row-actions" }, ke = ["onClick"], Le = { class: "datagrid-advanced-filter__footer" }, Ae = { class: "datagrid-advanced-filter__footer-actions" }, je = /* @__PURE__ */ N({
+  __name: "DataGridAdvancedFilterPopover",
+  props: {
+    isOpen: { type: Boolean },
+    clauses: {},
+    columns: {},
+    appliedFilterSummaryItems: { default: () => [] },
+    hasAnyFilters: { type: Boolean, default: !1 },
+    buttonLabel: {},
+    labels: { default: () => D },
+    active: { type: Boolean, default: !1 },
+    showActiveIcon: { type: Boolean, default: !1 }
+  },
+  emits: ["open", "add", "remove", "apply", "cancel", "reset-all", "update-clause"],
+  setup(I, { emit: j }) {
+    const n = I, s = j, m = z(J, A(null)), y = A({}), r = Z(
+      {
+        id: "advanced-filter",
+        role: "dialog",
+        closeOnEscape: !0,
+        closeOnInteractOutside: !0
+      },
+      {
+        onOpen: () => {
+          n.isOpen || s("open"), h();
+        },
+        onClose: () => {
+          n.isOpen && s("cancel");
+        }
+      }
+    ), p = H(r, {
+      placement: "bottom",
+      align: "start",
+      gutter: 10,
+      viewportPadding: 12,
+      zIndex: 180,
+      lockScroll: !1,
+      returnFocus: !0
+    }), f = W({
+      surfaceId: "advanced-filter",
+      rootElementRef: m,
+      floating: p
+    }), B = c(() => r.getTriggerProps({ role: "dialog" })), E = c(() => r.getContentProps({ role: "dialog", tabIndex: -1 })), S = c(() => r.state.value.open), V = c(() => p.teleportTarget.value), e = c(() => n.labels ?? D), $ = c(() => typeof n.buttonLabel == "string" && n.buttonLabel.trim().length > 0 ? n.buttonLabel.trim() : e.value.buttonLabel), R = c(() => Object.freeze([
+      { value: "and", label: e.value.joins.and },
+      { value: "or", label: e.value.joins.or }
+    ])), q = c(() => Object.freeze([
+      { value: "contains", label: e.value.operators.contains },
+      { value: "in", label: e.value.operators.in },
+      { value: "equals", label: e.value.operators.equals },
+      { value: "not-equals", label: e.value.operators["not-equals"] },
+      { value: "starts-with", label: e.value.operators["starts-with"] },
+      { value: "ends-with", label: e.value.operators["ends-with"] },
+      { value: "gt", label: e.value.operators.gt },
+      { value: "gte", label: e.value.operators.gte },
+      { value: "lt", label: e.value.operators.lt },
+      { value: "lte", label: e.value.operators.lte }
+    ])), G = c(() => n.columns.map((o) => ({
+      value: o.key,
+      label: o.label
+    })));
+    w(
+      () => n.isOpen,
+      async (o) => {
+        if (o) {
+          h(), r.state.value.open || r.open("programmatic"), await O(), p.contentRef.value?.querySelector('[data-advanced-filter-autofocus="true"]')?.focus({ preventScroll: !0 }), await p.updatePosition();
+          return;
+        }
+        r.state.value.open && r.close("programmatic");
+      },
+      { immediate: !0 }
+    ), w(m, () => {
+      r.state.value.open && h();
+    }), w(
+      () => n.clauses.length,
+      async () => {
+        r.state.value.open && (await O(), await p.updatePosition());
+      }
+    );
+    function h() {
+      y.value = Q(m.value);
+    }
+    function g(o, d, t) {
+      s("update-clause", { clauseId: o, field: d, value: t });
+    }
+    return (o, d) => (i(), u(C, null, [
+      a("button", F({
+        ref: _(p).triggerRef,
+        type: "button",
+        class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": o.active }],
+        "data-datagrid-toolbar-action": "advanced-filter",
+        "data-datagrid-advanced-filter-active": o.showActiveIcon ? "true" : "false",
+        style: y.value
+      }, B.value), [
+        o.showActiveIcon ? (i(), u("span", Y, ee)) : P("", !0),
+        K(" " + l($.value), 1)
+      ], 16, X),
+      (i(), M(U, { to: V.value }, [
+        S.value ? (i(), u("section", F({
+          key: 0,
+          ref: _(p).contentRef,
+          class: "datagrid-advanced-filter",
+          "data-datagrid-overlay-surface": "true",
+          "data-datagrid-overlay-surface-id": "advanced-filter",
+          "data-datagrid-overlay-dragging": _(f).dragging.value ? "true" : "false",
+          style: [_(f).surfaceStyle.value, y.value]
+        }, E.value), [
+          a("header", te, [
+            a("div", {
+              class: "datagrid-overlay-drag-handle",
+              "data-datagrid-overlay-drag-handle": "true",
+              onPointerdown: d[0] || (d[0] = //@ts-ignore
+              (...t) => _(f).handlePointerDown && _(f).handlePointerDown(...t))
+            }, [
+              a("div", le, l(e.value.eyebrow), 1),
+              a("h3", oe, l(e.value.title), 1)
+            ], 32),
+            a("button", {
+              type: "button",
+              class: "datagrid-advanced-filter__ghost",
+              onClick: d[1] || (d[1] = (t) => s("cancel"))
+            }, l(e.value.close), 1)
+          ]),
+          a("section", de, [
+            a("div", re, [
+              a("div", null, [
+                a("div", ie, l(e.value.appliedEyebrow), 1),
+                a("div", ne, l(e.value.appliedTitle), 1)
+              ]),
+              a("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__ghost",
+                disabled: !o.hasAnyFilters,
+                "data-datagrid-advanced-filter-action": "reset-all",
+                onClick: d[2] || (d[2] = (t) => s("reset-all"))
+              }, l(e.value.resetAllFilters), 9, se)
+            ]),
+            o.appliedFilterSummaryItems.length > 0 ? (i(), u("div", ce, [
+              (i(!0), u(C, null, T(o.appliedFilterSummaryItems, (t, b) => (i(), u("span", {
+                key: `applied-filter-${b}`,
+                class: "datagrid-advanced-filter__applied-chip"
+              }, l(t), 1))), 128))
+            ])) : (i(), u("div", ue, l(e.value.noFiltersApplied), 1))
+          ]),
+          a("div", ve, [
+            (i(!0), u(C, null, T(o.clauses, (t, b) => (i(), u("div", {
+              key: t.id,
+              class: "datagrid-advanced-filter__row"
+            }, [
+              a("label", pe, [
+                a("span", _e, l(e.value.joinLabel), 1),
+                k(L, {
+                  class: "datagrid-advanced-filter__select",
+                  value: t.join,
+                  options: R.value,
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  disabled: b === 0,
+                  "aria-label": e.value.joinAriaLabel,
+                  onCommit: (v) => g(t.id, "join", v)
+                }, null, 8, ["value", "options", "disabled", "aria-label", "onCommit"])
+              ]),
+              a("label", fe, [
+                a("span", ge, l(e.value.columnLabel), 1),
+                k(L, {
+                  class: "datagrid-advanced-filter__select",
+                  value: t.columnKey,
+                  options: G.value,
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  "data-advanced-filter-autofocus": b === 0 ? "true" : null,
+                  "aria-label": e.value.columnAriaLabel,
+                  onCommit: (v) => g(t.id, "columnKey", v)
+                }, null, 8, ["value", "options", "data-advanced-filter-autofocus", "aria-label", "onCommit"])
+              ]),
+              a("label", be, [
+                a("span", me, l(e.value.operatorLabel), 1),
+                k(L, {
+                  class: "datagrid-advanced-filter__select",
+                  value: t.operator,
+                  options: q.value,
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  "aria-label": e.value.operatorAriaLabel,
+                  onCommit: (v) => g(t.id, "operator", v)
+                }, null, 8, ["value", "options", "aria-label", "onCommit"])
+              ]),
+              a("label", ye, [
+                a("span", he, l(e.value.valueLabel), 1),
+                a("input", {
+                  name: `datagrid-advanced-filter-value-${t.id}`,
+                  value: t.value,
+                  type: "text",
+                  placeholder: e.value.valuePlaceholder,
+                  "aria-label": e.value.valueAriaLabel,
+                  onInput: (v) => g(t.id, "value", v.target.value)
+                }, null, 40, we)
+              ]),
+              a("div", Ce, [
+                a("button", {
+                  type: "button",
+                  class: "datagrid-advanced-filter__ghost datagrid-advanced-filter__ghost--danger",
+                  onClick: (v) => s("remove", t.id)
+                }, l(o.clauses.length <= 1 ? e.value.clearClause : e.value.removeClause), 9, ke)
+              ])
+            ]))), 128))
+          ]),
+          a("footer", Le, [
+            a("button", {
+              type: "button",
+              class: "datagrid-advanced-filter__secondary",
+              onClick: d[3] || (d[3] = (t) => s("add"))
+            }, l(e.value.addClause), 1),
+            a("div", Ae, [
+              a("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__secondary",
+                onClick: d[4] || (d[4] = (t) => s("cancel"))
+              }, l(e.value.cancel), 1),
+              a("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__primary",
+                onClick: d[5] || (d[5] = (t) => s("apply"))
+              }, l(e.value.apply), 1)
+            ])
+          ])
+        ], 16, ae)) : P("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  je as _
+};

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

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

package/dist/chunks/{DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-Ct7ZV2zk.js → DataGridAggregationsPopover.vue_vue_type_script_setup_true_lang-t6v8MqIT.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-DOWIAEUl.js";
+import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-xry4J3Lx.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-DOWIAEUl.js → DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-xry4J3Lx.js}

@@ -1,4 +1,4 @@
-import { defineComponent as Ce, inject as ke, ref as v, useAttrs as Le, computed as s, watch as V, nextTick as m, onMounted as Fe, onBeforeUnmount as Se, openBlock as b, createElementBlock as h, createElementVNode as ne, mergeProps as Ae, withModifiers as k, createBlock as Re, Teleport as Me, normalizeStyle as Be, normalizeClass as oe, Fragment as le, renderList as Ve, toDisplayString as De, createCommentVNode as U } from "vue";
+import { defineComponent as Oe, inject as ke, ref as v, useAttrs as Le, computed as s, watch as V, nextTick as m, onMounted as Fe, onBeforeUnmount as Se, openBlock as b, createElementBlock as h, createElementVNode as ne, mergeProps as Ae, withModifiers as w, createBlock as Re, Teleport as Me, normalizeStyle as Be, normalizeClass as oe, Fragment as le, renderList as Ve, toDisplayString as De, createCommentVNode as U } from "vue";
 import { d as Te, r as Pe } from "./dataGridOverlayThemeVars-vzY74EIz.js";
 function Ne(n = {}) {
   return {
@@ -58,8 +58,8 @@ function Je(n, o) {
   return r.sort((u, c) => {
     if (u.score !== c.score)
       return u.score - c.score;
-    const w = u.option.label.length, d = c.option.label.length;
-    return w !== d ? w - d : u.originalIndex - c.originalIndex;
+    const I = u.option.label.length, d = c.option.label.length;
+    return I !== d ? I - d : u.originalIndex - c.originalIndex;
   }), r.map((u) => u.option);
 }
 function Ye(n, o) {
@@ -84,7 +84,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
   class: "datagrid-cell-combobox__empty"
 }, at = {
   inheritAttrs: !1
-}, pt = /* @__PURE__ */ Ce({
+}, pt = /* @__PURE__ */ Oe({
   ...at,
   __name: "DataGridFilterableCombobox",
   props: {
@@ -101,7 +101,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
   },
   emits: ["commit", "cancel", "optionsResolved"],
   setup(n, { emit: o }) {
-    const t = n, r = o, u = ke(Te, v(null)), c = Le(), w = v(null), d = v(null), I = v(null), q = v({}), D = v({}), S = v("below"), E = v(""), T = v(!1), P = v([]), l = v(Ne({ open: !1 })), O = `datagrid-filterable-combobox-${Math.random().toString(36).slice(2, 10)}`, ue = `${O}-input`, se = `${O}-field`;
+    const t = n, r = o, u = ke(Te, v(null)), c = Le(), I = v(null), d = v(null), E = v(null), q = v({}), D = v({}), S = v("below"), C = v(""), T = v(!1), P = v([]), l = v(Ne({ open: !1 })), O = `datagrid-filterable-combobox-${Math.random().toString(36).slice(2, 10)}`, ue = `${O}-input`, se = `${O}-field`;
     let A = 0;
     const ce = s(() => {
       const {
@@ -118,9 +118,9 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
         onBlur: st,
         onKeydown: ct,
         onClick: dt,
-        ...Oe
+        ...Ce
       } = c;
-      return Oe;
+      return Ce;
     }), de = s(() => String(c.id ?? ue)), ve = s(() => String(c.name ?? se)), fe = s(() => [
       "cell-editor-control",
       "datagrid-cell-combobox__input",
@@ -136,12 +136,12 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       q.value = Pe(u.value);
     }
     function G() {
-      E.value = N.value?.label ?? t.value;
+      C.value = N.value?.label ?? t.value;
     }
     function Y() {
-      E.value = t.initialFilter;
+      C.value = t.initialFilter;
     }
-    function C(e) {
+    function k(e) {
       const a = p.value;
       if (a.length === 0) {
         l.value = {
@@ -166,7 +166,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
         const i = await t.loadOptions(e);
         if (a !== A)
           return;
-        P.value = i, r("optionsResolved", i), C(!0), m(() => {
+        P.value = i, r("optionsResolved", i), k(!0), m(() => {
           g(), x();
         });
       } finally {
@@ -187,7 +187,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       }
       if (typeof window > "u" || !d.value)
         return;
-      const e = d.value.getBoundingClientRect(), a = Math.max(e.width, 160), i = Math.min(I.value?.offsetHeight ?? 220, 260), y = window.innerHeight - e.bottom - 8 < Math.min(180, i) && e.top > i + 12;
+      const e = d.value.getBoundingClientRect(), a = Math.max(e.width, 160), i = Math.min(E.value?.offsetHeight ?? 220, 260), y = window.innerHeight - e.bottom - 8 < Math.min(180, i) && e.top > i + 12;
       S.value = y ? "above" : "below";
       const ee = y ? Math.max(8, e.top - i + 1) : Math.min(window.innerHeight - i - 8, e.bottom - 1), te = Math.min(
         Math.max(8, e.left),
@@ -203,12 +203,12 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       };
     }
     function x() {
-      if (!I.value || _.value < 0)
+      if (!E.value || _.value < 0)
         return;
-      I.value.querySelector(`[data-option-index="${_.value}"]`)?.scrollIntoView({ block: "nearest" });
+      E.value.querySelector(`[data-option-index="${_.value}"]`)?.scrollIntoView({ block: "nearest" });
     }
     function W() {
-      t.disabled || (l.value = L(l.value, !0), C(!0), m(() => {
+      t.disabled || (l.value = L(l.value, !0), k(!0), m(() => {
         if (g(), x(), d.value?.focus({ preventScroll: !0 }), !!d.value) {
           if (l.value.filter.length > 0) {
             const e = d.value.value.length;
@@ -223,14 +223,14 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       l.value = L(l.value, !1);
     }
     function _e(e) {
-      return e instanceof Node && (w.value?.contains(e) === !0 || I.value?.contains(e) === !0);
+      return e instanceof Node && (I.value?.contains(e) === !0 || E.value?.contains(e) === !0);
     }
     function xe() {
       if (l.value.filter.trim().length === 0)
         return t.value;
       if (R.value)
         return R.value.value;
-      const e = E.value.trim().toLocaleLowerCase();
+      const e = C.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 Z(e = "stay") {
@@ -252,7 +252,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       if (t.disabled)
         return;
       const a = e.target.value;
-      E.value = a, l.value = X(l.value, a), l.value = L(l.value, !0), C(!1), m(() => {
+      C.value = a, l.value = X(l.value, a), l.value = L(l.value, !0), k(!1), m(() => {
         g(), x();
       }), t.loadOptions && H(a);
     }
@@ -294,11 +294,11 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       $.value && g();
     }
     return V(() => t.options, () => {
-      t.loadOptions || (C(!0), m(g));
+      t.loadOptions || (k(!0), m(g));
     }, { immediate: !0 }), V(() => t.value, () => {
       G();
     }), V(() => t.initialFilter, (e) => {
-      document.activeElement !== d.value && (l.value = X(l.value, e), e.length > 0 ? (Y(), H(e)) : G(), C(!0), m(() => {
+      document.activeElement !== d.value && (l.value = X(l.value, e), e.length > 0 ? (Y(), H(e)) : G(), k(!0), m(() => {
         g(), x();
       }));
     }), V(() => t.disabled, (e) => {
@@ -309,7 +309,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
       typeof window < "u" && (window.removeEventListener("resize", B), window.removeEventListener("scroll", B, !0));
     }), (e, a) => (b(), h("div", {
       ref_key: "rootEl",
-      ref: w,
+      ref: I,
       class: "datagrid-cell-combobox"
     }, [
       ne("input", Ae({
@@ -322,7 +322,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
         style: pe.value,
         type: "text",
         role: "combobox",
-        value: E.value,
+        value: C.value,
         placeholder: e.placeholder,
         disabled: e.disabled,
         "aria-expanded": $.value ? "true" : "false",
@@ -330,11 +330,13 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
         "aria-autocomplete": "list",
         "aria-activedescendant": be.value,
         onFocus: ye,
-        onMousedown: a[0] || (a[0] = k(() => {
+        onMousedown: a[0] || (a[0] = w(() => {
         }, ["stop"])),
-        onClick: k(ge, ["stop"]),
+        onContextmenu: a[1] || (a[1] = w(() => {
+        }, ["stop"])),
+        onClick: w(ge, ["stop"]),
         onInput: we,
-        onKeydown: k(Ee, ["stop"]),
+        onKeydown: w(Ee, ["stop"]),
         onBlur: Ie
       }), null, 16, Ze),
       (b(), Re(Me, {
@@ -345,7 +347,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
           key: 0,
           id: O,
           ref_key: "panelEl",
-          ref: I,
+          ref: E,
           class: oe(["datagrid-cell-combobox__panel", {
             "datagrid-cell-combobox__panel--inline": e.inlinePanel,
             "datagrid-cell-combobox__panel--attached-below": S.value === "below",
@@ -354,7 +356,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
           "data-affino-popover-sticky": e.stickyPopoverId || void 0,
           style: Be([q.value, D.value]),
           role: "listbox",
-          onMousedown: a[1] || (a[1] = k(() => {
+          onMousedown: a[2] || (a[2] = w(() => {
           }, ["prevent"]))
         }, [
           T.value ? (b(), h("div", et, "Loading options...")) : (b(), h(le, { key: 1 }, [
@@ -370,7 +372,7 @@ const Ze = ["id", "name", "value", "placeholder", "disabled", "aria-expanded", "
               "aria-selected": i.value === e.value ? "true" : "false",
               "data-option-index": f,
               onMousemove: (y) => K(f),
-              onClick: k((y) => Q(i.value), ["stop"])
+              onClick: w((y) => Q(i.value), ["stop"])
             }, [
               ne("span", nt, De(i.label), 1),
               i.value === e.value ? (b(), h("span", ot)) : U("", !0)