@affino/datagrid-vue-app 0.1.13 → 0.1.15

package/README.md

@@ -268,6 +268,85 @@ Recommended usage:
 - enable them together for spreadsheet-heavy editing surfaces
 - keep them off for read-only, reporting, and embedded summary tables unless the interaction model is explicitly spreadsheet-like
 
+## Custom Toolbar Modules
+
+`DataGrid` exposes a public `toolbar-modules` prop for additive toolbar actions.
+Use it when you want to keep the built-in app renderer and append custom buttons, popovers, or small workflow panels to the same toolbar row.
+
+- built-in modules such as column layout, advanced filter, and aggregations still render first
+- custom modules are appended after the built-in modules in declaration order
+- each module provides a stable `key`, a Vue `component`, and optional props passed into that component
+
+Type shape:
+
+```ts
+interface DataGridAppToolbarModule {
+  key: string
+  component: Component
+  props?: Record<string, unknown>
+}
+```
+
+Practical guidance:
+
+- use a stable `key` per module instance
+- keep the rendered trigger on the shared toolbar button class when you want built-in styling: `datagrid-app-toolbar__button`
+- add your own `data-datagrid-toolbar-action` when you want deterministic selectors for tests or analytics
+
+```vue
+<script setup lang="ts">
+import { DataGrid, type DataGridAppToolbarModule } from "@affino/datagrid-vue-app"
+import { defineComponent, h } from "vue"
+
+const ExportButton = defineComponent({
+  name: "ExportButton",
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    onTrigger: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => h("button", {
+      type: "button",
+      class: "datagrid-app-toolbar__button",
+      onClick: () => props.onTrigger(),
+    }, props.label)
+  },
+})
+
+const toolbarModules: readonly DataGridAppToolbarModule[] = [
+  {
+    key: "export",
+    component: ExportButton,
+    props: {
+      label: "Export",
+      onTrigger: () => {
+        console.log("export current view")
+      },
+    },
+  },
+]
+</script>
+
+<template>
+  <DataGrid
+    :rows="rows"
+    :columns="columns"
+    :toolbar-modules="toolbarModules"
+    column-layout
+    advanced-filter
+  />
+</template>
+```
+
+Prefer `toolbar-modules` over replacing the whole default slot when the only goal is to extend the built-in toolbar.
+Use the default slot only when you need to take over the entire runtime renderer contract.
+
 ## Declarative Column Menu
 
 Enable the built-in header menu with one prop:
@@ -1106,6 +1185,8 @@ The component emits:
 
 - `cell-change`
 - `selection-change`
+- `row-selection-change`
+- `row-select` (legacy alias; prefer `row-selection-change` for typed row-selection snapshots)
 - `update:column-state`
 - `update:column-order`
 - `update:hidden-column-keys`
@@ -1114,6 +1195,11 @@ The component emits:
 - `update:state`
 - `ready`
 
+## Advanced Filter UX
+
+- 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.
+
 ## Ref API
 
 ### Runtime access

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";
@@ -212,7 +213,28 @@ 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: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[];
@@ -409,19 +431,27 @@ 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: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>[];
@@ -455,6 +485,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;

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 _
 };

package/dist/chunks/{DataGridGanttStage.vue_vue_type_script_setup_true_lang-BY-MSNPc.js → DataGridGanttStage.vue_vue_type_script_setup_true_lang-DPozU5Z5.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-Cec3mpHC.js";
+import { o as Pn, q as Dn, _ as Wn } from "./DataGridTableStage.vue_vue_type_script_setup_true_lang-C9CKLdfN.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-DgXw3IJw.js → DataGridGanttStageEntry-BnzXZ_y8.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-BY-MSNPc.js";
+import { _ as a } from "./DataGridGanttStage.vue_vue_type_script_setup_true_lang-DPozU5Z5.js";
 import { normalizeDataGridGanttOptions as n } from "@affino/datagrid-gantt";
 const m = e({
   name: "DataGridGanttStageEntry",

package/dist/chunks/{DataGridTableStage.vue_vue_type_script_setup_true_lang-Cec3mpHC.js → DataGridTableStage.vue_vue_type_script_setup_true_lang-C9CKLdfN.js}

@@ -2477,6 +2477,9 @@ const Wo = ["data-datagrid-pivot-group-label", "data-datagrid-pivot-group-span",
 }
 
 .datagrid-app-toolbar__button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   height: 32px;
   padding: 0 12px;
   border: 1px solid var(--datagrid-filter-trigger-border);
@@ -2515,6 +2518,25 @@ const Wo = ["data-datagrid-pivot-group-label", "data-datagrid-pivot-group-span",
   background: color-mix(in srgb, var(--datagrid-accent-strong) 14%, var(--datagrid-editor-bg));
 }
 
+.datagrid-app-toolbar__button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 14px;
+}
+
+.datagrid-app-toolbar__button-icon svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.datagrid-app-toolbar__button-icon--advanced-filter {
+  color: var(--datagrid-accent-strong);
+}
+
 .datagrid-column-layout {
   display: flex;
   flex-direction: column;