@affino/datagrid-vue-app 0.1.34 → 0.1.36

package/dist/DataGrid.d.ts

@@ -35,6 +35,11 @@ export type DataGridFilterCellReader<TRow = unknown> = DataGridBivariantCallback
     row: DataGridRowNode<TRow>,
     columnKey: string
 ], unknown>;
+export type DataGridFilterCellStyleReader<TRow = unknown> = DataGridBivariantCallback<[
+    row: DataGridRowNode<TRow>,
+    columnKey: string,
+    styleKey: string
+], unknown>;
 export type DataGridCellClassResolver<TRow = unknown> = DataGridBivariantCallback<[
     row: DataGridRowNode<TRow>,
     rowIndex: number,
@@ -49,6 +54,7 @@ export type DataGridCellStyleResolver<TRow = unknown> = DataGridBivariantCallbac
 ], CSSProperties | null | undefined>;
 export declare function defineDataGridSelectionCellReader<TRow = unknown>(): <TReader extends DataGridSelectionCellReader<TRow>>(reader: TReader) => TReader;
 export declare function defineDataGridFilterCellReader<TRow = unknown>(): <TReader extends DataGridFilterCellReader<TRow>>(reader: TReader) => TReader;
+export declare function defineDataGridFilterCellStyleReader<TRow = unknown>(): <TReader extends DataGridFilterCellStyleReader<TRow>>(reader: TReader) => TReader;
 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 };
@@ -273,6 +279,10 @@ declare const dataGridProps: {
         readonly type: PropType<DataGridFilterCellReader | undefined>;
         readonly default: undefined;
     };
+    readonly readFilterCellStyle: {
+        readonly type: PropType<DataGridFilterCellStyleReader | undefined>;
+        readonly default: undefined;
+    };
     readonly cellClass: {
         readonly type: PropType<DataGridCellClassResolver | undefined>;
         readonly default: undefined;
@@ -311,7 +321,7 @@ declare const dataGridProps: {
     };
 };
 type DataGridPublicPropsBase = ExtractPublicPropTypes<typeof dataGridProps>;
-export type DataGridProps<TRow = unknown> = Omit<DataGridPublicPropsBase, "rows" | "rowModel" | "clientRowModelOptions" | "computedFields" | "columns" | "plugins" | "state" | "placeholderRows" | "readSelectionCell" | "readFilterCell" | "cellClass" | "cellStyle" | "isCellEditable"> & {
+export type DataGridProps<TRow = unknown> = Omit<DataGridPublicPropsBase, "rows" | "rowModel" | "clientRowModelOptions" | "computedFields" | "columns" | "plugins" | "state" | "placeholderRows" | "readSelectionCell" | "readFilterCell" | "readFilterCellStyle" | "cellClass" | "cellStyle" | "isCellEditable"> & {
     rows?: readonly (TRow | DataGridRowNodeInput<TRow>)[];
     rowModel?: DataGridRowModel<TRow> | undefined;
     clientRowModelOptions?: DataGridAppClientRowModelOptions<TRow> | undefined;
@@ -322,6 +332,7 @@ export type DataGridProps<TRow = unknown> = Omit<DataGridPublicPropsBase, "rows"
     placeholderRows?: DataGridPlaceholderRowsProp<TRow> | undefined;
     readSelectionCell?: DataGridSelectionCellReader<TRow> | undefined;
     readFilterCell?: DataGridFilterCellReader<TRow> | undefined;
+    readFilterCellStyle?: DataGridFilterCellStyleReader<TRow> | undefined;
     cellClass?: DataGridCellClassResolver<TRow> | undefined;
     cellStyle?: DataGridCellStyleResolver<TRow> | undefined;
     isCellEditable?: DataGridCellEditablePredicate<TRow> | undefined;
@@ -560,6 +571,10 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
         readonly type: PropType<DataGridFilterCellReader | undefined>;
         readonly default: undefined;
     };
+    readonly readFilterCellStyle: {
+        readonly type: PropType<DataGridFilterCellStyleReader | undefined>;
+        readonly default: undefined;
+    };
     readonly cellClass: {
         readonly type: PropType<DataGridCellClassResolver | undefined>;
         readonly default: undefined;
@@ -836,6 +851,10 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
         readonly type: PropType<DataGridFilterCellReader | undefined>;
         readonly default: undefined;
     };
+    readonly readFilterCellStyle: {
+        readonly type: PropType<DataGridFilterCellStyleReader | undefined>;
+        readonly default: undefined;
+    };
     readonly cellClass: {
         readonly type: PropType<DataGridCellClassResolver | undefined>;
         readonly default: undefined;
@@ -894,6 +913,7 @@ declare const DataGridRuntimeComponent: import("vue").DefineComponent<{
 }, {
     readonly rows: readonly unknown[];
     readonly readFilterCell: DataGridFilterCellReader<unknown> | undefined;
+    readonly readFilterCellStyle: DataGridFilterCellStyleReader<unknown> | undefined;
     readonly columns: readonly DataGridAppColumnInput<unknown>[];
     readonly clientRowModelOptions: DataGridAppClientRowModelOptions<unknown> | undefined;
     readonly rowHeightMode: "fixed" | "auto";

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export declare const DataGrid: import("./DataGrid").DataGridComponent;
 export { default as DataGridModuleHost } from "./host/DataGridModuleHost";
 export { defineDataGridColumns } from "./config/dataGridFormulaOptions";
-export { defineDataGridCellClassResolver, defineDataGridCellStyleResolver, defineDataGridComponent, defineDataGridFilterCellReader, defineDataGridSelectionCellReader, defineDataGridStructuralRowActionHandler, useDataGridRef, } from "./DataGrid";
-export type { DataGridCellClassResolver, DataGridCellStyleResolver, DataGridComponent, DataGridComponentFor, DataGridExposed, DataGridFilterCellReader, DataGridInstance, DataGridProps, DataGridSelectionCellReader, } from "./DataGrid";
+export { defineDataGridCellClassResolver, defineDataGridCellStyleResolver, defineDataGridComponent, defineDataGridFilterCellReader, defineDataGridFilterCellStyleReader, defineDataGridSelectionCellReader, defineDataGridStructuralRowActionHandler, useDataGridRef, } from "./DataGrid";
+export type { DataGridCellClassResolver, DataGridCellStyleResolver, DataGridComponent, DataGridComponentFor, DataGridExposed, DataGridFilterCellReader, DataGridFilterCellStyleReader, DataGridInstance, DataGridProps, DataGridSelectionCellReader, } from "./DataGrid";
 export type { DataGridStructuralRowActionContext, DataGridStructuralRowActionHandler, DataGridStructuralRowActionId, } from "./dataGridStructuralRowActions";
 export type { DataGridAppClientRowModelOptions, DataGridAppCellRenderer, DataGridAppCellRendererContext, DataGridAppGroupCellRenderer, DataGridAppGroupCellRendererContext, DataGridAppCellRendererInteractiveContext, DataGridAppRowSurfaceContext, DataGridAppRowSurfaceKind, DataGridAppColumnInput, DataGridDeclarativeFormulaOptions, } from "./config/dataGridFormulaOptions";
 export type { DataGridAppToolbarModule, } from "./host/DataGridModuleHost";

package/dist/index.js

@@ -1,19 +1,19 @@
-import { defineComponent as xe, ref as D, provide as Xe, computed as m, watch as S, onBeforeUnmount as we, h as ge, mergeProps as Ze, toRef as Me } from "vue";
+import { defineComponent as Fe, ref as D, provide as Xe, computed as m, watch as S, onBeforeUnmount as we, h as ge, mergeProps as Ze, toRef as Me } from "vue";
 import { useDataGridRuntime as et } from "@affino/datagrid-vue";
 import { useDataGridAppSelection as tt, useDataGridAppRowSelection as ot } from "@affino/datagrid-vue/app";
 import { r as nt, g as rt, h as lt, i as at, b as it, d as ut, c as st, j as dt, u as ct, D as ft } from "./chunks/useDataGridAppRowModel-JUDjg-Fq.js";
-import { a as Ro, k as Mo } from "./chunks/useDataGridAppRowModel-JUDjg-Fq.js";
+import { a as Mo, k as Oo } from "./chunks/useDataGridAppRowModel-JUDjg-Fq.js";
 import { s as mt } from "./chunks/DataGridTableStage.vue_vue_type_script_setup_true_lang-Q2ri6J1V.js";
-import { applyGridTheme as yt, resolveGridThemeTokens as vt, defaultStyleConfig as x, sugarTheme as je, industrialNeutralTheme as Oe } from "@affino/datagrid-theme";
+import { applyGridTheme as yt, resolveGridThemeTokens as vt, defaultStyleConfig as F, sugarTheme as xe, industrialNeutralTheme as Oe } from "@affino/datagrid-theme";
 import { d as gt } from "./chunks/dataGridOverlayThemeVars-vzY74EIz.js";
 function uo() {
   return (e) => e;
 }
 const wt = {
-  default: x,
+  default: F,
   "industrial-neutral": Oe,
   industrialNeutral: Oe,
-  sugar: je
+  sugar: xe
 };
 function pt(e, t) {
   if (!e && !t)
@@ -46,13 +46,13 @@ function St(e) {
   return !e || typeof e != "object" ? !1 : "tokens" in e || "tokenVariants" in e || "activeTokenVariant" in e || "defaultTokenVariant" in e || "inheritThemeFromDocument" in e || "documentDarkClass" in e || "grid" in e || "header" in e || "body" in e || "group" in e || "summary" in e || "state" in e;
 }
 function ht(e) {
-  return e == null ? x : typeof e == "string" ? e === "sugar" ? de(x, je) : wt[e] ?? x : St(e) ? de(x, e) : de(x, {
+  return e == null ? F : typeof e == "string" ? e === "sugar" ? de(F, xe) : wt[e] ?? F : St(e) ? de(F, e) : de(F, {
     tokens: e
   });
 }
 function bt(e) {
   const t = ht(e);
-  return vt(t ?? x, {
+  return vt(t ?? F, {
     document: typeof document > "u" ? void 0 : document
   });
 }
@@ -122,7 +122,7 @@ function At(e) {
     buttonLabel: fe
   };
 }
-const Bt = "all", Fe = {
+const Bt = "all", je = {
   all: "columns",
   rows: "none",
   columns: "columns",
@@ -132,7 +132,7 @@ function Ge(e) {
   return e === "rows" || e === "columns" || e === "none" || e === "all" ? e : Bt;
 }
 function Gt(e, t) {
-  return e === "columns" || e === "none" ? e : Fe[t];
+  return e === "columns" || e === "none" ? e : je[t];
 }
 function De(e, t) {
   return e !== "none" || t === "columns";
@@ -150,7 +150,7 @@ function Pe(e) {
 }
 function Dt(e) {
   if (typeof e == "string") {
-    const o = Ge(e), u = Fe[o];
+    const o = Ge(e), u = je[o];
     return Pe({
       body: o,
       header: u,
@@ -198,11 +198,11 @@ function X(e) {
     state: Lt(e.state)
   };
 }
-function xt(e) {
+function Ft(e) {
   return typeof e == "object" && e !== null;
 }
 function Ke(e, t, r) {
-  const o = xt(e) ? e : null, u = t(o && "state" in o ? o.state : e, r);
+  const o = Ft(e) ? e : null, u = t(o && "state" in o ? o.state : e, r);
   if (!u)
     return null;
   const a = o?.viewMode, v = a === "gantt" ? "gantt" : a === "table" ? "table" : void 0;
@@ -211,10 +211,10 @@ function Ke(e, t, r) {
     ...v ? { viewMode: v } : {}
   });
 }
-function jt(e) {
+function xt(e) {
   return JSON.stringify(X(e));
 }
-function Ft(e, t, r) {
+function jt(e, t, r) {
   if (typeof e != "string" || e.trim().length === 0)
     return null;
   try {
@@ -227,7 +227,7 @@ function so(e, t, r) {
   if (!e || typeof t != "string" || t.trim().length === 0)
     return !1;
   try {
-    return e.setItem(t, jt(r)), !0;
+    return e.setItem(t, xt(r)), !0;
   } catch {
     return !1;
   }
@@ -237,7 +237,7 @@ function co(e, t, r, o) {
     return null;
   try {
     const u = e.getItem(t);
-    return u ? Ft(u, r, o) : null;
+    return u ? jt(u, r, o) : null;
   } catch {
     return null;
   }
@@ -298,7 +298,7 @@ function Ht(e, t) {
   }
   return t === "pagination" && (r.rows = !1), r;
 }
-const zt = xe({
+const zt = Fe({
   name: "DataGridRuntimeHost",
   inheritAttrs: !1,
   props: {
@@ -577,7 +577,7 @@ function Et(e) {
     for (const [i, y] of Object.entries(n.pins))
       d.columns.setPin(i, y);
     return !0;
-  }, j = () => {
+  }, x = () => {
     if (b) {
       const n = b, d = c();
       if (d) {
@@ -601,7 +601,7 @@ function Et(e) {
   }, V = () => {
     const n = c();
     !n || e.props.aggregationModel === void 0 || n.rows.setAggregationModel(e.props.aggregationModel ?? null);
-  }, F = () => {
+  }, j = () => {
     const n = c();
     !n || e.props.pivotModel === void 0 || n.pivot.setModel(e.props.pivotModel ?? null);
   }, B = () => {
@@ -664,7 +664,7 @@ function Et(e) {
       g();
     }), r = n.columnModel.subscribe(() => {
       g();
-    }), _(), B(), H(), E(), V(), F(), W(), j(), g(), e.emit.ready({ api: n.api }));
+    }), _(), B(), H(), E(), V(), j(), W(), x(), g(), e.emit.ready({ api: n.api }));
   }, q = () => c()?.state.get() ?? null, te = (n, d) => c()?.state.migrate(n, d) ?? null, K = (n) => z(n) ? (u = C({
     columnState: n,
     columnOrder: null,
@@ -694,13 +694,13 @@ function Et(e) {
   ), S(
     () => e.props.columns,
     () => {
-      u = null, a = null, _(), B(), j(), g();
+      u = null, a = null, _(), B(), x(), g();
     },
     { deep: !0 }
   ), S(
     () => [e.props.state, e.props.stateOptions],
     () => {
-      _(), B(), H(), E(), V(), F(), W(), j(), g();
+      _(), B(), H(), E(), V(), j(), W(), x(), g();
     },
     { deep: !0 }
   ), S(
@@ -712,7 +712,7 @@ function Et(e) {
       e.props.columnPins
     ],
     () => {
-      B(), j(), g();
+      B(), x(), g();
     },
     { deep: !0 }
   ), S(
@@ -736,7 +736,7 @@ function Et(e) {
   ), S(
     () => e.props.pivotModel,
     () => {
-      F(), g();
+      j(), g();
     },
     { deep: !0 }
   ), S(
@@ -819,6 +819,9 @@ function vo() {
 function go() {
   return (e) => e;
 }
+function wo() {
+  return (e) => e;
+}
 function Nt(e, t) {
   if (!t || typeof e != "object" || e === null)
     return;
@@ -1180,6 +1183,10 @@ const Zt = {
     type: Function,
     default: void 0
   },
+  readFilterCellStyle: {
+    type: Function,
+    default: void 0
+  },
   cellClass: {
     type: Function,
     default: void 0
@@ -1216,7 +1223,7 @@ const Zt = {
     type: Array,
     default: void 0
   }
-}, Ie = xe({
+}, Ie = Fe({
   name: "DataGrid",
   inheritAttrs: !1,
   props: Zt,
@@ -1245,16 +1252,20 @@ const Zt = {
       L.value,
       e.pageSize,
       e.currentPage
-    )), H = m(() => rt(e.columnMenu)), Z = m(() => lt(e.cellMenu)), ee = m(() => at(e.rowIndexMenu)), z = m(() => Kt(e.columnLayout)), T = m(() => it(e.columnReorder)), U = m(() => It(e.aggregations)), j = m(() => Ct(e.advancedFilter)), E = m(() => At(e.findReplace)), V = m(() => Dt(e.gridLines)), F = m(() => Rt(e.groupBy)), B = m(() => e.state ?? P.value), _ = m(() => e.sortModel !== void 0 ? e.sortModel : B.value?.rows?.snapshot?.sortModel), W = m(() => e.filterModel !== void 0 ? e.filterModel : B.value?.rows?.snapshot?.filterModel ?? null), N = m(() => e.groupBy !== void 0 ? F.value ?? null : B.value?.rows?.snapshot?.groupBy ?? null), q = m(() => e.pivotModel !== void 0 ? e.pivotModel : B.value?.rows?.snapshot?.pivotModel ?? null), te = m(() => Ht(e.virtualization, L.value)), K = m(() => Pt(e.layoutMode, e.minRows, e.maxRows)), oe = m(() => mt(e.placeholderRows)), ne = m(() => ut(e.rowReorder)), J = m(() => {
+    )), H = m(() => rt(e.columnMenu)), Z = m(() => lt(e.cellMenu)), ee = m(() => at(e.rowIndexMenu)), z = m(() => Kt(e.columnLayout)), T = m(() => it(e.columnReorder)), U = m(() => It(e.aggregations)), x = m(() => Ct(e.advancedFilter)), E = m(() => At(e.findReplace)), V = m(() => Dt(e.gridLines)), j = m(() => Rt(e.groupBy)), B = m(() => e.state ?? P.value), _ = m(() => e.sortModel !== void 0 ? e.sortModel : B.value?.rows?.snapshot?.sortModel), W = m(() => e.filterModel !== void 0 ? e.filterModel : B.value?.rows?.snapshot?.filterModel ?? null), N = m(() => e.groupBy !== void 0 ? j.value ?? null : B.value?.rows?.snapshot?.groupBy ?? null), q = m(() => e.pivotModel !== void 0 ? e.pivotModel : B.value?.rows?.snapshot?.pivotModel ?? null), te = m(() => Ht(e.virtualization, L.value)), K = m(() => Pt(e.layoutMode, e.minRows, e.maxRows)), oe = m(() => mt(e.placeholderRows)), ne = m(() => ut(e.rowReorder)), J = m(() => {
       const l = e.clientRowModelOptions?.readFilterCell;
       return qt(
         e.columns,
         e.readFilterCell ?? l
       );
-    }), re = m(() => J.value ? {
-      ...e.clientRowModelOptions ?? {},
-      readFilterCell: J.value
-    } : e.clientRowModelOptions), k = m(() => st({
+    }), re = m(() => {
+      const l = e.readFilterCellStyle ?? e.clientRowModelOptions?.readFilterCellStyle;
+      return !J.value && !l ? e.clientRowModelOptions : {
+        ...e.clientRowModelOptions ?? {},
+        readFilterCell: J.value,
+        readFilterCellStyle: l
+      };
+    }), k = m(() => st({
       columns: e.columns,
       clientRowModelOptions: re.value,
       computedFields: e.computedFields,
@@ -1289,7 +1300,7 @@ const Zt = {
         return e.filterModel;
       },
       get groupBy() {
-        return F.value;
+        return j.value;
       },
       get aggregationModel() {
         return e.aggregationModel;
@@ -1501,7 +1512,7 @@ const Zt = {
         columnLayout: z.value,
         columnReorder: T.value,
         aggregations: U.value,
-        advancedFilter: j.value,
+        advancedFilter: x.value,
         findReplace: E.value,
         gridLines: V.value,
         rowHeightMode: e.rowHeightMode,
@@ -1573,29 +1584,30 @@ const Zt = {
     };
   }
 });
-function wo() {
+function po() {
   return D(null);
 }
-function po() {
+function So() {
   return Ie;
 }
-const So = Ie;
+const ho = Ie;
 export {
-  So as DataGrid,
-  Ro as DataGridModuleHost,
+  ho as DataGrid,
+  Mo as DataGridModuleHost,
   fo as clearDataGridSavedViewInStorage,
   Ie as default,
-  vo as defineDataGridCellClassResolver,
-  go as defineDataGridCellStyleResolver,
-  Mo as defineDataGridColumns,
-  po as defineDataGridComponent,
+  go as defineDataGridCellClassResolver,
+  wo as defineDataGridCellStyleResolver,
+  Oo as defineDataGridColumns,
+  So as defineDataGridComponent,
   yo as defineDataGridFilterCellReader,
+  vo as defineDataGridFilterCellStyleReader,
   mo as defineDataGridSelectionCellReader,
   uo as defineDataGridStructuralRowActionHandler,
   Ke as migrateDataGridSavedView,
-  Ft as parseDataGridSavedView,
+  jt as parseDataGridSavedView,
   co as readDataGridSavedViewFromStorage,
-  jt as serializeDataGridSavedView,
-  wo as useDataGridRef,
+  xt as serializeDataGridSavedView,
+  po as useDataGridRef,
   so as writeDataGridSavedViewToStorage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affino/datagrid-vue-app",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "Declarative Vue DataGrid component for Affino",
   "type": "module",
   "main": "dist/index.js",
@@ -41,9 +41,9 @@
   "dependencies": {
     "@affino/menu-vue": "^2.1.1",
     "@affino/popover-vue": "^1.1.0",
-    "@affino/datagrid-theme": "0.2.2",
-    "@affino/datagrid-vue": "0.3.22",
     "@affino/datagrid-chrome": "0.1.1",
+    "@affino/datagrid-theme": "0.2.2",
+    "@affino/datagrid-vue": "0.3.24",
     "@affino/datagrid-gantt": "0.1.2"
   },
   "peerDependencies": {