@affino/datagrid-vue-app 0.1.49 → 0.1.50

package/README.md

@@ -82,6 +82,7 @@ Use subpath imports when you want optional feature modules explicitly:
 
 - `@affino/datagrid-vue-app/gantt`
 - `@affino/datagrid-vue-app/advanced-filter`
+- `@affino/datagrid-vue-app/quick-filter`
 - `@affino/datagrid-vue-app/find-replace`
 - `@affino/datagrid-vue-app/aggregations`
 
@@ -89,7 +90,7 @@ Practical implications:
 
 - ordinary `DataGrid` table usage no longer needs to pull `@affino/datagrid-gantt` through the root runtime graph
 - gantt stage code is loaded lazily only when the gantt view is rendered
-- advanced filter, find / replace, and aggregations remain available as optional package entrypoints instead of mandatory consumer-side chunking requirements
+- advanced filter, quick filter, find / replace, and aggregations remain available as optional package entrypoints instead of mandatory consumer-side chunking requirements
 
 Consumer-side chunk tuning can still help, but it is now an optimization rather than a workaround for the package boundary.
 
@@ -470,6 +471,7 @@ const toolbarModules: readonly DataGridAppToolbarModule[] = [
     :columns="columns"
     :toolbar-modules="toolbarModules"
     column-layout
+    quick-filter
     advanced-filter
   />
 </template>
@@ -567,6 +569,7 @@ Enable the built-in header menu with one prop:
     :columns="columns"
     column-menu
     column-layout
+    quick-filter
     advanced-filter
     aggregations
     row-hover
@@ -1458,6 +1461,54 @@ 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.
 
+Quick filter can be enabled as a built-in toolbar control next to `advanced-filter`:
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  quick-filter
+  advanced-filter
+/>
+```
+
+The object form controls placeholder text, explicit searchable columns, and matching mode:
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :quick-filter="{
+    placeholder: 'Search accounts',
+    columns: ['service', 'owner', 'region'],
+    mode: 'tokens',
+  }"
+/>
+```
+
+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.
+
+Controlled consumers can still manage quick filter directly through the same `filter-model` contract:
+
+```vue
+<DataGrid
+  :rows="rows"
+  :columns="columns"
+  :filter-model="{
+    columnFilters: {},
+    advancedFilters: {},
+    advancedExpression: null,
+    quickFilter: {
+      query: 'platform eu',
+      columns: ['service', 'owner', 'region'],
+      mode: 'tokens',
+    },
+  }"
+/>
+```
+
+The app facade remains `filterModel`-first. `quick-filter` only drives the existing filter snapshot, so quick filter stays serializable and aligned with the core projection/filter pipeline. See [DataGrid Quick Filter](https://github.com/affinio/affinio/blob/main/docs/datagrid-quick-filter.md).
+
 Controlled state:
 
 ```vue

package/dist/DataGrid.d.ts

@@ -8,6 +8,7 @@ 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";
+import { type DataGridQuickFilterProp } from "./config/dataGridQuickFilter";
 import { type DataGridFindReplaceProp } from "./config/dataGridFindReplace";
 import { type DataGridGridLinesProp } from "./config/dataGridGridLines";
 import { type DataGridLayoutMode } from "./config/dataGridLayout";
@@ -140,6 +141,10 @@ declare const dataGridProps: {
         readonly type: PropType<DataGridAdvancedFilterProp | undefined>;
         readonly default: undefined;
     };
+    readonly quickFilter: {
+        readonly type: PropType<DataGridQuickFilterProp | undefined>;
+        readonly default: undefined;
+    };
     readonly findReplace: {
         readonly type: PropType<DataGridFindReplaceProp | undefined>;
         readonly default: undefined;
@@ -460,6 +465,10 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
         readonly type: PropType<DataGridAdvancedFilterProp | undefined>;
         readonly default: undefined;
     };
+    readonly quickFilter: {
+        readonly type: PropType<DataGridQuickFilterProp | undefined>;
+        readonly default: undefined;
+    };
     readonly findReplace: {
         readonly type: PropType<DataGridFindReplaceProp | undefined>;
         readonly default: undefined;
@@ -757,6 +766,10 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
         readonly type: PropType<DataGridAdvancedFilterProp | undefined>;
         readonly default: undefined;
     };
+    readonly quickFilter: {
+        readonly type: PropType<DataGridQuickFilterProp | undefined>;
+        readonly default: undefined;
+    };
     readonly findReplace: {
         readonly type: PropType<DataGridFindReplaceProp | undefined>;
         readonly default: undefined;
@@ -1000,6 +1013,7 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
     readonly pagination: DataGridPaginationProp | undefined;
     readonly rowModel: DataGridRowModel<unknown> | undefined;
     readonly aggregations: DataGridAggregationsProp | undefined;
+    readonly quickFilter: DataGridQuickFilterProp | undefined;
     readonly reportFillWarning: ((message: string) => void) | undefined;
     readonly sortModel: readonly DataGridSortState[] | undefined;
     readonly filterModel: DataGridFilterSnapshot | null | undefined;

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

@@ -3289,6 +3289,74 @@ const ci = "affino-datagrid-vue-app-styles", on = `
   color: var(--datagrid-accent-strong);
 }
 
+.datagrid-app-quick-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 220px;
+  height: var(--datagrid-app-toolbar-button-height, 32px);
+  padding: 0 6px 0 var(--datagrid-app-toolbar-button-padding-inline, 12px);
+  border: 1px solid var(--datagrid-filter-trigger-border);
+  border-radius: 8px;
+  background: var(--datagrid-editor-bg);
+  color: var(--datagrid-text-primary);
+}
+
+.datagrid-app-quick-filter--active {
+  border-color: color-mix(in srgb, var(--datagrid-accent-strong) 46%, var(--datagrid-filter-trigger-border));
+  background: color-mix(in srgb, var(--datagrid-accent-strong) 10%, var(--datagrid-editor-bg));
+}
+
+.datagrid-app-quick-filter__label {
+  flex: 0 0 auto;
+  color: var(--datagrid-text-muted);
+  font-size: var(--datagrid-app-toolbar-button-font-size, 12px);
+  font-weight: 600;
+}
+
+.datagrid-app-quick-filter__input {
+  min-width: 0;
+  width: 160px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--datagrid-text-primary);
+  font: inherit;
+  font-size: var(--datagrid-app-toolbar-button-font-size, 12px);
+}
+
+.datagrid-app-quick-filter__input::placeholder {
+  color: var(--datagrid-text-muted);
+}
+
+.datagrid-app-quick-filter:focus-within {
+  box-shadow: 0 0 0 2px var(--datagrid-column-menu-focus-ring);
+}
+
+.datagrid-app-quick-filter__clear {
+  flex: 0 0 auto;
+  height: calc(var(--datagrid-app-toolbar-button-height, 32px) - 10px);
+  padding: 0 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--datagrid-text-muted);
+  font: inherit;
+  font-size: var(--datagrid-app-toolbar-button-font-size, 12px);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.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__clear:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 .datagrid-overlay-drag-handle {
   display: flex;
   flex-direction: column;

package/dist/chunks/DataGridQuickFilterInput-TYJI9vo6.js

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