@affino/datagrid-vue-app 0.1.51 → 0.1.53

package/README.md

@@ -1482,11 +1482,13 @@ The object form controls placeholder text, explicit searchable columns, and matc
     placeholder: 'Search accounts',
     columns: ['service', 'owner', 'region'],
     mode: 'tokens',
+    applyMode: 'debounce',
+    debounceMs: 400,
   }"
 />
 ```
 
-This prop is a shell convenience API. Typing in the input updates `filterModel.quickFilter`; clearing the input removes it from the snapshot. It does not add a separate `update:quickFilter` event or a second state channel.
+This prop is a shell convenience API. By default, typing in the input updates `filterModel.quickFilter` immediately. `applyMode: 'debounce'` commits after `debounceMs`, while `applyMode: 'manual'` keeps a local draft until Enter or the built-in Apply button. Clearing the input removes quick filter from the snapshot. It does not add a separate `update:quickFilter` event or a second state channel.
 
 Controlled consumers can still manage quick filter directly through the same `filter-model` contract:
 

package/dist/DataGrid.d.ts

@@ -7,6 +7,7 @@ import { type DataGridAppClientRowModelOptions, type DataGridAppColumnInput } fr
 import { type DataGridChromeProp } from "./config/dataGridChrome";
 import { type DataGridThemeProp } from "./theme/dataGridTheme";
 import { type DataGridGroupByProp, type DataGridPaginationProp } from "./config/dataGridPublicProps";
+import { type DataGridStatePersistenceProp } from "./config/dataGridStatePersistence";
 import { type DataGridAdvancedFilterProp } from "./config/dataGridAdvancedFilter";
 import { type DataGridQuickFilterProp } from "./config/dataGridQuickFilter";
 import { type DataGridFindReplaceProp } from "./config/dataGridFindReplace";
@@ -59,7 +60,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">;
+export type DataGridExposedRuntime<TRow = unknown> = Pick<UseDataGridRuntimeResult<TRow>, "api" | "syncBodyRowsInRange" | "setViewportRange" | "setVirtualWindowRange" | "setRows" | "rowPartition" | "virtualWindow" | "columnSnapshot" | "getBodyRowAtIndex" | "resolveBodyRowIndexById" | "getViewportPosition" | "setViewportPosition" | "scrollToRow" | "scrollToColumn" | "scrollToCell">;
 declare const dataGridProps: {
     readonly rows: {
         readonly type: PropType<readonly unknown[]>;
@@ -237,6 +238,10 @@ declare const dataGridProps: {
         readonly type: PropType<DataGridSetStateOptions | null | undefined>;
         readonly default: undefined;
     };
+    readonly statePersistence: {
+        readonly type: PropType<DataGridStatePersistenceProp>;
+        readonly default: undefined;
+    };
     readonly rowHeightMode: {
         readonly type: PropType<"fixed" | "auto">;
         readonly default: "fixed";
@@ -561,6 +566,10 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
         readonly type: PropType<DataGridSetStateOptions | null | undefined>;
         readonly default: undefined;
     };
+    readonly statePersistence: {
+        readonly type: PropType<DataGridStatePersistenceProp>;
+        readonly default: undefined;
+    };
     readonly rowHeightMode: {
         readonly type: PropType<"fixed" | "auto">;
         readonly default: "fixed";
@@ -862,6 +871,10 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
         readonly type: PropType<DataGridSetStateOptions | null | undefined>;
         readonly default: undefined;
     };
+    readonly statePersistence: {
+        readonly type: PropType<DataGridStatePersistenceProp>;
+        readonly default: undefined;
+    };
     readonly rowHeightMode: {
         readonly type: PropType<"fixed" | "auto">;
         readonly default: "fixed";
@@ -1057,6 +1070,7 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
     readonly columnWidths: Readonly<Record<string, number | null>> | null | undefined;
     readonly columnPins: Readonly<Record<string, DataGridColumnPin>> | null | undefined;
     readonly stateOptions: DataGridSetStateOptions | null | undefined;
+    readonly statePersistence: DataGridStatePersistenceProp;
 }, {}>;
 type DataGridRuntimeStatics = {
     [K in keyof typeof DataGridRuntimeComponent]: (typeof DataGridRuntimeComponent)[K];

package/dist/chunks/{DataGridGanttStageEntry-DQBFS3-m.js → DataGridGanttStageEntry-BrCpep-f.js}

@@ -3333,6 +3333,7 @@ const ci = "affino-datagrid-vue-app-styles", on = `
   box-shadow: 0 0 0 2px var(--datagrid-column-menu-focus-ring);
 }
 
+.datagrid-app-quick-filter__apply,
 .datagrid-app-quick-filter__clear {
   flex: 0 0 auto;
   height: calc(var(--datagrid-app-toolbar-button-height, 32px) - 10px);
@@ -3347,11 +3348,17 @@ const ci = "affino-datagrid-vue-app-styles", on = `
   cursor: pointer;
 }
 
+.datagrid-app-quick-filter__apply {
+  color: var(--datagrid-text-primary);
+}
+
+.datagrid-app-quick-filter__apply:hover:not(:disabled),
 .datagrid-app-quick-filter__clear:hover:not(:disabled) {
   background: color-mix(in srgb, var(--datagrid-column-menu-item-hover-bg) 72%, transparent);
   color: var(--datagrid-text-primary);
 }
 
+.datagrid-app-quick-filter__apply:disabled,
 .datagrid-app-quick-filter__clear:disabled {
   opacity: 0.45;
   cursor: not-allowed;

package/dist/chunks/DataGridQuickFilterInput-9KGwF8HM.js

@@ -0,0 +1,83 @@
+import { defineComponent as l, h as e } from "vue";
+const u = l({
+  name: "DataGridQuickFilterInput",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      required: !0
+    },
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    dirty: {
+      type: Boolean,
+      default: !1
+    },
+    manual: {
+      type: Boolean,
+      default: !1
+    },
+    onUpdateValue: {
+      type: Function,
+      required: !0
+    },
+    onApply: {
+      type: Function,
+      default: void 0
+    },
+    onClear: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(a) {
+    return () => e("label", {
+      class: [
+        "datagrid-app-quick-filter",
+        a.active ? "datagrid-app-quick-filter--active" : null
+      ]
+    }, [
+      e("span", {
+        class: "datagrid-app-quick-filter__label"
+      }, "Quick filter"),
+      e("input", {
+        class: "datagrid-app-quick-filter__input",
+        type: "search",
+        value: a.value,
+        placeholder: a.placeholder,
+        "aria-label": "Quick filter",
+        "data-datagrid-quick-filter-input": "true",
+        onInput: (t) => {
+          a.onUpdateValue(t.target?.value ?? "");
+        },
+        onKeydown: (t) => {
+          t.key !== "Enter" || !a.manual || (t.preventDefault(), a.onApply?.());
+        }
+      }),
+      a.manual ? e("button", {
+        type: "button",
+        class: "datagrid-app-quick-filter__apply",
+        disabled: !a.dirty,
+        "aria-label": "Apply quick filter",
+        "data-datagrid-quick-filter-apply": "true",
+        onClick: () => a.onApply?.()
+      }, "Apply") : null,
+      e("button", {
+        type: "button",
+        class: "datagrid-app-quick-filter__clear",
+        disabled: !a.active,
+        "aria-label": "Clear quick filter",
+        "data-datagrid-quick-filter-clear": "true",
+        onClick: () => a.onClear()
+      }, "Clear")
+    ]);
+  }
+});
+export {
+  u as D
+};