@affino/datagrid-vue-app 0.1.24 → 0.1.26

package/README.md

@@ -16,6 +16,7 @@ Boundary doc:
 Public export:
 
 - `DataGrid`
+- `DataGridModuleHost`
 
 The package ships its own runtime table-stage styles, so the default renderer does not depend on sandbox CSS.
 
@@ -187,6 +188,65 @@ Normalization rules:
 - if both limits are present and `maxRows < minRows`, `maxRows` is clamped up to `minRows`
 - prefer `fill` for full-screen shells such as split gantt layouts and `auto-height` for embedded cards, stacked dashboard sections, and form flows
 
+## Chrome Layout
+
+`DataGrid` now exposes package-level chrome controls so apps do not need CSS overrides just to remove the default toolbar-to-stage gap or collapse spreadsheet shells into a single surface.
+
+- `chrome.toolbarPlacement`: `"stacked"`, `"integrated"`, or `"hidden"`
+- `chrome.density`: `"comfortable"` or `"compact"`
+- `chrome.toolbarGap`: controls `--datagrid-app-layout-gap`
+- `chrome.workspaceGap`: controls `--datagrid-app-workspace-gap`
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :chrome="{
+    toolbarPlacement: 'integrated',
+    density: 'compact',
+    toolbarGap: 0,
+    workspaceGap: 8,
+  }"
+  :history="{ controls: true }"
+/>
+```
+
+Notes:
+
+- `stacked` keeps the previous app-shell structure and remains the default
+- `integrated` renders the toolbar inside the same surface as the table with a divider instead of a vertical gap
+- `hidden` disables the internal toolbar renderer so the host can place modules in its own header
+- gantt currently falls back to `stacked` when `integrated` is requested
+
+When you hide the internal toolbar, the component emits the resolved built-in plus custom toolbar modules through `@toolbar-modules-change`, and the package exports `DataGridModuleHost` so the host can render the exact same modules externally.
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import {
+  DataGrid,
+  DataGridModuleHost,
+  type DataGridAppToolbarModule,
+} from "@affino/datagrid-vue-app"
+
+const toolbarModules = ref<readonly DataGridAppToolbarModule[]>([])
+</script>
+
+<template>
+  <header class="sheet-header">
+    <DataGridModuleHost :modules="toolbarModules" />
+  </header>
+
+  <DataGrid
+    :rows="rows"
+    :columns="columns"
+    :history="{ controls: true }"
+    :chrome="{ toolbarPlacement: 'hidden' }"
+    @toolbar-modules-change="toolbarModules = $event"
+  />
+</template>
+```
+
 ## Placeholder Rows
 
 `DataGrid` can render an Excel-like visual tail without forcing your app to persist empty records up front.
@@ -525,6 +585,36 @@ const columnMenu: DataGridColumnMenuProp = {
         console.log("Insert before", columnKey)
       },
     },
+    {
+      key: "organize",
+      kind: "submenu",
+      label: "Organize",
+      placement: "end",
+      items: [
+        {
+          key: "duplicate",
+          label: "Duplicate column",
+          onSelect: ({ columnKey }) => {
+            console.log("Duplicate", columnKey)
+          },
+        },
+        {
+          key: "advanced",
+          kind: "submenu",
+          label: "Advanced",
+          items: [
+            {
+              key: "freeze-snapshot",
+              label: "Freeze current layout",
+              onSelect: ({ columnKey, closeMenu }) => {
+                console.log("Freeze", columnKey)
+                closeMenu()
+              },
+            },
+          ],
+        },
+      ],
+    },
   ],
   columns: {
     amount: {
@@ -582,10 +672,12 @@ Supported app-level menu controls:
 Custom menu items support:
 
 - `key`: stable item id
+- `kind`: `item` (default) or `submenu`
 - `label`: rendered menu text
 - `placement`: `start`, `end`, `before:sort`, `after:sort`, `before:group`, `after:group`, `before:pin`, `after:pin`, `before:filter`, `after:filter`
 - `hidden`, `disabled`, `disabledReason`
-- `onSelect(context)`: callback with `{ columnKey, columnLabel, closeMenu }`
+- `onSelect(context)`: callback with `{ columnKey, columnLabel, closeMenu }` for leaf items
+- `items`: nested submenu entries when `kind: "submenu"`
 
 Grouping triggered from the built-in column menu updates the public controlled
 surface through `@update:groupBy` / `v-model:groupBy`.
@@ -1472,6 +1564,31 @@ 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.
 
+## 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.
+
+## Row Reorder
+
+Row drag-and-drop is declarative and opt-in.
+
+- `rowReorder: true` enables drag reorder from the row index column
+- `rowReorder: false` keeps the row index non-draggable
+- the feature only applies when the grid is using a mutable rows API and `showRowIndex` is enabled
+- placeholder rows, group rows, and pinned rows are not draggable
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :show-row-index="true"
+  :row-reorder="true"
+/>
+```
+
+If you need to ship the UI but keep row order locked, leave `rowReorder` unset or pass `false`.
+
 ## Ref API
 
 ### Runtime access

package/dist/DataGrid.d.ts

@@ -2,6 +2,7 @@ import { type PropType, type VNode } from "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 DataGridChromeProp } from "./config/dataGridChrome";
 import { type DataGridThemeProp } from "./theme/dataGridTheme";
 import { type DataGridGroupByProp, type DataGridPaginationProp } from "./config/dataGridPublicProps";
 import { type DataGridAdvancedFilterProp } from "./config/dataGridAdvancedFilter";
@@ -10,6 +11,7 @@ import { type DataGridGridLinesProp } from "./config/dataGridGridLines";
 import { type DataGridLayoutMode } from "./config/dataGridLayout";
 import { type DataGridPlaceholderRowsProp } from "./config/dataGridPlaceholderRows";
 import { type DataGridColumnLayoutProp } from "./config/dataGridColumnLayout";
+import { type DataGridRowReorderProp } from "./config/dataGridRowReorder";
 import { type DataGridAggregationsProp } from "./config/dataGridAggregations";
 import { type DataGridColumnMenuProp } from "./overlays/dataGridColumnMenu";
 import { type DataGridCellMenuProp, type DataGridRowIndexMenuProp } from "./overlays/dataGridContextMenu";
@@ -109,6 +111,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    rowReorder: {
+        type: PropType<DataGridRowReorderProp | undefined>;
+        default: undefined;
+    };
     rowSelectionState: {
         type: PropType<DataGridRowSelectionSnapshot | null | undefined>;
         default: undefined;
@@ -237,6 +243,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataGridHistoryProp | undefined>;
         default: undefined;
     };
+    chrome: {
+        type: PropType<DataGridChromeProp | undefined>;
+        default: undefined;
+    };
     toolbarModules: {
         type: PropType<readonly DataGridAppToolbarModule[]>;
         default: () => never[];
@@ -255,6 +265,7 @@ declare const _default: import("vue").DefineComponent<{
     "update:groupBy": (_payload: DataGridGroupBySpec | null) => true;
     "update:viewMode": (_payload: DataGridAppViewMode) => true;
     "update:state": (_payload: DataGridUnifiedState<Record<string, unknown>> | null) => true;
+    "toolbar-modules-change": (_payload: readonly DataGridAppToolbarModule[]) => true;
     ready: (_payload: {
         api: DataGridApi<Record<string, unknown>>;
         rowModel: DataGridRowModel<Record<string, unknown>> | null;
@@ -348,6 +359,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    rowReorder: {
+        type: PropType<DataGridRowReorderProp | undefined>;
+        default: undefined;
+    };
     rowSelectionState: {
         type: PropType<DataGridRowSelectionSnapshot | null | undefined>;
         default: undefined;
@@ -476,6 +491,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<DataGridHistoryProp | undefined>;
         default: undefined;
     };
+    chrome: {
+        type: PropType<DataGridChromeProp | undefined>;
+        default: undefined;
+    };
     toolbarModules: {
         type: PropType<readonly DataGridAppToolbarModule[]>;
         default: () => never[];
@@ -494,6 +513,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:groupBy"?: ((_payload: DataGridGroupBySpec | null) => any) | undefined;
     "onUpdate:viewMode"?: ((_payload: DataGridAppViewMode) => any) | undefined;
     "onUpdate:state"?: ((_payload: DataGridUnifiedState<Record<string, unknown>> | null) => any) | undefined;
+    "onToolbar-modules-change"?: ((_payload: readonly DataGridAppToolbarModule[]) => any) | undefined;
     onReady?: ((_payload: {
         api: DataGridApi<Record<string, unknown>>;
         rowModel: DataGridRowModel<Record<string, unknown>> | null;
@@ -510,6 +530,7 @@ declare const _default: import("vue").DefineComponent<{
     isCellEditable: DataGridCellEditablePredicate<Record<string, unknown>> | undefined;
     rowSelection: boolean;
     state: DataGridUnifiedState<Record<string, unknown>> | null | undefined;
+    chrome: DataGridChromeProp | undefined;
     gantt: DataGridGanttProp | undefined;
     rowModel: DataGridRowModel<unknown> | undefined;
     baseRowHeight: number;
@@ -533,6 +554,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholderRows: DataGridPlaceholderRowsProp<Record<string, unknown>> | undefined;
     fillHandle: boolean;
     rangeMove: boolean;
+    rowReorder: DataGridRowReorderProp | undefined;
     viewMode: DataGridAppViewMode | undefined;
     toolbarModules: readonly DataGridAppToolbarModule[];
     history: DataGridHistoryProp | undefined;

package/dist/advanced-filter.js

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

package/dist/chunks/{DataGridAdvancedFilterPopover-CRd9hbEZ.js → DataGridAdvancedFilterPopover-C3NQXP09.js}

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

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

@@ -0,0 +1,261 @@
+import { defineComponent as j, inject as q, ref as w, computed as v, watch as y, nextTick as P, openBlock as o, createElementBlock as n, Fragment as h, createElementVNode as e, mergeProps as I, unref as s, createCommentVNode as A, createTextVNode as G, toDisplayString as C, createBlock as L, Teleport as z, renderList as T, createVNode as O } from "vue";
+import { usePopoverController as J, useFloatingPopover as K } from "@affino/popover-vue";
+import { _ as k } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_qhryKE2.js";
+import { d as M, r as Z } from "./dataGridOverlayThemeVars-vzY74EIz.js";
+import { u as H } from "./useDataGridDraggableOverlaySurface-BgkSR_nl.js";
+const Q = ["data-datagrid-advanced-filter-active"], U = {
+  key: 0,
+  class: "datagrid-app-toolbar__button-icon datagrid-app-toolbar__button-icon--advanced-filter",
+  "data-datagrid-advanced-filter-icon": "true",
+  "aria-hidden": "true"
+}, W = /* @__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), X = [
+  W
+], Y = ["data-datagrid-overlay-dragging"], x = { class: "datagrid-advanced-filter__header" }, ee = /* @__PURE__ */ e("div", { class: "datagrid-advanced-filter__eyebrow" }, "Advanced filter", -1), ae = /* @__PURE__ */ e("h3", { class: "datagrid-advanced-filter__title" }, "Build clause-based filter", -1), te = [
+  ee,
+  ae
+], le = { class: "datagrid-advanced-filter__applied" }, de = { class: "datagrid-advanced-filter__applied-head" }, oe = /* @__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), ie = ["disabled"], ne = {
+  key: 0,
+  class: "datagrid-advanced-filter__applied-list"
+}, re = {
+  key: 1,
+  class: "datagrid-advanced-filter__applied-empty"
+}, se = { class: "datagrid-advanced-filter__rows" }, ce = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--join" }, ue = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Join", -1), ve = { class: "datagrid-advanced-filter__field" }, pe = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Column", -1), fe = { class: "datagrid-advanced-filter__field" }, _e = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Operator", -1), ge = { class: "datagrid-advanced-filter__field datagrid-advanced-filter__field--value" }, me = /* @__PURE__ */ e("span", { class: "datagrid-advanced-filter__label" }, "Value", -1), be = ["name", "value", "onInput"], ye = { class: "datagrid-advanced-filter__row-actions" }, he = ["onClick"], Ce = { class: "datagrid-advanced-filter__footer" }, Oe = { class: "datagrid-advanced-filter__footer-actions" }, Te = /* @__PURE__ */ j({
+  __name: "DataGridAdvancedFilterPopover",
+  props: {
+    isOpen: { type: Boolean },
+    clauses: {},
+    columns: {},
+    appliedFilterSummaryItems: { default: () => [] },
+    hasAnyFilters: { type: Boolean, default: !1 },
+    buttonLabel: { default: "Advanced filter" },
+    active: { type: Boolean, default: !1 },
+    showActiveIcon: { type: Boolean, default: !1 }
+  },
+  emits: ["open", "add", "remove", "apply", "cancel", "reset-all", "update-clause"],
+  setup(S, { emit: F }) {
+    const N = Object.freeze([
+      { value: "and", label: "AND" },
+      { value: "or", label: "OR" }
+    ]), R = Object.freeze([
+      { value: "contains", label: "Contains" },
+      { value: "in", label: "In" },
+      { value: "equals", label: "Equals" },
+      { value: "not-equals", label: "Not equals" },
+      { value: "starts-with", label: "Starts with" },
+      { value: "ends-with", label: "Ends with" },
+      { value: "gt", label: ">" },
+      { value: "gte", label: ">=" },
+      { value: "lt", label: "<" },
+      { value: "lte", label: "<=" }
+    ]), u = S, i = F, g = q(M, w(null)), m = w({}), d = J(
+      {
+        id: "advanced-filter",
+        role: "dialog",
+        closeOnEscape: !0,
+        closeOnInteractOutside: !0
+      },
+      {
+        onOpen: () => {
+          u.isOpen || i("open"), b();
+        },
+        onClose: () => {
+          u.isOpen && i("cancel");
+        }
+      }
+    ), c = K(d, {
+      placement: "bottom",
+      align: "start",
+      gutter: 10,
+      viewportPadding: 12,
+      zIndex: 180,
+      lockScroll: !1,
+      returnFocus: !0
+    }), p = H({
+      surfaceId: "advanced-filter",
+      rootElementRef: g,
+      floating: c
+    }), V = v(() => d.getTriggerProps({ role: "dialog" })), B = v(() => d.getContentProps({ role: "dialog", tabIndex: -1 })), $ = v(() => d.state.value.open), D = v(() => c.teleportTarget.value), E = v(() => u.columns.map((t) => ({
+      value: t.key,
+      label: t.label
+    })));
+    y(
+      () => u.isOpen,
+      async (t) => {
+        if (t) {
+          b(), d.state.value.open || d.open("programmatic"), await P(), c.contentRef.value?.querySelector('[data-advanced-filter-autofocus="true"]')?.focus({ preventScroll: !0 }), await c.updatePosition();
+          return;
+        }
+        d.state.value.open && d.close("programmatic");
+      },
+      { immediate: !0 }
+    ), y(g, () => {
+      d.state.value.open && b();
+    }), y(
+      () => u.clauses.length,
+      async () => {
+        d.state.value.open && (await P(), await c.updatePosition());
+      }
+    );
+    function b() {
+      m.value = Z(g.value);
+    }
+    function f(t, l, a) {
+      i("update-clause", { clauseId: t, field: l, value: a });
+    }
+    return (t, l) => (o(), n(h, null, [
+      e("button", I({
+        ref: s(c).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: m.value
+      }, V.value), [
+        t.showActiveIcon ? (o(), n("span", U, X)) : A("", !0),
+        G(" " + C(t.buttonLabel), 1)
+      ], 16, Q),
+      (o(), L(z, { to: D.value }, [
+        $.value ? (o(), n("section", I({
+          key: 0,
+          ref: s(c).contentRef,
+          class: "datagrid-advanced-filter",
+          "data-datagrid-overlay-surface": "true",
+          "data-datagrid-overlay-surface-id": "advanced-filter",
+          "data-datagrid-overlay-dragging": s(p).dragging.value ? "true" : "false",
+          style: [s(p).surfaceStyle.value, m.value]
+        }, B.value), [
+          e("header", x, [
+            e("div", {
+              class: "datagrid-overlay-drag-handle",
+              "data-datagrid-overlay-drag-handle": "true",
+              onPointerdown: l[0] || (l[0] = //@ts-ignore
+              (...a) => s(p).handlePointerDown && s(p).handlePointerDown(...a))
+            }, te, 32),
+            e("button", {
+              type: "button",
+              class: "datagrid-advanced-filter__ghost",
+              onClick: l[1] || (l[1] = (a) => i("cancel"))
+            }, " Close ")
+          ]),
+          e("section", le, [
+            e("div", de, [
+              oe,
+              e("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__ghost",
+                disabled: !t.hasAnyFilters,
+                "data-datagrid-advanced-filter-action": "reset-all",
+                onClick: l[2] || (l[2] = (a) => i("reset-all"))
+              }, " Reset all filters ", 8, ie)
+            ]),
+            t.appliedFilterSummaryItems.length > 0 ? (o(), n("div", ne, [
+              (o(!0), n(h, null, T(t.appliedFilterSummaryItems, (a, _) => (o(), n("span", {
+                key: `applied-filter-${_}`,
+                class: "datagrid-advanced-filter__applied-chip"
+              }, C(a), 1))), 128))
+            ])) : (o(), n("div", re, " No filters applied "))
+          ]),
+          e("div", se, [
+            (o(!0), n(h, null, T(t.clauses, (a, _) => (o(), n("div", {
+              key: a.id,
+              class: "datagrid-advanced-filter__row"
+            }, [
+              e("label", ce, [
+                ue,
+                O(k, {
+                  class: "datagrid-advanced-filter__select",
+                  value: a.join,
+                  options: s(N),
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  disabled: _ === 0,
+                  "aria-label": "Join operator",
+                  onCommit: (r) => f(a.id, "join", r)
+                }, null, 8, ["value", "options", "disabled", "onCommit"])
+              ]),
+              e("label", ve, [
+                pe,
+                O(k, {
+                  class: "datagrid-advanced-filter__select",
+                  value: a.columnKey,
+                  options: E.value,
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  "data-advanced-filter-autofocus": _ === 0 ? "true" : null,
+                  "aria-label": "Column",
+                  onCommit: (r) => f(a.id, "columnKey", r)
+                }, null, 8, ["value", "options", "data-advanced-filter-autofocus", "onCommit"])
+              ]),
+              e("label", fe, [
+                _e,
+                O(k, {
+                  class: "datagrid-advanced-filter__select",
+                  value: a.operator,
+                  options: s(R),
+                  "open-on-mount": !1,
+                  "open-on-focus": !1,
+                  "sticky-popover-id": "advanced-filter",
+                  "aria-label": "Condition operator",
+                  onCommit: (r) => f(a.id, "operator", r)
+                }, null, 8, ["value", "options", "onCommit"])
+              ]),
+              e("label", ge, [
+                me,
+                e("input", {
+                  name: `datagrid-advanced-filter-value-${a.id}`,
+                  value: a.value,
+                  type: "text",
+                  placeholder: "Value",
+                  "aria-label": "Condition value",
+                  onInput: (r) => f(a.id, "value", r.target.value)
+                }, null, 40, be)
+              ]),
+              e("div", ye, [
+                e("button", {
+                  type: "button",
+                  class: "datagrid-advanced-filter__ghost datagrid-advanced-filter__ghost--danger",
+                  onClick: (r) => i("remove", a.id)
+                }, C(t.clauses.length <= 1 ? "Clear" : "Remove"), 9, he)
+              ])
+            ]))), 128))
+          ]),
+          e("footer", Ce, [
+            e("button", {
+              type: "button",
+              class: "datagrid-advanced-filter__secondary",
+              onClick: l[3] || (l[3] = (a) => i("add"))
+            }, " Add clause "),
+            e("div", Oe, [
+              e("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__secondary",
+                onClick: l[4] || (l[4] = (a) => i("cancel"))
+              }, " Cancel "),
+              e("button", {
+                type: "button",
+                class: "datagrid-advanced-filter__primary",
+                onClick: l[5] || (l[5] = (a) => i("apply"))
+              }, " Apply ")
+            ])
+          ])
+        ], 16, Y)) : A("", !0)
+      ], 8, ["to"]))
+    ], 64));
+  }
+});
+export {
+  Te as _
+};

package/dist/chunks/{DataGridAggregationsPopover-Bu7nZX7u.js → DataGridAggregationsPopover-BBREw3IM.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 h, unref as f, toDisplayString as k, createBlock as G, Teleport as D, createVNode as C, renderList as I, createCommentVNode as L } from "vue";
+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-BPU8WkWd.js";
+import { _ as O } from "./DataGridFilterableCombobox.vue_vue_type_script_setup_true_lang-_qhryKE2.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"),
@@ -8,7 +8,7 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
 ], -1), M = { class: "datagrid-aggregations__basis" }, Q = /* @__PURE__ */ e("span", { class: "datagrid-aggregations__label" }, "Basis", -1), W = {
   key: 0,
   class: "datagrid-aggregations__list"
-}, X = { class: "datagrid-aggregations__toggle" }, Y = ["checked", "onChange"], Z = { class: "datagrid-aggregations__row-label" }, x = {
+}, X = { class: "datagrid-aggregations__toggle" }, Y = ["name", "checked", "onChange"], Z = { class: "datagrid-aggregations__row-label" }, x = {
   key: 1,
   class: "datagrid-aggregations__empty"
 }, ee = { class: "datagrid-aggregations__footer" }, te = { class: "datagrid-aggregations__footer-actions" }, re = /* @__PURE__ */ V({
@@ -50,7 +50,7 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
       zIndex: 180,
       lockScroll: !1,
       returnFocus: !0
-    }), A = d(() => s.getTriggerProps({ role: "dialog" })), B = d(() => s.getContentProps({ role: "dialog", tabIndex: -1 })), R = d(() => s.state.value.open), S = d(() => r.contentStyle.value), $ = d(() => r.teleportTarget.value);
+    }), A = d(() => s.getTriggerProps({ role: "dialog" })), $ = d(() => s.getContentProps({ role: "dialog", tabIndex: -1 })), B = d(() => s.state.value.open), R = d(() => r.contentStyle.value), S = d(() => r.teleportTarget.value);
     _(
       () => g.isOpen,
       async (t) => {
@@ -76,13 +76,13 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
       return t === "countNonNull" ? "Count non-null" : t.charAt(0).toUpperCase() + t.slice(1);
     }
     function N(t) {
-      return t.map((a) => ({
-        value: a,
-        label: F(a)
+      return t.map((o) => ({
+        value: o,
+        label: F(o)
       }));
     }
-    return (t, a) => (l(), i(y, null, [
-      e("button", h({
+    return (t, o) => (l(), i(y, null, [
+      e("button", k({
         ref: f(r).triggerRef,
         type: "button",
         class: ["datagrid-app-toolbar__button", { "datagrid-app-toolbar__button--active": t.active }],
@@ -91,21 +91,21 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
         style: c.value,
         disabled: t.disabled,
         title: t.disabledReason || void 0
-      }), k(t.buttonLabel), 17, U),
-      (l(), G(D, { to: $.value }, [
-        R.value ? (l(), i("section", h({
+      }), h(t.buttonLabel), 17, U),
+      (l(), G(D, { to: S.value }, [
+        B.value ? (l(), i("section", k({
           key: 0,
           ref: f(r).contentRef,
           class: "datagrid-aggregations",
           "data-datagrid-overlay-surface": "true",
-          style: [S.value, c.value]
-        }, B.value), [
+          style: [R.value, c.value]
+        }, $.value), [
           e("header", H, [
             J,
             e("button", {
               type: "button",
               class: "datagrid-aggregations__ghost",
-              onClick: a[0] || (a[0] = (o) => n("cancel"))
+              onClick: o[0] || (o[0] = (a) => n("cancel"))
             }, " Close ")
           ]),
           e("label", M, [
@@ -118,31 +118,32 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
               "open-on-focus": !1,
               "sticky-popover-id": "aggregations",
               "data-aggregations-autofocus": "true",
-              onCommit: a[1] || (a[1] = (o) => n("update-basis", o))
+              onCommit: o[1] || (o[1] = (a) => n("update-basis", a))
             }, null, 8, ["value", "options"])
           ]),
           t.items.length > 0 ? (l(), i("div", W, [
-            (l(!0), i(y, null, I(t.items, (o) => (l(), i("div", {
-              key: o.key,
+            (l(!0), i(y, null, I(t.items, (a) => (l(), i("div", {
+              key: a.key,
               class: "datagrid-aggregations__row"
             }, [
               e("label", X, [
                 e("input", {
+                  name: `datagrid-aggregations-toggle-${a.key}`,
                   type: "checkbox",
-                  checked: o.enabled,
-                  onChange: (p) => n("toggle-column", o.key, p.target.checked)
+                  checked: a.enabled,
+                  onChange: (p) => n("toggle-column", a.key, p.target.checked)
                 }, null, 40, Y),
-                e("span", Z, k(o.label), 1)
+                e("span", Z, h(a.label), 1)
               ]),
               C(O, {
                 class: "datagrid-aggregations__op",
-                value: o.op,
-                options: N(o.allowedOps),
+                value: a.op,
+                options: N(a.allowedOps),
                 "open-on-mount": !1,
                 "open-on-focus": !1,
                 "sticky-popover-id": "aggregations",
-                disabled: !o.enabled,
-                onCommit: (p) => n("update-op", o.key, p)
+                disabled: !a.enabled,
+                onCommit: (p) => n("update-op", a.key, p)
               }, null, 8, ["value", "options", "disabled", "onCommit"])
             ]))), 128))
           ])) : (l(), i("div", x, " No aggregatable columns in the current grid schema. ")),
@@ -150,18 +151,18 @@ const U = ["disabled", "title"], H = { class: "datagrid-aggregations__header" },
             e("button", {
               type: "button",
               class: "datagrid-aggregations__secondary",
-              onClick: a[2] || (a[2] = (o) => n("clear"))
+              onClick: o[2] || (o[2] = (a) => n("clear"))
             }, " Clear "),
             e("div", te, [
               e("button", {
                 type: "button",
                 class: "datagrid-aggregations__secondary",
-                onClick: a[3] || (a[3] = (o) => n("cancel"))
+                onClick: o[3] || (o[3] = (a) => n("cancel"))
               }, " Cancel "),
               e("button", {
                 type: "button",
                 class: "datagrid-aggregations__primary",
-                onClick: a[4] || (a[4] = (o) => n("apply"))
+                onClick: o[4] || (o[4] = (a) => n("apply"))
               }, " Apply ")
             ])
           ])