@affino/datagrid-vue-app 0.1.14 → 0.1.16

package/README.md

@@ -1019,6 +1019,8 @@ Supported preset names:
 
 The public component exposes full grid state round-tripping.
 
+When `state` is the only controlled input, the built-in app toolbar and filter affordances derive their effective sort, filter, grouping, and pivot state from that unified snapshot. You do not need to mirror the same payload back into separate `sort-model`, `filter-model`, `group-by`, or `pivot-model` props just to keep the default renderer synchronized.
+
 Controlled state:
 
 ```vue
@@ -1050,6 +1052,38 @@ function importState(raw: unknown) {
   }
 }
 
+`applyState()` and `applySavedView()` also queue the restore until the runtime and declared columns are ready. Host pages can restore presets before async column definitions finish loading instead of maintaining a separate pending-saved-view scheduler.
+
+Saved views sanitize transient transaction history before serialization and restore. The persisted envelope keeps layout, filters, grouping, pivoting, row selection, and `viewMode`, but drops undo/redo history.
+
+### Controlled Row Selection
+
+`rowSelection` still enables the built-in checkbox column and header select-all control. When a page wants to own the selected-row snapshot directly, use `rowSelectionState` with `update:rowSelectionState`.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import { DataGrid } from "@affino/datagrid-vue-app"
+
+const rowSelectionState = ref({
+  focusedRow: null,
+  selectedRows: ["r2"],
+})
+</script>
+
+<template>
+  <DataGrid
+    :rows="rows"
+    :columns="columns"
+    row-selection
+    :row-selection-state="rowSelectionState"
+    @update:row-selection-state="rowSelectionState = $event"
+  />
+</template>
+```
+
+The legacy `row-select` event still exists, but `rowSelectionState` is the stable controlled API when the page wants to bind selected row ids without diffing unified-state updates.
+
 function exportSavedView() {
   return gridRef.value?.getSavedView()
 }

package/dist/DataGrid.d.ts

@@ -1,5 +1,6 @@
 import { type PropType, type VNode } from "vue";
-import { type CreateDataGridCoreOptions, type DataGridApiPluginDefinition, type DataGridAggregationModel, type DataGridColumnPin, type DataGridComputedFieldDefinition, type DataGridCoreServiceRegistry, type DataGridFilterSnapshot, type DataGridFormulaFieldDefinition, type DataGridFormulaFunctionRegistry, type DataGridRowModel, 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 DataGridColumnPin, type DataGridComputedFieldDefinition, type DataGridCoreServiceRegistry, type DataGridFilterSnapshot, type DataGridFormulaFieldDefinition, type DataGridFormulaFunctionRegistry, type DataGridGroupBySpec, type DataGridRowSelectionSnapshot, type DataGridRowModel, type DataGridSetStateOptions, type DataGridSortState, type DataGridUnifiedColumnState, type DataGridUnifiedState, type DataGridPivotSpec } from "@affino/datagrid-vue";
+import type { DataGridAppToolbarModule } from "./host/DataGridModuleHost";
 import { type DataGridAppClientRowModelOptions, type DataGridAppColumnInput } from "./config/dataGridFormulaOptions";
 import { type DataGridThemeProp } from "./theme/dataGridTheme";
 import { type DataGridGroupByProp, type DataGridPaginationProp } from "./config/dataGridPublicProps";
@@ -96,6 +97,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    rowSelectionState: {
+        type: PropType<DataGridRowSelectionSnapshot | null | undefined>;
+        default: undefined;
+    };
     pageSize: {
         type: PropType<number | undefined>;
         default: undefined;
@@ -212,7 +217,29 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataGridGanttProp | undefined>;
         default: undefined;
     };
-}, () => VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cell-change" | "selection-change" | "row-select" | "update:columnState" | "update:columnOrder" | "update:hiddenColumnKeys" | "update:columnWidths" | "update:columnPins" | "update:groupBy" | "update:viewMode" | "update:state" | "ready")[], "cell-change" | "selection-change" | "row-select" | "update:columnState" | "update:columnOrder" | "update:hiddenColumnKeys" | "update:columnWidths" | "update:columnPins" | "update:groupBy" | "update:viewMode" | "update:state" | "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    toolbarModules: {
+        type: PropType<readonly DataGridAppToolbarModule[]>;
+        default: () => never[];
+    };
+}, () => VNode, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "cell-change": (_payload: unknown) => true;
+    "selection-change": (_payload: DataGridApiSelectionChangedEvent) => true;
+    "row-selection-change": (_payload: DataGridApiRowSelectionChangedEvent) => true;
+    "row-select": (_payload: DataGridRowSelectionSnapshot | null) => true;
+    "update:rowSelectionState": (_payload: DataGridRowSelectionSnapshot | null) => true;
+    "update:columnState": (_payload: DataGridUnifiedColumnState | null) => true;
+    "update:columnOrder": (_payload: readonly string[] | null) => true;
+    "update:hiddenColumnKeys": (_payload: readonly string[] | null) => true;
+    "update:columnWidths": (_payload: Readonly<Record<string, number | null>> | null) => true;
+    "update:columnPins": (_payload: Readonly<Record<string, DataGridColumnPin>> | null) => true;
+    "update:groupBy": (_payload: DataGridGroupBySpec | null) => true;
+    "update:viewMode": (_payload: DataGridAppViewMode) => true;
+    "update:state": (_payload: DataGridUnifiedState<Record<string, unknown>> | null) => true;
+    ready: (_payload: {
+        api: DataGridApi<Record<string, unknown>>;
+        rowModel: DataGridRowModel<Record<string, unknown>> | null;
+    }) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     rows: {
         type: PropType<readonly unknown[]>;
         default: () => never[];
@@ -293,6 +320,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    rowSelectionState: {
+        type: PropType<DataGridRowSelectionSnapshot | null | undefined>;
+        default: undefined;
+    };
     pageSize: {
         type: PropType<number | undefined>;
         default: undefined;
@@ -409,19 +440,28 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataGridGanttProp | undefined>;
         default: undefined;
     };
+    toolbarModules: {
+        type: PropType<readonly DataGridAppToolbarModule[]>;
+        default: () => never[];
+    };
 }>> & {
-    "onCell-change"?: ((...args: any[]) => any) | undefined;
-    "onSelection-change"?: ((...args: any[]) => any) | undefined;
-    "onRow-select"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:columnState"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:columnOrder"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:hiddenColumnKeys"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:columnWidths"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:columnPins"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:groupBy"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:viewMode"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:state"?: ((...args: any[]) => any) | undefined;
-    onReady?: ((...args: any[]) => any) | undefined;
+    "onCell-change"?: ((_payload: unknown) => any) | undefined;
+    "onSelection-change"?: ((_payload: DataGridApiSelectionChangedEvent) => any) | undefined;
+    "onRow-selection-change"?: ((_payload: DataGridApiRowSelectionChangedEvent) => any) | undefined;
+    "onRow-select"?: ((_payload: DataGridRowSelectionSnapshot | null) => any) | undefined;
+    "onUpdate:rowSelectionState"?: ((_payload: DataGridRowSelectionSnapshot | null) => any) | undefined;
+    "onUpdate:columnState"?: ((_payload: DataGridUnifiedColumnState | null) => any) | undefined;
+    "onUpdate:columnOrder"?: ((_payload: readonly string[] | null) => any) | undefined;
+    "onUpdate:hiddenColumnKeys"?: ((_payload: readonly string[] | null) => any) | undefined;
+    "onUpdate:columnWidths"?: ((_payload: Readonly<Record<string, number | null>> | null) => any) | undefined;
+    "onUpdate:columnPins"?: ((_payload: Readonly<Record<string, DataGridColumnPin>> | null) => any) | undefined;
+    "onUpdate:groupBy"?: ((_payload: DataGridGroupBySpec | null) => any) | undefined;
+    "onUpdate:viewMode"?: ((_payload: DataGridAppViewMode) => any) | undefined;
+    "onUpdate:state"?: ((_payload: DataGridUnifiedState<Record<string, unknown>> | null) => any) | undefined;
+    onReady?: ((_payload: {
+        api: DataGridApi<Record<string, unknown>>;
+        rowModel: DataGridRowModel<Record<string, unknown>> | null;
+    }) => any) | undefined;
 }, {
     rows: readonly unknown[];
     columns: readonly DataGridAppColumnInput<unknown>[];
@@ -434,12 +474,12 @@ declare const _default: import("vue").DefineComponent<{
     isCellEditable: DataGridCellEditablePredicate<Record<string, unknown>> | undefined;
     rowSelection: boolean;
     gantt: DataGridGanttProp | undefined;
-    virtualization: DataGridVirtualizationProp | undefined;
-    pagination: DataGridPaginationProp | undefined;
     rowModel: DataGridRowModel<unknown> | undefined;
-    aggregations: DataGridAggregationsProp | undefined;
     baseRowHeight: number;
     state: DataGridUnifiedState<Record<string, unknown>> | null | undefined;
+    virtualization: DataGridVirtualizationProp | undefined;
+    pagination: DataGridPaginationProp | undefined;
+    aggregations: DataGridAggregationsProp | undefined;
     sortModel: readonly DataGridSortState[] | undefined;
     filterModel: DataGridFilterSnapshot | null | undefined;
     groupBy: DataGridGroupByProp | undefined;
@@ -455,6 +495,7 @@ declare const _default: import("vue").DefineComponent<{
     fillHandle: boolean;
     rangeMove: boolean;
     viewMode: DataGridAppViewMode | undefined;
+    toolbarModules: readonly DataGridAppToolbarModule[];
     pageSize: number | undefined;
     currentPage: number | undefined;
     startupOrder: readonly import("@affino/datagrid-core").DataGridCoreServiceName[] | undefined;
@@ -462,11 +503,12 @@ declare const _default: import("vue").DefineComponent<{
     plugins: readonly DataGridApiPluginDefinition<unknown>[];
     services: DataGridRuntimeOverrides | undefined;
     autoStart: boolean;
+    columnState: DataGridUnifiedColumnState | null | undefined;
     computedFields: readonly DataGridComputedFieldDefinition<unknown>[] | null | undefined;
     formulas: readonly DataGridFormulaFieldDefinition[] | null | undefined;
     formulaFunctions: Readonly<Record<string, import("@affino/datagrid-formula-engine").DataGridFormulaFunctionDefinition | ((args: readonly import("@affino/datagrid-formula-engine").DataGridFormulaValue[], context?: import("@affino/datagrid-formula-engine").DataGridComputedFieldComputeContext<unknown>) => unknown)>> | null | undefined;
     aggregationModel: DataGridAggregationModel<Record<string, unknown>> | null | undefined;
-    columnState: DataGridUnifiedColumnState | null | undefined;
+    rowSelectionState: DataGridRowSelectionSnapshot | null | undefined;
     columnOrder: readonly string[] | null | undefined;
     hiddenColumnKeys: readonly string[] | null | undefined;
     columnWidths: Readonly<Record<string, number | null>> | null | undefined;

package/dist/advanced-filter.js

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

package/dist/chunks/{DataGridAdvancedFilterPopover-Bak_CkaO.js → DataGridAdvancedFilterPopover-CabJ-Ztk.js}

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

package/dist/chunks/{DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-DixN56Qv.js → DataGridAdvancedFilterPopover.vue_vue_type_script_setup_true_lang-x-cfVm5j.js}

@@ -1,19 +1,34 @@
-import { defineComponent as j, inject as q, ref as O, computed as c, watch as m, nextTick as k, openBlock as n, createElementBlock as s, Fragment as b, createElementVNode as e, mergeProps as w, unref as _, toDisplayString as P, createBlock as D, Teleport as z, renderList as S, createVNode as y, createCommentVNode as G } from "vue";
+import { defineComponent as q, inject as D, ref as k, computed as c, watch as m, nextTick as w, openBlock as d, createElementBlock as i, Fragment as b, createElementVNode as e, mergeProps as A, unref as _, createCommentVNode as P, createTextVNode as L, toDisplayString as y, createBlock as z, Teleport as G, renderList as I, createVNode as h } from "vue";
 import { usePopoverController as J, useFloatingPopover as K } from "@affino/popover-vue";
-import { d as L, r as H, _ as h } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
-const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("div", null, [
+import { d as M, r as Z, _ as C } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_1TDQseN.js";
+const H = ["data-datagrid-advanced-filter-active"], Q = {
+  key: 0,
+  class: "datagrid-app-toolbar__button-icon datagrid-app-toolbar__button-icon--advanced-filter",
+  "data-datagrid-advanced-filter-icon": "true",
+  "aria-hidden": "true"
+}, U = /* @__PURE__ */ e("svg", {
+  viewBox: "0 0 16 16",
+  focusable: "false"
+}, [
+  /* @__PURE__ */ e("path", {
+    d: "M2 3.5h12l-4.6 5.2v3.2l-2.8 1.6V8.7L2 3.5Z",
+    fill: "currentColor"
+  })
+], -1), W = [
+  U
+], X = { class: "datagrid-advanced-filter__header" }, Y = /* @__PURE__ */ e("div", null, [
   /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__eyebrow" }, "Advanced filter"),
   /* @__PURE__ */ e("h3", { class: "datagrid-advanced-filter__title" }, "Build clause-based filter")
-], -1), U = { class: "datagrid-advanced-filter__applied" }, W = { class: "datagrid-advanced-filter__applied-head" }, X = /* @__PURE__ */ e("div", null, [
+], -1), x = { class: "datagrid-advanced-filter__applied" }, ee = { class: "datagrid-advanced-filter__applied-head" }, ae = /* @__PURE__ */ e("div", null, [
   /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__eyebrow" }, "Applied on table"),
   /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__applied-title" }, "Current filters")
-], -1), Y = ["disabled"], Z = {
+], -1), te = ["disabled"], le = {
   key: 0,
   class: "datagrid-advanced-filter__applied-list"
-}, x = {
+}, oe = {
   key: 1,
   class: "datagrid-advanced-filter__applied-empty"
-}, ee = { class: "datagrid-advanced-filter__rows" }, ae = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, te = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Join", -1), le = { class: "datagrid-advanced-filter__field" }, oe = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Column", -1), de = { class: "datagrid-advanced-filter__field" }, ne = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Operator", -1), ie = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, se = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Value", -1), re = ["value", "onInput"], ce = { class: "datagrid-advanced-filter__row-actions" }, ue = ["disabled", "onClick"], pe = { class: "datagrid-advanced-filter__footer" }, ve = { class: "datagrid-advanced-filter__footer-actions" }, me = /* @__PURE__ */ j({
+}, de = { class: "datagrid-advanced-filter__rows" }, ne = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, ie = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Join", -1), re = { class: "datagrid-advanced-filter__field" }, se = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Column", -1), ce = { class: "datagrid-advanced-filter__field" }, ue = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Operator", -1), pe = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, ve = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Value", -1), _e = ["value", "onInput"], fe = { class: "datagrid-advanced-filter__row-actions" }, ge = ["onClick"], me = { class: "datagrid-advanced-filter__footer" }, be = { class: "datagrid-advanced-filter__footer-actions" }, Oe = /* @__PURE__ */ q({
   __name: "DataGridAdvancedFilterPopover",
   props: {
     isOpen: { type: Boolean },
@@ -22,14 +37,15 @@ const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("
     appliedFilterSummaryItems: { default: () => [] },
     hasAnyFilters: { type: Boolean, default: !1 },
     buttonLabel: { default: "Advanced filter" },
-    active: { type: Boolean, default: !1 }
+    active: { type: Boolean, default: !1 },
+    showActiveIcon: { type: Boolean, default: !1 }
   },
   emits: ["open", "add", "remove", "apply", "cancel", "reset-all", "update-clause"],
-  setup(T, { emit: A }) {
+  setup(T, { emit: S }) {
     const F = Object.freeze([
       { value: "and", label: "AND" },
       { value: "or", label: "OR" }
-    ]), I = Object.freeze([
+    ]), N = Object.freeze([
       { value: "contains", label: "Contains" },
       { value: "equals", label: "Equals" },
       { value: "not-equals", label: "Not equals" },
@@ -39,7 +55,7 @@ const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("
       { value: "gte", label: ">=" },
       { value: "lt", label: "<" },
       { value: "lte", label: "<=" }
-    ]), u = T, d = A, C = q(L, O(null)), f = O({}), o = J(
+    ]), u = T, n = S, O = D(M, k(null)), f = k({}), o = J(
       {
         id: "advanced-filter",
         role: "dialog",
@@ -48,13 +64,13 @@ const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("
       },
       {
         onOpen: () => {
-          u.isOpen || d("open"), g();
+          u.isOpen || n("open"), g();
         },
         onClose: () => {
-          u.isOpen && d("cancel");
+          u.isOpen && n("cancel");
         }
       }
-    ), r = K(o, {
+    ), s = K(o, {
       placement: "bottom",
       align: "start",
       gutter: 10,
@@ -62,7 +78,7 @@ const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("
       zIndex: 180,
       lockScroll: !1,
       returnFocus: !0
-    }), R = c(() => o.getTriggerProps({ role: "dialog" })), N = c(() => o.getContentProps({ role: "dialog", tabIndex: -1 })), E = c(() => o.state.value.open), V = c(() => r.contentStyle.value), $ = c(() => r.teleportTarget.value), B = c(() => u.columns.map((t) => ({
+    }), R = c(() => o.getTriggerProps({ role: "dialog" })), V = c(() => o.getContentProps({ role: "dialog", tabIndex: -1 })), B = c(() => o.state.value.open), E = c(() => s.contentStyle.value), $ = c(() => s.teleportTarget.value), j = c(() => u.columns.map((t) => ({
       value: t.key,
       label: t.label
     })));
@@ -70,75 +86,80 @@ const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("
       () => u.isOpen,
       async (t) => {
         if (t) {
-          g(), o.state.value.open || o.open("programmatic"), await k(), r.contentRef.value?.querySelector('[data-advanced-filter-autofocus="true"]')?.focus({ preventScroll: !0 }), await r.updatePosition();
+          g(), o.state.value.open || o.open("programmatic"), await w(), s.contentRef.value?.querySelector('[data-advanced-filter-autofocus="true"]')?.focus({ preventScroll: !0 }), await s.updatePosition();
           return;
         }
         o.state.value.open && o.close("programmatic");
       },
       { immediate: !0 }
-    ), m(C, () => {
+    ), m(O, () => {
       o.state.value.open && g();
     }), m(
       () => u.clauses.length,
       async () => {
-        o.state.value.open && (await k(), await r.updatePosition());
+        o.state.value.open && (await w(), await s.updatePosition());
       }
     );
     function g() {
-      f.value = H(C.value);
+      f.value = Z(O.value);
     }
     function p(t, l, a) {
-      d("update-clause", { clauseId: t, field: l, value: a });
+      n("update-clause", { clauseId: t, field: l, value: a });
     }
-    return (t, l) => (n(), s(b, null, [
-      e("button", w({
-        ref: _(r).triggerRef,
+    return (t, l) => (d(), i(b, null, [
+      e("button", A({
+        ref: _(s).triggerRef,
         type: "button",
         class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": t.active }],
+        "data-datagrid-toolbar-action": "advanced-filter",
+        "data-datagrid-advanced-filter-active": t.showActiveIcon ? "true" : "false",
         style: f.value
-      }, R.value), P(t.buttonLabel), 17),
-      (n(), D(z, { to: $.value }, [
-        E.value ? (n(), s("section", w({
+      }, R.value), [
+        t.showActiveIcon ? (d(), i("span", Q, W)) : P("", !0),
+        L(" " + y(t.buttonLabel), 1)
+      ], 16, H),
+      (d(), z(G, { to: $.value }, [
+        B.value ? (d(), i("section", A({
           key: 0,
-          ref: _(r).contentRef,
+          ref: _(s).contentRef,
           class: "datagrid-advanced-filter",
           "data-datagrid-overlay-surface": "true",
-          style: [V.value, f.value]
-        }, N.value), [
-          e("header", M, [
-            Q,
+          style: [E.value, f.value]
+        }, V.value), [
+          e("header", X, [
+            Y,
             e("button", {
               type: "button",
               class: "datagrid-advanced-filter__ghost",
-              onClick: l[0] || (l[0] = (a) => d("cancel"))
+              onClick: l[0] || (l[0] = (a) => n("cancel"))
             }, " Close ")
           ]),
-          e("section", U, [
-            e("div", W, [
-              X,
+          e("section", x, [
+            e("div", ee, [
+              ae,
               e("button", {
                 type: "button",
                 class: "datagrid-advanced-filter__ghost",
                 disabled: !t.hasAnyFilters,
                 "data-datagrid-advanced-filter-action": "reset-all",
-                onClick: l[1] || (l[1] = (a) => d("reset-all"))
-              }, " Reset all filters ", 8, Y)
+                onClick: l[1] || (l[1] = (a) => n("reset-all"))
+              }, " Reset all filters ", 8, te)
             ]),
-            t.appliedFilterSummaryItems.length > 0 ? (n(), s("div", Z, [
-              (n(!0), s(b, null, S(t.appliedFilterSummaryItems, (a, v) => (n(), s("span", {
+            t.appliedFilterSummaryItems.length > 0 ? (d(), i("div", le, [
+              (d(!0), i(b, null, I(t.appliedFilterSummaryItems, (a, v) => (d(), i("span", {
                 key: `applied-filter-${v}`,
                 class: "datagrid-advanced-filter__applied-chip"
-              }, P(a), 1))), 128))
-            ])) : (n(), s("div", x, " No filters applied "))
+              }, y(a), 1))), 128))
+            ])) : (d(), i("div", oe, " No filters applied "))
           ]),
-          e("div", ee, [
-            (n(!0), s(b, null, S(t.clauses, (a, v) => (n(), s("div", {
+          e("div", de, [
+            (d(!0), i(b, null, I(t.clauses, (a, v) => (d(), i("div", {
               key: a.id,
               class: "datagrid-advanced-filter__row"
             }, [
-              e("label", ae, [
-                te,
-                y(h, {
+              e("label", ne, [
+                ie,
+                h(C, {
                   class: "datagrid-advanced-filter__select",
                   value: a.join,
                   options: _(F),
@@ -147,80 +168,79 @@ const M = { class: "datagrid-advanced-filter__header" }, Q = /* @__PURE__ */ e("
                   "sticky-popover-id": "advanced-filter",
                   disabled: v === 0,
                   "aria-label": "Join operator",
-                  onCommit: (i) => p(a.id, "join", i)
+                  onCommit: (r) => p(a.id, "join", r)
                 }, null, 8, ["value", "options", "disabled", "onCommit"])
               ]),
-              e("label", le, [
-                oe,
-                y(h, {
+              e("label", re, [
+                se,
+                h(C, {
                   class: "datagrid-advanced-filter__select",
                   value: a.columnKey,
-                  options: B.value,
+                  options: j.value,
                   "open-on-mount": !1,
                   "open-on-focus": !1,
                   "sticky-popover-id": "advanced-filter",
                   "data-advanced-filter-autofocus": v === 0 ? "true" : null,
                   "aria-label": "Column",
-                  onCommit: (i) => p(a.id, "columnKey", i)
+                  onCommit: (r) => p(a.id, "columnKey", r)
                 }, null, 8, ["value", "options", "data-advanced-filter-autofocus", "onCommit"])
               ]),
-              e("label", de, [
-                ne,
-                y(h, {
+              e("label", ce, [
+                ue,
+                h(C, {
                   class: "datagrid-advanced-filter__select",
                   value: a.operator,
-                  options: _(I),
+                  options: _(N),
                   "open-on-mount": !1,
                   "open-on-focus": !1,
                   "sticky-popover-id": "advanced-filter",
                   "aria-label": "Condition operator",
-                  onCommit: (i) => p(a.id, "operator", i)
+                  onCommit: (r) => p(a.id, "operator", r)
                 }, null, 8, ["value", "options", "onCommit"])
               ]),
-              e("label", ie, [
-                se,
+              e("label", pe, [
+                ve,
                 e("input", {
                   value: a.value,
                   type: "text",
                   placeholder: "Value",
                   "aria-label": "Condition value",
-                  onInput: (i) => p(a.id, "value", i.target.value)
-                }, null, 40, re)
+                  onInput: (r) => p(a.id, "value", r.target.value)
+                }, null, 40, _e)
               ]),
-              e("div", ce, [
+              e("div", fe, [
                 e("button", {
                   type: "button",
                   class: "datagrid-advanced-filter__ghost datagrid-advanced-filter__ghost--danger",
-                  disabled: t.clauses.length <= 1,
-                  onClick: (i) => d("remove", a.id)
-                }, " Remove ", 8, ue)
+                  onClick: (r) => n("remove", a.id)
+                }, y(t.clauses.length <= 1 ? "Clear" : "Remove"), 9, ge)
               ])
             ]))), 128))
           ]),
-          e("footer", pe, [
+          e("footer", me, [
             e("button", {
               type: "button",
               class: "datagrid-advanced-filter__secondary",
-              onClick: l[2] || (l[2] = (a) => d("add"))
+              onClick: l[2] || (l[2] = (a) => n("add"))
             }, " Add clause "),
-            e("div", ve, [
+            e("div", be, [
               e("button", {
                 type: "button",
                 class: "datagrid-advanced-filter__secondary",
-                onClick: l[3] || (l[3] = (a) => d("cancel"))
+                onClick: l[3] || (l[3] = (a) => n("cancel"))
               }, " Cancel "),
               e("button", {
                 type: "button",
                 class: "datagrid-advanced-filter__primary",
-                onClick: l[4] || (l[4] = (a) => d("apply"))
+                onClick: l[4] || (l[4] = (a) => n("apply"))
               }, " Apply ")
             ])
           ])
-        ], 16)) : G("", !0)
+        ], 16)) : P("", !0)
       ], 8, ["to"]))
     ], 64));
   }
 });
 export {
-  me as _
+  Oe as _
 };